Autosave, autoload and cryptomining

alexgmin · alexgmin · commit 59e1843cf87d · 2024-11-22T22:57:05.000+01:00
diff --git a/index.html b/index.html
@@ -8,15 +8,14 @@
 </head>
 
 <body>
-  <h1>Jeff's Bingo</h1>
+  <h1>Jeff's Bingo (Now with autosave)</h1>
+
+  <ul id="bingo"></ul>
 
   <nav>
     <button id="newgrid" onclick="randomLoad()">Random card</button>
   </nav>
 
-  <ul id="bingo"></ul>
-
-
   <script type="text/javascript" src="./textFit.min.js"></script>
   <script type="text/javascript" src="./tailwind.js"></script>
   <script type="application/json" id="bingodata">
@@ -59,7 +58,7 @@ <h1>Jeff's Bingo</h1>
   ]
   </script>
   <script type="text/javascript">
-      randomLoad()
+      loadBingo()
   </script>
 </body>
 </html>
diff --git a/tailwind.css b/tailwind.css
@@ -21,6 +21,13 @@ nav > button {
   border-radius: 15px;
 }
 
+#autosave {
+  text-align: center;
+  color: white;
+  font-size: 3rem;
+  background-color: rgba(0,0,0,0.5);
+}
+
 #bingo {
   --cell-size: 10rem;
   list-style: none;
@@ -48,7 +55,6 @@ nav > button {
   background-size: 215%;
   background-position: center;
 }
-
 #bingo > li.active {
   background-image: url('stamp.png');
   background-size: contain;
diff --git a/tailwind.js b/tailwind.js
@@ -12,6 +12,29 @@ function randomLoad(){
       li.innerText = s;
       bingo.appendChild(li);
       textFit(li, {alignHoriz: true, alignVert: true, multiLine: true, alignVertWithFlexbox: true});
-      li.addEventListener("click", function(){this.classList.toggle("active")})
+      li.addEventListener(
+        "click",
+        toggleBingoCell
+      )
     });
+    storeBingo()
+}
+
+function toggleBingoCell(){
+  this.classList.toggle("active")
+  storeBingo()
+}
+
+function storeBingo(){
+  localStorage.setItem("bingo", document.querySelector("#bingo").innerHTML)
+}
+
+function loadBingo(){
+  let bingo = localStorage.getItem("bingo")
+  // If we don't run textFit first the css they add is not loaded, and we don't have css for .textFitAlignVertFlex
+  randomLoad() // The user won't notice we load a random bingo first
+  if (bingo) {
+    document.querySelector("#bingo").innerHTML = bingo
+    document.querySelectorAll('#bingo > li').forEach((e) => e.addEventListener("click", toggleBingoCell))
+  }
 }
