Add squares-diamonds board

AbstractPlay · Sep 10, 2024 · a2cb58d · a2cb58d
1 parent ce236ba
commit a2cb58d
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.1] - 2024-09-10
+
+### Added
+
+-   Added support for the new `squares-diamonds` board. Flood-fill only.
+
 ## [1.4.0] - 2024-08-18
 
 ### Added

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "abstractplay-designer",
     "private": true,
-    "version": "1.4.0",
+    "version": "1.4.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -29,7 +29,7 @@
         "vite": "^4.4.5"
     },
     "dependencies": {
-        "@abstractplay/renderer": "latest",
+        "@abstractplay/renderer": "^1.0.0-ci-10801591922.0",
         "nanoid": "^4.0.2",
         "peerjs": "^1.4.7",
         "rfdc": "^1.3.0"

diff --git a/src/components/Annotate.svelte b/src/components/Annotate.svelte
@@ -10,11 +10,16 @@
 
     const boardClick = (row: number, col: number, piece: string) => {
         console.log(`Row: ${row}, Col: ${col}, Piece: ${piece}`);
-        const idx = currentTargets.findIndex(t => t[0] === col && t[1] === row);
+        const idx = currentTargets.findIndex(
+            (t) => t[0] === col && t[1] === row
+        );
         if (idx === -1) {
             currentTargets = [...currentTargets, [col, row]];
         } else {
-            currentTargets = [...currentTargets.slice(0, idx), ...currentTargets.slice(idx+1)];
+            currentTargets = [
+                ...currentTargets.slice(0, idx),
+                ...currentTargets.slice(idx + 1),
+            ];
         }
         return false;
     };
@@ -217,7 +222,11 @@
                 {/if}
                 <div class="field">
                     <div class="content">
-                        <p>Targets <span style="font-size: smaller">(click to add/remove)</span>:</p>
+                        <p>
+                            Targets <span style="font-size: smaller"
+                                >(click to add/remove)</span
+                            >:
+                        </p>
                         <ul>
                             {#each currentTargets as target}
                                 <li>{target[0]}, {target[1]}</li>

diff --git a/src/components/Board.svelte b/src/components/Board.svelte
@@ -22,6 +22,10 @@
             "snubsquare",
             "A unique combination of squares and triangles where most cells have five connections; pieces are placed on the vertices",
         ],
+        [
+            "squares-diamonds",
+            "A square board where the vertices are also spaces. In the designer, pieces cannot be placed anywhere. You can only use flood fill.",
+        ],
         [
             "vertex",
             "A grid of squares, no shading, with pieces placed on the vertices of the lines",
@@ -96,6 +100,7 @@
     let symmetryLocked = true;
     let invertOrientation = false;
     let canInvertOrientation = false;
+    let startDiamonds = false;
     const initVars = () => {
         canBlock = false;
         canAlternate = false;
@@ -159,6 +164,16 @@
         }
     };
 
+    const handleSDChange = () => {
+        if ($state.board.style === "squares-diamonds") {
+            if (startDiamonds) {
+                $state.board.sdStart = "D";
+            } else {
+                $state.board.sdStart = "S";
+            }
+        }
+    };
+
     const handleStyleChange = () => {
         if ($state.board.style === undefined) {
             $state.board = { style: undefined };
@@ -425,6 +440,18 @@
                 </div>
             </div>
         {/if}
+        {#if $state.board.style === "squares-diamonds"}
+            <div class="control">
+                <label class="checkbox">
+                    <input
+                        type="checkbox"
+                        bind:checked="{startDiamonds}"
+                        on:change="{handleSDChange}"
+                    />
+                    Start with diamonds
+                </label>
+            </div>
+        {/if}
         {#if canAlternate}
             <div class="control">
                 <label class="checkbox">

diff --git a/src/components/Play.svelte b/src/components/Play.svelte
@@ -139,6 +139,10 @@
     let floodEnabled = false;
     let floodSupported = true;
 
+    $: if (!floodEnabled && $state.board.style === "squares-diamonds") {
+        floodEnabled = true;
+    }
+
     const onKeyDown = (event: KeyboardEvent) => {
         if (event.repeat) return;
         if (