Skip to content

Optimize performance and refactor font handling in editor #288

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HyeokjinKang merged 17 commits into from
Mar 18, 2026
Merged

Optimize performance and refactor font handling in editor #288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e3501e3
perf: 볼륨 스크롤 API 호출에 debounce 적용
HyeokjinKang Mar 16, 2026
9b08cba
perf: eval/JSON.parse(JSON.stringify()) → structuredClone()으로 교체
HyeokjinKang Mar 16, 2026
7196ac0
perf: 렌더 루프의 Set 재할당을 swap 패턴으로 교체 (editor.js)
HyeokjinKang Mar 16, 2026
ef67cab
perf: JSON.stringify 비교를 참조 동등성(===)으로 교체 (editor.js)
HyeokjinKang Mar 16, 2026
8f57536
perf: canvas ctx.font 문자열을 상수와 캐시 변수로 교체 (play, test, tutorial)
HyeokjinKang Mar 16, 2026
2db0525
style: CSS font-family 스택을 CSS 변수로 중복 제거 (editor.css, play.css)
HyeokjinKang Mar 16, 2026
d708c15
style: 구형 CSS 벤더 프리픽스 및 불필요한 속성 제거 (editor.css, play.css)
HyeokjinKang Mar 16, 2026
4c14c9b
fix: editor.ejs 중복 id 속성 수정 (gotoGame → gotoMain)
HyeokjinKang Mar 16, 2026
f246c11
fix: editor에서 canvas가 background 뒤로 가는 문제
HyeokjinKang Mar 16, 2026
2080fd6
chore: cachedFont -> UIFont 통일
HyeokjinKang Mar 16, 2026
c617f6a
perf: 삼각함수 DEG_TO_RAD 상수 추출로 매 호출마다 발생하는 나눗셈 제거 (utils.js)
HyeokjinKang Mar 16, 2026
8b559eb
perf: noteProgress()에 out 파라미터, bulletPos()에 creationSpeed 파라미터 추가로 객…
HyeokjinKang Mar 16, 2026
4d0c537
perf: cacheConfig()에서 ctx.font 문자열 미리 빌드하여 렌더 루프 내 문자열 할당 제거 (rendere…
HyeokjinKang Mar 16, 2026
5f61c72
perf: 렌더 루프 최적화 — _noteState 재사용, bulletCreationSpeeds 선계산, trackMous…
HyeokjinKang Mar 16, 2026
949c081
perf: editor.js에도 _noteState 재사용, trackMouseSelection beats 파라미터화 적용
HyeokjinKang Mar 16, 2026
98ae9f1
chore(deps): bump flatted to 3.4.0
HyeokjinKang Mar 18, 2026
2aa47cd
chore: organized dependencies
HyeokjinKang Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,19 @@
"ejs": "^3.1.10",
"express": "^5.2.1",
"i18n": "^0.15.3",
"multer": "^2.1.0",
"multer": "^2.1.1",
"node-fetch": "^3.3.2",
"nsfwjs": "^4.2.1",
"nsfwjs": "^4.3.0",
"sharp": "^0.34.5",
"tsc-watch": "^7.2.0"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@types/multer": "^2.0.0",
"@types/node": "^24.11.0",
"@typescript-eslint/eslint-plugin": "^8.56.1",
"@typescript-eslint/parser": "^8.56.1",
"eslint": "^10.0.2",
"@types/multer": "^2.1.0",
"@types/node": "^24.12.0",
"@typescript-eslint/eslint-plugin": "^8.57.1",
"@typescript-eslint/parser": "^8.57.1",
"eslint": "^10.0.3",
"globals": "^17.4.0",
"javascript-obfuscator": "^4.2.2",
"prettier": "^3.8.1",
Expand Down
327 changes: 187 additions & 140 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 1 addition & 10 deletions pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
injectWorkspacePackages: true

onlyBuiltDependencies:
- '@tensorflow/tfjs-node'
- "@tensorflow/tfjs-node"
- core-js
- javascript-obfuscator
- sharp

overrides:
ajv@<6.14.0: '>=6.14.0'
minimatch@<3.1.4: '>=3.1.4'
minimatch@>=5.0.0 <5.1.8: '>=5.1.8'
minimatch@>=9.0.0 <9.0.7: '>=9.0.7'
qs@>=6.7.0 <=6.14.1: '>=6.14.2'
tar@<7.5.8: '>=7.5.8'
tar@<=7.5.3: '>=7.5.4'
138 changes: 14 additions & 124 deletions public/css/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css");
@import url("metropolis.css");

:root {
--font-stack-base:
"Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo,
"Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
--font-montserrat: "Montserrat", var(--font-stack-base);
--font-metropolis: "Metropolis", var(--font-stack-base);
}

body {
line-height: 1.2;
background: #eee url("/images/backgrounds/editor.webp");
Expand All @@ -13,28 +21,7 @@ body {
margin: 0;
padding: 0;
text-align: center;
font-family:
"Montserrat",
"Pretendard JP Variable",
"Pretendard JP",
Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
Roboto,
"Helvetica Neue",
"Segoe UI",
"Hiragino Sans",
"Apple SD Gothic Neo",
Meiryo,
"Noto Sans JP",
"Noto Sans KR",
"Malgun Gothic",
Osaka,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
font-family: var(--font-montserrat);
font-feature-settings: "ss05";
letter-spacing: -0.3px;
overflow-x: hidden;
Expand Down Expand Up @@ -79,9 +66,6 @@ body {
border-left-color: #1788de;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}

Expand All @@ -95,44 +79,12 @@ body {
transform: rotate(360deg);
}
}
@-moz-keyframes pace-spinner {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes pace-spinner {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes pace-spinner {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes pace-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}

Expand Down Expand Up @@ -162,28 +114,7 @@ body {
}

.metropolis {
font-family:
"Metropolis",
"Pretendard JP Variable",
"Pretendard JP",
Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
Roboto,
"Helvetica Neue",
"Segoe UI",
"Hiragino Sans",
"Apple SD Gothic Neo",
Meiryo,
"Noto Sans JP",
"Noto Sans KR",
"Malgun Gothic",
Osaka,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
font-family: var(--font-metropolis);
font-feature-settings: "ss05";
}

Expand Down Expand Up @@ -563,7 +494,8 @@ body {
background-color: white;
}

#gotoGame {
#gotoGame,
#gotoMain {
position: fixed;
left: 3vw;
top: 4.5vh;
Expand Down Expand Up @@ -700,28 +632,7 @@ body {
}

kbd {
font-family:
"Metropolis",
"Pretendard JP Variable",
"Pretendard JP",
Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
Roboto,
"Helvetica Neue",
"Segoe UI",
"Hiragino Sans",
"Apple SD Gothic Neo",
Meiryo,
"Noto Sans JP",
"Noto Sans KR",
"Malgun Gothic",
Osaka,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
font-family: var(--font-metropolis);
font-feature-settings: "ss05";
font-style: italic;
border: 1.5px solid #555;
Expand Down Expand Up @@ -795,28 +706,7 @@ kbd {
}

.optionValue {
font-family:
"Montserrat",
"Pretendard JP Variable",
"Pretendard JP",
Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
Roboto,
"Helvetica Neue",
"Segoe UI",
"Hiragino Sans",
"Apple SD Gothic Neo",
Meiryo,
"Noto Sans JP",
"Noto Sans KR",
"Malgun Gothic",
Osaka,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
font-family: var(--font-montserrat);
font-feature-settings: "ss05";
font-weight: 400;
color: #404040;
Expand Down
88 changes: 9 additions & 79 deletions public/css/play.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-jp.min.css");

:root {
--font-stack-base:
"Pretendard JP Variable", "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo,
"Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
--font-montserrat: "Montserrat", var(--font-stack-base);
}

body {
line-height: 1.2;
background: black;
Expand All @@ -11,28 +18,7 @@ body {
margin: 0;
padding: 0;
text-align: center;
font-family:
"Montserrat",
"Pretendard JP Variable",
"Pretendard JP",
Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
Roboto,
"Helvetica Neue",
"Segoe UI",
"Hiragino Sans",
"Apple SD Gothic Neo",
Meiryo,
"Noto Sans JP",
"Noto Sans KR",
"Malgun Gothic",
Osaka,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
font-family: var(--font-montserrat);
font-feature-settings: "ss05";
letter-spacing: -0.3px;
overflow-x: hidden;
Expand Down Expand Up @@ -77,9 +63,6 @@ body {
border-left-color: #1788de;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}

Expand All @@ -93,44 +76,12 @@ body {
transform: rotate(360deg);
}
}
@-moz-keyframes pace-spinner {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes pace-spinner {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes pace-spinner {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes pace-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}

Expand Down Expand Up @@ -822,28 +773,7 @@ body {
}

.optionValue {
font-family:
"Montserrat",
"Pretendard JP Variable",
"Pretendard JP",
Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
Roboto,
"Helvetica Neue",
"Segoe UI",
"Hiragino Sans",
"Apple SD Gothic Neo",
Meiryo,
"Noto Sans JP",
"Noto Sans KR",
"Malgun Gothic",
Osaka,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
sans-serif;
font-family: var(--font-montserrat);
font-feature-settings: "ss05";
font-weight: 400;
color: #404040;
Expand Down
Loading
Loading