@@ -22,9 +24,8 @@ import AddictionWarning from "components/modals/AddictionWarning.vue";
import CloudSaveResolver from "components/modals/CloudSaveResolver.vue";
import GameOverScreen from "components/modals/GameOverScreen.vue";
import NaNScreen from "components/modals/NaNScreen.vue";
-import { jsx } from "features/feature";
import state from "game/state";
-import { coerceComponent, render } from "util/vue";
+import { render } from "util/vue";
import type { CSSProperties } from "vue";
import { computed, toRef, unref } from "vue";
import Game from "./components/Game.vue";
@@ -40,9 +41,7 @@ const theme = computed(() => themes[settings.theme].variables as CSSProperties);
const showTPS = toRef(settings, "showTPS");
const appErrors = toRef(state, "errors");
-const gameComponent = computed(() => {
- return coerceComponent(jsx(() => (<>{gameComponents.map(render)})));
-});
+const GameComponent = () => gameComponents.map(c => render(c));
\ No newline at end of file
+
diff --git a/src/data/common.css b/src/data/common.css
index 728c160..1d13f96 100644
--- a/src/data/common.css
+++ b/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));
+}
diff --git a/src/data/common.tsx b/src/data/common.tsx
index c1286a2..8ed0c01 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -1,64 +1,58 @@
import Collapsible from "components/layout/Collapsible.vue";
-import { GenericAchievement } from "features/achievements/achievement";
-import type { Clickable, ClickableOptions, GenericClickable } from "features/clickables/clickable";
+import { Achievement } from "features/achievements/achievement";
+import type { Clickable, ClickableOptions } from "features/clickables/clickable";
import { createClickable } from "features/clickables/clickable";
-import type { GenericConversion } from "features/conversion";
-import type { CoercableComponent, JSXFunction, OptionsFunc, Replace } from "features/feature";
-import { jsx, setDefault } from "features/feature";
-import { Resource, displayResource } from "features/resources/resource";
-import type { GenericTree, GenericTreeNode, TreeNode, TreeNodeOptions } from "features/trees/tree";
+import { Conversion } from "features/conversion";
+import { getFirstFeature, type OptionsFunc, type Replace } from "features/feature";
+import { displayResource, Resource } from "features/resources/resource";
+import type { Tree, TreeNode, TreeNodeOptions } from "features/trees/tree";
import { createTreeNode } from "features/trees/tree";
import type { GenericFormula } from "game/formulas/types";
import { BaseLayer } from "game/layers";
-import type { Modifier } from "game/modifiers";
+import { Modifier } from "game/modifiers";
import type { Persistent } from "game/persistence";
import { DefaultValue, persistent } from "game/persistence";
import player from "game/player";
import settings from "game/settings";
import type { DecimalSource } from "util/bignum";
import Decimal, { format, formatSmall, formatTime } from "util/bignum";
-import { WithRequired, camelToTitle } from "util/common";
-import type {
- Computable,
- GetComputableType,
- GetComputableTypeWithDefault,
- ProcessedComputable
-} from "util/computed";
-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 { WithRequired } from "util/common";
+import { processGetter } from "util/computed";
+import { render, Renderable, renderCol } from "util/vue";
+import type { ComputedRef, MaybeRef, MaybeRefOrGetter } from "vue";
+import { computed, ref, unref } from "vue";
+import { JSX } from "vue/jsx-runtime";
import "./common.css";
/** An object that configures a {@link ResetButton} */
export interface ResetButtonOptions extends ClickableOptions {
/** The conversion the button uses to calculate how much resources will be gained on click */
- conversion: GenericConversion;
+ conversion: Conversion;
/** The tree this reset button is apart of */
- tree: GenericTree;
+ tree: Tree;
/** The specific tree node associated with this reset button */
- treeNode: GenericTreeNode;
+ treeNode: TreeNode;
/**
* Text to display on low conversion amounts, describing what "resetting" is in this context.
* Defaults to "Reset for ".
*/
- resetDescription?: Computable;
+ resetDescription?: MaybeRefOrGetter;
/** Whether or not to show how much currency would be required to make the gain amount increase. */
- showNextAt?: Computable;
+ showNextAt?: MaybeRefOrGetter;
/**
* The content to display on the button.
* By default, this includes the reset description, and amount of currency to be gained.
*/
- display?: Computable;
+ display?: MaybeRefOrGetter;
/**
* Whether or not this button can currently be clicked.
* Defaults to checking the current gain amount is greater than {@link minimumGain}
*/
- canClick?: Computable;
+ canClick?: MaybeRefOrGetter;
/**
* When {@link canClick} is left to its default, minimumGain is used to only enable the reset button when a sufficient amount of currency to gain is available.
*/
- minimumGain?: Computable;
+ minimumGain?: MaybeRefOrGetter;
/** A persistent ref to track how much time has passed since the last time this tree node was reset. */
resetTime?: Persistent;
}
@@ -68,27 +62,12 @@ export interface ResetButtonOptions extends ClickableOptions {
* It will show how much can be converted currently, and can show when that amount will go up, as well as handle only being clickable when a sufficient amount of currency can be gained.
* Assumes this button is associated with a specific node on a tree, and triggers that tree's reset propagation.
*/
-export type ResetButton = Replace<
- Clickable,
+export type ResetButton = Replace<
+ Clickable,
{
- resetDescription: GetComputableTypeWithDefault>;
- showNextAt: GetComputableTypeWithDefault;
- display: GetComputableTypeWithDefault>;
- canClick: GetComputableTypeWithDefault>;
- minimumGain: GetComputableTypeWithDefault;
- onClick: (event?: MouseEvent | TouchEvent) => void;
- }
->;
-
-/** A type that matches any valid {@link ResetButton} object. */
-export type GenericResetButton = Replace<
- GenericClickable & ResetButton,
- {
- resetDescription: ProcessedComputable;
- showNextAt: ProcessedComputable;
- display: ProcessedComputable;
- canClick: ProcessedComputable;
- minimumGain: ProcessedComputable;
+ resetDescription: MaybeRef;
+ showNextAt: MaybeRef;
+ minimumGain: MaybeRef;
}
>;
@@ -98,78 +77,87 @@ export type GenericResetButton = Replace<
*/
export function createResetButton(
optionsFunc: OptionsFunc
-): ResetButton {
- return createClickable(feature => {
- const resetButton = optionsFunc.call(feature, feature);
+) {
+ const resetButton = createClickable(feature => {
+ const options = optionsFunc.call(feature, feature);
+ const {
+ conversion,
+ tree,
+ treeNode,
+ resetTime,
+ resetDescription,
+ showNextAt,
+ minimumGain,
+ display,
+ canClick,
+ onClick,
+ ...props
+ } = options;
- processComputable(resetButton as T, "showNextAt");
- setDefault(resetButton, "showNextAt", true);
- setDefault(resetButton, "minimumGain", 1);
-
- if (resetButton.resetDescription == null) {
- resetButton.resetDescription = computed(() =>
- Decimal.lt(resetButton.conversion.gainResource.value, 1e3) ? "Reset for " : ""
- );
- } else {
- processComputable(resetButton as T, "resetDescription");
- }
-
- if (resetButton.display == null) {
- resetButton.display = jsx(() => (
-
- {unref(resetButton.resetDescription as ProcessedComputable)}
-
- {displayResource(
- resetButton.conversion.gainResource,
- Decimal.max(
- unref(resetButton.conversion.actualGain),
- unref(resetButton.minimumGain as ProcessedComputable)
- )
- )}
- {" "}
- {resetButton.conversion.gainResource.displayName}
- {unref(resetButton.showNextAt) != null ? (
-
-
diff --git a/src/features/boards/BoardLink.vue b/src/features/boards/BoardLink.vue
deleted file mode 100644
index 5dacc66..0000000
--- a/src/features/boards/BoardLink.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/features/boards/BoardNode.vue b/src/features/boards/BoardNode.vue
deleted file mode 100644
index 6a32f37..0000000
--- a/src/features/boards/BoardNode.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ title }}
-
-
-
-
- {{ label.text }}
-
-
-
-
-
- {{ confirmationLabel.text }}
-
-
-
-
-
-
-
-
-
diff --git a/src/features/boards/BoardNodeAction.vue b/src/features/boards/BoardNodeAction.vue
deleted file mode 100644
index c65727a..0000000
--- a/src/features/boards/BoardNodeAction.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-
-
-
-
-
- {{
- getNodeProperty(action.icon, node)
- }}
-
-
-
-
-
-
-
-
-
-
diff --git a/src/features/boards/board.ts b/src/features/boards/board.ts
deleted file mode 100644
index 8a9026f..0000000
--- a/src/features/boards/board.ts
+++ /dev/null
@@ -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 =
- | Computable
- | ((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 {
- 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;
- /** An optional label for the node. */
- label?: NodeComputable;
- /** The size of the node - diameter for circles, width and height for squares. */
- size: NodeComputable;
- /** CSS to apply to this node. */
- style?: NodeComputable;
- /** Dictionary of CSS classes to apply to this node. */
- classes?: NodeComputable>;
- /** Whether the node is draggable or not. */
- draggable?: NodeComputable;
- /** The shape of the node. */
- shape: NodeComputable;
- /** Whether the node can accept another node being dropped upon it. */
- canAccept?: NodeComputable;
- /** The progress value of the node, from 0 to 1. */
- progress?: NodeComputable;
- /** How the progress should be displayed on the node. */
- progressDisplay?: NodeComputable;
- /** The color of the progress indicator. */
- progressColor?: NodeComputable;
- /** The fill color of the node. */
- fillColor?: NodeComputable;
- /** The outline color of the node. */
- outlineColor?: NodeComputable;
- /** The color of the title text. */
- titleColor?: NodeComputable;
- /** The list of action options for the node. */
- actions?: BoardNodeActionOptions[];
- /** The arc between each action, in radians. */
- actionDistance?: NodeComputable;
- /** 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;
-}
-
-/** 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 = Replace<
- T & BaseNodeType,
- {
- title: GetComputableType;
- label: GetComputableType;
- size: GetComputableTypeWithDefault;
- style: GetComputableType;
- classes: GetComputableType;
- draggable: GetComputableTypeWithDefault;
- shape: GetComputableTypeWithDefault;
- canAccept: GetComputableTypeWithDefault;
- progress: GetComputableType;
- progressDisplay: GetComputableTypeWithDefault;
- progressColor: GetComputableTypeWithDefault;
- fillColor: GetComputableType;
- outlineColor: GetComputableType;
- titleColor: GetComputableType;
- actions?: GenericBoardNodeAction[];
- actionDistance: GetComputableTypeWithDefault;
- }
->;
-
-/** A type that matches any valid {@link NodeType} object. */
-export type GenericNodeType = Replace<
- NodeType,
- {
- size: NodeComputable;
- draggable: NodeComputable;
- shape: NodeComputable;
- canAccept: NodeComputable;
- progressDisplay: NodeComputable;
- progressColor: NodeComputable;
- actionDistance: NodeComputable;
- }
->;
-
-/**
- * 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;
- /** The icon to display for the action. */
- icon: NodeComputable;
- /** The fill color of the action. */
- fillColor?: NodeComputable;
- /** The tooltip text to display for the action. */
- tooltip: NodeComputable;
- /** The confirmation label that appears under the action. */
- confirmationLabel?: NodeComputable;
- /** An array of board node links associated with the action. They appear when the action is focused. */
- links?: NodeComputable;
- /** 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;
-}
-
-/** An object that represents an action that can be taken upon a node. */
-export type BoardNodeAction = Replace<
- T & BaseBoardNodeAction,
- {
- visibility: GetComputableTypeWithDefault;
- icon: GetComputableType;
- fillColor: GetComputableType;
- tooltip: GetComputableType;
- confirmationLabel: GetComputableTypeWithDefault;
- links: GetComputableType;
- }
->;
-
-/** A type that matches any valid {@link BoardNodeAction} object. */
-export type GenericBoardNodeAction = Replace<
- BoardNodeAction,
- {
- visibility: NodeComputable;
- confirmationLabel: NodeComputable;
- }
->;
-
-/**
- * An object that configures a {@link Board}.
- */
-export interface BoardOptions {
- /** Whether this board should be visible. */
- visibility?: Computable;
- /** The height of the board. Defaults to 100% */
- height?: Computable;
- /** The width of the board. Defaults to 100% */
- width?: Computable;
- /** Dictionary of CSS classes to apply to this feature. */
- classes?: Computable>;
- /** CSS to apply to this feature. */
- style?: Computable;
- /** A function that returns an array of initial board nodes, without IDs. */
- startNodes: () => Omit[];
- /** A dictionary of node types that can appear on the board. */
- types: Record;
- /** The persistent state of the board. */
- state?: Computable;
- /** An array of board node links to display. */
- links?: Computable;
-}
-
-/**
- * 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;
- /** The currently selected node, if any. */
- selectedNode: Ref;
- /** The currently selected action, if any. */
- selectedAction: Ref;
- /** The currently being dragged node, if any. */
- draggingNode: Ref;
- /** If dragging a node, the node it's currently being hovered over, if any. */
- receivingNode: Ref;
- /** 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;
-}
-
-/** An object that represents a feature that is a zoomable, pannable board with various nodes upon it. */
-export type Board = Replace<
- T & BaseBoard,
- {
- visibility: GetComputableTypeWithDefault;
- types: Record;
- height: GetComputableType;
- width: GetComputableType;
- classes: GetComputableType;
- style: GetComputableType;
- state: GetComputableTypeWithDefault>;
- links: GetComputableTypeWithDefault>;
- }
->;
-
-/** A type that matches any valid {@link Board} object. */
-export type GenericBoard = Replace<
- Board,
- {
- visibility: ProcessedComputable;
- state: ProcessedComputable;
- links: ProcessedComputable;
- }
->;
-
-/**
- * Lazily creates a board with the given options.
- * @param optionsFunc Board options.
- */
-export function createBoard(
- optionsFunc: OptionsFunc
-): Board {
- const state = persistent(
- {
- 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 = 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;
- 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(
- property: NodeComputable,
- node: BoardNode,
- ...args: S
-): T {
- return isFunction>(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 = {};
-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;
-});
diff --git a/src/features/challenges/Challenge.vue b/src/features/challenges/Challenge.vue
index 194173c..23dcb55 100644
--- a/src/features/challenges/Challenge.vue
+++ b/src/features/challenges/Challenge.vue
@@ -1,20 +1,11 @@
-
-
-
+
-
diff --git a/src/features/trees/tree.ts b/src/features/trees/tree.ts
deleted file mode 100644
index 58c9db5..0000000
--- a/src/features/trees/tree.ts
+++ /dev/null
@@ -1,383 +0,0 @@
-import { GenericDecorator } from "features/decorators/common";
-import type {
- CoercableComponent,
- GenericComponent,
- OptionsFunc,
- Replace,
- StyleValue
-} from "features/feature";
-import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
-import type { Link } from "features/links/links";
-import type { GenericReset } from "features/reset";
-import type { Resource } from "features/resources/resource";
-import { displayResource } from "features/resources/resource";
-import TreeComponent from "features/trees/Tree.vue";
-import TreeNodeComponent from "features/trees/TreeNode.vue";
-import type { DecimalSource } from "util/bignum";
-import Decimal, { format, formatWhole } from "util/bignum";
-import type {
- Computable,
- GetComputableType,
- GetComputableTypeWithDefault,
- ProcessedComputable
-} from "util/computed";
-import { convertComputable, processComputable } from "util/computed";
-import { createLazyProxy } from "util/proxies";
-import type { Ref } from "vue";
-import { computed, ref, shallowRef, unref } from "vue";
-
-/** A symbol used to identify {@link TreeNode} features. */
-export const TreeNodeType = Symbol("TreeNode");
-/** A symbol used to identify {@link Tree} features. */
-export const TreeType = Symbol("Tree");
-
-/**
- * An object that configures a {@link TreeNode}.
- */
-export interface TreeNodeOptions {
- /** Whether this tree node should be visible. */
- visibility?: Computable;
- /** Whether or not this tree node can be clicked. */
- canClick?: Computable;
- /** The background color for this node. */
- color?: Computable;
- /** The label to display on this tree node. */
- display?: Computable;
- /** The color of the glow effect shown to notify the user there's something to do with this node. */
- glowColor?: Computable;
- /** Dictionary of CSS classes to apply to this feature. */
- classes?: Computable>;
- /** CSS to apply to this feature. */
- style?: Computable;
- /** Shows a marker on the corner of the feature. */
- mark?: Computable;
- /** A reset object attached to this node, used for propagating resets through the tree. */
- reset?: GenericReset;
- /** A function that is called when the tree node is clicked. */
- onClick?: (e?: MouseEvent | TouchEvent) => void;
- /** A function that is called when the tree node is held down. */
- onHold?: VoidFunction;
-}
-
-/**
- * The properties that are added onto a processed {@link TreeNodeOptions} to create an {@link TreeNode}.
- */
-export interface BaseTreeNode {
- /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
- id: string;
- /** A symbol that helps identify features of the same type. */
- type: typeof TreeNodeType;
- /** 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;
-}
-
-/** An object that represents a node on a tree. */
-export type TreeNode = Replace<
- T & BaseTreeNode,
- {
- visibility: GetComputableTypeWithDefault;
- canClick: GetComputableTypeWithDefault;
- color: GetComputableType;
- display: GetComputableType;
- glowColor: GetComputableType;
- classes: GetComputableType;
- style: GetComputableType;
- mark: GetComputableType;
- }
->;
-
-/** A type that matches any valid {@link TreeNode} object. */
-export type GenericTreeNode = Replace<
- TreeNode,
- {
- visibility: ProcessedComputable;
- canClick: ProcessedComputable;
- }
->;
-
-/**
- * Lazily creates a tree node with the given options.
- * @param optionsFunc Tree Node options.
- */
-export function createTreeNode(
- optionsFunc?: OptionsFunc,
- ...decorators: GenericDecorator[]
-): TreeNode {
- const decoratedData = decorators.reduce(
- (current, next) => Object.assign(current, next.getPersistentData?.()),
- {}
- );
- return createLazyProxy(feature => {
- const treeNode =
- optionsFunc?.call(feature, feature) ??
- ({} as ReturnType>);
- treeNode.id = getUniqueID("treeNode-");
- treeNode.type = TreeNodeType;
- treeNode[Component] = TreeNodeComponent as GenericComponent;
-
- for (const decorator of decorators) {
- decorator.preConstruct?.(treeNode);
- }
-
- Object.assign(decoratedData);
-
- processComputable(treeNode as T, "visibility");
- setDefault(treeNode, "visibility", Visibility.Visible);
- processComputable(treeNode as T, "canClick");
- setDefault(treeNode, "canClick", true);
- processComputable(treeNode as T, "color");
- processComputable(treeNode as T, "display");
- processComputable(treeNode as T, "glowColor");
- processComputable(treeNode as T, "classes");
- processComputable(treeNode as T, "style");
- processComputable(treeNode as T, "mark");
-
- for (const decorator of decorators) {
- decorator.postConstruct?.(treeNode);
- }
-
- if (treeNode.onClick) {
- const onClick = treeNode.onClick.bind(treeNode);
- treeNode.onClick = function (e) {
- if (unref(treeNode.canClick) !== false) {
- onClick(e);
- }
- };
- }
- if (treeNode.onHold) {
- const onHold = treeNode.onHold.bind(treeNode);
- treeNode.onHold = function () {
- if (unref(treeNode.canClick) !== false) {
- onHold();
- }
- };
- }
-
- const decoratedProps = decorators.reduce(
- (current, next) => Object.assign(current, next.getGatheredProps?.(treeNode)),
- {}
- );
- treeNode[GatherProps] = function (this: GenericTreeNode) {
- const {
- display,
- visibility,
- style,
- classes,
- onClick,
- onHold,
- color,
- glowColor,
- canClick,
- mark,
- id
- } = this;
- return {
- display,
- visibility,
- style,
- classes,
- onClick,
- onHold,
- color,
- glowColor,
- canClick,
- mark,
- id,
- ...decoratedProps
- };
- };
-
- return treeNode as unknown as TreeNode;
- });
-}
-
-/** Represents a branch between two nodes in a tree. */
-export interface TreeBranch extends Omit {
- startNode: GenericTreeNode;
- endNode: GenericTreeNode;
-}
-
-/**
- * An object that configures a {@link Tree}.
- */
-export interface TreeOptions {
- /** Whether this clickable should be visible. */
- visibility?: Computable;
- /** The nodes within the tree, in a 2D array. */
- nodes: Computable;
- /** Nodes to show on the left side of the tree. */
- leftSideNodes?: Computable;
- /** Nodes to show on the right side of the tree. */
- rightSideNodes?: Computable;
- /** The branches between nodes within this tree. */
- branches?: Computable;
- /** How to propagate resets through the tree. */
- resetPropagation?: ResetPropagation;
- /** A function that is called when a node within the tree is reset. */
- onReset?: (node: GenericTreeNode) => void;
-}
-
-export interface BaseTree {
- /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
- id: string;
- /** The link objects for each of the branches of the tree. */
- links: Ref;
- /** Cause a reset on this node and propagate it through the tree according to {@link TreeOptions.resetPropagation}. */
- reset: (node: GenericTreeNode) => void;
- /** A flag that is true while the reset is still propagating through the tree. */
- isResetting: Ref;
- /** A reference to the node that caused the currently propagating reset. */
- resettingNode: Ref;
- /** A symbol that helps identify features of the same type. */
- type: typeof TreeType;
- /** 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;
-}
-
-/** An object that represents a feature that is a tree of nodes with branches between them. Contains support for reset mechanics that can propagate through the tree. */
-export type Tree = Replace<
- T & BaseTree,
- {
- visibility: GetComputableTypeWithDefault;
- nodes: GetComputableType;
- leftSideNodes: GetComputableType;
- rightSideNodes: GetComputableType;
- branches: GetComputableType;
- }
->;
-
-/** A type that matches any valid {@link Tree} object. */
-export type GenericTree = Replace<
- Tree,
- {
- visibility: ProcessedComputable;
- }
->;
-
-/**
- * Lazily creates a tree with the given options.
- * @param optionsFunc Tree options.
- */
-export function createTree(
- optionsFunc: OptionsFunc
-): Tree {
- return createLazyProxy(feature => {
- const tree = optionsFunc.call(feature, feature);
- tree.id = getUniqueID("tree-");
- tree.type = TreeType;
- tree[Component] = TreeComponent as GenericComponent;
-
- tree.isResetting = ref(false);
- tree.resettingNode = shallowRef(null);
-
- tree.reset = function (node) {
- const genericTree = tree as GenericTree;
- genericTree.isResetting.value = true;
- genericTree.resettingNode.value = node;
- genericTree.resetPropagation?.(genericTree, node);
- genericTree.onReset?.(node);
- genericTree.isResetting.value = false;
- genericTree.resettingNode.value = null;
- };
- tree.links = computed(() => {
- const genericTree = tree as GenericTree;
- return unref(genericTree.branches) ?? [];
- });
-
- processComputable(tree as T, "visibility");
- setDefault(tree, "visibility", Visibility.Visible);
- processComputable(tree as T, "nodes");
- processComputable(tree as T, "leftSideNodes");
- processComputable(tree as T, "rightSideNodes");
- processComputable(tree as T, "branches");
-
- tree[GatherProps] = function (this: GenericTree) {
- const { nodes, leftSideNodes, rightSideNodes, branches } = this;
- return { nodes, leftSideNodes, rightSideNodes, branches };
- };
-
- return tree as unknown as Tree;
- });
-}
-
-/** A function that is used to propagate resets through a tree. */
-export type ResetPropagation = {
- (tree: GenericTree, resettingNode: GenericTreeNode): void;
-};
-
-/** Propagate resets down the tree by resetting every node in a lower row. */
-export const defaultResetPropagation = function (
- tree: GenericTree,
- resettingNode: GenericTreeNode
-): void {
- const nodes = unref(tree.nodes);
- const row = nodes.findIndex(nodes => nodes.includes(resettingNode)) - 1;
- for (let x = row; x >= 0; x--) {
- nodes[x].forEach(node => node.reset?.reset());
- }
-};
-
-/** Propagate resets down the tree by resetting every node in a lower row. */
-export const invertedResetPropagation = function (
- tree: GenericTree,
- resettingNode: GenericTreeNode
-): void {
- const nodes = unref(tree.nodes);
- const row = nodes.findIndex(nodes => nodes.includes(resettingNode)) + 1;
- for (let x = row; x < nodes.length; x++) {
- nodes[x].forEach(node => node.reset?.reset());
- }
-};
-
-/** Propagate resets down the branches of the tree. */
-export const branchedResetPropagation = function (
- tree: GenericTree,
- resettingNode: GenericTreeNode
-): void {
- const links = unref(tree.branches);
- if (links == null) return;
- const reset: GenericTreeNode[] = [];
- let current = [resettingNode];
- while (current.length !== 0) {
- const next: GenericTreeNode[] = [];
- for (const node of current) {
- for (const link of links.filter(link => link.startNode === node)) {
- if ([...reset, ...current].includes(link.endNode)) continue;
- next.push(link.endNode);
- link.endNode.reset?.reset();
- }
- }
- reset.push(...current);
- current = next;
- }
-};
-
-/**
- * Utility for creating a tooltip for a tree node that displays a resource-based unlock requirement, and after unlock shows the amount of another resource.
- * It sounds oddly specific, but comes up a lot.
- */
-export function createResourceTooltip(
- resource: Resource,
- requiredResource: Resource | null = null,
- requirement: Computable = 0
-): Ref {
- const req = convertComputable(requirement);
- return computed(() => {
- if (requiredResource == null || Decimal.gte(resource.value, unref(req))) {
- return displayResource(resource) + " " + resource.displayName;
- }
- return `Reach ${
- Decimal.eq(requiredResource.precision, 0)
- ? formatWhole(unref(req))
- : format(unref(req), requiredResource.precision)
- } ${requiredResource.displayName} to unlock (You have ${
- Decimal.eq(requiredResource.precision, 0)
- ? formatWhole(requiredResource.value)
- : format(requiredResource.value, requiredResource.precision)
- })`;
- });
-}
diff --git a/src/features/trees/tree.tsx b/src/features/trees/tree.tsx
new file mode 100644
index 0000000..7d2ded6
--- /dev/null
+++ b/src/features/trees/tree.tsx
@@ -0,0 +1,279 @@
+import type { OptionsFunc, Replace } from "features/feature";
+import { Link } from "features/links/links";
+import type { Reset } from "features/reset";
+import type { Resource } from "features/resources/resource";
+import { displayResource } from "features/resources/resource";
+import Tree from "features/trees/Tree.vue";
+import TreeNode from "features/trees/TreeNode.vue";
+import type { DecimalSource } from "util/bignum";
+import Decimal, { format, formatWhole } from "util/bignum";
+import { ProcessedRefOrGetter, processGetter } from "util/computed";
+import { createLazyProxy } from "util/proxies";
+import { Renderable, VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
+import type { MaybeRef, MaybeRefOrGetter, Ref } from "vue";
+import { computed, ref, shallowRef, unref } from "vue";
+
+/** A symbol used to identify {@link TreeNode} features. */
+export const TreeNodeType = Symbol("TreeNode");
+/** A symbol used to identify {@link Tree} features. */
+export const TreeType = Symbol("Tree");
+
+/**
+ * An object that configures a {@link TreeNode}.
+ */
+export interface TreeNodeOptions extends VueFeatureOptions {
+ /** Whether or not this tree node can be clicked. */
+ canClick?: MaybeRefOrGetter;
+ /** The background color for this node. */
+ color?: MaybeRefOrGetter;
+ /** The label to display on this tree node. */
+ display?: MaybeRefOrGetter;
+ /** The color of the glow effect shown to notify the user there's something to do with this node. */
+ glowColor?: MaybeRefOrGetter;
+ /** A reset object attached to this node, used for propagating resets through the tree. */
+ reset?: Reset;
+ /** A function that is called when the tree node is clicked. */
+ onClick?: (e?: MouseEvent | TouchEvent) => void;
+ /** A function that is called when the tree node is held down. */
+ onHold?: VoidFunction;
+}
+
+/**
+ * The properties that are added onto a processed {@link TreeNodeOptions} to create an {@link TreeNode}.
+ */
+export interface BaseTreeNode extends VueFeature {
+ /** A symbol that helps identify features of the same type. */
+ type: typeof TreeNodeType;
+}
+
+/** An object that represents a node on a tree. */
+export type TreeNode = Replace<
+ TreeNodeOptions & BaseTreeNode,
+ {
+ canClick: MaybeRef;
+ color: ProcessedRefOrGetter;
+ display: ProcessedRefOrGetter;
+ glowColor: ProcessedRefOrGetter;
+ }
+>;
+
+/**
+ * Lazily creates a tree node with the given options.
+ * @param optionsFunc Tree Node options.
+ */
+export function createTreeNode(
+ optionsFunc?: OptionsFunc