Filter resource lines

src/data/boardUtils.tsx

@@ -15,6 +15,7 @@ import {
 import { main } from "./projEntry";
 import { DecimalSource } from "lib/break_eternity";
 import { ComputedRef } from "vue";
+import settings from "game/settings";
 
 export const resourceLevelFormula = Formula.variable(0)
     .step(2000, x => x.pow_base(1.02))
@@ -391,3 +392,11 @@ export function showHelpAction(help: keyof (typeof main)["helpModals"]) {
         confirmationLabel: null
     };
 }
+
+export function resourceLinesFilter(node: BoardNode) {
+    return (resource: Resources) =>
+        settings.lineVisibility ||
+        node === main.board.selectedNode.value ||
+        node === main.board.draggingNode.value ||
+        main.resourceNodes.value[resource] === main.board.draggingNode.value;
+}

src/data/help.tsx

@@ -5,6 +5,8 @@ import { createTabFamily } from "features/tabs/tabFamily";
 import { Persistent, persistent } from "game/persistence";
 import { renderJSX } from "util/vue";
 import { main } from "./projEntry";
+import ToggleVue from "components/fields/Toggle.vue";
+import settings from "game/settings";
 
 export interface ModalData {
     modal: JSXFunction;
@@ -163,6 +165,22 @@ export function getPortalHelp() {
                             active will no longer work. This can be used to keep your workspace
                             clean from old portals you no longer need or want.
                         </p>
+                        <br />
+                        <p>
+                            Once you have portals, the lines on the board might getting particularly
+                            necessary. Here's a setting (also accessible in the settings modal) to
+                            disable resource gain lines unless the node is active.
+                        </p>
+                        <br />
+                        <ToggleVue
+                            title={jsx(() => (
+                                <span class="option-title">
+                                    Always show lines to resource nodes
+                                </span>
+                            ))}
+                            modelValue={settings.lineVisibility}
+                            onUpdate:modelValue={value => (settings.lineVisibility = value)}
+                        />
                     </div>
                 ))
             }))

src/data/planes.tsx

@@ -75,7 +75,7 @@ const toast = useToast();
 
 export type Treasure = GenericAchievement & {
     update?: (diff: DecimalSource) => void;
-    link?: ComputedRef<BoardNode>;
+    link?: Resources;
     effectedResource?: Resources | "energy";
     resourceMulti: DecimalSource;
 };
@@ -973,7 +973,7 @@ export function createPlane(
             let description = "";
             let update: (diff: DecimalSource) => void;
             let onComplete: VoidFunction;
-            let link: ComputedRef<BoardNode>;
+            let link: Resources;
             let randomResource: Resources;
             let effectedResource: Resources | "energy";
             let resourceMulti: DecimalSource;
@@ -1004,7 +1004,7 @@ export function createPlane(
                         gain
                     )} ${randomResource}/s while plane is active.`;
                     update = diff => main.grantResource(randomResource, Decimal.times(diff, gain));
-                    link = computed(() => main.resourceNodes.value[randomResource]);
+                    link = randomResource;
                     break;
                 case "resourceMulti":
                     effectedResource = randomResource = getRandomResource(random, influences);
@@ -1300,7 +1300,7 @@ export function createPlane(
         );
 
         const links = computed(() => {
-            const links: ComputedRef<BoardNode>[] = [];
+            const links: Resources[] = [];
             earnedTreasures.value.forEach(treasure => {
                 if (treasure.link) {
                     links.push(treasure.link);

src/data/projEntry.tsx

@@ -7,7 +7,7 @@ import {
     createBoard,
     getUniqueNodeID
 } from "features/boards/board";
-import { jsx } from "features/feature";
+import { jsx, setDefault } from "features/feature";
 import { createResource } from "features/resources/resource";
 import { createTabFamily } from "features/tabs/tabFamily";
 import Formula from "game/formulas/formulas";
@@ -22,7 +22,7 @@ import {
 import { DefaultValue, State } from "game/persistence";
 import type { LayerData, Player } from "game/player";
 import player from "game/player";
-import settings from "game/settings";
+import settings, { registerSettingField } from "game/settings";
 import Decimal, { DecimalSource, format, formatSmall, formatWhole } from "util/bignum";
 import { WithRequired, camelToTitle } from "util/common";
 import { render } from "util/vue";
@@ -33,6 +33,7 @@ import {
     isEmpowered,
     isPowered,
     resourceLevelFormula,
+    resourceLinesFilter,
     togglePoweredAction
 } from "./boardUtils";
 import { Section, createCollapsibleModifierSections, createFormulaPreview } from "./common";
@@ -90,6 +91,8 @@ import {
     upgrader
 } from "./nodeTypes";
 import { GenericPlane, createPlane } from "./planes";
+import { globalBus } from "game/events";
+import ToggleVue from "components/fields/Toggle.vue";
 
 const toast = useToast();
 
@@ -262,12 +265,14 @@ export const main = createLayer("main", function (this: BaseLayer) {
         links() {
             const links: BoardNodeLink[] = [];
             links.push(
-                ...Object.keys(resourceMinedCooldown).map(resource => ({
+                ...(Object.keys(resourceMinedCooldown) as Resources[])
-                    startNode: mine.value,
+                    .filter(resourceLinesFilter(mine.value))
-                    endNode: resourceNodes.value[resource as Resources],
+                    .map(resource => ({
-                    stroke: "var(--accent3)",
+                        startNode: mine.value,
-                    strokeWidth: 5
+                        endNode: resourceNodes.value[resource as Resources],
-                }))
+                        stroke: "var(--accent3)",
+                        strokeWidth: 5
+                    }))
             );
             if (factory.value != null && factory.value.state != null) {
                 links.push({
@@ -295,21 +300,14 @@ export const main = createLayer("main", function (this: BaseLayer) {
                         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                         startNode: quarry.value!,
                         endNode: resourceNodes.value[resource],
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        stroke:
-                        stroke: "var(--foreground)",
+                            resource in resourceQuarriedCooldown
+                                ? "var(--accent3)"
+                                : "var(--foreground)",
                         strokeWidth: 4
                     });
                 });
             }
-            links.push(
-                ...Object.keys(resourceQuarriedCooldown).map(resource => ({
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    startNode: quarry.value!,
-                    endNode: resourceNodes.value[resource as Resources],
-                    stroke: "var(--accent3)",
-                    strokeWidth: 5
-                }))
-            );
             if (empowerer.value != null) {
                 (empowerer.value.state as unknown as EmpowererState).tools.forEach(tool => {
                     links.push({
@@ -345,30 +343,22 @@ export const main = createLayer("main", function (this: BaseLayer) {
                 });
                 (board as GenericBoard).types.portal.nodes.value.forEach(node => {
                     const plane = layers[(node.state as unknown as PortalState).id] as GenericPlane;
-                    plane.links.value.forEach(n => {
+                    resourceNames.filter(resourceLinesFilter(node)).forEach(resource => {
-                        if (n.value != null) {
+                        let color;
-                            links.push({
+                        if (plane.links.value.includes(resource)) {
-                                startNode: node,
+                            color = "var(--accent3)";
-                                endNode: n.value,
+                        } else if (resource in plane.resourceMultis.value) {
-                                stroke: isPowered(node) ? "var(--accent3)" : "var(--foreground)",
+                            color = "var(--accent1)";
-                                strokeWidth: 4
+                        } else {
-                            });
+                            return;
                         }
+                        links.push({
+                            startNode: node,
+                            endNode: resourceNodes.value[resource],
+                            stroke: isPowered(node) ? color : "var(--foreground)",
+                            strokeWidth: 4
+                        });
                     });
-                    (Object.keys(plane.resourceMultis.value) as (Resources | "energy")[]).forEach(
-                        type => {
-                            if (type !== "energy" && type in resourceNodes.value) {
-                                links.push({
-                                    startNode: node,
-                                    endNode: resourceNodes.value[type],
-                                    stroke: isPowered(node)
-                                        ? "var(--accent1)"
-                                        : "var(--foreground)",
-                                    strokeWidth: 4
-                                });
-                            }
-                        }
-                    );
                     return links;
                 });
             }
@@ -1045,6 +1035,33 @@ export const main = createLayer("main", function (this: BaseLayer) {
     };
 });
 
+declare module "game/settings" {
+    interface Settings {
+        lineVisibility: boolean;
+    }
+}
+
+globalBus.on("loadSettings", settings => {
+    setDefault(settings, "lineVisibility", true);
+});
+
+registerSettingField(
+    jsx(() => (
+        <ToggleVue
+            title={jsx(() => (
+                <span class="option-title">
+                    Always show lines to resource nodes
+                    <desc>
+                        Otherwise, will only be visible when either end of the line is selected.
+                    </desc>
+                </span>
+            ))}
+            modelValue={settings.lineVisibility}
+            onUpdate:modelValue={value => (settings.lineVisibility = value)}
+        />
+    ))
+);
+
 /**
  * Given a player save data object being loaded, return a list of layers that should currently be enabled.
  * If your project does not use dynamic layers, this should just return all layers.