+ Upon loading, your cloud {{ pluralizedSave }}
+ {{ conflictingSaves.length > 1 ? "appear" : "appears" }} to be out of sync with your
+ local {{ pluralizedSave }}. Which
+ {{ pluralizedSave }}
+ do you want to keep?
+
+
+
+
+
+ Cloud
+ (more recent)
+ (more playtime)
+
+
+
+
+
+ Local
+ (more recent)
+ (more playtime)
+
+
+
+
+
Both
+
Keep Both
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/GameOverScreen.vue b/src/components/modals/GameOverScreen.vue
similarity index 86%
rename from src/components/GameOverScreen.vue
rename to src/components/modals/GameOverScreen.vue
index 999554d..be86c8c 100644
--- a/src/components/GameOverScreen.vue
+++ b/src/components/modals/GameOverScreen.vue
@@ -18,12 +18,18 @@
updates!
-
-
diff --git a/src/features/infoboxes/infobox.ts b/src/features/infoboxes/infobox.ts
deleted file mode 100644
index 551d86c..0000000
--- a/src/features/infoboxes/infobox.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import type {
- CoercableComponent,
- GenericComponent,
- OptionsFunc,
- Replace,
- StyleValue
-} from "features/feature";
-import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
-import InfoboxComponent from "features/infoboxes/Infobox.vue";
-import type { Persistent } from "game/persistence";
-import { persistent } from "game/persistence";
-import type {
- Computable,
- GetComputableType,
- GetComputableTypeWithDefault,
- ProcessedComputable
-} from "util/computed";
-import { processComputable } from "util/computed";
-import { createLazyProxy } from "util/proxies";
-import { unref } from "vue";
-
-/** A symbol used to identify {@link Infobox} features. */
-export const InfoboxType = Symbol("Infobox");
-
-/**
- * An object that configures an {@link Infobox}.
- */
-export interface InfoboxOptions {
- /** Whether this clickable should be visible. */
- visibility?: Computable;
- /** The background color of the Infobox. */
- color?: Computable;
- /** CSS to apply to this feature. */
- style?: Computable;
- /** CSS to apply to the title of the infobox. */
- titleStyle?: Computable;
- /** CSS to apply to the body of the infobox. */
- bodyStyle?: Computable;
- /** Dictionary of CSS classes to apply to this feature. */
- classes?: Computable>;
- /** A header to appear at the top of the display. */
- title: Computable;
- /** The main text that appears in the display. */
- display: Computable;
-}
-
-/**
- * The properties that are added onto a processed {@link InfoboxOptions} to create an {@link Infobox}.
- */
-export interface BaseInfobox {
- /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
- id: string;
- /** Whether or not this infobox is collapsed. */
- collapsed: Persistent;
- /** A symbol that helps identify features of the same type. */
- type: typeof InfoboxType;
- /** 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 displays information in a collapsible way. */
-export type Infobox = Replace<
- T & BaseInfobox,
- {
- visibility: GetComputableTypeWithDefault;
- color: GetComputableType;
- style: GetComputableType;
- titleStyle: GetComputableType;
- bodyStyle: GetComputableType;
- classes: GetComputableType;
- title: GetComputableType;
- display: GetComputableType;
- }
->;
-
-/** A type that matches any valid {@link Infobox} object. */
-export type GenericInfobox = Replace<
- Infobox,
- {
- visibility: ProcessedComputable;
- }
->;
-
-/**
- * Lazily creates an infobox with the given options.
- * @param optionsFunc Infobox options.
- */
-export function createInfobox(
- optionsFunc: OptionsFunc
-): Infobox {
- const collapsed = persistent(false, false);
- return createLazyProxy(feature => {
- const infobox = optionsFunc.call(feature, feature);
- infobox.id = getUniqueID("infobox-");
- infobox.type = InfoboxType;
- infobox[Component] = InfoboxComponent as GenericComponent;
-
- infobox.collapsed = collapsed;
-
- processComputable(infobox as T, "visibility");
- setDefault(infobox, "visibility", Visibility.Visible);
- processComputable(infobox as T, "color");
- processComputable(infobox as T, "style");
- processComputable(infobox as T, "titleStyle");
- processComputable(infobox as T, "bodyStyle");
- processComputable(infobox as T, "classes");
- processComputable(infobox as T, "title");
- processComputable(infobox as T, "display");
-
- infobox[GatherProps] = function (this: GenericInfobox) {
- const {
- visibility,
- display,
- title,
- color,
- collapsed,
- style,
- titleStyle,
- bodyStyle,
- classes,
- id
- } = this;
- return {
- visibility,
- display,
- title,
- color,
- collapsed,
- style: unref(style),
- titleStyle,
- bodyStyle,
- classes,
- id
- };
- };
-
- return infobox as unknown as Infobox;
- });
-}
diff --git a/src/features/infoboxes/infobox.tsx b/src/features/infoboxes/infobox.tsx
new file mode 100644
index 0000000..ccf676c
--- /dev/null
+++ b/src/features/infoboxes/infobox.tsx
@@ -0,0 +1,79 @@
+import Infobox from "features/infoboxes/Infobox.vue";
+import type { Persistent } from "game/persistence";
+import { persistent } from "game/persistence";
+import { processGetter } from "util/computed";
+import { createLazyProxy } from "util/proxies";
+import { Renderable, VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
+import { CSSProperties, MaybeRef, MaybeRefOrGetter } from "vue";
+
+/** A symbol used to identify {@link Infobox} features. */
+export const InfoboxType = Symbol("Infobox");
+
+/**
+ * An object that configures an {@link Infobox}.
+ */
+export interface InfoboxOptions extends VueFeatureOptions {
+ /** The background color of the Infobox. Defaults to the layer color. */
+ color?: MaybeRefOrGetter;
+ /** CSS to apply to the title of the infobox. */
+ titleStyle?: MaybeRefOrGetter;
+ /** CSS to apply to the body of the infobox. */
+ bodyStyle?: MaybeRefOrGetter;
+ /** A header to appear at the top of the display. */
+ title: MaybeRefOrGetter;
+ /** The main text that appears in the display. */
+ display: MaybeRefOrGetter;
+}
+
+/** An object that represents a feature that displays information in a collapsible way. */
+export interface Infobox extends VueFeature {
+ /** The background color of the Infobox. */
+ color?: MaybeRef;
+ /** CSS to apply to the title of the infobox. */
+ titleStyle?: MaybeRef;
+ /** CSS to apply to the body of the infobox. */
+ bodyStyle?: MaybeRef;
+ /** A header to appear at the top of the display. */
+ title: MaybeRef;
+ /** The main text that appears in the display. */
+ display: MaybeRef;
+ /** Whether or not this infobox is collapsed. */
+ collapsed: Persistent;
+ /** A symbol that helps identify features of the same type. */
+ type: typeof InfoboxType;
+}
+
+/**
+ * Lazily creates an infobox with the given options.
+ * @param optionsFunc Infobox options.
+ */
+export function createInfobox(optionsFunc: () => T) {
+ const collapsed = persistent(false, false);
+ return createLazyProxy(() => {
+ const options = optionsFunc();
+ const { color, titleStyle, bodyStyle, title, display, ...props } = options;
+
+ const infobox = {
+ type: InfoboxType,
+ ...(props as Omit),
+ ...vueFeatureMixin("infobox", options, () => (
+
+ )),
+ collapsed,
+ color: processGetter(color) ?? "--layer-color",
+ titleStyle: processGetter(titleStyle),
+ bodyStyle: processGetter(bodyStyle),
+ title: processGetter(title),
+ display: processGetter(display)
+ } satisfies Infobox;
+
+ return infobox;
+ });
+}
diff --git a/src/features/links/Link.vue b/src/features/links/Link.vue
index 815f511..7fa9603 100644
--- a/src/features/links/Link.vue
+++ b/src/features/links/Link.vue
@@ -14,47 +14,46 @@
import type { Link } from "features/links/links";
import type { FeatureNode } from "game/layers";
import { kebabifyObject } from "util/vue";
-import { computed, toRefs } from "vue";
+import { computed } from "vue";
-const _props = defineProps<{
+const props = defineProps<{
link: Link;
startNode: FeatureNode;
endNode: FeatureNode;
boundingRect: DOMRect | undefined;
}>();
-const props = toRefs(_props);
const startPosition = computed(() => {
- const rect = props.startNode.value.rect;
- const boundingRect = props.boundingRect.value;
+ const rect = props.startNode.rect;
+ const boundingRect = props.boundingRect;
const position = boundingRect
? {
x: rect.x + rect.width / 2 - boundingRect.x,
y: rect.y + rect.height / 2 - boundingRect.y
}
: { x: 0, y: 0 };
- if (props.link.value.offsetStart) {
- position.x += props.link.value.offsetStart.x;
- position.y += props.link.value.offsetStart.y;
+ if (props.link.offsetStart) {
+ position.x += props.link.offsetStart.x;
+ position.y += props.link.offsetStart.y;
}
return position;
});
const endPosition = computed(() => {
- const rect = props.endNode.value.rect;
- const boundingRect = props.boundingRect.value;
+ const rect = props.endNode.rect;
+ const boundingRect = props.boundingRect;
const position = boundingRect
? {
x: rect.x + rect.width / 2 - boundingRect.x,
y: rect.y + rect.height / 2 - boundingRect.y
}
: { x: 0, y: 0 };
- if (props.link.value.offsetEnd) {
- position.x += props.link.value.offsetEnd.x;
- position.y += props.link.value.offsetEnd.y;
+ if (props.link.offsetEnd) {
+ position.x += props.link.offsetEnd.x;
+ position.y += props.link.offsetEnd.y;
}
return position;
});
-const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record));
+const linkProps = computed(() => kebabifyObject(props.link as unknown as Record));
diff --git a/src/features/links/Links.vue b/src/features/links/Links.vue
index 58a24a0..c33b8d7 100644
--- a/src/features/links/Links.vue
+++ b/src/features/links/Links.vue
@@ -13,52 +13,51 @@
diff --git a/src/features/links/links.ts b/src/features/links/links.ts
deleted file mode 100644
index c5603c5..0000000
--- a/src/features/links/links.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { GenericComponent, OptionsFunc, Replace } from "features/feature";
-import { GatherProps, Component } from "features/feature";
-import type { Position } from "game/layers";
-import type { Computable, GetComputableType, ProcessedComputable } from "util/computed";
-import { processComputable } from "util/computed";
-import { createLazyProxy } from "util/proxies";
-import type { SVGAttributes } from "vue";
-import LinksComponent from "./Links.vue";
-
-/** A symbol used to identify {@link Links} features. */
-export const LinksType = Symbol("Links");
-
-/** Represents a link between two nodes. It will be displayed as an SVG line, and can take any appropriate properties for an SVG line element. */
-export interface Link extends SVGAttributes {
- startNode: { id: string };
- endNode: { id: string };
- offsetStart?: Position;
- offsetEnd?: Position;
-}
-
-/** An object that configures a {@link Links}. */
-export interface LinksOptions {
- /** The list of links to display. */
- links: Computable;
-}
-
-/**
- * The properties that are added onto a processed {@link LinksOptions} to create an {@link Links}.
- */
-export interface BaseLinks {
- /** A symbol that helps identify features of the same type. */
- type: typeof LinksType;
- /** 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 list of links between nodes, which are the elements in the DOM for any renderable feature. */
-export type Links = Replace<
- T & BaseLinks,
- {
- links: GetComputableType;
- }
->;
-
-/** A type that matches any valid {@link Links} object. */
-export type GenericLinks = Replace<
- Links,
- {
- links: ProcessedComputable;
- }
->;
-
-/**
- * Lazily creates links with the given options.
- * @param optionsFunc Links options.
- */
-export function createLinks(
- optionsFunc: OptionsFunc
-): Links {
- return createLazyProxy(feature => {
- const links = optionsFunc.call(feature, feature);
- links.type = LinksType;
- links[Component] = LinksComponent as GenericComponent;
-
- processComputable(links as T, "links");
-
- links[GatherProps] = function (this: GenericLinks) {
- const { links } = this;
- return {
- links
- };
- };
-
- return links as unknown as Links;
- });
-}
diff --git a/src/features/links/links.tsx b/src/features/links/links.tsx
new file mode 100644
index 0000000..ef6bdcb
--- /dev/null
+++ b/src/features/links/links.tsx
@@ -0,0 +1,54 @@
+import type { Position } from "game/layers";
+import { processGetter } from "util/computed";
+import { createLazyProxy } from "util/proxies";
+import { VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
+import { unref, type MaybeRef, type MaybeRefOrGetter, type SVGAttributes } from "vue";
+import Links from "./Links.vue";
+
+/** A symbol used to identify {@link Links} features. */
+export const LinksType = Symbol("Links");
+
+/** Represents a link between two nodes. It will be displayed as an SVG line, and can take any appropriate properties for an SVG line element. */
+export interface Link extends /* @vue-ignore */ SVGAttributes {
+ startNode: { id: string };
+ endNode: { id: string };
+ offsetStart?: Position;
+ offsetEnd?: Position;
+}
+
+/** An object that configures a {@link Links}. */
+export interface LinksOptions extends VueFeatureOptions {
+ /** The list of links to display. */
+ links: MaybeRefOrGetter;
+}
+
+/** An object that represents a list of links between nodes, which are the elements in the DOM for any renderable feature. */
+export interface Links extends VueFeature {
+ /** The list of links to display. */
+ links: MaybeRef;
+ /** A symbol that helps identify features of the same type. */
+ type: typeof LinksType;
+}
+
+/**
+ * Lazily creates links with the given options.
+ * @param optionsFunc Links options.
+ */
+export function createLinks(optionsFunc: () => T) {
+ return createLazyProxy(() => {
+ const options = optionsFunc?.();
+ const { links, style: _style, ...props } = options;
+
+ const style = processGetter(_style);
+ options.style = () => ({ position: "static", ...(unref(style) ?? {}) });
+
+ const retLinks = {
+ type: LinksType,
+ ...(props as Omit),
+ ...vueFeatureMixin("links", options, () => ),
+ links: processGetter(links)
+ } satisfies Links;
+
+ return retLinks;
+ });
+}
diff --git a/src/features/particles/Particles.vue b/src/features/particles/Particles.vue
index 6fee1e9..b7426f2 100644
--- a/src/features/particles/Particles.vue
+++ b/src/features/particles/Particles.vue
@@ -2,83 +2,60 @@
-
diff --git a/src/features/trees/tree.ts b/src/features/trees/tree.ts
deleted file mode 100644
index 8ec317f..0000000
--- a/src/features/trees/tree.ts
+++ /dev/null
@@ -1,383 +0,0 @@
-import { Decorator, 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 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..8c37923
--- /dev/null
+++ b/src/features/trees/tree.tsx
@@ -0,0 +1,284 @@
+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 { noPersist } from "game/persistence";
+import type { DecimalSource } from "util/bignum";
+import Decimal, { format, formatWhole } from "util/bignum";
+import { 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 TreeNode extends VueFeature {
+ /** Whether or not this tree node can be clicked. */
+ canClick?: MaybeRef;
+ /** The background color for this node. */
+ color?: MaybeRef;
+ /** The label to display on this tree node. */
+ display?: MaybeRef;
+ /** The color of the glow effect shown to notify the user there's something to do with this node. */
+ glowColor?: MaybeRef;
+ /** 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;
+ /** A symbol that helps identify features of the same type. */
+ type: typeof TreeNodeType;
+}
+
+/**
+ * Lazily creates a tree node with the given options.
+ * @param optionsFunc Tree Node options.
+ */
+export function createTreeNode(optionsFunc?: () => T) {
+ return createLazyProxy(() => {
+ const options = optionsFunc?.() ?? ({} as T);
+ const { canClick, color, display, glowColor, onClick, onHold, ...props } = options;
+
+ const treeNode = {
+ type: TreeNodeType,
+ ...(props as Omit),
+ ...vueFeatureMixin("treeNode", options, () => (
+
+ )),
+ canClick: processGetter(canClick) ?? true,
+ color: processGetter(color),
+ display: processGetter(display),
+ glowColor: processGetter(glowColor),
+ onClick:
+ onClick == null
+ ? undefined
+ : function (e) {
+ if (unref(treeNode.canClick) !== false) {
+ onClick.call(treeNode, e);
+ }
+ },
+ onHold:
+ onHold == null
+ ? undefined
+ : function () {
+ if (unref(treeNode.canClick) !== false) {
+ onHold.call(treeNode);
+ }
+ }
+ } satisfies TreeNode;
+
+ return treeNode;
+ });
+}
+
+/** Represents a branch between two nodes in a tree. */
+export interface TreeBranch extends Omit {
+ startNode: TreeNode;
+ endNode: TreeNode;
+}
+
+/**
+ * An object that configures a {@link Tree}.
+ */
+export interface TreeOptions extends VueFeatureOptions {
+ /** The nodes within the tree, in a 2D array. */
+ nodes: MaybeRefOrGetter;
+ /** Nodes to show on the left side of the tree. */
+ leftSideNodes?: MaybeRefOrGetter;
+ /** Nodes to show on the right side of the tree. */
+ rightSideNodes?: MaybeRefOrGetter;
+ /** The branches between nodes within this tree. */
+ branches?: MaybeRefOrGetter;
+ /** How to propagate resets through the tree. */
+ resetPropagation?: ResetPropagation;
+ /** A function that is called when a node within the tree is reset. */
+ onReset?: (node: TreeNode) => void;
+}
+
+export interface Tree extends VueFeature {
+ /** The nodes within the tree, in a 2D array. */
+ nodes: MaybeRef;
+ /** Nodes to show on the left side of the tree. */
+ leftSideNodes?: MaybeRef;
+ /** Nodes to show on the right side of the tree. */
+ rightSideNodes?: MaybeRef;
+ /** The branches between nodes within this tree. */
+ branches?: MaybeRef;
+ /** How to propagate resets through the tree. */
+ resetPropagation?: ResetPropagation;
+ /** A function that is called when a node within the tree is reset. */
+ onReset?: (node: TreeNode) => void;
+ /** The link objects for each of the branches of the tree. */
+ links: MaybeRef;
+ /** Cause a reset on this node and propagate it through the tree according to {@link TreeOptions.resetPropagation}. */
+ reset: (node: TreeNode) => 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;
+}
+
+/**
+ * Lazily creates a tree with the given options.
+ * @param optionsFunc Tree options.
+ */
+export function createTree(optionsFunc: () => T) {
+ return createLazyProxy(() => {
+ const options = optionsFunc();
+ const {
+ branches: _branches,
+ nodes,
+ leftSideNodes,
+ rightSideNodes,
+ resetPropagation,
+ onReset,
+ style: _style,
+ ...props
+ } = options;
+
+ const style = processGetter(_style);
+ options.style = () => ({ position: "static", ...(unref(style) ?? {}) });
+
+ const branches = _branches == null ? undefined : processGetter(_branches);
+
+ const tree = {
+ type: TreeType,
+ ...(props as Omit),
+ ...vueFeatureMixin("tree", options, () => (
+
+ )),
+ branches,
+ isResetting: ref(false),
+ resettingNode: shallowRef(null),
+ nodes: processGetter(nodes),
+ leftSideNodes: processGetter(leftSideNodes),
+ rightSideNodes: processGetter(rightSideNodes),
+ links: branches == null ? [] : noPersist(branches),
+ resetPropagation,
+ onReset,
+ reset: function (node: TreeNode) {
+ tree.isResetting.value = true;
+ tree.resettingNode.value = node;
+ tree.resetPropagation?.(tree, node);
+ tree.onReset?.(node);
+ tree.isResetting.value = false;
+ tree.resettingNode.value = null;
+ }
+ } satisfies Tree;
+
+ return tree;
+ });
+}
+
+/** A function that is used to propagate resets through a tree. */
+export type ResetPropagation = {
+ (tree: Tree, resettingNode: TreeNode): void;
+};
+
+/** Propagate resets down the tree by resetting every node in a lower row. */
+export const defaultResetPropagation = function (tree: Tree, resettingNode: TreeNode): 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: Tree, resettingNode: TreeNode): 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: Tree, resettingNode: TreeNode): void {
+ const links = unref(tree.branches);
+ if (links == null) return;
+ const reset: TreeNode[] = [];
+ let current = [resettingNode];
+ while (current.length !== 0) {
+ const next: TreeNode[] = [];
+ 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: MaybeRefOrGetter = 0
+): Ref {
+ const req = processGetter(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/upgrades/Upgrade.vue b/src/features/upgrades/Upgrade.vue
deleted file mode 100644
index d1fb6c3..0000000
--- a/src/features/upgrades/Upgrade.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/features/upgrades/upgrade.ts b/src/features/upgrades/upgrade.ts
deleted file mode 100644
index 9ff9b28..0000000
--- a/src/features/upgrades/upgrade.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-import { isArray } from "@vue/shared";
-import { GenericDecorator } from "features/decorators/common";
-import type {
- CoercableComponent,
- GenericComponent,
- OptionsFunc,
- Replace,
- StyleValue
-} from "features/feature";
-import {
- Component,
- GatherProps,
- Visibility,
- findFeatures,
- getUniqueID,
- setDefault
-} from "features/feature";
-import UpgradeComponent from "features/upgrades/Upgrade.vue";
-import type { GenericLayer } from "game/layers";
-import type { Persistent } from "game/persistence";
-import { persistent } from "game/persistence";
-import {
- Requirements,
- createVisibilityRequirement,
- payRequirements,
- requirementsMet
-} from "game/requirements";
-import { isFunction } from "util/common";
-import type {
- Computable,
- GetComputableType,
- GetComputableTypeWithDefault,
- ProcessedComputable
-} from "util/computed";
-import { processComputable } from "util/computed";
-import { createLazyProxy } from "util/proxies";
-import type { Ref } from "vue";
-import { computed, unref } from "vue";
-
-/** A symbol used to identify {@link Upgrade} features. */
-export const UpgradeType = Symbol("Upgrade");
-
-/**
- * An object that configures a {@link Upgrade}.
- */
-export interface UpgradeOptions {
- /** Whether this clickable should be visible. */
- visibility?: 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;
- /** The display to use for this clickable. */
- display?: Computable<
- | CoercableComponent
- | {
- /** A header to appear at the top of the display. */
- title?: CoercableComponent;
- /** The main text that appears in the display. */
- description: CoercableComponent;
- /** A description of the current effect of the achievement. Useful when the effect changes dynamically. */
- effectDisplay?: CoercableComponent;
- }
- >;
- /** The requirements to purchase this upgrade. */
- requirements: Requirements;
- /** A function that is called when the upgrade is purchased. */
- onPurchase?: VoidFunction;
-}
-
-/**
- * The properties that are added onto a processed {@link UpgradeOptions} to create an {@link Upgrade}.
- */
-export interface BaseUpgrade {
- /** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
- id: string;
- /** Whether or not this upgrade has been purchased. */
- bought: Persistent;
- /** Whether or not the upgrade can currently be purchased. */
- canPurchase: Ref;
- /** Purchase the upgrade */
- purchase: VoidFunction;
- /** A symbol that helps identify features of the same type. */
- type: typeof UpgradeType;
- /** 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 can be purchased a single time. */
-export type Upgrade = Replace<
- T & BaseUpgrade,
- {
- visibility: GetComputableTypeWithDefault;
- classes: GetComputableType;
- style: GetComputableType;
- display: GetComputableType;
- requirements: GetComputableType;
- mark: GetComputableType;
- }
->;
-
-/** A type that matches any valid {@link Upgrade} object. */
-export type GenericUpgrade = Replace<
- Upgrade,
- {
- visibility: ProcessedComputable;
- }
->;
-
-/**
- * Lazily creates an upgrade with the given options.
- * @param optionsFunc Upgrade options.
- */
-export function createUpgrade(
- optionsFunc: OptionsFunc,
- ...decorators: GenericDecorator[]
-): Upgrade {
- const bought = persistent(false, false);
- const decoratedData = decorators.reduce(
- (current, next) => Object.assign(current, next.getPersistentData?.()),
- {}
- );
- return createLazyProxy(feature => {
- const upgrade = optionsFunc.call(feature, feature);
- upgrade.id = getUniqueID("upgrade-");
- upgrade.type = UpgradeType;
- upgrade[Component] = UpgradeComponent as GenericComponent;
-
- for (const decorator of decorators) {
- decorator.preConstruct?.(upgrade);
- }
-
- upgrade.bought = bought;
- Object.assign(upgrade, decoratedData);
-
- upgrade.canPurchase = computed(
- () => !bought.value && requirementsMet(upgrade.requirements)
- );
- upgrade.purchase = function () {
- const genericUpgrade = upgrade as GenericUpgrade;
- if (!unref(genericUpgrade.canPurchase)) {
- return;
- }
- payRequirements(upgrade.requirements);
- bought.value = true;
- genericUpgrade.onPurchase?.();
- };
-
- const visibilityRequirement = createVisibilityRequirement(upgrade as GenericUpgrade);
- if (isArray(upgrade.requirements)) {
- upgrade.requirements.unshift(visibilityRequirement);
- } else {
- upgrade.requirements = [visibilityRequirement, upgrade.requirements];
- }
-
- processComputable(upgrade as T, "visibility");
- setDefault(upgrade, "visibility", Visibility.Visible);
- processComputable(upgrade as T, "classes");
- processComputable(upgrade as T, "style");
- processComputable(upgrade as T, "display");
- processComputable(upgrade as T, "mark");
-
- for (const decorator of decorators) {
- decorator.postConstruct?.(upgrade);
- }
-
- const decoratedProps = decorators.reduce(
- (current, next) => Object.assign(current, next.getGatheredProps?.(upgrade)),
- {}
- );
- upgrade[GatherProps] = function (this: GenericUpgrade) {
- const {
- display,
- visibility,
- style,
- classes,
- requirements,
- canPurchase,
- bought,
- mark,
- id,
- purchase
- } = this;
- return {
- display,
- visibility,
- style: unref(style),
- classes,
- requirements,
- canPurchase,
- bought,
- mark,
- id,
- purchase,
- ...decoratedProps
- };
- };
-
- return upgrade as unknown as Upgrade;
- });
-}
-
-/**
- * Utility to auto purchase a list of upgrades whenever they're affordable.
- * @param layer The layer the upgrades are apart of
- * @param autoActive Whether or not the upgrades should currently be auto-purchasing
- * @param upgrades The specific upgrades to upgrade. If unspecified, uses all upgrades on the layer.
- */
-export function setupAutoPurchase(
- layer: GenericLayer,
- autoActive: Computable,
- upgrades: GenericUpgrade[] = []
-): void {
- upgrades =
- upgrades.length === 0 ? (findFeatures(layer, UpgradeType) as GenericUpgrade[]) : upgrades;
- const isAutoActive: ProcessedComputable = isFunction(autoActive)
- ? computed(autoActive)
- : autoActive;
- layer.on("update", () => {
- if (unref(isAutoActive)) {
- upgrades.forEach(upgrade => upgrade.purchase());
- }
- });
-}
diff --git a/src/game/boards/Board.vue b/src/game/boards/Board.vue
new file mode 100644
index 0000000..c11a084
--- /dev/null
+++ b/src/game/boards/Board.vue
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
diff --git a/src/game/boards/SVGNode.vue b/src/game/boards/SVGNode.vue
new file mode 100644
index 0000000..a0d1b14
--- /dev/null
+++ b/src/game/boards/SVGNode.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
diff --git a/src/game/boards/SquareProgress.vue b/src/game/boards/SquareProgress.vue
new file mode 100644
index 0000000..9db9917
--- /dev/null
+++ b/src/game/boards/SquareProgress.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
diff --git a/src/game/boards/board.tsx b/src/game/boards/board.tsx
new file mode 100644
index 0000000..80d7a08
--- /dev/null
+++ b/src/game/boards/board.tsx
@@ -0,0 +1,464 @@
+import { globalBus } from "game/events";
+import { DefaultValue, Persistent, persistent } from "game/persistence";
+import type { PanZoom } from "panzoom";
+import { Direction, isFunction } from "util/common";
+import { processGetter } from "util/computed";
+import { createLazyProxy, runAfterEvaluation } from "util/proxies";
+import { Renderable, VueFeature } from "util/vue";
+import type { ComponentPublicInstance, ComputedRef, MaybeRef, MaybeRefOrGetter, Ref } from "vue";
+import { computed, ref, unref, watchEffect } from "vue";
+import panZoom from "vue-panzoom";
+import Board from "./Board.vue";
+import Draggable from "./Draggable.vue";
+
+// 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 MaybeRefOrGetter 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 NodeMaybeRefOrGetter =
+ | MaybeRefOrGetter
+ | ((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(
+ property: NodeMaybeRefOrGetter,
+ node: T,
+ ...args: S
+): R {
+ return isFunction>(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: MaybeRefOrGetter<{ id: number }[]>) {
+ const processedNodes = processGetter(nodes);
+ return computed(() => Math.max(-1, ...unref(processedNodes).map(node => node.id)) + 1);
+}
+
+/** An object that configures a {@link DraggableNode}. */
+export interface DraggableNodeOptions {
+ /** 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 element. */
+ board: Ref | 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?: NodeMaybeRefOrGetter;
+ /** The maximum distance (in pixels, before zoom) away a node can be and still drop onto a receiving node. */
+ dropAreaRadius?: NodeMaybeRefOrGetter;
+ /** 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 {
+ /** A ref to the node currently being moved. */
+ nodeBeingDragged: Ref;
+ /** 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;
+ /** A ref to whether or not the node being dragged has actually been dragged away from its starting position. */
+ hasDragged: Ref;
+ /** The position of the node being dragged relative to where it started at the beginning of the drag. */
+ dragDelta: Ref;
+ /** The nodes that can receive the node currently being dragged. */
+ receivingNodes: Ref;
+ /** 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(options: DraggableNodeOptions): DraggableNode {
+ const nodeBeingDragged = ref();
+ const receivingNode = ref();
+ 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();
+ 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 {
+ /** 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;
+ /** A reference to whether or not the node being dragged has been moved away from its initial position. Typically from {@link setupDraggableNode}. */
+ hasDragged: Ref;
+ /** A reference to how far the node being dragged is from its initial position. Typically from {@link setupDraggableNode}. */
+ dragDelta: Ref;
+ /** 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;
+}
+
+/** Contains all the data tied to making a vue feature draggable */
+export interface Draggable extends MakeDraggableOptions {
+ /** The current position of the node on the board. */
+ position: Persistent;
+ /** The current position, plus the current offset from being dragged. */
+ computedPosition: ComputedRef;
+}
+
+/**
+ * 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>(
+ element: VueFeature,
+ optionsFunc: () => S
+): asserts element is VueFeature & { draggable: Draggable } {
+ const position = persistent({ x: 0, y: 0 });
+ const draggable = createLazyProxy(() => {
+ const options = optionsFunc();
+ const { id, nodeBeingDragged, hasDragged, dragDelta, startDrag, endDrag, onMouseDown, onMouseUp, initialPosition, ...props } = options;
+
+ position[DefaultValue] = initialPosition ?? position[DefaultValue];
+
+ const draggable = {
+ ...(props as Omit>),
+ id,
+ nodeBeingDragged,
+ hasDragged,
+ dragDelta,
+ startDrag,
+ endDrag,
+ onMouseDown(e: MouseEvent | TouchEvent) {
+ if (onMouseDown?.(e) === false) {
+ return;
+ }
+
+ if (nodeBeingDragged.value == null) {
+ startDrag(e, id);
+ }
+ },
+ onMouseUp(e: MouseEvent | TouchEvent) {
+ // The element we're mapping may have their own click listeners, so we need to stop
+ // the propagation regardless, and can't rely on them passing through to the board.
+ endDrag();
+ if (!hasDragged.value) {
+ onMouseUp?.(e);
+ }
+ e.stopPropagation();
+ },
+ initialPosition,
+ position,
+ computedPosition: computed(() => {
+ if (nodeBeingDragged.value === id) {
+ return {
+ x: position.value.x + dragDelta.value.x,
+ y: position.value.y + dragDelta.value.y
+ };
+ }
+ return position.value;
+ })
+ } satisfies Draggable;
+
+ return draggable;
+ });
+
+ runAfterEvaluation(element, el => {
+ draggable.id; // Ensure draggable gets evaluated
+ (el as VueFeature & { draggable: Draggable }).draggable = draggable;
+ element.wrappers.push(el => (
+
+ {el}
+
+ ));
+ });
+}
+
+/** An object that configures how to setup a list of actions using {@link setupActions}. */
+export interface SetupActionsOptions {
+ /** The node to display actions upon, or undefined when the actions should be hidden. */
+ node: MaybeRefOrGetter;
+ /** Whether or not to currently display the actions. */
+ shouldShowActions?: NodeMaybeRefOrGetter;
+ /** The list of actions to display. Actions are arbitrary JSX elements. */
+ actions: NodeMaybeRefOrGetter Renderable)[]>;
+ /** The distance from the node to place the actions. */
+ distance: NodeMaybeRefOrGetter;
+ /** The arc length to place between actions, in radians. */
+ arcLength?: NodeMaybeRefOrGetter;
+}
+
+/**
+ * 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(options: SetupActionsOptions) {
+ const node = processGetter(options.node) as MaybeRef;
+ return computed(() => {
+ 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(
+ 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;
+ }
+ }
+}
diff --git a/src/game/events.ts b/src/game/events.ts
index a167042..c89cca3 100644
--- a/src/game/events.ts
+++ b/src/game/events.ts
@@ -1,7 +1,8 @@
import type { Settings } from "game/settings";
import { createNanoEvents } from "nanoevents";
import type { App } from "vue";
-import type { GenericLayer } from "./layers";
+import type { Layer } from "./layers";
+import state from "./state";
/** All types of events able to be sent or emitted from the global event bus. */
export interface GlobalEvents {
@@ -10,12 +11,12 @@ export interface GlobalEvents {
* @param layer The layer being added.
* @param saveData The layer's save data object within player.
*/
- addLayer: (layer: GenericLayer, saveData: Record) => void;
+ addLayer: (layer: Layer, saveData: Record) => void;
/**
* Sent whenever a layer is removed.
* @param layer The layer being removed.
*/
- removeLayer: (layer: GenericLayer) => void;
+ removeLayer: (layer: Layer) => void;
/**
* Sent every game tick. Runs the life cycle of the project.
* @param diff The delta time since last tick, in ms.
@@ -59,3 +60,7 @@ if ("fonts" in document) {
// JSDom doesn't add document.fonts, and Object.defineProperty doesn't seem to work on document
document.fonts.onloadingdone = () => globalBus.emit("fontsLoaded");
}
+
+document.onmousemove = function () {
+ state.mouseActivity[state.mouseActivity.length - 1] = true;
+};
diff --git a/src/game/formulas/formulas.ts b/src/game/formulas/formulas.ts
index 7f88d0c..7ffe6ec 100644
--- a/src/game/formulas/formulas.ts
+++ b/src/game/formulas/formulas.ts
@@ -1,8 +1,8 @@
import { Resource } from "features/resources/resource";
import { NonPersistent } from "game/persistence";
import Decimal, { DecimalSource, format } from "util/bignum";
-import { Computable, ProcessedComputable, convertComputable } from "util/computed";
-import { Ref, computed, ref, unref } from "vue";
+import { processGetter } from "util/computed";
+import { MaybeRef, MaybeRefOrGetter, Ref, computed, ref, unref } from "vue";
import * as ops from "./operations";
import type {
EvaluateFunction,
@@ -48,6 +48,7 @@ export interface InternalFormula {
invertIntegral?(value: DecimalSource): DecimalSource;
}
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export abstract class InternalFormula {
readonly inputs: T;
@@ -56,9 +57,10 @@ export abstract class InternalFormula | undefined;
protected readonly internalIntegrateInner: IntegrateFunction | undefined;
protected readonly applySubstitution: SubstitutionFunction | undefined;
+ protected readonly description: string | undefined;
protected readonly internalVariables: number;
- public readonly innermostVariable: ProcessedComputable | undefined;
+ public readonly innermostVariable: MaybeRef | undefined;
constructor(options: FormulaOptions) {
let readonlyProperties;
@@ -85,12 +87,13 @@ export abstract class InternalFormula;
+ variable: MaybeRef;
}): InternalFormulaProperties {
return {
inputs: [variable] as T,
@@ -204,7 +207,7 @@ export abstract class InternalFormula): InvertibleIntegralFormula {
+ public static constant(value: MaybeRef): InvertibleIntegralFormula {
return new Formula({ inputs: [value] });
}
@@ -212,10 +215,29 @@ export abstract class InternalFormula): InvertibleIntegralFormula {
+ public static variable(value: MaybeRef): InvertibleIntegralFormula {
return new Formula({ variable: value });
}
+ /**
+ * Stringifies the formula so it's more easy to read in the console
+ * @param formula The formula source to print, used for mapping inputs
+ */
+ public static stringify(formula: FormulaSource): string {
+ if (formula instanceof InternalFormula) {
+ if (formula.description != null) {
+ return formula.description;
+ }
+ if (formula.internalEvaluate == null) {
+ return formula.hasVariable() ? "x" : format(formula.inputs[0] ?? 0);
+ }
+ return `${formula.internalEvaluate.name}(${formula.inputs
+ .map(Formula.stringify)
+ .join(", ")})`;
+ }
+ return format(unref(formula));
+ }
+
// TODO add integration support to step-wise functions
/**
* Creates a step-wise formula. After {@link start} the formula will have an additional modifier.
@@ -226,11 +248,11 @@ export abstract class InternalFormula,
+ start: MaybeRefOrGetter,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
) {
const formula = formulaModifier(Formula.variable(0));
- const processedStart = convertComputable(start);
+ const processedStart = processGetter(start);
function evalStep(lhs: DecimalSource) {
if (Decimal.lt(lhs, unref(processedStart))) {
return lhs;
@@ -256,7 +278,9 @@ export abstract class InternalFormula,
+ condition: MaybeRefOrGetter,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula,
elseFormulaModifier?: (value: InvertibleIntegralFormula) => GenericFormula
) {
@@ -277,7 +301,7 @@ export abstract class InternalFormula,
+ condition: MaybeRefOrGetter,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula,
elseFormulaModifier?: (value: InvertibleIntegralFormula) => GenericFormula
) {
@@ -878,21 +904,25 @@ export abstract class InternalFormula,
+ start: MaybeRefOrGetter,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
) {
return Formula.step(this, start, formulaModifier);
}
public if(
- condition: Computable,
+ condition: MaybeRefOrGetter,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
) {
return Formula.if(this, condition, formulaModifier);
}
public conditional(
- condition: Computable,
+ condition: MaybeRefOrGetter,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
) {
return Formula.if(this, condition, formulaModifier);
@@ -1402,28 +1432,6 @@ export function findNonInvertible(formula: GenericFormula): GenericFormula | nul
return null;
}
-/**
- * Stringifies a formula so it's more easy to read in the console
- * @param formula The formula to print
- */
-export function printFormula(formula: FormulaSource): string {
- if (formula instanceof InternalFormula) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- return formula.internalEvaluate == null
- ? formula.hasVariable()
- ? "x"
- : formula.inputs[0] ?? 0
- : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- formula.internalEvaluate.name +
- "(" +
- formula.inputs.map(printFormula).join(", ") +
- ")";
- }
- return format(unref(formula));
-}
-
/**
* Utility for calculating the maximum amount of purchases possible with a given formula and resource. If {@link cumulativeCost} is changed to false, the calculation will be much faster with higher numbers.
* @param formula The formula to use for calculating buy max from
@@ -1435,13 +1443,13 @@ export function printFormula(formula: FormulaSource): string {
export function calculateMaxAffordable(
formula: GenericFormula,
resource: Resource,
- cumulativeCost: Computable = true,
- directSum?: Computable,
- maxBulkAmount: Computable = Decimal.dInf
+ cumulativeCost: MaybeRefOrGetter = true,
+ directSum?: MaybeRefOrGetter,
+ maxBulkAmount: MaybeRefOrGetter = Decimal.dInf
) {
- const computedCumulativeCost = convertComputable(cumulativeCost);
- const computedDirectSum = convertComputable(directSum);
- const computedmaxBulkAmount = convertComputable(maxBulkAmount);
+ const computedCumulativeCost = processGetter(cumulativeCost);
+ const computedDirectSum = processGetter(directSum);
+ const computedmaxBulkAmount = processGetter(maxBulkAmount);
return computed(() => {
const maxBulkAmount = unref(computedmaxBulkAmount);
if (Decimal.eq(maxBulkAmount, 1)) {
diff --git a/src/game/formulas/operations.ts b/src/game/formulas/operations.ts
index 586319e..7210cfb 100644
--- a/src/game/formulas/operations.ts
+++ b/src/game/formulas/operations.ts
@@ -552,7 +552,9 @@ export function tetrate(
export function invertTetrate(
value: DecimalSource,
base: FormulaSource,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
height: FormulaSource,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
payload: FormulaSource
) {
if (hasVariable(base)) {
@@ -576,6 +578,7 @@ export function invertIteratedExp(
value: DecimalSource,
lhs: FormulaSource,
height: FormulaSource,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
payload: FormulaSource
) {
if (hasVariable(lhs)) {
@@ -626,6 +629,7 @@ export function invertLayeradd(
value: DecimalSource,
lhs: FormulaSource,
diff: FormulaSource,
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
base: FormulaSource
) {
if (hasVariable(lhs)) {
diff --git a/src/game/formulas/types.d.ts b/src/game/formulas/types.d.ts
index 88efd92..3f98f55 100644
--- a/src/game/formulas/types.d.ts
+++ b/src/game/formulas/types.d.ts
@@ -1,10 +1,10 @@
import { InternalFormula } from "game/formulas/formulas";
import { DecimalSource } from "util/bignum";
-import { ProcessedComputable } from "util/computed";
+import { MaybeRef } from "util/computed";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type GenericFormula = InternalFormula;
-type FormulaSource = ProcessedComputable | GenericFormula;
+type FormulaSource = MaybeRef | GenericFormula;
type InvertibleFormula = GenericFormula & {
invert: NonNullable;
};
@@ -37,9 +37,13 @@ type SubstitutionFunction = (
...inputs: T
) => GenericFormula;
-type VariableFormulaOptions = { variable: ProcessedComputable };
+type VariableFormulaOptions = {
+ variable: MaybeRef;
+ description?: string;
+};
type ConstantFormulaOptions = {
inputs: [FormulaSource];
+ description?: string;
};
type GeneralFormulaOptions = {
inputs: T;
@@ -48,6 +52,7 @@ type GeneralFormulaOptions = {
integrate?: IntegrateFunction;
integrateInner?: IntegrateFunction;
applySubstitution?: SubstitutionFunction;
+ description?: string;
};
type FormulaOptions =
| VariableFormulaOptions
@@ -62,7 +67,8 @@ type InternalFormulaProperties = {
internalIntegrate?: IntegrateFunction;
internalIntegrateInner?: IntegrateFunction;
applySubstitution?: SubstitutionFunction;
- innermostVariable?: ProcessedComputable;
+ innermostVariable?: MaybeRef;
+ description?: string;
};
type SubstitutionStack = ((value: GenericFormula) => GenericFormula)[] | undefined;
diff --git a/src/game/gameLoop.ts b/src/game/gameLoop.ts
index b001dd6..46cc53b 100644
--- a/src/game/gameLoop.ts
+++ b/src/game/gameLoop.ts
@@ -1,18 +1,14 @@
+import { hasWon } from "data/projEntry";
import projInfo from "data/projInfo.json";
import { globalBus } from "game/events";
import settings from "game/settings";
import Decimal from "util/bignum";
import { loadingSave } from "util/save";
-import type { Ref } from "vue";
import { watch } from "vue";
import player from "./player";
import state from "./state";
-let intervalID: NodeJS.Timer | null = null;
-
-// Not imported immediately due to dependency cycles
-// This gets set during startGameLoop(), and will only be used in the update function
-let hasWon: null | Ref = null;
+let intervalID: NodeJS.Timeout | null = null;
function update() {
const now = Date.now();
@@ -43,7 +39,7 @@ function update() {
loadingSave.value = false;
// Add offline time if any
- if (player.offlineTime != undefined) {
+ if (player.offlineTime != null) {
if (Decimal.gt(player.offlineTime, projInfo.offlineLimit * 3600)) {
player.offlineTime = projInfo.offlineLimit * 3600;
}
@@ -63,7 +59,7 @@ function update() {
diff = Math.min(diff, projInfo.maxTickLength);
// Apply dev speed
- if (player.devSpeed != undefined) {
+ if (player.devSpeed != null) {
diff *= player.devSpeed;
}
@@ -95,15 +91,22 @@ function update() {
/** Starts the game loop for the project, which updates the game in ticks. */
export async function startGameLoop() {
- hasWon = (await import("data/projEntry")).hasWon;
- watch(hasWon, hasWon => {
- if (hasWon) {
- globalBus.emit("gameWon");
- }
- });
if (settings.unthrottled) {
requestAnimationFrame(update);
} else {
intervalID = setInterval(update, 50);
}
}
+
+watch(hasWon, hasWon => {
+ if (hasWon) {
+ globalBus.emit("gameWon");
+ }
+});
+
+setInterval(
+ () => {
+ state.mouseActivity = [...state.mouseActivity.slice(-7), false];
+ },
+ 1000 * 60 * 60
+);
diff --git a/src/game/layers.tsx b/src/game/layers.tsx
index bbb6079..e6ab118 100644
--- a/src/game/layers.tsx
+++ b/src/game/layers.tsx
@@ -1,28 +1,25 @@
-import Modal from "components/Modal.vue";
-import type {
- CoercableComponent,
- JSXFunction,
- OptionsFunc,
- Replace,
- StyleValue
-} from "features/feature";
-import { jsx, setDefault } from "features/feature";
+import Modal from "components/modals/Modal.vue";
import { globalBus } from "game/events";
import type { Persistent } from "game/persistence";
import { persistent } from "game/persistence";
import player from "game/player";
import type { Emitter } from "nanoevents";
import { createNanoEvents } from "nanoevents";
-import type {
- Computable,
- GetComputableType,
- GetComputableTypeWithDefault,
- ProcessedComputable
-} from "util/computed";
-import { processComputable } from "util/computed";
+import { processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
-import { computed, InjectionKey, Ref } from "vue";
-import { ref, shallowReactive, unref } from "vue";
+import { render, Renderable } from "util/vue";
+import {
+ computed,
+ type CSSProperties,
+ InjectionKey,
+ MaybeRef,
+ MaybeRefOrGetter,
+ Ref,
+ ref,
+ shallowReactive,
+ unref
+} from "vue";
+import { JSX } from "vue/jsx-runtime";
/** A feature's node in the DOM that has its size tracked. */
export interface FeatureNode {
@@ -74,12 +71,12 @@ export interface LayerEvents {
* A reference to all the current layers.
* It is shallow reactive so it will update when layers are added or removed, but not interfere with the existing refs within each layer.
*/
-export const layers: Record | undefined> = shallowReactive({});
+export const layers: Record> = shallowReactive({});
declare global {
/** Augment the window object so the layers can be accessed from the console. */
interface Window {
- layers: Record | undefined>;
+ layers: Record | undefined>;
}
}
window.layers = layers;
@@ -106,42 +103,42 @@ export interface Position {
*/
export interface LayerOptions {
/** The color of the layer, used to theme the entire layer's display. */
- color?: Computable;
+ color?: MaybeRefOrGetter;
/**
* The layout of this layer's features.
* When the layer is open in {@link game/player.PlayerData.tabs}, this is the content that is displayed.
*/
- display: Computable;
+ display: MaybeRefOrGetter;
/** An object of classes that should be applied to the display. */
- classes?: Computable>;
+ classes?: MaybeRefOrGetter>;
/** Styles that should be applied to the display. */
- style?: Computable;
+ style?: MaybeRefOrGetter;
/**
* The name of the layer, used on minimized tabs.
* Defaults to {@link BaseLayer.id}.
*/
- name?: Computable;
+ name?: MaybeRefOrGetter;
/**
* Whether or not the layer can be minimized.
* Defaults to true.
*/
- minimizable?: Computable;
+ minimizable?: MaybeRefOrGetter;
/**
* The layout of this layer's features.
* When the layer is open in {@link game/player.PlayerData.tabs}, but the tab is {@link Layer.minimized} this is the content that is displayed.
*/
- minimizedDisplay?: Computable;
+ minimizedDisplay?: MaybeRefOrGetter;
/**
* Whether or not to force the go back button to be hidden.
* If true, go back will be hidden regardless of {@link data/projInfo.allowGoBack}.
*/
- forceHideGoBack?: Computable;
+ forceHideGoBack?: MaybeRefOrGetter;
/**
* A CSS min-width value that is applied to the layer.
* Can be a number, in which case the unit is assumed to be px.
* Defaults to 600px.
*/
- minWidth?: Computable;
+ minWidth?: MaybeRefOrGetter;
}
/** The properties that are added onto a processed {@link LayerOptions} to create a {@link Layer} */
@@ -165,30 +162,45 @@ export interface BaseLayer {
}
/** An unit of game content. Displayed to the user as a tab or modal. */
-export type Layer = Replace<
- T & BaseLayer,
- {
- color: GetComputableType;
- display: GetComputableType;
- classes: GetComputableType;
- style: GetComputableType;
- name: GetComputableTypeWithDefault;
- minWidth: GetComputableTypeWithDefault;
- minimizable: GetComputableTypeWithDefault;
- minimizedDisplay: GetComputableType;
- forceHideGoBack: GetComputableType;
- }
->;
-
-/** A type that matches any valid {@link Layer} object. */
-export type GenericLayer = Replace<
- Layer,
- {
- name: ProcessedComputable;
- minWidth: ProcessedComputable;
- minimizable: ProcessedComputable