fix paths and refactorize

bodobraegger · Sep 13, 2023 · 9f4474f · 9f4474f
1 parent 53324f0
commit 9f4474f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 53 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Der Wahre Walter</title>
@@ -15,55 +16,69 @@
   <link rel="favicon-16x16" type="image/png" sizes="16x16" href="public/favicon-16x16.png">
   <link rel="favicon-32x32" type="image/png" sizes="16x16" href="public/favicon-32x32.png">
   <meta name="pwa-capable" content="yes">
+
+  <script type="application/javascript">
+    // PWA
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker
+        .register("./service-worker.js")
+        .then((registration) => {
+          registration.addEventListener("updatefound", () => {
+            // If updatefound is fired, it means that there's
+            // a new service worker being installed.
+            const installingWorker = registration.installing;
+            console.log(
+              "A new service worker is being installed:",
+              installingWorker,
+            );
+
+            // You can listen for changes to the installing service worker's
+            // state via installingWorker.onstatechange
+          });
+        })
+        .catch((error) => {
+          console.error(`Service worker registration failed: ${error}`);
+        });
+    } else {
+      console.error("Service workers are not supported.");
+    }
+  </script>
+  <script type="text/javascript" src="./js/cookies.js"></script>
+  <script type="module" src="./js/cards.js"></script>
 </head>
+
 <body>
-<!-- 
+  <!-- 
 <p class="bold" id="spruch"> ich bin der wahre walter. </p> hehe
 <button onclick="we_want_change()"> change something </button>
---> 
+-->
 
-<div class="container" style="padding: 32px;">
-      <div class="card text-left">
-        <div class="card-body">
-          <div class="card-text" id="current_card"></div>
+  <div class="container" style="padding: 32px;">
+    <div class="card text-left">
+      <div class="card-body">
+        <div class="card-text" id="current_card"></div>
 
-          <div class="row" style="padding-top:16px">
-            <div class="col">
-              <button type="button" class="btn prev" onclick = "LoadPrev()">
-                <code> <-prev </code>
-              </button>
-            </div>
-            <div class="col text-center">
-              <button type="button" class="btn flip btn-light" onclick ="flip_card()" disabled style="display:none">
-                <code> ⭞flip⭜ </code>
-              </button> <!-- ⟳ -->
-            </div>
-            <div class="col">
-              <button type="button" class="btn next float-right" onclick="LoadNext()">
-                <code> next-> </code>
-              </button>
-            </div>
+        <div class="row" style="padding-top:16px">
+          <div class="col">
+            <button type="button" id="btn-prev" class="btn prev">
+              <code> <-prev </code>
+            </button>
           </div>
+          <div class="col text-center">
+            <button type="button" id="btn-flip" class="btn flip btn-light" disabled style="display:none">
+              <code> ⭞flip⭜ </code>
+            </button> <!-- ⟳ -->
+          </div>
+          <div class="col">
+            <button type="button" id="btn-next" class="btn next float-right">
+              <code> next-> </code>
+            </button>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
-</body>
-</html>
 
-<script type="application/javascript; charset=UTF-8">
-  // PWA
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register(
-      `./js/service-worker.js`, {
-        scope: `./`
-      }
-    )
-  }
-</script>
-
-<script type="text/javascript" src="./js/cookies.js"></script>
-<script type="module" src="./js/cards.js"></script>
+</body>
 
+</html>
diff --git a/js/cards.js b/js/cards.js
@@ -3,7 +3,6 @@
 // import data from 'data/walter_cards.json' assert { type: 'json' };
 const data = await fetch('data/walter_cards.json')
     .then((response)=>response.json());
-console.log(data)
 
 var cards = data["cards"];
 
@@ -36,7 +35,7 @@ function LoadOrShuffle() {
         current_nr = hist["current_nr"];
         card_nrs = hist["card_nrs"];
     }
-    if (current_nr == -1) LoadNext();
+    if (current_nr == -1) nextCard();
     else render_card(current_nr);
 }
 
@@ -53,7 +52,7 @@ function setHistoryCookie() {
 }
 
 
-function LoadPrev(card) {
+function prevCard(card) {
     prev_nr = current_nr;
 
     if (viewed_nrs.length <= 0) {
@@ -69,7 +68,7 @@ function LoadPrev(card) {
 
 }
 
-function LoadNext() {
+function nextCard() {
     prev_nr = current_nr;
 
     if (card_nrs.length <= 0) {
@@ -90,7 +89,7 @@ function LoadNext() {
 
 function render_card(card_nr) {
     var cc = document.getElementById("current_card");
-    var flip_btn = document.getElementsByClassName("flip")[0];
+    var flip_btn = document.getElementById("btn-flip");
 
 
     if ("gender" in cards[card_nr]) {
@@ -120,7 +119,7 @@ function render_card(card_nr) {
 
 
 // render the flipside of a gendered card
-function flip_card() {
+function flipCard() {
     // not a gendered card, abort
     if (current_nr == -1 || !("gender" in cards[current_nr])) return;
 
@@ -168,16 +167,20 @@ function shuffle(a) {
 
 // Change cards on arrow keys
 window.onkeydown = function (e) {
-    switch (e.keyCode) {
-        case 38: // Arrow up
-        case 37: // Arrow left 
+    switch (e.key) {
+        case "ArrowUp":
+        case "ArrowLeft": 
             e.preventDefault();
-            LoadPrev();
+            prevCard();
             break;
-        case 40: // Arrow down
-        case 39: // Arrow right 
+        case "ArrowDown":
+        case "ArrowRight": 
             e.preventDefault();
-            LoadNext()
+            nextCard()
             break;
     }
-};
+};
+
+document.getElementById('btn-prev').onclick = function () { prevCard(); }
+document.getElementById('btn-flip').onclick = function () { flipCard(); }
+document.getElementById('btn-next').onclick = function () { nextCard(); }
diff --git a/js/service-worker.js → service-worker.js b/js/service-worker.js → service-worker.js
@@ -1,7 +1,8 @@
 const GHPATH = `.`;
 
 const VERSION = `v1`;
-const CACHE_NAME = `the-true-walt-${VERSION}`
+const APP_PREFIX = `the-true-walt`
+const CACHE_NAME = `${APP_PREFIX}-${VERSION}`
 
 const APP_STATIC_RESOURCES = [
   `${GHPATH}/`,