fix: event listener lost on reset

qb20nh · Apr 3, 2024 · 5850891 · 5850891
1 parent 4ebb934
commit 5850891
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 14 deletions.
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=hangulwordgame.webmanifest><link rel=icon href=images/icon.svg><link rel=preload href=js.js as=script integrity="sha256-ziR3SVY8XvSz/vee94On1FyZUJs8f009TCHAYRwMc3s=" crossorigin=anonymous><link rel=preload href=data/wordsets.txt as=fetch crossorigin=anonymous><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 integrity="sha256-ziR3SVY8XvSz/vee94On1FyZUJs8f009TCHAYRwMc3s=" crossorigin=anonymous></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=hangulwordgame.webmanifest><link rel=icon href=images/icon.svg><link rel=preload href=js.js as=script integrity="sha256-+yWYaneYXOdgAB5szVc5cu2SYZS1t+0y8XtS9hHEpT0=" crossorigin=anonymous><link rel=preload href=data/wordsets.txt as=fetch crossorigin=anonymous><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 integrity="sha256-+yWYaneYXOdgAB5szVc5cu2SYZS1t+0y8XtS9hHEpT0=" crossorigin=anonymous></script></body></html>
diff --git a/js.js b/js.js
diff --git a/js.js.map b/js.js.map
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="css.css">
   <link rel="manifest" href="hangulwordgame.webmanifest">
   <link rel="icon" href="images/icon.svg">
-  <link rel="preload" href="js.js" as="script" integrity="sha256-ziR3SVY8XvSz/vee94On1FyZUJs8f009TCHAYRwMc3s=" crossorigin="anonymous">
+  <link rel="preload" href="js.js" as="script" integrity="sha256-+yWYaneYXOdgAB5szVc5cu2SYZS1t+0y8XtS9hHEpT0=" crossorigin="anonymous">
   <link rel="preload" href="data/wordsets.txt" as="fetch" crossorigin="anonymous">
 </head>
 <body>
@@ -77,6 +77,6 @@ <h2>모두 찾음!</h2>
     <button type="button" id="next-stage" title="네">➡️네</button>
     <button type="button" id="cancel-next-stage" title="아니오">↩️아니오</button>
   </dialog>
-  <script src="js.js" integrity="sha256-ziR3SVY8XvSz/vee94On1FyZUJs8f009TCHAYRwMc3s=" crossorigin="anonymous"></script>
+  <script src="js.js" integrity="sha256-+yWYaneYXOdgAB5szVc5cu2SYZS1t+0y8XtS9hHEpT0=" crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/src/js.js b/src/js.js
@@ -503,12 +503,17 @@
       stageClearDialog.close()
     }, { passive: true })
 
+    function prefetchNextStageWordset () {
+      loadWordsetForStage(stageNumber + 1)
+    }
+
     function markWordAsFound (wordElement, completionBarElement) {
       foundWords++
       wordElement.style.setProperty('--hue', completionBarElement.style.getPropertyValue('--hue'))
       wordElement.classList.add('found')
       if (foundWords === wordCount) {
         stageClearDialog.showModal()
+        prefetchNextStageWordset()
       }
     }
 
@@ -911,6 +916,37 @@
       save('pagehide', pagehide + 1)
     }, { passive: true })
 
+    document.getElementById('show-settings-panel').addEventListener('click', () => {
+      document.getElementById('settings-panel').showModal()
+    })
+
+    const minimumPressDuration = 2000
+
+    let timeout = null
+
+    const clearButton = document.getElementById('clear-game-state')
+    clearButton.addEventListener('pointerdown', () => {
+      timeout = setTimeout(() => {
+        clear('gameState')
+        location.reload()
+      }, minimumPressDuration)
+    })
+    clearButton.addEventListener('pointerup', () => {
+      clearTimeout(timeout)
+    })
+    clearButton.addEventListener('pointerleave', () => {
+      clearTimeout(timeout)
+    })
+
+    // fix dialog forms with sandboxed document
+    const dialogCloseButtons = document.querySelectorAll('form[method=dialog]>button[type=submit]')
+    dialogCloseButtons.forEach(button => {
+      button.addEventListener('click', (e) => {
+        e.preventDefault()
+        button.closest('dialog')?.close?.()
+      })
+    })
+
     // @TODO: show relevant image for each word after finding it
     // requestIdleCallback(() => {
     //   // preload images
@@ -972,7 +1008,9 @@
   function average (arr) {
     return arr.reduce((acc, val) => acc + val, 0) / arr.length
   }
-  window.average = average
+  if (DEBUG) {
+    window.average = average
+  }
 
   function median (arr) {
     const sorted = arr.slice().sort((a, b) => a - b)
@@ -982,21 +1020,26 @@
     }
     return sorted[mid]
   }
-  window.median = median
+  if (DEBUG) {
+    window.median = median
+  }
 
   function getCurrentFunctionName () {
     const currentStackRaw = new Error().stack
     const callerLine = currentStackRaw.split('\n').slice(1)[1]
     return callerLine.match(/at (\w+)/)[1]
   }
-  window.getCurrentFunctionName = getCurrentFunctionName
+  if (DEBUG) {
+    window.getCurrentFunctionName = getCurrentFunctionName
+  }
 
   const jsParsed = performance.now()
 
   init()
 
   function registerKonamiCodeHandler () {
-    const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a', 'Enter']
+    const [u, d, l, r] = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+    const konamiCode = [u, u, d, d, l, r, l, r, 'b', 'a', 'Enter']
     let konamiCodeIndex = 0
     const handler = async (e) => {
       if (e.key === konamiCode[konamiCodeIndex]) {
@@ -1011,13 +1054,11 @@
     }
     window.addEventListener('keydown', handler, { passive: true })
   }
-  registerKonamiCodeHandler()
+  if (DEBUG) {
+    registerKonamiCodeHandler()
+  }
 
   function showCrazyShit () {
     console.log('showing lunatic text')
   }
-
-  document.getElementById('show-settings-panel').addEventListener('click', () => {
-    document.getElementById('settings-panel').showModal()
-  })
 })()
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=hangulwordgame.webmanifest><link rel=icon href=images/icon.svg><link rel=preload href=js.js as=script integrity="sha256-ziR3SVY8XvSz/vee94On1FyZUJs8f009TCHAYRwMc3s=" crossorigin=anonymous><link rel=preload href=data/wordsets.txt as=fetch crossorigin=anonymous><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 integrity="sha256-ziR3SVY8XvSz/vee94On1FyZUJs8f009TCHAYRwMc3s=" crossorigin=anonymous></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=hangulwordgame.webmanifest><link rel=icon href=images/icon.svg><link rel=preload href=js.js as=script integrity="sha256-+yWYaneYXOdgAB5szVc5cu2SYZS1t+0y8XtS9hHEpT0=" crossorigin=anonymous><link rel=preload href=data/wordsets.txt as=fetch crossorigin=anonymous><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 integrity="sha256-+yWYaneYXOdgAB5szVc5cu2SYZS1t+0y8XtS9hHEpT0=" crossorigin=anonymous></script></body></html>