A Neptunia Character Sorter
Link to original page on sorter result, dynamically reduce text width Fixes #2, #3
+50
-5
+50
-5
src/js/main.js
+50
-5
src/js/main.js
···
271
271
const leftChar = characterDataToSort[leftCharIndex];
272
272
const rightChar = characterDataToSort[rightCharIndex];
273
273
274
+
const charNameDisp = name => {
275
+
const charName = reduceTextWidthTo(name, 'Arial 12.8px', 220);
276
+
const charTooltip = name !== charName ? name : '';
277
+
return `<p title="${charTooltip}">${charName}</p>`;
278
+
};
279
+
274
280
progressBar(`Battle No. ${battleNo}`, percent);
275
281
276
282
document.querySelector('.left.sort.image').src = leftChar.img;
277
283
document.querySelector('.right.sort.image').src = rightChar.img;
278
284
279
-
document.querySelector('.left.sort.text > p').innerHTML = leftChar.name;
280
-
document.querySelector('.right.sort.text > p').innerHTML = rightChar.name;
285
+
286
+
287
+
document.querySelector('.left.sort.text').innerHTML = charNameDisp(leftChar.name);
288
+
document.querySelector('.right.sort.text').innerHTML = charNameDisp(rightChar.name);
281
289
282
290
/** Autopick if choice has been given. */
283
291
if (choices.length !== battleNo - 1) {
···
461
469
document.querySelector('.info').style.display = 'none';
462
470
463
471
const header = '<div class="result head"><div class="left">Order</div><div class="right">Name</div></div>';
464
-
const timeStr = `This sorter was completed on ${new Date(timestamp + timeTaken).toString()} and took ${msToReadableTime(timeTaken)}.`;
465
-
const imgRes = (char, num) => `<div class="result image"><div class="left"><span>${num}</span></div><div class="right"><img src="${char.img}"><div>${char.name}</div></div></div>`;
466
-
const res = (char, num) => `<div class="result"><div class="left">${num}</div><div class="right">${char.name}</div></div>`;
472
+
const timeStr = `This sorter was completed on ${new Date(timestamp + timeTaken).toString()} and took ${msToReadableTime(timeTaken)}. <a href="${location.protocol}//${location.host}${location.pathname}">Do another sorter?</a>`;
473
+
const imgRes = (char, num) => {
474
+
const charName = reduceTextWidthTo(char.name, 'Arial 12px', 160);
475
+
const charTooltip = char.name !== charName ? char.name : '';
476
+
return `<div class="result image"><div class="left"><span>${num}</span></div><div class="right"><img src="${char.img}"><div><span title="${charTooltip}">${charName}</span></div></div></div>`;
477
+
}
478
+
const res = (char, num) => {
479
+
const charName = reduceTextWidthTo(char.name, 'Arial 12px', 160);
480
+
const charTooltip = char.name !== charName ? char.name : '';
481
+
return `<div class="result"><div class="left">${num}</div><div class="right"><span title="${charTooltip}">${charName}</span></div></div>`;
482
+
}
467
483
468
484
let rankNum = 1;
469
485
let tiedRankNum = 1;
···
795
811
if (minutes) content.push(minutes + " minute" + (minutes > 1 ? "s" : ""));
796
812
if (t) content.push(t + " second" + (t > 1 ? "s" : ""));
797
813
return content.slice(0,3).join(', ');
814
+
}
815
+
816
+
/**
817
+
* Reduces text to a certain rendered width.
818
+
*
819
+
* @param {string} text Text to reduce.
820
+
* @param {string} font Font applied to text. Example "12px Arial".
821
+
* @param {number} width Width of desired width in px.
822
+
*/
823
+
function reduceTextWidthTo(text, font, width) {
824
+
const canvas = reduceTextWidthTo.canvas || (reduceTextWidthTo.canvas = document.createElement("canvas"));
825
+
const context = canvas.getContext("2d");
826
+
context.font = font;
827
+
if (context.measureText(text).width < width) {
828
+
return text;
829
+
} else {
830
+
let reducedText = text;
831
+
while (context.measureText(reducedText).width + context.measureText('..').width > width * 0.8) {
832
+
reducedText = reducedText.slice(0, -1);
833
+
}
834
+
return reducedText + '..';
835
+
}
836
+
}
837
+
838
+
function getTextWidthArial(text) {
839
+
const canvas = getTextWidthArial.canvas || (getTextWidthArial.canvas = document.createElement("canvas"));
840
+
const context = canvas.getContext("2d");
841
+
context.font = 'Arial 12px';
842
+
return context.measureText(text).width;
798
843
}
799
844
800
845
window.onload = init;