A Neptunia Character Sorter
Bugfix on text width calculation
+6
-6
+6
-6
src/js/main.js
+6
-6
src/js/main.js
···
272
272
const rightChar = characterDataToSort[rightCharIndex];
273
273
274
274
const charNameDisp = name => {
275
-
const charName = reduceTextWidthTo(name, 'Arial 12.8px', 220);
275
+
const charName = reduceTextWidth(name, 'Arial 12.8px', 220);
276
276
const charTooltip = name !== charName ? name : '';
277
277
return `<p title="${charTooltip}">${charName}</p>`;
278
278
};
···
471
471
const header = '<div class="result head"><div class="left">Order</div><div class="right">Name</div></div>';
472
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
473
const imgRes = (char, num) => {
474
-
const charName = reduceTextWidthTo(char.name, 'Arial 12px', 160);
474
+
const charName = reduceTextWidth(char.name, 'Arial 12px', 160);
475
475
const charTooltip = char.name !== charName ? char.name : '';
476
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
477
}
478
478
const res = (char, num) => {
479
-
const charName = reduceTextWidthTo(char.name, 'Arial 12px', 160);
479
+
const charName = reduceTextWidth(char.name, 'Arial 12px', 160);
480
480
const charTooltip = char.name !== charName ? char.name : '';
481
481
return `<div class="result"><div class="left">${num}</div><div class="right"><span title="${charTooltip}">${charName}</span></div></div>`;
482
482
}
···
820
820
* @param {string} font Font applied to text. Example "12px Arial".
821
821
* @param {number} width Width of desired width in px.
822
822
*/
823
-
function reduceTextWidthTo(text, font, width) {
824
-
const canvas = reduceTextWidthTo.canvas || (reduceTextWidthTo.canvas = document.createElement("canvas"));
823
+
function reduceTextWidth(text, font, width) {
824
+
const canvas = reduceTextWidth.canvas || (reduceTextWidth.canvas = document.createElement("canvas"));
825
825
const context = canvas.getContext("2d");
826
826
context.font = font;
827
-
if (context.measureText(text).width < width) {
827
+
if (context.measureText(text).width < width * 0.8) {
828
828
return text;
829
829
} else {
830
830
let reducedText = text;