A sorter site for Idolm@ster Characters
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Image loading progress bar

execfera fff03560 99e4482e

+20 -8
+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));