- fix navigating through the games

TobiasMue91 · Jun 15, 2024 · eea1c6b · eea1c6b
1 parent 14f09b1
commit eea1c6b
Showing 1 changed file with 22 additions and 6 deletions.
diff --git a/games/human_benchmark/index.html b/games/human_benchmark/index.html
@@ -332,6 +332,7 @@ <h2 class="text-xl font-semibold mt-2">Button Mashing Test</h2>
                 window.location.hash = screenName;
                 $('#landing-tab').addClass('hidden');
                 $('#game-container').removeClass('hidden');
+                $('#game-container .test-screen').removeClass('hidden');
                 return $.getScript(jsFileName);
             };
 
@@ -342,6 +343,7 @@ <h2 class="text-xl font-semibold mt-2">Button Mashing Test</h2>
             return $.get(htmlFileName)
                 .then(html => {
                     screenCache[screenName] = { html };
+                    history.pushState({ screenName }, '', `#${screenName}`);
                     return loadContent();
                 })
                 .catch(error => {
@@ -351,8 +353,8 @@ <h2 class="text-xl font-semibold mt-2">Button Mashing Test</h2>
         }
 
         $('.homeButton').click(() => {
-            $('.test-screen.tab-content:visible').hide();
             $('#landing-tab').removeClass('hidden');
+            $('#game-container .test-screen').addClass('hidden');
         });
 
         $('.game-card a').click(function (e) {
@@ -361,9 +363,24 @@ <h2 class="text-xl font-semibold mt-2">Button Mashing Test</h2>
             loadTestScreen(screenName);
         });
 
+        function handlePopState(event) {
+            const screenName = event.state ? event.state.screenName : '';
+            if (screenName) {
+                loadTestScreen(screenName);
+            } else {
+                $('#landing-tab').removeClass('hidden');
+                $('#game-container .test-screen').addClass('hidden');
+            }
+        }
+
+        window.addEventListener('popstate', handlePopState);
+
         const initialHash = window.location.hash.substring(1);
         if (initialHash) {
-            loadTestScreen(initialHash);
+            history.replaceState({ screenName: initialHash }, '', `#${initialHash}`);
+            handlePopState({ state: { screenName: initialHash } });
+        } else {
+            history.replaceState({}, '', '#');
         }
     });
 
@@ -387,9 +404,8 @@ <h2 class="text-xl font-semibold mt-2">Button Mashing Test</h2>
     document.getElementById('closeScoresModal').addEventListener('click', () => {
         document.getElementById('scoresModal').classList.add('hidden');
     });
-    document.getElementById('showScoresButton').addEventListener('click', showScores);
-    document.getElementById('resetScoresButton').addEventListener('click', resetScores);
 
+    document.getElementById('showScoresButton').addEventListener('click', showScores);
 
     function showScores(e) {
         e.preventDefault();
@@ -413,16 +429,16 @@ <h2 class="text-xl font-semibold mt-2">Button Mashing Test</h2>
             <td class="py-2 px-4 border-b border-gray-300">${score}</td>
         </tr>
     `;
+            index++;
         }
 
         tableHTML += '</tbody></table>';
 
-        // Assuming you have a modal with an ID of 'scoresModal' and a content area with an ID of 'scoresContent'
         document.getElementById('scoresContent').innerHTML = tableHTML;
-        // Add logic to open the modal here, e.g.:
         document.getElementById('scoresModal').classList.remove('hidden');
     }
 
+    document.getElementById('resetScoresButton').addEventListener('click', resetScores);
 
     function resetScores() {
         if (confirm('Are you sure you want to reset all scores?')) {