Add reveal mode

Hamster45105 · Dec 21, 2024 · a7c6337 · a7c6337
1 parent d4d8f2e
commit a7c6337
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/site/index.html b/site/index.html
@@ -24,6 +24,12 @@
       <a href="?page=strands" class="btn btn-outline-primary btn-lg m-2">Strands</a>
       <a href="?page=mini" class="btn btn-outline-primary btn-lg m-2">The Mini</a>
     </div>
+    <label for="revealModeSelect" class="form-label">Reveal Mode:</label>
+    <select id="revealModeSelect" class="form-select w-auto mb-3 mx-auto">
+      <option value="1">Hide All Solutions</option>
+      <option value="2">Default (Hide Future Solutions)</option>
+      <option value="3">Show All Solutions</option>
+    </select>
     <div class="card mt-4">
       <h1 id="title" class="text-center mt-4"></h1>
       <h2 id="subtitle" class="text-center mt-4"></h2>

diff --git a/site/script.js b/site/script.js
@@ -1,4 +1,12 @@
 document.addEventListener('DOMContentLoaded', function () {
+  const revealModeSelect = document.getElementById('revealModeSelect');
+  if (revealModeSelect) {
+    revealModeSelect.value = localStorage.getItem('revealMode') || '2';
+    revealModeSelect.addEventListener('change', () => {
+      localStorage.setItem('revealMode', revealModeSelect.value);
+      location.reload();
+    });
+  }
   const title = document.getElementById('title');
   const subtitle = document.getElementById('subtitle');
   const notice = document.getElementById('notice');
@@ -145,6 +153,8 @@ function fetchSolutions(url, tableId, generateSolutionHTML, startNumber) {
       const tableBody = document.getElementById(tableId).getElementsByTagName('tbody')[0];
       const reversedDates = Object.keys(data).sort((a, b) => new Date(b) - new Date(a));
       let i = startNumber + reversedDates.length - 1;
+      const revealMode = localStorage.getItem('revealMode') || '2';
+
       for (const date of reversedDates) {
         const row = tableBody.insertRow(-1);
         const cell1 = row.insertCell(0);
@@ -160,7 +170,8 @@ function fetchSolutions(url, tableId, generateSolutionHTML, startNumber) {
         const today = new Date();
         today.setHours(0, 0, 0, 0);
 
-        if (solutionDate >= today) {
+        if (revealMode === '1') {
+          // Mode 1: Always hide behind Reveal button
           const revealButton = document.createElement('button');
           revealButton.className = 'btn btn-primary reveal-btn';
           revealButton.textContent = 'Reveal';
@@ -169,7 +180,23 @@ function fetchSolutions(url, tableId, generateSolutionHTML, startNumber) {
             addDetailsEventListeners(cell3, data[date]);
           });
           cell3.appendChild(revealButton);
-        } else {
+        } else if (revealMode === '2') {
+          // Mode 2: If solution date >= today, hide; otherwise show
+          if (solutionDate >= today) {
+            const revealButton = document.createElement('button');
+            revealButton.className = 'btn btn-primary reveal-btn';
+            revealButton.textContent = 'Reveal';
+            revealButton.addEventListener('click', function () {
+              cell3.innerHTML = solutionHTML;
+              addDetailsEventListeners(cell3, data[date]);
+            });
+            cell3.appendChild(revealButton);
+          } else {
+            cell3.innerHTML = solutionHTML;
+            addDetailsEventListeners(cell3, data[date]);
+          }
+        } else if (revealMode === '3') {
+          // Mode 3: Always show
           cell3.innerHTML = solutionHTML;
           addDetailsEventListeners(cell3, data[date]);
         }
@@ -179,7 +206,6 @@ function fetchSolutions(url, tableId, generateSolutionHTML, startNumber) {
       console.error('There was a problem with the fetch operation: ' + e.message);
     })
     .finally(() => {
-      // Hide loading indicator
       document.getElementById('loading').style.display = 'none';
     });
 }

diff --git a/site/style.css b/site/style.css
@@ -117,6 +117,14 @@ body {
   font-size: 20px;
 }
 
+#revealModeSelect {
+  display: inline-block;
+  min-width: 150px;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-top: 1rem;
+}
+
 footer {
   margin-top: 50px;
   text-align: center;