|
| 1 | +document.body.addEventListener('mousedown', () => { |
| 2 | + document.body.classList.add('mouse'); |
| 3 | +}); |
| 4 | +document.body.addEventListener('keydown', () => { |
| 5 | + document.body.classList.remove('mouse'); |
| 6 | +}); |
| 7 | + |
| 8 | +const images = { |
| 9 | + transparent: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=', |
| 10 | + scoresaber: '/client/scoresaber.png', |
| 11 | + peepoUK: '/client/icon.png', |
| 12 | +}; |
| 13 | + |
| 14 | +(async () => { |
| 15 | + let data = await fetch('/ranked').then(r => r.json()); |
| 16 | + let ranked = data.list; |
| 17 | + let difficulties = [ |
| 18 | + { name: 'Easy' }, |
| 19 | + { name: 'Normal' }, |
| 20 | + { name: 'Hard' }, |
| 21 | + { name: 'Expert' }, |
| 22 | + { name: 'ExpertPlus', label: 'Expert+' }, |
| 23 | + ]; |
| 24 | + let $ = document.querySelector.bind(document); |
| 25 | + let fields = { |
| 26 | + difficulty: {}, |
| 27 | + stars: { |
| 28 | + from: $('.stars .from input'), |
| 29 | + to: $('.stars .to input'), |
| 30 | + }, |
| 31 | + rating: { |
| 32 | + from: $('.rating .from input'), |
| 33 | + to: $('.rating .to input'), |
| 34 | + }, |
| 35 | + duration: { |
| 36 | + from: $('.duration .from input'), |
| 37 | + to: $('.duration .to input'), |
| 38 | + }, |
| 39 | + name: $('.name'), |
| 40 | + author: $('.author'), |
| 41 | + count: $('.count'), |
| 42 | + sort: $('.sort'), |
| 43 | + }; |
| 44 | + let preview = { |
| 45 | + count: $('.result-count'), |
| 46 | + list: $('.preview .list'), |
| 47 | + }; |
| 48 | + let diffContainer = $('.difficulties'); |
| 49 | + difficulties.forEach(difficulty => { |
| 50 | + let label = document.createElement('label'); |
| 51 | + let input = document.createElement('input'); |
| 52 | + let span = document.createElement('span'); |
| 53 | + input.type = 'checkbox'; |
| 54 | + input.checked = 'true'; |
| 55 | + input.addEventListener('change', updateSongs); |
| 56 | + label.appendChild(input); |
| 57 | + span.appendChild(document.createTextNode(difficulty.label || difficulty.name)); |
| 58 | + label.appendChild(span); |
| 59 | + fields.difficulty[difficulty.name] = input; |
| 60 | + diffContainer.appendChild(label); |
| 61 | + }); |
| 62 | + |
| 63 | + let imagesContainer = $('.image-options'); |
| 64 | + Object.keys(images).forEach(async (image, i) => { |
| 65 | + let value = images[image]; |
| 66 | + let label = document.createElement('label'); |
| 67 | + let input = document.createElement('input'); |
| 68 | + let preview = document.createElement('img'); |
| 69 | + label.className = image; |
| 70 | + input.type = 'radio'; |
| 71 | + input.name = 'image'; |
| 72 | + input.checked = !i; |
| 73 | + |
| 74 | + preview.crossOrigin = 'anonymous'; |
| 75 | + await new Promise((res, rej) => { |
| 76 | + preview.onload = res; |
| 77 | + preview.onerror = rej; |
| 78 | + preview.src = value; |
| 79 | + }); |
| 80 | + |
| 81 | + let canvas = document.createElement('canvas'); |
| 82 | + let ctx = canvas.getContext('2d'); |
| 83 | + canvas.height = preview.naturalHeight; |
| 84 | + canvas.width = preview.naturalWidth; |
| 85 | + ctx.drawImage(preview, 0, 0); |
| 86 | + input.value = canvas.toDataURL('image/png'); |
| 87 | + |
| 88 | + input.addEventListener('change', updateLink); |
| 89 | + label.appendChild(input); |
| 90 | + label.appendChild(preview); |
| 91 | + imagesContainer.appendChild(label); |
| 92 | + }); |
| 93 | + |
| 94 | + let activeSongs = []; |
| 95 | + function between(n, m, M) { |
| 96 | + // n undefined returns true (assume valid when unknown) |
| 97 | + return !(n < m || n > M); |
| 98 | + } |
| 99 | + function parseDuration(val, def) { |
| 100 | + if (!val) { |
| 101 | + return def; |
| 102 | + } |
| 103 | + if (+val) { |
| 104 | + return +val; |
| 105 | + } |
| 106 | + let match = val.match(/^\s*(\d+)\s*:\s*(\d+)\s*$/); |
| 107 | + if (match) { |
| 108 | + return +match[2] + match[1] * 60; |
| 109 | + } |
| 110 | + return def; |
| 111 | + } |
| 112 | + function updateSongs() { |
| 113 | + let stars = [ |
| 114 | + +fields.stars.from.value || 0, |
| 115 | + +fields.stars.to.value || Infinity |
| 116 | + ].sort((a, b) => a - b); |
| 117 | + let rating = [ |
| 118 | + +fields.rating.from.value || 0, |
| 119 | + +fields.rating.to.value || 100 |
| 120 | + ].sort((a, b) => a - b); |
| 121 | + let duration = [ |
| 122 | + parseDuration(fields.duration.from.value, 0), |
| 123 | + parseDuration(fields.duration.to.value, Infinity) |
| 124 | + ].sort((a, b) => a - b); |
| 125 | + let leaderboards = ranked.filter(ldb => { |
| 126 | + if (!fields.difficulty[ldb.diff].checked) { |
| 127 | + return false; |
| 128 | + } |
| 129 | + let dur = 60 * ldb.duration / ldb.bpm; |
| 130 | + return ( |
| 131 | + between(ldb.stars, stars[0], stars[1]) |
| 132 | + && between(ldb.rating, rating[0], rating[1]) |
| 133 | + && between(dur, duration[0], duration[1]) |
| 134 | + ); |
| 135 | + }); |
| 136 | + let [sortProp, sortDir] = fields.sort.value.split('-'); |
| 137 | + sortDir = sortDir === 'desc' ? -1 : 1; |
| 138 | + leaderboards.sort((a, b) => a[sortProp] < b[sortProp] ? -sortDir : a[sortProp] > b[sortProp] ? sortDir : 0); |
| 139 | + let perSong = new Map(); |
| 140 | + leaderboards.forEach(ldb => { |
| 141 | + let current = perSong.get(ldb.id); |
| 142 | + if (!current) { |
| 143 | + current = []; |
| 144 | + perSong.set(ldb.id, current); |
| 145 | + } |
| 146 | + current.push(ldb); |
| 147 | + }); |
| 148 | + while (preview.list.firstChild) preview.list.removeChild(preview.list.firstChild); |
| 149 | + activeSongs = [...perSong.values()].map((list, i) => { |
| 150 | + let data = list[0]; |
| 151 | + let previewElem = document.createElement('div'); |
| 152 | + let content = (i + 1) + '. ' + data.artist + ' - ' + data.name + ' | ' + data.mapper; |
| 153 | + let details = [ |
| 154 | + data.rating && ('👍 ' + data.rating.toFixed(2) + '%'), |
| 155 | + list.map(e => e.diff.replace('ExpertPlus', 'Expert+')).join(', ') |
| 156 | + ].filter(e => e).join(' - '); |
| 157 | + if (details) { |
| 158 | + content += ' (' + details + ')'; |
| 159 | + } |
| 160 | + previewElem.appendChild(document.createTextNode(content)); |
| 161 | + preview.list.appendChild(previewElem); |
| 162 | + return { hash: data.id, songName: data.name }; |
| 163 | + }); |
| 164 | + let ldbCount = leaderboards.length; |
| 165 | + let songsCount = activeSongs.length; |
| 166 | + preview.count.textContent = ldbCount + ' leaderboard' + (ldbCount === 1 ? '' : 's') + ' from ' + songsCount + ' map' + (songsCount === 1 ? '' : 's'); |
| 167 | + updateLink(); |
| 168 | + } |
| 169 | + function updateLink() { |
| 170 | + let image = images.transparent; |
| 171 | + let selectedImage = $('.image-options input:checked'); |
| 172 | + if (selectedImage) { |
| 173 | + image = selectedImage.value; |
| 174 | + } |
| 175 | + let bplist = { |
| 176 | + playlistTitle: fields.name.value || fields.name.placeholder, |
| 177 | + playlistAuthor: fields.author.value || fields.author.placeholder, |
| 178 | + image, |
| 179 | + songs: activeSongs.slice(0, +fields.count.value || Infinity) |
| 180 | + }; |
| 181 | + $('.download').href = 'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(bplist)); |
| 182 | + } |
| 183 | + |
| 184 | + [ |
| 185 | + fields.stars.from, |
| 186 | + fields.stars.to, |
| 187 | + fields.rating.from, |
| 188 | + fields.rating.to, |
| 189 | + fields.duration.from, |
| 190 | + fields.duration.to, |
| 191 | + fields.sort, |
| 192 | + ].forEach(input => input.addEventListener('input', updateSongs)); |
| 193 | + [ |
| 194 | + fields.name, |
| 195 | + fields.author, |
| 196 | + fields.count, |
| 197 | + ].forEach(input => input.addEventListener('input', updateLink)); |
| 198 | + |
| 199 | + updateSongs(); |
| 200 | + document.body.classList.add('loaded'); |
| 201 | +})(); |
0 commit comments