Added half renders and randomized hex field

Author: Perlkonig

.npmrc

@@ -1 +1,2 @@
 @abstractplay:registry=https://npm.pkg.github.com/
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

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.1] - 2025-01-13
+
+### Added
+
+-   Added support for half rendering of `hex-of-*` boards.
+-   Added the randomized modular hex field option.
+
 ## [1.6.0] - 2024-11-13
 
 ### Added

package-lock.json

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

package.json

@@ -9,6 +9,7 @@
     import type { IRenderOptions } from "@abstractplay/renderer";
     import { onMount } from "svelte";
     import ColorPicker from "svelte-awesome-color-picker";
+    import { generateField as genField } from "@/lib/modular";
 
     const boardTypes = new Map<SupportedBoards, string>([
         [
@@ -128,14 +129,19 @@
     let whichWidth: "abs" | "minmax" | undefined;
     let canBlock = false;
     let canAlternate = false;
+    let canHalf = false;
     let symmetryLocked = true;
     let invertOrientation = false;
     let canInvertOrientation = false;
     let startDiamonds = false;
     let selectedOptions: ValidOption[] = [];
+    let selectedHalf: "full"|"top"|"bottom" = "full";
+    let numModules = 7;
     const initVars = () => {
         canBlock = false;
         canAlternate = false;
+        canHalf = false;
+        selectedHalf = "full";
         if ($state.board.style === undefined) {
             whichWidth = undefined;
         } else if (
@@ -185,6 +191,7 @@
             if ($state.board.style.startsWith("hex-of")) {
                 canBlock = true;
                 canAlternate = true;
+                canHalf = true;
             }
         } else {
             // go board here
@@ -202,6 +209,16 @@
         $state = $state;
     }
 
+    $: if (selectedHalf !== undefined) {
+        if (selectedHalf === "full") {
+            delete $state.board.half;
+        } else {
+            $state.board.alternatingSymmetry = false;
+            $state.board.half = selectedHalf;
+        }
+        $state = $state;
+    }
+
     const handleInvertClick = () => {
         if ($state.board.style === "cairo-collinear") {
             if (invertOrientation) {
@@ -361,6 +378,11 @@
         return false;
     };
 
+    const generateField = () => {
+        $state.board = genField(numModules) as (BoardBasic & { style: SupportedBoards | "modular-hex"; });
+        $state = $state;
+    }
+
     let previewDiv: HTMLDivElement;
     onMount(() => {
         const updatePreview = (state: RenderRepModified) => {
@@ -544,6 +566,22 @@
                 </label>
             </div>
         {/if}
+        {#if canHalf}
+        <div class="control">
+            <label class="radio">
+                <input type="radio" name="half" value="full" bind:group="{selectedHalf}" />
+                Full
+            </label>
+            <label class="radio">
+              <input type="radio" name="half" value="top" bind:group="{selectedHalf}" />
+              Top half
+            </label>
+            <label class="radio">
+              <input type="radio" name="half" value="bottom" bind:group="{selectedHalf}" />
+              Bottom half
+            </label>
+          </div>
+        {/if}
         {#if canInvertOrientation}
             <div class="control">
                 <label class="checkbox">
@@ -606,6 +644,19 @@
             >
         {/if}
         <hr />
+        <div class="content">
+            <p>You can generate a randomized hex field composed of modules (hexhex 2s) arranged to always touch another at two points. Select the number of modules and then the `Generate field` button.</p>
+        </div>
+        <div class="field padTop">
+            <label class="label" for="numModules">Number of modules</label>
+            <div class="control">
+                <input class="input" name="numModules" type="number" min="1" max="30" bind:value="{numModules}" />
+            </div>
+            <div class="control">
+                <button class="button apButton" on:click="{generateField}">Generate field</button>
+            </div>
+        </div>
+        <hr />
         <div class="content">
             <p>
                 The renderer supports a number of other options that might be