Skip to content

Commit ea3f5bf

Browse files
DatBogieDatBogie
committed
Filter categories + png -> webp
1 parent 840ac16 commit ea3f5bf

7 files changed

Lines changed: 189 additions & 33 deletions

File tree

‎index.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,15 @@
2828
<button id="tag-filter-type">Filter Type: ${type}</button>
2929
</div>
3030
<div class="filter-tags">
31-
<div class="filter-tag" id="template-tag">
32-
<input id="enabled" type="checkbox">
33-
<div class="tag-icon"></div>
34-
<span class="tag-label">Tag</span>
31+
<div class="filter-category details open" id="template-category">
32+
<button class="summary" id="filter-category-title">Category</button>
33+
<div class="content">
34+
<div class="filter-tag" id="template-tag">
35+
<input id="enabled" type="checkbox">
36+
<div class="tag-icon"></div>
37+
<span class="tag-label">Tag</span>
38+
</div>
39+
</div>
3540
</div>
3641
</div>
3742
</div>

‎index.js‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const urlParams = new URLSearchParams(document.location.search);
1515
if (urlParams.get("tab"))
1616
selectedTab=urlParams.get("tab");
1717

18-
const LevelData = await getLevelData(function(levelData,levelTags){
18+
const LevelData = await getLevelData(function(levelData,levelTags,tagData){
1919
const cardTemplate = document.getElementById("level-card-template");
2020
levelData.forEach((level)=>{
2121
const card = cardTemplate.cloneNode(true);
@@ -32,16 +32,18 @@ const LevelData = await getLevelData(function(levelData,levelTags){
3232
const seizure = card.querySelector("#seizure-warning");
3333
if (!level["Tags"].includes("seizure")) seizure.style.display = "none";
3434
const diff = card.querySelector("#difficulty-indicator");
35-
diff.title = level["Difficulty"];
35+
diff.title = `Difficulty: ${level["Difficulty"]}`;
3636
diff.src = `./assets/diff-indicators/${level["Difficulty"]}.svg`;
37+
level["Tags"].push(`difficulty: ${level["Difficulty"].toLowerCase().replaceAll(" ","-")}`);
3738
const icon = card.querySelector(".level-icon");
3839
// var iconSrc = "assets/adofai-levels/"+level["Name"]+"-1.png";
39-
var iconSrc = "https://assets.datbogie.org/"+level["Name"]+"-1.png";
40+
var iconSrc = encodeURI("https://assets.datbogie.org/"+level["Name"]+"-1.webp").replaceAll("?","%3F");
4041
icon.src = iconSrc;
4142
level["Tags"].forEach(tag=>{
4243
const newTag = cardTagTemplate.cloneNode(true);
4344
newTag.id = "";
4445
newTag.title = tag;
46+
newTag.style.backgroundColor = tag["Color"] || "var(--accent)";
4547
cardTagTemplate.parentElement.appendChild(newTag);
4648
});
4749
cardTagTemplate.remove();
@@ -128,24 +130,58 @@ const LevelData = await getLevelData(function(levelData,levelTags){
128130
});
129131
cardTemplate.parentElement.appendChild(card);
130132
});
133+
const tempCat = document.getElementById("template-category");
131134
const tempTag = document.getElementById("template-tag");
132135
for (const tag in levelTags) {
136+
var category = "Other";
137+
var tagColor = "var(--accent)";
138+
var tagDesc = "";
139+
if (tagData[tag] !== undefined) {
140+
category = tagData[tag]["Category"];
141+
tagColor = tagData[tag]["Color"];
142+
tagDesc = tagData[tag]["Description"];
143+
}
144+
var cat = document.querySelector("#filter-cat-"+category);
145+
if (cat === null) {
146+
cat = tempCat.cloneNode(true);
147+
cat.querySelector("#template-tag").remove();
148+
cat.id = "filter-cat-"+category;
149+
cat.querySelector(".summary").textContent = category;
150+
tempCat.parentElement.appendChild(cat);
151+
}
133152
const newTag = tempTag.cloneNode(true);
134153
newTag.id = "";
154+
newTag.querySelector(".tag-icon").style.backgroundColor = tagColor;
155+
newTag.title = tagDesc;
135156
const checkBox = newTag.querySelector("#enabled");
136157
newTag.querySelector(".tag-label").textContent = tag;
137158
newTag.addEventListener("click",()=>{
138159
checkBox.checked = !checkBox.checked;
139160
filterByCurrentTerm()
140161
});
141-
tempTag.parentElement.appendChild(newTag);
162+
cat.querySelector(".content").appendChild(newTag);
142163
};
143164
tempTag.remove();
165+
tempCat.remove();
144166
cardTemplate.remove();
167+
filterByCurrentTerm();
168+
169+
document.querySelectorAll(".details").forEach(det=>{
170+
const summ = det.querySelector(".summary");
171+
const cont = det.querySelector(".content");
172+
if (det.classList.contains("open"))
173+
cont.style.maxHeight = cont.scrollHeight+"px";
174+
summ.addEventListener("click",()=>{
175+
if (det.classList.contains("open"))
176+
det.classList.remove("open");
177+
else
178+
det.classList.add("open");
179+
});
180+
});
145181
});
146182

147183
var filterTypeIndex = 0;
148-
const filterTypes = ["Include","Exclude"];
184+
const filterTypes = ["Strict","Include","Exclude"];
149185

150186

151187
function filterByCurrentTerm() {
@@ -174,7 +210,7 @@ function filterByTags() {
174210
if (!checkBox.checked) return;
175211
selTags.push(tag.querySelector(".tag-label").textContent);
176212
});
177-
if (selTags.length === tags.length && filterType === "Include") return; // works
213+
if (selTags.length === tags.length && filterType !== "Exclude") return; // works
178214
document.getElementById("level-cards").querySelectorAll(".level-card").forEach((card)=>{
179215
if (card.style.display == "none") return;
180216
if (selTags.length === tags.length && filterType === "Exclude") { card.style.display = "none"; return; } // works
@@ -183,12 +219,19 @@ function filterByTags() {
183219
if (!_data) return;
184220
var next = false;
185221
for (const tag of selTags) {
186-
if (filterType === "Include" && !_data["Tags"].includes(tag)) {
222+
if (filterType === "Strict" && !_data["Tags"].includes(tag)) {
187223
next = true;
188224
break;
189225
} else if (filterType === "Exclude" && _data["Tags"].includes(tag)) {
190226
next = true;
191227
break;
228+
} else if (filterType === "Include") {
229+
if (_data["Tags"].includes(tag)) {
230+
next = false;
231+
break;
232+
} else {
233+
next = true;
234+
}
192235
}
193236
}
194237
if (next) card.style.display = "none";

‎level-view.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ window.addEventListener("load",function() {
4343
if (level["Name"] != Title) return;
4444
Artist = level["Artist"];
4545
Tags = level["Tags"];
46+
console.log(Tags);
4647
yt = level["YTCode"];
4748
images = level["ImageCount"];
4849
});
@@ -65,10 +66,10 @@ window.addEventListener("load",function() {
6566
// Pre-load images
6667
for (let i=2; i <= images; i++) {
6768
let img = new Image();
68-
img.src = `https://assets.datbogie.org/${Title}-${i}.png`;
69+
img.src = encodeURI(`https://assets.datbogie.org/${Title}-${i}.webp`).replaceAll("?","%3F");
6970
}
7071
function updateIcon(skipAnimation) {
71-
icon.src = `https://assets.datbogie.org/${Title}-${currentImage}.png`;
72+
icon.src = encodeURI(`https://assets.datbogie.org/${Title}-${currentImage}.webp`).replaceAll("?","%3F");
7273
label.textContent = ` ${currentImage} / ${images} `;
7374
if (skipAnimation) return;
7475
icon.style.animation = "none";

‎leveldata.csv‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
Name,Difficulty,Artist,Tags,DLCode,YTCode,ImageCount,Links
2+
weathergirl,Easy+,FLAVOR FOLEY,steam|slow|finished|camera finished|deco finished|chart finished|heavy vfx|one-shot|medium,,0wjSivRh7sc,10,https://steamcommunity.com/sharedfiles/filedetails/?id=3554898136
23
Foresight (2019 Remaster),Medium+,Zekk,moderate|finished|camera finished|deco finished|chart finished|heavy vfx|checkpoints|medium,17vvJqKRFdBJkaBVSBIFs_uAcA2MNpkrD,QhN9sgwF9Fs,9
34
星の降る丘,Hard,ああああ (AAAA),moderate|pseudos|finished|camera finished|deco finished|chart finished|heavy vfx|checkpoints|medium,1H9mpXC7d1sSNMAWkE388FT1zQz12rkbO,EWrXMFdiLUc,5
45
プロローグ,Easy,ああああ (AAAA),slow|finished|camera finished|deco finished|chart finished|light vfx|one-shot|short,1VJq9vfwN3J3ITPNTw4UZh5HGkBI2FieF,y2qJ4Wx8_FQ,2

‎modules/utils.js‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,31 @@
1+
export async function getTagData(doSomething) {
2+
const tagData = {};
3+
fetch("tagdata.csv").then().then(raw=>{
4+
raw.text().then(text=>{
5+
const heading = text.split("\n")[0].split(",");
6+
const data = text.split("\n").slice(1,-1); // Remember: newline @ EOF
7+
data.forEach(row=>{
8+
const rawRowData = row.split(",")
9+
const key = rawRowData[0];
10+
var rowData = {};
11+
for (const [i, v] of rawRowData.entries()) {
12+
rowData[heading[i]] = v.replaceAll("$comma",",");
13+
}
14+
tagData[key] = rowData;
15+
});
16+
if (doSomething !== undefined) doSomething(tagData);
17+
});
18+
}).catch(error=>{
19+
alert("An error occured whilst trying to load `tagdata.csv`: '"+error.toString()+"'\nPlease report this at 'https://github.com/DatBogie/datbogie.github.io/issues'!");
20+
});
21+
return tagData;
22+
}
23+
124
export async function getLevelData(doSomething) {
2-
const ret = new Array(2);
25+
const ret = new Array(3);
326
var levelData = [];
427
var levelTags = {};
28+
const tagData = await getTagData();
529
fetch("leveldata.csv").then().then((raw)=>{
630
raw.text().then((text)=>{
731
const heading = text.split("\n")[0].split(",");
@@ -14,18 +38,23 @@ export async function getLevelData(doSomething) {
1438
} else {
1539
rowData[heading[i]] = v.replaceAll("$comma",",").split("|");
1640
v.replaceAll("$comma",",").split("|").forEach((tag)=>{
17-
if (levelTags[tag] == null) levelTags[tag] = {};
41+
if (levelTags[tag] == null) levelTags[tag] = tagData[tag];
1842
});
1943
}
44+
if (heading[i] == "Difficulty") {
45+
let tag = "difficulty: " + v.replaceAll("$comma",",").replaceAll(" ","-").toLowerCase();
46+
if (levelTags[tag] == null) levelTags[tag] = tagData[tag];
47+
}
2048
};
2149
levelData.push(rowData);
2250
});
23-
doSomething(levelData,levelTags);
51+
if (doSomething !== undefined) doSomething(levelData,levelTags,tagData);
2452
});
2553
}).catch((error)=>{
2654
alert("An error occured whilst trying to load `leveldata.csv`: '"+error.toString()+"'\nPlease report this at 'https://github.com/DatBogie/datbogie.github.io/issues'!");
2755
});
2856
ret[0] = levelData;
2957
ret[1] = levelTags;
58+
ret[2] = tagData;
3059
return ret;
3160
}

‎style.css‎

Lines changed: 56 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -537,6 +537,10 @@ p {
537537
filter: drop-shadow(0px 0px 10px black);
538538
}
539539

540+
.level-card-icon:not(#difficulty-indicator) {
541+
pointer-events: none;
542+
}
543+
540544
#difficulty-indicator {
541545
position: absolute;
542546
width: 25%;
@@ -643,10 +647,56 @@ p {
643647
}
644648
}
645649

650+
.details > .summary::before {
651+
content: ">";
652+
display: inline-block;
653+
margin-right: .5rem;
654+
transition: transform 200ms ease;
655+
}
656+
657+
.details.open > .summary::before {
658+
transform: rotate(90deg);
659+
}
660+
661+
.details > .content {
662+
overflow: hidden;
663+
opacity: 100%;
664+
transform-origin: top;
665+
transform: scaleY(1);
666+
transition: display 300ms ease, transform 300ms ease, opacity 300ms ease;
667+
/* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
668+
}
669+
670+
.details:not(.open) > .content {
671+
transform: scaleY(0);
672+
opacity: 0;
673+
/* clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); */
674+
display: none;
675+
}
676+
677+
#filter-category-title {
678+
column-span: all;
679+
width: 100%;
680+
display: block;
681+
text-align: left;
682+
background-color: transparent !important;
683+
}
684+
685+
#filter-category-title:hover {
686+
scale: 1.02;
687+
transition: scale 200ms ease, background-color 200ms ease;
688+
border-color: var(--accent);
689+
}
690+
691+
#filter-category-title:active {
692+
scale: .98;
693+
}
694+
695+
.filter-category > .content {
696+
columns: 2;
697+
}
698+
646699
.filter-tags {
647-
display: flex;
648-
gap: 7px;
649-
flex-wrap: wrap;
650700
margin-left: 5%;
651701
margin-right: 5%;
652702
margin-bottom: 7px;
@@ -660,7 +710,7 @@ p {
660710
padding-bottom: 1%;
661711
padding-left: 2%;
662712
padding-right: 2%;
663-
justify-content: center;
713+
justify-content: left;
664714
align-items: center;
665715
gap: .3vw;
666716
}
@@ -698,13 +748,13 @@ p {
698748
position: relative;
699749
}
700750

701-
#level-filter-popup button:hover {
751+
#level-filter-popup button:hover:not(#filter-category-title) {
702752
scale: 1.05;
703753
transition: scale 200ms ease, background-color 200ms ease;
704754
border-color: var(--accent);
705755
}
706756

707-
#level-filter-popup button:active {
757+
#level-filter-popup button:active:not(#filter-category-title) {
708758
scale: .95;
709759
}
710760

‎tagdata.csv‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,38 @@
1-
Category,Tag,Description,Color
2-
Steam,steam,Is on Steam Workshop,#0b457a
3-
Speed,slow,Slow tile BPM,#78444c
4-
Speed,moderate,Moderate tile BPM,#b66773
5-
Speed,fast,Fast tile BPM,#ed8796
6-
Completion,finished,Level is 100% complete,#c6a0f6
7-
Completion,unfinished,Level is partially complete,#6c5887
8-
Completion,camera finished,Camera movement is 100% complete,#91d7e3
9-
Completion,camera unfinished,Camera movement is partially complete,#547d83
10-
Completion,deco finished,Decoration and/or VFX are 100% complete,#a6da95
11-
Completion,deco unfinished,Decoration and/or VFX are partially complete,#729566
1+
Tag,Category,Description,Color
2+
steam,Steam,Is on Steam Workshop,#0b457a
3+
slow,Speed,Slow tile BPM,#78444c
4+
moderate,Speed,Moderate tile BPM,#b66773
5+
fast,Speed,Fast tile BPM,#ed8796
6+
finished,Completion,Level is 100% complete,#c6a0f6
7+
unfinished,Completion,Level is partially complete,#6c5887
8+
camera finished,Completion,Camera movement is 100% complete,#91d7e3
9+
camera unfinished,Completion,Camera movement is partially complete,#547d83
10+
deco finished,Completion,Decoration and/or VFX are 100% complete,#a6da95
11+
deco unfinished,Completion,Decoration and/or VFX are partially complete,#729566
12+
chart finished,Completion,Chart is 100% complete,#f5c2e7
13+
chart unfinished,Completion,Chart is partially complete,#c17e91
14+
difficulty: very-easy,Difficulty,Very Easy difficulty level,#f0f0f0
15+
difficulty: very-easy+,Difficulty,Very Easy+ difficulty level,#f0f0f0
16+
difficulty: easy,Difficulty,Easy difficulty level,#d4f8ff
17+
difficulty: easy+,Difficulty,Easy+ difficulty level,#d4f8ff
18+
difficulty: medium,Difficulty,Medium difficulty level,#b8e6ff
19+
difficulty: medium+,Difficulty,Medium+ difficulty level,#b8e6ff
20+
difficulty: hard,Difficulty,Hard difficulty level,#9cd4ff
21+
difficulty: hard+,Difficulty,Hard+ difficulty level,#9cd4ff
22+
difficulty: very-hard,Difficulty,Very Hard difficulty level,#80c2ff
23+
difficulty: very-hard+,Difficulty,Very Hard+ difficulty level,#80c2ff
24+
seizure,Warning,Contains flashing lights or other potentially seizure-inducing effects,#ff0000
25+
one-shot,Difficulty,No checkpoints$comma harder,#ffb86c
26+
checkpoints,Difficulty,Contains checkpoints$comma easier,#ffb86c
27+
short,Length,<3 minutes,#ffb86c
28+
medium,Length,3–5 minutes,#ffb86c
29+
long,Length,5-7 minutes,#ffb86c
30+
very long,Length,7+ minutes,#ffb86c
31+
difficulty spike,Difficulty,Contains a sudden spike in difficulty,#ff5555
32+
pseudos,Difficulty,Contains pseudos (press two keys almost at once),#ff79c6
33+
heavy vfx,VFX,Contains heavy visual effects,#8be9fd
34+
light vfx,VFX,Contains light visual effects,#8be9fd
35+
no vfx,VFX,Contains little or no visual effects,#8be9fd
36+
holds,Difficulty,Contains hold tiles,#50fa7b
37+
dlc,Other,Requires DLC to play,#bd93f9
38+
3ball,Difficulty,Contains 3-ball gameplay,#ff6ac1

0 commit comments

Comments
 (0)