From 3e593ed7eabf3166145eef3b061b821231267714 Mon Sep 17 00:00:00 2001
From: Johnny <47119111+lostmypillow@users.noreply.github.com>
Date: Wed, 31 Jul 2024 14:52:32 +0800
Subject: [PATCH] optimized gzip efficiency

---
 index.html | 14 +++++++-------
 index.js   | 47 +++++++++++++++++++++++++++++------------------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/index.html b/index.html
index 2fd731c..3aae50b 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,8 @@ <h1>Random Quote</h1>
             </header>
 
             <p>
-                <i id="test">
-
+                <i id="quote">
+<!-- Random quote goes here -->
                 </i>
             </p>
 
@@ -36,17 +36,17 @@ <h1>Random Quote</h1>
             </label>
 
             <p id="author">
-
+<!-- Quote author goes here -->
             </p>
             <footer>
-                <label for="cat">
+                <label for="category">
                     Category:
                 </label>
 
-                <p id="cat">
-
+                <p id="category">
+<!-- Category goes here -->
                 </p>
-                
+
             </footer>
         </article>
 
diff --git a/index.js b/index.js
index 934eb09..8958df0 100644
--- a/index.js
+++ b/index.js
@@ -1,11 +1,10 @@
 import { fileSave } from "https://unpkg.com/browser-fs-access@0.31.0/dist/index.modern.js";
 
-const meow = document.getElementById("test");
-const author = document.getElementById("author");
-const cat = document.getElementById("cat");
+const quoteSpace = document.getElementById("quote");
+const authorSpace = document.getElementById("author");
+const categorySpace = document.getElementById("category");
 const bwutton = document.getElementById("get");
-
-async function getRandomQuote() {
+async function unzipGZ() {
   if ("CompressionStream" in window) {
     const compressedReadableStream = await fetch("data.gz").then(
       (response) => response.body
@@ -15,33 +14,45 @@ async function getRandomQuote() {
       new DecompressionStream("gzip")
     );
     const decomp = await new Response(decompressedReadableStream).json();
-
-    const stuff = decomp[Math.floor(Math.random() * decomp.length)];
-    return stuff;
+    return decomp;
   } else {
     alert("Your browser doesn't support the CompressionStream API.");
   }
 }
+
+const decompressedData = unzipGZ();
+
+function getRandomQuote() {
+  const stuff = decompressedData[Math.floor(Math.random() * decomp.length)];
+  return stuff;
+}
 bwutton.onclick = async function () {
-  meow.textContent = "";
-  author.textContent = "";
-  cat.textContent = "";
-  meow.setAttribute("aria-busy", true);
+  // clear previous content
+  quoteSpace.textContent = "";
+  authorSpace.textContent = "";
+  categorySpace.textContent = "";
+
+  // make loading spinner visible
+  quoteSpace.setAttribute("aria-busy", true);
   author.setAttribute("aria-busy", true);
-  cat.setAttribute("aria-busy", true);
-  //   fetch("./data.json")
-  //     .then((response) => response.json())
-  //     .then((json) => {
+  categorySpace.setAttribute("aria-busy", true);
+
   const content = await getRandomQuote();
+
+  //set HTML contents to generated quote
   meow.textContent = content.quote;
-  author.textContent = content.author;
-  cat.textContent = content.category;
+  authorSpace.textContent = content.author;
+  categorySpace.textContent = content.category;
+
+  // make loading spinner invisible
   meow.setAttribute("aria-busy", false);
   author.setAttribute("aria-busy", false);
   cat.setAttribute("aria-busy", false);
   // });
 };
 
+
+// ignore below:
 // const button = document.getElementById("button");
 
 // if ("CompressionStream" in window) {