Skip to content

Commit

Permalink
Merge pull request #43 from HyeokjinKang/font
Browse files Browse the repository at this point in the history 
fix: 캔버스를 사용하는 모든 화면에서 폰트가 깨지는 문제
  • Loading branch information
Coupy authored Sep 2, 2023
2 parents 885dc06 + 8f9aa44 commit 7fcb7fa
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 55 deletions.
24 changes: 12 additions & 12 deletions public/js/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ const drawNote = (p, x, y, s, n, d, t) => {
if (s == true) {
cntCtx.lineWidth = Math.round(cntCanvas.width / 300);
cntCtx.beginPath();
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard Variable`;
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
cntCtx.fillStyle = "#000";
cntCtx.strokeStyle = "#fff";
cntCtx.textAlign = "center";
Expand Down Expand Up @@ -605,7 +605,7 @@ const drawBullet = (n, x, y, a, s, l, d) => {
let w = cntCanvas.width / 80;
if (s == true) {
cntCtx.beginPath();
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard Variable`;
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
cntCtx.fillStyle = "#000";
cntCtx.strokeStyle = "#fff";
cntCtx.textAlign = d == "L" ? "left" : "right";
Expand Down Expand Up @@ -665,7 +665,7 @@ const drawBullet = (n, x, y, a, s, l, d) => {
if (skin.bullet.outline && !denySkin) cntCtx.stroke();
break;
default:
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard Variable`;
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
cntCtx.fillStyle = "#F55";
cntCtx.textAlign = "left";
cntCtx.textBaseline = "top";
Expand Down Expand Up @@ -789,7 +789,7 @@ const trackMouseSelection = (i, v1, v2, x, y) => {
}
break;
default:
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard Variable`;
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
cntCtx.fillStyle = "#F55";
cntCtx.textAlign = "left";
cntCtx.textBaseline = "top";
Expand Down Expand Up @@ -940,7 +940,7 @@ const tmlRender = () => {
tmlCtx.fillStyle = "#111";
tmlCtx.textAlign = "left";
tmlCtx.textBaseline = "middle";
tmlCtx.font = `${tmlCanvas.height / 14}px Metropolis, Pretendard Variable`;
tmlCtx.font = `${tmlCanvas.height / 14}px Metropolis, Pretendard JP Variable`;
tmlCtx.fillText("Note", startX * 1.2 + height / 6, startY + timelineYLoc + height / 1.8);
let i = 1;
for (i; i <= bulletsOverlapNum; i++) {
Expand All @@ -963,7 +963,7 @@ const tmlRender = () => {
tmlCtx.fillStyle = "#FFF";
tmlCtx.fillRect(0, endY, endX, tmlCanvas.height - endY);
tmlCtx.fillRect(0, 0, endX, startY);
tmlCtx.font = `${tmlCanvas.height / 16}px Metropolis, Pretendard Variable`;
tmlCtx.font = `${tmlCanvas.height / 16}px Metropolis, Pretendard JP Variable`;
tmlCtx.textAlign = "center";
tmlCtx.textBaseline = "bottom";
tmlCtx.fillStyle = "#777";
Expand Down Expand Up @@ -1018,7 +1018,7 @@ const tmlRender = () => {
tmlCtx.lineTo(lineX, startY);
tmlCtx.stroke();
} catch (e) {
tmlCtx.font = `500 ${tmlCanvas.height / 15}px Metropolis, Pretendard Variable`;
tmlCtx.font = `500 ${tmlCanvas.height / 15}px Metropolis, Pretendard JP Variable`;
tmlCtx.fillStyle = "#F55";
tmlCtx.textAlign = "left";
tmlCtx.textBaseline = "top";
Expand Down Expand Up @@ -1058,7 +1058,7 @@ const tmlRender = () => {
tmlCtx.fill();
}
}
tmlCtx.font = `500 ${tmlCanvas.height / 15}px Metropolis, Pretendard Variable`;
tmlCtx.font = `500 ${tmlCanvas.height / 15}px Metropolis, Pretendard JP Variable`;
tmlCtx.fillStyle = "#555";
tmlCtx.textAlign = "right";
tmlCtx.textBaseline = "top";
Expand Down Expand Up @@ -1228,9 +1228,9 @@ const cntRender = () => {
cntCtx.beginPath();
if (denySkin) cntCtx.fillStyle = "#111";
else cntCtx.fillStyle = "#fff";
cntCtx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Metropolis, Pretendard Variable`;
cntCtx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Metropolis, Pretendard JP Variable`;
if (renderTriggers[i].size.indexOf("vh") != -1)
cntCtx.font = `${renderTriggers[i].weight} ${(cntCanvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Metropolis, Pretendard Variable`;
cntCtx.font = `${renderTriggers[i].weight} ${(cntCanvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Metropolis, Pretendard JP Variable`;
cntCtx.textAlign = renderTriggers[i].align;
cntCtx.textBaseline = renderTriggers[i].valign;
cntCtx.fillText(renderTriggers[i].text, (cntCanvas.width / 200) * (renderTriggers[i].x + 100), (cntCanvas.height / 200) * (renderTriggers[i].y + 100));
Expand Down Expand Up @@ -1349,7 +1349,7 @@ const cntRender = () => {
cntCtx.moveTo(cntCanvas.width / 2 - 15, cntCanvas.height / 2 - 15);
cntCtx.lineTo(cntCanvas.width / 2 + 15, cntCanvas.height / 2 - 15);
cntCtx.stroke();
cntCtx.font = `500 ${cntCanvas.height / 25}px Metropolis, Pretendard Variable`;
cntCtx.font = `500 ${cntCanvas.height / 25}px Metropolis, Pretendard JP Variable`;
cntCtx.textAlign = "center";
cntCtx.textBaseline = "top";
cntCtx.fillText("Click to add Trigger", cntCanvas.width / 2, cntCanvas.height / 2 + 10);
Expand All @@ -1361,7 +1361,7 @@ const cntRender = () => {
}
} catch (e) {
if (e) {
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard Variable`;
cntCtx.font = `500 ${window.innerHeight / 40}px Metropolis, Pretendard JP Variable`;
cntCtx.fillStyle = "#F55";
cntCtx.textAlign = "left";
cntCtx.textBaseline = "top";
Expand Down
30 changes: 15 additions & 15 deletions public/js/play.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,7 @@ const drawParticle = (n, x, y, j, d) => {
let newY = y - 2 * Math.round(p / 10);
ctx.fillStyle = getJudgeStyle(j.toLowerCase(), p, cx, newY);
ctx.strokeStyle = `rgba(0, 0, 0, ${1 - p / 100})`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard Variable`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.lineWidth = 2;
Expand All @@ -483,7 +483,7 @@ const drawParticle = (n, x, y, j, d) => {
let newY = cy - Math.round(p / 10);
ctx.fillStyle = getJudgeStyle("miss", p);
ctx.strokeStyle = `rgba(255, 255, 255, ${1 - p / 100})`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard Variable`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.lineWidth = 2;
Expand All @@ -497,7 +497,7 @@ const drawParticle = (n, x, y, j, d) => {
let newY = cy - Math.round(p / 10);
ctx.fillStyle = getJudgeStyle("perfect", p, cx, newY);
ctx.strokeStyle = `rgba(255, 255, 255, ${1 - p / 100})`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard Variable`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.lineWidth = 2;
Expand Down Expand Up @@ -756,7 +756,7 @@ const drawBullet = (n, x, y, a) => {
if (skin.bullet.outline) ctx.stroke();
break;
default:
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#F55";
ctx.textAlign = "left";
ctx.textBaseline = "top";
Expand Down Expand Up @@ -824,7 +824,7 @@ const drawKeyInput = () => {
alpha = 1 - (Date.now() - keyInput[keyInput.length - 1].time - 3000) / 1000;
if (alpha <= 0) return;
}
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#FFF";
ctx.textAlign = "left";
ctx.textBaseline = "top";
Expand Down Expand Up @@ -887,7 +887,7 @@ const drawKeyInput = () => {
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.font = `600 5vh Montserrat, Pretendard Variable`;
ctx.font = `600 5vh Montserrat, Pretendard JP Variable`;
ctx.textBaseline = "top";
ctx.textAlign = "center";
ctx.fillText(
Expand Down Expand Up @@ -925,7 +925,7 @@ const cntRender = () => {
}
fontSize = (canvas.height / 100) * (30 - (comboAlertMs + 900 - Date.now()) / 90);
ctx.beginPath();
ctx.font = `700 ${fontSize}px Montserrat, Pretendard Variable`;
ctx.font = `700 ${fontSize}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = `rgba(200,200,200,${comboOpacity})`;
ctx.textBaseline = "middle";
ctx.textAlign = "center";
Expand Down Expand Up @@ -971,9 +971,9 @@ const cntRender = () => {
if (renderTriggers[i].ms - 1 <= seek && renderTriggers[i].ms + renderTriggers[i].time > seek && disableText == "false") {
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard Variable`;
ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable`;
if (renderTriggers[i].size.indexOf("vh") != -1)
ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard Variable`;
ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = renderTriggers[i].align;
ctx.textBaseline = renderTriggers[i].valign;
ctx.fillText(renderTriggers[i].text, (canvas.width / 200) * (renderTriggers[i].x + 100), (canvas.height / 200) * (renderTriggers[i].y + 100));
Expand Down Expand Up @@ -1058,7 +1058,7 @@ const cntRender = () => {
}
} catch (e) {
if (e) {
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#F55";
ctx.textAlign = "left";
ctx.textBaseline = "top";
Expand All @@ -1084,12 +1084,12 @@ const cntRender = () => {
displayScore = score;
}
ctx.beginPath();
ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard Variable`;
ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#fff";
ctx.textAlign = "right";
ctx.textBaseline = "top";
ctx.fillText(numberWithCommas(`${Math.round(displayScore)}`.padStart(9, 0)), canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05);
ctx.font = `${canvas.height / 40}px Montserrat, Pretendard Variable`;
ctx.font = `${canvas.height / 40}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#fff";
ctx.fillText(`${combo}x`, canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05 + canvas.height / 25);
drawCursor();
Expand All @@ -1112,7 +1112,7 @@ const cntRender = () => {
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.font = `italic 600 ${canvas.height / 40}px Montserrat, Pretendard Variable`;
ctx.font = `italic 600 ${canvas.height / 40}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = "left";
ctx.textBaseline = "middle";
ctx.fillText("NEW RECORD!", canvas.width * 0.87, canvas.height * 0.23);
Expand Down Expand Up @@ -1302,7 +1302,7 @@ const calculateResult = () => {
}
if (missPoint.length == 0) {
missCtx.fillStyle = "#FFF";
missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
missCtx.textAlign = "right";
missCtx.textBaseline = "bottom";
missCtx.fillText("Perfect!", missCanvas.width - 10, missCanvas.height * 0.8 - 10);
Expand Down Expand Up @@ -1375,7 +1375,7 @@ const trackMouseSelection = (i, v1, v2, x, y) => {
}
break;
default:
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#F55";
ctx.textAlign = "left";
ctx.textBaseline = "top";
Expand Down
28 changes: 14 additions & 14 deletions public/js/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ const drawParticle = (n, x, y, j, d) => {
let newY = y - 2 * Math.round(p / 10);
ctx.fillStyle = getJudgeStyle(j.toLowerCase(), p, cx, newY);
ctx.strokeStyle = `rgba(0, 0, 0, ${1 - p / 100})`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard Variable`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.lineWidth = 2;
Expand All @@ -459,7 +459,7 @@ const drawParticle = (n, x, y, j, d) => {
let newY = cy - Math.round(p / 10);
ctx.fillStyle = getJudgeStyle("miss", p);
ctx.strokeStyle = `rgba(255, 255, 255, ${1 - p / 100})`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard Variable`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.lineWidth = 2;
Expand All @@ -473,7 +473,7 @@ const drawParticle = (n, x, y, j, d) => {
let newY = cy - Math.round(p / 10);
ctx.fillStyle = getJudgeStyle("perfect", p, cx, newY);
ctx.strokeStyle = `rgba(255, 255, 255, ${1 - p / 100})`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard Variable`;
ctx.font = `600 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.lineWidth = 2;
Expand Down Expand Up @@ -732,7 +732,7 @@ const drawBullet = (n, x, y, a) => {
if (skin.bullet.outline) ctx.stroke();
break;
default:
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#F55";
ctx.textAlign = "left";
ctx.textBaseline = "top";
Expand Down Expand Up @@ -800,7 +800,7 @@ const drawKeyInput = () => {
alpha = 1 - (Date.now() - keyInput[keyInput.length - 1].time - 3000) / 1000;
if (alpha <= 0) return;
}
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#FFF";
ctx.textAlign = "left";
ctx.textBaseline = "top";
Expand Down Expand Up @@ -863,7 +863,7 @@ const drawKeyInput = () => {
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.font = `600 5vh Montserrat, Pretendard Variable`;
ctx.font = `600 5vh Montserrat, Pretendard JP Variable`;
ctx.textBaseline = "top";
ctx.textAlign = "center";
ctx.fillText(
Expand Down Expand Up @@ -901,7 +901,7 @@ const cntRender = () => {
}
fontSize = (canvas.height / 100) * (30 - (comboAlertMs + 900 - Date.now()) / 90);
ctx.beginPath();
ctx.font = `700 ${fontSize}px Montserrat, Pretendard Variable`;
ctx.font = `700 ${fontSize}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = `rgba(200,200,200,${comboOpacity})`;
ctx.textBaseline = "middle";
ctx.textAlign = "center";
Expand Down Expand Up @@ -947,9 +947,9 @@ const cntRender = () => {
if (renderTriggers[i].ms - 1 <= seek && renderTriggers[i].ms + renderTriggers[i].time > seek && disableText == false) {
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard Variable`;
ctx.font = `${renderTriggers[i].weight} ${renderTriggers[i].size} Montserrat, Pretendard JP Variable`;
if (renderTriggers[i].size.indexOf("vh") != -1)
ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard Variable`;
ctx.font = `${renderTriggers[i].weight} ${(canvas.height / 100) * Number(renderTriggers[i].size.split("vh")[0])}px Montserrat, Pretendard JP Variable`;
ctx.textAlign = renderTriggers[i].align;
ctx.textBaseline = renderTriggers[i].valign;
ctx.fillText(renderTriggers[i].text, (canvas.width / 200) * (renderTriggers[i].x + 100), (canvas.height / 200) * (renderTriggers[i].y + 100));
Expand Down Expand Up @@ -1033,7 +1033,7 @@ const cntRender = () => {
}
} catch (e) {
if (e) {
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#F55";
ctx.textAlign = "left";
ctx.textBaseline = "top";
Expand All @@ -1057,12 +1057,12 @@ const cntRender = () => {
displayScore = score;
}
ctx.beginPath();
ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard Variable`;
ctx.font = `700 ${canvas.height / 25}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#fff";
ctx.textAlign = "right";
ctx.textBaseline = "top";
ctx.fillText(numberWithCommas(`${Math.round(displayScore)}`.padStart(9, 0)), canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05);
ctx.font = `${canvas.height / 40}px Montserrat, Pretendard Variable`;
ctx.font = `${canvas.height / 40}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#fff";
ctx.fillText(`${combo}x`, canvas.width * 0.92 - canvas.width * 0.01, canvas.height * 0.05 + canvas.height / 25);
drawCursor();
Expand Down Expand Up @@ -1249,7 +1249,7 @@ const calculateResult = () => {
}
if (missPoint.length == 0) {
missCtx.fillStyle = "#FFF";
missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
missCtx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
missCtx.textAlign = "right";
missCtx.textBaseline = "bottom";
missCtx.fillText("Perfect!", missCanvas.width - 10, missCanvas.height * 0.8 - 10);
Expand Down Expand Up @@ -1287,7 +1287,7 @@ const trackMouseSelection = (i, v1, v2, x, y) => {
}
break;
default:
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard Variable`;
ctx.font = `500 ${canvas.height / 30}px Montserrat, Pretendard JP Variable`;
ctx.fillStyle = "#F55";
ctx.textAlign = "left";
ctx.textBaseline = "top";
Expand Down
Loading

0 comments on commit 7fcb7fa

Please sign in to comment.