feat: infinite stages with deterministic generation

qb20nh · Mar 16, 2024 · 4a72574 · 4a72574
1 parent 76cca6e
commit 4a72574
Show file tree

Hide file tree

Showing 11 changed files with 218 additions and 166 deletions.
diff --git a/README.md b/README.md
@@ -2,16 +2,16 @@
 
 # ㅁㅗㅇㅏㅊㅏㅈㄱㅣ
 
-[https://git.d0p.dev](https://git.d0p.dev)
+[https://hangul.d0p.dev](https://hangul.d0p.dev)
 
 한글 자모를 조합해 숨겨진 단어를 찾아내는 퍼즐 게임
 
 ## Single player
 
 - [x] Restart game after solving the stage
 - [ ] Add events for settings panel
-- [ ] Seed-based board generation
-  - [ ] Numbered stages(infinitely many)
+- [x] Seed-based board generation
+  - [x] Numbered stages(infinitely many)
 - [ ] Speech API to speak out completed word
 - [x] Cheat prevention (browser find feature)
   - [x] pointer position based tracking instead of using element hover state

diff --git a/css.css b/css.css
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=ko data-mode=system><meta name=darkreader-lock><meta name=background-color content=#ffffff><meta name=background-color media="(prefers-color-scheme: dark)" content=#101010><meta name=theme-color content=#ffffff><meta name=theme-color media="(prefers-color-scheme: dark)" content=#101010><title>ㅁㅗㅇㅏㅊㅏㅈㄱㅣ</title><link rel=stylesheet href=css.css><link rel=manifest href=pwa.webmanifest><link rel=icon href=images/icon.svg><body><script>const begin = performance.now()</script><header><nav><button id=dark-mode-toggle title="다크 모드 전환" data-mode=system data-mode-options=system|dark|light><span id=sun></span><span id=moon></span></button></nav><img src=images/icon.svg><div><span id=stage>1</span>판</div></header><main><template id=word-template><li data-word=""></li></template><ul id=word-list></ul><template id=jamo-template><i></i></template><template id=completion-bar-template><div class=completion-bar></div></template><section id=jamo-board></section></main><footer><p>© qb20nh 2024. All rights reserved.</p></footer><section id=controls><button id=show-settings-panel title=설정>⚙️설정</button></section><dialog id=settings-panel class=modal><form method=dialog><h2>게임 설정</h2><fieldset><legend>게임 상태 내보내기</legend><textarea id=export-game-state-plaintext class=noresize readonly cols=16 rows=2 title="게임 상태 텍스트"></textarea><br><button type=button id=copy-game-state-plaintext title=복사>📋복사</button> <button type=button id=download-game-state-plaintext title=다운로드>⬇️다운로드</button></fieldset><fieldset><legend>게임 상태 불러오기</legend><label id=file-wrapper for=select-game-state-file data-text="파일 불러오기"><input type=file id=select-game-state-file accept=.hwg.txt alt="파일 불러오기"></label><br>또는<br><textarea id=import-game-state-plaintext class=noresize cols=16 rows=2 placeholder="여기에 게임 상태 텍스트 붙여넣기" title="여기에 게임 상태 텍스트 붙여넣기"></textarea><br><button type=button id=apply-imported-game-state title=적용>📝적용</button></fieldset><fieldset><legend>게임 상태 지우기</legend>게임 진행 중 오류가 발생한 경우, 저장된 게임 진행도를 초기화하여 새로 시작할 수 있습니다.<br><button type=button id=clear-game-state title=지우기>🗑️지우기</button></fieldset><button type=submit title=닫기>❌닫기</button></form></dialog><dialog id=stage-clear-dialog class=modal><h2>모두 찾음!</h2><p>다음 판으로 넘어가시겠습니까?</p><button type=button id=next-stage title=네>➡️네</button> <button type=button id=cancel-next-stage title=아니오>↩️아니오</button></dialog><script src=src/js.js></script></body></html>
+<!DOCTYPE html><html lang=ko data-mode=system><meta name=darkreader-lock><meta name=background-color content=#ffffff><meta name=background-color media="(prefers-color-scheme: dark)" content=#101010><meta name=theme-color content=#ffffff><meta name=theme-color media="(prefers-color-scheme: dark)" content=#101010><title>ㅁㅗㅇㅏㅊㅏㅈㄱㅣ</title><link rel=stylesheet href=css.css><link rel=manifest href=pwa.webmanifest><link rel=icon href=images/icon.svg><script src=integrity_check.js></script><body><script>const begin = performance.now()</script><header><nav><button id=dark-mode-toggle title="다크 모드 전환" data-mode=system data-mode-options=system|dark|light><span id=sun></span><span id=moon></span></button></nav><img src=images/icon.svg><div><span id=stage>1</span>판</div></header><main><template id=word-template><li data-word=""></li></template><ul id=word-list></ul><div class=br></div><template id=jamo-template><i></i></template><template id=completion-bar-template><div class=completion-bar></div></template><section id=jamo-board></section></main><footer><p>© qb20nh 2024. All rights reserved.</p></footer><section id=controls><button id=show-settings-panel title=설정>⚙️설정</button></section><dialog id=settings-panel class=modal><form method=dialog><h2>게임 설정</h2><fieldset><legend>게임 상태 내보내기</legend><textarea id=export-game-state-plaintext class=noresize readonly cols=16 rows=2 title="게임 상태 텍스트"></textarea><br><button type=button id=copy-game-state-plaintext title=복사>📋복사</button> <button type=button id=download-game-state-plaintext title=다운로드>⬇️다운로드</button></fieldset><fieldset><legend>게임 상태 불러오기</legend><label id=file-wrapper for=select-game-state-file data-text="파일 불러오기"><input type=file id=select-game-state-file accept=.hwg.txt alt="파일 불러오기"></label><br>또는<br><textarea id=import-game-state-plaintext class=noresize cols=16 rows=2 placeholder="여기에 게임 상태 텍스트 붙여넣기" title="여기에 게임 상태 텍스트 붙여넣기"></textarea><br><button type=button id=apply-imported-game-state title=적용>📝적용</button></fieldset><fieldset><legend>게임 상태 지우기</legend>게임 진행 중 오류가 발생한 경우, 저장된 게임 진행도를 초기화하여 새로 시작할 수 있습니다.<br><button type=button id=clear-game-state title=지우기>🗑️지우기</button></fieldset><button type=submit title=닫기>❌닫기</button></form></dialog><dialog id=stage-clear-dialog class=modal><h2>모두 찾음!</h2><p>다음 판으로 넘어가시겠습니까?</p><button type=button id=next-stage title=네>➡️네</button> <button type=button id=cancel-next-stage title=아니오>↩️아니오</button></dialog><script src=js.js></script></body></html>
diff --git a/integrity_check.js b/integrity_check.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=ko data-mode=system><meta name=darkreader-lock><meta name=background-color content=#ffffff><meta name=background-color media="(prefers-color-scheme: dark)" content=#101010><meta name=theme-color content=#ffffff><meta name=theme-color media="(prefers-color-scheme: dark)" content=#101010><title>ㅁㅗㅇㅏㅊㅏㅈㄱㅣ</title><link rel=stylesheet href=css.css><link rel=manifest href=pwa.webmanifest><link rel=icon href=images/icon.svg><body><script>const begin = performance.now()</script><header><nav><button id=dark-mode-toggle title="다크 모드 전환" data-mode=system data-mode-options=system\|dark\|light><span id=sun></span><span id=moon></span></button></nav><img src=images/icon.svg><div><span id=stage>1</span>판</div></header><main><template id=word-template><li data-word=""></li></template><ul id=word-list></ul><template id=jamo-template><i></i></template><template id=completion-bar-template><div class=completion-bar></div></template><section id=jamo-board></section></main><footer><p>© qb20nh 2024. All rights reserved.</p></footer><section id=controls><button id=show-settings-panel title=설정>⚙️설정</button></section><dialog id=settings-panel class=modal><form method=dialog><h2>게임 설정</h2><fieldset><legend>게임 상태 내보내기</legend><textarea id=export-game-state-plaintext class=noresize readonly cols=16 rows=2 title="게임 상태 텍스트"></textarea><br><button type=button id=copy-game-state-plaintext title=복사>📋복사</button> <button type=button id=download-game-state-plaintext title=다운로드>⬇️다운로드</button></fieldset><fieldset><legend>게임 상태 불러오기</legend><label id=file-wrapper for=select-game-state-file data-text="파일 불러오기"><input type=file id=select-game-state-file accept=.hwg.txt alt="파일 불러오기"></label><br>또는<br><textarea id=import-game-state-plaintext class=noresize cols=16 rows=2 placeholder="여기에 게임 상태 텍스트 붙여넣기" title="여기에 게임 상태 텍스트 붙여넣기"></textarea><br><button type=button id=apply-imported-game-state title=적용>📝적용</button></fieldset><fieldset><legend>게임 상태 지우기</legend>게임 진행 중 오류가 발생한 경우, 저장된 게임 진행도를 초기화하여 새로 시작할 수 있습니다.<br><button type=button id=clear-game-state title=지우기>🗑️지우기</button></fieldset><button type=submit title=닫기>❌닫기</button></form></dialog><dialog id=stage-clear-dialog class=modal><h2>모두 찾음!</h2><p>다음 판으로 넘어가시겠습니까?</p><button type=button id=next-stage title=네>➡️네</button> <button type=button id=cancel-next-stage title=아니오>↩️아니오</button></dialog><script src=src/js.js></script></body></html>
		<!DOCTYPE html><html lang=ko data-mode=system><meta name=darkreader-lock><meta name=background-color content=#ffffff><meta name=background-color media="(prefers-color-scheme: dark)" content=#101010><meta name=theme-color content=#ffffff><meta name=theme-color media="(prefers-color-scheme: dark)" content=#101010><title>ㅁㅗㅇㅏㅊㅏㅈㄱㅣ</title><link rel=stylesheet href=css.css><link rel=manifest href=pwa.webmanifest><link rel=icon href=images/icon.svg><script src=integrity_check.js></script><body><script>const begin = performance.now()</script><header><nav><button id=dark-mode-toggle title="다크 모드 전환" data-mode=system data-mode-options=system\|dark\|light><span id=sun></span><span id=moon></span></button></nav><img src=images/icon.svg><div><span id=stage>1</span>판</div></header><main><template id=word-template><li data-word=""></li></template><ul id=word-list></ul><div class=br></div><template id=jamo-template><i></i></template><template id=completion-bar-template><div class=completion-bar></div></template><section id=jamo-board></section></main><footer><p>© qb20nh 2024. All rights reserved.</p></footer><section id=controls><button id=show-settings-panel title=설정>⚙️설정</button></section><dialog id=settings-panel class=modal><form method=dialog><h2>게임 설정</h2><fieldset><legend>게임 상태 내보내기</legend><textarea id=export-game-state-plaintext class=noresize readonly cols=16 rows=2 title="게임 상태 텍스트"></textarea><br><button type=button id=copy-game-state-plaintext title=복사>📋복사</button> <button type=button id=download-game-state-plaintext title=다운로드>⬇️다운로드</button></fieldset><fieldset><legend>게임 상태 불러오기</legend><label id=file-wrapper for=select-game-state-file data-text="파일 불러오기"><input type=file id=select-game-state-file accept=.hwg.txt alt="파일 불러오기"></label><br>또는<br><textarea id=import-game-state-plaintext class=noresize cols=16 rows=2 placeholder="여기에 게임 상태 텍스트 붙여넣기" title="여기에 게임 상태 텍스트 붙여넣기"></textarea><br><button type=button id=apply-imported-game-state title=적용>📝적용</button></fieldset><fieldset><legend>게임 상태 지우기</legend>게임 진행 중 오류가 발생한 경우, 저장된 게임 진행도를 초기화하여 새로 시작할 수 있습니다.<br><button type=button id=clear-game-state title=지우기>🗑️지우기</button></fieldset><button type=submit title=닫기>❌닫기</button></form></dialog><dialog id=stage-clear-dialog class=modal><h2>모두 찾음!</h2><p>다음 판으로 넘어가시겠습니까?</p><button type=button id=next-stage title=네>➡️네</button> <button type=button id=cancel-next-stage title=아니오>↩️아니오</button></dialog><script src=js.js></script></body></html>