Implemented pinning resource amounts

src/components/board/BoardNode.vue

@@ -310,10 +310,9 @@ export default defineComponent({
             this.hovering = false;
         },
         performAction(e: MouseEvent, action: BoardNodeAction) {
-            action.onClick(this.node);
             // If the onClick function made this action selected,
             // don't propagate the event (which will deselect everything)
-            if (this.board.selectedAction === action) {
+            if (action.onClick(this.node) || this.board.selectedAction === action) {
                 e.preventDefault();
                 e.stopPropagation();
             }

src/data/layers/main.ts

@@ -2,6 +2,7 @@ import { ProgressDisplay, Shape } from "@/game/enums";
 import { layers } from "@/game/layers";
 import player from "@/game/player";
 import Decimal, { DecimalSource } from "@/lib/break_eternity";
+import { BoardNodeAction } from "@/typings/features/board";
 import { RawLayer } from "@/typings/layer";
 import { formatTime } from "@/util/bignum";
 import { format, formatWhole } from "@/util/break_eternity";
@@ -147,6 +148,22 @@ for (const resource in links) {
     );
 }
 
+const pinAction = {
+    id: "pin",
+    icon: "push_pin",
+    fillColor(node) {
+        if (node.pinned) {
+            return themes[player.theme].variables["--bought"];
+        }
+        return themes[player.theme].variables["--secondary-background"];
+    },
+    tooltip: "Always show resource",
+    onClick(node) {
+        node.pinned = !node.pinned;
+        return true;
+    }
+} as BoardNodeAction;
+
 export default {
     id: "main",
     display: Main,
@@ -233,22 +250,29 @@ export default {
                             return (node.data as ResourceNodeData).resourceType;
                         },
                         label(node) {
-                            if (player.layers[this.layer].boards[this.id].selectedNode == node.id) {
-                                const data = node.data as ResourceNodeData;
-                                if (data.resourceType === "time") {
-                                    return { text: formatTime(data.amount), color: "#0FF3" };
-                                }
-                                if (Decimal.eq(data.maxAmount, 100)) {
-                                    return { text: formatWhole(data.amount) + "%", color: "#0FF3" };
-                                }
-                                return { text: format(data.amount), color: "#0FF3" };
-                            }
-                            if (player.layers[this.layer].boards[this.id].selectedNode == null) {
-                                return null;
-                            }
                             const selectedNode = layers[this.layer].boards!.data[this.id]
                                 .selectedNode;
-                            if (selectedNode.type === "resource") {
+                            if (
+                                selectedNode != node &&
+                                player.layers[this.layer].boards[this.id].selectedAction != null
+                            ) {
+                                const action =
+                                    player.layers[this.layer].boards[this.id].selectedAction;
+                                switch (action) {
+                                    case "reddit":
+                                        if (
+                                            (node.data as ResourceNodeData).resourceType === "time"
+                                        ) {
+                                            return { text: "30m", color: "red", pulsing: true };
+                                        }
+                                        break;
+                                }
+                            }
+                            if (
+                                selectedNode != node &&
+                                selectedNode != null &&
+                                selectedNode.type === "resource"
+                            ) {
                                 const data = selectedNode.data as ResourceNodeData;
                                 if (data.resourceType in links) {
                                     const link = links[data.resourceType].find(
@@ -280,18 +304,15 @@ export default {
                                     }
                                 }
                             }
-                            if (player.layers[this.layer].boards[this.id].selectedAction == null) {
+                            if (selectedNode == node || node.pinned) {
-                                return null;
+                                const data = node.data as ResourceNodeData;
+                                if (data.resourceType === "time") {
+                                    return { text: formatTime(data.amount), color: "#0FF3" };
                                 }
-                            const action = player.layers[this.layer].boards[this.id].selectedAction;
+                                if (Decimal.eq(data.maxAmount, 100)) {
-                            switch (action) {
+                                    return { text: formatWhole(data.amount) + "%", color: "#0FF3" };
-                                default:
-                                    return null;
-                                case "reddit":
-                                    if ((node.data as ResourceNodeData).resourceType === "time") {
-                                        return { text: "30m", color: "red", pulsing: true };
                                 }
-                                    return null;
+                                return { text: format(data.amount), color: "#0FF3" };
                             }
                         },
                         draggable: true,
@@ -317,7 +338,8 @@ export default {
                                 (node.data as ResourceNodeData).amount,
                                 (otherNode.data as ItemNodeData).amount
                             ).min((node.data as ResourceNodeData).maxAmount);
-                        }
+                        },
+                        actions: [pinAction]
                     },
                     item: {
                         title(node) {
@@ -329,7 +351,10 @@ export default {
                             }
                         },
                         label(node) {
-                            if (player.layers[this.layer].boards[this.id].selectedNode == node.id) {
+                            if (
+                                player.layers[this.layer].boards[this.id].selectedNode == node.id ||
+                                node.pinned
+                            ) {
                                 const data = node.data as ItemNodeData;
                                 if (data.itemType === "time") {
                                     return { text: formatTime(data.amount), color: "#0FF3" };
@@ -337,7 +362,8 @@ export default {
                                 return { text: format(data.amount), color: "#0FF3" };
                             }
                         },
-                        draggable: true
+                        draggable: true,
+                        actions: [pinAction]
                     },
                     action: {
                         title(node) {

src/typings/features/board.d.ts

@@ -11,6 +11,7 @@ export interface BoardNode {
     };
     type: string;
     data?: State;
+    pinned?: boolean;
 }
 
 export interface BoardData {
@@ -62,7 +63,7 @@ export interface BoardNodeAction {
     icon: string | ((node: BoardNode) => string);
     fillColor?: string | ((node: BoardNode) => string);
     tooltip: string | ((node: BoardNode) => string);
-    onClick: (node: BoardNode) => void;
+    onClick: (node: BoardNode) => boolean | undefined;
     links?: BoardNodeLink[] | ((node: BoardNode) => BoardNodeLink[]);
 }
 

src/util/proxies.ts

@@ -30,7 +30,7 @@ function travel(
     objectProxy: Record<string, any>
 ) {
     for (const key in object) {
-        if (object[key] == undefined || object[key].isProxy) {
+        if (object[key] == undefined || object[key].isProxy || isRef(object[key])) {
             continue;
         }
         if (isFunction(object[key])) {