add global pet counter to site :3

site/root/js/pet-me.js

@@ -0,0 +1,30 @@
+(function () {
+  "use strict";
+
+  const DEBOUNCE_TIMER = 1500;
+
+  const url = document.body.classList.contains("debug")
+    ? "http://127.0.0.1:8787/api/pet"
+    : "https://cf.zyllian.workers.dev/api/pet";
+  console.log(url);
+
+  const petCounter = document.querySelector("#pet-counter");
+  const count = petCounter.querySelector(".count");
+  const petButton = petCounter.querySelector("button");
+
+  (async function () {
+    const r = await (await fetch(url)).json();
+    count.innerText = r.count;
+  })();
+
+  petButton.addEventListener("click", async () => {
+    petButton.disabled = true;
+    setTimeout(() => (petButton.disabled = false), DEBOUNCE_TIMER);
+    const r = await (await fetch(url, { method: "post" })).json();
+    if (r.count) {
+      count.innerText = r.count;
+    }
+  });
+
+  petCounter.style.display = "block";
+})();

site/sass/index.scss

@@ -159,3 +159,10 @@ abbr {
     }
   }
 }
+
+#pet-counter {
+  display: none;
+  position: fixed;
+  bottom: 4px;
+  right: 4px;
+}

site/templates/base.hbs

@@ -6,6 +6,7 @@
 	<meta name="referrer" content="no-referrer">
 	<link rel="stylesheet" href="/styles/index.css">
 	<title>{{title}}</title>
+	<script type="text/javascript" src="/js/pet-me.js" defer></script>
 	{{{head}}}
 	{{#each scripts}}
 	<script type="text/javascript" src="{{this}}" defer></script>
@@ -33,6 +34,11 @@
 			{{{page}}}
 		</main>
 	</div>
+
+	<div id="pet-counter">
+		<span class="count">???</span> pets
+		<button>pet me!</button>
+	</div>
 </body>
 
 </html>