From: Carl Worth <cworth@cworth.org>
Date: Sun, 8 Mar 2026 13:47:43 +0000 (-0400)
Subject: Add a shuffle button for arranging all tiles in the play area
X-Git-Url: https://git.cworth.org/git?a=commitdiff_plain;h=0404de340453e193544cb0c70c1ff74bfbafac47;p=lmno.games

Add a shuffle button for arranging all tiles in the play area

If the user wants to move them around, they can. But for cleaning up,
(or changing the order randomly), the player can click this shuffle
button.
---

diff --git a/anagrams/anagrams.css b/anagrams/anagrams.css
index a9e2c2c..2c7304f 100644
--- a/anagrams/anagrams.css
+++ b/anagrams/anagrams.css
@@ -70,7 +70,20 @@
   border-radius: 8px;
   margin-bottom: 1em;
   padding: 1em;
-  overflow: hidden;
+}
+
+.center-pool .shuffle-btn {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  z-index: 20;
+  cursor: pointer;
+  color: var(--accent-color);
+  opacity: 0.5;
+}
+
+.center-pool .shuffle-btn:hover {
+  opacity: 1;
 }
 
 .center-pool .tile {
diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index 58dc964..6709105 100644
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -534,6 +534,37 @@ class Game extends React.Component {
     return best || { x: 5 + Math.random() * 80, y: 5 + Math.random() * 75 };
   }
 
+  shuffle_tiles() {
+    const pool = document.querySelector(".center-pool");
+    if (!pool) return;
+
+    const rect = pool.getBoundingClientRect();
+    const tile_size = 48; /* tile width + gap */
+    const pad = 16;       /* padding in px */
+    const usable_w = rect.width - 2 * pad;
+    const usable_h = rect.height - 2 * pad;
+    const cols = Math.max(1, Math.floor(usable_w / tile_size));
+
+    /* Shuffle the tile IDs. */
+    const ids = this.state.center.map(t => t.id);
+    for (let i = ids.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [ids[i], ids[j]] = [ids[j], ids[i]];
+    }
+
+    const positions = { ...this.state.tile_positions };
+    ids.forEach((id, i) => {
+      const col = i % cols;
+      const row = Math.floor(i / cols);
+      positions[id] = {
+        x: (pad + col * tile_size) / rect.width * 100,
+        y: (pad + row * tile_size) / rect.height * 100
+      };
+    });
+
+    this.setState({ tile_positions: positions });
+  }
+
   /*****************************************************
    * Keyboard input during claiming                    *
    *****************************************************/
@@ -840,6 +871,28 @@ class Game extends React.Component {
            onTouchMove={(e) => this.on_center_touch_move(e)}
            onTouchEnd={(e) => this.on_center_touch_end(e)}
            onTouchCancel={(e) => this.on_center_touch_end(e)}>
+        {center.length > 0 ? (
+          <svg className="shuffle-btn"
+               onClick={() => this.shuffle_tiles()}
+               viewBox="0 0 24 24" width="24" height="24">
+            <title>Shuffle tiles</title>
+            <defs>
+              <marker id="arr" viewBox="0 0 6 6" refX="3" refY="3"
+                      markerWidth="4" markerHeight="4" orient="auto-start-reverse">
+                <path d="M0,0 L6,3 L0,6 Z" fill="currentColor"/>
+              </marker>
+            </defs>
+            <polyline points="2,7 8,7 16,17 22,17"
+                      fill="none" stroke="currentColor" strokeWidth="2"
+                      strokeLinecap="round" strokeLinejoin="round"
+                      markerEnd="url(#arr)"/>
+            <line x1="8.5" y1="16" x2="2" y2="16" fill="none"
+                  stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+            <line x1="15.5" y1="8" x2="22" y2="8" fill="none"
+                  stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                  markerEnd="url(#arr)"/>
+          </svg>
+        ) : null}
         {center.length === 0 ? (
           <div className="status">
             No letters yet. Press the bag to request one.