@mirasen/chessboard 1.1.3 → 1.1.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @mirasen/chessboard
 
+## 1.1.5
+
+### Patch Changes
+
+- 1256271: Add a subtle default Mirasen board watermark.
+
+## 1.1.4
+
+### Patch Changes
+
+- 86d630d: Link to the React chessboard package from the README.
+
 ## 1.1.3
 
 ### Patch Changes

package/README.md

@@ -14,6 +14,10 @@ A framework-agnostic TypeScript chessboard platform with real chess interaction
 - [Try the promotion flow](https://mirasen.io/chessboard/examples/promotion.html)
 - [Try the minimal example](https://mirasen.io/chessboard/examples/minimal.html)
 
+## Using React?
+
+Use [`@mirasen/react-chessboard`](https://github.com/mirasen-io/react-chessboard) for a React component with the same built-in interaction, promotion, animation, and chess.js integration.
+
 ## Why this exists
 
 Most chessboards fall into one of two buckets:
@@ -271,6 +275,12 @@ board = createBoard({
 });
 ```
 
+### Default visual identity
+
+The default first-party extension baseline includes a subtle Mirasen board watermark.
+
+If you want full control over the visual baseline, use an explicit extension list and omit the `watermark` extension.
+
 ## Architecture
 
 `@mirasen/chessboard` is built around explicit boundaries:

package/assets/watermark/mirasen.svg

@@ -0,0 +1,10 @@
+<svg width="512" height="512" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M41.91 158.82V41.18H62.5L100.74 108.82L138.97 41.18H159.56V158.82H138.97V76.47L105.15 161.76H96.32L62.5 76.47V158.82H41.91Z"
+    fill="#707a8a"
+  />
+
+  <circle cx="62.5" cy="41.18" r="12" fill="#9F8B4A" />
+  <circle cx="100.74" cy="108.82" r="12" fill="#9F8B4A" />
+  <circle cx="138.97" cy="41.18" r="12" fill="#9F8B4A" />
+</svg>

package/dist/extensions/first-party/watermark/factory.d.ts

@@ -0,0 +1,2 @@
+import { WatermarkDefinition } from './types.js';
+export declare function createWatermark(): WatermarkDefinition;

package/dist/extensions/first-party/watermark/factory.js

@@ -0,0 +1,82 @@
+import assert from '@ktarmyshov/assert';
+import { createSvgElement, updateElementAttributes } from '../../../render/svg/helpers.js';
+import { isUpdateContextRenderable } from '../../types/context/update.js';
+import { extensionCreateInternalBase, extensionDestroyBase, extensionMountBase, extensionUnmountBase } from '../common/helpers.js';
+import { EXTENSION_ID, EXTENSION_SLOTS } from './types.js';
+export function createWatermark() {
+    return {
+        id: EXTENSION_ID,
+        slots: EXTENSION_SLOTS,
+        createInstance() {
+            return createWatermarkInstance();
+        }
+    };
+}
+function createWatermarkInternal() {
+    return {
+        ...extensionCreateInternalBase(),
+        svgWatermark: null
+    };
+}
+function extensionClean(state) {
+    state.svgWatermark = null;
+}
+const watermarkUrl = new URL('../../../../assets/watermark/mirasen.svg', import.meta.url).toString();
+const squareRatio = 0.8; // watermark size relative to square size
+const opacity = '0.3';
+function createWatermarkInstance() {
+    const internalState = createWatermarkInternal();
+    return {
+        id: EXTENSION_ID,
+        mount(env) {
+            extensionMountBase(internalState, env.slotRoots);
+        },
+        onUpdate(context) {
+            const needsRender = context.mutation.hasMutation({
+                causes: ['layout.refreshGeometry']
+            }) && isUpdateContextRenderable(context);
+            if (!needsRender) {
+                return;
+            }
+            context.invalidation.markDirty(1 /* DirtyLayer.Watermark */);
+        },
+        render(context) {
+            assert(context.invalidation.dirtyLayers !== 0, 'Render should only be called when there are dirty layers');
+            const watermarkSquare = context.currentFrame.state.view.orientation === 0 /* ColorCode.White */ ? 7 : 56;
+            const geometry = context.currentFrame.layout.geometry;
+            const r = geometry.getSquareRect(watermarkSquare);
+            const centerX = r.x + r.width / 2;
+            const centerY = r.y + r.height / 2;
+            const size = Math.min(r.width, r.height) * squareRatio;
+            const x = centerX - size / 2;
+            const y = centerY - size / 2;
+            const watermarkAttributes = {
+                opacity: opacity,
+                x: x.toString(),
+                y: y.toString(),
+                width: size.toString(),
+                height: size.toString(),
+                href: watermarkUrl,
+                'pointer-events': 'none'
+            };
+            if (internalState.svgWatermark === null) {
+                assert(internalState.slotRoots, 'Slot roots should be available when render is called');
+                internalState.svgWatermark = createSvgElement(internalState.slotRoots.board, 'image', {
+                    'data-chessboard-id': 'watermark',
+                    ...watermarkAttributes
+                });
+            }
+            else {
+                updateElementAttributes(internalState.svgWatermark, watermarkAttributes);
+            }
+        },
+        unmount() {
+            extensionUnmountBase(internalState);
+            extensionClean(internalState);
+        },
+        destroy() {
+            extensionDestroyBase(internalState);
+            extensionClean(internalState);
+        }
+    };
+}

package/dist/extensions/first-party/watermark/types.d.ts

@@ -0,0 +1,13 @@
+import { ExtensionDefinition, ExtensionInstance } from '../../types/extension.js';
+import { ExtensionInternalBase } from '../common/types.js';
+export declare const EXTENSION_SLOTS: readonly ["board"];
+export type ExtensionSlotsType = typeof EXTENSION_SLOTS;
+export declare const EXTENSION_ID: "watermark";
+export type WatermarkDefinition = ExtensionDefinition<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;
+export type WatermarkInstance = ExtensionInstance<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;
+export interface WatermarkInstanceInternal extends ExtensionInternalBase<ExtensionSlotsType> {
+    svgWatermark: SVGImageElement | null;
+}
+export declare const enum DirtyLayer {
+    Watermark = 1
+}

package/dist/extensions/first-party/watermark/types.js

@@ -0,0 +1,2 @@
+export const EXTENSION_SLOTS = ['board'];
+export const EXTENSION_ID = 'watermark';

package/dist/extensions/types/wrapper.d.ts

@@ -6,8 +6,10 @@ import { createLegalMoves } from '../first-party/legal-moves/factory.js';
 import { createMainRenderer } from '../first-party/main-renderer/factory.js';
 import { createPromotion } from '../first-party/promotion/factory.js';
 import { createSelectedSquare } from '../first-party/selected-square/factory.js';
+import { createWatermark } from '../first-party/watermark/factory.js';
 export declare const builtInExtensionFactoryMap: {
     renderer: typeof createMainRenderer;
+    watermark: typeof createWatermark;
     selectedSquare: typeof createSelectedSquare;
     lastMove: typeof createLastMove;
     activeTarget: typeof createActiveTarget;
@@ -20,5 +22,5 @@ export type BuiltInExtensionId = keyof typeof builtInExtensionFactoryMap;
 export type BuiltInExtensionDefinitionMap = {
     [Id in BuiltInExtensionId]: ReturnType<(typeof builtInExtensionFactoryMap)[Id]>;
 };
-export declare const DefaultBuiltinChessboardExtensions: readonly ["renderer", "selectedSquare", "lastMove", "activeTarget", "legalMoves", "events", "autoPromote", "promotion"];
+export declare const DefaultBuiltinChessboardExtensions: readonly ["renderer", "watermark", "selectedSquare", "lastMove", "activeTarget", "legalMoves", "events", "autoPromote", "promotion"];
 export type DefaultBuiltinChessboardExtensions = typeof DefaultBuiltinChessboardExtensions;

package/dist/extensions/types/wrapper.js

@@ -14,8 +14,11 @@ import { createPromotion } from '../first-party/promotion/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_PROMOTION } from '../first-party/promotion/types/main.js';
 import { createSelectedSquare } from '../first-party/selected-square/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_SELECTED_SQUARE } from '../first-party/selected-square/types.js';
+import { createWatermark } from '../first-party/watermark/factory.js';
+import { EXTENSION_ID as EXTENSION_ID_WATERMARK } from '../first-party/watermark/types.js';
 export const builtInExtensionFactoryMap = {
     [EXTENSION_ID_RENDERER]: createMainRenderer,
+    [EXTENSION_ID_WATERMARK]: createWatermark,
     [EXTENSION_ID_SELECTED_SQUARE]: createSelectedSquare,
     [EXTENSION_ID_LAST_MOVE]: createLastMove,
     [EXTENSION_ID_ACTIVE_TARGET]: createActiveTarget,
@@ -26,6 +29,7 @@ export const builtInExtensionFactoryMap = {
 };
 export const DefaultBuiltinChessboardExtensions = [
     EXTENSION_ID_RENDERER,
+    EXTENSION_ID_WATERMARK,
     EXTENSION_ID_SELECTED_SQUARE,
     EXTENSION_ID_LAST_MOVE,
     EXTENSION_ID_ACTIVE_TARGET,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@mirasen/chessboard",
 	"description": "Framework-agnostic TypeScript chessboard platform with real chess interaction built in.",
-	"version": "1.1.3",
+	"version": "1.1.5",
 	"license": "MIT",
 	"author": {
 		"name": "Mirasen",