Added diamond shaped nodes

src/components/board/BoardNode.vue

@@ -7,31 +7,79 @@
         @mouseleave="mouseLeave"
         @mousedown="e => $emit('startDragging', e, node.id)"
     >
-        <circle
-            v-if="canAccept"
-            :r="size + 8"
-            :fill="backgroundColor"
-            :stroke="receivingNode ? '#0F0' : '#0F03'"
-            :stroke-width="2"
-        />
+        <g v-if="shape === Shape.Circle">
+            <circle
+                v-if="canAccept"
+                :r="size + 8"
+                :fill="backgroundColor"
+                :stroke="receivingNode ? '#0F0' : '#0F03'"
+                :stroke-width="2"
+            />
 
-        <circle :r="size" :fill="fillColor" :stroke="outlineColor" :stroke-width="4" />
+            <circle :r="size" :fill="fillColor" :stroke="outlineColor" :stroke-width="4" />
 
-        <circle
-            v-if="progressDisplay === ProgressDisplay.Fill"
-            :r="size * progress"
-            :fill="progressColor"
-        />
-        <circle
-            v-else
-            :r="size + 4.5"
-            class="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"
-        />
+            <circle
+                v-if="progressDisplay === ProgressDisplay.Fill"
+                :r="Math.max(size * progress - 2, 0)"
+                :fill="progressColor"
+            />
+            <circle
+                v-else
+                :r="size + 4.5"
+                class="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"
+                :width="size + 16"
+                :height="size + 16"
+                :transform="`translate(${-(size + 16) / 2}, ${-(size + 16) / 2})`"
+                :fill="backgroundColor"
+                :stroke="receivingNode ? '#0F0' : '#0F03'"
+                :stroke-width="2"
+            />
+
+            <rect
+                :width="size"
+                :height="size"
+                :transform="`translate(${-size / 2}, ${-size / 2})`"
+                :fill="fillColor"
+                :stroke="outlineColor"
+                :stroke-width="4"
+            />
+
+            <rect
+                v-if="progressDisplay === ProgressDisplay.Fill"
+                :width="Math.max(size * progress - 2, 0)"
+                :height="Math.max(size * progress - 2, 0)"
+                :transform="
+                    `translate(${-Math.max(size * progress - 2, 0) / 2}, ${-Math.max(
+                        size * progress - 2,
+                        0
+                    ) / 2})`
+                "
+                :fill="progressColor"
+            />
+            <rect
+                v-else
+                :width="size + 9"
+                :height="size + 9"
+                :transform="`translate(${-(size + 9) / 2}, ${-(size + 9) / 2})`"
+                fill="transparent"
+                :stroke-dasharray="(size + 9) * 4"
+                :stroke-width="5"
+                :stroke-dashoffset="(size + 9) * 4 - progress * (size + 9) * 4"
+                :stroke="progressColor"
+            />
+        </g>
 
         <text :fill="titleColor" class="node-title">{{ title }}</text>
     </g>
@@ -39,7 +87,7 @@
 
 <script lang="ts">
 import themes from "@/data/themes";
-import { ProgressDisplay } from "@/game/enums";
+import { ProgressDisplay, Shape } from "@/game/enums";
 import player from "@/game/player";
 import { BoardNode, NodeType } from "@/typings/features/board";
 import { getNodeTypeProperty } from "@/util/features";
@@ -52,6 +100,7 @@ export default defineComponent({
     data() {
         return {
             ProgressDisplay,
+            Shape,
             lastMousePosition: { x: 0, y: 0 },
             hovering: false
         };
@@ -90,6 +139,9 @@ export default defineComponent({
                   }
                 : this.node.position;
         },
+        shape(): Shape {
+            return getNodeTypeProperty(this.nodeType, this.node, "shape");
+        },
         size(): number {
             let size: number = getNodeTypeProperty(this.nodeType, this.node, "size");
             if (this.receivingNode) {

src/data/layers/main.ts

@@ -1,6 +1,8 @@
+import { ProgressDisplay, Shape } from "@/game/enums";
 import player from "@/game/player";
 import Decimal, { DecimalSource } from "@/lib/break_eternity";
 import { RawLayer } from "@/typings/layer";
+import { camelToTitle } from "@/util/common";
 import themes from "../themes";
 
 type ResourceNodeData = {
@@ -14,6 +16,10 @@ type ItemNodeData = {
     amount: DecimalSource;
 };
 
+type ActionNodeData = {
+    actionType: string;
+};
+
 export default {
     id: "main",
     display: `
@@ -21,7 +27,15 @@ export default {
         <div v-else-if="player.devSpeed && player.devSpeed !== 1">Dev Speed: {{ format(player.devSpeed) }}x</div>
         <div>TODO: Board</div>
         <Board id="main" />
+
     `,
+    startData() {
+        return {
+            openNode: null
+        } as {
+            openNode: string | null;
+        };
+    },
     minimizable: false,
     componentStyles: {
         board: {
@@ -52,6 +66,13 @@ export default {
                                 itemType: "speed",
                                 amount: new Decimal(5 * 60 * 60)
                             }
+                        },
+                        {
+                            position: { x: -150, y: 150 },
+                            type: "action",
+                            data: {
+                                actionType: "browse"
+                            }
                         }
                     ];
                 },
@@ -92,6 +113,24 @@ export default {
                             return (node.data as ItemNodeData).itemType;
                         },
                         draggable: true
+                    },
+                    action: {
+                        title(node) {
+                            return camelToTitle((node.data as ActionNodeData).actionType);
+                        },
+                        tooltip(node) {
+                            switch ((node.data as ActionNodeData).actionType) {
+                                default:
+                                    return camelToTitle((node.data as ActionNodeData).actionType);
+                                case "browse":
+                                    return "Browse the internet";
+                            }
+                        },
+                        draggable: false,
+                        shape: Shape.Diamond,
+                        size: 100,
+                        progressColor: "#0FF3",
+                        progressDisplay: ProgressDisplay.Outline
                     }
                 }
             }

src/game/enums.ts

@@ -33,3 +33,8 @@ export enum ProgressDisplay {
     Outline = "Outline",
     Fill = "Fill"
 }
+
+export enum Shape {
+    Circle = "Circle",
+    Diamond = "Triangle"
+}

src/game/layers.ts

@@ -34,7 +34,7 @@ import { createGridProxy, createLayerProxy } from "@/util/proxies";
 import { applyPlayerData } from "@/util/save";
 import clone from "lodash.clonedeep";
 import { isRef } from "vue";
-import { ProgressDisplay } from "./enums";
+import { ProgressDisplay, Shape } from "./enums";
 import { default as playerProxy } from "./player";
 
 export const layers: Record<string, Readonly<Layer>> = {};
@@ -438,6 +438,7 @@ export function addLayer(layer: RawLayer, player?: Partial<PlayerData>): void {
                 layer.boards.data[id].types[nodeType].type = nodeType;
                 setDefault(layer.boards.data[id].types[nodeType], "size", 50);
                 setDefault(layer.boards.data[id].types[nodeType], "draggable", false);
+                setDefault(layer.boards.data[id].types[nodeType], "shape", Shape.Circle);
                 setDefault(layer.boards.data[id].types[nodeType], "canAccept", false);
                 setDefault(
                     layer.boards.data[id].types[nodeType],

src/typings/features/board.d.ts

@@ -1,3 +1,4 @@
+import { Shape } from "@/game/enums";
 import { DecimalSource } from "@/lib/break_eternity";
 import { State } from "../state";
 import { Feature, RawFeature } from "./feature";
@@ -35,6 +36,7 @@ export interface NodeType extends Feature {
     title: string | ((node: BoardNode) => string);
     size: number | ((node: BoardNode) => number);
     draggable: boolean | ((node: BoardNode) => boolean);
+    shape: Shape | ((node: BoardNode) => Shape);
     canAccept: boolean | ((node: BoardNode, otherNode: BoardNode) => boolean);
     progress?: number | ((node: BoardNode) => number);
     progressDisplay: ProgressDisplay | ((node: BoardNode) => ProgressDisplay);