Move common board node CSS to class

src/data/common.css

@@ -7,3 +7,12 @@
 .modifier-toggle.collapsed {
     transform: translate(-5px, -5px) rotate(-90deg);
 }
+
+.node-text {
+    text-anchor: middle;
+    dominant-baseline: middle;
+    font-family: monospace;
+    font-size: 200%;
+    pointer-events: none;
+    filter: drop-shadow(3px 3px 2px var(--tooltip-background));
+}

src/data/common.tsx

@@ -27,7 +27,7 @@ import type {
 import { convertComputable, processComputable } from "util/computed";
 import { getFirstFeature, renderColJSX, renderJSX } from "util/vue";
 import type { ComputedRef, Ref } from "vue";
-import { computed, unref } from "vue";
+import { computed, ref, unref } from "vue";
 import "./common.css";
 
 /** An object that configures a {@link ResetButton} */
@@ -505,3 +505,21 @@ export function isRendered(layer: BaseLayer, idOrFeature: string | { id: string
     const id = typeof idOrFeature === "string" ? idOrFeature : idOrFeature.id;
     return computed(() => id in layer.nodes.value);
 }
+
+/**
+ * Utility function for setting up a system where one of many things can be selected.
+ * It's recommended to use an ID or index rather than the object itself, so that you can wrap the ref in a persistent without breaking anything.
+ * @returns The ref containing the selection, as well as a select and deselect function
+ */
+export function setupSelectable<T>() {
+    const selected = ref<T>();
+    return {
+        select: function (node: T) {
+            selected.value = node;
+        },
+        deselect: function () {
+            selected.value = undefined;
+        },
+        selected
+    };
+}

src/data/layers/prestige.tsx

@@ -1,73 +0,0 @@
-/**
- * @module
- * @hidden
- */
-import { main } from "data/projEntry";
-import { createCumulativeConversion } from "features/conversion";
-import { jsx } from "features/feature";
-import { createHotkey } from "features/hotkey";
-import { createReset } from "features/reset";
-import MainDisplay from "features/resources/MainDisplay.vue";
-import { createResource } from "features/resources/resource";
-import { addTooltip } from "features/tooltips/tooltip";
-import { createResourceTooltip } from "features/trees/tree";
-import { BaseLayer, createLayer } from "game/layers";
-import type { DecimalSource } from "util/bignum";
-import { render } from "util/vue";
-import { createLayerTreeNode, createResetButton } from "../common";
-
-const id = "p";
-const layer = createLayer(id, function (this: BaseLayer) {
-    const name = "Prestige";
-    const color = "#4BDC13";
-    const points = createResource<DecimalSource>(0, "prestige points");
-
-    const conversion = createCumulativeConversion(() => ({
-        formula: x => x.div(10).sqrt(),
-        baseResource: main.points,
-        gainResource: points
-    }));
-
-    const reset = createReset(() => ({
-        thingsToReset: (): Record<string, unknown>[] => [layer]
-    }));
-
-    const treeNode = createLayerTreeNode(() => ({
-        layerID: id,
-        color,
-        reset
-    }));
-    const tooltip = addTooltip(treeNode, {
-        display: createResourceTooltip(points),
-        pinnable: true
-    });
-
-    const resetButton = createResetButton(() => ({
-        conversion,
-        tree: main.tree,
-        treeNode
-    }));
-
-    const hotkey = createHotkey(() => ({
-        description: "Reset for prestige points",
-        key: "p",
-        onPress: resetButton.onClick
-    }));
-
-    return {
-        name,
-        color,
-        points,
-        tooltip,
-        display: jsx(() => (
-            <>
-                <MainDisplay resource={points} color={color} />
-                {render(resetButton)}
-            </>
-        )),
-        treeNode,
-        hotkey
-    };
-});
-
-export default layer;

src/data/projEntry.tsx

@@ -1,92 +1,428 @@
-import Node from "components/Node.vue";
+import Board from "game/boards/Board.vue";
-import Spacer from "components/layout/Spacer.vue";
+import CircleProgress from "game/boards/CircleProgress.vue";
+import SVGNode from "game/boards/SVGNode.vue";
+import SquareProgress from "game/boards/SquareProgress.vue";
+import {
+    NodePosition,
+    makeDraggable,
+    placeInAvailableSpace,
+    setupActions,
+    setupDraggableNode,
+    setupUniqueIds
+} from "game/boards/board";
 import { jsx } from "features/feature";
-import { createResource, trackBest, trackOOMPS, trackTotal } from "features/resources/resource";
+import { createResource } from "features/resources/resource";
-import type { GenericTree } from "features/trees/tree";
+import { createUpgrade } from "features/upgrades/upgrade";
-import { branchedResetPropagation, createTree } from "features/trees/tree";
-import { globalBus } from "game/events";
 import type { BaseLayer, GenericLayer } from "game/layers";
 import { createLayer } from "game/layers";
+import { Persistent, persistent } from "game/persistence";
 import type { Player } from "game/player";
-import player from "game/player";
+import { createCostRequirement } from "game/requirements";
-import type { DecimalSource } from "util/bignum";
-import Decimal, { format, formatTime } from "util/bignum";
 import { render } from "util/vue";
-import { computed, toRaw } from "vue";
+import { ComponentPublicInstance, computed, ref, watch } from "vue";
-import prestige from "./layers/prestige";
+import { setupSelectable } from "./common";
+import "./common.css";
 
 /**
  * @hidden
  */
 export const main = createLayer("main", function (this: BaseLayer) {
-    const points = createResource<DecimalSource>(10);
+    type ANode = NodePosition & { id: number; links: number[]; type: "anode"; z: number };
-    const best = trackBest(points);
+    type BNode = NodePosition & { id: number; links: number[]; type: "bnode"; z: number };
-    const total = trackTotal(points);
+    type CNode = typeof cNode & { position: Persistent<NodePosition> };
+    type NodeTypes = ANode | BNode;
 
-    const pointGain = computed(() => {
+    const board = ref<ComponentPublicInstance<typeof Board>>();
-        // eslint-disable-next-line prefer-const
-        let gain = new Decimal(1);
-        return gain;
-    });
-    globalBus.on("update", diff => {
-        points.value = Decimal.add(points.value, Decimal.times(pointGain.value, diff));
-    });
-    const oomps = trackOOMPS(points, pointGain);
 
-    const tree = createTree(() => ({
+    const { select, deselect, selected } = setupSelectable<number>();
-        nodes: [[prestige.treeNode]],
+    const {
-        branches: [],
+        select: selectAction,
-        onReset() {
+        deselect: deselectAction,
-            points.value = toRaw(this.resettingNode.value) === toRaw(prestige.treeNode) ? 0 : 10;
+        selected: selectedAction
-            best.value = points.value;
+    } = setupSelectable<number>();
-            total.value = points.value;
+
+    watch(selected, selected => {
+        if (selected == null) {
+            deselectAction();
+        }
+    });
+
+    const {
+        startDrag,
+        endDrag,
+        drag,
+        nodeBeingDragged,
+        hasDragged,
+        receivingNodes,
+        receivingNode,
+        dragDelta
+    } = setupDraggableNode<number | "cnode">({
+        board,
+        getPosition(id) {
+            return nodesById.value[id] ?? (cNode as CNode).position.value;
         },
-        resetPropagation: branchedResetPropagation
+        setPosition(id, position) {
-    })) as GenericTree;
+            const node = nodesById.value[id] ?? (cNode as CNode).position.value;
+            node.x = position.x;
+            node.y = position.y;
+        }
+    });
+
+    // a nodes can be slotted into b nodes to draw a branch between them, with limited connections
+    // a nodes can be selected and have an action to spawn a b node, and vice versa
+    // Newly spawned nodes should find a safe spot to spawn, and display a link to their creator
+    // a nodes use all the stuff circles used to have, and b diamonds
+    // c node also exists but is a single Upgrade element that cannot be selected, but can be dragged
+    // d nodes are a performance test - 1000 simple nodes that have no interactions
+    // Make all nodes animate in (decorator? `fadeIn(feature)?)
+    const nodes = persistent<(ANode | BNode)[]>([
+        { id: 0, x: 0, y: 0, z: 0, links: [], type: "anode" }
+    ]);
+    const nodesById = computed<Record<string, NodeTypes>>(() =>
+        nodes.value.reduce((acc, curr) => ({ ...acc, [curr.id]: curr }), {})
+    );
+    function mouseDownNode(e: MouseEvent | TouchEvent, node: NodeTypes) {
+        const oldZ = node.z;
+        nodes.value.forEach(node => {
+            if (node.z > oldZ) {
+                node.z--;
+            }
+        });
+        node.z = nextId.value;
+        if (nodeBeingDragged.value == null) {
+            startDrag(e, node.id);
+        }
+        deselect();
+    }
+    function mouseUpNode(e: MouseEvent | TouchEvent, node: NodeTypes) {
+        if (!hasDragged.value) {
+            endDrag();
+            if (typeof node.id === "number") {
+                select(node.id);
+            }
+            e.stopPropagation();
+        }
+    }
+    function translate(node: NodePosition, isDragging: boolean) {
+        let x = node.x;
+        let y = node.y;
+        if (isDragging) {
+            x += dragDelta.value.x;
+            y += dragDelta.value.y;
+        }
+        return ` translate(${x}px,${y}px)`;
+    }
+    function rotate(rotation: number) {
+        return ` rotate(${rotation}deg) `;
+    }
+    function scale(nodeOrBool: NodeTypes | boolean) {
+        const isSelected =
+            typeof nodeOrBool === "boolean" ? nodeOrBool : selected.value === nodeOrBool.id;
+        return isSelected ? " scale(1.2)" : "";
+    }
+    function opacity(node: NodeTypes) {
+        const isDragging = selected.value !== node.id && nodeBeingDragged.value === node.id;
+        if (isDragging) {
+            return "; opacity: 0.5;";
+        }
+        return "";
+    }
+    function zIndex(node: NodeTypes) {
+        if (selected.value === node.id || nodeBeingDragged.value === node.id) {
+            return "; z-index: 100000000";
+        }
+        return "; z-index: " + node.z;
+    }
+
+    const renderANode = function (node: ANode) {
+        return (
+            <SVGNode
+                style={`transform: ${translate(node, nodeBeingDragged.value === node.id)}${opacity(
+                    node
+                )}${zIndex(node)}`}
+                onMouseDown={e => mouseDownNode(e, node)}
+                onMouseUp={e => mouseUpNode(e, node)}
+            >
+                <g style={`transform: ${scale(node)}`}>
+                    {receivingNodes.value.includes(node.id) && (
+                        <circle
+                            r="58"
+                            fill="var(--background)"
+                            stroke={receivingNode.value === node.id ? "#0F0" : "#0F03"}
+                            stroke-width="2"
+                        />
+                    )}
+                    <CircleProgress r={54.5} progress={0.5} stroke="var(--accent2)" />
+                    <circle
+                        r="50"
+                        fill="var(--raised-background)"
+                        stroke="var(--outline)"
+                        stroke-width="4"
+                    />
+                </g>
+                {selected.value === node.id && selectedAction.value === 0 && (
+                    <text y="140" fill="var(--foreground)" class="node-text">
+                        Spawn B Node
+                    </text>
+                )}
+                <text fill="var(--foreground)" class="node-text">
+                    A
+                </text>
+            </SVGNode>
+        );
+    };
+    const aActions = setupActions({
+        node: () => nodesById.value[selected.value ?? ""],
+        shouldShowActions: node => node.type === "anode",
+        actions(node) {
+            return [
+                p => (
+                    <g
+                        style={`transform: ${translate(p, selectedAction.value === 0)}${scale(
+                            selectedAction.value === 0
+                        )}`}
+                        onClick={() => {
+                            if (selectedAction.value === 0) {
+                                spawnBNode(node as ANode);
+                            } else {
+                                selectAction(0);
+                            }
+                        }}
+                    >
+                        <circle fill="black" r="20"></circle>
+                        <text fill="white" class="material-icons" x="-12" y="12">
+                            add
+                        </text>
+                    </g>
+                )
+            ];
+        },
+        distance: 100
+    });
+    const sqrtTwo = Math.sqrt(2);
+    const renderBNode = function (node: BNode) {
+        return (
+            <SVGNode
+                style={`transform: ${translate(node, nodeBeingDragged.value === node.id)}${opacity(
+                    node
+                )}${zIndex(node)}`}
+                onMouseDown={e => mouseDownNode(e, node)}
+                onMouseUp={e => mouseUpNode(e, node)}
+            >
+                <g style={`transform: ${scale(node)}${rotate(45)}`}>
+                    {receivingNodes.value.includes(node.id) && (
+                        <rect
+                            width={50 * sqrtTwo + 16}
+                            height={50 * sqrtTwo + 16}
+                            style={`translate(${(-50 * sqrtTwo + 16) / 2}, ${
+                                (-50 * sqrtTwo + 16) / 2
+                            })`}
+                            fill="var(--background)"
+                            stroke={receivingNode.value === node.id ? "#0F0" : "#0F03"}
+                            stroke-width="2"
+                        />
+                    )}
+                    <SquareProgress
+                        size={50 * sqrtTwo + 9}
+                        progress={0.5}
+                        stroke="var(--accent2)"
+                    />
+                    <rect
+                        width={50 * sqrtTwo}
+                        height={50 * sqrtTwo}
+                        style={`transform: translate(${(-50 * sqrtTwo) / 2}px, ${
+                            (-50 * sqrtTwo) / 2
+                        }px)`}
+                        fill="var(--raised-background)"
+                        stroke="var(--outline)"
+                        stroke-width="4"
+                    />
+                </g>
+                {selected.value === node.id && selectedAction.value === 0 && (
+                    <text y="140" fill="var(--foreground)" class="node-text">
+                        Spawn A Node
+                    </text>
+                )}
+                <text fill="var(--foreground)" class="node-text">
+                    B
+                </text>
+            </SVGNode>
+        );
+    };
+    const bActions = setupActions({
+        node: () => nodesById.value[selected.value ?? ""],
+        shouldShowActions: node => node.type === "bnode",
+        actions(node) {
+            return [
+                p => (
+                    <g
+                        style={`transform: ${translate(p, selectedAction.value === 0)}${scale(
+                            selectedAction.value === 0
+                        )}`}
+                        onClick={() => {
+                            if (selectedAction.value === 0) {
+                                spawnANode(node as BNode);
+                            } else {
+                                selectAction(0);
+                            }
+                        }}
+                    >
+                        <circle fill="white" r="20"></circle>
+                        <text fill="black" class="material-icons" x="-12" y="12">
+                            add
+                        </text>
+                    </g>
+                )
+            ];
+        },
+        distance: 100
+    });
+    function spawnANode(parent: ANode | BNode) {
+        const node: ANode = {
+            x: parent.x,
+            y: parent.y,
+            z: nextId.value,
+            type: "anode",
+            links: [parent.id],
+            id: nextId.value
+        };
+        placeInAvailableSpace(node, nodes.value);
+        nodes.value.push(node);
+    }
+    function spawnBNode(parent: ANode | BNode) {
+        const node: BNode = {
+            x: parent.x,
+            y: parent.y,
+            z: nextId.value,
+            type: "bnode",
+            links: [parent.id],
+            id: nextId.value
+        };
+        placeInAvailableSpace(node, nodes.value);
+        nodes.value.push(node);
+    }
+
+    const points = createResource(10);
+    const cNode = createUpgrade(() => ({
+        display: "<h1>C</h1>",
+        // Purposefully not using noPersist
+        requirements: createCostRequirement(() => ({ cost: 10, resource: points })),
+        style: {
+            x: "100px",
+            y: "100px",
+            pointerEvents: "none"
+        }
+    }));
+    makeDraggable(cNode, {
+        id: "cnode",
+        endDrag,
+        startDrag,
+        hasDragged,
+        nodeBeingDragged,
+        dragDelta,
+        onMouseUp() {
+            if (!hasDragged.value) {
+                cNode.purchase();
+            }
+        }
+    });
+
+    const dNodesPerAxis = 50;
+    const dNodes = jsx(() => (
+        <>
+            {new Array(dNodesPerAxis * dNodesPerAxis).fill(0).map((_, i) => {
+                const x = (Math.floor(i / dNodesPerAxis) - dNodesPerAxis / 2) * 100;
+                const y = ((i % dNodesPerAxis) - dNodesPerAxis / 2) * 100;
+                return (
+                    <path
+                        fill="var(--bought)"
+                        style={`transform: translate(${x}px, ${y}px) scale(0.05)`}
+                        d="M62.43,122.88h-1.98c0-16.15-6.04-30.27-18.11-42.34C30.27,68.47,16.16,62.43,0,62.43v-1.98 c16.16,0,30.27-6.04,42.34-18.14C54.41,30.21,60.45,16.1,60.45,0h1.98c0,16.15,6.04,30.27,18.11,42.34 c12.07,12.07,26.18,18.11,42.34,18.11v1.98c-16.15,0-30.27,6.04-42.34,18.11C68.47,92.61,62.43,106.72,62.43,122.88L62.43,122.88z"
+                    />
+                );
+            })}
+        </>
+    ));
+
+    const links = jsx(() => (
+        <>
+            {nodes.value
+                .reduce(
+                    (acc, curr) => [
+                        ...acc,
+                        ...curr.links.map(l => ({ from: curr, to: nodesById.value[l] }))
+                    ],
+                    [] as { from: NodeTypes; to: NodeTypes }[]
+                )
+                .map(link => (
+                    <line
+                        stroke="white"
+                        stroke-width={4}
+                        x1={
+                            nodeBeingDragged.value === link.from.id
+                                ? dragDelta.value.x + link.from.x
+                                : link.from.x
+                        }
+                        y1={
+                            nodeBeingDragged.value === link.from.id
+                                ? dragDelta.value.y + link.from.y
+                                : link.from.y
+                        }
+                        x2={
+                            nodeBeingDragged.value === link.to.id
+                                ? dragDelta.value.x + link.to.x
+                                : link.to.x
+                        }
+                        y2={
+                            nodeBeingDragged.value === link.to.id
+                                ? dragDelta.value.y + link.to.y
+                                : link.to.y
+                        }
+                    />
+                ))}
+        </>
+    ));
+
+    const nextId = setupUniqueIds(() => nodes.value);
+
+    function renderNode(node: NodeTypes | typeof cNode) {
+        if (node.type === "anode") {
+            return renderANode(node);
+        } else if (node.type === "bnode") {
+            return renderBNode(node);
+        } else {
+            return render(node);
+        }
+    }
 
     return {
         name: "Tree",
-        links: tree.links,
+        color: "var(--accent1)",
         display: jsx(() => (
             <>
-                {player.devSpeed === 0 ? (
+                <Board
-                    <div>
+                    onDrag={drag}
-                        Game Paused
+                    onMouseDown={deselect}
-                        <Node id="paused" />
+                    onMouseUp={endDrag}
-                    </div>
+                    onMouseLeave={endDrag}
-                ) : null}
+                    ref={board}
-                {player.devSpeed != null && player.devSpeed !== 0 && player.devSpeed !== 1 ? (
+                >
-                    <div>
+                    <SVGNode>
-                        Dev Speed: {format(player.devSpeed)}x
+                        {dNodes()}
-                        <Node id="devspeed" />
+                        {links()}
-                    </div>
+                    </SVGNode>
-                ) : null}
+                    {nodes.value.map(renderNode)}
-                {player.offlineTime != null && player.offlineTime !== 0 ? (
+                    {render(cNode)}
-                    <div>
+                    <SVGNode>
-                        Offline Time: {formatTime(player.offlineTime)}
+                        {aActions()}
-                        <Node id="offline" />
+                        {bActions()}
-                    </div>
+                    </SVGNode>
-                ) : null}
+                </Board>
-                <div>
-                    {Decimal.lt(points.value, "1e1000") ? <span>You have </span> : null}
-                    <h2>{format(points.value)}</h2>
-                    {Decimal.lt(points.value, "1e1e6") ? <span> points</span> : null}
-                </div>
-                {Decimal.gt(pointGain.value, 0) ? (
-                    <div>
-                        ({oomps.value})
-                        <Node id="oomps" />
-                    </div>
-                ) : null}
-                <Spacer />
-                {render(tree)}
             </>
         )),
-        points,
+        boardNodes: nodes,
-        best,
+        cNode,
-        total,
+        selected: persistent(selected)
-        oomps,
-        tree
     };
 });
 
@@ -97,7 +433,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
 export const getInitialLayers = (
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     player: Partial<Player>
-): Array<GenericLayer> => [main, prestige];
+): Array<GenericLayer> => [main];
 
 /**
  * A computed ref whose value is true whenever the game is over.

src/features/boards/Board.vue

@@ -1,294 +0,0 @@
-<template>
-    <panZoom
-        v-if="isVisible(visibility)"
-        :style="[
-            {
-                width,
-                height
-            },
-            style
-        ]"
-        :class="classes"
-        selector=".g1"
-        :options="{ initialZoom: 1, minZoom: 0.1, maxZoom: 10, zoomDoubleClickSpeed: 1 }"
-        ref="stage"
-        @init="onInit"
-        @mousemove="drag"
-        @touchmove="drag"
-        @mousedown="(e: MouseEvent) => mouseDown(e)"
-        @touchstart="(e: TouchEvent) => mouseDown(e)"
-        @mouseup="() => endDragging(unref(draggingNode))"
-        @touchend.passive="() => endDragging(unref(draggingNode))"
-        @mouseleave="() => endDragging(unref(draggingNode), true)"
-    >
-        <svg class="stage" width="100%" height="100%">
-            <g class="g1">
-                <transition-group name="link" appear>
-                    <g
-                        v-for="link in unref(links) || []"
-                        :key="`${link.startNode.id}-${link.endNode.id}`"
-                    >
-                        <BoardLinkVue
-                            :link="link"
-                            :dragging="unref(draggingNode)"
-                            :dragged="
-                                link.startNode === unref(draggingNode) ||
-                                link.endNode === unref(draggingNode)
-                                    ? dragged
-                                    : undefined
-                            "
-                        />
-                    </g>
-                </transition-group>
-                <transition-group name="grow" :duration="500" appear>
-                    <g v-for="node in sortedNodes" :key="node.id" style="transition-duration: 0s">
-                        <BoardNodeVue
-                            :node="node"
-                            :nodeType="types[node.type]"
-                            :dragging="unref(draggingNode)"
-                            :dragged="unref(draggingNode) === node ? dragged : undefined"
-                            :hasDragged="unref(draggingNode) == null ? false : hasDragged"
-                            :receivingNode="unref(receivingNode) === node"
-                            :isSelected="unref(selectedNode) === node"
-                            :selectedAction="
-                                unref(selectedNode) === node ? unref(selectedAction) : null
-                            "
-                            @mouseDown="mouseDown"
-                            @endDragging="endDragging"
-                            @clickAction="(actionId: string) => clickAction(node, actionId)"
-                        />
-                    </g>
-                </transition-group>
-            </g>
-        </svg>
-    </panZoom>
-</template>
-
-<script setup lang="ts">
-import type {
-    BoardData,
-    BoardNode,
-    BoardNodeLink,
-    GenericBoardNodeAction,
-    GenericNodeType
-} from "features/boards/board";
-import { getNodeProperty } from "features/boards/board";
-import type { StyleValue } from "features/feature";
-import { Visibility, isVisible } from "features/feature";
-import type { ProcessedComputable } from "util/computed";
-import { Ref, computed, ref, toRefs, unref, watchEffect } from "vue";
-import BoardLinkVue from "./BoardLink.vue";
-import BoardNodeVue from "./BoardNode.vue";
-
-const _props = defineProps<{
-    nodes: Ref<BoardNode[]>;
-    types: Record<string, GenericNodeType>;
-    state: Ref<BoardData>;
-    visibility: ProcessedComputable<Visibility | boolean>;
-    width?: ProcessedComputable<string>;
-    height?: ProcessedComputable<string>;
-    style?: ProcessedComputable<StyleValue>;
-    classes?: ProcessedComputable<Record<string, boolean>>;
-    links: Ref<BoardNodeLink[] | null>;
-    selectedAction: Ref<GenericBoardNodeAction | null>;
-    selectedNode: Ref<BoardNode | null>;
-    draggingNode: Ref<BoardNode | null>;
-    receivingNode: Ref<BoardNode | null>;
-    mousePosition: Ref<{ x: number; y: number } | null>;
-    setReceivingNode: (node: BoardNode | null) => void;
-    setDraggingNode: (node: BoardNode | null) => void;
-}>();
-const props = toRefs(_props);
-
-const lastMousePosition = ref({ x: 0, y: 0 });
-const dragged = ref({ x: 0, y: 0 });
-const hasDragged = ref(false);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const stage = ref<any>(null);
-
-const sortedNodes = computed(() => {
-    const nodes = props.nodes.value.slice();
-    if (props.selectedNode.value) {
-        const node = nodes.splice(nodes.indexOf(props.selectedNode.value), 1)[0];
-        nodes.push(node);
-    }
-    if (props.draggingNode.value) {
-        const node = nodes.splice(nodes.indexOf(props.draggingNode.value), 1)[0];
-        nodes.push(node);
-    }
-    return nodes;
-});
-
-watchEffect(() => {
-    const node = props.draggingNode.value;
-    if (node == null) {
-        return null;
-    }
-
-    const position = {
-        x: node.position.x + dragged.value.x,
-        y: node.position.y + dragged.value.y
-    };
-    let smallestDistance = Number.MAX_VALUE;
-
-    props.setReceivingNode.value(
-        props.nodes.value.reduce((smallest: BoardNode | null, curr: BoardNode) => {
-            if (curr.id === node.id) {
-                return smallest;
-            }
-            const nodeType = props.types.value[curr.type];
-            const canAccept = getNodeProperty(nodeType.canAccept, curr, node);
-            if (!canAccept) {
-                return smallest;
-            }
-
-            const distanceSquared =
-                Math.pow(position.x - curr.position.x, 2) +
-                Math.pow(position.y - curr.position.y, 2);
-            let size = getNodeProperty(nodeType.size, curr);
-            if (distanceSquared > smallestDistance || distanceSquared > size * size) {
-                return smallest;
-            }
-
-            smallestDistance = distanceSquared;
-            return curr;
-        }, null)
-    );
-});
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function onInit(panzoomInstance: any) {
-    panzoomInstance.setTransformOrigin(null);
-    panzoomInstance.moveTo(stage.value.$el.clientWidth / 2, stage.value.$el.clientHeight / 2);
-}
-
-function mouseDown(e: MouseEvent | TouchEvent, node: BoardNode | null = null, draggable = false) {
-    if (props.draggingNode.value == null) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        let clientX, clientY;
-        if ("touches" in e) {
-            if (e.touches.length === 1) {
-                clientX = e.touches[0].clientX;
-                clientY = e.touches[0].clientY;
-            } else {
-                return;
-            }
-        } else {
-            clientX = e.clientX;
-            clientY = e.clientY;
-        }
-        lastMousePosition.value = {
-            x: clientX,
-            y: clientY
-        };
-        dragged.value = { x: 0, y: 0 };
-        hasDragged.value = false;
-
-        if (draggable) {
-            props.setDraggingNode.value(node);
-        }
-    }
-    if (node != null) {
-        props.state.value.selectedNode = null;
-        props.state.value.selectedAction = null;
-    }
-}
-
-function drag(e: MouseEvent | TouchEvent) {
-    const { x, y, scale } = stage.value.panZoomInstance.getTransform();
-
-    let clientX, clientY;
-    if ("touches" in e) {
-        if (e.touches.length === 1) {
-            clientX = e.touches[0].clientX;
-            clientY = e.touches[0].clientY;
-        } else {
-            endDragging(props.draggingNode.value);
-            props.mousePosition.value = null;
-            return;
-        }
-    } else {
-        clientX = e.clientX;
-        clientY = e.clientY;
-    }
-
-    props.mousePosition.value = {
-        x: (clientX - x) / scale,
-        y: (clientY - y) / scale
-    };
-
-    dragged.value = {
-        x: dragged.value.x + (clientX - lastMousePosition.value.x) / scale,
-        y: dragged.value.y + (clientY - lastMousePosition.value.y) / scale
-    };
-    lastMousePosition.value = {
-        x: clientX,
-        y: clientY
-    };
-
-    if (Math.abs(dragged.value.x) > 10 || Math.abs(dragged.value.y) > 10) {
-        hasDragged.value = true;
-    }
-
-    if (props.draggingNode.value != null) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-}
-
-function endDragging(node: BoardNode | null, mouseLeave = false) {
-    if (props.draggingNode.value != null && props.draggingNode.value === node) {
-        if (props.receivingNode.value == null) {
-            props.draggingNode.value.position.x += Math.round(dragged.value.x / 25) * 25;
-            props.draggingNode.value.position.y += Math.round(dragged.value.y / 25) * 25;
-        }
-
-        const nodes = props.nodes.value;
-        nodes.push(nodes.splice(nodes.indexOf(props.draggingNode.value), 1)[0]);
-
-        if (props.receivingNode.value) {
-            props.types.value[props.receivingNode.value.type].onDrop?.(
-                props.receivingNode.value,
-                props.draggingNode.value
-            );
-        }
-
-        props.setDraggingNode.value(null);
-    } else if (!hasDragged.value && !mouseLeave) {
-        props.state.value.selectedNode = null;
-        props.state.value.selectedAction = null;
-    }
-}
-
-function clickAction(node: BoardNode, actionId: string) {
-    if (props.state.value.selectedAction === actionId) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        unref(props.selectedAction)!.onClick(unref(props.selectedNode)!);
-    } else {
-        props.state.value = { ...props.state.value, selectedAction: actionId };
-    }
-}
-</script>
-
-<style>
-.vue-pan-zoom-scene {
-    width: 100%;
-    height: 100%;
-    cursor: grab;
-}
-
-.vue-pan-zoom-scene:active {
-    cursor: grabbing;
-}
-
-.g1 {
-    transition-duration: 0s;
-}
-
-.link-enter-from,
-.link-leave-to {
-    opacity: 0;
-}
-</style>

src/features/boards/BoardLink.vue

@@ -1,80 +0,0 @@
-<template>
-    <line
-        class="link"
-        v-bind="linkProps"
-        :class="{ pulsing: link.pulsing }"
-        :x1="startPosition.x"
-        :y1="startPosition.y"
-        :x2="endPosition.x"
-        :y2="endPosition.y"
-    />
-</template>
-
-<script setup lang="ts">
-import type { BoardNode, BoardNodeLink } from "features/boards/board";
-import { kebabifyObject } from "util/vue";
-import { computed, toRefs, unref } from "vue";
-
-const _props = defineProps<{
-    link: BoardNodeLink;
-    dragging: BoardNode | null;
-    dragged?: {
-        x: number;
-        y: number;
-    };
-}>();
-const props = toRefs(_props);
-
-const startPosition = computed(() => {
-    const position = { ...props.link.value.startNode.position };
-    if (props.link.value.offsetStart) {
-        position.x += unref(props.link.value.offsetStart).x;
-        position.y += unref(props.link.value.offsetStart).y;
-    }
-    if (props.dragging?.value === props.link.value.startNode) {
-        position.x += props.dragged?.value?.x ?? 0;
-        position.y += props.dragged?.value?.y ?? 0;
-    }
-    return position;
-});
-
-const endPosition = computed(() => {
-    const position = { ...props.link.value.endNode.position };
-    if (props.link.value.offsetEnd) {
-        position.x += unref(props.link.value.offsetEnd).x;
-        position.y += unref(props.link.value.offsetEnd).y;
-    }
-    if (props.dragging?.value === props.link.value.endNode) {
-        position.x += props.dragged?.value?.x ?? 0;
-        position.y += props.dragged?.value?.y ?? 0;
-    }
-    return position;
-});
-
-const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record<string, unknown>));
-</script>
-
-<style scoped>
-.link {
-    transition-duration: 0s;
-    pointer-events: none;
-}
-
-.link.pulsing {
-    animation: pulsing 2s ease-in infinite;
-}
-
-@keyframes pulsing {
-    0% {
-        opacity: 0.25;
-    }
-
-    50% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0.25;
-    }
-}
-</style>

src/features/boards/BoardNode.vue

@@ -1,339 +0,0 @@
-<template>
-    <!-- Ugly casting to prevent TS compiler error about style because vue doesn't think it supports arrays when it does -->
-    <g
-        class="boardnode"
-        :class="{ [node.type]: true, isSelected, isDraggable, ...classes }"
-        :style="[{ opacity: dragging?.id === node.id && hasDragged ? 0.5 : 1 }, style ?? []] as unknown as (string | CSSProperties)"
-        :transform="`translate(${position.x},${position.y})${isSelected ? ' scale(1.2)' : ''}`"
-    >
-        <BoardNodeAction
-            :actions="actions ?? []"
-            :is-selected="isSelected"
-            :node="node"
-            :node-type="nodeType"
-            :selected-action="selectedAction"
-            @click-action="(actionId: string) => emit('clickAction', actionId)"
-        />
-
-        <g
-            class="node-container"
-            @mousedown="mouseDown"
-            @touchstart.passive="mouseDown"
-            @mouseup="mouseUp"
-            @touchend.passive="mouseUp"
-        >
-            <g v-if="shape === Shape.Circle">
-                <circle
-                    v-if="canAccept"
-                    class="receiver"
-                    :r="size + 8"
-                    :fill="backgroundColor"
-                    :stroke="receivingNode ? '#0F0' : '#0F03'"
-                    :stroke-width="2"
-                />
-
-                <circle
-                    class="body"
-                    :r="size"
-                    :fill="fillColor"
-                    :stroke="outlineColor"
-                    :stroke-width="4"
-                />
-
-                <circle
-                    class="progress progressFill"
-                    v-if="progressDisplay === ProgressDisplay.Fill"
-                    :r="Math.max(size * progress - 2, 0)"
-                    :fill="progressColor"
-                />
-                <circle
-                    v-else
-                    :r="size + 4.5"
-                    class="progress progressRing"
-                    fill="transparent"
-                    :stroke-dasharray="(size + 4.5) * 2 * Math.PI"
-                    :stroke-width="5"
-                    :stroke-dashoffset="
-                        (size + 4.5) * 2 * Math.PI - progress * (size + 4.5) * 2 * Math.PI
-                    "
-                    :stroke="progressColor"
-                />
-            </g>
-            <g v-else-if="shape === Shape.Diamond" transform="rotate(45, 0, 0)">
-                <rect
-                    v-if="canAccept"
-                    class="receiver"
-                    :width="size * sqrtTwo + 16"
-                    :height="size * sqrtTwo + 16"
-                    :transform="`translate(${-(size * sqrtTwo + 16) / 2}, ${
-                        -(size * sqrtTwo + 16) / 2
-                    })`"
-                    :fill="backgroundColor"
-                    :stroke="receivingNode ? '#0F0' : '#0F03'"
-                    :stroke-width="2"
-                />
-
-                <rect
-                    class="body"
-                    :width="size * sqrtTwo"
-                    :height="size * sqrtTwo"
-                    :transform="`translate(${(-size * sqrtTwo) / 2}, ${(-size * sqrtTwo) / 2})`"
-                    :fill="fillColor"
-                    :stroke="outlineColor"
-                    :stroke-width="4"
-                />
-
-                <rect
-                    v-if="progressDisplay === ProgressDisplay.Fill"
-                    class="progress progressFill"
-                    :width="Math.max(size * sqrtTwo * progress - 2, 0)"
-                    :height="Math.max(size * sqrtTwo * progress - 2, 0)"
-                    :transform="`translate(${-Math.max(size * sqrtTwo * progress - 2, 0) / 2}, ${
-                        -Math.max(size * sqrtTwo * progress - 2, 0) / 2
-                    })`"
-                    :fill="progressColor"
-                />
-                <rect
-                    v-else
-                    class="progress progressDiamond"
-                    :width="size * sqrtTwo + 9"
-                    :height="size * sqrtTwo + 9"
-                    :transform="`translate(${-(size * sqrtTwo + 9) / 2}, ${
-                        -(size * sqrtTwo + 9) / 2
-                    })`"
-                    fill="transparent"
-                    :stroke-dasharray="(size * sqrtTwo + 9) * 4"
-                    :stroke-width="5"
-                    :stroke-dashoffset="
-                        (size * sqrtTwo + 9) * 4 - progress * (size * sqrtTwo + 9) * 4
-                    "
-                    :stroke="progressColor"
-                />
-            </g>
-
-            <text :fill="titleColor" class="node-title">{{ title }}</text>
-        </g>
-
-        <transition name="fade" appear>
-            <g v-if="label">
-                <text
-                    :fill="label.color ?? titleColor"
-                    class="node-title"
-                    :class="{ pulsing: label.pulsing }"
-                    :y="-size - 20"
-                    >{{ label.text }}
-                </text>
-            </g>
-        </transition>
-
-        <transition name="fade" appear>
-            <text
-                v-if="isSelected && selectedAction"
-                :fill="confirmationLabel.color ?? titleColor"
-                class="node-title"
-                :class="{ pulsing: confirmationLabel.pulsing }"
-                :y="size + 75"
-                >{{ confirmationLabel.text }}</text
-            >
-        </transition>
-    </g>
-</template>
-
-<script setup lang="ts">
-import themes from "data/themes";
-import type { BoardNode, GenericBoardNodeAction, GenericNodeType } from "features/boards/board";
-import { ProgressDisplay, Shape, getNodeProperty } from "features/boards/board";
-import { isVisible } from "features/feature";
-import settings from "game/settings";
-import { CSSProperties, computed, toRefs, unref, watch } from "vue";
-import BoardNodeAction from "./BoardNodeAction.vue";
-
-const sqrtTwo = Math.sqrt(2);
-
-const _props = defineProps<{
-    node: BoardNode;
-    nodeType: GenericNodeType;
-    dragging: BoardNode | null;
-    dragged?: {
-        x: number;
-        y: number;
-    };
-    hasDragged?: boolean;
-    receivingNode?: boolean;
-    isSelected: boolean;
-    selectedAction: GenericBoardNodeAction | null;
-}>();
-const props = toRefs(_props);
-const emit = defineEmits<{
-    (e: "mouseDown", event: MouseEvent | TouchEvent, node: BoardNode, isDraggable: boolean): void;
-    (e: "endDragging", node: BoardNode): void;
-    (e: "clickAction", actionId: string): void;
-}>();
-
-const isDraggable = computed(() =>
-    getNodeProperty(props.nodeType.value.draggable, unref(props.node))
-);
-
-watch(isDraggable, value => {
-    const node = unref(props.node);
-    if (unref(props.dragging) === node && !value) {
-        emit("endDragging", node);
-    }
-});
-
-const actions = computed(() => {
-    const node = unref(props.node);
-    return getNodeProperty(props.nodeType.value.actions, node)?.filter(action =>
-        isVisible(getNodeProperty(action.visibility, node))
-    );
-});
-
-const position = computed(() => {
-    const node = unref(props.node);
-
-    if (
-        getNodeProperty(props.nodeType.value.draggable, node) &&
-        unref(props.dragging)?.id === node.id &&
-        unref(props.dragged) != null
-    ) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { x, y } = unref(props.dragged)!;
-        return {
-            x: node.position.x + Math.round(x / 25) * 25,
-            y: node.position.y + Math.round(y / 25) * 25
-        };
-    }
-    return node.position;
-});
-
-const shape = computed(() => getNodeProperty(props.nodeType.value.shape, unref(props.node)));
-const title = computed(() => getNodeProperty(props.nodeType.value.title, unref(props.node)));
-const label = computed(
-    () =>
-        (props.isSelected.value
-            ? unref(props.selectedAction) &&
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              getNodeProperty(unref(props.selectedAction)!.tooltip, unref(props.node))
-            : null) ?? getNodeProperty(props.nodeType.value.label, unref(props.node))
-);
-const confirmationLabel = computed(() =>
-    getNodeProperty(
-        unref(props.selectedAction)?.confirmationLabel ?? {
-            text: "Tap again to confirm"
-        },
-        unref(props.node)
-    )
-);
-const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
-const progress = computed(
-    () => getNodeProperty(props.nodeType.value.progress, unref(props.node)) ?? 0
-);
-const backgroundColor = computed(() => themes[settings.theme].variables["--background"]);
-const outlineColor = computed(
-    () =>
-        getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ??
-        themes[settings.theme].variables["--outline"]
-);
-const fillColor = computed(
-    () =>
-        getNodeProperty(props.nodeType.value.fillColor, unref(props.node)) ??
-        themes[settings.theme].variables["--raised-background"]
-);
-const progressColor = computed(() =>
-    getNodeProperty(props.nodeType.value.progressColor, unref(props.node))
-);
-const titleColor = computed(
-    () =>
-        getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ??
-        themes[settings.theme].variables["--foreground"]
-);
-const progressDisplay = computed(() =>
-    getNodeProperty(props.nodeType.value.progressDisplay, unref(props.node))
-);
-const canAccept = computed(
-    () =>
-        props.dragging.value != null &&
-        unref(props.hasDragged) &&
-        getNodeProperty(props.nodeType.value.canAccept, unref(props.node), props.dragging.value)
-);
-const style = computed(() => getNodeProperty(props.nodeType.value.style, unref(props.node)));
-const classes = computed(() => getNodeProperty(props.nodeType.value.classes, unref(props.node)));
-
-function mouseDown(e: MouseEvent | TouchEvent) {
-    emit("mouseDown", e, props.node.value, isDraggable.value);
-}
-
-function mouseUp(e: MouseEvent | TouchEvent) {
-    if (!props.hasDragged?.value) {
-        emit("endDragging", props.node.value);
-        props.nodeType.value.onClick?.(props.node.value);
-        e.stopPropagation();
-    }
-}
-</script>
-
-<style scoped>
-.boardnode {
-    cursor: pointer;
-    transition-duration: 0s;
-}
-
-.boardnode:hover .body {
-    fill: var(--highlighted);
-}
-
-.boardnode.isSelected .body {
-    fill: var(--accent1) !important;
-}
-
-.boardnode:not(.isDraggable) .body {
-    fill: var(--locked);
-}
-
-.node-title {
-    text-anchor: middle;
-    dominant-baseline: middle;
-    font-family: monospace;
-    font-size: 200%;
-    pointer-events: none;
-    filter: drop-shadow(3px 3px 2px var(--tooltip-background));
-}
-
-.progress {
-    transition-duration: 0.05s;
-}
-
-.progressRing {
-    transform: rotate(-90deg);
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-.pulsing {
-    animation: pulsing 2s ease-in infinite;
-}
-
-@keyframes pulsing {
-    0% {
-        opacity: 0.25;
-    }
-
-    50% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0.25;
-    }
-}
-</style>
-
-<style>
-.grow-enter-from .node-container,
-.grow-leave-to .node-container {
-    transform: scale(0);
-}
-</style>

src/features/boards/BoardNodeAction.vue

@@ -1,109 +0,0 @@
-<template>
-    <transition name="actions" appear>
-        <g v-if="isSelected && actions">
-            <g
-                v-for="(action, index) in actions"
-                :key="action.id"
-                class="action"
-                :class="{ selected: selectedAction?.id === action.id }"
-                :transform="`translate(
-                        ${
-                            (-size - 30) *
-                            Math.sin(((actions.length - 1) / 2 - index) * actionDistance)
-                        },
-                        ${
-                            (size + 30) *
-                            Math.cos(((actions.length - 1) / 2 - index) * actionDistance)
-                        }
-                    )`"
-                @mousedown="e => performAction(e, action)"
-                @touchstart="e => performAction(e, action)"
-                @mouseup="e => actionMouseUp(e, action)"
-                @touchend.stop="e => actionMouseUp(e, action)"
-            >
-                <circle
-                    :fill="getNodeProperty(action.fillColor, node)"
-                    r="20"
-                    :stroke-width="selectedAction?.id === action.id ? 4 : 0"
-                    :stroke="outlineColor"
-                />
-                <text :fill="titleColor" class="material-icons">{{
-                    getNodeProperty(action.icon, node)
-                }}</text>
-            </g>
-        </g>
-    </transition>
-</template>
-
-<script setup lang="ts">
-import themes from "data/themes";
-import type { BoardNode, GenericBoardNodeAction, GenericNodeType } from "features/boards/board";
-import { getNodeProperty } from "features/boards/board";
-import settings from "game/settings";
-import { computed, toRefs, unref } from "vue";
-
-const _props = defineProps<{
-    node: BoardNode;
-    nodeType: GenericNodeType;
-    actions?: GenericBoardNodeAction[];
-    isSelected: boolean;
-    selectedAction: GenericBoardNodeAction | null;
-}>();
-const props = toRefs(_props);
-
-const emit = defineEmits<{
-    (e: "clickAction", actionId: string): void;
-}>();
-
-const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
-const outlineColor = computed(
-    () =>
-        getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ??
-        themes[settings.theme].variables["--outline"]
-);
-const titleColor = computed(
-    () =>
-        getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ??
-        themes[settings.theme].variables["--foreground"]
-);
-const actionDistance = computed(() =>
-    getNodeProperty(props.nodeType.value.actionDistance, unref(props.node))
-);
-
-function performAction(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
-    emit("clickAction", action.id);
-    e.preventDefault();
-    e.stopPropagation();
-}
-
-function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
-    if (unref(props.selectedAction)?.id === action.id) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-}
-</script>
-
-<style scoped>
-.action:not(.boardnode):hover circle,
-.action:not(.boardnode).selected circle {
-    r: 25;
-}
-
-.action:not(.boardnode):hover text,
-.action:not(.boardnode).selected text {
-    font-size: 187.5%; /* 150% * 1.25 */
-}
-
-.action:not(.boardnode) text {
-    text-anchor: middle;
-    dominant-baseline: central;
-}
-</style>
-
-<style>
-.actions-enter-from .action,
-.actions-leave-to .action {
-    transform: translate(0, 0);
-}
-</style>

src/features/boards/board.ts

@@ -1,631 +0,0 @@
-import BoardComponent from "features/boards/Board.vue";
-import type { GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
-import {
-    Component,
-    findFeatures,
-    GatherProps,
-    getUniqueID,
-    setDefault,
-    Visibility
-} from "features/feature";
-import { globalBus } from "game/events";
-import { DefaultValue, deletePersistent, Persistent, State } from "game/persistence";
-import { persistent } from "game/persistence";
-import type { Unsubscribe } from "nanoevents";
-import { Direction, isFunction } from "util/common";
-import type {
-    Computable,
-    GetComputableType,
-    GetComputableTypeWithDefault,
-    ProcessedComputable
-} from "util/computed";
-import { processComputable } from "util/computed";
-import { createLazyProxy } from "util/proxies";
-import { computed, isRef, ref, Ref, unref } from "vue";
-import panZoom from "vue-panzoom";
-import type { Link } from "../links/links";
-
-globalBus.on("setupVue", app => panZoom.install(app));
-
-/** A symbol used to identify {@link Board} features. */
-export const BoardType = Symbol("Board");
-
-/**
- * A type representing a computable value for a node on the board. Used for node types to return different values based on the given node and the state of the board.
- */
-export type NodeComputable<T, S extends unknown[] = []> =
-    | Computable<T>
-    | ((node: BoardNode, ...args: S) => T);
-
-/** Ways to display progress of an action with a duration. */
-export enum ProgressDisplay {
-    Outline = "Outline",
-    Fill = "Fill"
-}
-
-/** Node shapes. */
-export enum Shape {
-    Circle = "Circle",
-    Diamond = "Triangle"
-}
-
-/** An object representing a node on the board. */
-export interface BoardNode {
-    id: number;
-    position: {
-        x: number;
-        y: number;
-    };
-    type: string;
-    state?: State;
-    pinned?: boolean;
-}
-
-/** An object representing a link between two nodes on the board. */
-export interface BoardNodeLink extends Omit<Link, "startNode" | "endNode"> {
-    startNode: BoardNode;
-    endNode: BoardNode;
-    stroke: string;
-    strokeWidth: number;
-    pulsing?: boolean;
-}
-
-/** An object representing a label for a node. */
-export interface NodeLabel {
-    text: string;
-    color?: string;
-    pulsing?: boolean;
-}
-
-/** The persistent data for a board. */
-export type BoardData = {
-    nodes: BoardNode[];
-    selectedNode: number | null;
-    selectedAction: string | null;
-};
-
-/**
- * An object that configures a {@link NodeType}.
- */
-export interface NodeTypeOptions {
-    /** The title to display for the node. */
-    title: NodeComputable<string>;
-    /** An optional label for the node. */
-    label?: NodeComputable<NodeLabel | null>;
-    /** The size of the node - diameter for circles, width and height for squares. */
-    size: NodeComputable<number>;
-    /** CSS to apply to this node. */
-    style?: NodeComputable<StyleValue>;
-    /** Dictionary of CSS classes to apply to this node. */
-    classes?: NodeComputable<Record<string, boolean>>;
-    /** Whether the node is draggable or not. */
-    draggable?: NodeComputable<boolean>;
-    /** The shape of the node. */
-    shape: NodeComputable<Shape>;
-    /** Whether the node can accept another node being dropped upon it. */
-    canAccept?: NodeComputable<boolean, [BoardNode]>;
-    /** The progress value of the node, from 0 to 1. */
-    progress?: NodeComputable<number>;
-    /** How the progress should be displayed on the node. */
-    progressDisplay?: NodeComputable<ProgressDisplay>;
-    /** The color of the progress indicator. */
-    progressColor?: NodeComputable<string>;
-    /** The fill color of the node. */
-    fillColor?: NodeComputable<string>;
-    /** The outline color of the node. */
-    outlineColor?: NodeComputable<string>;
-    /** The color of the title text. */
-    titleColor?: NodeComputable<string>;
-    /** The list of action options for the node. */
-    actions?: BoardNodeActionOptions[];
-    /** The arc between each action, in radians. */
-    actionDistance?: NodeComputable<number>;
-    /** A function that is called when the node is clicked. */
-    onClick?: (node: BoardNode) => void;
-    /** A function that is called when a node is dropped onto this node. */
-    onDrop?: (node: BoardNode, otherNode: BoardNode) => void;
-    /** A function that is called for each node of this type every tick. */
-    update?: (node: BoardNode, diff: number) => void;
-}
-
-/**
- * The properties that are added onto a processed {@link NodeTypeOptions} to create a {@link NodeType}.
- */
-export interface BaseNodeType {
-    /** The nodes currently on the board of this type. */
-    nodes: Ref<BoardNode[]>;
-}
-
-/** An object that represents a type of node that can appear on a board. It will handle getting properties and callbacks for every node of that type. */
-export type NodeType<T extends NodeTypeOptions> = Replace<
-    T & BaseNodeType,
-    {
-        title: GetComputableType<T["title"]>;
-        label: GetComputableType<T["label"]>;
-        size: GetComputableTypeWithDefault<T["size"], 50>;
-        style: GetComputableType<T["style"]>;
-        classes: GetComputableType<T["classes"]>;
-        draggable: GetComputableTypeWithDefault<T["draggable"], false>;
-        shape: GetComputableTypeWithDefault<T["shape"], Shape.Circle>;
-        canAccept: GetComputableTypeWithDefault<T["canAccept"], false>;
-        progress: GetComputableType<T["progress"]>;
-        progressDisplay: GetComputableTypeWithDefault<T["progressDisplay"], ProgressDisplay.Fill>;
-        progressColor: GetComputableTypeWithDefault<T["progressColor"], "none">;
-        fillColor: GetComputableType<T["fillColor"]>;
-        outlineColor: GetComputableType<T["outlineColor"]>;
-        titleColor: GetComputableType<T["titleColor"]>;
-        actions?: GenericBoardNodeAction[];
-        actionDistance: GetComputableTypeWithDefault<T["actionDistance"], number>;
-    }
->;
-
-/** A type that matches any valid {@link NodeType} object. */
-export type GenericNodeType = Replace<
-    NodeType<NodeTypeOptions>,
-    {
-        size: NodeComputable<number>;
-        draggable: NodeComputable<boolean>;
-        shape: NodeComputable<Shape>;
-        canAccept: NodeComputable<boolean, [BoardNode]>;
-        progressDisplay: NodeComputable<ProgressDisplay>;
-        progressColor: NodeComputable<string>;
-        actionDistance: NodeComputable<number>;
-    }
->;
-
-/**
- * An object that configures a {@link BoardNodeAction}.
- */
-export interface BoardNodeActionOptions {
-    /** A unique identifier for the action. */
-    id: string;
-    /** Whether this action should be visible. */
-    visibility?: NodeComputable<Visibility | boolean>;
-    /** The icon to display for the action. */
-    icon: NodeComputable<string>;
-    /** The fill color of the action. */
-    fillColor?: NodeComputable<string>;
-    /** The tooltip text to display for the action. */
-    tooltip: NodeComputable<NodeLabel>;
-    /** The confirmation label that appears under the action. */
-    confirmationLabel?: NodeComputable<NodeLabel>;
-    /** An array of board node links associated with the action. They appear when the action is focused. */
-    links?: NodeComputable<BoardNodeLink[]>;
-    /** A function that is called when the action is clicked. */
-    onClick: (node: BoardNode) => void;
-}
-
-/**
- * The properties that are added onto a processed {@link BoardNodeActionOptions} to create an {@link BoardNodeAction}.
- */
-export interface BaseBoardNodeAction {
-    links?: Ref<BoardNodeLink[]>;
-}
-
-/** An object that represents an action that can be taken upon a node. */
-export type BoardNodeAction<T extends BoardNodeActionOptions> = Replace<
-    T & BaseBoardNodeAction,
-    {
-        visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
-        icon: GetComputableType<T["icon"]>;
-        fillColor: GetComputableType<T["fillColor"]>;
-        tooltip: GetComputableType<T["tooltip"]>;
-        confirmationLabel: GetComputableTypeWithDefault<T["confirmationLabel"], NodeLabel>;
-        links: GetComputableType<T["links"]>;
-    }
->;
-
-/** A type that matches any valid {@link BoardNodeAction} object. */
-export type GenericBoardNodeAction = Replace<
-    BoardNodeAction<BoardNodeActionOptions>,
-    {
-        visibility: NodeComputable<Visibility | boolean>;
-        confirmationLabel: NodeComputable<NodeLabel>;
-    }
->;
-
-/**
- * An object that configures a {@link Board}.
- */
-export interface BoardOptions {
-    /** Whether this board should be visible. */
-    visibility?: Computable<Visibility | boolean>;
-    /** The height of the board. Defaults to 100% */
-    height?: Computable<string>;
-    /** The width of the board. Defaults to 100% */
-    width?: Computable<string>;
-    /** Dictionary of CSS classes to apply to this feature. */
-    classes?: Computable<Record<string, boolean>>;
-    /** CSS to apply to this feature. */
-    style?: Computable<StyleValue>;
-    /** A function that returns an array of initial board nodes, without IDs. */
-    startNodes: () => Omit<BoardNode, "id">[];
-    /** A dictionary of node types that can appear on the board. */
-    types: Record<string, NodeTypeOptions>;
-    /** The persistent state of the board. */
-    state?: Computable<BoardData>;
-    /** An array of board node links to display. */
-    links?: Computable<BoardNodeLink[] | null>;
-}
-
-/**
- * The properties that are added onto a processed {@link BoardOptions} to create a {@link Board}.
- */
-export interface BaseBoard {
-    /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
-    id: string;
-    /** All the nodes currently on the board. */
-    nodes: Ref<BoardNode[]>;
-    /** The currently selected node, if any. */
-    selectedNode: Ref<BoardNode | null>;
-    /** The currently selected action, if any. */
-    selectedAction: Ref<GenericBoardNodeAction | null>;
-    /** The currently being dragged node, if any. */
-    draggingNode: Ref<BoardNode | null>;
-    /** If dragging a node, the node it's currently being hovered over, if any. */
-    receivingNode: Ref<BoardNode | null>;
-    /** The current mouse position, if over the board. */
-    mousePosition: Ref<{ x: number; y: number } | null>;
-    /** Places a node in the nearest empty space in the given direction with the specified space around it. */
-    placeInAvailableSpace: (node: BoardNode, radius?: number, direction?: Direction) => void;
-    /** A symbol that helps identify features of the same type. */
-    type: typeof BoardType;
-    /** The Vue component used to render this feature. */
-    [Component]: GenericComponent;
-    /** A function to gather the props the vue component requires for this feature. */
-    [GatherProps]: () => Record<string, unknown>;
-}
-
-/** An object that represents a feature that is a zoomable, pannable board with various nodes upon it. */
-export type Board<T extends BoardOptions> = Replace<
-    T & BaseBoard,
-    {
-        visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
-        types: Record<string, GenericNodeType>;
-        height: GetComputableType<T["height"]>;
-        width: GetComputableType<T["width"]>;
-        classes: GetComputableType<T["classes"]>;
-        style: GetComputableType<T["style"]>;
-        state: GetComputableTypeWithDefault<T["state"], Persistent<BoardData>>;
-        links: GetComputableTypeWithDefault<T["links"], Ref<BoardNodeLink[] | null>>;
-    }
->;
-
-/** A type that matches any valid {@link Board} object. */
-export type GenericBoard = Replace<
-    Board<BoardOptions>,
-    {
-        visibility: ProcessedComputable<Visibility | boolean>;
-        state: ProcessedComputable<BoardData>;
-        links: ProcessedComputable<BoardNodeLink[] | null>;
-    }
->;
-
-/**
- * Lazily creates a board with the given options.
- * @param optionsFunc Board options.
- */
-export function createBoard<T extends BoardOptions>(
-    optionsFunc: OptionsFunc<T, BaseBoard, GenericBoard>
-): Board<T> {
-    const state = persistent<BoardData>(
-        {
-            nodes: [],
-            selectedNode: null,
-            selectedAction: null
-        },
-        false
-    );
-
-    return createLazyProxy(feature => {
-        const board = optionsFunc.call(feature, feature);
-        board.id = getUniqueID("board-");
-        board.type = BoardType;
-        board[Component] = BoardComponent as GenericComponent;
-
-        if (board.state) {
-            deletePersistent(state);
-            processComputable(board as T, "state");
-        } else {
-            state[DefaultValue] = {
-                nodes: board.startNodes().map((n, i) => {
-                    (n as BoardNode).id = i;
-                    return n as BoardNode;
-                }),
-                selectedNode: null,
-                selectedAction: null
-            };
-            board.state = state;
-        }
-
-        board.nodes = computed(() => unref(processedBoard.state).nodes);
-        board.selectedNode = computed({
-            get() {
-                return (
-                    processedBoard.nodes.value.find(
-                        node => node.id === unref(processedBoard.state).selectedNode
-                    ) || null
-                );
-            },
-            set(node) {
-                if (isRef(processedBoard.state)) {
-                    processedBoard.state.value = {
-                        ...processedBoard.state.value,
-                        selectedNode: node?.id ?? null
-                    };
-                } else {
-                    processedBoard.state.selectedNode = node?.id ?? null;
-                }
-            }
-        });
-        board.selectedAction = computed({
-            get() {
-                const selectedNode = processedBoard.selectedNode.value;
-                if (selectedNode == null) {
-                    return null;
-                }
-                const type = processedBoard.types[selectedNode.type];
-                if (type.actions == null) {
-                    return null;
-                }
-                return (
-                    type.actions.find(
-                        action => action.id === unref(processedBoard.state).selectedAction
-                    ) || null
-                );
-            },
-            set(action) {
-                if (isRef(processedBoard.state)) {
-                    processedBoard.state.value = {
-                        ...processedBoard.state.value,
-                        selectedAction: action?.id ?? null
-                    };
-                } else {
-                    processedBoard.state.selectedAction = action?.id ?? null;
-                }
-            }
-        });
-        board.mousePosition = ref(null);
-        if (board.links) {
-            processComputable(board as T, "links");
-        } else {
-            board.links = computed(() => {
-                if (processedBoard.selectedAction.value == null) {
-                    return null;
-                }
-                if (
-                    processedBoard.selectedAction.value.links &&
-                    processedBoard.selectedNode.value
-                ) {
-                    return getNodeProperty(
-                        processedBoard.selectedAction.value.links,
-                        processedBoard.selectedNode.value
-                    );
-                }
-                return null;
-            });
-        }
-        board.draggingNode = ref(null);
-        board.receivingNode = ref(null);
-        processComputable(board as T, "visibility");
-        setDefault(board, "visibility", Visibility.Visible);
-        processComputable(board as T, "width");
-        setDefault(board, "width", "100%");
-        processComputable(board as T, "height");
-        setDefault(board, "height", "100%");
-        processComputable(board as T, "classes");
-        processComputable(board as T, "style");
-
-        for (const type in board.types) {
-            const nodeType: NodeTypeOptions & Partial<BaseNodeType> = board.types[type];
-
-            processComputable(nodeType as NodeTypeOptions, "title");
-            processComputable(nodeType as NodeTypeOptions, "label");
-            processComputable(nodeType as NodeTypeOptions, "size");
-            setDefault(nodeType, "size", 50);
-            processComputable(nodeType as NodeTypeOptions, "style");
-            processComputable(nodeType as NodeTypeOptions, "classes");
-            processComputable(nodeType as NodeTypeOptions, "draggable");
-            setDefault(nodeType, "draggable", false);
-            processComputable(nodeType as NodeTypeOptions, "shape");
-            setDefault(nodeType, "shape", Shape.Circle);
-            processComputable(nodeType as NodeTypeOptions, "canAccept");
-            setDefault(nodeType, "canAccept", false);
-            processComputable(nodeType as NodeTypeOptions, "progress");
-            processComputable(nodeType as NodeTypeOptions, "progressDisplay");
-            setDefault(nodeType, "progressDisplay", ProgressDisplay.Fill);
-            processComputable(nodeType as NodeTypeOptions, "progressColor");
-            setDefault(nodeType, "progressColor", "none");
-            processComputable(nodeType as NodeTypeOptions, "fillColor");
-            processComputable(nodeType as NodeTypeOptions, "outlineColor");
-            processComputable(nodeType as NodeTypeOptions, "titleColor");
-            processComputable(nodeType as NodeTypeOptions, "actionDistance");
-            setDefault(nodeType, "actionDistance", Math.PI / 6);
-            nodeType.nodes = computed(() =>
-                unref(processedBoard.state).nodes.filter(node => node.type === type)
-            );
-            setDefault(nodeType, "onClick", function (node: BoardNode) {
-                unref(processedBoard.state).selectedNode = node.id;
-            });
-
-            if (nodeType.actions) {
-                for (const action of nodeType.actions) {
-                    processComputable(action, "visibility");
-                    setDefault(action, "visibility", Visibility.Visible);
-                    processComputable(action, "icon");
-                    processComputable(action, "fillColor");
-                    processComputable(action, "tooltip");
-                    processComputable(action, "confirmationLabel");
-                    setDefault(action, "confirmationLabel", { text: "Tap again to confirm" });
-                    processComputable(action, "links");
-                }
-            }
-        }
-
-        function setDraggingNode(node: BoardNode | null) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            board.draggingNode!.value = node;
-        }
-        function setReceivingNode(node: BoardNode | null) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            board.receivingNode!.value = node;
-        }
-
-        board.placeInAvailableSpace = function (
-            node: BoardNode,
-            radius = 100,
-            direction = Direction.Right
-        ) {
-            const nodes = processedBoard.nodes.value
-                .slice()
-                .filter(n => {
-                    // Exclude self
-                    if (n === node) {
-                        return false;
-                    }
-
-                    // Exclude nodes that aren't within the corridor we'll be moving within
-                    if (
-                        (direction === Direction.Down || direction === Direction.Up) &&
-                        Math.abs(n.position.x - node.position.x) > radius
-                    ) {
-                        return false;
-                    }
-                    if (
-                        (direction === Direction.Left || direction === Direction.Right) &&
-                        Math.abs(n.position.y - node.position.y) > radius
-                    ) {
-                        return false;
-                    }
-
-                    // Exclude nodes in the wrong direction
-                    return !(
-                        (direction === Direction.Right &&
-                            n.position.x < node.position.x - radius) ||
-                        (direction === Direction.Left && n.position.x > node.position.x + radius) ||
-                        (direction === Direction.Up && n.position.y > node.position.y + radius) ||
-                        (direction === Direction.Down && n.position.y < node.position.y - radius)
-                    );
-                })
-                .sort(
-                    direction === Direction.Right
-                        ? (a, b) => a.position.x - b.position.x
-                        : direction === Direction.Left
-                        ? (a, b) => b.position.x - a.position.x
-                        : direction === Direction.Up
-                        ? (a, b) => b.position.y - a.position.y
-                        : (a, b) => a.position.y - b.position.y
-                );
-            for (let i = 0; i < nodes.length; i++) {
-                const nodeToCheck = nodes[i];
-                const distance =
-                    direction === Direction.Right || direction === Direction.Left
-                        ? Math.abs(node.position.x - nodeToCheck.position.x)
-                        : Math.abs(node.position.y - nodeToCheck.position.y);
-
-                // If we're too close to this node, move further
-                if (distance < radius) {
-                    if (direction === Direction.Right) {
-                        node.position.x = nodeToCheck.position.x + radius;
-                    } else if (direction === Direction.Left) {
-                        node.position.x = nodeToCheck.position.x - radius;
-                    } else if (direction === Direction.Up) {
-                        node.position.y = nodeToCheck.position.y - radius;
-                    } else if (direction === Direction.Down) {
-                        node.position.y = nodeToCheck.position.y + radius;
-                    }
-                } else if (i > 0 && distance > radius) {
-                    // If we're further from this node than the radius, then the nodes are past us and we can early exit
-                    break;
-                }
-            }
-        };
-
-        board[GatherProps] = function (this: GenericBoard) {
-            const {
-                nodes,
-                types,
-                state,
-                visibility,
-                width,
-                height,
-                style,
-                classes,
-                links,
-                selectedAction,
-                selectedNode,
-                mousePosition,
-                draggingNode,
-                receivingNode
-            } = this;
-            return {
-                nodes,
-                types,
-                state,
-                visibility,
-                width,
-                height,
-                style: unref(style),
-                classes,
-                links,
-                selectedAction,
-                selectedNode,
-                mousePosition,
-                draggingNode,
-                receivingNode,
-                setDraggingNode,
-                setReceivingNode
-            };
-        };
-
-        // This is necessary because board.types is different from T and Board
-        const processedBoard = board as unknown as Board<T>;
-        return processedBoard;
-    });
-}
-
-/**
- * Gets the value of a property for a specified node.
- * @param property The property to find the value of
- * @param node The node to get the property of
- */
-export function getNodeProperty<T, S extends unknown[]>(
-    property: NodeComputable<T, S>,
-    node: BoardNode,
-    ...args: S
-): T {
-    return isFunction<T, [BoardNode, ...S], Computable<T>>(property)
-        ? property(node, ...args)
-        : unref(property);
-}
-
-/**
- * Utility to get an ID for a node that is guaranteed unique.
- * @param board The board feature to generate an ID for
- */
-export function getUniqueNodeID(board: GenericBoard): number {
-    let id = 0;
-    board.nodes.value.forEach(node => {
-        if (node.id >= id) {
-            id = node.id + 1;
-        }
-    });
-    return id;
-}
-
-const listeners: Record<string, Unsubscribe | undefined> = {};
-globalBus.on("addLayer", layer => {
-    const boards: GenericBoard[] = findFeatures(layer, BoardType) as GenericBoard[];
-    listeners[layer.id] = layer.on("postUpdate", diff => {
-        boards.forEach(board => {
-            Object.values(board.types).forEach(type =>
-                type.nodes.value.forEach(node => type.update?.(node, diff))
-            );
-        });
-    });
-});
-globalBus.on("removeLayer", layer => {
-    // unsubscribe from postUpdate
-    listeners[layer.id]?.();
-    listeners[layer.id] = undefined;
-});

src/game/boards/Board.vue

@@ -0,0 +1,101 @@
+<template>
+    <panZoom
+        selector=".stage"
+        :options="{ initialZoom: 1, minZoom: 0.1, maxZoom: 10, zoomDoubleClickSpeed: 1 }"
+        ref="stage"
+        @init="onInit"
+        @mousemove="(e: MouseEvent) => emit('drag', e)"
+        @touchmove="(e: TouchEvent) => emit('drag', e)"
+        @mouseleave="(e: MouseEvent) => emit('mouseLeave', e)"
+        @mouseup="(e: MouseEvent) => emit('mouseUp', e)"
+        @touchend.passive="(e: TouchEvent) => emit('mouseUp', e)"
+    >
+        <div
+            class="event-listener"
+            @mousedown="(e: MouseEvent) => emit('mouseDown', e)"
+            @touchstart="(e: TouchEvent) => emit('mouseDown', e)"
+        />
+        <div class="stage">
+            <slot />
+        </div>
+    </panZoom>
+</template>
+
+<script setup lang="ts">
+import type { PanZoom } from "panzoom";
+import type { ComponentPublicInstance } from "vue";
+import { computed, ref } from "vue";
+// Required to make sure panzoom component gets registered:
+import "./board";
+
+defineExpose({
+    panZoomInstance: computed(() => stage.value?.panZoomInstance)
+});
+const emit = defineEmits<{
+    (event: "drag", e: MouseEvent | TouchEvent): void;
+    (event: "mouseDown", e: MouseEvent | TouchEvent): void;
+    (event: "mouseUp", e: MouseEvent | TouchEvent): void;
+    (event: "mouseLeave", e: MouseEvent | TouchEvent): void;
+}>();
+
+const stage = ref<{ panZoomInstance: PanZoom } & ComponentPublicInstance<HTMLElement>>();
+
+function onInit(panzoomInstance: PanZoom) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    panzoomInstance.setTransformOrigin(null);
+    panzoomInstance.moveTo(0, stage.value?.$el.clientHeight / 2);
+}
+</script>
+
+<style scoped>
+.event-listener {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.stage {
+    transition-duration: 0s;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+</style>
+
+<style>
+.vue-pan-zoom-item {
+    overflow: hidden;
+}
+
+.vue-pan-zoom-scene {
+    width: 100%;
+    height: 100%;
+    cursor: grab;
+}
+
+.vue-pan-zoom-scene:active {
+    cursor: grabbing;
+}
+
+.stage > * {
+    pointer-events: initial;
+}
+
+/* "Only" child (excluding resize listener) */
+.layer-tab > .vue-pan-zoom-item:first-child:nth-last-child(2) {
+    width: calc(100% + 20px);
+    height: calc(100% + 100px);
+    margin: -50px -10px;
+}
+
+.board-node {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transition-duration: 0s;
+}
+</style>
+game/boards/board

src/game/boards/CircleProgress.vue

@@ -0,0 +1,29 @@
+<template>
+    <circle
+        :r="r"
+        fill="transparent"
+        :stroke-dasharray="r * 2 * Math.PI"
+        :stroke-width="5"
+        :stroke-dashoffset="r * 2 * Math.PI - progress * r * 2 * Math.PI"
+        :stroke="stroke"
+    />
+</template>
+
+<script setup lang="ts">
+import type { SVGAttributes } from "vue";
+
+interface CircleProgressProps extends SVGAttributes {
+    r: number;
+    progress: number;
+    stroke: string;
+}
+
+defineProps<CircleProgressProps>();
+</script>
+
+<style scoped>
+circle {
+    transition-duration: 0.05s;
+    transform: rotate(-90deg);
+}
+</style>

src/game/boards/Draggable.vue

@@ -0,0 +1,29 @@
+<template>
+    <div
+        class="board-node"
+        :style="`transform: translate(calc(${unref(position).x}px - 50%), ${unref(position).y}px);`"
+        @mousedown="e => mouseDown(e)"
+        @touchstart.passive="e => mouseDown(e)"
+        @mouseup="e => mouseUp(e)"
+        @touchend.passive="e => mouseUp(e)"
+    >
+        <component v-if="comp" :is="comp" />
+    </div>
+</template>
+
+<script setup lang="tsx">
+import { jsx } from "features/feature";
+import { VueFeature, coerceComponent, renderJSX } from "util/vue";
+import { Ref, shallowRef, unref } from "vue";
+import { NodePosition } from "./board";
+unref;
+
+const props = defineProps<{
+    element: VueFeature;
+    mouseDown: (e: MouseEvent | TouchEvent) => void;
+    mouseUp: (e: MouseEvent | TouchEvent) => void;
+    position: Ref<NodePosition>;
+}>();
+
+const comp = shallowRef(coerceComponent(jsx(() => renderJSX(props.element))));
+</script>

src/game/boards/SVGNode.vue

@@ -0,0 +1,28 @@
+<template>
+    <svg
+        @mousedown="e => emit('mouseDown', e)"
+        @touchstart.passive="e => emit('mouseDown', e)"
+        @mouseup="e => emit('mouseUp', e)"
+        @touchend.passive="e => emit('mouseUp', e)"
+        width="1"
+        height="1"
+    >
+        <slot />
+    </svg>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{
+    (e: "mouseDown", event: MouseEvent | TouchEvent): void;
+    (e: "mouseUp", event: MouseEvent | TouchEvent): void;
+}>();
+</script>
+
+<style scoped>
+svg {
+    cursor: pointer;
+    transition-duration: 0s;
+    overflow: visible;
+    position: absolute;
+}
+</style>

src/game/boards/SquareProgress.vue

@@ -0,0 +1,30 @@
+<template>
+    <rect
+        :width="size"
+        :height="size"
+        :transform="`translate(${-size / 2}, ${-size / 2})`"
+        fill="transparent"
+        :stroke-dasharray="size * 4"
+        :stroke-width="5"
+        :stroke-dashoffset="size * 4 - progress * size * 4"
+        :stroke="stroke"
+    />
+</template>
+
+<script setup lang="ts">
+import type { SVGAttributes } from "vue";
+
+interface SquareProgressProps extends SVGAttributes {
+    size: number;
+    progress: number;
+    stroke: string;
+}
+
+defineProps<SquareProgressProps>();
+</script>
+
+<style scoped>
+rect {
+    transition-duration: 0.05s;
+}
+</style>

src/game/boards/board.tsx

@@ -0,0 +1,437 @@
+import Board from "./Board.vue";
+import Draggable from "./Draggable.vue";
+import { Component, GatherProps, GenericComponent, jsx } from "features/feature";
+import { globalBus } from "game/events";
+import { Persistent, persistent } from "game/persistence";
+import type { PanZoom } from "panzoom";
+import { Direction, isFunction } from "util/common";
+import type { Computable, ProcessedComputable } from "util/computed";
+import { convertComputable } from "util/computed";
+import { VueFeature } from "util/vue";
+import type { ComponentPublicInstance, Ref } from "vue";
+import { computed, nextTick, ref, unref, watchEffect } from "vue";
+import panZoom from "vue-panzoom";
+
+// Register panzoom so it can be used in Board.vue
+globalBus.on("setupVue", app => panZoom.install(app));
+
+/** A type representing the position of a node. */
+export type NodePosition = { x: number; y: number };
+
+/**
+ * A type representing a computable value for a node on the board. Used for node types to return different values based on the given node and the state of the board.
+ */
+export type NodeComputable<T, R, S extends unknown[] = []> =
+    | Computable<R>
+    | ((node: T, ...args: S) => R);
+
+/**
+ * Gets the value of a property for a specified node.
+ * @param property The property to find the value of
+ * @param node The node to get the property of
+ */
+export function unwrapNodeRef<T, R, S extends unknown[]>(
+    property: NodeComputable<T, R, S>,
+    node: T,
+    ...args: S
+): R {
+    return isFunction<R, [T, ...S], ProcessedComputable<R>>(property)
+        ? property(node, ...args)
+        : unref(property);
+}
+
+/**
+ * Create a computed ref that can assist in assigning new nodes an ID unique from all current nodes.
+ * @param nodes The list of current nodes with IDs as properties
+ * @returns A computed ref that will give the value of the next unique ID
+ */
+export function setupUniqueIds(nodes: Computable<{ id: number }[]>) {
+    const processedNodes = convertComputable(nodes);
+    return computed(() => Math.max(-1, ...unref(processedNodes).map(node => node.id)) + 1);
+}
+
+/** An object that configures a {@link DraggableNode}. */
+export interface DraggableNodeOptions<T> {
+    /** A ref to the specific instance of the Board vue component the node will be draggable on. Obtained by passing a suitable ref as the "ref" attribute to the <Board> element. */
+    board: Ref<ComponentPublicInstance<typeof Board> | undefined>;
+    /** Getter function to go from the node (typically ID) to the position of said node. */
+    getPosition: (node: T) => NodePosition;
+    /** Setter function to update the position of a node. */
+    setPosition: (node: T, position: NodePosition) => void;
+    /** A list of nodes that the currently dragged node can be dropped upon. */
+    receivingNodes?: NodeComputable<T, T[]>;
+    /** The maximum distance (in pixels, before zoom) away a node can be and still drop onto a receiving node. */
+    dropAreaRadius?: NodeComputable<T, number>;
+    /** A callback for when a node gets dropped upon a receiving node. */
+    onDrop?: (acceptingNode: T, draggingNode: T) => void;
+}
+
+/** An object that represents a system for moving nodes on a board by dragging them. */
+export interface DraggableNode<T> {
+    /** A ref to the node currently being moved. */
+    nodeBeingDragged: Ref<T | undefined>;
+    /** A ref to the node the node being dragged could be dropped upon if let go, if any. The node closest to the node being dragged if there are more than one within the drop area radius. */
+    receivingNode: Ref<T | undefined>;
+    /** A ref to whether or not the node being dragged has actually been dragged away from its starting position. */
+    hasDragged: Ref<boolean>;
+    /** The position of the node being dragged relative to where it started at the beginning of the drag. */
+    dragDelta: Ref<NodePosition>;
+    /** The nodes that can receive the node currently being dragged. */
+    receivingNodes: Ref<T[]>;
+    /** A function to call whenever a drag should start, that takes the mouse event that triggered it. Typically attached to each node's onMouseDown listener. */
+    startDrag: (e: MouseEvent | TouchEvent, node: T) => void;
+    /** A function to call whenever a drag should end, typically attached to the Board's onMouseUp and onMouseLeave listeners. */
+    endDrag: VoidFunction;
+    /** A function to call when the mouse moves during a drag, typically attached to the Board's onDrag listener. */
+    drag: (e: MouseEvent | TouchEvent) => void;
+}
+
+/**
+ * Sets up a system to allow nodes to be moved within a board by dragging and dropping.
+ * Also allows for dropping nodes on other nodes to trigger code.
+ * @param options Draggable node options.
+ * @returns A DraggableNode object.
+ */
+export function setupDraggableNode<T>(options: DraggableNodeOptions<T>): DraggableNode<T> {
+    const nodeBeingDragged = ref<T>();
+    const receivingNode = ref<T>();
+    const hasDragged = ref(false);
+    const dragDelta = ref({ x: 0, y: 0 });
+    const receivingNodes = computed(() =>
+        nodeBeingDragged.value == null
+            ? []
+            : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              unwrapNodeRef(options.receivingNodes ?? [], nodeBeingDragged.value!)
+    );
+    const dropAreaRadius = options.dropAreaRadius ?? 50;
+
+    const mousePosition = ref<NodePosition>();
+    const lastMousePosition = ref({ x: 0, y: 0 });
+
+    watchEffect(() => {
+        const node = nodeBeingDragged.value;
+        if (node == null) {
+            return null;
+        }
+
+        const originalPosition = options.getPosition(node);
+        const position = {
+            x: originalPosition.x + dragDelta.value.x,
+            y: originalPosition.y + dragDelta.value.y
+        };
+        let smallestDistance = Number.MAX_VALUE;
+
+        receivingNode.value = unref(receivingNodes).reduce((smallest: T | undefined, curr: T) => {
+            if ((curr as T) === node) {
+                return smallest;
+            }
+
+            const { x, y } = options.getPosition(curr);
+            const distanceSquared = Math.pow(position.x - x, 2) + Math.pow(position.y - y, 2);
+            const size = unwrapNodeRef(dropAreaRadius, curr);
+            if (distanceSquared > smallestDistance || distanceSquared > size * size) {
+                return smallest;
+            }
+
+            smallestDistance = distanceSquared;
+            return curr;
+        }, undefined);
+    });
+
+    const result = {
+        nodeBeingDragged,
+        receivingNode,
+        hasDragged,
+        dragDelta,
+        receivingNodes,
+        startDrag: function (e: MouseEvent | TouchEvent, node: T) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            let clientX, clientY;
+            if ("touches" in e) {
+                if (e.touches.length === 1) {
+                    clientX = e.touches[0].clientX;
+                    clientY = e.touches[0].clientY;
+                } else {
+                    return;
+                }
+            } else {
+                clientX = e.clientX;
+                clientY = e.clientY;
+            }
+            lastMousePosition.value = {
+                x: clientX,
+                y: clientY
+            };
+            dragDelta.value = { x: 0, y: 0 };
+            hasDragged.value = false;
+
+            nodeBeingDragged.value = node;
+        },
+        endDrag: function () {
+            if (nodeBeingDragged.value == null) {
+                return;
+            }
+            if (receivingNode.value == null) {
+                const { x, y } = options.getPosition(nodeBeingDragged.value);
+                const newX = x + Math.round(dragDelta.value.x / 25) * 25;
+                const newY = y + Math.round(dragDelta.value.y / 25) * 25;
+                options.setPosition(nodeBeingDragged.value, { x: newX, y: newY });
+            }
+
+            if (receivingNode.value != null) {
+                options.onDrop?.(receivingNode.value, nodeBeingDragged.value);
+            }
+
+            nodeBeingDragged.value = undefined;
+        },
+        drag: function (e: MouseEvent | TouchEvent) {
+            const panZoomInstance = options.board.value?.panZoomInstance as PanZoom | undefined;
+            if (panZoomInstance == null || nodeBeingDragged.value == null) {
+                return;
+            }
+
+            const { x, y, scale } = panZoomInstance.getTransform();
+
+            let clientX, clientY;
+            if ("touches" in e) {
+                if (e.touches.length === 1) {
+                    clientX = e.touches[0].clientX;
+                    clientY = e.touches[0].clientY;
+                } else {
+                    result.endDrag();
+                    mousePosition.value = undefined;
+                    return;
+                }
+            } else {
+                clientX = e.clientX;
+                clientY = e.clientY;
+            }
+
+            mousePosition.value = {
+                x: (clientX - x) / scale,
+                y: (clientY - y) / scale
+            };
+
+            dragDelta.value = {
+                x: dragDelta.value.x + (clientX - lastMousePosition.value.x) / scale,
+                y: dragDelta.value.y + (clientY - lastMousePosition.value.y) / scale
+            };
+            lastMousePosition.value = {
+                x: clientX,
+                y: clientY
+            };
+
+            if (Math.abs(dragDelta.value.x) > 10 || Math.abs(dragDelta.value.y) > 10) {
+                hasDragged.value = true;
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    return result;
+}
+
+/** An object that configures how to make a vue feature draggable using {@link makeDraggable}. */
+export interface MakeDraggableOptions<T> {
+    /** The node ID to use for the vue feature. */
+    id: T;
+    /** A reference to the current node being dragged, typically from {@link setupDraggableNode}. */
+    nodeBeingDragged: Ref<T | undefined>;
+    /** A reference to whether or not the node being dragged has been moved away from its initial position. Typically from {@link setupDraggableNode}. */
+    hasDragged: Ref<boolean>;
+    /** A reference to how far the node being dragged is from its initial position. Typically from {@link setupDraggableNode}. */
+    dragDelta: Ref<NodePosition>;
+    /** A function to call when a drag is supposed to start. Typically from {@link setupDraggableNode}. */
+    startDrag: (e: MouseEvent | TouchEvent, id: T) => void;
+    /** A function to call when a drag is supposed to end. Typically from {@link setupDraggableNode}. */
+    endDrag: VoidFunction;
+    /** A callback that's called when the element is pressed down. Fires before drag starts, and returning `false` will prevent the drag from happening. */
+    onMouseDown?: (e: MouseEvent | TouchEvent) => boolean | void;
+    /** A callback that's called when the mouse is lifted off the element. */
+    onMouseUp?: (e: MouseEvent | TouchEvent) => boolean | void;
+    /** The initial position of the node on the board. Defaults to (0, 0). */
+    initialPosition?: NodePosition;
+}
+
+/**
+ * Makes a vue feature draggable on a Board.
+ * @param element The vue feature to make draggable.
+ * @param options The options to configure the dragging behavior.
+ */
+export function makeDraggable<T extends VueFeature, S>(
+    element: T,
+    options: MakeDraggableOptions<S>
+): asserts element is T & { position: Persistent<NodePosition> } {
+    const position = persistent(options.initialPosition ?? { x: 0, y: 0 });
+    (element as T & { position: Persistent<NodePosition> }).position = position;
+    const computedPosition = computed(() => {
+        if (options.nodeBeingDragged.value === options.id) {
+            return {
+                x: position.value.x + options.dragDelta.value.x,
+                y: position.value.y + options.dragDelta.value.y
+            };
+        }
+        return position.value;
+    });
+
+    function handleMouseDown(e: MouseEvent | TouchEvent) {
+        if (options.onMouseDown?.(e) === false) {
+            return;
+        }
+
+        if (options.nodeBeingDragged.value == null) {
+            options.startDrag(e, options.id);
+        }
+    }
+
+    function handleMouseUp(e: MouseEvent | TouchEvent) {
+        options.onMouseUp?.(e);
+    }
+
+    nextTick(() => {
+        const elementComponent = element[Component];
+        const elementGatherProps = element[GatherProps].bind(element);
+        element[Component] = Draggable as GenericComponent;
+        element[GatherProps] = function gatherTooltipProps(this: typeof options) {
+            return {
+                element: {
+                    [Component]: elementComponent,
+                    [GatherProps]: elementGatherProps
+                },
+                mouseDown: handleMouseDown,
+                mouseUp: handleMouseUp,
+                position: computedPosition
+            };
+        }.bind(options);
+    });
+}
+
+/** An object that configures how to setup a list of actions using {@link setupActions}. */
+export interface SetupActionsOptions<T extends NodePosition> {
+    /** The node to display actions upon, or undefined when the actions should be hidden. */
+    node: Computable<T | undefined>;
+    /** Whether or not to currently display the actions. */
+    shouldShowActions?: NodeComputable<T, boolean>;
+    /** The list of actions to display. Actions are arbitrary JSX elements. */
+    actions: NodeComputable<T, ((position: NodePosition) => JSX.Element)[]>;
+    /** The distance from the node to place the actions. */
+    distance: NodeComputable<T, number>;
+    /** The arc length to place between actions, in radians. */
+    arcLength?: NodeComputable<T, number>;
+}
+
+/**
+ * Sets up a system where a list of actions, which are arbitrary JSX elements, will get displayed around a node radially, under given conditions. The actions are radially centered around 3/2 PI (Down).
+ * @param options Setup actions options.
+ * @returns A JSX function to render the actions.
+ */
+export function setupActions<T extends NodePosition>(options: SetupActionsOptions<T>) {
+    const node = convertComputable(options.node);
+    return jsx(() => {
+        const currNode = unref(node);
+        if (currNode == null) {
+            return "";
+        }
+
+        const actions = unwrapNodeRef(options.actions, currNode);
+        const shouldShow = unwrapNodeRef(options.shouldShowActions, currNode) ?? true;
+        if (!shouldShow) {
+            return <>{actions.map(f => f(currNode))}</>;
+        }
+
+        const distance = unwrapNodeRef(options.distance, currNode);
+        const arcLength = unwrapNodeRef(options.arcLength, currNode) ?? Math.PI / 6;
+        const firstAngle = Math.PI / 2 - ((actions.length - 1) / 2) * arcLength;
+        return (
+            <>
+                {actions.map((f, index) =>
+                    f({
+                        x: currNode.x + Math.cos(firstAngle + index * arcLength) * distance,
+                        y: currNode.y + Math.sin(firstAngle + index * arcLength) * distance
+                    })
+                )}
+            </>
+        );
+    });
+}
+
+/**
+ * Moves a node so that it is sufficiently far away from any other nodes, to prevent overlapping.
+ * @param nodeToPlace The node to find a spot for, with it's current/preffered position.
+ * @param nodes The list of nodes to make sure nodeToPlace is far enough away from.
+ * @param radius How far away nodeToPlace must be from any other nodes.
+ * @param direction The direction to push the nodeToPlace until it finds an available spot.
+ */
+export function placeInAvailableSpace<T extends NodePosition>(
+    nodeToPlace: T,
+    nodes: T[],
+    radius = 100,
+    direction = Direction.Right
+) {
+    nodes = nodes
+        .filter(n => {
+            // Exclude self
+            if (n === nodeToPlace) {
+                return false;
+            }
+
+            // Exclude nodes that aren't within the corridor we'll be moving within
+            if (
+                (direction === Direction.Down || direction === Direction.Up) &&
+                Math.abs(n.x - nodeToPlace.x) > radius
+            ) {
+                return false;
+            }
+            if (
+                (direction === Direction.Left || direction === Direction.Right) &&
+                Math.abs(n.y - nodeToPlace.y) > radius
+            ) {
+                return false;
+            }
+
+            // Exclude nodes in the wrong direction
+            return !(
+                (direction === Direction.Right && n.x < nodeToPlace.x - radius) ||
+                (direction === Direction.Left && n.x > nodeToPlace.x + radius) ||
+                (direction === Direction.Up && n.y > nodeToPlace.y + radius) ||
+                (direction === Direction.Down && n.y < nodeToPlace.y - radius)
+            );
+        })
+        .sort(
+            direction === Direction.Right
+                ? (a, b) => a.x - b.x
+                : direction === Direction.Left
+                ? (a, b) => b.x - a.x
+                : direction === Direction.Up
+                ? (a, b) => b.y - a.y
+                : (a, b) => a.y - b.y
+        );
+
+    for (let i = 0; i < nodes.length; i++) {
+        const nodeToCheck = nodes[i];
+        const distance =
+            direction === Direction.Right || direction === Direction.Left
+                ? Math.abs(nodeToPlace.x - nodeToCheck.x)
+                : Math.abs(nodeToPlace.y - nodeToCheck.y);
+
+        // If we're too close to this node, move further
+        // Keep in mind positions start at top right, so "down" means increasing Y
+        if (distance < radius) {
+            if (direction === Direction.Right) {
+                nodeToPlace.x = nodeToCheck.x + radius;
+            } else if (direction === Direction.Left) {
+                nodeToPlace.x = nodeToCheck.x - radius;
+            } else if (direction === Direction.Up) {
+                nodeToPlace.y = nodeToCheck.y - radius;
+            } else if (direction === Direction.Down) {
+                nodeToPlace.y = nodeToCheck.y + radius;
+            }
+        } else if (i > 0 && distance > radius) {
+            // If we're further from this node than the radius, then the nodes are past us and we can early exit
+            break;
+        }
+    }
+}

tests/features/board.test.ts

@@ -0,0 +1,108 @@
+import {
+    NodePosition,
+    placeInAvailableSpace,
+    setupUniqueIds,
+    unwrapNodeRef
+} from "game/boards/board";
+import { beforeEach, describe, expect, test } from "vitest";
+import { Ref, ref } from "vue";
+import "../utils";
+import { Direction } from "util/common";
+
+describe("Unwraps node refs", () => {
+    test("Static value", () => expect(unwrapNodeRef(100, {})).toBe(100));
+    test("Ref value", () => expect(unwrapNodeRef(ref(100), {})).toBe(100));
+    test("0 param function value", () => expect(unwrapNodeRef(() => 100, {})).toBe(100));
+    test("1 param function value", () => {
+        const actualNode = { foo: "bar" };
+        expect(
+            unwrapNodeRef(function (node) {
+                if (node === actualNode) {
+                    return true;
+                }
+                return false;
+            }, actualNode)
+        ).toBe(true);
+    });
+});
+
+describe("Set up unique IDs", () => {
+    let nodes: Ref<{ id: number }[]>, nextId: Ref<number>;
+    beforeEach(() => {
+        nodes = ref([]);
+        nextId = setupUniqueIds(nodes);
+    });
+    test("Starts at 0", () => expect(nextId?.value).toBe(0));
+    test("Calculates initial value properly", () => {
+        nodes.value = [{ id: 0 }, { id: 1 }, { id: 2 }];
+        expect(nextId.value).toBe(3);
+    });
+    test("Non consecutive IDs", () => {
+        nodes.value = [{ id: -5 }, { id: 0 }, { id: 200 }];
+        expect(nextId.value).toBe(201);
+    });
+    test("After modification", () => {
+        nodes.value = [{ id: 0 }, { id: 1 }, { id: 2 }];
+        nodes.value.push({ id: nextId.value });
+        expect(nextId.value).toBe(4);
+    });
+});
+
+describe("Place in available space", () => {
+    let nodes: Ref<NodePosition[]>, node: NodePosition;
+    beforeEach(() => {
+        nodes = ref([]);
+        node = { x: 10, y: 20 };
+    });
+    test("No nodes", () => {
+        placeInAvailableSpace(node, nodes.value);
+        expect(node).toMatchObject({ x: 10, y: 20 });
+    });
+    test("Moves node", () => {
+        nodes.value = [{ x: 10, y: 20 }];
+        placeInAvailableSpace(node, nodes.value);
+        expect(node).not.toMatchObject({ x: 10, y: 20 });
+    });
+    describe("Respects radius", () => {
+        test("Positions radius away", () => {
+            nodes.value = [{ x: 10, y: 20 }];
+            placeInAvailableSpace(node, nodes.value, 32);
+            expect(node).toMatchObject({ x: 42, y: 20 });
+        });
+        test("Ignores node already radius away", () => {
+            nodes.value = [{ x: 42, y: 20 }];
+            placeInAvailableSpace(node, nodes.value, 32);
+            expect(node).toMatchObject({ x: 10, y: 20 });
+        });
+        test("Doesn't ignore node just under radius away", () => {
+            nodes.value = [{ x: 41, y: 20 }];
+            placeInAvailableSpace(node, nodes.value, 32);
+            expect(node).not.toMatchObject({ x: 10, y: 20 });
+        });
+    });
+    describe("Respects direction", () => {
+        test("Goes left", () => {
+            nodes.value = [{ x: 10, y: 20 }];
+            placeInAvailableSpace(node, nodes.value, 10, Direction.Left);
+            expect(node).toMatchObject({ x: 0, y: 20 });
+        });
+        test("Goes up", () => {
+            nodes.value = [{ x: 10, y: 20 }];
+            placeInAvailableSpace(node, nodes.value, 10, Direction.Up);
+            expect(node).toMatchObject({ x: 10, y: 10 });
+        });
+        test("Goes down", () => {
+            nodes.value = [{ x: 10, y: 20 }];
+            placeInAvailableSpace(node, nodes.value, 10, Direction.Down);
+            expect(node).toMatchObject({ x: 10, y: 30 });
+        });
+    });
+    test("Finds hole", () => {
+        nodes.value = [
+            { x: 10, y: 20 },
+            { x: 30, y: 20 }
+        ];
+        placeInAvailableSpace(node, nodes.value, 10);
+        expect(node).toMatchObject({ x: 20, y: 20 });
+    });
+});