From 7aa6d49465a522c128d28444df95dfc9903c0ff5 Mon Sep 17 00:00:00 2001
From: Zoey <z@zoey.dev>
Date: Sun, 23 Apr 2023 22:48:07 -0700
Subject: [PATCH] save fall count

---
 index.html |  3 +++
 index.js   | 27 ++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 6d355a5..6290f29 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,9 @@
 	<p class="center-contents">
 		<img class="pipe" src="/pipe.jpg" alt="metal pipe from metal pipe fallout sound effect videos">
 	</p>
+	<p>
+	<h3><span class="fall-count">???</span> falls</h3>
+	</p>
 	<p><button id="play-now">play now</button></p>
 	<p>
 		<input type="checkbox" id="play-at-random">
diff --git a/index.js b/index.js
index ac3df0f..c7e36d2 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,8 @@
 (function () {
   "use strict";
 
+  const fallKey = "falls";
+
   const pipefall = document.getElementById("pipefall");
   const now = document.getElementById("play-now");
   const playAtRandom = document.getElementById("play-at-random");
@@ -8,9 +10,31 @@
 
   playAtRandom.checked = false;
 
+  function getFalls() {
+    let falls;
+    try {
+      falls = parseInt(localStorage.getItem(fallKey));
+    } catch {
+      falls = 0;
+    }
+    if (Number.isNaN(falls)) {
+      falls = 0;
+    }
+    return falls;
+  }
+
+  const updateFalls = () => {
+    const falls = getFalls();
+    for (const fall of document.querySelectorAll(".fall-count")) {
+      fall.innerText = falls;
+    }
+  };
+
   const play = () => {
-    console.log("pipefall!");
     pipefall.play();
+    const falls = getFalls() + 1;
+    localStorage.setItem(fallKey, falls);
+    updateFalls();
   };
 
   now.addEventListener("click", play);
@@ -38,4 +62,5 @@
       timeSincePlay = 0;
     }
   }, 1000);
+  updateFalls();
 })();