Add debug module (#109)

acenturyandabit · Oct 18, 2024 · 5354827 · 5354827
1 parent da1f493
commit 5354827
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 22 deletions.
diff --git a/app/app.js b/app/app.js
@@ -0,0 +1,6 @@
+// @ts-check
+
+import { showDebugTab } from "./utils/debug.js";
+
+// Show the debug tab if the debug mode is enabled.
+showDebugTab();
diff --git a/app/utils/debug.js b/app/utils/debug.js
@@ -0,0 +1,59 @@
+// @ts-check
+
+/**
+ * @description
+ * Check if the debug mode is enabled.
+ * To enable the debug mode, add the query parameter "p=debug" to the URL.
+ * Example: http://localhost:8000/?p=debug
+ * @returns {boolean}
+ */
+function isDebugModeEnabled() {
+  return "debug" === new URL(window.location.href).searchParams.get("p");
+}
+
+/**
+ * @description
+ * Reset the local storage (fortknightHS).
+ */
+function resetLocalStorage() {
+  localStorage.removeItem("fortknightHS");
+  location.reload();
+}
+
+/**
+ * @description
+ * Show the debug info in the debug tab.
+ */
+function showDebugInfo() {
+  const debugTab = document.querySelector(".debug");
+  if (debugTab) {
+    debugTab.textContent = JSON.stringify(
+      JSON.parse(localStorage.getItem("fortknightHS") ?? "{}"),
+      undefined,
+      2
+    );
+  } else {
+    console.error("Debug tab not found.");
+  }
+}
+
+/**
+ * @description
+ * Show the debug tab, if the debug mode is enabled.
+ */
+function showDebugTab() {
+  if (isDebugModeEnabled()) {
+    const debugTab = document.querySelector(".debugTab");
+    if (debugTab) {
+      debugTab.classList.remove("hidden");
+    } else {
+      console.error("Debug tab not found.");
+    }
+  }
+}
+
+/** event listeners */
+document.querySelector("#show-debug")?.addEventListener("click", showDebugInfo);
+document.querySelector("#reset-button")?.addEventListener("click", resetLocalStorage);
+
+export { showDebugTab };
diff --git a/css/styles.css b/css/styles.css
@@ -345,3 +345,7 @@ input:checked[type="checkbox"]::before{
 		width: auto;
 	}
 }
+
+.hidden {
+	display: none;
+}
diff --git a/index.html b/index.html
@@ -19,6 +19,9 @@
         gtag('config', 'UA-171629673-2');
     </script>
     <link rel="stylesheet" href="css/styles.css">
+
+    <!-- App Logic -->
+    <script src="app/app.js" type="module" defer></script>
 </head>
 
 <body>
@@ -184,8 +187,8 @@ <h2>Achievements</h2>
                 <label style="font-size: 10px"><br>Toggle Knight's<br>possible moves</label>
             </div>
 
-            <div class='debugTab'>
-                <p onclick="showDebug()">DEBUG</p>
+            <div class='debugTab hidden'>
+                <p id="show-debug">DEBUG</p>
                 <div>
                     <h2>Debug Informations</h2>
                     <button id="reset-button">ResetLocalStorage</button>

diff --git a/js/debug.js b/js/debug.js
@@ -1,18 +1,3 @@
-function showDebug() {
-    document.querySelector('.debug').textContent = JSON.stringify(
-        JSON.parse(localStorage.getItem('fortknightHS')),
-        undefined,
-        2
-    );
-}
-
-const resetButton = document.querySelector('#reset-button');
-
-resetButton.addEventListener('click', () => {
-    localStorage.removeItem('fortknightHS');
-    location.reload();
-});
-
 const testAchButton = document.querySelector('#test-button');
 
 testAchButton.addEventListener('click', () => {
@@ -21,8 +6,3 @@ testAchButton.addEventListener('click', () => {
         highscoreDict.achievementProgress['lazy'].achievementDescrption
     );
 });
-
-const debug = new URL(window.location.href).searchParams.get('p');
-if (debug !== 'debug') {
-    document.querySelector('.debugTab').style.display = 'none';
-}