A sorter site for Idolm@ster Characters
Image loading progress bar
+20
-8
+20
-8
src/js/main.js
+20
-8
src/js/main.js
···
208
208
document.querySelectorAll('input[type=checkbox]').forEach(cb => cb.disabled = true);
209
209
document.querySelectorAll('.starting.button').forEach(el => el.style.display = 'none');
210
210
document.querySelector('.loading.button').style.display = 'block';
211
+
document.querySelector('.progress').style.display = 'block';
211
212
loading = true;
212
213
213
214
preloadImages().then(() => {
214
215
loading = false;
215
-
document.querySelector('.progress').style.display = 'block';
216
216
document.querySelector('.loading.button').style.display = 'none';
217
217
document.querySelectorAll('.sorting.button').forEach(el => el.style.display = 'block');
218
218
document.querySelectorAll('.sort.text').forEach(el => el.style.display = 'block');
···
222
222
223
223
/** Displays the current state of the sorter. */
224
224
function display() {
225
-
const percent = Math.floor(sortedNo * 100 / totalBattles) + '%';
225
+
const percent = Math.floor(sortedNo * 100 / totalBattles);
226
226
const leftCharIndex = sortedIndexList[leftIndex][leftInnerIndex];
227
227
const rightCharIndex = sortedIndexList[rightIndex][rightInnerIndex];
228
228
const leftChar = characterDataToSort[leftCharIndex];
229
229
const rightChar = characterDataToSort[rightCharIndex];
230
230
231
-
document.querySelector('.progressbattle').innerHTML = `Battle No. ${battleNo}`;
232
-
document.querySelector('.progressfill').style.width = percent;
233
-
document.querySelector('.progresstext').innerHTML = percent;
231
+
progressBar(`Battle No. ${battleNo}`, percent);
234
232
235
233
document.querySelector('.left.sort.image').src = leftChar.img;
236
234
document.querySelector('.right.sort.image').src = rightChar.img;
···
365
363
if (leftIndex < 0) {
366
364
timeTaken = timeTaken || new Date().getTime() - timestamp;
367
365
368
-
document.querySelector('.progressbattle').innerHTML = `Battle No. ${battleNo} - Completed!`;
369
-
document.querySelector('.progressfill').style.width = '100%';
370
-
document.querySelector('.progresstext').innerHTML = '100%';
366
+
progressBar(`Battle No. ${battleNo} - Completed!`, 100);
371
367
372
368
result();
373
369
} else {
···
392
388
393
389
pointer++;
394
390
sortedNo++;
391
+
}
392
+
393
+
/**
394
+
* Modifies the progress bar.
395
+
*
396
+
* @param {string} indicator
397
+
* @param {number} percentage
398
+
*/
399
+
function progressBar(indicator, percentage) {
400
+
document.querySelector('.progressbattle').innerHTML = indicator;
401
+
document.querySelector('.progressfill').style.width = `${percentage}%`;
402
+
document.querySelector('.progresstext').innerHTML = `${percentage}%`;
395
403
}
396
404
397
405
/**
···
657
665
* Preloads images in the filtered character data and converts to base64 representation.
658
666
*/
659
667
function preloadImages() {
668
+
const totalLength = characterDataToSort.length;
669
+
let imagesLoaded = 0;
670
+
660
671
const loadImage = (src, idx) => {
661
672
return new Promise((resolve, reject) => {
662
673
const img = new Image();
···
680
691
canvas.height = img.naturalHeight;
681
692
canvas.getContext('2d').drawImage(img, 0, 0);
682
693
characterDataToSort[idx].img = canvas.toDataURL();
694
+
progressBar(`Loading Image ${++imagesLoaded}`, Math.floor(imagesLoaded * 100 / totalLength));
683
695
};
684
696
685
697
const promises = characterDataToSort.map((char, idx) => loadImage(imageRoot + char.img, idx));