Add randomise and clear buttons

Closes #3 Closes #5
Douile · Feb 4, 2025 · 089967d · 089967d
1 parent 781385e
commit 089967d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 13 deletions.
diff --git a/www/index.html b/www/index.html
@@ -50,9 +50,22 @@
   <script src="./src/wordament.js" async=""></script>
   <script src="./src/register-sw.js" async=""></script>
   <script src="./src/index.js" defer="" async=""></script>
-  <script src="https://cdn.jsdelivr.net/gh/douile/[email protected]/src/nicega.min.js?id=UA-98384710-14" defer="" async="" integrity="sha512-D8z5o03OF4Q0viTL+OtgKGeZY3zMb7EOtUMhfOvUvfpaYWwiKF2j+TaXUnWkn+qSqwwmHgtvwwvRsdXl2jEq0Q==" crossorigin="anonymous"></script>
 </head>
 <body class="scroll-at-top">
+<!-- Icons-->
+<svg xmlns="http://www.w3.org/2000/svg" class="icons">
+  <defs>
+    <symbol id="arrow-down" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down">
+      <line x1="12" y1="5" x2="12" y2="19" class="scroll-to-bottom"></line><polyline points="19 12 12 19 5 12" class="scroll-to-bottom"></polyline>
+    </symbol>
+    <symbol id="x" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
+      <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+    </symbol>
+    <symbol id="refresh-cw" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw">
+      <polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+    </symbol>
+  </defs>
+</svg>
 <section class="app">
   <div class="input-wrapper">
     <section class="input-box" aria-label="Tile inputs: numbered 1 is top left, 16 is bottom right and 13 is bottom left">
@@ -94,7 +107,11 @@ <h2>Dependencies</h2>
     </ul>
   </section>
 </section>
-<button class="scroll-to-bottom" aria-label="Scroll to bottom of page"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="scroll-to-bottom"><line x1="12" y1="5" x2="12" y2="19" class="scroll-to-bottom"></line><polyline points="19 12 12 19 5 12" class="scroll-to-bottom"></polyline></svg></button>
+<section class="button-bar"><div>
+    <button class="reset-board" aria-label="Reset board" title="Reset board"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="reset-board"><use href="#x"></use></svg></button>
+    <button class="scroll-to-bottom" aria-label="Scroll to bottom of page" title="Scroll to bottom of page"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="scroll-to-bottom"><use href="#arrow-down"></use></svg></button>
+    <button class="random-board" aria-label="Randomise board" title="Randomise board"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="random-board"><use href="#refresh-cw"></use></svg></button>
+</div></section>
 <dialog class="loading" open="">Loading wordlist...</dialog>
 </body>
 </html>
diff --git a/www/src/index.js b/www/src/index.js
@@ -304,6 +304,12 @@ window.addEventListener('click', function(e) {
       case 'scroll-to-bottom':
       window.scrollTo({left: 0, top: document.querySelector('.about').scrollHeight, behavior: 'smooth'});
       return;
+      case 'reset-board':
+      clearBoard();
+      return;
+      case 'random-board':
+      randomiseBoard();
+      return;
     }
   }
 })
@@ -340,14 +346,34 @@ function loadHash() {
     } catch(e) {
       return console.error(e);
     }
-    const size = board.length;
-    for (let i=0;i<size;i++) {
-      const el = document.querySelector(`.input-box > input:nth-child(${i+1})`);
-      if (el !== null) el.value = board[i];
-    }
+    loadBoard(board);
+  }
+}
+
+/** Replace the board values
+ * @param {string[]} board List of board values top to bottom left to right
+*/
+function loadBoard(board) {
+  const size = board.length;
+  for (let i=0;i<size;i++) {
+    const el = document.querySelector(`.input-box > input:nth-child(${i+1})`);
+    if (el !== null) el.value = board[i];
   }
 }
 
+function clearBoard() {
+  loadBoard(Array(16).fill(''));
+  document.querySelector('.output-box').innerHTML = '';
+}
+
+function randomiseBoard() {
+  loadBoard(Array(16).fill('').map(() => {
+    const letter = 97 + Math.floor(Math.random() * 26);
+    return String.fromCharCode(letter);
+  }));
+  solveCurrentBoard();
+}
+
 async function init() {
   const res = await fetch('./assets/wordlist.txt');
   const text = await res.text();

diff --git a/www/src/stylesheet.css b/www/src/stylesheet.css
@@ -91,26 +91,35 @@
   transform: translateY(0px);
 }
 
-button.scroll-to-bottom {
+section.button-bar {
   position: absolute;
-  left: 50%;
   bottom: 15px;
-  margin: 0;
-  margin-left: -20px;
+  left: 15px;
+  right: 15px;
+  display: flex;
+  justify-content: center;
+}
+
+section.button-bar > div {
+  display: flex;
+}
+
+section.button-bar button {
   width: 40px;
   height: 40px;
   border: 0;
   border-radius: 100%;
   background-color: var(--hl);
   opacity: 0;
   transition: opacity .5s ease;
+  margin: 0 5px;
 }
 
-.scroll-at-top button.scroll-to-bottom {
+.scroll-at-top section.button-bar button {
   opacity: 1;
 }
 
-.scroll-to-bottom, svg.scroll-to-bottom > * {
+section.button-bar button, svg.icons * {
   cursor: pointer;
   color: var(--bg);
 }