import { store } from '../main.js'; import { embed, getFontColour, getLevelThumbnail } from '../util.js'; import { score } from '../score.js'; import { fetchEditors, fetchList } from '../content.js'; import Spinner from '../components/Spinner.js'; import LevelAuthors from '../components/List/LevelAuthors.js'; const roleIconMap = { owner: 'crown', member: 'cube', admin: 'user-gear', kreo: 'kreo', seniormod: 'user-shield', mod: 'user-lock', trial: 'user-check', dev: 'code' }; export default { components: { Spinner, LevelAuthors }, template: `

Sort by

Filter

The List

#{{ rank }}

—

Legacy List

#{{ rank }}

{{ level.name }}

"{{level.gdleveldescription || "(No description provided)"}}"

{{level.description || "No Description Provided."}}

{{pack.name}}

  • Points when completed

    {{ score(level.rank, 100, level.percentToQualify) }}

  • ID

    {{ level.id }}

  • Enjoyment

    {{ level.enjoyment }}/100

(ノಠ益ಠ)ノ彡┻━┻

{{ error }}

Records

{{ level.percentToQualify }}% or better to qualify

{{ level.percentToQualify }}% or better to qualify

100% to qualify

{{ record.percent }}%

 {{ record.user }} Mobile
`, data: () => ({ list: [], editors: [], loading: true, selected: 0, errors: [], roleIconMap, store, toggledShowcase: false, showUnverified: false, aredlRanks: {}, searchQuery: '', // ... your existing properties ... menuOpen: false, // "pending" = what's in the menu before hitting Apply pendingSortBy: 'rank', pendingRatedOnly: false, pendingUnratedOnly: false, pendingMinEnjoyment: 0, // "active" = what's actually applied sortBy: 'rank', filterRatedOnly: false, filterUnratedOnly: false, filterMinEnjoyment: 0, }), computed: { level() { return this.list && this.list[this.selected] && this.list[this.selected][2]; }, video() { if (!this.level.showcase) { return embed(this.level.verification); } return embed( this.toggledShowcase ? this.level.showcase : this.level.verification, ); }, filteredList() { const q = (this.searchQuery || '').toLowerCase().trim(); let filtered = this.list.filter(([err, rank, level]) => { if (!level || !level.name) return false; // text search if (q && !( level.name.toLowerCase().includes(q) || (level.author || '').toLowerCase().includes(q) || (level.creators || []).some(c => c.toLowerCase().includes(q)) )) return false; const hasAredlRank = !!this.aredlRanks[level.id]; // rank filters (these are mutually exclusive in practice) if (this.filterRatedOnly && !hasAredlRank) return false; if (this.filterUnratedOnly && hasAredlRank) return false; // enjoyment filter if ((level.enjoyment ?? 0) < this.filterMinEnjoyment) return false; return true; }); return filtered.sort(([, , a], [, , b]) => { if (!a || !b) return 0; switch (this.sortBy) { case 'rank': return (a.rank ?? Infinity) - (b.rank ?? Infinity); case 'enjoyment': return (b.enjoyment ?? 0) - (a.enjoyment ?? 0); case 'name': return a.name.localeCompare(b.name); default: return 0; } }); }, }, async mounted() { store.list = this; await resetList(); // Grab the level from URL const levelName = getLevelFromURL(); if (levelName) { // find index in the list const index = this.list.findIndex(([, , l]) => l?.name === levelName); if (index !== -1) { this.selected = index; this.selectLevel(this.list[index][2]); // select it } } for (const [, , level] of this.list) { this.getAredlRank(level.id); } }, methods: { embed, score, getFontColour, getLevelThumbnail, selectLevel(level) { const index = this.list.findIndex(([, , l]) => l?.id === level?.id); if (index !== -1) { this.selected = index; document.querySelector('.dark.root').style.background = `url("/assets/levels/${level.name}.png") #000000e3`; this.scrollToSelected(); } }, async getAredlRank(id) { if (this.aredlRanks[id]) return; const response = await fetch(`https://api.aredl.net/v2/api/aredl/levels/${id}`); const levelInfo = await response.json(); this.aredlRanks[id] = levelInfo.position; }, highlight(text) { const q = (this.searchQuery || '').trim(); if (!q) return text; const safe = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); const regex = new RegExp(`(${safe})`, 'ig'); return text.replace(regex, `$1`); }, previewBackground(level) { document.querySelector('.dark.root').style.background = `url("/assets/levels/${level.name}.png") #000000e3`; }, applyFilters() { this.sortBy = this.pendingSortBy; this.filterRatedOnly = this.pendingRatedOnly; this.filterUnratedOnly = this.pendingUnratedOnly; this.filterMinEnjoyment = this.pendingMinEnjoyment; this.menuOpen = false; this.scrollToSelected(); }, scrollToSelected() { this.$nextTick(() => { const activeBtn = document.querySelector('.level.active button'); if (activeBtn) { activeBtn.scrollIntoView({ block: 'center', behavior: 'smooth' }); } }); }, }, watch: { filteredList(newList) { if (!newList.length) return; const level = newList[0][2]; const index = this.list.findIndex(([, , l]) => l?.id === level?.id); /*if (index !== -1) { this.selectLevel(level); }*/ } } }; export async function resetList() { console.log("resetting"); store.list.loading = true; // Hide loading spinner store.list.list = await fetchList(); store.list.editors = await fetchEditors(); // Error handling if (!store.list.list) { store.list.errors = [ "Failed to load list. Retry in a few minutes or notify list staff.", ]; } else { store.list.errors.push( ...store.list.list .filter(([err, _, __]) => err) .map(([err, _, __]) => { return `Failed to load level. (${err}.json)`; }) ); if (!store.list.editors) { store.list.errors.push("Failed to load list editors."); } } store.list.showUnverified = false; for(var i = 0; i < store.list.list.length; i++){ if(store.list.list[i][1] != null){ store.list.selected = i; store.list.selectLevel(i, store.list.list[i][2]); break; } } store.list.loading = false; } function getLevelFromURL() { // window.location.hash looks like: "#/?level=Bloodbath" const hash = window.location.hash.split('?')[1] || ''; const params = new URLSearchParams(hash); return params.get('level'); // returns "Bloodbath" or null }