profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 6 Projects 2 Releases Packages Wiki Activity Actions

Implemented most of the basic features for new Board component

Browse source
This commit is contained in:
thepaperpilot 2021-08-19 00:25:49 -05:00
parent fbd01497e7
commit 0dcf417a31
13 changed files with 490 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
package-lock.json generated
View file

@ -13,6 +13,7 @@
"vue": "^3.2.2",
"vue-class-component": "^8.0.0-rc.1",
"vue-next-select": "^2.9.0",
"vue-panzoom": "^1.1.6",
"vue-sortable": "github:Netbel/vue-sortable#master-fix",
"vue-textarea-autosize": "^1.1.1",
"vue-transition-expand": "^0.1.0"
@ -14925,6 +14926,14 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
"node_modules/amator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
"integrity": "sha1-CMa2C8k67Cthu/wMTWd9MDI8wPE=",
"dependencies": {
"bezier-easing": "^2.0.3"
}
},
"node_modules/ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@ -15495,6 +15504,11 @@
"tweetnacl": "^0.14.3"
}
},
"node_modules/bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
"integrity": "sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY="
},
"node_modules/bfj": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
@ -22071,6 +22085,11 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
"node_modules/ngraph.events": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.1.tgz",
"integrity": "sha512-D4C+nXH/RFxioGXQdHu8ELDtC6EaCiNsZtih0IvyGN81OZSUby4jXoJ5+RNWasfsd0FnKxxpAROyUMzw64QNsw=="
},
"node_modules/nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@ -22736,6 +22755,16 @@
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
"dev": true
},
"node_modules/panzoom": {
"version": "9.4.2",
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.2.tgz",
"integrity": "sha512-sQLr0t6EmNFXpZHag0HQVtOKqF9xjF7iZdgWg3Ss1o7uh2QZLvcrz7S0Cl8M0d2TkPZ69JfPJdknXN3I0e/2aQ==",
"dependencies": {
"amator": "^1.1.0",
"ngraph.events": "^1.2.1",
"wheel": "^1.0.0"
}
},
"node_modules/parallel-transform": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
@ -27245,6 +27274,14 @@
"vue": "^3.0.0"
}
},
"node_modules/vue-panzoom": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/vue-panzoom/-/vue-panzoom-1.1.6.tgz",
"integrity": "sha512-yEE60C/gnc5NGL6YBD++CErD820va7fkBJE5dCWZZzXX2aMGklj/UKmtqu1u5xDkuOIjnGUr412LNHwOOE711w==",
"dependencies": {
"panzoom": "^9.4.1"
}
},
"node_modules/vue-sortable": {
"version": "0.1.3",
"resolved": "git+ssh://git@github.com/Netbel/vue-sortable.git#f4d4870ace71ea59bd79252eb2ec1cf6bfb02fe7",
@ -28083,6 +28120,11 @@
"node": ">=0.8.0"
}
},
"node_modules/wheel": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
"integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
},
"node_modules/which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@ -31140,6 +31182,14 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
"amator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
"integrity": "sha1-CMa2C8k67Cthu/wMTWd9MDI8wPE=",
"requires": {
"bezier-easing": "^2.0.3"
}
},
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@ -31576,6 +31626,11 @@
"tweetnacl": "^0.14.3"
}
},
"bezier-easing": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
"integrity": "sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY="
},
"bfj": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
@ -36803,6 +36858,11 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
"ngraph.events": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.1.tgz",
"integrity": "sha512-D4C+nXH/RFxioGXQdHu8ELDtC6EaCiNsZtih0IvyGN81OZSUby4jXoJ5+RNWasfsd0FnKxxpAROyUMzw64QNsw=="
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@ -37323,6 +37383,16 @@
"integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
"dev": true
},
"panzoom": {
"version": "9.4.2",
"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.2.tgz",
"integrity": "sha512-sQLr0t6EmNFXpZHag0HQVtOKqF9xjF7iZdgWg3Ss1o7uh2QZLvcrz7S0Cl8M0d2TkPZ69JfPJdknXN3I0e/2aQ==",
"requires": {
"amator": "^1.1.0",
"ngraph.events": "^1.2.1",
"wheel": "^1.0.0"
}
},
"parallel-transform": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
@ -41002,6 +41072,14 @@
"integrity": "sha512-GjX4pHqZXXitquDeSAtLaf85jXdMUOKyCNzo+EF3xRr4DebGwbST4CtmRvL0TX3EhwLHQjUlAc3JcJX+azpLHg==",
"requires": {}
},
"vue-panzoom": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/vue-panzoom/-/vue-panzoom-1.1.6.tgz",
"integrity": "sha512-yEE60C/gnc5NGL6YBD++CErD820va7fkBJE5dCWZZzXX2aMGklj/UKmtqu1u5xDkuOIjnGUr412LNHwOOE711w==",
"requires": {
"panzoom": "^9.4.1"
}
},
"vue-sortable": {
"version": "git+ssh://git@github.com/Netbel/vue-sortable.git#f4d4870ace71ea59bd79252eb2ec1cf6bfb02fe7",
"from": "vue-sortable@github:Netbel/vue-sortable#master-fix",
@ -41687,6 +41765,11 @@
"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
"dev": true
},
"wheel": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
"integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

1
package.json
View file

@ -13,6 +13,7 @@
"vue": "^3.2.2",
"vue-class-component": "^8.0.0-rc.1",
"vue-next-select": "^2.9.0",
"vue-panzoom": "^1.1.6",
"vue-sortable": "github:Netbel/vue-sortable#master-fix",
"vue-textarea-autosize": "^1.1.1",
"vue-transition-expand": "^0.1.0"

80
src/components/board/Board.vue Normal file
View file

@ -0,0 +1,80 @@
<template>
<panZoom
:style="style"
selector="#g1"
@init="onInit"
:options="{ initialZoom: 1, minZoom: 0.1, maxZoom: 10 }"
ref="stage"
>
<svg class="stage" width="100%" height="100%">
<g id="g1">
<BoardNode
v-for="(node, nodeIndex) in nodes"
:key="nodeIndex"
:index="nodeIndex"
:node="node"
:nodeType="board.types[node.type]"
/>
</g>
</svg>
</panZoom>
</template>
<script lang="ts">
import { layers } from "@/game/layers";
import player from "@/game/player";
import { Board } from "@/typings/features/board";
import { InjectLayerMixin } from "@/util/vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "Board",
mixins: [InjectLayerMixin],
props: {
id: {
type: [Number, String],
required: true
}
},
provide() {
return {
getZoomLevel: () => (this.$refs.stage as any).$panZoomInstance.getTransform().scale
};
},
computed: {
board(): Board {
return layers[this.layer].boards!.data[this.id];
},
style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [
{
width: this.board.width,
height: this.board.height
},
layers[this.layer].componentStyles?.board,
this.board.style
];
},
nodes() {
return player.layers[this.layer].boards[this.id];
}
},
methods: {
onInit: function(panzoomInstance) {
panzoomInstance.setTransformOrigin(null);
}
}
});
</script>
<style>
.vue-pan-zoom-scene {
width: 100%;
height: 100%;
cursor: move;
}
#g1 {
transition-duration: 0s;
}
</style>

203
src/components/board/BoardNode.vue Normal file
View file

@ -0,0 +1,203 @@
<template>
<g
class="boardnode"
:style="{ opacity: dragging ? 0.5 : 1 }"
:transform="`translate(${position.x},${position.y})`"
@mousedown="mouseDown"
>
<circle :r="size + 8" :fill="backgroundColor" stroke="#0F03" :stroke-width="2" />
<circle :r="size" :fill="fillColor" :stroke="outlineColor" :stroke-width="4" />
<circle
v-if="progressDisplay === ProgressDisplay.Fill"
:r="size * progress"
:fill="progressColor"
/>
<circle
v-else
:r="size + 4.5"
class="progressRing"
fill="transparent"
:stroke-dasharray="(size + 4.5) * 2 * Math.PI"
:stroke-width="5"
:stroke-dashoffset="(size + 4.5) * 2 * Math.PI - progress * (size + 4.5) * 2 * Math.PI"
:stroke="progressColor"
/>
<text :fill="titleColor" class="node-title">{{ title }}</text>
</g>
</template>
<script lang="ts">
import themes from "@/data/themes";
import { ProgressDisplay } from "@/game/enums";
import player from "@/game/player";
import { BoardNode, NodeType } from "@/typings/features/board";
import { InjectLayerMixin } from "@/util/vue";
import { defineComponent, PropType } from "vue";
// TODO will blindly use any T given (can't restrict it to S[R] because I can't figure out how
// to make it support narrowing the return type)
function getTypeProperty<T, S extends NodeType, R extends keyof S>(
nodeType: S,
node: BoardNode,
property: R
): S[R] extends Pick<
S,
{
[K in keyof S]-?: undefined extends S[K] ? never : K;
}[keyof S]
>
? T
: T | undefined {
return typeof nodeType[property] === "function"
? (nodeType[property] as (node: BoardNode) => T)(node)
: (nodeType[property] as T);
}
export default defineComponent({
name: "BoardNode",
mixins: [InjectLayerMixin],
inject: ["getZoomLevel"],
data() {
return {
ProgressDisplay,
lastMousePosition: { x: 0, y: 0 },
dragged: { x: 0, y: 0 },
dragging: false
};
},
props: {
index: {
type: Number,
required: true
},
node: {
type: Object as PropType<BoardNode>,
required: true
},
nodeType: {
type: Object as PropType<NodeType>,
required: true
}
},
computed: {
draggable(): boolean {
return getTypeProperty(this.nodeType, this.node, "draggable");
},
position(): { x: number; y: number } {
return this.draggable && this.dragging
? {
x: this.node.position.x + Math.round(this.dragged.x / 25) * 25,
y: this.node.position.y + Math.round(this.dragged.y / 25) * 25
}
: this.node.position;
},
size(): number {
return getTypeProperty(this.nodeType, this.node, "size");
},
title(): string {
return getTypeProperty(this.nodeType, this.node, "title");
},
progress(): number {
return getTypeProperty(this.nodeType, this.node, "progress") || 0;
},
backgroundColor(): string {
return themes[player.theme].variables["--background"];
},
outlineColor(): string {
return (
getTypeProperty(this.nodeType, this.node, "outlineColor") ||
themes[player.theme].variables["--separator"]
);
},
fillColor(): string {
return (
getTypeProperty(this.nodeType, this.node, "fillColor") ||
themes[player.theme].variables["--secondary-background"]
);
},
progressColor(): string {
return getTypeProperty(this.nodeType, this.node, "progressColor") || "none";
},
titleColor(): string {
return (
getTypeProperty(this.nodeType, this.node, "titleColor") ||
themes[player.theme].variables["--color"]
);
},
progressDisplay(): ProgressDisplay {
return (
getTypeProperty(this.nodeType, this.node, "progressDisplay") ||
ProgressDisplay.Outline
);
}
},
methods: {
mouseDown(e: MouseEvent) {
if (this.draggable) {
e.preventDefault();
e.stopPropagation();
this.lastMousePosition = {
x: e.clientX,
y: e.clientY
};
this.dragged = { x: 0, y: 0 };
this.dragging = true;
document.onmouseup = this.mouseUp;
document.onmousemove = this.mouseMove;
}
},
mouseMove(e: MouseEvent) {
if (this.draggable && this.dragging) {
e.preventDefault();
e.stopPropagation();
const zoom = (this.getZoomLevel as () => number)();
console.log(zoom);
this.dragged.x += (e.clientX - this.lastMousePosition.x) / zoom;
this.dragged.y += (e.clientY - this.lastMousePosition.y) / zoom;
this.lastMousePosition = {
x: e.clientX,
y: e.clientY
};
}
},
mouseUp(e: MouseEvent) {
if (this.draggable && this.dragging) {
e.preventDefault();
e.stopPropagation();
let node = player.layers[this.nodeType.layer].boards[this.nodeType.id][this.index];
node.position.x += Math.round(this.dragged.x / 25) * 25;
node.position.y += Math.round(this.dragged.y / 25) * 25;
this.dragging = false;
document.onmouseup = null;
document.onmousemove = null;
}
}
}
});
</script>
<style scoped>
.boardnode {
cursor: pointer;
transition-duration: 0s;
}
.node-title {
text-anchor: middle;
dominant-baseline: middle;
font-family: monospace;
font-size: 200%;
}
.progressRing {
transform: rotate(-90deg);
}
</style>

2
src/components/index.ts
View file

@ -6,6 +6,7 @@ import VueTextareaAutosize from "vue-textarea-autosize";
import Sortable from "vue-sortable";
import VueNextSelect from "vue-next-select";
import "vue-next-select/dist/index.css";
import panZoom from "vue-panzoom";
import { App } from "vue";
export function registerComponents(vue: App): void {
@ -23,4 +24,5 @@ export function registerComponents(vue: App): void {
vue.use(VueTextareaAutosize);
vue.use(Sortable);
vue.component("vue-select", VueNextSelect);
vue.use(panZoom);
}

5
src/game/enums.ts
View file

@ -28,3 +28,8 @@ export enum ImportingStatus {
WrongID = "WRONG_ID",
Force = "FORCE"
}
export enum ProgressDisplay {
Outline = "Outline",
Fill = "Fill"
}

29
src/game/layers.ts
View file

@ -1,5 +1,6 @@
import { CacheableFunction } from "@/typings/cacheableFunction";
import { Achievement } from "@/typings/features/achievement";
import { Board } from "@/typings/features/board";
import { Buyable } from "@/typings/features/buyable";
import { Challenge } from "@/typings/features/challenge";
import { Clickable } from "@/typings/features/clickable";
@ -23,6 +24,7 @@ import Decimal, { DecimalSource } from "@/util/bignum";
import { isFunction } from "@/util/common";
import {
defaultLayerProperties,
getStartingBoards,
getStartingBuyables,
getStartingChallenges,
getStartingClickables,
@ -32,6 +34,7 @@ import { createGridProxy, createLayerProxy } from "@/util/proxies";
import { applyPlayerData } from "@/util/save";
import clone from "lodash.clonedeep";
import { isRef } from "vue";
import { ProgressDisplay } from "./enums";
import { default as playerProxy } from "./player";
export const layers: Record<string, Readonly<Layer>> = {};
@ -70,6 +73,7 @@ export function addLayer(layer: RawLayer, player?: Partial<PlayerData>): void {
buyables: getStartingBuyables(layer.buyables?.data),
clickables: getStartingClickables(layer.clickables?.data),
challenges: getStartingChallenges(layer.challenges?.data),
boards: getStartingBoards(layer.boards?.data),
grids: {},
confirmRespecBuyables: false,
...(layer.startData?.() || {})
@ -423,6 +427,31 @@ export function addLayer(layer: RawLayer, player?: Partial<PlayerData>): void {
layer.grids.data[id] = createGridProxy(layer.grids.data[id]) as Grid;
}
}
if (layer.boards) {
setupFeatures<NonNullable<RawLayer["boards"]>, Board>(layer.id, layer.boards);
for (const id in layer.boards.data) {
setDefault(layer.boards.data[id], "width", "100%");
setDefault(layer.boards.data[id], "height", "400px");
for (const nodeType in layer.boards.data[id].types) {
layer.boards.data[id].types[nodeType].layer = layer.id;
layer.boards.data[id].types[nodeType].id = id;
layer.boards.data[id].types[nodeType].type = nodeType;
setDefault(layer.boards.data[id].types[nodeType], "size", 50);
setDefault(layer.boards.data[id].types[nodeType], "draggable", false);
setDefault(layer.boards.data[id].types[nodeType], "canAccept", false);
setDefault(
layer.boards.data[id].types[nodeType],
"progressDisplay",
ProgressDisplay.Fill
);
setDefault(layer.boards.data[id].types[nodeType], "nodes", function() {
return playerProxy.layers[this.layer].boards[this.id].filter(
node => node.type === this.type
);
});
}
}
}
if (layer.subtabs) {
layer.activeSubtab = function() {
if (

45
src/typings/features/board.d.ts vendored Normal file
View file

@ -0,0 +1,45 @@
import { State } from "../state";
import { Feature, RawFeature } from "./feature";
export interface BoardNode {
position: {
x: number;
y: number;
};
type: string;
data?: State;
}
export interface CardOption {
text: string;
selected: (node: BoardNode) => void;
}
export interface Board extends Feature {
startNodes: () => BoardNode[];
style?: Partial<CSSStyleDeclaration>;
height: string;
width: string;
types: Record<string, NodeType>;
}
export type RawBoard = Omit<RawFeature<Board>, "types"> & {
startNodes: () => BoardNode[];
types: Record<string, RawFeature<NodeType>>;
};
export interface NodeType extends Feature {
tooltip?: string | ((node: BoardNode) => string);
title: string | ((node: BoardNode) => string);
size: number | ((node: BoardNode) => number);
draggable: boolean | ((node: BoardNode) => boolean);
canAccept: boolean | ((node: BoardNode, otherNode: BoardNode) => boolean);
progress?: number | ((node: BoardNode) => number);
progressDisplay: ProgressDisplay | ((node: BoardNode) => ProgressDisplay);
progressColor: string | ((node: BoardNode) => string);
fillColor?: string | ((node: BoardNode) => string);
outlineColor?: string | ((node: BoardNode) => string);
titleColor?: string | ((node: BoardNode) => string);
onClick: (node: BoardNode) => void;
nodes: BoardNode[];
}

4
src/typings/layer.d.ts vendored
View file

@ -3,6 +3,7 @@ import Decimal, { DecimalSource } from "@/util/bignum";
import { CoercableComponent } from "./component";
import { Achievement } from "./features/achievement";
import { Bar } from "./features/bar";
import { Board, RawBoard } from "./features/board";
import { Buyable } from "./features/buyable";
import { Challenge } from "./features/challenge";
import { Clickable } from "./features/clickable";
@ -31,6 +32,7 @@ export interface RawLayer extends RawFeature<Layer> {
challenges?: RawGridFeatures<NonNullable<Layer["challenges"]>, Challenge>;
clickables?: RawGridFeatures<NonNullable<Layer["clickables"]>, Clickable>;
grids?: RawFeatures<NonNullable<Layer["grids"]>, Grid>;
boards?: RawFeatures<NonNullable<Layer["boards"]>, Board, RawBoard>;
hotkeys?: RawFeature<Hotkey>[];
infoboxes?: RawFeatures<NonNullable<Layer["infoboxes"]>, Infoboxe>;
milestones?: RawFeatures<NonNullable<Layer["milestones"]>, Milestone>;
@ -108,6 +110,7 @@ export interface Layer extends Feature {
showMasterButton?: boolean;
};
grids?: Features<Grid>;
boards?: Features<Board>;
hotkeys?: Hotkey[];
infoboxes?: Features<Infobox>;
milestones?: Features<Milestone>;
@ -142,5 +145,6 @@ export interface ComponentStyles {
"prestige-button"?: Partial<CSSStyleDeclaration>;
"respec-button"?: Partial<CSSStyleDeclaration>;
upgrade?: Partial<CSSStyleDeclaration>;
board?: Partial<CSSStyleDeclaration>;
"tab-button"?: Partial<CSSStyleDeclaration>;
}

18
src/typings/player.d.ts vendored
View file

@ -1,6 +1,7 @@
import { Themes } from "@/data/themes";
import { DecimalSource } from "@/lib/break_eternity";
import Decimal from "@/util/bignum";
import { BoardNode } from "./features/board";
import { MilestoneDisplay } from "./features/milestone";
import { State } from "./state";
@ -53,14 +54,15 @@ export interface LayerSaveData {
unlockOrder?: number;
forceTooltip?: boolean;
resetTime: Decimal;
upgrades: Array<string | number>;
achievements: Array<string | number>;
milestones: Array<string | number>;
infoboxes: Record<string | number, boolean>;
buyables: Record<string | number, Decimal>;
clickables: Record<string | number, State>;
challenges: Record<string | number, Decimal>;
grids: Record<string | number, Record<string, number, State>>;
upgrades: Array<string>;
achievements: Array<string>;
milestones: Array<string>;
infoboxes: Record<string, boolean>;
buyables: Record<string, Decimal>;
clickables: Record<string, State>;
challenges: Record<string, Decimal>;
grids: Record<string, Record<string, State>>;
boards: Record<string, Array<BoardNode>>;
confirmRespecBuyables: boolean;
[index: string]: unknown;
}

14
src/typings/theme.d.ts vendored
View file

@ -1,6 +1,18 @@
export interface Theme {
variables: {
[index: string]: string;
"--background": string;
"--background-tooltip": string;
"--secondary-background": string;
"--color": string;
"--points": string;
"--locked": string;
"--bought": string;
"--link": string;
"--separator": string;
"--border-radius": string;
"--danger": string;
"--modal-border": string;
"--feature-margin": string;
};
stackedInfoboxes: boolean;
floatingTabs: boolean;

15
src/util/layers.ts
View file

@ -1,6 +1,7 @@
import { hotkeys, layers } from "@/game/layers";
import player from "@/game/player";
import { CacheableFunction } from "@/typings/cacheableFunction";
import { Board, BoardNode, RawBoard } from "@/typings/features/board";
import { Buyable } from "@/typings/features/buyable";
import { Challenge } from "@/typings/features/challenge";
import { Clickable } from "@/typings/features/clickable";
@ -70,6 +71,20 @@ export function getStartingChallenges(
: {};
}
export function getStartingBoards(
boards?: Record<string, Board> | Record<string, RawBoard> | undefined
): Record<string, Array<BoardNode>> {
return boards
? Object.keys(boards).reduce((acc: Record<string, Array<BoardNode>>, curr: string): Record<
string,
Array<BoardNode>
> => {
acc[curr] = boards[curr].startNodes?.() || [];
return acc;
}, {})
: {};
}
export function resetLayerData(layer: string, keep: Array<string> = []): void {
keep.push("unlocked", "forceTooltip", "noRespecConfirm");
const keptData = keep.reduce((acc: Record<string, any>, curr: string): Record<string, any> => {

1
src/util/proxies.ts
View file

@ -13,7 +13,6 @@ export function createLayerProxy(object: Record<string, any>): Record<string, an
return objectProxy;
}
// TODO cache grid values? Currently they'll be calculated every render they're visible
export function createGridProxy(object: Record<string, any>): Record<string, any> {
if (object.isProxy) {
console.warn(