v1.7.5: Add board context

Author: Perlkonig

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.7.5] - 2026-02-27
+
+### Added
+
+-   Added the `board` colour context and picker. It defaults to the `background` colour when not present, and when both are the same, changing `background` also changes `board`, but `board` can be set independently.
+
 ## [1.7.4] - 2026-02-11
 
 ### Added

package-lock.json

@@ -1,7 +1,7 @@
 {
     "name": "abstractplay-designer",
     "private": true,
-    "version": "1.7.4",
+    "version": "1.7.5",
     "type": "module",
     "scripts": {
         "dev": "set NODE_ENV=development && vite",
@@ -31,7 +31,7 @@
         "vite": "^4.4.5"
     },
     "dependencies": {
-        "@abstractplay/renderer": "^1.0.0-ci-21915038092.0",
+        "@abstractplay/renderer": "^1.0.0-ci-22496217164.0",
         "@types/html2canvas": "^0.5.35",
         "@zerodevx/svelte-toast": "^0.9.6",
         "gif.js.optimized": "^1.0.1",

package.json

@@ -12,6 +12,19 @@
     import ColorPicker from "svelte-awesome-color-picker";
     import { generateField as genField } from "#/lib/modular";
 
+    const handleBackgroundChange = (event: CustomEvent<{ hex: string }>) => {
+        if (event.detail.hex === undefined) {
+            return;
+        }
+        colourContext.update((v) => {
+            const newContext = { ...v, background: event.detail.hex };
+            if (v.background === v.board) {
+                newContext.board = event.detail.hex;
+            }
+            return newContext;
+        });
+    };
+
     const boardTypes = new Map<SupportedBoards, string>([
         [
             "squares",
@@ -443,6 +456,7 @@
 
     let previewDiv: HTMLDivElement;
     onMount(() => {
+        colourContext.update((v) => ({ ...v, board: v.board ?? v.background }));
         const updatePreview = (state: RenderRepModified) => {
             if (previewDiv !== undefined && previewDiv !== null) {
                 const toRender = JSON.parse(
@@ -789,25 +803,32 @@
                     <div class="control">
                         <ColorPicker
                             bind:hex="{$colourContext.background}"
-                            on:input="{(event) =>
-                                colourContext.update((v) => ({
-                                    ...v,
-                                    background: event.detail.hex,
-                                }))}"
+                            on:change="{handleBackgroundChange}"
+                            position="responsive"
+                        />
+                    </div>
+                </div>
+                <div class="column">
+                    <label class="label">Board</label>
+                    <div class="control">
+                        <ColorPicker
+                            bind:hex="{$colourContext.board}"
+                            on:change="{(e) =>
+                                e.detail.hex &&
+                                colourContext.update((v) => ({ ...v, board: e.detail.hex }))}"
                             position="responsive"
                         />
                     </div>
+                    <div class="help">Used for board fills</div>
                 </div>
                 <div class="column">
                     <label class="label">Strokes</label>
                     <div class="control">
                         <ColorPicker
                             bind:hex="{$colourContext.strokes}"
-                            on:input="{(event) =>
-                                colourContext.update((v) => ({
-                                    ...v,
-                                    strokes: event.detail.hex,
-                                }))}"
+                            on:change="{(e) =>
+                                e.detail.hex &&
+                                colourContext.update((v) => ({ ...v, strokes: e.detail.hex }))}"
                             position="responsive"
                         />
                     </div>
@@ -817,11 +838,9 @@
                     <div class="control">
                         <ColorPicker
                             bind:hex="{$colourContext.labels}"
-                            on:input="{(event) =>
-                                colourContext.update((v) => ({
-                                    ...v,
-                                    labels: event.detail.hex,
-                                }))}"
+                            on:change="{(e) =>
+                                e.detail.hex &&
+                                colourContext.update((v) => ({ ...v, labels: e.detail.hex }))}"
                             position="responsive"
                         />
                     </div>
@@ -831,11 +850,9 @@
                     <div class="control">
                         <ColorPicker
                             bind:hex="{$colourContext.fill}"
-                            on:input="{(event) =>
-                                colourContext.update((v) => ({
-                                    ...v,
-                                    fill: event.detail.hex,
-                                }))}"
+                            on:change="{(e) =>
+                                e.detail.hex &&
+                                colourContext.update((v) => ({ ...v, fill: e.detail.hex }))}"
                             position="responsive"
                         />
                     </div>

src/components/Board.svelte

@@ -8,6 +8,7 @@ export const defaultContext: IColourContext = {
     labels: "#000",
     annotations: "#000",
     fill: "#000",
+    board: "#fff",
 };
 
 let initialState: IColourContext = {
@@ -17,6 +18,7 @@ let initialState: IColourContext = {
     labels: "#000",
     annotations: "#000",
     fill: "#000",
+    board: "#fff",
 };
 
 if (localStorage.getItem("context") !== null) {