Add 'circular-wheel' board style and support shaped enter/exit annotations

Author: Perlkonig

CHANGELOG.md

@@ -5,6 +5,13 @@ 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.6.0] - 2024-11-13
+
+### Added
+
+-   Added the `circular-wheel` board style.
+-   Added support for different enter/exit annotation shapes.
+
 ## [1.5.1] - 2024-10-24
 
 ### Changed

package-lock.json

@@ -1,7 +1,7 @@
 {
     "name": "abstractplay-designer",
     "private": true,
-    "version": "1.5.1",
+    "version": "1.6.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -29,7 +29,7 @@
         "vite": "^4.4.5"
     },
     "dependencies": {
-        "@abstractplay/renderer": "^1.0.0-ci-10967176584.0",
+        "@abstractplay/renderer": "^1.0.0-ci-11827297972.0",
         "nanoid": "^4.0.2",
         "peerjs": "^1.4.7",
         "rfdc": "^1.3.0",

package.json

@@ -9,6 +9,8 @@
     } from "@abstractplay/renderer/build/schemas/schema";
     import { colourContext } from "@/stores/writeContext";
 
+    type Shape = "square"|"circle"|"hexf"|"hexp";
+
     const boardClick = (row: number, col: number, piece: string) => {
         console.log(`Row: ${row}, Col: ${col}, Piece: ${piece}`);
         const idx = currentTargets.findIndex(
@@ -47,6 +49,7 @@
 
     let newNote = false;
     let currentType: "move" | "enter" | "eject" | "dots" | undefined;
+    let currentShape: Shape = "square";
     let currentTargets: [number, number][] = [];
     let currentNote: AnnotationBasic | undefined;
     let isDashed = false;
@@ -76,6 +79,11 @@
             } else {
                 delete currentNote.style;
             }
+            if (currentType === "enter" && currentShape !== "square") {
+                currentNote.shape = currentShape;
+            } else {
+                delete currentNote.shape;
+            }
         } else {
             currentNote = undefined;
         }
@@ -223,6 +231,18 @@
                         </div>
                     </div>
                 {/if}
+                {#if currentType === "enter"}
+                    <div class="field">
+                        <div class="select">
+                            <select bind:value="{currentShape}">
+                              <option value="square">Square</option>
+                              <option value="circle">Circle</option>
+                              <option value="hexf">Hex, flat</option>
+                              <option value="hexp">Hex, pointy</option>
+                            </select>
+                          </div>
+                    </div>
+                {/if}
                 <div class="field">
                     <div class="content">
                         <p>

src/components/Annotate.svelte

@@ -77,6 +77,7 @@
             "hex-of-cir",
             "A hexagonally shaped board consisting of circular cells, pieces placed in the cells",
         ],
+        ["circular-wheel", "A circular wheel & spoke board"],
         ["circular-cobweb", "A circular cobweb board"],
         [
             "conhex-cells",
@@ -172,7 +173,7 @@
             }
             whichWidth = "abs";
         } else if (
-            $state.board.style === "circular-cobweb" ||
+            $state.board.style.startsWith("circular-") ||
             $state.board.style.startsWith("conical-hex")
         ) {
             whichWidth = "abs";
@@ -247,12 +248,13 @@
             } else {
                 $state.board.snubStart = undefined;
             }
-        } else if ($state.board.style === "circular-cobweb") {
+        } else if ($state.board.style.startsWith("circular-")) {
             $state.board = {
                 style: $state.board.style,
                 width: 8,
                 height: 4,
             };
+            symmetryLocked = false;
         } else if ($state.board.style.startsWith("hex-of")) {
             $state.board = {
                 style: $state.board.style,