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

WIP: Feature Rewrite #87

Draft
thepaperpilot wants to merge 35 commits from feat/ure-rewrite into main
pull from: feat/ure-rewrite
merge into: profectus:main
Conversation 0 Commits 35 Files changed 132 +13171 -15657
132 changed files with 13171 additions and 15657 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore Normal file
View file

@ -0,0 +1 @@
.eslintrc.cjs

9
.eslintrc.js → .eslintrc.cjs
View file

@ -5,6 +5,11 @@ module.exports = {
env: {
node: true
},
parser: '@typescript-eslint/parser',
plugins: ["@typescript-eslint"],
overrides: [
{
files: ['*.ts', '*.tsx'],
extends: [
"plugin:vue/vue3-essential",
"@vue/eslint-config-typescript/recommended",
@ -12,8 +17,10 @@ module.exports = {
],
parserOptions: {
ecmaVersion: 2020,
project: "tsconfig.json"
project: "./tsconfig.json"
},
}
],
ignorePatterns: ["src/lib"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",

2
.forgejo/workflows/deploy.yaml
View file

@ -8,6 +8,8 @@ jobs:
build-and-deploy:
if: github.repository != 'profectus-engine/Profectus' # Don't build placeholder mod on main repo
runs-on: docker
container:
image: node:21-bullseye
steps:
- name: Setup RSync
run: |

6
.forgejo/workflows/test.yaml
View file

@ -7,15 +7,13 @@ on:
jobs:
test:
runs-on: docker
container:
image: node:21-bullseye
steps:
- uses: actions/checkout@v3
with:
submodules: recursive
- name: Use Node.js 16.x
uses: actions/setup-node@v3
with:
node-version: 16.x
- run: npm ci
- run: npm run build --if-present
- run: npm test

4
.github/workflows/test.yml vendored
View file

@ -12,10 +12,10 @@ jobs:
- uses: actions/checkout@v3
with:
submodules: recursive
- name: Use Node.js 16.x
- name: Use Node.js 21.x
uses: actions/setup-node@v3
with:
node-version: 16.x
node-version: 21.x
- run: npm ci
- run: npm run build --if-present
- run: npm test

1
index.html
View file

@ -8,6 +8,7 @@
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" type="image/png" sizes="48x48" href="/favicon.ico">
<link rel="mask-icon" href="/favicon.svg" color="#2E3440">
<meta name="theme-color" content="#2E3440">
<title>Profectus</title>

7145
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

67
package.json
View file

@ -2,6 +2,7 @@
"name": "profectus",
"version": "0.6.2",
"private": true,
"type": "module",
"scripts": {
"start": "vite",
"dev": "vite",
@ -14,47 +15,51 @@
"lint:fix": "eslint --fix --max-warnings 0 src"
},
"dependencies": {
"@fontsource/material-icons": "^4.5.4",
"@fontsource/roboto-mono": "^4.5.8",
"@pixi/app": "~6.3.2",
"@pixi/constants": "~6.3.2",
"@pixi/core": "~6.3.2",
"@pixi/display": "~6.3.2",
"@pixi/math": "~6.3.2",
"@fontsource/material-icons": "^5.1.0",
"@fontsource/roboto-mono": "^5.1.0",
"@pixi/app": "^6.5.10",
"@pixi/constants": "~6.5.10",
"@pixi/core": "^6.5.10",
"@pixi/display": "~6.5.10",
"@pixi/math": "~6.5.10",
"@pixi/particle-emitter": "^5.0.7",
"@pixi/sprite": "~6.3.2",
"@pixi/ticker": "~6.3.2",
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@pixi/sprite": "~6.5.10",
"@pixi/ticker": "~6.5.10",
"@vitejs/plugin-vue": "^5.1.4",
"@vitejs/plugin-vue-jsx": "^4.0.1",
"is-plain-object": "^5.0.0",
"lz-string": "^1.4.4",
"nanoevents": "^6.0.2",
"lz-string": "^1.5.0",
"nanoevents": "^9.0.0",
"unofficial-galaxy-sdk": "git+https://code.incremental.social/thepaperpilot/unofficial-galaxy-sdk.git#1.0.1",
"vite": "^2.9.12",
"vite-plugin-pwa": "^0.12.0",
"vite-tsconfig-paths": "^3.5.0",
"vue": "^3.2.26",
"vue-next-select": "^2.10.2",
"vite": "^5.1.8",
"vite-plugin-pwa": "^0.20.5",
"vite-tsconfig-paths": "^4.3.0",
"vue": "^3.5.12",
"vue-next-select": "^2.10.5",
"vue-panzoom": "https://github.com/thepaperpilot/vue-panzoom.git",
"vue-textarea-autosize": "^1.1.1",
"vue-toastification": "^2.0.0-rc.1",
"vue-transition-expand": "^0.1.0",
"vue-toastification": "^2.0.0-rc.5",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@ivanv/vue-collapse-transition": "^1.0.2",
"@rushstack/eslint-patch": "^1.1.0",
"@types/lz-string": "^1.3.34",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"eslint": "^8.6.0",
"jsdom": "^20.0.0",
"prettier": "^2.5.1",
"typescript": "^5.0.2",
"vitest": "^1.3.1",
"vue-tsc": "^0.38.1"
"@rushstack/eslint-patch": "^1.7.2",
"@types/lz-string": "^1.5.0",
"@types/node": "^22.7.6",
"@typescript-eslint/parser": "^7.2.0",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^13.0.0",
"eslint": "^8.57.0",
"jsdom": "^24.0.0",
"prettier": "^3.2.5",
"typescript": "^5.4.2",
"vitest": "^1.4.0",
"vue-tsc": "^2.0.6"
},
"optionalDependencies": {
"@rollup/rollup-linux-x64-gnu": "^4.24.0"
},
"engines": {
"node": "16.x"
"node": "21.x"
}
}

13
src/App.vue
View file

@ -1,5 +1,7 @@
<template>
<div v-if="appErrors.length > 0" class="error-container" :style="theme"><Error :errors="appErrors" /></div>
<div v-if="appErrors.length > 0" class="error-container" :style="theme">
<Error :errors="appErrors" />
</div>
<template v-else>
<div id="modal-root" :style="theme" />
<div class="app" :style="theme" :class="{ useHeader }">
@ -10,7 +12,7 @@
<GameOverScreen />
<NaNScreen />
<CloudSaveResolver />
<component :is="gameComponent" />
<GameComponent />
</div>
</template>
</template>
@ -22,9 +24,8 @@ import AddictionWarning from "components/modals/AddictionWarning.vue";
import CloudSaveResolver from "components/modals/CloudSaveResolver.vue";
import GameOverScreen from "components/modals/GameOverScreen.vue";
import NaNScreen from "components/modals/NaNScreen.vue";
import { jsx } from "features/feature";
import state from "game/state";
import { coerceComponent, render } from "util/vue";
import { render } from "util/vue";
import type { CSSProperties } from "vue";
import { computed, toRef, unref } from "vue";
import Game from "./components/Game.vue";
@ -40,9 +41,7 @@ const theme = computed(() => themes[settings.theme].variables as CSSProperties);
const showTPS = toRef(settings, "showTPS");
const appErrors = toRef(state, "errors");
const gameComponent = computed(() => {
return coerceComponent(jsx(() => (<>{gameComponents.map(render)}</>)));
});
const GameComponent = () => gameComponents.map(c => render(c));
</script>
<style scoped>

33
src/components/Game.vue
View file

@ -9,9 +9,9 @@
>
<Nav v-if="index === 0 && !useHeader" />
<div class="inner-tab">
<Layer
<LayerVue
v-if="layerKeys.includes(tab)"
v-bind="gatherLayerProps(layers[tab]!)"
v-bind="gatherLayerProps(layers[tab])"
:index="index"
@set-minimized="(value: boolean) => (layers[tab]!.minimized.value = value)"
/>
@ -23,20 +23,37 @@
<script setup lang="ts">
import projInfo from "data/projInfo.json";
import type { GenericLayer } from "game/layers";
import { layers } from "game/layers";
import { type Layer, layers } from "game/layers";
import player from "game/player";
import { computed, toRef, unref } from "vue";
import Layer from "./Layer.vue";
import LayerVue from "./Layer.vue";
import Nav from "./Nav.vue";
const tabs = toRef(player, "tabs");
const layerKeys = computed(() => Object.keys(layers));
const useHeader = projInfo.useHeader;
function gatherLayerProps(layer: GenericLayer) {
const { display, minimized, name, color, minimizable, nodes, minimizedDisplay } = layer;
return { display, minimized, name, color, minimizable, nodes, minimizedDisplay };
function gatherLayerProps(layer: Layer) {
const {
display,
name,
color,
minimizable,
minimizedDisplay,
minimized,
nodes,
forceHideGoBack
} = layer;
return {
display,
name,
color,
minimizable,
minimizedDisplay,
minimized,
nodes,
forceHideGoBack
};
}
</script>

4
src/components/Hotkey.vue
View file

@ -12,11 +12,11 @@
</template>
<script setup lang="ts">
import { GenericHotkey } from "features/hotkey";
import { Hotkey } from "features/hotkey";
import { watchEffect } from "vue";
const props = defineProps<{
hotkey: GenericHotkey;
hotkey: Hotkey;
}>();
let key = "";

72
src/components/Layer.vue
View file

@ -8,12 +8,12 @@
v-if="unref(minimized)"
@click="$emit('setMinimized', false)"
>
<component v-if="minimizedComponent" :is="minimizedComponent" />
<MinimizedComponent v-if="minimizedDisplay" />
<div v-else>{{ unref(name) }}</div>
</button>
<div class="layer-tab" :class="{ showGoBack }" v-else>
<Context @update-nodes="updateNodes">
<component :is="component" />
<Component />
</Context>
</div>
@ -23,51 +23,31 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import projInfo from "data/projInfo.json";
import type { CoercableComponent } from "features/feature";
import type { FeatureNode } from "game/layers";
import { Layer, type FeatureNode } from "game/layers";
import player from "game/player";
import { computeComponent, computeOptionalComponent, processedPropType, unwrapRef } from "util/vue";
import { PropType, Ref, computed, defineComponent, onErrorCaptured, ref, toRefs, unref } from "vue";
import { render } from "util/vue";
import { computed, onErrorCaptured, ref, unref } from "vue";
import Context from "./Context.vue";
import ErrorVue from "./Error.vue";
export default defineComponent({
components: { Context, ErrorVue },
props: {
index: {
type: Number,
required: true
},
display: {
type: processedPropType<CoercableComponent>(Object, String, Function),
required: true
},
minimizedDisplay: processedPropType<CoercableComponent>(Object, String, Function),
minimized: {
type: Object as PropType<Ref<boolean>>,
required: true
},
name: {
type: processedPropType<string>(String),
required: true
},
color: processedPropType<string>(String),
minimizable: processedPropType<boolean>(Boolean),
nodes: {
type: Object as PropType<Ref<Record<string, FeatureNode | undefined>>>,
required: true
}
},
emits: ["setMinimized"],
setup(props) {
const { display, index, minimized, minimizedDisplay } = toRefs(props);
const props = defineProps<{
display: Layer["display"];
minimizedDisplay: Layer["minimizedDisplay"];
minimized: Layer["minimized"];
name: Layer["name"];
color: Layer["color"];
minimizable: Layer["minimizable"];
nodes: Layer["nodes"];
forceHideGoBack: Layer["forceHideGoBack"];
index: number;
}>();
const component = computeComponent(display);
const minimizedComponent = computeOptionalComponent(minimizedDisplay);
const Component = () => render(props.display);
const MinimizedComponent = () => props.minimizedDisplay == null ? undefined : render(props.minimizedDisplay);
const showGoBack = computed(
() => projInfo.allowGoBack && index.value > 0 && !unwrapRef(minimized)
() => projInfo.allowGoBack && !unref(props.forceHideGoBack) && props.index > 0 && !unref(props.minimized)
);
function goBack() {
@ -86,18 +66,6 @@ export default defineComponent({
);
return false;
});
return {
component,
minimizedComponent,
showGoBack,
updateNodes,
unref,
goBack,
errors
};
}
});
</script>
<style scoped>

2
src/components/Nav.vue
View file

@ -97,7 +97,7 @@
<script setup lang="ts">
import Changelog from "data/Changelog.vue";
import projInfo from "data/projInfo.json";
import Tooltip from "features/tooltips/Tooltip.vue";
import Tooltip from "wrappers/tooltips/Tooltip.vue";
import settings from "game/settings";
import { Direction } from "util/common";
import { galaxy, syncedSaves } from "util/galaxy";

9
src/components/Node.vue
View file

@ -4,10 +4,9 @@
<script setup lang="ts">
import { RegisterNodeInjectionKey, UnregisterNodeInjectionKey } from "game/layers";
import { computed, inject, onUnmounted, shallowRef, toRefs, unref, watch } from "vue";
import { computed, inject, onUnmounted, shallowRef, toRef, unref, watch } from "vue";
const _props = defineProps<{ id: string }>();
const props = toRefs(_props);
const props = defineProps<{ id: string }>();
// eslint-disable-next-line @typescript-eslint/no-empty-function
const register = inject(RegisterNodeInjectionKey, () => {});
@ -17,7 +16,7 @@ const unregister = inject(UnregisterNodeInjectionKey, () => {});
const node = shallowRef<HTMLElement | null>(null);
const parentNode = computed(() => node.value && node.value.parentElement);
watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {
watch([parentNode, toRef(props, "id")], ([newNode, newID], [prevNode, prevID]) => {
if (prevNode) {
unregister(unref(prevID));
}
@ -26,7 +25,7 @@ watch([parentNode, props.id], ([newNode, newID], [prevNode, prevID]) => {
}
});
onUnmounted(() => unregister(unref(props.id)));
onUnmounted(() => unregister(props.id));
</script>
<style scoped>

15
src/components/common/features.css
View file

@ -1,6 +1,9 @@
.feature:not(li),
.feature:not(li) button {
.feature {
position: relative;
}
button.feature,
.feature button {
padding: 5px;
border-radius: var(--border-radius);
border: 2px solid rgba(0, 0, 0, 0.125);
@ -11,13 +14,13 @@
transition: all 0.5s, z-index 0s 0.5s;
}
.can,
button.can,
.can button {
background-color: var(--layer-color);
cursor: pointer;
}
.can:hover,
button.can:hover,
.can:hover button {
transform: scale(1.15, 1.15);
box-shadow: 0 0 20px var(--points);
@ -25,13 +28,13 @@
transition: all 0.5s, z-index 0s;
}
.locked,
button.locked,
.locked button {
background-color: var(--locked);
cursor: not-allowed;
}
.bought,
button.bought,
.bought button {
background-color: var(--bought);
cursor: default;

180
src/components/common/table.css
View file

@ -20,11 +20,6 @@
margin: 0 10px;
}
.row > :not(.feature) {
margin: 0;
display: flex;
}
.col {
display: flex;
flex-flow: column wrap;
@ -34,28 +29,152 @@
margin: 10px 0;
}
.row.mergeAdjacent > .feature:not(.dontMerge),
.row.mergeAdjacent > .tooltip-container > .feature:not(.dontMerge) {
.row.mergeAdjacent *,
.row.mergeAdjacent button.feature,
.row.mergeAdjacent .feature button {
margin-left: 0;
margin-right: 0;
}
.row.mergeAdjacent button.feature,
.row.mergeAdjacent .feature button {
border-radius: 0;
}
.row.mergeAdjacent > .feature:not(.dontMerge):first-child,
.row.mergeAdjacent > .tooltip-container:first-child > .feature:not(.dontMerge) {
.row.mergeAdjacent > button.feature:first-child,
.row.mergeAdjacent > .feature:first-child button,
.row.mergeAdjacent > :first-child button.feature,
.row.mergeAdjacent > :first-child .feature button {
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.row.mergeAdjacent > .feature:not(.dontMerge):last-child,
.row.mergeAdjacent > .tooltip-container:last-child > .feature:not(.dontMerge) {
.row.mergeAdjacent > button.feature:last-child,
.row.mergeAdjacent > .feature:last-child button,
.row.mergeAdjacent > :last-child button.feature,
.row.mergeAdjacent > :last-child .feature button {
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.row.mergeAdjacent > .feature:not(.dontMerge):first-child:last-child,
.row.mergeAdjacent > .tooltip-container:first-child:last-child > .feature:not(.dontMerge) {
.row.mergeAdjacent > button.feature:first-child:last-child,
.row.mergeAdjacent > .feature:first-child:last-child button,
.row.mergeAdjacent > :first-child:last-child button.feature,
.row.mergeAdjacent > :first-child:last-child .feature button {
border-radius: var(--border-radius);
}
.col.mergeAdjacent *,
.col.mergeAdjacent button.feature,
.col.mergeAdjacent .feature button {
margin-top: 0;
margin-bottom: 0;
}
.col.mergeAdjacent button.feature,
.col.mergeAdjacent .feature button {
border-radius: 0;
}
.col.mergeAdjacent > button.feature:first-child,
.col.mergeAdjacent > .feature:first-child button,
.col.mergeAdjacent > :first-child button.feature,
.col.mergeAdjacent > :first-child .feature button {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.col.mergeAdjacent > button.feature:last-child,
.col.mergeAdjacent > .feature:last-child button,
.col.mergeAdjacent > :last-child button.feature,
.col.mergeAdjacent > :last-child .feature button {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.col.mergeAdjacent > button.feature:first-child:last-child,
.col.mergeAdjacent > .feature:first-child:last-child button,
.col.mergeAdjacent > :first-child:last-child button.feature,
.col.mergeAdjacent > :first-child:last-child .feature button {
border-radius: var(--border-radius);
}
.col.mergeAdjacent > .table > .row.mergeAdjacent:first-child > button.feature:not(:first-child):not(:last-child),
.col.mergeAdjacent > .table > .row.mergeAdjacent:first-child > .feature:not(:first-child):not(:last-child) button,
.col.mergeAdjacent > .table > .row.mergeAdjacent:first-child > :not(:first-child):not(:last-child) button.feature,
.col.mergeAdjacent > .table > .row.mergeAdjacent:first-child > :not(:first-child):not(:last-child) .feature button,
.col.mergeAdjacent > .table > .row.mergeAdjacent:last-child > button.feature:not(:first-child):not(:last-child),
.col.mergeAdjacent > .table > .row.mergeAdjacent:last-child > .feature:not(:first-child):not(:last-child) button,
.col.mergeAdjacent > .table > .row.mergeAdjacent:last-child > :not(:first-child):not(:last-child) button.feature,
.col.mergeAdjacent > .table > .row.mergeAdjacent:last-child > :not(:first-child):not(:last-child) .feature button
.col.mergeAdjacent > .table:not(:first-child):not(:last-child) > .row.mergeAdjacent > button.feature,
.col.mergeAdjacent > .table:not(:first-child):not(:last-child) > .row.mergeAdjacent > .feature button,
.col.mergeAdjacent > .table:not(:first-child):not(:last-child) > .row.mergeAdjacent > * button.feature,
.col.mergeAdjacent > .table:not(:first-child):not(:last-child) > .row.mergeAdjacent > * .feature button
.row.mergeAdjacent > .table > .col.mergeAdjacent:first-child > button.feature:not(:first-child):not(:last-child),
.row.mergeAdjacent > .table > .col.mergeAdjacent:first-child > .feature:not(:first-child):not(:last-child) button,
.row.mergeAdjacent > .table > .col.mergeAdjacent:first-child > :not(:first-child):not(:last-child) button.feature,
.row.mergeAdjacent > .table > .col.mergeAdjacent:first-child > :not(:first-child):not(:last-child) .feature button,
.row.mergeAdjacent > .table > .col.mergeAdjacent:last-child > button.feature:not(:first-child):not(:last-child),
.row.mergeAdjacent > .table > .col.mergeAdjacent:last-child > .feature:not(:first-child):not(:last-child) button,
.row.mergeAdjacent > .table > .col.mergeAdjacent:last-child > :not(:first-child):not(:last-child) button.feature,
.row.mergeAdjacent > .table > .col.mergeAdjacent:last-child > :not(:first-child):not(:last-child) .feature button
.row.mergeAdjacent > .table:not(:first-child):not(:last-child) > .col.mergeAdjacent > button.feature,
.row.mergeAdjacent > .table:not(:first-child):not(:last-child) > .col.mergeAdjacent > .feature button,
.row.mergeAdjacent > .table:not(:first-child):not(:last-child) > .col.mergeAdjacent > * button.feature,
.row.mergeAdjacent > .table:not(:first-child):not(:last-child) > .col.mergeAdjacent > * .feature button {
border-radius: 0;
}
.col.mergeAdjacent > .table:first-child > .row.mergeAdjacent > button.feature:first-child,
.col.mergeAdjacent > .table:first-child > .row.mergeAdjacent > .feature:first-child button,
.col.mergeAdjacent > .table:first-child > .row.mergeAdjacent > :first-child button.feature,
.col.mergeAdjacent > .table:first-child > .row.mergeAdjacent > :first-child .feature button,
.row.mergeAdjacent > .table:first-child > .col.mergeAdjacent > button.feature:first-child,
.row.mergeAdjacent > .table:first-child > .col.mergeAdjacent > .feature:first-child button,
.row.mergeAdjacent > .table:first-child > .col.mergeAdjacent > :first-child button.feature,
.row.mergeAdjacent > .table:first-child > .col.mergeAdjacent > :first-child .feature button {
border-radius: var(--border-radius) 0 0 0;
}
.col.mergeAdjacent > .table:first-child > .row.mergeAdjacent > button.feature:last-child,
.col.mergeAdjacent > .table:first-child > .row.mergeAdjacent > .feature:last-child button,
.col.mergeAdjacent > .table:first-child > .row.mergeAdjacent > :last-child button.feature,
.col.mergeAdjacent > .table:first-child > .row.mergeAdjacent > :last-child .feature button,
.row.mergeAdjacent > .table:first-child > .col.mergeAdjacent > button.feature:last-child,
.row.mergeAdjacent > .table:first-child > .col.mergeAdjacent > .feature:last-child button,
.row.mergeAdjacent > .table:first-child > .col.mergeAdjacent > :last-child button.feature,
.row.mergeAdjacent > .table:first-child > .col.mergeAdjacent > :last-child .feature button {
border-radius: 0 var(--border-radius) 0 0;
}
.col.mergeAdjacent > .table:last-child > .row.mergeAdjacent > button.feature:last-child,
.col.mergeAdjacent > .table:last-child > .row.mergeAdjacent > .feature:last-child button,
.col.mergeAdjacent > .table:last-child > .row.mergeAdjacent > :last-child button.feature,
.col.mergeAdjacent > .table:last-child > .row.mergeAdjacent > :last-child .feature button,
.row.mergeAdjacent > .table:last-child > .col.mergeAdjacent > button.feature:last-child,
.row.mergeAdjacent > .table:last-child > .col.mergeAdjacent > .feature:last-child button,
.row.mergeAdjacent > .table:last-child > .col.mergeAdjacent > :last-child button.feature,
.row.mergeAdjacent > .table:last-child > .col.mergeAdjacent > :last-child .feature button {
border-radius: 0 0 var(--border-radius) 0;
}
.col.mergeAdjacent > .table:last-child > .row.mergeAdjacent > button.feature:first-child,
.col.mergeAdjacent > .table:last-child > .row.mergeAdjacent > .feature:first-child button,
.col.mergeAdjacent > .table:last-child > .row.mergeAdjacent > :first-child button.feature,
.col.mergeAdjacent > .table:last-child > .row.mergeAdjacent > :first-child .feature button,
.row.mergeAdjacent > .table:last-child > .col.mergeAdjacent > button.feature:first-child,
.row.mergeAdjacent > .table:last-child > .col.mergeAdjacent > .feature:first-child button,
.row.mergeAdjacent > .table:last-child > .col.mergeAdjacent > :first-child button.feature,
.row.mergeAdjacent > .table:last-child > .col.mergeAdjacent > :first-child .feature button {
border-radius: 0 0 0 var(--border-radius);
}
.row-grid.mergeAdjacent > .feature:not(.dontMerge),
.row-grid.mergeAdjacent > .tooltip-container > .feature:not(.dontMerge) {
margin-left: 0;
@ -91,38 +210,3 @@
.table-grid > .row-grid.mergeAdjacent:last-child > .feature:not(.dontMerge):last-child {
border-radius: 0 0 var(--border-radius) 0;
}
/*
TODO how to implement mergeAdjacent for grids?
.row.mergeAdjacent + .row.mergeAdjacent > .feature:not(.dontMerge) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
*/
.col.mergeAdjacent .feature:not(.dontMerge) {
margin-top: 0;
margin-bottom: 0;
border-radius: 0;
}
.col.mergeAdjacent .feature:not(.dontMerge):first-child {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.col.mergeAdjacent .feature:not(.dontMerge):last-child {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.col.mergeAdjacent .feature:not(.dontMerge):first-child:last-child {
border-radius: var(--border-radius);
}
/*
TODO how to implement mergeAdjacent for grids?
.col.mergeAdjacent + .col.mergeAdjacent > .feature:not(.dontMerge) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
*/

8
src/components/fields/DangerButton.vue
View file

@ -10,13 +10,13 @@
</template>
<script setup lang="ts">
import { ref, toRefs, unref, watch } from "vue";
import { ref, watch } from "vue";
const _props = defineProps<{
const props = defineProps<{
disabled?: boolean;
skipConfirm?: boolean;
}>();
const props = toRefs(_props);
const emit = defineEmits<{
(e: "click"): void;
(e: "confirmingChanged", value: boolean): void;
@ -29,7 +29,7 @@ watch(isConfirming, isConfirming => {
});
function click() {
if (unref(props.skipConfirm)) {
if (props.skipConfirm) {
emit("click");
return;
}

4
src/components/fields/FeedbackButton.vue
View file

@ -15,13 +15,13 @@ const emit = defineEmits<{
}>();
const activated = ref(false);
const activatedTimeout = ref<NodeJS.Timer | null>(null);
const activatedTimeout = ref<NodeJS.Timeout | null>(null);
function click() {
emit("click");
// Give feedback to user
if (activatedTimeout.value) {
if (activatedTimeout.value != null) {
clearTimeout(activatedTimeout.value);
}
activated.value = false;

19
src/components/fields/Select.vue
View file

@ -1,30 +1,29 @@
<template>
<div class="field">
<span class="field-title" v-if="titleComponent"><component :is="titleComponent" /></span>
<span class="field-title" v-if="title"><Title /></span>
<VueNextSelect
:options="options"
v-model="value"
@update:model-value="onUpdate"
:min="1"
label-by="label"
:placeholder="placeholder"
:close-on-select="closeOnSelect"
@update:model-value="onUpdate"
label-by="label"
/>
</div>
</template>
<script setup lang="ts">
<script setup lang="tsx">
import "components/common/fields.css";
import type { CoercableComponent } from "features/feature";
import { computeOptionalComponent, unwrapRef } from "util/vue";
import { ref, toRef, watch } from "vue";
import { render, Renderable } from "util/vue";
import { MaybeRef, ref, toRef, unref, watch } from "vue";
import VueNextSelect from "vue-next-select";
import "vue-next-select/dist/index.css";
export type SelectOption = { label: string; value: unknown };
const props = defineProps<{
title?: CoercableComponent;
title?: MaybeRef<Renderable>;
modelValue?: unknown;
options: SelectOption[];
placeholder?: string;
@ -34,13 +33,13 @@ const emit = defineEmits<{
(e: "update:modelValue", value: unknown): void;
}>();
const titleComponent = computeOptionalComponent(toRef(props, "title"), "span");
const Title = () => props.title ? render(props.title, el => <span>{el}</span>) : <></>;
const value = ref<SelectOption | null>(
props.options.find(option => option.value === props.modelValue) ?? null
);
watch(toRef(props, "modelValue"), modelValue => {
if (unwrapRef(value) !== modelValue) {
if (unref(value) !== modelValue) {
value.value = props.options.find(option => option.value === modelValue) ?? null;
}
});

10
src/components/fields/Slider.vue
View file

@ -9,24 +9,24 @@
<script setup lang="ts">
import "components/common/fields.css";
import Tooltip from "features/tooltips/Tooltip.vue";
import Tooltip from "wrappers/tooltips/Tooltip.vue";
import { Direction } from "util/common";
import { computed, toRefs, unref } from "vue";
import { computed } from "vue";
const _props = defineProps<{
const props = defineProps<{
title?: string;
modelValue?: number;
min?: number;
max?: number;
}>();
const props = toRefs(_props);
const emit = defineEmits<{
(e: "update:modelValue", value: number): void;
}>();
const value = computed({
get() {
return String(unref(props.modelValue) ?? 0);
return String(props.modelValue ?? 0);
},
set(value: string) {
emit("update:modelValue", Number(value));

17
src/components/fields/Text.vue
View file

@ -1,9 +1,9 @@
<template>
<form @submit.prevent="submit">
<div class="field">
<span class="field-title" v-if="titleComponent"
><component :is="titleComponent"
/></span>
<span class="field-title" v-if="title">
<Title />
</span>
<VueTextareaAutosize
v-if="textArea"
v-model="value"
@ -25,15 +25,14 @@
</form>
</template>
<script setup lang="ts">
<script setup lang="tsx">
import "components/common/fields.css";
import type { CoercableComponent } from "features/feature";
import { computeOptionalComponent } from "util/vue";
import { computed, onMounted, shallowRef, toRef, unref } from "vue";
import { render, Renderable } from "util/vue";
import { computed, MaybeRef, onMounted, shallowRef, unref } from "vue";
import VueTextareaAutosize from "vue-textarea-autosize";
const props = defineProps<{
title?: CoercableComponent;
title?: MaybeRef<Renderable>;
modelValue?: string;
textArea?: boolean;
placeholder?: string;
@ -46,7 +45,7 @@ const emit = defineEmits<{
(e: "cancel"): void;
}>();
const titleComponent = computeOptionalComponent(toRef(props, "title"), "span");
const Title = () => props.title == null ? <></> : render(props.title, el => <span>{el}</span>);
const field = shallowRef<HTMLElement | null>(null);
onMounted(() => {

13
src/components/fields/Toggle.vue
View file

@ -1,25 +1,24 @@
<template>
<label class="field">
<input type="checkbox" class="toggle" v-model="value" />
<component :is="component" />
<Component />
</label>
</template>
<script setup lang="ts">
<script setup lang="tsx">
import "components/common/fields.css";
import type { CoercableComponent } from "features/feature";
import { coerceComponent } from "util/vue";
import { computed, unref } from "vue";
import { render, Renderable } from "util/vue";
import { computed, MaybeRef } from "vue";
const props = defineProps<{
title?: CoercableComponent;
title?: MaybeRef<Renderable>;
modelValue?: boolean;
}>();
const emit = defineEmits<{
(e: "update:modelValue", value: boolean): void;
}>();
const component = computed(() => coerceComponent(unref(props.title) ?? "<span></span>", "span"));
const Component = () => render(props.title ?? "", el => <span>{el}</span>);
const value = computed({
get() {

18
src/components/layout/Collapsible.vue
View file

@ -1,27 +1,25 @@
<template>
<Col class="collapsible-container">
<button @click="collapsed.value = !collapsed.value" class="feature collapsible-toggle">
<component :is="displayComponent" />
<Display />
</button>
<component v-if="!collapsed.value" :is="contentComponent" />
<Content v-if="!collapsed.value" />
</Col>
</template>
<script setup lang="ts">
import type { CoercableComponent } from "features/feature";
import { computeComponent } from "util/vue";
import type { Ref } from "vue";
import { toRef } from "vue";
import { render, Renderable } from "util/vue";
import type { MaybeRef, Ref } from "vue";
import Col from "./Column.vue";
const props = defineProps<{
collapsed: Ref<boolean>;
display: CoercableComponent;
content: CoercableComponent;
display: MaybeRef<Renderable>;
content: MaybeRef<Renderable>;
}>();
const displayComponent = computeComponent(toRef(props, "display"));
const contentComponent = computeComponent(toRef(props, "content"));
const Display = () => render(props.display);
const Content = () => render(props.content);
</script>
<style scoped>

7
src/components/layout/Column.vue
View file

@ -12,5 +12,10 @@ import themes from "data/themes";
import settings from "game/settings";
import { computed } from "vue";
const mergeAdjacent = computed(() => themes[settings.theme].mergeAdjacent);
const props = defineProps<{
dontMerge?: boolean
}>();
const mergeAdjacent = computed(() =>
themes[settings.theme].mergeAdjacent && props.dontMerge !== true);
</script>

7
src/components/layout/Row.vue
View file

@ -12,5 +12,10 @@ import themes from "data/themes";
import settings from "game/settings";
import { computed } from "vue";
const mergeAdjacent = computed(() => themes[settings.theme].mergeAdjacent);
const props = defineProps<{
dontMerge?: boolean
}>();
const mergeAdjacent = computed(() =>
themes[settings.theme].mergeAdjacent && props.dontMerge !== true);
</script>

3
src/components/modals/AddictionWarning.vue
View file

@ -16,8 +16,8 @@
playing incremental games is taking priority over other things in your life, or
manipulating your sleep schedule, it may be prudent to seek help.
</p>
<p>
<h4>Resources:</h4>
<p>
<span>
<a style="display: inline" href="https://www.samhsa.gov/" target="_blank">
SAMHSA
@ -44,6 +44,7 @@ import settings from "game/settings";
import state from "game/state";
import { ref, watchEffect } from "vue";
import Modal from "./Modal.vue";
import SavesManager from "./SavesManager.vue";
const isOpen = ref(false);
watchEffect(() => {

16
src/components/modals/Info.vue
View file

@ -53,7 +53,7 @@
</div>
<br />
<div>Time Played: {{ timePlayed }}</div>
<component :is="infoComponent" />
<Info />
</div>
</template>
</Modal>
@ -62,26 +62,22 @@
<script setup lang="tsx">
import type Changelog from "data/Changelog.vue";
import projInfo from "data/projInfo.json";
import { jsx } from "features/feature";
import player from "game/player";
import { infoComponents } from "game/settings";
import { formatTime } from "util/bignum";
import { coerceComponent, render } from "util/vue";
import { computed, ref, toRefs, unref } from "vue";
import { render } from "util/vue";
import { computed, ref } from "vue";
import Modal from "./Modal.vue";
const { title, logo, author, discordName, discordLink, versionNumber, versionTitle } = projInfo;
const _props = defineProps<{ changelog: typeof Changelog | null }>();
const props = toRefs(_props);
const props = defineProps<{ changelog: typeof Changelog | null }>();
const isOpen = ref(false);
const timePlayed = computed(() => formatTime(player.timePlayed));
const infoComponent = computed(() => {
return coerceComponent(jsx(() => (<>{infoComponents.map(render)}</>)));
});
const Info = () => infoComponents.map(f => render(f));
defineExpose({
open() {
@ -90,7 +86,7 @@ defineExpose({
});
function openChangelog() {
unref(props.changelog)?.open();
props.changelog?.open();
}
</script>

10
src/components/modals/Modal.vue
View file

@ -41,22 +41,22 @@
<script setup lang="ts">
import type { FeatureNode } from "game/layers";
import { computed, ref, toRefs, unref } from "vue";
import { computed, ref } from "vue";
import Context from "../Context.vue";
const _props = defineProps<{
const props = defineProps<{
modelValue: boolean;
preventClosing?: boolean;
width?: string;
}>();
const props = toRefs(_props);
const emit = defineEmits<{
(e: "update:modelValue", value: boolean): void;
}>();
const isOpen = computed(() => unref(props.modelValue) || isAnimating.value);
const isOpen = computed(() => props.modelValue || isAnimating.value);
function close() {
if (unref(props.preventClosing) !== true) {
if (props.preventClosing !== true) {
emit("update:modelValue", false);
}
}

59
src/components/modals/Options.vue
View file

@ -20,7 +20,7 @@
</div>
<div v-if="isTab('appearance')">
<Select :title="themeTitle" :options="themes" v-model="theme" />
<component :is="settingFieldsComponent" />
<SettingFields />
<Toggle :title="showTPSTitle" v-model="showTPS" />
<Toggle :title="alignModifierUnitsTitle" v-model="alignUnits" />
</div>
@ -31,14 +31,13 @@
<script setup lang="tsx">
import projInfo from "data/projInfo.json";
import rawThemes from "data/themes";
import { jsx } from "features/feature";
import Tooltip from "features/tooltips/Tooltip.vue";
import player from "game/player";
import settings, { settingFields } from "game/settings";
import { camelToTitle, Direction } from "util/common";
import { save } from "util/save";
import { coerceComponent, render } from "util/vue";
import { render } from "util/vue";
import { computed, ref, toRefs } from "vue";
import Tooltip from "wrappers/tooltips/Tooltip.vue";
import FeedbackButton from "../fields/FeedbackButton.vue";
import Select from "../fields/Select.vue";
import Toggle from "../fields/Toggle.vue";
@ -69,9 +68,7 @@ const themes = Object.keys(rawThemes).map(theme => ({
value: theme
}));
const settingFieldsComponent = computed(() => {
return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
});
const SettingFields = () => settingFields.map(f => render(f));
const { showTPS, theme, unthrottled, alignUnits, showHealthWarning } = toRefs(settings);
const { autosave, offlineProd } = toRefs(player);
@ -84,54 +81,38 @@ const isPaused = computed({
}
});
const unthrottledTitle = jsx(() => (
<span class="option-title">
const unthrottledTitle = <span class="option-title">
Unthrottled
<desc>Allow the game to run as fast as possible. Not battery friendly.</desc>
</span>
));
const offlineProdTitle = jsx(() => (
<span class="option-title">
</span>;
const offlineProdTitle = <span class="option-title">
Offline production<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
<desc>Simulate production that occurs while the game is closed.</desc>
</span>
));
const showHealthWarningTitle = jsx(() => (
<span class="option-title">
</span>;
const showHealthWarningTitle = <span class="option-title">
Show videogame addiction warning
<desc>Show a helpful warning after playing for a long time about video game addiction and encouraging you to take a break.</desc>
</span>
));
const autosaveTitle = jsx(() => (
<span class="option-title">
</span>;
const autosaveTitle = <span class="option-title">
Autosave<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
<desc>Automatically save the game every second or when the game is closed.</desc>
</span>
));
const isPausedTitle = jsx(() => (
<span class="option-title">
</span>;
const isPausedTitle = <span class="option-title">
Pause game<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
<desc>Stop everything from moving.</desc>
</span>
));
const themeTitle = jsx(() => (
<span class="option-title">
</span>;
const themeTitle = <span class="option-title">
Theme
<desc>How the game looks.</desc>
</span>
));
const showTPSTitle = jsx(() => (
<span class="option-title">
</span>;
const showTPSTitle = <span class="option-title">
Show TPS
<desc>Show TPS meter at the bottom-left corner of the page.</desc>
</span>
));
const alignModifierUnitsTitle = jsx(() => (
<span class="option-title">
</span>;
const alignModifierUnitsTitle = <span class="option-title">
Align modifier units
<desc>Align numbers to the beginning of the unit in modifier view.</desc>
</span>
));
</span>;
</script>
<style>

20
src/components/modals/Save.vue
View file

@ -75,21 +75,21 @@
</template>
<script setup lang="ts">
import Tooltip from "features/tooltips/Tooltip.vue";
import Tooltip from "wrappers/tooltips/Tooltip.vue";
import player from "game/player";
import { Direction } from "util/common";
import { computed, ref, toRefs, unref, watch } from "vue";
import { galaxy, syncedSaves } from "util/galaxy";
import { computed, ref, watch } from "vue";
import DangerButton from "../fields/DangerButton.vue";
import FeedbackButton from "../fields/FeedbackButton.vue";
import Text from "../fields/Text.vue";
import type { LoadablePlayerData } from "./SavesManager.vue";
import { galaxy, syncedSaves } from "util/galaxy";
const _props = defineProps<{
const props = defineProps<{
save: LoadablePlayerData;
readonly?: boolean;
}>();
const { save, readonly } = toRefs(_props);
const emit = defineEmits<{
(e: "export"): void;
(e: "open"): void;
@ -111,19 +111,19 @@ const isEditing = ref(false);
const isConfirming = ref(false);
const newName = ref("");
watch(isEditing, () => (newName.value = save.value.name ?? ""));
watch(isEditing, () => (newName.value = props.save.name ?? ""));
const isActive = computed(
() => save.value != null && save.value.id === player.id && !unref(readonly)
() => props.save != null && props.save.id === player.id && !props.readonly
);
const currentTime = computed(() =>
isActive.value ? player.time : (save.value != null && save.value.time) ?? 0
isActive.value ? player.time : (props.save != null && props.save.time) ?? 0
);
const synced = computed(
() =>
!unref(readonly) &&
!props.readonly &&
galaxy.value?.loggedIn === true &&
syncedSaves.value.includes(save.value.id)
syncedSaves.value.includes(props.save.id)
);
function changeName() {

8
src/components/modals/SavesManager.vue
View file

@ -130,15 +130,13 @@ watch(saveToImport, importedSave => {
}
});
let bankContext = import.meta.globEager("./../../../saves/*.txt", { as: "raw" });
let bankContext = import.meta.glob("./../../../saves/*.txt", { query: "?raw", eager: true });
let bank = ref(
Object.keys(bankContext).reduce((acc: Array<{ label: string; value: string }>, curr) => {
acc.push({
// .slice(2, -4) strips the leading ./ and the trailing .txt
label: curr.split("/").slice(-1)[0].slice(0, -4),
// Have to perform this unholy cast because globEager's typing doesn't appear to know
// adding { as: "raw" } will make the object contain strings rather than modules
value: bankContext[curr] as unknown as string
value: bankContext[curr] as string
});
return acc;
}, [])
@ -207,7 +205,7 @@ function deleteSave(id: string) {
if (galaxy.value?.loggedIn === true) {
galaxy.value.getSaveList().then(list => {
const slot = Object.keys(list).find(slot => {
const content = list[slot as unknown as number].content;
const content = list[parseInt(slot)].content;
try {
if (JSON.parse(content).id === id) {
return true;

9
src/data/common.css
View file

@ -7,3 +7,12 @@
.modifier-toggle.collapsed {
transform: translate(-5px, -5px) rotate(-90deg);
}
.node-text {
text-anchor: middle;
dominant-baseline: middle;
font-family: monospace;
font-size: 200%;
pointer-events: none;
filter: drop-shadow(3px 3px 2px var(--tooltip-background));
}

320
src/data/common.tsx
View file

@ -1,64 +1,58 @@
import Collapsible from "components/layout/Collapsible.vue";
import { GenericAchievement } from "features/achievements/achievement";
import type { Clickable, ClickableOptions, GenericClickable } from "features/clickables/clickable";
import { Achievement } from "features/achievements/achievement";
import type { Clickable, ClickableOptions } from "features/clickables/clickable";
import { createClickable } from "features/clickables/clickable";
import type { GenericConversion } from "features/conversion";
import type { CoercableComponent, JSXFunction, OptionsFunc, Replace } from "features/feature";
import { jsx, setDefault } from "features/feature";
import { Resource, displayResource } from "features/resources/resource";
import type { GenericTree, GenericTreeNode, TreeNode, TreeNodeOptions } from "features/trees/tree";
import { Conversion } from "features/conversion";
import { getFirstFeature, type OptionsFunc, type Replace } from "features/feature";
import { displayResource, Resource } from "features/resources/resource";
import type { Tree, TreeNode, TreeNodeOptions } from "features/trees/tree";
import { createTreeNode } from "features/trees/tree";
import type { GenericFormula } from "game/formulas/types";
import { BaseLayer } from "game/layers";
import type { Modifier } from "game/modifiers";
import { Modifier } from "game/modifiers";
import type { Persistent } from "game/persistence";
import { DefaultValue, persistent } from "game/persistence";
import player from "game/player";
import settings from "game/settings";
import type { DecimalSource } from "util/bignum";
import Decimal, { format, formatSmall, formatTime } from "util/bignum";
import { WithRequired, camelToTitle } from "util/common";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
} from "util/computed";
import { convertComputable, processComputable } from "util/computed";
import { getFirstFeature, renderColJSX, renderJSX } from "util/vue";
import type { ComputedRef, Ref } from "vue";
import { computed, unref } from "vue";
import { WithRequired } from "util/common";
import { processGetter } from "util/computed";
import { render, Renderable, renderCol } from "util/vue";
import type { ComputedRef, MaybeRef, MaybeRefOrGetter } from "vue";
import { computed, ref, unref } from "vue";
import { JSX } from "vue/jsx-runtime";
import "./common.css";
/** An object that configures a {@link ResetButton} */
export interface ResetButtonOptions extends ClickableOptions {
/** The conversion the button uses to calculate how much resources will be gained on click */
conversion: GenericConversion;
conversion: Conversion;
/** The tree this reset button is apart of */
tree: GenericTree;
tree: Tree;
/** The specific tree node associated with this reset button */
treeNode: GenericTreeNode;
treeNode: TreeNode;
/**
* Text to display on low conversion amounts, describing what "resetting" is in this context.
* Defaults to "Reset for ".
*/
resetDescription?: Computable<string>;
resetDescription?: MaybeRefOrGetter<string>;
/** Whether or not to show how much currency would be required to make the gain amount increase. */
showNextAt?: Computable<boolean>;
showNextAt?: MaybeRefOrGetter<boolean>;
/**
* The content to display on the button.
* By default, this includes the reset description, and amount of currency to be gained.
*/
display?: Computable<CoercableComponent>;
display?: MaybeRefOrGetter<Renderable>;
/**
* Whether or not this button can currently be clicked.
* Defaults to checking the current gain amount is greater than {@link minimumGain}
*/
canClick?: Computable<boolean>;
canClick?: MaybeRefOrGetter<boolean>;
/**
* When {@link canClick} is left to its default, minimumGain is used to only enable the reset button when a sufficient amount of currency to gain is available.
*/
minimumGain?: Computable<DecimalSource>;
minimumGain?: MaybeRefOrGetter<DecimalSource>;
/** A persistent ref to track how much time has passed since the last time this tree node was reset. */
resetTime?: Persistent<DecimalSource>;
}
@ -68,27 +62,12 @@ export interface ResetButtonOptions extends ClickableOptions {
* It will show how much can be converted currently, and can show when that amount will go up, as well as handle only being clickable when a sufficient amount of currency can be gained.
* Assumes this button is associated with a specific node on a tree, and triggers that tree's reset propagation.
*/
export type ResetButton<T extends ResetButtonOptions> = Replace<
Clickable<T>,
export type ResetButton = Replace<
Clickable,
{
resetDescription: GetComputableTypeWithDefault<T["resetDescription"], Ref<string>>;
showNextAt: GetComputableTypeWithDefault<T["showNextAt"], true>;
display: GetComputableTypeWithDefault<T["display"], Ref<JSX.Element>>;
canClick: GetComputableTypeWithDefault<T["canClick"], Ref<boolean>>;
minimumGain: GetComputableTypeWithDefault<T["minimumGain"], 1>;
onClick: (event?: MouseEvent | TouchEvent) => void;
}
>;
/** A type that matches any valid {@link ResetButton} object. */
export type GenericResetButton = Replace<
GenericClickable & ResetButton<ResetButtonOptions>,
{
resetDescription: ProcessedComputable<string>;
showNextAt: ProcessedComputable<boolean>;
display: ProcessedComputable<CoercableComponent>;
canClick: ProcessedComputable<boolean>;
minimumGain: ProcessedComputable<DecimalSource>;
resetDescription: MaybeRef<string>;
showNextAt: MaybeRef<boolean>;
minimumGain: MaybeRef<DecimalSource>;
}
>;
@ -98,78 +77,87 @@ export type GenericResetButton = Replace<
*/
export function createResetButton<T extends ClickableOptions & ResetButtonOptions>(
optionsFunc: OptionsFunc<T>
): ResetButton<T> {
return createClickable(feature => {
const resetButton = optionsFunc.call(feature, feature);
) {
const resetButton = createClickable(feature => {
const options = optionsFunc.call(feature, feature);
const {
conversion,
tree,
treeNode,
resetTime,
resetDescription,
showNextAt,
minimumGain,
display,
canClick,
onClick,
...props
} = options;
processComputable(resetButton as T, "showNextAt");
setDefault(resetButton, "showNextAt", true);
setDefault(resetButton, "minimumGain", 1);
if (resetButton.resetDescription == null) {
resetButton.resetDescription = computed(() =>
Decimal.lt(resetButton.conversion.gainResource.value, 1e3) ? "Reset for " : ""
);
} else {
processComputable(resetButton as T, "resetDescription");
}
if (resetButton.display == null) {
resetButton.display = jsx(() => (
return {
...(props as Omit<typeof props, keyof ResetButtonOptions>),
conversion,
tree,
treeNode,
resetTime,
resetDescription:
processGetter(resetDescription) ??
computed((): string =>
Decimal.lt(conversion.gainResource.value, 1e3) ? "Reset for " : ""
),
showNextAt: processGetter(showNextAt) ?? true,
minimumGain: processGetter(minimumGain) ?? 1,
canClick:
processGetter(canClick) ??
computed((): boolean =>
Decimal.gte(unref(conversion.actualGain), unref(resetButton.minimumGain))
),
display:
processGetter(display) ??
computed(() => (
<span>
{unref(resetButton.resetDescription as ProcessedComputable<string>)}
{unref(resetButton.resetDescription)}
<b>
{displayResource(
resetButton.conversion.gainResource,
conversion.gainResource,
Decimal.max(
unref(resetButton.conversion.actualGain),
unref(resetButton.minimumGain as ProcessedComputable<DecimalSource>)
unref(conversion.actualGain),
unref(resetButton.minimumGain)
)
)}
</b>{" "}
{resetButton.conversion.gainResource.displayName}
{unref(resetButton.showNextAt) != null ? (
{conversion.gainResource.displayName}
{unref(resetButton.showNextAt as MaybeRef<boolean>) != null ? (
<div>
<br />
{unref(resetButton.conversion.buyMax) ? "Next:" : "Req:"}{" "}
{unref<boolean>(conversion.buyMax) ? "Next:" : "Req:"}{" "}
{displayResource(
resetButton.conversion.baseResource,
!unref(resetButton.conversion.buyMax) &&
Decimal.gte(unref(resetButton.conversion.actualGain), 1)
? unref(resetButton.conversion.currentAt)
: unref(resetButton.conversion.nextAt)
conversion.baseResource,
!unref<boolean>(conversion.buyMax) &&
Decimal.gte(unref(conversion.actualGain), 1)
? unref(conversion.currentAt)
: unref(conversion.nextAt)
)}{" "}
{resetButton.conversion.baseResource.displayName}
{conversion.baseResource.displayName}
</div>
) : null}
</span>
));
}
if (resetButton.canClick == null) {
resetButton.canClick = computed(() =>
Decimal.gte(
unref(resetButton.conversion.actualGain),
unref(resetButton.minimumGain as ProcessedComputable<DecimalSource>)
)
);
}
const onClick = resetButton.onClick;
resetButton.onClick = function (event?: MouseEvent | TouchEvent) {
)),
onClick: function (e) {
if (unref(resetButton.canClick) === false) {
return;
}
resetButton.conversion.convert();
resetButton.tree.reset(resetButton.treeNode);
if (resetButton.resetTime) {
resetButton.resetTime.value = resetButton.resetTime[DefaultValue];
conversion.convert();
tree.reset(resetButton.treeNode);
if (resetTime) {
resetTime.value = resetTime[DefaultValue];
}
onClick?.call(resetButton, e);
}
onClick?.(event);
};
}) satisfies ResetButton;
return resetButton;
}) as unknown as ResetButton<T>;
}
/** An object that configures a {@link LayerTreeNode} */
@ -177,27 +165,20 @@ export interface LayerTreeNodeOptions extends TreeNodeOptions {
/** The ID of the layer this tree node is associated with */
layerID: string;
/** The color to display this tree node as */
color: Computable<string>; // marking as required
color: MaybeRefOrGetter<string>; // marking as required
/** Whether or not to append the layer to the tabs list.
* If set to false, then the tree node will instead always remove all tabs to its right and then add the layer tab.
* Defaults to true.
*/
append?: Computable<boolean>;
append?: MaybeRefOrGetter<boolean>;
}
/** A tree node that is associated with a given layer, and which opens the layer when clicked. */
export type LayerTreeNode<T extends LayerTreeNodeOptions> = Replace<
TreeNode<T>,
export type LayerTreeNode = Replace<
TreeNode,
{
display: GetComputableTypeWithDefault<T["display"], T["layerID"]>;
append: GetComputableType<T["append"]>;
}
>;
/** A type that matches any valid {@link LayerTreeNode} object. */
export type GenericLayerTreeNode = Replace<
LayerTreeNode<LayerTreeNodeOptions>,
{
display: ProcessedComputable<CoercableComponent>;
append?: ProcessedComputable<boolean>;
layerID: string;
append: MaybeRef<boolean>;
}
>;
@ -205,47 +186,50 @@ export type GenericLayerTreeNode = Replace<
* Lazily creates a tree node that's associated with a specific layer, with the given options.
* @param optionsFunc A function that returns the options object for this tree node.
*/
export function createLayerTreeNode<T extends LayerTreeNodeOptions>(
optionsFunc: OptionsFunc<T>
): LayerTreeNode<T> {
return createTreeNode(feature => {
export function createLayerTreeNode<T extends LayerTreeNodeOptions>(optionsFunc: OptionsFunc<T>) {
const layerTreeNode = createTreeNode(feature => {
const options = optionsFunc.call(feature, feature);
setDefault(options, "display", camelToTitle(options.layerID));
processComputable(options as T, "append");
const { display, append, layerID, ...props } = options;
return {
...options,
onClick: unref((options as unknown as GenericLayerTreeNode).append)
? function () {
if (player.tabs.includes(options.layerID)) {
const index = player.tabs.lastIndexOf(options.layerID);
...(props as Omit<typeof props, keyof LayerTreeNodeOptions>),
layerID,
display: processGetter(display) ?? layerID,
append: processGetter(append) ?? true,
onClick() {
if (unref<boolean>(layerTreeNode.append)) {
if (player.tabs.includes(layerID)) {
const index = player.tabs.lastIndexOf(layerID);
player.tabs.splice(index, 1);
} else {
player.tabs.push(options.layerID);
player.tabs.push(layerID);
}
} else {
player.tabs.splice(1, 1, layerID);
}
: function () {
player.tabs.splice(1, 1, options.layerID);
}
};
}) as unknown as LayerTreeNode<T>;
}) satisfies LayerTreeNode;
return layerTreeNode;
}
/** An option object for a modifier display as a single section. **/
export interface Section {
/** The header for this modifier. **/
title: Computable<string>;
title: MaybeRefOrGetter<string>;
/** A subtitle for this modifier, e.g. to explain the context for the modifier. **/
subtitle?: Computable<string>;
subtitle?: MaybeRefOrGetter<string>;
/** The modifier to be displaying in this section. **/
modifier: WithRequired<Modifier, "description">;
/** The base value being modified. **/
base?: Computable<DecimalSource>;
base?: MaybeRefOrGetter<DecimalSource>;
/** The unit of measurement for the base. **/
unit?: string;
/** The label to call the base amount. Defaults to "Base". **/
baseText?: Computable<CoercableComponent>;
baseText?: MaybeRefOrGetter<Renderable>;
/** Whether or not this section should be currently visible to the player. **/
visible?: Computable<boolean>;
visible?: MaybeRefOrGetter<boolean>;
/** Determines if numbers larger or smaller than the base should be displayed as red. */
smallerIsBetter?: boolean;
}
@ -257,33 +241,33 @@ export interface Section {
*/
export function createCollapsibleModifierSections(
sectionsFunc: () => Section[]
): [JSXFunction, Persistent<Record<number, boolean>>] {
): [MaybeRef<Renderable>, Persistent<Record<number, boolean>>] {
const sections: Section[] = [];
const processed:
| {
base: ProcessedComputable<DecimalSource | undefined>[];
baseText: ProcessedComputable<CoercableComponent | undefined>[];
visible: ProcessedComputable<boolean | undefined>[];
title: ProcessedComputable<string | undefined>[];
subtitle: ProcessedComputable<string | undefined>[];
base: MaybeRef<DecimalSource | undefined>[];
baseText: (MaybeRef<Renderable> | undefined)[];
visible: MaybeRef<boolean | undefined>[];
title: MaybeRef<string | undefined>[];
subtitle: MaybeRef<string | undefined>[];
}
| Record<string, never> = {};
let calculated = false;
function calculateSections() {
if (!calculated) {
sections.push(...sectionsFunc());
processed.base = sections.map(s => convertComputable(s.base));
processed.baseText = sections.map(s => convertComputable(s.baseText));
processed.visible = sections.map(s => convertComputable(s.visible));
processed.title = sections.map(s => convertComputable(s.title));
processed.subtitle = sections.map(s => convertComputable(s.subtitle));
processed.base = sections.map(s => processGetter(s.base));
processed.baseText = sections.map(s => processGetter(s.baseText));
processed.visible = sections.map(s => processGetter(s.visible));
processed.title = sections.map(s => processGetter(s.title));
processed.subtitle = sections.map(s => processGetter(s.subtitle));
calculated = true;
}
return sections;
}
const collapsed = persistent<Record<number, boolean>>({}, false);
const jsxFunc = jsx(() => {
const jsxFunc = computed(() => {
const sections = calculateSections();
let firstVisibleSection = true;
@ -310,16 +294,14 @@ export function createCollapsibleModifierSections(
<>
<div class="modifier-container">
<span class="modifier-description">
{renderJSX(unref(processed.baseText[i]) ?? "Base")}
{render(unref(processed.baseText[i]) ?? "Base")}
</span>
<span class="modifier-amount">
{format(unref(processed.base[i]) ?? 1)}
{s.unit}
</span>
</div>
{s.modifier.description == null
? null
: renderJSX(unref(s.modifier.description))}
{s.modifier.description == null ? null : render(unref(s.modifier.description))}
</>
);
@ -382,7 +364,7 @@ export function colorText(textToColor: string, color = "var(--accent2)"): JSX.El
* Creates a collapsible display of a list of achievements
* @param achievements A dictionary of the achievements to display, inserted in the order from easiest to hardest
*/
export function createCollapsibleAchievements(achievements: Record<string, GenericAchievement>) {
export function createCollapsibleAchievements(achievements: Record<string, Achievement>) {
// Achievements are typically defined from easiest to hardest, and we want to show hardest first
const orderedAchievements = Object.values(achievements).reverse();
const collapseAchievements = persistent<boolean>(true, false);
@ -393,14 +375,13 @@ export function createCollapsibleAchievements(achievements: Record<string, Gener
orderedAchievements,
m => m.earned.value
);
const display = jsx(() => {
const display = computed(() => {
const achievementsToDisplay = [...lockedAchievements.value];
if (firstFeature.value) {
achievementsToDisplay.push(firstFeature.value);
}
return renderColJSX(
return renderCol(
...achievementsToDisplay,
jsx(() => (
<Collapsible
collapsed={collapseAchievements}
content={collapsedContent}
@ -411,7 +392,6 @@ export function createCollapsibleAchievements(achievements: Record<string, Gener
}
v-show={unref(hasCollapsedContent)}
/>
))
);
});
return {
@ -428,11 +408,11 @@ export function createCollapsibleAchievements(achievements: Record<string, Gener
*/
export function estimateTime(
resource: Resource,
rate: Computable<DecimalSource>,
target: Computable<DecimalSource>
rate: MaybeRefOrGetter<DecimalSource>,
target: MaybeRefOrGetter<DecimalSource>
) {
const processedRate = convertComputable(rate);
const processedTarget = convertComputable(target);
const processedRate = processGetter(rate);
const processedTarget = processGetter(target);
return computed(() => {
const currRate = unref(processedRate);
const currTarget = unref(processedTarget);
@ -454,15 +434,15 @@ export function estimateTime(
*/
export function createFormulaPreview(
formula: GenericFormula,
showPreview: Computable<boolean>,
previewAmount: Computable<DecimalSource> = 1
showPreview: MaybeRefOrGetter<boolean>,
previewAmount: MaybeRefOrGetter<DecimalSource> = 1
) {
const processedShowPreview = convertComputable(showPreview);
const processedPreviewAmount = convertComputable(previewAmount);
const processedShowPreview = processGetter(showPreview);
const processedPreviewAmount = processGetter(previewAmount);
if (!formula.hasVariable()) {
console.error("Cannot create formula preview if the formula does not have a variable");
}
return jsx(() => {
return computed(() => {
if (unref(processedShowPreview)) {
const curr = formatSmall(formula.evaluate());
const preview = formatSmall(
@ -505,3 +485,21 @@ export function isRendered(layer: BaseLayer, idOrFeature: string | { id: string
const id = typeof idOrFeature === "string" ? idOrFeature : idOrFeature.id;
return computed(() => id in layer.nodes.value);
}
/**
* Utility function for setting up a system where one of many things can be selected.
* It's recommended to use an ID or index rather than the object itself, so that you can wrap the ref in a persistent without breaking anything.
* @returns The ref containing the selection, as well as a select and deselect function
*/
export function setupSelectable<T>() {
const selected = ref<T>();
return {
select: function (node: T) {
selected.value = node;
},
deselect: function () {
selected.value = undefined;
},
selected
};
}

21
src/data/layers/prestige.tsx
View file

@ -4,16 +4,21 @@
*/
import { main } from "data/projEntry";
import { createCumulativeConversion } from "features/conversion";
import { jsx } from "features/feature";
import { createHotkey } from "features/hotkey";
import { bonusAmountMixin } from "mixins/bonusDecorator";
import { createRepeatable } from "features/clickables/repeatable";
import { createReset } from "features/reset";
import MainDisplay from "features/resources/MainDisplay.vue";
import { createResource } from "features/resources/resource";
import { addTooltip } from "features/tooltips/tooltip";
import { addTooltip } from "wrappers/tooltips/tooltip";
import { createResourceTooltip } from "features/trees/tree";
import { createUpgrade } from "features/clickables/upgrade";
import { BaseLayer, createLayer } from "game/layers";
import { noPersist, persistent } from "game/persistence";
import { createCostRequirement } from "game/requirements";
import type { DecimalSource } from "util/bignum";
import { render } from "util/vue";
import { render, renderCol, renderRow } from "util/vue";
import { computed } from "vue";
import { createLayerTreeNode, createResetButton } from "../common";
const id = "p";
@ -37,10 +42,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
color,
reset
}));
const tooltip = addTooltip(treeNode, {
const tooltip = addTooltip(treeNode, () => ({
display: createResourceTooltip(points),
pinnable: true
});
}));
const resetButton = createResetButton(() => ({
conversion,
@ -51,7 +56,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
const hotkey = createHotkey(() => ({
description: "Reset for prestige points",
key: "p",
onPress: resetButton.onClick
onPress: resetButton.onClick!
}));
return {
@ -59,12 +64,12 @@ const layer = createLayer(id, function (this: BaseLayer) {
color,
points,
tooltip,
display: jsx(() => (
display: () => (
<>
<MainDisplay resource={points} color={color} />
{render(resetButton)}
</>
)),
),
treeNode,
hotkey
};

14
src/data/projEntry.tsx
View file

@ -1,11 +1,9 @@
import Node from "components/Node.vue";
import Spacer from "components/layout/Spacer.vue";
import { jsx } from "features/feature";
import { createResource, trackBest, trackOOMPS, trackTotal } from "features/resources/resource";
import type { GenericTree } from "features/trees/tree";
import { branchedResetPropagation, createTree } from "features/trees/tree";
import { branchedResetPropagation, createTree, Tree } from "features/trees/tree";
import { globalBus } from "game/events";
import type { BaseLayer, GenericLayer } from "game/layers";
import type { BaseLayer, Layer } from "game/layers";
import { createLayer } from "game/layers";
import type { Player } from "game/player";
import player from "game/player";
@ -42,12 +40,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
total.value = points.value;
},
resetPropagation: branchedResetPropagation
})) as GenericTree;
})) as Tree;
return {
name: "Tree",
links: tree.links,
display: jsx(() => (
display: () => (
<>
{player.devSpeed === 0 ? (
<div>
@ -81,7 +79,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
<Spacer />
{render(tree)}
</>
)),
),
points,
best,
total,
@ -97,7 +95,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
export const getInitialLayers = (
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
player: Partial<Player>
): Array<GenericLayer> => [main, prestige];
): Array<Layer> => [main, prestige];
/**
* A computed ref whose value is true whenever the game is over.

40
src/features/VueFeature.vue Normal file
View file

@ -0,0 +1,40 @@
<template>
<div v-if="isVisible(unref(visibility))"
:style="[
{
visibility: isHidden(unref(visibility)) ? 'hidden' : undefined
},
unref(style)
]"
:class="{ feature: true, ...unref(classes) }"
>
<Components />
<Node :id="id" />
</div>
</template>
<script setup lang="tsx">
import "components/common/features.css";
import Node from "components/Node.vue";
import type { Visibility } from "features/feature";
import { isHidden, isVisible } from "features/feature";
import { render, Renderable } from "util/vue";
import { MaybeRef, unref, type CSSProperties } from "vue";
const props = withDefaults(defineProps<{
id: string;
components: MaybeRef<Renderable>[];
wrappers: ((el: () => Renderable) => Renderable)[];
visibility?: MaybeRef<Visibility | boolean>;
style?: MaybeRef<CSSProperties>;
classes?: MaybeRef<Record<string, boolean>>;
}>(), {
visibility: true,
style: () => ({}),
classes: () => ({})
});
const Components = () => props.wrappers.reduce<() => Renderable>(
(acc, curr) => (() => curr(acc)),
() => <>{props.components.map(el => render(el))}</>)();
</script>

123
src/features/achievements/Achievement.vue
View file

@ -1,112 +1,63 @@
<template>
<div
v-if="isVisible(visibility)"
:style="[
{
visibility: isHidden(visibility) ? 'hidden' : undefined,
backgroundImage: (earned && image && `url(${image})`) || ''
},
unref(style) ?? []
]"
:style="{
backgroundImage: (unref(earned) && unref(image) && `url(${image})`) || ''
}"
:class="{
feature: true,
achievement: true,
locked: !unref(earned),
done: unref(earned),
small: unref(small),
...unref(classes)
}"
>
<component v-if="comp" :is="comp" />
<MarkNode :mark="unref(mark)" />
<Node :id="id" />
<Component />
</div>
</template>
<script lang="tsx">
<script setup lang="tsx">
import "components/common/features.css";
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import { isHidden, isVisible, jsx, Visibility } from "features/feature";
import { displayRequirements, Requirements } from "game/requirements";
import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
import { Component, defineComponent, shallowRef, StyleValue, toRefs, unref, UnwrapRef, watchEffect } from "vue";
import { GenericAchievement } from "./achievement";
import { isJSXElement, render } from "util/vue";
import { Component, isRef, unref } from "vue";
import { Achievement } from "./achievement";
import { displayRequirements } from "game/requirements";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
display: processedPropType<UnwrapRef<GenericAchievement["display"]>>(Object, String, Function),
earned: {
type: processedPropType<boolean>(Boolean),
required: true
},
requirements: processedPropType<Requirements>(Object, Array),
image: processedPropType<string>(String),
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object),
mark: processedPropType<boolean | string>(Boolean, String),
small: processedPropType<boolean>(Boolean),
id: {
type: String,
required: true
}
},
components: {
Node,
MarkNode
},
setup(props) {
const { display, requirements, earned } = toRefs(props);
const props = defineProps<{
display: Achievement["display"];
earned: Achievement["earned"];
requirements: Achievement["requirements"];
image: Achievement["image"];
small: Achievement["small"];
}>();
const comp = shallowRef<Component | string>("");
watchEffect(() => {
const currDisplay = unwrapRef(display);
if (currDisplay == null) {
comp.value = "";
return;
}
if (isCoercableComponent(currDisplay)) {
comp.value = coerceComponent(currDisplay);
return;
}
const Requirement = coerceComponent(currDisplay.requirement ? currDisplay.requirement : jsx(() => displayRequirements(unwrapRef(requirements) ?? [])), "h3");
const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "", "b");
const OptionsDisplay = unwrapRef(earned) ?
coerceComponent(currDisplay.optionsDisplay || "", "span") :
"";
comp.value = coerceComponent(
jsx(() => (
const Component = () => {
if (props.display == null) {
return null;
} else if (
isRef(props.display) ||
typeof props.display === "string" ||
isJSXElement(props.display)
) {
return render(props.display);
} else {
const { requirement, effectDisplay, optionsDisplay } = props.display;
return (
<span>
<Requirement />
{currDisplay.effectDisplay != null ? (
{requirement ?
render(requirement, el => <h3>{el}</h3>) :
displayRequirements(props.requirements ?? [])}
{effectDisplay ? (
<div>
<EffectDisplay />
{render(effectDisplay, el => <b>{el}</b>)}
</div>
) : null}
{currDisplay.optionsDisplay != null ? (
{optionsDisplay != null ? (
<div class="equal-spaced">
<OptionsDisplay />
{render(optionsDisplay)}
</div>
) : null}
</span>
))
);
});
return {
comp,
unref,
Visibility,
isVisible,
isHidden
};
</span>);
}
});
};
</script>
<style scoped>

316
src/features/achievements/achievement.tsx
View file

@ -1,46 +1,32 @@
import { computed } from "@vue/reactivity";
import { isArray } from "@vue/shared";
import Select from "components/fields/Select.vue";
import AchievementComponent from "features/achievements/Achievement.vue";
import { GenericDecorator } from "features/decorators/common";
import {
CoercableComponent,
Component,
GatherProps,
GenericComponent,
OptionsFunc,
Replace,
StyleValue,
Visibility,
getUniqueID,
jsx,
setDefault
} from "features/feature";
import { OptionsFunc, Replace, Visibility } from "features/feature";
import { globalBus } from "game/events";
import "game/notifications";
import type { Persistent } from "game/persistence";
import { persistent } from "game/persistence";
import player from "game/player";
import {
Requirements,
createBooleanRequirement,
createVisibilityRequirement,
displayRequirements,
Requirements,
requirementsMet
} from "game/requirements";
import settings, { registerSettingField } from "game/settings";
import { camelToTitle } from "util/common";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
} from "util/computed";
import { processComputable } from "util/computed";
import { ProcessedRefOrGetter, processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { coerceComponent, isCoercableComponent } from "util/vue";
import { unref, watchEffect } from "vue";
import {
isJSXElement,
render,
Renderable,
VueFeature,
vueFeatureMixin,
VueFeatureOptions
} from "util/vue";
import { computed, isRef, MaybeRef, MaybeRefOrGetter, unref, watchEffect } from "vue";
import { useToast } from "vue-toastification";
import Achievement from "./Achievement.vue";
const toast = useToast();
@ -59,35 +45,26 @@ export enum AchievementDisplay {
/**
* An object that configures an {@link Achievement}.
*/
export interface AchievementOptions {
/** Whether this achievement should be visible. */
visibility?: Computable<Visibility | boolean>;
export interface AchievementOptions extends VueFeatureOptions {
/** The requirement(s) to earn this achievement. Can be left null if using {@link BaseAchievement.complete}. */
requirements?: Requirements;
/** The display to use for this achievement. */
display?: Computable<
| CoercableComponent
display?:
| MaybeRefOrGetter<Renderable>
| {
/** Description of the requirement(s) for this achievement. If unspecified then the requirements will be displayed automatically based on {@link requirements}. */
requirement?: CoercableComponent;
requirement?: MaybeRefOrGetter<Renderable>;
/** Description of what will change (if anything) for achieving this. */
effectDisplay?: CoercableComponent;
effectDisplay?: MaybeRefOrGetter<Renderable>;
/** Any additional things to display on this achievement, such as a toggle for it's effect. */
optionsDisplay?: CoercableComponent;
}
>;
/** Shows a marker on the corner of the feature. */
mark?: Computable<boolean | string>;
optionsDisplay?: MaybeRefOrGetter<Renderable>;
};
/** Toggles a smaller design for the feature. */
small?: Computable<boolean>;
small?: MaybeRefOrGetter<boolean>;
/** An image to display as the background for this achievement. */
image?: Computable<string>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
image?: MaybeRefOrGetter<string>;
/** Whether or not to display a notification popup when this achievement is earned. */
showPopups?: Computable<boolean>;
showPopups?: MaybeRefOrGetter<boolean>;
/** A function that is called when the achievement is completed. */
onComplete?: VoidFunction;
}
@ -95,41 +72,28 @@ export interface AchievementOptions {
/**
* The properties that are added onto a processed {@link AchievementOptions} to create an {@link Achievement}.
*/
export interface BaseAchievement {
/** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
export interface BaseAchievement extends VueFeature {
/** Whether or not this achievement has been earned. */
earned: Persistent<boolean>;
/** A function to complete this achievement. */
complete: VoidFunction;
/** A symbol that helps identify features of the same type. */
type: typeof AchievementType;
/** 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<string, unknown>;
}
/** An object that represents a feature with requirements that is passively earned upon meeting certain requirements. */
export type Achievement<T extends AchievementOptions> = Replace<
T & BaseAchievement,
export type Achievement = Replace<
Replace<AchievementOptions, BaseAchievement>,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
display: GetComputableType<T["display"]>;
mark: GetComputableType<T["mark"]>;
image: GetComputableType<T["image"]>;
style: GetComputableType<T["style"]>;
classes: GetComputableType<T["classes"]>;
showPopups: GetComputableTypeWithDefault<T["showPopups"], true>;
}
>;
/** A type that matches any valid {@link Achievement} object. */
export type GenericAchievement = Replace<
Achievement<AchievementOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
showPopups: ProcessedComputable<boolean>;
display?:
| MaybeRef<Renderable>
| {
requirement?: MaybeRef<Renderable>;
effectDisplay?: MaybeRef<Renderable>;
optionsDisplay?: MaybeRef<Renderable>;
};
image: ProcessedRefOrGetter<AchievementOptions["image"]>;
showPopups: MaybeRef<boolean>;
}
>;
@ -138,156 +102,116 @@ export type GenericAchievement = Replace<
* @param optionsFunc Achievement options.
*/
export function createAchievement<T extends AchievementOptions>(
optionsFunc?: OptionsFunc<T, BaseAchievement, GenericAchievement>,
...decorators: GenericDecorator[]
): Achievement<T> {
const earned = persistent<boolean>(false, false);
const decoratedData = decorators.reduce(
(current, next) => Object.assign(current, next.getPersistentData?.()),
{}
);
return createLazyProxy(feature => {
const achievement =
optionsFunc?.call(feature, feature) ??
({} as ReturnType<NonNullable<typeof optionsFunc>>);
achievement.id = getUniqueID("achievement-");
achievement.type = AchievementType;
achievement[Component] = AchievementComponent as GenericComponent;
for (const decorator of decorators) {
decorator.preConstruct?.(achievement);
}
achievement.earned = earned;
achievement.complete = function () {
if (earned.value) {
return;
}
earned.value = true;
const genericAchievement = achievement as GenericAchievement;
genericAchievement.onComplete?.();
if (
genericAchievement.display != null &&
unref(genericAchievement.showPopups) === true
optionsFunc?: OptionsFunc<T, BaseAchievement, Achievement>
) {
const display = unref(genericAchievement.display);
let Display;
if (isCoercableComponent(display)) {
Display = coerceComponent(display);
} else if (display.requirement != null) {
Display = coerceComponent(display.requirement);
} else {
Display = displayRequirements(genericAchievement.requirements ?? []);
}
toast.info(
<div>
<h3>Achievement earned!</h3>
<div>
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
{/* @ts-ignore */}
<Display />
</div>
</div>
);
}
};
const earned = persistent<boolean>(false, false);
return createLazyProxy(feature => {
const options = optionsFunc?.call(feature, feature as Achievement) ?? ({} as T);
const { requirements, display, small, image, showPopups, onComplete, ...props } = options;
Object.assign(achievement, decoratedData);
const vueFeature = vueFeatureMixin("achievement", options, () => (
<Achievement
display={achievement.display}
earned={achievement.earned}
requirements={achievement.requirements}
image={achievement.image}
small={achievement.small}
/>
));
processComputable(achievement as T, "visibility");
setDefault(achievement, "visibility", Visibility.Visible);
const visibility = achievement.visibility as ProcessedComputable<Visibility | boolean>;
achievement.visibility = computed(() => {
const display = unref((achievement as GenericAchievement).display);
const achievement = {
type: AchievementType,
...(props as Omit<typeof props, keyof VueFeature | keyof AchievementOptions>),
...vueFeature,
visibility: computed(() => {
const display = unref((achievement as Achievement).display);
switch (settings.msDisplay) {
default:
case AchievementDisplay.All:
return unref(visibility);
return unref(vueFeature.visibility) ?? true;
case AchievementDisplay.Configurable:
if (
unref(achievement.earned) &&
unref(earned) &&
!(
display != null &&
typeof display === "object" &&
"optionsDisplay" in (display as Record<string, unknown>)
"optionsDisplay" in display
)
) {
return Visibility.None;
}
return unref(visibility);
return unref(vueFeature.visibility) ?? true;
case AchievementDisplay.Incomplete:
if (unref(achievement.earned)) {
if (unref(earned)) {
return Visibility.None;
}
return unref(visibility);
return unref(vueFeature.visibility) ?? true;
case AchievementDisplay.None:
return Visibility.None;
}
});
processComputable(achievement as T, "display");
processComputable(achievement as T, "mark");
processComputable(achievement as T, "small");
processComputable(achievement as T, "image");
processComputable(achievement as T, "style");
processComputable(achievement as T, "classes");
processComputable(achievement as T, "showPopups");
setDefault(achievement, "showPopups", true);
for (const decorator of decorators) {
decorator.postConstruct?.(achievement);
}),
earned,
onComplete,
small: processGetter(small),
image: processGetter(image),
showPopups: processGetter(showPopups) ?? true,
display:
display == null
? undefined
: isRef(display) ||
typeof display === "string" ||
typeof display === "function" ||
isJSXElement(display)
? processGetter(display)
: {
requirement: processGetter(display.requirement),
effectDisplay: processGetter(display.effectDisplay),
optionsDisplay: processGetter(display.optionsDisplay)
},
requirements:
requirements == null
? undefined
: [
createVisibilityRequirement(vueFeature.visibility ?? true),
createBooleanRequirement(() => !earned.value),
...(Array.isArray(requirements) ? requirements : [requirements])
],
complete() {
if (earned.value) {
return;
}
const decoratedProps = decorators.reduce(
(current, next) => Object.assign(current, next.getGatheredProps?.(achievement)),
{}
earned.value = true;
achievement.onComplete?.();
if (achievement.display != null && unref(achievement.showPopups) === true) {
const display = achievement.display;
let Display;
if (isRef(display) || typeof display === "string" || isJSXElement(display)) {
Display = () => render(display);
} else if (display.requirement != null) {
Display = () => render(display.requirement!);
} else {
Display = () => displayRequirements(achievement.requirements ?? []);
}
toast.info(
<div>
<h3>Achievement earned!</h3>
<div>{Display}</div>
</div>
);
achievement[GatherProps] = function (this: GenericAchievement) {
const {
visibility,
display,
requirements,
earned,
image,
style,
classes,
mark,
small,
id
} = this;
return {
visibility,
display,
requirements,
earned,
image,
style: unref(style),
classes,
mark,
small,
id,
...decoratedProps
};
};
}
}
} satisfies Achievement;
if (achievement.requirements) {
const genericAchievement = achievement as GenericAchievement;
const requirements = [
createVisibilityRequirement(genericAchievement),
createBooleanRequirement(() => !genericAchievement.earned.value),
...(isArray(achievement.requirements)
? achievement.requirements
: [achievement.requirements])
];
if (achievement.requirements != null) {
watchEffect(() => {
if (settings.active !== player.id) return;
if (requirementsMet(requirements)) {
genericAchievement.complete();
if (requirementsMet(achievement.requirements ?? [])) {
achievement.complete();
}
});
}
return achievement as unknown as Achievement<T>;
return achievement;
});
}
@ -298,7 +222,7 @@ declare module "game/settings" {
}
globalBus.on("loadSettings", settings => {
setDefault(settings, "msDisplay", AchievementDisplay.All);
settings.msDisplay ??= AchievementDisplay.All;
});
const msDisplayOptions = Object.values(AchievementDisplay).map(option => ({
@ -306,15 +230,15 @@ const msDisplayOptions = Object.values(AchievementDisplay).map(option => ({
value: option
}));
registerSettingField(
jsx(() => (
globalBus.on("setupVue", () =>
registerSettingField(() => (
<Select
title={jsx(() => (
title={
<span class="option-title">
Show achievements
<desc>Select which achievements to display based on criterias.</desc>
</span>
))}
}
options={msDisplayOptions}
onUpdate:modelValue={value => (settings.msDisplay = value as AchievementDisplay)}
modelValue={settings.msDisplay}

293
src/features/action.tsx
View file

@ -1,293 +0,0 @@
import { isArray } from "@vue/shared";
import ClickableComponent from "features/clickables/Clickable.vue";
import {
Component,
findFeatures,
GatherProps,
GenericComponent,
getUniqueID,
jsx,
JSXFunction,
OptionsFunc,
Replace,
setDefault,
StyleValue,
Visibility
} from "features/feature";
import { globalBus } from "game/events";
import { persistent } from "game/persistence";
import Decimal, { DecimalSource } from "lib/break_eternity";
import { Unsubscribe } from "nanoevents";
import { Direction } from "util/common";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
} from "util/computed";
import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { coerceComponent, isCoercableComponent, render } from "util/vue";
import { computed, Ref, ref, unref } from "vue";
import { BarOptions, createBar, GenericBar } from "./bars/bar";
import { ClickableOptions } from "./clickables/clickable";
import { GenericDecorator } from "./decorators/common";
/** A symbol used to identify {@link Action} features. */
export const ActionType = Symbol("Action");
/**
* An object that configures an {@link Action}.
*/
export interface ActionOptions extends Omit<ClickableOptions, "onClick" | "onHold"> {
/** The cooldown during which the action cannot be performed again, in seconds. */
duration: Computable<DecimalSource>;
/** Whether or not the action should perform automatically when the cooldown is finished. */
autoStart?: Computable<boolean>;
/** A function that is called when the action is clicked. */
onClick: (amount: DecimalSource) => void;
/** A pass-through to the {@link Bar} used to display the cooldown progress for the action. */
barOptions?: Partial<BarOptions>;
}
/**
* The properties that are added onto a processed {@link ActionOptions} to create an {@link Action}.
*/
export interface BaseAction {
/** 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 ActionType;
/** Whether or not the player is holding down the action. Actions will be considered clicked as soon as the cooldown completes when being held down. */
isHolding: Ref<boolean>;
/** The current amount of progress through the cooldown. */
progress: Ref<DecimalSource>;
/** The bar used to display the current cooldown progress. */
progressBar: GenericBar;
/** Update the cooldown the specified number of seconds */
update: (diff: number) => void;
/** 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<string, unknown>;
}
/** An object that represents a feature that can be clicked upon, and then has a cooldown before it can be clicked again. */
export type Action<T extends ActionOptions> = Replace<
T & BaseAction,
{
duration: GetComputableType<T["duration"]>;
autoStart: GetComputableTypeWithDefault<T["autoStart"], false>;
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
canClick: GetComputableTypeWithDefault<T["canClick"], true>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
mark: GetComputableType<T["mark"]>;
display: JSXFunction;
onClick: VoidFunction;
}
>;
/** A type that matches any valid {@link Action} object. */
export type GenericAction = Replace<
Action<ActionOptions>,
{
autoStart: ProcessedComputable<boolean>;
visibility: ProcessedComputable<Visibility | boolean>;
canClick: ProcessedComputable<boolean>;
}
>;
/**
* Lazily creates an action with the given options.
* @param optionsFunc Action options.
*/
export function createAction<T extends ActionOptions>(
optionsFunc?: OptionsFunc<T, BaseAction, GenericAction>,
...decorators: GenericDecorator[]
): Action<T> {
const progress = persistent<DecimalSource>(0);
const decoratedData = decorators.reduce(
(current, next) => Object.assign(current, next.getPersistentData?.()),
{}
);
return createLazyProxy(feature => {
const action =
optionsFunc?.call(feature, feature) ??
({} as ReturnType<NonNullable<typeof optionsFunc>>);
action.id = getUniqueID("action-");
action.type = ActionType;
action[Component] = ClickableComponent as GenericComponent;
// Required because of display changing types
const genericAction = action as unknown as GenericAction;
for (const decorator of decorators) {
decorator.preConstruct?.(action);
}
action.isHolding = ref(false);
action.progress = progress;
Object.assign(action, decoratedData);
processComputable(action as T, "visibility");
setDefault(action, "visibility", Visibility.Visible);
processComputable(action as T, "duration");
processComputable(action as T, "autoStart");
setDefault(action, "autoStart", false);
processComputable(action as T, "canClick");
setDefault(action, "canClick", true);
processComputable(action as T, "classes");
processComputable(action as T, "style");
processComputable(action as T, "mark");
processComputable(action as T, "display");
const style = action.style as ProcessedComputable<StyleValue | undefined>;
action.style = computed(() => {
const currStyle: StyleValue[] = [
{
cursor: Decimal.gte(
progress.value,
unref(action.duration as ProcessedComputable<DecimalSource>)
)
? "pointer"
: "progress",
display: "flex",
flexDirection: "column"
}
];
const originalStyle = unref(style);
if (isArray(originalStyle)) {
currStyle.push(...originalStyle);
} else if (originalStyle != null) {
currStyle.push(originalStyle);
}
return currStyle as StyleValue;
});
action.progressBar = createBar(() => ({
direction: Direction.Right,
width: 100,
height: 10,
borderStyle: "border-color: black",
baseStyle: "margin-top: -1px",
progress: () => Decimal.div(progress.value, unref(genericAction.duration)),
...action.barOptions
}));
const canClick = action.canClick as ProcessedComputable<boolean>;
action.canClick = computed(
() =>
unref(canClick) &&
Decimal.gte(
progress.value,
unref(action.duration as ProcessedComputable<DecimalSource>)
)
);
const display = action.display as GetComputableType<ClickableOptions["display"]>;
action.display = jsx(() => {
const currDisplay = unref(display);
let Comp: GenericComponent | undefined;
if (isCoercableComponent(currDisplay)) {
Comp = coerceComponent(currDisplay);
} else if (currDisplay != null) {
const Title = coerceComponent(currDisplay.title ?? "", "h3");
const Description = coerceComponent(currDisplay.description, "div");
Comp = coerceComponent(
jsx(() => (
<span>
{currDisplay.title != null ? (
<div>
<Title />
</div>
) : null}
<Description />
</span>
))
);
}
return (
<>
<div style="flex-grow: 1" />
{Comp == null ? null : <Comp />}
<div style="flex-grow: 1" />
{render(genericAction.progressBar)}
</>
);
});
const onClick = action.onClick.bind(action);
action.onClick = function () {
if (unref(action.canClick) === false) {
return;
}
const amount = Decimal.div(progress.value, unref(genericAction.duration));
onClick?.(amount);
progress.value = 0;
};
action.update = function (diff) {
const duration = unref(genericAction.duration);
if (Decimal.gte(progress.value, duration)) {
progress.value = duration;
} else {
progress.value = Decimal.add(progress.value, diff);
if (genericAction.isHolding.value || unref(genericAction.autoStart)) {
genericAction.onClick();
}
}
};
for (const decorator of decorators) {
decorator.postConstruct?.(action);
}
const decoratedProps = decorators.reduce(
(current, next) => Object.assign(current, next.getGatheredProps?.(action)),
{}
);
action[GatherProps] = function (this: GenericAction) {
const {
display,
visibility,
style,
classes,
onClick,
isHolding,
canClick,
small,
mark,
id
} = this;
return {
display,
visibility,
style: unref(style),
classes,
onClick,
isHolding,
canClick,
small,
mark,
id,
...decoratedProps
};
};
return action as unknown as Action<T>;
});
}
const listeners: Record<string, Unsubscribe | undefined> = {};
globalBus.on("addLayer", layer => {
const actions: GenericAction[] = findFeatures(layer, ActionType) as GenericAction[];
listeners[layer.id] = layer.on("postUpdate", diff => {
actions.forEach(action => action.update(diff));
});
});
globalBus.on("removeLayer", layer => {
// unsubscribe from postUpdate
listeners[layer.id]?.();
listeners[layer.id] = undefined;
});

116
src/features/bars/Bar.vue
View file

@ -1,18 +1,10 @@
<template>
<div
v-if="isVisible(visibility)"
:style="[
{
:style="{
width: unref(width) + 'px',
height: unref(height) + 'px',
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
:class="{
bar: true,
...unref(classes)
}"
class="bar"
>
<div
class="overlayTextContainer border"
@ -21,100 +13,64 @@
unref(borderStyle) ?? {}
]"
>
<span v-if="component" class="overlayText" :style="unref(textStyle)">
<component :is="component" />
<span v-if="display" class="overlayText" :style="unref(textStyle)">
<Component />
</span>
</div>
<div
class="border"
:style="[
{ width: unref(width) + 'px', height: unref(height) + 'px' },
unref(style) ?? {},
unref(baseStyle) ?? {},
unref(borderStyle) ?? {}
]"
>
<div class="fill" :style="[barStyle, unref(style) ?? {}, unref(fillStyle) ?? {}]" />
<div class="fill" :style="[barStyle, unref(fillStyle) ?? {}]" />
</div>
<MarkNode :mark="unref(mark)" />
<Node :id="id" />
</div>
</template>
<script lang="ts">
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import { CoercableComponent, isHidden, isVisible, Visibility } from "features/feature";
import type { DecimalSource } from "util/bignum";
<script setup lang="ts">
import Decimal from "util/bignum";
import { Direction } from "util/common";
import { computeOptionalComponent, processedPropType, unwrapRef } from "util/vue";
import type { CSSProperties, StyleValue } from "vue";
import { computed, defineComponent, toRefs, unref } from "vue";
import { render } from "util/vue";
import type { CSSProperties } from "vue";
import { computed, unref } from "vue";
import { Bar } from "./bar";
export default defineComponent({
props: {
progress: {
type: processedPropType<DecimalSource>(String, Object, Number),
required: true
},
width: {
type: processedPropType<number>(Number),
required: true
},
height: {
type: processedPropType<number>(Number),
required: true
},
direction: {
type: processedPropType<Direction>(String),
required: true
},
display: processedPropType<CoercableComponent>(Object, String, Function),
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(Object, String, Array),
classes: processedPropType<Record<string, boolean>>(Object),
borderStyle: processedPropType<StyleValue>(Object, String, Array),
textStyle: processedPropType<StyleValue>(Object, String, Array),
baseStyle: processedPropType<StyleValue>(Object, String, Array),
fillStyle: processedPropType<StyleValue>(Object, String, Array),
mark: processedPropType<boolean | string>(Boolean, String),
id: {
type: String,
required: true
}
},
components: {
MarkNode,
Node
},
setup(props) {
const { progress, width, height, direction, display } = toRefs(props);
const props = defineProps<{
width: Bar["width"];
height: Bar["height"];
direction: Bar["direction"];
borderStyle: Bar["borderStyle"];
baseStyle: Bar["baseStyle"];
textStyle: Bar["textStyle"];
fillStyle: Bar["fillStyle"];
progress: Bar["progress"];
display: Bar["display"];
}>();
const normalizedProgress = computed(() => {
let progressNumber =
progress.value instanceof Decimal
? progress.value.toNumber()
: Number(progress.value);
props.progress instanceof Decimal
? props.progress.toNumber()
: Number(props.progress);
return (1 - Math.min(Math.max(progressNumber, 0), 1)) * 100;
});
const barStyle = computed(() => {
const barStyle: Partial<CSSProperties> = {
width: unwrapRef(width) + 0.5 + "px",
height: unwrapRef(height) + 0.5 + "px"
width: unref(props.width) + 0.5 + "px",
height: unref(props.height) + 0.5 + "px"
};
switch (unref(direction)) {
switch (props.direction) {
case Direction.Up:
barStyle.clipPath = `inset(${normalizedProgress.value}% 0% 0% 0%)`;
barStyle.width = unwrapRef(width) + 1 + "px";
barStyle.width = unref(props.width) + 1 + "px";
break;
case Direction.Down:
barStyle.clipPath = `inset(0% 0% ${normalizedProgress.value}% 0%)`;
barStyle.width = unwrapRef(width) + 1 + "px";
barStyle.width = unref(props.width) + 1 + "px";
break;
case Direction.Right:
barStyle.clipPath = `inset(0% ${normalizedProgress.value}% 0% 0%)`;
@ -129,19 +85,7 @@ export default defineComponent({
return barStyle;
});
const component = computeOptionalComponent(display);
return {
normalizedProgress,
barStyle,
component,
unref,
Visibility,
isVisible,
isHidden
};
}
});
const Component = () => props.display ? render(props.display) : null;
</script>
<style scoped>

185
src/features/bars/bar.ts
View file

@ -1,185 +0,0 @@
import BarComponent from "features/bars/Bar.vue";
import { GenericDecorator } from "features/decorators/common";
import type {
CoercableComponent,
GenericComponent,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import { Component, GatherProps, Visibility, getUniqueID, setDefault } from "features/feature";
import type { DecimalSource } from "util/bignum";
import { Direction } from "util/common";
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 Bar} features. */
export const BarType = Symbol("Bar");
/**
* An object that configures a {@link Bar}.
*/
export interface BarOptions {
/** Whether this bar should be visible. */
visibility?: Computable<Visibility | boolean>;
/** The width of the bar. */
width: Computable<number>;
/** The height of the bar. */
height: Computable<number>;
/** The direction in which the bar progresses. */
direction: Computable<Direction>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to the bar's border. */
borderStyle?: Computable<StyleValue>;
/** CSS to apply to the bar's base. */
baseStyle?: Computable<StyleValue>;
/** CSS to apply to the bar's text. */
textStyle?: Computable<StyleValue>;
/** CSS to apply to the bar's fill. */
fillStyle?: Computable<StyleValue>;
/** The progress value of the bar, from 0 to 1. */
progress: Computable<DecimalSource>;
/** The display to use for this bar. */
display?: Computable<CoercableComponent>;
/** Shows a marker on the corner of the feature. */
mark?: Computable<boolean | string>;
}
/**
* The properties that are added onto a processed {@link BarOptions} to create a {@link Bar}.
*/
export interface BaseBar {
/** 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 BarType;
/** 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<string, unknown>;
}
/** An object that represents a feature that displays some sort of progress or completion or resource with a cap. */
export type Bar<T extends BarOptions> = Replace<
T & BaseBar,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
width: GetComputableType<T["width"]>;
height: GetComputableType<T["height"]>;
direction: GetComputableType<T["direction"]>;
style: GetComputableType<T["style"]>;
classes: GetComputableType<T["classes"]>;
borderStyle: GetComputableType<T["borderStyle"]>;
baseStyle: GetComputableType<T["baseStyle"]>;
textStyle: GetComputableType<T["textStyle"]>;
fillStyle: GetComputableType<T["fillStyle"]>;
progress: GetComputableType<T["progress"]>;
display: GetComputableType<T["display"]>;
mark: GetComputableType<T["mark"]>;
}
>;
/** A type that matches any valid {@link Bar} object. */
export type GenericBar = Replace<
Bar<BarOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
/**
* Lazily creates a bar with the given options.
* @param optionsFunc Bar options.
*/
export function createBar<T extends BarOptions>(
optionsFunc: OptionsFunc<T, BaseBar, GenericBar>,
...decorators: GenericDecorator[]
): Bar<T> {
const decoratedData = decorators.reduce(
(current, next) => Object.assign(current, next.getPersistentData?.()),
{}
);
return createLazyProxy(feature => {
const bar = optionsFunc.call(feature, feature);
bar.id = getUniqueID("bar-");
bar.type = BarType;
bar[Component] = BarComponent as GenericComponent;
for (const decorator of decorators) {
decorator.preConstruct?.(bar);
}
Object.assign(bar, decoratedData);
processComputable(bar as T, "visibility");
setDefault(bar, "visibility", Visibility.Visible);
processComputable(bar as T, "width");
processComputable(bar as T, "height");
processComputable(bar as T, "direction");
processComputable(bar as T, "style");
processComputable(bar as T, "classes");
processComputable(bar as T, "borderStyle");
processComputable(bar as T, "baseStyle");
processComputable(bar as T, "textStyle");
processComputable(bar as T, "fillStyle");
processComputable(bar as T, "progress");
processComputable(bar as T, "display");
processComputable(bar as T, "mark");
for (const decorator of decorators) {
decorator.postConstruct?.(bar);
}
const decoratedProps = decorators.reduce(
(current, next) => Object.assign(current, next.getGatheredProps?.(bar)),
{}
);
bar[GatherProps] = function (this: GenericBar) {
const {
progress,
width,
height,
direction,
display,
visibility,
style,
classes,
borderStyle,
textStyle,
baseStyle,
fillStyle,
mark,
id
} = this;
return {
progress,
width,
height,
direction,
display,
visibility,
style: unref(style),
classes,
borderStyle,
textStyle,
baseStyle,
fillStyle,
mark,
id,
...decoratedProps
};
};
return bar as unknown as Bar<T>;
});
}

110
src/features/bars/bar.tsx Normal file
View file

@ -0,0 +1,110 @@
import Bar from "features/bars/Bar.vue";
import type { OptionsFunc, Replace } from "features/feature";
import type { DecimalSource } from "util/bignum";
import { Direction } from "util/common";
import { ProcessedRefOrGetter, 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 Bar} features. */
export const BarType = Symbol("Bar");
/**
* An object that configures a {@link Bar}.
*/
export interface BarOptions extends VueFeatureOptions {
/** The width of the bar. */
width: MaybeRefOrGetter<number>;
/** The height of the bar. */
height: MaybeRefOrGetter<number>;
/** The direction in which the bar progresses. */
direction: MaybeRefOrGetter<Direction>;
/** CSS to apply to the bar's border. */
borderStyle?: MaybeRefOrGetter<CSSProperties>;
/** CSS to apply to the bar's base. */
baseStyle?: MaybeRefOrGetter<CSSProperties>;
/** CSS to apply to the bar's text. */
textStyle?: MaybeRefOrGetter<CSSProperties>;
/** CSS to apply to the bar's fill. */
fillStyle?: MaybeRefOrGetter<CSSProperties>;
/** The progress value of the bar, from 0 to 1. */
progress: MaybeRefOrGetter<DecimalSource>;
/** The display to use for this bar. */
display?: MaybeRefOrGetter<Renderable>;
}
/**
* The properties that are added onto a processed {@link BarOptions} to create a {@link Bar}.
*/
export interface BaseBar extends VueFeature {
/** A symbol that helps identify features of the same type. */
type: typeof BarType;
}
/** An object that represents a feature that displays some sort of progress or completion or resource with a cap. */
export type Bar = Replace<
Replace<BarOptions, BaseBar>,
{
width: ProcessedRefOrGetter<BarOptions["width"]>;
height: ProcessedRefOrGetter<BarOptions["height"]>;
direction: ProcessedRefOrGetter<BarOptions["direction"]>;
borderStyle: ProcessedRefOrGetter<BarOptions["borderStyle"]>;
baseStyle: ProcessedRefOrGetter<BarOptions["baseStyle"]>;
textStyle: ProcessedRefOrGetter<BarOptions["textStyle"]>;
fillStyle: ProcessedRefOrGetter<BarOptions["fillStyle"]>;
progress: ProcessedRefOrGetter<BarOptions["progress"]>;
display?: MaybeRef<Renderable>;
}
>;
/**
* Lazily creates a bar with the given options.
* @param optionsFunc Bar options.
*/
export function createBar<T extends BarOptions>(optionsFunc: OptionsFunc<T, BaseBar, Bar>) {
return createLazyProxy(feature => {
const options = optionsFunc?.call(feature, feature as Bar);
const {
width,
height,
direction,
borderStyle,
baseStyle,
textStyle,
fillStyle,
progress,
display,
...props
} = options;
const bar = {
type: BarType,
...(props as Omit<typeof props, keyof VueFeature | keyof BarOptions>),
...vueFeatureMixin("bar", options, () => (
<Bar
width={bar.width}
height={bar.height}
direction={bar.direction}
borderStyle={bar.borderStyle}
baseStyle={bar.baseStyle}
textStyle={bar.textStyle}
fillStyle={bar.fillStyle}
progress={bar.progress}
display={bar.display}
/>
)),
width: processGetter(width),
height: processGetter(height),
direction: processGetter(direction),
borderStyle: processGetter(borderStyle),
baseStyle: processGetter(baseStyle),
textStyle: processGetter(textStyle),
fillStyle: processGetter(fillStyle),
progress: processGetter(progress),
display: processGetter(display)
} satisfies Bar;
return bar;
});
}

294
src/features/boards/Board.vue
View file

@ -1,294 +0,0 @@
<template>
<panZoom
v-if="isVisible(visibility)"
:style="[
{
width,
height
},
style
]"
:class="classes"
selector=".g1"
:options="{ initialZoom: 1, minZoom: 0.1, maxZoom: 10, zoomDoubleClickSpeed: 1 }"
ref="stage"
@init="onInit"
@mousemove="drag"
@touchmove="drag"
@mousedown="(e: MouseEvent) => mouseDown(e)"
@touchstart="(e: TouchEvent) => mouseDown(e)"
@mouseup="() => endDragging(unref(draggingNode))"
@touchend.passive="() => endDragging(unref(draggingNode))"
@mouseleave="() => endDragging(unref(draggingNode), true)"
>
<svg class="stage" width="100%" height="100%">
<g class="g1">
<transition-group name="link" appear>
<g
v-for="link in unref(links) || []"
:key="`${link.startNode.id}-${link.endNode.id}`"
>
<BoardLinkVue
:link="link"
:dragging="unref(draggingNode)"
:dragged="
link.startNode === unref(draggingNode) ||
link.endNode === unref(draggingNode)
? dragged
: undefined
"
/>
</g>
</transition-group>
<transition-group name="grow" :duration="500" appear>
<g v-for="node in sortedNodes" :key="node.id" style="transition-duration: 0s">
<BoardNodeVue
:node="node"
:nodeType="types[node.type]"
:dragging="unref(draggingNode)"
:dragged="unref(draggingNode) === node ? dragged : undefined"
:hasDragged="unref(draggingNode) == null ? false : hasDragged"
:receivingNode="unref(receivingNode) === node"
:isSelected="unref(selectedNode) === node"
:selectedAction="
unref(selectedNode) === node ? unref(selectedAction) : null
"
@mouseDown="mouseDown"
@endDragging="endDragging"
@clickAction="(actionId: string) => clickAction(node, actionId)"
/>
</g>
</transition-group>
</g>
</svg>
</panZoom>
</template>
<script setup lang="ts">
import type {
BoardData,
BoardNode,
BoardNodeLink,
GenericBoardNodeAction,
GenericNodeType
} from "features/boards/board";
import { getNodeProperty } from "features/boards/board";
import type { StyleValue } from "features/feature";
import { Visibility, isVisible } from "features/feature";
import type { ProcessedComputable } from "util/computed";
import { Ref, computed, ref, toRefs, unref, watchEffect } from "vue";
import BoardLinkVue from "./BoardLink.vue";
import BoardNodeVue from "./BoardNode.vue";
const _props = defineProps<{
nodes: Ref<BoardNode[]>;
types: Record<string, GenericNodeType>;
state: Ref<BoardData>;
visibility: ProcessedComputable<Visibility | boolean>;
width?: ProcessedComputable<string>;
height?: ProcessedComputable<string>;
style?: ProcessedComputable<StyleValue>;
classes?: ProcessedComputable<Record<string, boolean>>;
links: Ref<BoardNodeLink[] | null>;
selectedAction: Ref<GenericBoardNodeAction | null>;
selectedNode: Ref<BoardNode | null>;
draggingNode: Ref<BoardNode | null>;
receivingNode: Ref<BoardNode | null>;
mousePosition: Ref<{ x: number; y: number } | null>;
setReceivingNode: (node: BoardNode | null) => void;
setDraggingNode: (node: BoardNode | null) => void;
}>();
const props = toRefs(_props);
const lastMousePosition = ref({ x: 0, y: 0 });
const dragged = ref({ x: 0, y: 0 });
const hasDragged = ref(false);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const stage = ref<any>(null);
const sortedNodes = computed(() => {
const nodes = props.nodes.value.slice();
if (props.selectedNode.value) {
const node = nodes.splice(nodes.indexOf(props.selectedNode.value), 1)[0];
nodes.push(node);
}
if (props.draggingNode.value) {
const node = nodes.splice(nodes.indexOf(props.draggingNode.value), 1)[0];
nodes.push(node);
}
return nodes;
});
watchEffect(() => {
const node = props.draggingNode.value;
if (node == null) {
return null;
}
const position = {
x: node.position.x + dragged.value.x,
y: node.position.y + dragged.value.y
};
let smallestDistance = Number.MAX_VALUE;
props.setReceivingNode.value(
props.nodes.value.reduce((smallest: BoardNode | null, curr: BoardNode) => {
if (curr.id === node.id) {
return smallest;
}
const nodeType = props.types.value[curr.type];
const canAccept = getNodeProperty(nodeType.canAccept, curr, node);
if (!canAccept) {
return smallest;
}
const distanceSquared =
Math.pow(position.x - curr.position.x, 2) +
Math.pow(position.y - curr.position.y, 2);
let size = getNodeProperty(nodeType.size, curr);
if (distanceSquared > smallestDistance || distanceSquared > size * size) {
return smallest;
}
smallestDistance = distanceSquared;
return curr;
}, null)
);
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function onInit(panzoomInstance: any) {
panzoomInstance.setTransformOrigin(null);
panzoomInstance.moveTo(stage.value.$el.clientWidth / 2, stage.value.$el.clientHeight / 2);
}
function mouseDown(e: MouseEvent | TouchEvent, node: BoardNode | null = null, draggable = false) {
if (props.draggingNode.value == null) {
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
};
dragged.value = { x: 0, y: 0 };
hasDragged.value = false;
if (draggable) {
props.setDraggingNode.value(node);
}
}
if (node != null) {
props.state.value.selectedNode = null;
props.state.value.selectedAction = null;
}
}
function drag(e: MouseEvent | TouchEvent) {
const { x, y, scale } = stage.value.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 {
endDragging(props.draggingNode.value);
props.mousePosition.value = null;
return;
}
} else {
clientX = e.clientX;
clientY = e.clientY;
}
props.mousePosition.value = {
x: (clientX - x) / scale,
y: (clientY - y) / scale
};
dragged.value = {
x: dragged.value.x + (clientX - lastMousePosition.value.x) / scale,
y: dragged.value.y + (clientY - lastMousePosition.value.y) / scale
};
lastMousePosition.value = {
x: clientX,
y: clientY
};
if (Math.abs(dragged.value.x) > 10 || Math.abs(dragged.value.y) > 10) {
hasDragged.value = true;
}
if (props.draggingNode.value != null) {
e.preventDefault();
e.stopPropagation();
}
}
function endDragging(node: BoardNode | null, mouseLeave = false) {
if (props.draggingNode.value != null && props.draggingNode.value === node) {
if (props.receivingNode.value == null) {
props.draggingNode.value.position.x += Math.round(dragged.value.x / 25) * 25;
props.draggingNode.value.position.y += Math.round(dragged.value.y / 25) * 25;
}
const nodes = props.nodes.value;
nodes.push(nodes.splice(nodes.indexOf(props.draggingNode.value), 1)[0]);
if (props.receivingNode.value) {
props.types.value[props.receivingNode.value.type].onDrop?.(
props.receivingNode.value,
props.draggingNode.value
);
}
props.setDraggingNode.value(null);
} else if (!hasDragged.value && !mouseLeave) {
props.state.value.selectedNode = null;
props.state.value.selectedAction = null;
}
}
function clickAction(node: BoardNode, actionId: string) {
if (props.state.value.selectedAction === actionId) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
unref(props.selectedAction)!.onClick(unref(props.selectedNode)!);
} else {
props.state.value = { ...props.state.value, selectedAction: actionId };
}
}
</script>
<style>
.vue-pan-zoom-scene {
width: 100%;
height: 100%;
cursor: grab;
}
.vue-pan-zoom-scene:active {
cursor: grabbing;
}
.g1 {
transition-duration: 0s;
}
.link-enter-from,
.link-leave-to {
opacity: 0;
}
</style>

80
src/features/boards/BoardLink.vue
View file

@ -1,80 +0,0 @@
<template>
<line
class="link"
v-bind="linkProps"
:class="{ pulsing: link.pulsing }"
:x1="startPosition.x"
:y1="startPosition.y"
:x2="endPosition.x"
:y2="endPosition.y"
/>
</template>
<script setup lang="ts">
import type { BoardNode, BoardNodeLink } from "features/boards/board";
import { kebabifyObject } from "util/vue";
import { computed, toRefs, unref } from "vue";
const _props = defineProps<{
link: BoardNodeLink;
dragging: BoardNode | null;
dragged?: {
x: number;
y: number;
};
}>();
const props = toRefs(_props);
const startPosition = computed(() => {
const position = { ...props.link.value.startNode.position };
if (props.link.value.offsetStart) {
position.x += unref(props.link.value.offsetStart).x;
position.y += unref(props.link.value.offsetStart).y;
}
if (props.dragging?.value === props.link.value.startNode) {
position.x += props.dragged?.value?.x ?? 0;
position.y += props.dragged?.value?.y ?? 0;
}
return position;
});
const endPosition = computed(() => {
const position = { ...props.link.value.endNode.position };
if (props.link.value.offsetEnd) {
position.x += unref(props.link.value.offsetEnd).x;
position.y += unref(props.link.value.offsetEnd).y;
}
if (props.dragging?.value === props.link.value.endNode) {
position.x += props.dragged?.value?.x ?? 0;
position.y += props.dragged?.value?.y ?? 0;
}
return position;
});
const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record<string, unknown>));
</script>
<style scoped>
.link {
transition-duration: 0s;
pointer-events: none;
}
.link.pulsing {
animation: pulsing 2s ease-in infinite;
}
@keyframes pulsing {
0% {
opacity: 0.25;
}
50% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
</style>

339
src/features/boards/BoardNode.vue
View file

@ -1,339 +0,0 @@
<template>
<!-- Ugly casting to prevent TS compiler error about style because vue doesn't think it supports arrays when it does -->
<g
class="boardnode"
:class="{ [node.type]: true, isSelected, isDraggable, ...classes }"
:style="[{ opacity: dragging?.id === node.id && hasDragged ? 0.5 : 1 }, style ?? []] as unknown as (string | CSSProperties)"
:transform="`translate(${position.x},${position.y})${isSelected ? ' scale(1.2)' : ''}`"
>
<BoardNodeAction
:actions="actions ?? []"
:is-selected="isSelected"
:node="node"
:node-type="nodeType"
:selected-action="selectedAction"
@click-action="(actionId: string) => emit('clickAction', actionId)"
/>
<g
class="node-container"
@mousedown="mouseDown"
@touchstart.passive="mouseDown"
@mouseup="mouseUp"
@touchend.passive="mouseUp"
>
<g v-if="shape === Shape.Circle">
<circle
v-if="canAccept"
class="receiver"
:r="size + 8"
:fill="backgroundColor"
:stroke="receivingNode ? '#0F0' : '#0F03'"
:stroke-width="2"
/>
<circle
class="body"
:r="size"
:fill="fillColor"
:stroke="outlineColor"
:stroke-width="4"
/>
<circle
class="progress progressFill"
v-if="progressDisplay === ProgressDisplay.Fill"
:r="Math.max(size * progress - 2, 0)"
:fill="progressColor"
/>
<circle
v-else
:r="size + 4.5"
class="progress 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"
/>
</g>
<g v-else-if="shape === Shape.Diamond" transform="rotate(45, 0, 0)">
<rect
v-if="canAccept"
class="receiver"
:width="size * sqrtTwo + 16"
:height="size * sqrtTwo + 16"
:transform="`translate(${-(size * sqrtTwo + 16) / 2}, ${
-(size * sqrtTwo + 16) / 2
})`"
:fill="backgroundColor"
:stroke="receivingNode ? '#0F0' : '#0F03'"
:stroke-width="2"
/>
<rect
class="body"
:width="size * sqrtTwo"
:height="size * sqrtTwo"
:transform="`translate(${(-size * sqrtTwo) / 2}, ${(-size * sqrtTwo) / 2})`"
:fill="fillColor"
:stroke="outlineColor"
:stroke-width="4"
/>
<rect
v-if="progressDisplay === ProgressDisplay.Fill"
class="progress progressFill"
:width="Math.max(size * sqrtTwo * progress - 2, 0)"
:height="Math.max(size * sqrtTwo * progress - 2, 0)"
:transform="`translate(${-Math.max(size * sqrtTwo * progress - 2, 0) / 2}, ${
-Math.max(size * sqrtTwo * progress - 2, 0) / 2
})`"
:fill="progressColor"
/>
<rect
v-else
class="progress progressDiamond"
:width="size * sqrtTwo + 9"
:height="size * sqrtTwo + 9"
:transform="`translate(${-(size * sqrtTwo + 9) / 2}, ${
-(size * sqrtTwo + 9) / 2
})`"
fill="transparent"
:stroke-dasharray="(size * sqrtTwo + 9) * 4"
:stroke-width="5"
:stroke-dashoffset="
(size * sqrtTwo + 9) * 4 - progress * (size * sqrtTwo + 9) * 4
"
:stroke="progressColor"
/>
</g>
<text :fill="titleColor" class="node-title">{{ title }}</text>
</g>
<transition name="fade" appear>
<g v-if="label">
<text
:fill="label.color ?? titleColor"
class="node-title"
:class="{ pulsing: label.pulsing }"
:y="-size - 20"
>{{ label.text }}
</text>
</g>
</transition>
<transition name="fade" appear>
<text
v-if="isSelected && selectedAction"
:fill="confirmationLabel.color ?? titleColor"
class="node-title"
:class="{ pulsing: confirmationLabel.pulsing }"
:y="size + 75"
>{{ confirmationLabel.text }}</text
>
</transition>
</g>
</template>
<script setup lang="ts">
import themes from "data/themes";
import type { BoardNode, GenericBoardNodeAction, GenericNodeType } from "features/boards/board";
import { ProgressDisplay, Shape, getNodeProperty } from "features/boards/board";
import { isVisible } from "features/feature";
import settings from "game/settings";
import { CSSProperties, computed, toRefs, unref, watch } from "vue";
import BoardNodeAction from "./BoardNodeAction.vue";
const sqrtTwo = Math.sqrt(2);
const _props = defineProps<{
node: BoardNode;
nodeType: GenericNodeType;
dragging: BoardNode | null;
dragged?: {
x: number;
y: number;
};
hasDragged?: boolean;
receivingNode?: boolean;
isSelected: boolean;
selectedAction: GenericBoardNodeAction | null;
}>();
const props = toRefs(_props);
const emit = defineEmits<{
(e: "mouseDown", event: MouseEvent | TouchEvent, node: BoardNode, isDraggable: boolean): void;
(e: "endDragging", node: BoardNode): void;
(e: "clickAction", actionId: string): void;
}>();
const isDraggable = computed(() =>
getNodeProperty(props.nodeType.value.draggable, unref(props.node))
);
watch(isDraggable, value => {
const node = unref(props.node);
if (unref(props.dragging) === node && !value) {
emit("endDragging", node);
}
});
const actions = computed(() => {
const node = unref(props.node);
return getNodeProperty(props.nodeType.value.actions, node)?.filter(action =>
isVisible(getNodeProperty(action.visibility, node))
);
});
const position = computed(() => {
const node = unref(props.node);
if (
getNodeProperty(props.nodeType.value.draggable, node) &&
unref(props.dragging)?.id === node.id &&
unref(props.dragged) != null
) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const { x, y } = unref(props.dragged)!;
return {
x: node.position.x + Math.round(x / 25) * 25,
y: node.position.y + Math.round(y / 25) * 25
};
}
return node.position;
});
const shape = computed(() => getNodeProperty(props.nodeType.value.shape, unref(props.node)));
const title = computed(() => getNodeProperty(props.nodeType.value.title, unref(props.node)));
const label = computed(
() =>
(props.isSelected.value
? unref(props.selectedAction) &&
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
getNodeProperty(unref(props.selectedAction)!.tooltip, unref(props.node))
: null) ?? getNodeProperty(props.nodeType.value.label, unref(props.node))
);
const confirmationLabel = computed(() =>
getNodeProperty(
unref(props.selectedAction)?.confirmationLabel ?? {
text: "Tap again to confirm"
},
unref(props.node)
)
);
const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
const progress = computed(
() => getNodeProperty(props.nodeType.value.progress, unref(props.node)) ?? 0
);
const backgroundColor = computed(() => themes[settings.theme].variables["--background"]);
const outlineColor = computed(
() =>
getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ??
themes[settings.theme].variables["--outline"]
);
const fillColor = computed(
() =>
getNodeProperty(props.nodeType.value.fillColor, unref(props.node)) ??
themes[settings.theme].variables["--raised-background"]
);
const progressColor = computed(() =>
getNodeProperty(props.nodeType.value.progressColor, unref(props.node))
);
const titleColor = computed(
() =>
getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ??
themes[settings.theme].variables["--foreground"]
);
const progressDisplay = computed(() =>
getNodeProperty(props.nodeType.value.progressDisplay, unref(props.node))
);
const canAccept = computed(
() =>
props.dragging.value != null &&
unref(props.hasDragged) &&
getNodeProperty(props.nodeType.value.canAccept, unref(props.node), props.dragging.value)
);
const style = computed(() => getNodeProperty(props.nodeType.value.style, unref(props.node)));
const classes = computed(() => getNodeProperty(props.nodeType.value.classes, unref(props.node)));
function mouseDown(e: MouseEvent | TouchEvent) {
emit("mouseDown", e, props.node.value, isDraggable.value);
}
function mouseUp(e: MouseEvent | TouchEvent) {
if (!props.hasDragged?.value) {
emit("endDragging", props.node.value);
props.nodeType.value.onClick?.(props.node.value);
e.stopPropagation();
}
}
</script>
<style scoped>
.boardnode {
cursor: pointer;
transition-duration: 0s;
}
.boardnode:hover .body {
fill: var(--highlighted);
}
.boardnode.isSelected .body {
fill: var(--accent1) !important;
}
.boardnode:not(.isDraggable) .body {
fill: var(--locked);
}
.node-title {
text-anchor: middle;
dominant-baseline: middle;
font-family: monospace;
font-size: 200%;
pointer-events: none;
filter: drop-shadow(3px 3px 2px var(--tooltip-background));
}
.progress {
transition-duration: 0.05s;
}
.progressRing {
transform: rotate(-90deg);
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.pulsing {
animation: pulsing 2s ease-in infinite;
}
@keyframes pulsing {
0% {
opacity: 0.25;
}
50% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
</style>
<style>
.grow-enter-from .node-container,
.grow-leave-to .node-container {
transform: scale(0);
}
</style>

109
src/features/boards/BoardNodeAction.vue
View file

@ -1,109 +0,0 @@
<template>
<transition name="actions" appear>
<g v-if="isSelected && actions">
<g
v-for="(action, index) in actions"
:key="action.id"
class="action"
:class="{ selected: selectedAction?.id === action.id }"
:transform="`translate(
${
(-size - 30) *
Math.sin(((actions.length - 1) / 2 - index) * actionDistance)
},
${
(size + 30) *
Math.cos(((actions.length - 1) / 2 - index) * actionDistance)
}
)`"
@mousedown="e => performAction(e, action)"
@touchstart="e => performAction(e, action)"
@mouseup="e => actionMouseUp(e, action)"
@touchend.stop="e => actionMouseUp(e, action)"
>
<circle
:fill="getNodeProperty(action.fillColor, node)"
r="20"
:stroke-width="selectedAction?.id === action.id ? 4 : 0"
:stroke="outlineColor"
/>
<text :fill="titleColor" class="material-icons">{{
getNodeProperty(action.icon, node)
}}</text>
</g>
</g>
</transition>
</template>
<script setup lang="ts">
import themes from "data/themes";
import type { BoardNode, GenericBoardNodeAction, GenericNodeType } from "features/boards/board";
import { getNodeProperty } from "features/boards/board";
import settings from "game/settings";
import { computed, toRefs, unref } from "vue";
const _props = defineProps<{
node: BoardNode;
nodeType: GenericNodeType;
actions?: GenericBoardNodeAction[];
isSelected: boolean;
selectedAction: GenericBoardNodeAction | null;
}>();
const props = toRefs(_props);
const emit = defineEmits<{
(e: "clickAction", actionId: string): void;
}>();
const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
const outlineColor = computed(
() =>
getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ??
themes[settings.theme].variables["--outline"]
);
const titleColor = computed(
() =>
getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ??
themes[settings.theme].variables["--foreground"]
);
const actionDistance = computed(() =>
getNodeProperty(props.nodeType.value.actionDistance, unref(props.node))
);
function performAction(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
emit("clickAction", action.id);
e.preventDefault();
e.stopPropagation();
}
function actionMouseUp(e: MouseEvent | TouchEvent, action: GenericBoardNodeAction) {
if (unref(props.selectedAction)?.id === action.id) {
e.preventDefault();
e.stopPropagation();
}
}
</script>
<style scoped>
.action:not(.boardnode):hover circle,
.action:not(.boardnode).selected circle {
r: 25;
}
.action:not(.boardnode):hover text,
.action:not(.boardnode).selected text {
font-size: 187.5%; /* 150% * 1.25 */
}
.action:not(.boardnode) text {
text-anchor: middle;
dominant-baseline: central;
}
</style>
<style>
.actions-enter-from .action,
.actions-leave-to .action {
transform: translate(0, 0);
}
</style>

631
src/features/boards/board.ts
View file

@ -1,631 +0,0 @@
import BoardComponent from "features/boards/Board.vue";
import type { GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
import {
Component,
findFeatures,
GatherProps,
getUniqueID,
setDefault,
Visibility
} from "features/feature";
import { globalBus } from "game/events";
import { DefaultValue, deletePersistent, Persistent, State } from "game/persistence";
import { persistent } from "game/persistence";
import type { Unsubscribe } from "nanoevents";
import { Direction, isFunction } from "util/common";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
} from "util/computed";
import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { computed, isRef, ref, Ref, unref } from "vue";
import panZoom from "vue-panzoom";
import type { Link } from "../links/links";
globalBus.on("setupVue", app => panZoom.install(app));
/** A symbol used to identify {@link Board} features. */
export const BoardType = Symbol("Board");
/**
* A type representing a computable value for a node on the board. Used for node types to return different values based on the given node and the state of the board.
*/
export type NodeComputable<T, S extends unknown[] = []> =
| Computable<T>
| ((node: BoardNode, ...args: S) => T);
/** Ways to display progress of an action with a duration. */
export enum ProgressDisplay {
Outline = "Outline",
Fill = "Fill"
}
/** Node shapes. */
export enum Shape {
Circle = "Circle",
Diamond = "Triangle"
}
/** An object representing a node on the board. */
export interface BoardNode {
id: number;
position: {
x: number;
y: number;
};
type: string;
state?: State;
pinned?: boolean;
}
/** An object representing a link between two nodes on the board. */
export interface BoardNodeLink extends Omit<Link, "startNode" | "endNode"> {
startNode: BoardNode;
endNode: BoardNode;
stroke: string;
strokeWidth: number;
pulsing?: boolean;
}
/** An object representing a label for a node. */
export interface NodeLabel {
text: string;
color?: string;
pulsing?: boolean;
}
/** The persistent data for a board. */
export type BoardData = {
nodes: BoardNode[];
selectedNode: number | null;
selectedAction: string | null;
};
/**
* An object that configures a {@link NodeType}.
*/
export interface NodeTypeOptions {
/** The title to display for the node. */
title: NodeComputable<string>;
/** An optional label for the node. */
label?: NodeComputable<NodeLabel | null>;
/** The size of the node - diameter for circles, width and height for squares. */
size: NodeComputable<number>;
/** CSS to apply to this node. */
style?: NodeComputable<StyleValue>;
/** Dictionary of CSS classes to apply to this node. */
classes?: NodeComputable<Record<string, boolean>>;
/** Whether the node is draggable or not. */
draggable?: NodeComputable<boolean>;
/** The shape of the node. */
shape: NodeComputable<Shape>;
/** Whether the node can accept another node being dropped upon it. */
canAccept?: NodeComputable<boolean, [BoardNode]>;
/** The progress value of the node, from 0 to 1. */
progress?: NodeComputable<number>;
/** How the progress should be displayed on the node. */
progressDisplay?: NodeComputable<ProgressDisplay>;
/** The color of the progress indicator. */
progressColor?: NodeComputable<string>;
/** The fill color of the node. */
fillColor?: NodeComputable<string>;
/** The outline color of the node. */
outlineColor?: NodeComputable<string>;
/** The color of the title text. */
titleColor?: NodeComputable<string>;
/** The list of action options for the node. */
actions?: BoardNodeActionOptions[];
/** The arc between each action, in radians. */
actionDistance?: NodeComputable<number>;
/** A function that is called when the node is clicked. */
onClick?: (node: BoardNode) => void;
/** A function that is called when a node is dropped onto this node. */
onDrop?: (node: BoardNode, otherNode: BoardNode) => void;
/** A function that is called for each node of this type every tick. */
update?: (node: BoardNode, diff: number) => void;
}
/**
* The properties that are added onto a processed {@link NodeTypeOptions} to create a {@link NodeType}.
*/
export interface BaseNodeType {
/** The nodes currently on the board of this type. */
nodes: Ref<BoardNode[]>;
}
/** An object that represents a type of node that can appear on a board. It will handle getting properties and callbacks for every node of that type. */
export type NodeType<T extends NodeTypeOptions> = Replace<
T & BaseNodeType,
{
title: GetComputableType<T["title"]>;
label: GetComputableType<T["label"]>;
size: GetComputableTypeWithDefault<T["size"], 50>;
style: GetComputableType<T["style"]>;
classes: GetComputableType<T["classes"]>;
draggable: GetComputableTypeWithDefault<T["draggable"], false>;
shape: GetComputableTypeWithDefault<T["shape"], Shape.Circle>;
canAccept: GetComputableTypeWithDefault<T["canAccept"], false>;
progress: GetComputableType<T["progress"]>;
progressDisplay: GetComputableTypeWithDefault<T["progressDisplay"], ProgressDisplay.Fill>;
progressColor: GetComputableTypeWithDefault<T["progressColor"], "none">;
fillColor: GetComputableType<T["fillColor"]>;
outlineColor: GetComputableType<T["outlineColor"]>;
titleColor: GetComputableType<T["titleColor"]>;
actions?: GenericBoardNodeAction[];
actionDistance: GetComputableTypeWithDefault<T["actionDistance"], number>;
}
>;
/** A type that matches any valid {@link NodeType} object. */
export type GenericNodeType = Replace<
NodeType<NodeTypeOptions>,
{
size: NodeComputable<number>;
draggable: NodeComputable<boolean>;
shape: NodeComputable<Shape>;
canAccept: NodeComputable<boolean, [BoardNode]>;
progressDisplay: NodeComputable<ProgressDisplay>;
progressColor: NodeComputable<string>;
actionDistance: NodeComputable<number>;
}
>;
/**
* An object that configures a {@link BoardNodeAction}.
*/
export interface BoardNodeActionOptions {
/** A unique identifier for the action. */
id: string;
/** Whether this action should be visible. */
visibility?: NodeComputable<Visibility | boolean>;
/** The icon to display for the action. */
icon: NodeComputable<string>;
/** The fill color of the action. */
fillColor?: NodeComputable<string>;
/** The tooltip text to display for the action. */
tooltip: NodeComputable<NodeLabel>;
/** The confirmation label that appears under the action. */
confirmationLabel?: NodeComputable<NodeLabel>;
/** An array of board node links associated with the action. They appear when the action is focused. */
links?: NodeComputable<BoardNodeLink[]>;
/** A function that is called when the action is clicked. */
onClick: (node: BoardNode) => void;
}
/**
* The properties that are added onto a processed {@link BoardNodeActionOptions} to create an {@link BoardNodeAction}.
*/
export interface BaseBoardNodeAction {
links?: Ref<BoardNodeLink[]>;
}
/** An object that represents an action that can be taken upon a node. */
export type BoardNodeAction<T extends BoardNodeActionOptions> = Replace<
T & BaseBoardNodeAction,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
icon: GetComputableType<T["icon"]>;
fillColor: GetComputableType<T["fillColor"]>;
tooltip: GetComputableType<T["tooltip"]>;
confirmationLabel: GetComputableTypeWithDefault<T["confirmationLabel"], NodeLabel>;
links: GetComputableType<T["links"]>;
}
>;
/** A type that matches any valid {@link BoardNodeAction} object. */
export type GenericBoardNodeAction = Replace<
BoardNodeAction<BoardNodeActionOptions>,
{
visibility: NodeComputable<Visibility | boolean>;
confirmationLabel: NodeComputable<NodeLabel>;
}
>;
/**
* An object that configures a {@link Board}.
*/
export interface BoardOptions {
/** Whether this board should be visible. */
visibility?: Computable<Visibility | boolean>;
/** The height of the board. Defaults to 100% */
height?: Computable<string>;
/** The width of the board. Defaults to 100% */
width?: Computable<string>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** A function that returns an array of initial board nodes, without IDs. */
startNodes: () => Omit<BoardNode, "id">[];
/** A dictionary of node types that can appear on the board. */
types: Record<string, NodeTypeOptions>;
/** The persistent state of the board. */
state?: Computable<BoardData>;
/** An array of board node links to display. */
links?: Computable<BoardNodeLink[] | null>;
}
/**
* The properties that are added onto a processed {@link BoardOptions} to create a {@link Board}.
*/
export interface BaseBoard {
/** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
/** All the nodes currently on the board. */
nodes: Ref<BoardNode[]>;
/** The currently selected node, if any. */
selectedNode: Ref<BoardNode | null>;
/** The currently selected action, if any. */
selectedAction: Ref<GenericBoardNodeAction | null>;
/** The currently being dragged node, if any. */
draggingNode: Ref<BoardNode | null>;
/** If dragging a node, the node it's currently being hovered over, if any. */
receivingNode: Ref<BoardNode | null>;
/** The current mouse position, if over the board. */
mousePosition: Ref<{ x: number; y: number } | null>;
/** Places a node in the nearest empty space in the given direction with the specified space around it. */
placeInAvailableSpace: (node: BoardNode, radius?: number, direction?: Direction) => void;
/** A symbol that helps identify features of the same type. */
type: typeof BoardType;
/** The Vue component used to render this feature. */
[Component]: GenericComponent;
/** A function to gather the props the vue component requires for this feature. */
[GatherProps]: () => Record<string, unknown>;
}
/** An object that represents a feature that is a zoomable, pannable board with various nodes upon it. */
export type Board<T extends BoardOptions> = Replace<
T & BaseBoard,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
types: Record<string, GenericNodeType>;
height: GetComputableType<T["height"]>;
width: GetComputableType<T["width"]>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
state: GetComputableTypeWithDefault<T["state"], Persistent<BoardData>>;
links: GetComputableTypeWithDefault<T["links"], Ref<BoardNodeLink[] | null>>;
}
>;
/** A type that matches any valid {@link Board} object. */
export type GenericBoard = Replace<
Board<BoardOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
state: ProcessedComputable<BoardData>;
links: ProcessedComputable<BoardNodeLink[] | null>;
}
>;
/**
* Lazily creates a board with the given options.
* @param optionsFunc Board options.
*/
export function createBoard<T extends BoardOptions>(
optionsFunc: OptionsFunc<T, BaseBoard, GenericBoard>
): Board<T> {
const state = persistent<BoardData>(
{
nodes: [],
selectedNode: null,
selectedAction: null
},
false
);
return createLazyProxy(feature => {
const board = optionsFunc.call(feature, feature);
board.id = getUniqueID("board-");
board.type = BoardType;
board[Component] = BoardComponent as GenericComponent;
if (board.state) {
deletePersistent(state);
processComputable(board as T, "state");
} else {
state[DefaultValue] = {
nodes: board.startNodes().map((n, i) => {
(n as BoardNode).id = i;
return n as BoardNode;
}),
selectedNode: null,
selectedAction: null
};
board.state = state;
}
board.nodes = computed(() => unref(processedBoard.state).nodes);
board.selectedNode = computed({
get() {
return (
processedBoard.nodes.value.find(
node => node.id === unref(processedBoard.state).selectedNode
) || null
);
},
set(node) {
if (isRef(processedBoard.state)) {
processedBoard.state.value = {
...processedBoard.state.value,
selectedNode: node?.id ?? null
};
} else {
processedBoard.state.selectedNode = node?.id ?? null;
}
}
});
board.selectedAction = computed({
get() {
const selectedNode = processedBoard.selectedNode.value;
if (selectedNode == null) {
return null;
}
const type = processedBoard.types[selectedNode.type];
if (type.actions == null) {
return null;
}
return (
type.actions.find(
action => action.id === unref(processedBoard.state).selectedAction
) || null
);
},
set(action) {
if (isRef(processedBoard.state)) {
processedBoard.state.value = {
...processedBoard.state.value,
selectedAction: action?.id ?? null
};
} else {
processedBoard.state.selectedAction = action?.id ?? null;
}
}
});
board.mousePosition = ref(null);
if (board.links) {
processComputable(board as T, "links");
} else {
board.links = computed(() => {
if (processedBoard.selectedAction.value == null) {
return null;
}
if (
processedBoard.selectedAction.value.links &&
processedBoard.selectedNode.value
) {
return getNodeProperty(
processedBoard.selectedAction.value.links,
processedBoard.selectedNode.value
);
}
return null;
});
}
board.draggingNode = ref(null);
board.receivingNode = ref(null);
processComputable(board as T, "visibility");
setDefault(board, "visibility", Visibility.Visible);
processComputable(board as T, "width");
setDefault(board, "width", "100%");
processComputable(board as T, "height");
setDefault(board, "height", "100%");
processComputable(board as T, "classes");
processComputable(board as T, "style");
for (const type in board.types) {
const nodeType: NodeTypeOptions & Partial<BaseNodeType> = board.types[type];
processComputable(nodeType as NodeTypeOptions, "title");
processComputable(nodeType as NodeTypeOptions, "label");
processComputable(nodeType as NodeTypeOptions, "size");
setDefault(nodeType, "size", 50);
processComputable(nodeType as NodeTypeOptions, "style");
processComputable(nodeType as NodeTypeOptions, "classes");
processComputable(nodeType as NodeTypeOptions, "draggable");
setDefault(nodeType, "draggable", false);
processComputable(nodeType as NodeTypeOptions, "shape");
setDefault(nodeType, "shape", Shape.Circle);
processComputable(nodeType as NodeTypeOptions, "canAccept");
setDefault(nodeType, "canAccept", false);
processComputable(nodeType as NodeTypeOptions, "progress");
processComputable(nodeType as NodeTypeOptions, "progressDisplay");
setDefault(nodeType, "progressDisplay", ProgressDisplay.Fill);
processComputable(nodeType as NodeTypeOptions, "progressColor");
setDefault(nodeType, "progressColor", "none");
processComputable(nodeType as NodeTypeOptions, "fillColor");
processComputable(nodeType as NodeTypeOptions, "outlineColor");
processComputable(nodeType as NodeTypeOptions, "titleColor");
processComputable(nodeType as NodeTypeOptions, "actionDistance");
setDefault(nodeType, "actionDistance", Math.PI / 6);
nodeType.nodes = computed(() =>
unref(processedBoard.state).nodes.filter(node => node.type === type)
);
setDefault(nodeType, "onClick", function (node: BoardNode) {
unref(processedBoard.state).selectedNode = node.id;
});
if (nodeType.actions) {
for (const action of nodeType.actions) {
processComputable(action, "visibility");
setDefault(action, "visibility", Visibility.Visible);
processComputable(action, "icon");
processComputable(action, "fillColor");
processComputable(action, "tooltip");
processComputable(action, "confirmationLabel");
setDefault(action, "confirmationLabel", { text: "Tap again to confirm" });
processComputable(action, "links");
}
}
}
function setDraggingNode(node: BoardNode | null) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
board.draggingNode!.value = node;
}
function setReceivingNode(node: BoardNode | null) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
board.receivingNode!.value = node;
}
board.placeInAvailableSpace = function (
node: BoardNode,
radius = 100,
direction = Direction.Right
) {
const nodes = processedBoard.nodes.value
.slice()
.filter(n => {
// Exclude self
if (n === node) {
return false;
}
// Exclude nodes that aren't within the corridor we'll be moving within
if (
(direction === Direction.Down || direction === Direction.Up) &&
Math.abs(n.position.x - node.position.x) > radius
) {
return false;
}
if (
(direction === Direction.Left || direction === Direction.Right) &&
Math.abs(n.position.y - node.position.y) > radius
) {
return false;
}
// Exclude nodes in the wrong direction
return !(
(direction === Direction.Right &&
n.position.x < node.position.x - radius) ||
(direction === Direction.Left && n.position.x > node.position.x + radius) ||
(direction === Direction.Up && n.position.y > node.position.y + radius) ||
(direction === Direction.Down && n.position.y < node.position.y - radius)
);
})
.sort(
direction === Direction.Right
? (a, b) => a.position.x - b.position.x
: direction === Direction.Left
? (a, b) => b.position.x - a.position.x
: direction === Direction.Up
? (a, b) => b.position.y - a.position.y
: (a, b) => a.position.y - b.position.y
);
for (let i = 0; i < nodes.length; i++) {
const nodeToCheck = nodes[i];
const distance =
direction === Direction.Right || direction === Direction.Left
? Math.abs(node.position.x - nodeToCheck.position.x)
: Math.abs(node.position.y - nodeToCheck.position.y);
// If we're too close to this node, move further
if (distance < radius) {
if (direction === Direction.Right) {
node.position.x = nodeToCheck.position.x + radius;
} else if (direction === Direction.Left) {
node.position.x = nodeToCheck.position.x - radius;
} else if (direction === Direction.Up) {
node.position.y = nodeToCheck.position.y - radius;
} else if (direction === Direction.Down) {
node.position.y = nodeToCheck.position.y + radius;
}
} else if (i > 0 && distance > radius) {
// If we're further from this node than the radius, then the nodes are past us and we can early exit
break;
}
}
};
board[GatherProps] = function (this: GenericBoard) {
const {
nodes,
types,
state,
visibility,
width,
height,
style,
classes,
links,
selectedAction,
selectedNode,
mousePosition,
draggingNode,
receivingNode
} = this;
return {
nodes,
types,
state,
visibility,
width,
height,
style: unref(style),
classes,
links,
selectedAction,
selectedNode,
mousePosition,
draggingNode,
receivingNode,
setDraggingNode,
setReceivingNode
};
};
// This is necessary because board.types is different from T and Board
const processedBoard = board as unknown as Board<T>;
return processedBoard;
});
}
/**
* Gets the value of a property for a specified node.
* @param property The property to find the value of
* @param node The node to get the property of
*/
export function getNodeProperty<T, S extends unknown[]>(
property: NodeComputable<T, S>,
node: BoardNode,
...args: S
): T {
return isFunction<T, [BoardNode, ...S], Computable<T>>(property)
? property(node, ...args)
: unref(property);
}
/**
* Utility to get an ID for a node that is guaranteed unique.
* @param board The board feature to generate an ID for
*/
export function getUniqueNodeID(board: GenericBoard): number {
let id = 0;
board.nodes.value.forEach(node => {
if (node.id >= id) {
id = node.id + 1;
}
});
return id;
}
const listeners: Record<string, Unsubscribe | undefined> = {};
globalBus.on("addLayer", layer => {
const boards: GenericBoard[] = findFeatures(layer, BoardType) as GenericBoard[];
listeners[layer.id] = layer.on("postUpdate", diff => {
boards.forEach(board => {
Object.values(board.types).forEach(type =>
type.nodes.value.forEach(node => type.update?.(node, diff))
);
});
});
});
globalBus.on("removeLayer", layer => {
// unsubscribe from postUpdate
listeners[layer.id]?.();
listeners[layer.id] = undefined;
});

164
src/features/challenges/Challenge.vue
View file

@ -1,20 +1,11 @@
<template>
<div
v-if="isVisible(visibility)"
:style="[
{
visibility: isHidden(visibility) ? 'hidden' : undefined
},
notifyStyle,
unref(style) ?? {}
]"
:style="notifyStyle"
:class="{
feature: true,
challenge: true,
done: unref(completed),
canStart: unref(canStart) && !unref(maxed),
maxed: unref(maxed),
...unref(classes)
maxed: unref(maxed)
}"
>
<button
@ -24,91 +15,43 @@
>
{{ buttonText }}
</button>
<component v-if="unref(comp)" :is="unref(comp)" />
<MarkNode :mark="unref(mark)" />
<Node :id="id" />
<Component v-if="props.display" />
</div>
</template>
<script lang="tsx">
<script setup lang="tsx">
import "components/common/features.css";
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { GenericChallenge } from "features/challenges/challenge";
import type { StyleValue } from "features/feature";
import { isHidden, isVisible, jsx, Visibility } from "features/feature";
import { getHighNotifyStyle, getNotifyStyle } from "game/notifications";
import { displayRequirements, Requirements } from "game/requirements";
import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
import type { Component, PropType, UnwrapRef } from "vue";
import { computed, defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
import { displayRequirements } from "game/requirements";
import { render } from "util/vue";
import type { Component } from "vue";
import { computed, unref } from "vue";
import { Challenge } from "./challenge";
export default defineComponent({
props: {
active: {
type: processedPropType<boolean>(Boolean),
required: true
},
maxed: {
type: processedPropType<boolean>(Boolean),
required: true
},
canComplete: {
type: processedPropType<boolean>(Boolean),
required: true
},
display: processedPropType<UnwrapRef<GenericChallenge["display"]>>(
String,
Object,
Function
),
requirements: processedPropType<Requirements>(Object, Array),
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object),
completed: {
type: processedPropType<boolean>(Boolean),
required: true
},
canStart: {
type: processedPropType<boolean>(Boolean),
required: true
},
mark: processedPropType<boolean | string>(Boolean, String),
id: {
type: String,
required: true
},
toggle: {
type: Function as PropType<VoidFunction>,
required: true
}
},
components: {
MarkNode,
Node
},
setup(props) {
const { active, maxed, canComplete, display, requirements } = toRefs(props);
const props = defineProps<{
active: Challenge["active"];
maxed: Challenge["maxed"];
canComplete: Challenge["canComplete"];
display: Challenge["display"];
requirements: Challenge["requirements"];
completed: Challenge["completed"];
canStart: Challenge["canStart"];
toggle: Challenge["toggle"];
}>();
const buttonText = computed(() => {
if (active.value) {
return canComplete.value ? "Finish" : "Exit Early";
if (unref(props.active)) {
return unref(props.canComplete) ? "Finish" : "Exit Early";
}
if (maxed.value) {
if (unref(props.maxed)) {
return "Completed";
}
return "Start";
});
const comp = shallowRef<Component | string>("");
const notifyStyle = computed(() => {
const currActive = unwrapRef(active);
const currCanComplete = unwrapRef(canComplete);
const currActive = unref(props.active);
const currCanComplete = unref(props.canComplete);
if (currActive) {
if (currCanComplete) {
return getHighNotifyStyle();
@ -118,61 +61,34 @@ export default defineComponent({
return {};
});
watchEffect(() => {
const currDisplay = unwrapRef(display);
if (currDisplay == null) {
comp.value = "";
return;
const Component = () => {
if (props.display == null) {
return null;
}
if (isCoercableComponent(currDisplay)) {
comp.value = coerceComponent(currDisplay);
return;
}
const Title = coerceComponent(currDisplay.title || "", "h3");
const Description = coerceComponent(currDisplay.description, "div");
const Goal = coerceComponent(currDisplay.goal != null ? currDisplay.goal : jsx(() => displayRequirements(unwrapRef(requirements) ?? [])), "h3");
const Reward = coerceComponent(currDisplay.reward || "");
const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "");
comp.value = coerceComponent(
jsx(() => (
<span>
{currDisplay.title != null ? (
<div>
<Title />
</div>
) : null}
<Description />
if (typeof props.display === "object" && "description" in props.display) {
const { title, description, goal, reward, effectDisplay } = props.display;
return <span>
{title != null ? (<div>{render(title, el => <h3>{el}</h3>)}</div>) : null}
{render(description, el => <div>{el}</div>)}
<div>
<br />
Goal: <Goal />
Goal: {goal == null ? displayRequirements(props.requirements) : render(goal, el => <h3>{el}</h3>)}
</div>
{currDisplay.reward != null ? (
{reward != null ? (
<div>
<br />
Reward: <Reward />
Reward: {render(reward)}
</div>
) : null}
{currDisplay.effectDisplay != null ? (
{effectDisplay != null ? (
<div>
Currently: <EffectDisplay />
Currently: {render(effectDisplay)}
</div>
) : null}
</span>
))
);
});
return {
buttonText,
notifyStyle,
comp,
Visibility,
isVisible,
isHidden,
unref
};
</span>;
}
return render(props.display);
}
});
</script>
<style scoped>

361
src/features/challenges/challenge.tsx
View file

@ -1,24 +1,7 @@
import { isArray } from "@vue/shared";
import Toggle from "components/fields/Toggle.vue";
import ChallengeComponent from "features/challenges/Challenge.vue";
import { GenericDecorator } from "features/decorators/common";
import type {
CoercableComponent,
GenericComponent,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import {
Component,
GatherProps,
Visibility,
getUniqueID,
isVisible,
jsx,
setDefault
} from "features/feature";
import type { GenericReset } from "features/reset";
import type { OptionsFunc, Replace } from "features/feature";
import { isVisible } from "features/feature";
import type { Reset } from "features/reset";
import { globalBus } from "game/events";
import type { Persistent } from "game/persistence";
import { persistent } from "game/persistence";
@ -26,16 +9,12 @@ import { Requirements, maxRequirementsMet } from "game/requirements";
import settings, { registerSettingField } from "game/settings";
import type { DecimalSource } from "util/bignum";
import Decimal from "util/bignum";
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 type { Ref, WatchStopHandle } from "vue";
import { Renderable, VueFeature, VueFeatureOptions, vueFeatureMixin } from "util/vue";
import type { MaybeRef, MaybeRefOrGetter, Ref, WatchStopHandle } from "vue";
import { computed, unref, watch } from "vue";
import Challenge from "./Challenge.vue";
/** A symbol used to identify {@link Challenge} features. */
export const ChallengeType = Symbol("Challenge");
@ -43,39 +22,30 @@ export const ChallengeType = Symbol("Challenge");
/**
* An object that configures a {@link Challenge}.
*/
export interface ChallengeOptions {
/** Whether this challenge should be visible. */
visibility?: Computable<Visibility | boolean>;
export interface ChallengeOptions extends VueFeatureOptions {
/** Whether this challenge can be started. */
canStart?: Computable<boolean>;
canStart?: MaybeRefOrGetter<boolean>;
/** The reset function for this challenge. */
reset?: GenericReset;
reset?: Reset;
/** The requirement(s) to complete this challenge. */
requirements: Requirements;
/** The maximum number of times the challenge can be completed. */
completionLimit?: Computable<DecimalSource>;
/** Shows a marker on the corner of the feature. */
mark?: Computable<boolean | string>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
completionLimit?: MaybeRefOrGetter<DecimalSource>;
/** The display to use for this challenge. */
display?: Computable<
| CoercableComponent
display?:
| MaybeRefOrGetter<Renderable>
| {
/** A header to appear at the top of the display. */
title?: CoercableComponent;
title?: MaybeRefOrGetter<Renderable>;
/** The main text that appears in the display. */
description: CoercableComponent;
description: MaybeRefOrGetter<Renderable>;
/** A description of the current goal for this challenge. If unspecified then the requirements will be displayed automatically based on {@link requirements}. */
goal?: CoercableComponent;
goal?: MaybeRefOrGetter<Renderable>;
/** A description of what will change upon completing this challenge. */
reward?: CoercableComponent;
reward?: MaybeRefOrGetter<Renderable>;
/** A description of the current effect of this challenge. */
effectDisplay?: CoercableComponent;
}
>;
effectDisplay?: MaybeRefOrGetter<Renderable>;
};
/** A function that is called when the challenge is completed. */
onComplete?: VoidFunction;
/** A function that is called when the challenge is exited. */
@ -87,9 +57,7 @@ export interface ChallengeOptions {
/**
* The properties that are added onto a processed {@link ChallengeOptions} to create a {@link Challenge}.
*/
export interface BaseChallenge {
/** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
export interface BaseChallenge extends VueFeature {
/** The current amount of times this challenge can be completed. */
canComplete: Ref<DecimalSource>;
/** The current number of times this challenge has been completed. */
@ -109,35 +77,23 @@ export interface BaseChallenge {
complete: (remainInChallenge?: boolean) => void;
/** A symbol that helps identify features of the same type. */
type: typeof ChallengeType;
/** 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<string, unknown>;
}
/** An object that represents a feature that can be entered and exited, and have one or more completions with scaling requirements. */
export type Challenge<T extends ChallengeOptions> = Replace<
T & BaseChallenge,
export type Challenge = Replace<
Replace<ChallengeOptions, BaseChallenge>,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
canStart: GetComputableTypeWithDefault<T["canStart"], true>;
requirements: GetComputableType<T["requirements"]>;
completionLimit: GetComputableTypeWithDefault<T["completionLimit"], 1>;
mark: GetComputableTypeWithDefault<T["mark"], Ref<boolean>>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
display: GetComputableType<T["display"]>;
}
>;
/** A type that matches any valid {@link Challenge} object. */
export type GenericChallenge = Replace<
Challenge<ChallengeOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
canStart: ProcessedComputable<boolean>;
completionLimit: ProcessedComputable<DecimalSource>;
mark: ProcessedComputable<boolean>;
canStart: MaybeRef<boolean>;
completionLimit: MaybeRef<DecimalSource>;
display?:
| MaybeRef<Renderable>
| {
title?: MaybeRef<Renderable>;
description: MaybeRef<Renderable>;
goal?: MaybeRef<Renderable>;
reward?: MaybeRef<Renderable>;
effectDisplay?: MaybeRef<Renderable>;
};
}
>;
@ -146,166 +102,123 @@ export type GenericChallenge = Replace<
* @param optionsFunc Challenge options.
*/
export function createChallenge<T extends ChallengeOptions>(
optionsFunc: OptionsFunc<T, BaseChallenge, GenericChallenge>,
...decorators: GenericDecorator[]
): Challenge<T> {
const completions = persistent(0);
const active = persistent(false, false);
const decoratedData = decorators.reduce(
(current, next) => Object.assign(current, next.getPersistentData?.()),
{}
);
optionsFunc: OptionsFunc<T, BaseChallenge, Challenge>
) {
const completions = persistent<DecimalSource>(0);
const active = persistent<boolean>(false, false);
return createLazyProxy(feature => {
const challenge = optionsFunc.call(feature, feature);
const options = optionsFunc.call(feature, feature as Challenge);
const {
requirements,
canStart,
completionLimit,
display,
reset,
onComplete,
onEnter,
onExit,
...props
} = options;
challenge.id = getUniqueID("challenge-");
challenge.type = ChallengeType;
challenge[Component] = ChallengeComponent as GenericComponent;
const vueFeature = vueFeatureMixin("challenge", options, () => (
<Challenge
active={challenge.active}
maxed={challenge.maxed}
canComplete={challenge.canComplete}
display={challenge.display}
requirements={challenge.requirements}
completed={challenge.completed}
canStart={challenge.canStart}
toggle={challenge.toggle}
/>
));
for (const decorator of decorators) {
decorator.preConstruct?.(challenge);
const challenge = {
type: ChallengeType,
...(props as Omit<typeof props, keyof VueFeature | keyof ChallengeOptions>),
...vueFeature,
completions,
active,
completed: computed(() => Decimal.gt(completions.value, 0)),
canComplete: computed(() => maxRequirementsMet(requirements)),
maxed: computed((): boolean =>
Decimal.gte(completions.value, unref(challenge.completionLimit))
),
canStart: processGetter(canStart) ?? true,
completionLimit: processGetter(completionLimit) ?? 1,
requirements,
reset,
onComplete,
onEnter,
onExit,
display:
display == null
? undefined
: typeof display === "object" && "description" in display
? {
title: processGetter(display.title),
description: processGetter(display.description),
goal: processGetter(display.goal),
reward: processGetter(display.reward),
effectDisplay: processGetter(display.effectDisplay)
}
challenge.completions = completions;
challenge.active = active;
Object.assign(challenge, decoratedData);
challenge.completed = computed(() =>
Decimal.gt((challenge as GenericChallenge).completions.value, 0)
);
challenge.maxed = computed(() =>
Decimal.gte(
(challenge as GenericChallenge).completions.value,
unref((challenge as GenericChallenge).completionLimit)
)
);
challenge.toggle = function () {
const genericChallenge = challenge as GenericChallenge;
if (genericChallenge.active.value) {
: processGetter(display),
toggle: function () {
if (active.value) {
if (
Decimal.gt(unref(genericChallenge.canComplete), 0) &&
!genericChallenge.maxed.value
Decimal.gt(unref(challenge.canComplete), 0) &&
!unref<boolean>(challenge.maxed)
) {
const completions = unref(genericChallenge.canComplete);
genericChallenge.completions.value = Decimal.min(
Decimal.add(genericChallenge.completions.value, completions),
unref(genericChallenge.completionLimit)
const newCompletions = unref(challenge.canComplete);
completions.value = Decimal.min(
Decimal.add(challenge.completions.value, newCompletions),
unref(challenge.completionLimit)
);
genericChallenge.onComplete?.();
onComplete?.();
}
genericChallenge.active.value = false;
genericChallenge.onExit?.();
genericChallenge.reset?.reset();
active.value = false;
onExit?.();
reset?.reset();
} else if (
unref(genericChallenge.canStart) &&
isVisible(genericChallenge.visibility) &&
!genericChallenge.maxed.value
unref<boolean>(challenge.canStart) &&
isVisible(unref(challenge.visibility) ?? true) &&
!unref<boolean>(challenge.maxed)
) {
genericChallenge.reset?.reset();
genericChallenge.active.value = true;
genericChallenge.onEnter?.();
challenge.reset?.reset();
active.value = true;
onEnter?.();
}
};
challenge.canComplete = computed(() =>
maxRequirementsMet((challenge as GenericChallenge).requirements)
);
challenge.complete = function (remainInChallenge?: boolean) {
const genericChallenge = challenge as GenericChallenge;
const completions = unref(genericChallenge.canComplete);
},
complete: function (remainInChallenge?: boolean) {
const newCompletions = unref(challenge.canComplete);
if (
genericChallenge.active.value &&
Decimal.gt(completions, 0) &&
!genericChallenge.maxed.value
active.value &&
Decimal.gt(newCompletions, 0) &&
!unref<boolean>(challenge.maxed)
) {
genericChallenge.completions.value = Decimal.min(
Decimal.add(genericChallenge.completions.value, completions),
unref(genericChallenge.completionLimit)
completions.value = Decimal.min(
Decimal.add(challenge.completions.value, newCompletions),
unref(challenge.completionLimit)
);
genericChallenge.onComplete?.();
onComplete?.();
if (remainInChallenge !== true) {
genericChallenge.active.value = false;
genericChallenge.onExit?.();
genericChallenge.reset?.reset();
active.value = false;
onExit?.();
reset?.reset();
}
}
};
processComputable(challenge as T, "visibility");
setDefault(challenge, "visibility", Visibility.Visible);
const visibility = challenge.visibility as ProcessedComputable<Visibility | boolean>;
challenge.visibility = computed(() => {
if (settings.hideChallenges === true && unref(challenge.maxed)) {
return Visibility.None;
}
return unref(visibility);
});
if (challenge.mark == null) {
challenge.mark = computed(
() =>
Decimal.gt(unref((challenge as GenericChallenge).completionLimit), 1) &&
!!unref(challenge.maxed)
);
}
processComputable(challenge as T, "canStart");
setDefault(challenge, "canStart", true);
processComputable(challenge as T, "completionLimit");
setDefault(challenge, "completionLimit", 1);
processComputable(challenge as T, "mark");
processComputable(challenge as T, "classes");
processComputable(challenge as T, "style");
processComputable(challenge as T, "display");
} satisfies Challenge;
if (challenge.reset != null) {
globalBus.on("reset", currentReset => {
if (currentReset === challenge.reset && (challenge.active as Ref<boolean>).value) {
(challenge.toggle as VoidFunction)();
if (currentReset === challenge.reset && active.value) {
challenge.toggle();
}
});
}
for (const decorator of decorators) {
decorator.postConstruct?.(challenge);
}
const decoratedProps = decorators.reduce(
(current, next) => Object.assign(current, next.getGatheredProps?.(challenge)),
{}
);
challenge[GatherProps] = function (this: GenericChallenge) {
const {
active,
maxed,
canComplete,
display,
visibility,
style,
classes,
completed,
canStart,
mark,
id,
toggle,
requirements
} = this;
return {
active,
maxed,
canComplete,
display,
visibility,
style: unref(style),
classes,
completed,
canStart,
mark,
id,
toggle,
requirements,
...decoratedProps
};
};
return challenge as unknown as Challenge<T>;
return challenge;
});
}
@ -316,8 +229,8 @@ export function createChallenge<T extends ChallengeOptions>(
* @param exitOnComplete Whether or not to exit the challenge after auto-completion
*/
export function setupAutoComplete(
challenge: GenericChallenge,
autoActive: Computable<boolean> = true,
challenge: Challenge,
autoActive: MaybeRefOrGetter<boolean> = true,
exitOnComplete = true
): WatchStopHandle {
const isActive = typeof autoActive === "function" ? computed(autoActive) : autoActive;
@ -335,9 +248,7 @@ export function setupAutoComplete(
* Utility for taking an array of challenges where only one may be active at a time, and giving a ref to the one currently active (or null if none are active)
* @param challenges The list of challenges that are mutually exclusive
*/
export function createActiveChallenge(
challenges: GenericChallenge[]
): Ref<GenericChallenge | null> {
export function createActiveChallenge(challenges: Challenge[]): Ref<Challenge | null> {
return computed(() => challenges.find(challenge => challenge.active.value) ?? null);
}
@ -346,12 +257,12 @@ export function createActiveChallenge(
* @param challenges List of challenges that are mutually exclusive
*/
export function isAnyChallengeActive(
challenges: GenericChallenge[] | Ref<GenericChallenge | null>
challenges: Challenge[] | Ref<Challenge | null>
): Ref<boolean> {
if (isArray(challenges)) {
if (Array.isArray(challenges)) {
challenges = createActiveChallenge(challenges);
}
return computed(() => (challenges as Ref<GenericChallenge | null>).value != null);
return computed(() => (challenges as Ref<Challenge | null>).value != null);
}
declare module "game/settings" {
@ -361,18 +272,18 @@ declare module "game/settings" {
}
globalBus.on("loadSettings", settings => {
setDefault(settings, "hideChallenges", false);
settings.hideChallenges ??= false;
});
registerSettingField(
jsx(() => (
globalBus.on("setupVue", () =>
registerSettingField(() => (
<Toggle
title={jsx(() => (
title={
<span class="option-title">
Hide maxed challenges
<desc>Hide challenges that have been fully completed.</desc>
</span>
))}
}
onUpdate:modelValue={value => (settings.hideChallenges = value)}
modelValue={settings.hideChallenges}
/>

121
src/features/clickables/Clickable.vue
View file

@ -1,10 +1,5 @@
<template>
<button
v-if="isVisible(visibility)"
:style="[
{ visibility: isHidden(visibility) ? 'hidden' : undefined },
unref(style) ?? []
]"
@click="onClick"
@mousedown="start"
@mouseleave="stop"
@ -13,114 +8,36 @@
@touchend.passive="stop"
@touchcancel.passive="stop"
:class="{
feature: true,
clickable: true,
can: unref(canClick),
locked: !unref(canClick),
small,
...unref(classes)
locked: !unref(canClick)
}"
:disabled="!unref(canClick)"
>
<component v-if="unref(comp)" :is="unref(comp)" />
<MarkNode :mark="unref(mark)" />
<Node :id="id" />
<Component />
</button>
</template>
<script lang="tsx">
<script setup lang="tsx">
import "components/common/features.css";
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { GenericClickable } from "features/clickables/clickable";
import type { StyleValue } from "features/feature";
import { isHidden, isVisible, jsx, Visibility } from "features/feature";
import type { Clickable } from "features/clickables/clickable";
import {
coerceComponent,
isCoercableComponent,
processedPropType,
setupHoldToClick,
unwrapRef
render,
setupHoldToClick
} from "util/vue";
import type { Component, PropType, UnwrapRef } from "vue";
import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
import type { Component } from "vue";
import { toRef, unref } from "vue";
export default defineComponent({
props: {
display: {
type: processedPropType<UnwrapRef<GenericClickable["display"]>>(
Object,
String,
Function
),
required: true
},
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(Object, String, Array),
classes: processedPropType<Record<string, boolean>>(Object),
onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
onHold: Function as PropType<VoidFunction>,
canClick: {
type: processedPropType<boolean>(Boolean),
required: true
},
small: Boolean,
mark: processedPropType<boolean | string>(Boolean, String),
id: {
type: String,
required: true
}
},
components: {
Node,
MarkNode
},
setup(props) {
const { display, onClick, onHold } = toRefs(props);
const props = defineProps<{
canClick: Clickable["canClick"];
onClick: Clickable["onClick"];
onHold?: Clickable["onHold"];
display: Clickable["display"];
}>();
const comp = shallowRef<Component | string>("");
const Component = () => props.display == null ? <></> : render(props.display);
watchEffect(() => {
const currDisplay = unwrapRef(display);
if (currDisplay == null) {
comp.value = "";
return;
}
if (isCoercableComponent(currDisplay)) {
comp.value = coerceComponent(currDisplay);
return;
}
const Title = coerceComponent(currDisplay.title ?? "", "h3");
const Description = coerceComponent(currDisplay.description, "div");
comp.value = coerceComponent(
jsx(() => (
<span>
{currDisplay.title != null ? (
<div>
<Title />
</div>
) : null}
<Description />
</span>
))
);
});
const { start, stop } = setupHoldToClick(onClick, onHold);
return {
start,
stop,
comp,
Visibility,
isVisible,
isHidden,
unref
};
}
});
const { start, stop } = setupHoldToClick(toRef(props, "onClick"), toRef(props, "onHold"));
</script>
<style scoped>
@ -130,10 +47,6 @@ export default defineComponent({
font-size: 10px;
}
.clickable.small {
min-height: unset;
}
.clickable > * {
pointer-events: none;
}

189
src/features/clickables/action.tsx Normal file
View file

@ -0,0 +1,189 @@
import ClickableVue from "features/clickables/Clickable.vue";
import { findFeatures, OptionsFunc, Replace } from "features/feature";
import { globalBus } from "game/events";
import { persistent } from "game/persistence";
import Decimal, { DecimalSource } from "lib/break_eternity";
import { Unsubscribe } from "nanoevents";
import { Direction } from "util/common";
import { ProcessedRefOrGetter, processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { render, VueFeature, vueFeatureMixin } from "util/vue";
import { computed, MaybeRef, MaybeRefOrGetter, Ref, ref, unref } from "vue";
import { JSX } from "vue/jsx-runtime";
import { Bar, BarOptions, createBar } from "../bars/bar";
import { type Clickable, ClickableOptions } from "./clickable";
/** A symbol used to identify {@link Action} features. */
export const ActionType = Symbol("Action");
/**
* An object that configures an {@link Action}.
*/
export interface ActionOptions extends Omit<ClickableOptions, "onClick" | "onHold"> {
/** The cooldown during which the action cannot be performed again, in seconds. */
duration: MaybeRefOrGetter<DecimalSource>;
/** Whether or not the action should perform automatically when the cooldown is finished. */
autoStart?: MaybeRefOrGetter<boolean>;
/** A function that is called when the action is clicked. */
onClick: (amount: DecimalSource) => void;
/** A pass-through to the {@link Bar} used to display the cooldown progress for the action. */
barOptions?: Partial<BarOptions>;
}
/**
* The properties that are added onto a processed {@link ActionOptions} to create an {@link Action}.
*/
export interface BaseAction extends VueFeature {
/** Whether or not the player is holding down the action. Actions will be considered clicked as soon as the cooldown completes when being held down. */
isHolding: Ref<boolean>;
/** The current amount of progress through the cooldown. */
progress: Ref<DecimalSource>;
/** The bar used to display the current cooldown progress. */
progressBar: Bar;
/** Update the cooldown the specified number of seconds */
update: (diff: number) => void;
/** A symbol that helps identify features of the same type. */
type: typeof ActionType;
}
/** An object that represents a feature that can be clicked upon, and then has a cooldown before it can be clicked again. */
export type Action = Replace<
Replace<ActionOptions, BaseAction>,
{
duration: ProcessedRefOrGetter<ActionOptions["duration"]>;
autoStart: MaybeRef<boolean>;
canClick: MaybeRef<boolean>;
display: ProcessedRefOrGetter<ActionOptions["display"]>;
onClick: VoidFunction;
}
>;
/**
* Lazily creates an action with the given options.
* @param optionsFunc Action options.
*/
export function createAction<T extends ActionOptions>(
optionsFunc?: OptionsFunc<T, BaseAction, Action>
) {
const progress = persistent<DecimalSource>(0);
return createLazyProxy(feature => {
const options = optionsFunc?.call(feature, feature as Action) ?? ({} as T);
const { style, duration, canClick, autoStart, display, barOptions, onClick, ...props } =
options;
const processedCanClick = processGetter(canClick) ?? true;
const processedStyle = processGetter(style);
const progressBar = createBar(() => ({
direction: Direction.Right,
width: 100,
height: 10,
borderStyle: { borderColor: "black" },
baseStyle: { marginTop: "-1px" },
progress: (): DecimalSource => Decimal.div(progress.value, unref(action.duration)),
...(barOptions as Omit<typeof barOptions, keyof VueFeature>)
}));
let Component: () => JSX.Element;
if (typeof display === "object" && "description" in display) {
const title = processGetter(display.title);
const description = processGetter(display.description);
const Title = () => (title == null ? <></> : render(title, el => <h3>{el}</h3>));
const Description = () => render(description, el => <div>{el}</div>);
Component = () => {
return (
<span>
{title != null ? (
<div>
<Title />
</div>
) : null}
<Description />
</span>
);
};
} else if (display != null) {
const processedDisplay = processGetter(display);
Component = () => render(processedDisplay);
}
const action = {
type: ActionType,
...(props as Omit<typeof props, keyof VueFeature | keyof ActionOptions>),
...vueFeatureMixin(
"action",
{
...options,
style: () => ({
cursor: Decimal.gte(progress.value, unref(action.duration))
? "pointer"
: "progress",
display: "flex",
flexDirection: "column",
...unref(processedStyle)
})
},
() => (
<ClickableVue
canClick={action.canClick}
onClick={action.onClick}
display={action.display}
/>
)
),
progress,
isHolding: ref(false),
duration: processGetter(duration),
canClick: computed(
(): boolean =>
unref(processedCanClick) && Decimal.gte(progress.value, unref(action.duration))
),
autoStart: processGetter(autoStart) ?? false,
display: computed(() => (
<>
<div style="flex-grow: 1" />
{display == null ? null : <Component />}
<div style="flex-grow: 1" />
{render(progressBar)}
</>
)),
progressBar,
onClick: function () {
if (unref(action.canClick) === false) {
return;
}
const amount = Decimal.div(progress.value, unref(action.duration));
onClick?.call(action, amount);
progress.value = 0;
},
update: function (diff) {
const duration = unref(action.duration);
if (Decimal.gte(progress.value, duration)) {
progress.value = duration;
} else {
progress.value = Decimal.add(progress.value, diff);
if (action.isHolding.value || unref<boolean>(action.autoStart)) {
action.onClick();
}
}
}
} satisfies Action satisfies Replace<Clickable, { type: typeof ActionType }>;
return action;
});
}
const listeners: Record<string, Unsubscribe | undefined> = {};
globalBus.on("addLayer", layer => {
const actions: Action[] = findFeatures(layer, ActionType) as Action[];
listeners[layer.id] = layer.on("postUpdate", (diff: number) => {
actions.forEach(action => action.update(diff));
});
});
globalBus.on("removeLayer", layer => {
// unsubscribe from postUpdate
listeners[layer.id]?.();
listeners[layer.id] = undefined;
});

204
src/features/clickables/clickable.ts
View file

@ -1,204 +0,0 @@
import ClickableComponent from "features/clickables/Clickable.vue";
import { GenericDecorator } from "features/decorators/common";
import type {
CoercableComponent,
GenericComponent,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import { Component, GatherProps, Visibility, getUniqueID, setDefault } from "features/feature";
import type { BaseLayer } from "game/layers";
import type { Unsubscribe } from "nanoevents";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
} from "util/computed";
import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { computed, unref } from "vue";
/** A symbol used to identify {@link Clickable} features. */
export const ClickableType = Symbol("Clickable");
/**
* An object that configures a {@link Clickable}.
*/
export interface ClickableOptions {
/** Whether this clickable should be visible. */
visibility?: Computable<Visibility | boolean>;
/** Whether or not the clickable may be clicked. */
canClick?: Computable<boolean>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** Shows a marker on the corner of the feature. */
mark?: Computable<boolean | string>;
/** 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;
}
>;
/** Toggles a smaller design for the feature. */
small?: boolean;
/** A function that is called when the clickable is clicked. */
onClick?: (e?: MouseEvent | TouchEvent) => void;
/** A function that is called when the clickable is held down. */
onHold?: VoidFunction;
}
/**
* The properties that are added onto a processed {@link ClickableOptions} to create an {@link Clickable}.
*/
export interface BaseClickable {
/** 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 ClickableType;
/** 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<string, unknown>;
}
/** An object that represents a feature that can be clicked or held down. */
export type Clickable<T extends ClickableOptions> = Replace<
T & BaseClickable,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
canClick: GetComputableTypeWithDefault<T["canClick"], true>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
mark: GetComputableType<T["mark"]>;
display: GetComputableType<T["display"]>;
}
>;
/** A type that matches any valid {@link Clickable} object. */
export type GenericClickable = Replace<
Clickable<ClickableOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
canClick: ProcessedComputable<boolean>;
}
>;
/**
* Lazily creates a clickable with the given options.
* @param optionsFunc Clickable options.
*/
export function createClickable<T extends ClickableOptions>(
optionsFunc?: OptionsFunc<T, BaseClickable, GenericClickable>,
...decorators: GenericDecorator[]
): Clickable<T> {
const decoratedData = decorators.reduce(
(current, next) => Object.assign(current, next.getPersistentData?.()),
{}
);
return createLazyProxy(feature => {
const clickable =
optionsFunc?.call(feature, feature) ??
({} as ReturnType<NonNullable<typeof optionsFunc>>);
clickable.id = getUniqueID("clickable-");
clickable.type = ClickableType;
clickable[Component] = ClickableComponent as GenericComponent;
for (const decorator of decorators) {
decorator.preConstruct?.(clickable);
}
Object.assign(clickable, decoratedData);
processComputable(clickable as T, "visibility");
setDefault(clickable, "visibility", Visibility.Visible);
processComputable(clickable as T, "canClick");
setDefault(clickable, "canClick", true);
processComputable(clickable as T, "classes");
processComputable(clickable as T, "style");
processComputable(clickable as T, "mark");
processComputable(clickable as T, "display");
if (clickable.onClick) {
const onClick = clickable.onClick.bind(clickable);
clickable.onClick = function (e) {
if (unref(clickable.canClick) !== false) {
onClick(e);
}
};
}
if (clickable.onHold) {
const onHold = clickable.onHold.bind(clickable);
clickable.onHold = function () {
if (unref(clickable.canClick) !== false) {
onHold();
}
};
}
for (const decorator of decorators) {
decorator.postConstruct?.(clickable);
}
const decoratedProps = decorators.reduce(
(current, next) => Object.assign(current, next.getGatheredProps?.(clickable)),
{}
);
clickable[GatherProps] = function (this: GenericClickable) {
const {
display,
visibility,
style,
classes,
onClick,
onHold,
canClick,
small,
mark,
id
} = this;
return {
display,
visibility,
style: unref(style),
classes,
onClick,
onHold,
canClick,
small,
mark,
id,
...decoratedProps
};
};
return clickable as unknown as Clickable<T>;
});
}
/**
* Utility to auto click a clickable whenever it can be.
* @param layer The layer the clickable is apart of
* @param clickable The clicker to click automatically
* @param autoActive Whether or not the clickable should currently be auto-clicking
*/
export function setupAutoClick(
layer: BaseLayer,
clickable: GenericClickable,
autoActive: Computable<boolean> = true
): Unsubscribe {
const isActive: ProcessedComputable<boolean> =
typeof autoActive === "function" ? computed(autoActive) : autoActive;
return layer.on("update", () => {
if (unref(isActive) && unref(clickable.canClick)) {
clickable.onClick?.();
}
});
}

136
src/features/clickables/clickable.tsx Normal file
View file

@ -0,0 +1,136 @@
import Clickable from "features/clickables/Clickable.vue";
import type { OptionsFunc, Replace } from "features/feature";
import type { BaseLayer } from "game/layers";
import type { Unsubscribe } from "nanoevents";
import { processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { render, Renderable, VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
import { computed, MaybeRef, MaybeRefOrGetter, unref } from "vue";
/** A symbol used to identify {@link Clickable} features. */
export const ClickableType = Symbol("Clickable");
/**
* An object that configures a {@link Clickable}.
*/
export interface ClickableOptions extends VueFeatureOptions {
/** Whether or not the clickable may be clicked. */
canClick?: MaybeRefOrGetter<boolean>;
/** The display to use for this clickable. */
display?:
| MaybeRefOrGetter<Renderable>
| {
/** A header to appear at the top of the display. */
title?: MaybeRefOrGetter<Renderable>;
/** The main text that appears in the display. */
description: MaybeRefOrGetter<Renderable>;
};
/** A function that is called when the clickable is clicked. */
onClick?: (e?: MouseEvent | TouchEvent) => void;
/** A function that is called when the clickable is held down. */
onHold?: VoidFunction;
}
/**
* The properties that are added onto a processed {@link ClickableOptions} to create an {@link Clickable}.
*/
export interface BaseClickable extends VueFeature {
/** A symbol that helps identify features of the same type. */
type: typeof ClickableType;
}
/** An object that represents a feature that can be clicked or held down. */
export type Clickable = Replace<
Replace<ClickableOptions, BaseClickable>,
{
canClick: MaybeRef<boolean>;
display?: MaybeRef<Renderable>;
}
>;
/**
* Lazily creates a clickable with the given options.
* @param optionsFunc Clickable options.
*/
export function createClickable<T extends ClickableOptions>(
optionsFunc?: OptionsFunc<T, BaseClickable, Clickable>
) {
return createLazyProxy(feature => {
const options = optionsFunc?.call(feature, feature as Clickable) ?? ({} as T);
const { canClick, display: _display, onClick: onClick, onHold: onHold, ...props } = options;
let display: MaybeRef<Renderable> | undefined = undefined;
if (typeof _display === "object" && "description" in _display) {
const title = processGetter(_display.title);
const description = processGetter(_display.description);
const Title = () => (title == null ? <></> : render(title, el => <h3>{el}</h3>));
const Description = () => render(description, el => <div>{el}</div>);
display = computed(() => (
<span>
{title != null ? (
<div>
<Title />
</div>
) : null}
<Description />
</span>
));
} else if (_display != null) {
display = processGetter(_display);
}
const clickable = {
type: ClickableType,
...(props as Omit<typeof props, keyof VueFeature | keyof ClickableOptions>),
...vueFeatureMixin("clickable", options, () => (
<Clickable
canClick={clickable.canClick}
onClick={clickable.onClick}
display={clickable.display}
/>
)),
canClick: processGetter(canClick) ?? true,
display,
onClick:
onClick == null
? undefined
: function (e) {
if (unref(clickable.canClick) !== false) {
onClick.call(clickable, e);
}
},
onHold:
onHold == null
? undefined
: function () {
if (unref(clickable.canClick) !== false) {
onHold.call(clickable);
}
}
} satisfies Clickable & { onClick: T["onClick"] };
return clickable;
});
}
/**
* Utility to auto click a clickable whenever it can be.
* @param layer The layer the clickable is apart of
* @param clickable The clicker to click automatically
* @param autoActive Whether or not the clickable should currently be auto-clicking
*/
export function setupAutoClick(
layer: BaseLayer,
clickable: Clickable,
autoActive: MaybeRefOrGetter<boolean> = true
): Unsubscribe {
const isActive: MaybeRef<boolean> =
typeof autoActive === "function" ? computed(autoActive) : autoActive;
return layer.on("update", () => {
if (unref(isActive) && unref<boolean>(clickable.canClick)) {
clickable.onClick?.();
}
});
}

209
src/features/clickables/repeatable.tsx Normal file
View file

@ -0,0 +1,209 @@
import Clickable from "features/clickables/Clickable.vue";
import type { OptionsFunc, Replace } from "features/feature";
import { Visibility } from "features/feature";
import { DefaultValue, Persistent, persistent } from "game/persistence";
import {
createVisibilityRequirement,
displayRequirements,
maxRequirementsMet,
payRequirements,
Requirements,
requirementsMet
} from "game/requirements";
import type { DecimalSource } from "util/bignum";
import Decimal, { formatWhole } from "util/bignum";
import { processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { isJSXElement, render, Renderable, VueFeature, vueFeatureMixin } from "util/vue";
import type { MaybeRef, MaybeRefOrGetter, Ref } from "vue";
import { computed, isRef, unref } from "vue";
import { ClickableOptions } from "./clickable";
/** A symbol used to identify {@link Repeatable} features. */
export const RepeatableType = Symbol("Repeatable");
/** An object that configures a {@link Repeatable}. */
export interface RepeatableOptions extends Omit<ClickableOptions, "display" | "canClick"> {
/** The requirement(s) to increase this repeatable. */
requirements: Requirements;
/** The maximum amount obtainable for this repeatable. */
limit?: MaybeRefOrGetter<DecimalSource>;
/** The initial amount this repeatable has on a new save / after reset. */
initialAmount?: DecimalSource;
/** The display to use for this repeatable. */
display?:
| MaybeRefOrGetter<Renderable>
| {
/** A header to appear at the top of the display. */
title?: MaybeRefOrGetter<Renderable>;
/** The main text that appears in the display. */
description?: MaybeRefOrGetter<Renderable>;
/** A description of the current effect of this repeatable, based off its amount. */
effectDisplay?: MaybeRefOrGetter<Renderable>;
/** Whether or not to show the current amount of this repeatable at the bottom of the display. */
showAmount?: boolean;
};
}
/**
* The properties that are added onto a processed {@link RepeatableOptions} to create a {@link Repeatable}.
*/
export interface BaseRepeatable extends VueFeature {
/** The current amount this repeatable has. */
amount: Persistent<DecimalSource>;
/** Whether or not this repeatable's amount is at it's limit. */
maxed: Ref<boolean>;
/** How much amount can be increased by, or 1 if unclickable. **/
amountToIncrease: Ref<DecimalSource>;
/** A symbol that helps identify features of the same type. */
type: typeof RepeatableType;
}
/** An object that represents a feature with multiple "levels" with scaling requirements. */
export type Repeatable = Replace<
Replace<RepeatableOptions, BaseRepeatable>,
{
limit: MaybeRef<DecimalSource>;
display?: MaybeRef<Renderable>;
canClick: Ref<boolean>;
onClick: (event?: MouseEvent | TouchEvent) => void;
}
>;
/**
* Lazily creates a repeatable with the given options.
* @param optionsFunc Repeatable options.
*/
export function createRepeatable<T extends RepeatableOptions>(
optionsFunc: OptionsFunc<T, BaseRepeatable, Repeatable>
) {
const amount = persistent<DecimalSource>(0);
return createLazyProxy(feature => {
const options = optionsFunc.call(feature, feature as Repeatable);
const {
requirements: _requirements,
display: _display,
limit,
onClick,
initialAmount,
...props
} = options;
if (options.classes == null) {
options.classes = computed(() => ({ bought: unref(repeatable.maxed) }));
} else {
const classes = processGetter(options.classes);
options.classes = computed(() => ({
...unref(classes),
bought: unref(repeatable.maxed)
}));
}
const vueFeature = vueFeatureMixin("repeatable", options, () => (
<Clickable
canClick={repeatable.canClick}
onClick={repeatable.onClick}
display={repeatable.display}
/>
));
const limitRequirement = {
requirementMet: computed(
(): DecimalSource => Decimal.sub(unref(repeatable.limit), unref(amount))
),
requiresPay: false,
visibility: Visibility.None,
canMaximize: true
} as const;
const requirements: Requirements = [
...(Array.isArray(_requirements) ? _requirements : [_requirements]),
limitRequirement
];
if (vueFeature.visibility != null) {
requirements.push(createVisibilityRequirement(vueFeature.visibility));
}
let display;
if (typeof _display === "object" && !isRef(_display) && !isJSXElement(_display)) {
const title = processGetter(_display.title);
const description = processGetter(_display.description);
const effectDisplay = processGetter(_display.effectDisplay);
const showAmount = processGetter(_display.showAmount);
const Title = title == null ? null : () => render(title, el => <h3>{el}</h3>);
const Description =
description == null ? null : () => render(description, el => <>{el}</>);
const EffectDisplay =
effectDisplay == null ? null : () => render(effectDisplay, el => <>{el}</>);
display = computed(() => (
<span>
{Title == null ? null : (
<div>
<Title />
</div>
)}
{Description == null ? null : <Description />}
{showAmount === false ? null : (
<div>
<br />
<>Amount: {formatWhole(unref(amount))}</>
{Decimal.isFinite(unref(repeatable.limit)) ? (
<> / {formatWhole(unref(repeatable.limit))}</>
) : undefined}
</div>
)}
{EffectDisplay == null ? null : (
<div>
<br />
Currently: <EffectDisplay />
</div>
)}
{unref(repeatable.maxed) ? null : (
<div>
<br />
{displayRequirements(requirements, unref(repeatable.amountToIncrease))}
</div>
)}
</span>
));
} else if (_display != null) {
const processedDisplay = processGetter(_display);
display = computed(() => render(processedDisplay));
} else {
display = undefined;
}
amount[DefaultValue] = initialAmount ?? 0;
const repeatable = {
type: RepeatableType,
...(props as Omit<typeof props, keyof VueFeature | keyof RepeatableOptions>),
...vueFeature,
amount,
requirements,
limit: processGetter(limit) ?? Decimal.dInf,
classes: computed(() => {
const currClasses = unref(vueFeature.classes) || {};
if (unref(repeatable.maxed)) {
currClasses.bought = true;
}
return currClasses;
}),
maxed: computed((): boolean => Decimal.gte(unref(amount), unref(repeatable.limit))),
canClick: computed(() => requirementsMet(requirements)),
amountToIncrease: computed(() => Decimal.clampMin(maxRequirementsMet(requirements), 1)),
onClick(event?: MouseEvent | TouchEvent) {
if (!unref(repeatable.canClick)) {
return;
}
const purchaseAmount = unref(repeatable.amountToIncrease) ?? 1;
payRequirements(requirements, purchaseAmount);
amount.value = Decimal.add(unref(amount), purchaseAmount);
onClick?.(event);
},
display
} satisfies Repeatable;
return repeatable;
});
}

187
src/features/clickables/upgrade.tsx Normal file
View file

@ -0,0 +1,187 @@
import type { OptionsFunc, Replace } from "features/feature";
import { findFeatures } from "features/feature";
import { Layer } from "game/layers";
import type { Persistent } from "game/persistence";
import { persistent } from "game/persistence";
import {
Requirements,
createVisibilityRequirement,
displayRequirements,
payRequirements,
requirementsMet
} from "game/requirements";
import { isFunction } from "util/common";
import { processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { Renderable, VueFeature, VueFeatureOptions, render, vueFeatureMixin } from "util/vue";
import type { MaybeRef, MaybeRefOrGetter, Ref } from "vue";
import { computed, unref } from "vue";
import Clickable from "./Clickable.vue";
/** A symbol used to identify {@link Upgrade} features. */
export const UpgradeType = Symbol("Upgrade");
/**
* An object that configures a {@link Upgrade}.
*/
export interface UpgradeOptions extends VueFeatureOptions {
/** The display to use for this upgrade. */
display?:
| MaybeRefOrGetter<Renderable>
| {
/** A header to appear at the top of the display. */
title?: MaybeRefOrGetter<Renderable>;
/** The main text that appears in the display. */
description: MaybeRefOrGetter<Renderable>;
/** A description of the current effect of the achievement. Useful when the effect changes dynamically. */
effectDisplay?: MaybeRefOrGetter<Renderable>;
};
/** 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 extends VueFeature {
/** Whether or not this upgrade has been purchased. */
bought: Persistent<boolean>;
/** Whether or not the upgrade can currently be purchased. */
canPurchase: Ref<boolean>;
/** Purchase the upgrade */
purchase: VoidFunction;
/** A symbol that helps identify features of the same type. */
type: typeof UpgradeType;
}
/** An object that represents a feature that can be purchased a single time. */
export type Upgrade = Replace<
Replace<UpgradeOptions, BaseUpgrade>,
{
display?:
| MaybeRef<Renderable>
| {
/** A header to appear at the top of the display. */
title?: MaybeRef<Renderable>;
/** The main text that appears in the display. */
description: MaybeRef<Renderable>;
/** A description of the current effect of the achievement. Useful when the effect changes dynamically. */
effectDisplay?: MaybeRef<Renderable>;
};
}
>;
/**
* Lazily creates an upgrade with the given options.
* @param optionsFunc Upgrade options.
*/
export function createUpgrade<T extends UpgradeOptions>(
optionsFunc: OptionsFunc<T, BaseUpgrade, Upgrade>
) {
const bought = persistent<boolean>(false, false);
return createLazyProxy(feature => {
const options = optionsFunc.call(feature, feature as Upgrade);
const { requirements: _requirements, display: _display, ...props } = options;
if (options.classes == null) {
options.classes = computed(() => ({ bought: unref(upgrade.bought) }));
} else {
const classes = processGetter(options.classes);
options.classes = computed(() => ({
...unref(classes),
bought: unref(upgrade.bought)
}));
}
const vueFeature = vueFeatureMixin("upgrade", options, () => (
<Clickable
onClick={upgrade.purchase}
canClick={upgrade.canPurchase}
display={upgrade.display}
/>
));
const requirements = Array.isArray(_requirements) ? _requirements : [_requirements];
if (vueFeature.visibility != null) {
requirements.push(createVisibilityRequirement(vueFeature.visibility));
}
let display: MaybeRef<Renderable> | undefined = undefined;
if (typeof _display === "object" && "description" in _display) {
const title = processGetter(_display.title);
const description = processGetter(_display.description);
const effectDisplay = processGetter(_display.effectDisplay);
const Title = () => (title == null ? <></> : render(title, el => <h3>{el}</h3>));
const Description = () => render(description, el => <div>{el}</div>);
const EffectDisplay = () =>
effectDisplay == null ? <></> : render(effectDisplay, el => <>{el}</>);
display = computed(() => (
<span>
{title != null ? (
<div>
<Title />
</div>
) : null}
<Description />
{effectDisplay != null ? (
<div>
Currently: <EffectDisplay />
</div>
) : null}
{bought.value ? null : (
<>
<br />
{displayRequirements(requirements)}
</>
)}
</span>
));
} else if (_display != null) {
display = processGetter(_display);
}
const upgrade = {
type: UpgradeType,
...(props as Omit<typeof props, keyof VueFeature | keyof UpgradeOptions>),
...vueFeature,
bought,
canPurchase: computed(() => !bought.value && requirementsMet(requirements)),
requirements,
display,
purchase() {
if (!unref(upgrade.canPurchase)) {
return;
}
payRequirements(requirements);
bought.value = true;
options.onPurchase?.();
}
} satisfies Upgrade;
return 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: Layer,
autoActive: MaybeRefOrGetter<boolean>,
upgrades: Upgrade[] = []
): void {
upgrades = upgrades.length === 0 ? (findFeatures(layer, UpgradeType) as Upgrade[]) : upgrades;
const isAutoActive: MaybeRef<boolean> = isFunction(autoActive)
? computed(autoActive)
: autoActive;
layer.on("update", () => {
if (unref(isAutoActive)) {
upgrades.forEach(upgrade => upgrade.purchase());
}
});
}

253
src/features/conversion.ts
View file

@ -1,18 +1,18 @@
import type { CoercableComponent, OptionsFunc, Replace } from "features/feature";
import { setDefault } from "features/feature";
import type { OptionsFunc, Replace } from "features/feature";
import type { Resource } from "features/resources/resource";
import Formula from "game/formulas/formulas";
import { InvertibleFormula, InvertibleIntegralFormula } from "game/formulas/types";
import type { BaseLayer } from "game/layers";
import { createBooleanRequirement } from "game/requirements";
import type { DecimalSource } from "util/bignum";
import Decimal from "util/bignum";
import type { Computable, GetComputableTypeWithDefault, ProcessedComputable } from "util/computed";
import { convertComputable, processComputable } from "util/computed";
import { processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import type { Ref } from "vue";
import { computed, unref } from "vue";
import { GenericDecorator } from "./decorators/common";
import { createBooleanRequirement } from "game/requirements";
import { Renderable } from "util/vue";
import { computed, MaybeRef, MaybeRefOrGetter, unref } from "vue";
/** A symbol used to identify {@link Conversion} features. */
export const ConversionType = Symbol("Conversion");
/** An object that configures a {@link Conversion}. */
export interface ConversionOptions {
@ -25,24 +25,24 @@ export interface ConversionOptions {
* How much of the output resource the conversion can currently convert for.
* Typically this will be set for you in a conversion constructor.
*/
currentGain?: Computable<DecimalSource>;
currentGain?: MaybeRefOrGetter<DecimalSource>;
/**
* The absolute amount the output resource will be changed by.
* Typically this will be set for you in a conversion constructor.
* This will differ from {@link currentGain} in the cases where the conversion isn't just adding the converted amount to the output resource.
*/
actualGain?: Computable<DecimalSource>;
actualGain?: MaybeRefOrGetter<DecimalSource>;
/**
* The amount of the input resource currently being required in order to produce the {@link currentGain}.
* That is, if it went below this value then {@link currentGain} would decrease.
* Typically this will be set for you in a conversion constructor.
*/
currentAt?: Computable<DecimalSource>;
currentAt?: MaybeRefOrGetter<DecimalSource>;
/**
* The amount of the input resource required to make {@link currentGain} increase.
* Typically this will be set for you in a conversion constructor.
*/
nextAt?: Computable<DecimalSource>;
nextAt?: MaybeRefOrGetter<DecimalSource>;
/**
* The input {@link features/resources/resource.Resource} for this conversion.
*/
@ -55,7 +55,7 @@ export interface ConversionOptions {
* Whether or not to cap the amount of the output resource gained by converting at 1.
* Defaults to true.
*/
buyMax?: Computable<boolean>;
buyMax?: MaybeRefOrGetter<boolean>;
/**
* The function that performs the actual conversion from {@link baseResource} to {@link gainResource}.
* Typically this will be set for you in a conversion constructor.
@ -85,28 +85,15 @@ export interface BaseConversion {
}
/** An object that converts one {@link features/resources/resource.Resource} into another at a given rate. */
export type Conversion<T extends ConversionOptions> = Replace<
T & BaseConversion,
export type Conversion = Replace<
Replace<ConversionOptions, BaseConversion>,
{
formula: InvertibleFormula;
currentGain: GetComputableTypeWithDefault<T["currentGain"], Ref<DecimalSource>>;
actualGain: GetComputableTypeWithDefault<T["actualGain"], Ref<DecimalSource>>;
currentAt: GetComputableTypeWithDefault<T["currentAt"], Ref<DecimalSource>>;
nextAt: GetComputableTypeWithDefault<T["nextAt"], Ref<DecimalSource>>;
buyMax: GetComputableTypeWithDefault<T["buyMax"], true>;
spend: undefined extends T["spend"] ? (amountGained: DecimalSource) => void : T["spend"];
}
>;
/** A type that matches any valid {@link Conversion} object. */
export type GenericConversion = Replace<
Conversion<ConversionOptions>,
{
currentGain: ProcessedComputable<DecimalSource>;
actualGain: ProcessedComputable<DecimalSource>;
currentAt: ProcessedComputable<DecimalSource>;
nextAt: ProcessedComputable<DecimalSource>;
buyMax: ProcessedComputable<boolean>;
currentGain: MaybeRef<DecimalSource>;
actualGain: MaybeRef<DecimalSource>;
currentAt: MaybeRef<DecimalSource>;
nextAt: MaybeRef<DecimalSource>;
buyMax: MaybeRef<boolean>;
spend: (amountGained: DecimalSource) => void;
}
>;
@ -119,80 +106,78 @@ export type GenericConversion = Replace<
* @see {@link createIndependentConversion}.
*/
export function createConversion<T extends ConversionOptions>(
optionsFunc: OptionsFunc<T, BaseConversion, GenericConversion>,
...decorators: GenericDecorator[]
): Conversion<T> {
optionsFunc: OptionsFunc<T, BaseConversion, Conversion>
) {
return createLazyProxy(feature => {
const conversion = optionsFunc.call(feature, feature);
const options = optionsFunc.call(feature, feature as Conversion);
const {
baseResource,
gainResource,
formula,
currentGain: _currentGain,
actualGain,
currentAt,
nextAt,
convert,
spend,
buyMax,
onConvert,
...props
} = options;
for (const decorator of decorators) {
decorator.preConstruct?.(conversion);
}
(conversion as GenericConversion).formula = conversion.formula(
Formula.variable(conversion.baseResource)
const currentGain =
_currentGain == null
? computed((): Decimal => {
let gain = Decimal.floor(conversion.formula.evaluate(baseResource.value)).max(
0
);
if (conversion.currentGain == null) {
conversion.currentGain = computed(() => {
let gain = Decimal.floor(
(conversion as GenericConversion).formula.evaluate(
conversion.baseResource.value
)
).max(0);
if (unref(conversion.buyMax) === false) {
gain = gain.min(1);
}
return gain;
});
}
if (conversion.actualGain == null) {
conversion.actualGain = conversion.currentGain;
}
if (conversion.currentAt == null) {
conversion.currentAt = computed(() => {
return (conversion as GenericConversion).formula.invert(
Decimal.floor(unref((conversion as GenericConversion).currentGain))
);
});
}
if (conversion.nextAt == null) {
conversion.nextAt = computed(() => {
return (conversion as GenericConversion).formula.invert(
Decimal.floor(unref((conversion as GenericConversion).currentGain)).add(1)
);
});
}
})
: processGetter(_currentGain);
if (conversion.convert == null) {
conversion.convert = function () {
const amountGained = unref((conversion as GenericConversion).currentGain);
conversion.gainResource.value = Decimal.add(
conversion.gainResource.value,
amountGained
);
(conversion as GenericConversion).spend(amountGained);
conversion.onConvert?.(amountGained);
};
}
const conversion = {
type: ConversionType,
...(props as Omit<typeof props, keyof ConversionOptions>),
baseResource,
gainResource,
formula: formula(Formula.variable(baseResource)),
currentGain,
actualGain: actualGain == null ? currentGain : processGetter(actualGain),
currentAt:
currentAt == null
? computed(
(): DecimalSource =>
conversion.formula.invert(
Decimal.floor(unref(conversion.currentGain))
)
)
: processGetter(currentAt),
nextAt:
nextAt == null
? computed(
(): DecimalSource =>
conversion.formula.invert(
Decimal.floor(unref(conversion.currentGain)).add(1)
)
)
: processGetter(nextAt),
convert:
convert ??
function () {
const amountGained = unref(conversion.currentGain);
gainResource.value = Decimal.add(gainResource.value, amountGained);
conversion.spend(amountGained);
onConvert?.(amountGained);
},
spend: spend ?? (() => (baseResource.value = 0)),
buyMax: processGetter(buyMax) ?? true,
onConvert
} satisfies Conversion;
if (conversion.spend == null) {
conversion.spend = function () {
conversion.baseResource.value = 0;
};
}
processComputable(conversion as T, "currentGain");
processComputable(conversion as T, "actualGain");
processComputable(conversion as T, "currentAt");
processComputable(conversion as T, "nextAt");
processComputable(conversion as T, "buyMax");
setDefault(conversion, "buyMax", true);
for (const decorator of decorators) {
decorator.postConstruct?.(conversion);
}
return conversion as unknown as Conversion<T>;
return conversion;
});
}
@ -203,8 +188,8 @@ export function createConversion<T extends ConversionOptions>(
* @param optionsFunc Conversion options.
*/
export function createCumulativeConversion<S extends ConversionOptions>(
optionsFunc: OptionsFunc<S, BaseConversion, GenericConversion>
): Conversion<S> {
optionsFunc: OptionsFunc<S, BaseConversion, Conversion>
) {
return createConversion(optionsFunc);
}
@ -214,54 +199,46 @@ export function createCumulativeConversion<S extends ConversionOptions>(
* @param optionsFunc Converison options.
*/
export function createIndependentConversion<S extends ConversionOptions>(
optionsFunc: OptionsFunc<S, BaseConversion, GenericConversion>
): Conversion<S> {
optionsFunc: OptionsFunc<S, BaseConversion, Conversion>
) {
return createConversion(feature => {
const conversion: S = optionsFunc.call(feature, feature);
const conversion = optionsFunc.call(feature, feature);
setDefault(conversion, "buyMax", false);
conversion.buyMax ??= false;
if (conversion.currentGain == null) {
conversion.currentGain = computed(() => {
let gain = Decimal.floor(
(conversion as unknown as GenericConversion).formula.evaluate(
conversion.baseResource.value
)
).max(conversion.gainResource.value);
if (unref(conversion.buyMax) === false) {
conversion.currentGain ??= computed(() => {
let gain = Decimal.floor(feature.formula.evaluate(conversion.baseResource.value)).max(
conversion.gainResource.value
);
if (unref(conversion.buyMax as MaybeRef<boolean>) === false) {
gain = gain.min(Decimal.add(conversion.gainResource.value, 1));
}
return gain;
});
}
if (conversion.actualGain == null) {
conversion.actualGain = computed(() => {
conversion.actualGain ??= computed(() => {
let gain = Decimal.sub(
(conversion as unknown as GenericConversion).formula.evaluate(
conversion.baseResource.value
),
feature.formula.evaluate(conversion.baseResource.value),
conversion.gainResource.value
)
.floor()
.max(0);
if (unref(conversion.buyMax) === false) {
if (unref(conversion.buyMax as MaybeRef<boolean>) === false) {
gain = gain.min(1);
}
return gain;
});
}
setDefault(conversion, "convert", function () {
const amountGained = unref((conversion as unknown as GenericConversion).actualGain);
conversion.gainResource.value = unref(
(conversion as unknown as GenericConversion).currentGain
);
(conversion as unknown as GenericConversion).spend(amountGained);
conversion.onConvert?.(amountGained);
});
conversion.convert ??= function () {
const amountGained = unref(feature.actualGain);
conversion.gainResource.value = unref(feature.currentGain);
feature.spend(amountGained);
feature.onConvert?.(amountGained);
};
return conversion;
}) as Conversion<S>;
});
}
/**
@ -275,12 +252,12 @@ export function createIndependentConversion<S extends ConversionOptions>(
*/
export function setupPassiveGeneration(
layer: BaseLayer,
conversion: GenericConversion,
rate: Computable<DecimalSource> = 1,
cap: Computable<DecimalSource> = Decimal.dInf
conversion: Conversion,
rate: MaybeRefOrGetter<DecimalSource> = 1,
cap: MaybeRefOrGetter<DecimalSource> = Decimal.dInf
): void {
const processedRate = convertComputable(rate);
const processedCap = convertComputable(cap);
const processedRate = processGetter(rate);
const processedCap = processGetter(cap);
layer.on("preUpdate", diff => {
const currRate = unref(processedRate);
if (Decimal.neq(currRate, 0)) {
@ -300,11 +277,11 @@ export function setupPassiveGeneration(
* @param minGainAmount The minimum gain amount that must be met for the requirement to be met
*/
export function createCanConvertRequirement(
conversion: GenericConversion,
minGainAmount: Computable<DecimalSource> = 1,
display?: CoercableComponent
conversion: Conversion,
minGainAmount: MaybeRefOrGetter<DecimalSource> = 1,
display?: MaybeRefOrGetter<Renderable>
) {
const computedMinGainAmount = convertComputable(minGainAmount);
const computedMinGainAmount = processGetter(minGainAmount);
return createBooleanRequirement(
() => Decimal.gte(unref(conversion.actualGain), unref(computedMinGainAmount)),
display

117
src/features/decorators/bonusDecorator.ts
View file

@ -1,117 +0,0 @@
import { Replace } from "features/feature";
import Decimal, { DecimalSource } from "util/bignum";
import {
Computable,
GetComputableType,
ProcessedComputable,
processComputable
} from "util/computed";
import { Ref, computed, unref } from "vue";
import { Decorator } from "./common";
export interface BonusAmountFeatureOptions {
bonusAmount: Computable<DecimalSource>;
totalAmount?: Computable<DecimalSource>;
}
export interface BonusCompletionsFeatureOptions {
bonusCompletions: Computable<DecimalSource>;
totalCompletions?: Computable<DecimalSource>;
}
export interface BaseBonusAmountFeature {
amount: Ref<DecimalSource>;
bonusAmount: ProcessedComputable<DecimalSource>;
totalAmount?: Ref<DecimalSource>;
}
export interface BaseBonusCompletionsFeature {
completions: Ref<DecimalSource>;
bonusCompletions: ProcessedComputable<DecimalSource>;
totalCompletions?: Ref<DecimalSource>;
}
export type BonusAmountFeature<T extends BonusAmountFeatureOptions> = Replace<
T,
{ bonusAmount: GetComputableType<T["bonusAmount"]> }
>;
export type BonusCompletionsFeature<T extends BonusCompletionsFeatureOptions> = Replace<
T,
{ bonusAmount: GetComputableType<T["bonusCompletions"]> }
>;
export type GenericBonusAmountFeature = Replace<
BonusAmountFeature<BonusAmountFeatureOptions>,
{
bonusAmount: ProcessedComputable<DecimalSource>;
totalAmount: ProcessedComputable<DecimalSource>;
}
>;
export type GenericBonusCompletionsFeature = Replace<
BonusCompletionsFeature<BonusCompletionsFeatureOptions>,
{
bonusCompletions: ProcessedComputable<DecimalSource>;
totalCompletions: ProcessedComputable<DecimalSource>;
}
>;
/**
* Allows the addition of "bonus levels" to the decorated feature, with an accompanying "total amount".
* To function properly, the `createFeature()` function must have its generic type extended by {@linkcode BonusAmountFeatureOptions}.
* Additionally, the base feature must have an `amount` property.
* To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericBonusAmountFeature}.
* @example ```ts
* createRepeatable<RepeatableOptions & BonusAmountFeatureOptions>(() => ({
* bonusAmount: noPersist(otherRepeatable.amount),
* ...
* }), bonusAmountDecorator) as GenericRepeatable & GenericBonusAmountFeature
*/
export const bonusAmountDecorator: Decorator<
BonusAmountFeatureOptions,
BaseBonusAmountFeature,
GenericBonusAmountFeature
> = {
postConstruct(feature) {
if (feature.amount === undefined) {
console.error(
`Decorated feature ${feature.id} does not contain the required 'amount' property"`
);
}
processComputable(feature, "bonusAmount");
if (feature.totalAmount === undefined) {
feature.totalAmount = computed(() =>
Decimal.add(
unref(feature.amount ?? 0),
unref(feature.bonusAmount as ProcessedComputable<DecimalSource>)
)
);
}
}
};
/**
* Allows the addition of "bonus levels" to the decorated feature, with an accompanying "total amount".
* To function properly, the `createFeature()` function must have its generic type extended by {@linkcode BonusCompletionFeatureOptions}.
* To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericBonusCompletionFeature}.
* @example ```ts
* createChallenge<ChallengeOptions & BonusCompletionFeatureOptions>(() => ({
* bonusCompletions: noPersist(otherChallenge.completions),
* ...
* }), bonusCompletionDecorator) as GenericChallenge & GenericBonusCompletionFeature
* ```
*/
export const bonusCompletionsDecorator: Decorator<
BonusCompletionsFeatureOptions,
BaseBonusCompletionsFeature,
GenericBonusCompletionsFeature
> = {
postConstruct(feature) {
processComputable(feature, "bonusCompletions");
if (feature.totalCompletions === undefined) {
feature.totalCompletions = computed(() =>
Decimal.add(
unref(feature.completions ?? 0),
unref(feature.bonusCompletions as ProcessedComputable<DecimalSource>)
)
);
}
}
};

59
src/features/decorators/common.ts
View file

@ -1,59 +0,0 @@
import { Replace, OptionsObject } from "../feature";
import {
Computable,
GetComputableType,
processComputable,
ProcessedComputable
} from "util/computed";
import { Persistent, State } from "game/persistence";
export type Decorator<
FeatureOptions,
BaseFeature = object,
GenericFeature = BaseFeature,
S extends State = State
> = {
getPersistentData?(): Record<string, Persistent<S>>;
preConstruct?(
feature: OptionsObject<FeatureOptions, BaseFeature & { id: string }, GenericFeature>
): void;
postConstruct?(
feature: OptionsObject<FeatureOptions, BaseFeature & { id: string }, GenericFeature>
): void;
getGatheredProps?(
feature: OptionsObject<FeatureOptions, BaseFeature & { id: string }, GenericFeature>
): Partial<OptionsObject<FeatureOptions, BaseFeature & { id: string }, GenericFeature>>;
};
export type GenericDecorator = Decorator<unknown>;
export interface EffectFeatureOptions<T = unknown> {
effect: Computable<T>;
}
export type EffectFeature<T extends EffectFeatureOptions> = Replace<
T,
{ effect: GetComputableType<T["effect"]> }
>;
export type GenericEffectFeature<T = unknown> = Replace<
EffectFeature<EffectFeatureOptions>,
{ effect: ProcessedComputable<T> }
>;
/**
* Allows the usage of an `effect` field in the decorated feature.
* To function properly, the `createFeature()` function must have its generic type extended by {@linkcode EffectFeatureOptions}.
* To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericEffectFeature}.
* @example ```ts
* createRepeatable<RepeatableOptions & EffectFeatureOptions>(() => ({
* effect() { return Decimal.pow(2, this.amount); },
* ...
* }), effectDecorator) as GenericUpgrade & GenericEffectFeature;
* ```
*/
export const effectDecorator: Decorator<EffectFeatureOptions, unknown, GenericEffectFeature> = {
postConstruct(feature) {
processComputable(feature, "effect");
}
};

80
src/features/feature.ts
View file

@ -1,38 +1,6 @@
import Decimal from "util/bignum";
import { DoNotCache, ProcessedComputable } from "util/computed";
import type { CSSProperties, DefineComponent } from "vue";
import { isRef, unref } from "vue";
/**
* A symbol to use as a key for a vue component a feature can be rendered with
* @see {@link util/vue.VueFeature}
*/
export const Component = Symbol("Component");
/**
* A symbol to use as a key for a prop gathering function that a feature can use to send to its component
* @see {@link util/vue.VueFeature}
*/
export const GatherProps = Symbol("GatherProps");
/**
* A type referring to a function that returns JSX and is marked that it shouldn't be wrapped in a ComputedRef
* @see {@link jsx}
*/
export type JSXFunction = (() => JSX.Element) & { [DoNotCache]: true };
/**
* Any value that can be coerced into (or is) a vue component
*/
export type CoercableComponent = string | DefineComponent | JSXFunction;
/**
* Any value that can be passed into an HTML element's style attribute.
* Note that Profectus uses its own StyleValue and CSSProperties that are extended,
* in order to have additional properties added to them, such as variable CSS variables.
*/
export type StyleValue = string | CSSProperties | Array<string | CSSProperties>;
/** A type that refers to any vue component */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type GenericComponent = DefineComponent<any, any, any>;
import { Renderable, renderCol, VueFeature } from "util/vue";
import { computed, isRef, MaybeRef, Ref, unref } from "vue";
/** Utility type that is S, with any properties from T that aren't already present in S */
export type Replace<T, S> = S & Omit<T, keyof S>;
@ -42,7 +10,7 @@ export type Replace<T, S> = S & Omit<T, keyof S>;
* with "this" bound to what the type will eventually be processed into.
* Intended for making lazily evaluated objects.
*/
export type OptionsFunc<T, R = unknown, S = R> = (obj: R) => OptionsObject<T, R, S>;
export type OptionsFunc<T, R = unknown, S = R> = (obj: S) => OptionsObject<T, R, S>;
export type OptionsObject<T, R = unknown, S = R> = T & Partial<R> & ThisType<T & S>;
@ -67,34 +35,18 @@ export enum Visibility {
None
}
export function isVisible(visibility: ProcessedComputable<Visibility | boolean>) {
export function isVisible(visibility: MaybeRef<Visibility | boolean>) {
const currVisibility = unref(visibility);
return currVisibility !== Visibility.None && currVisibility !== false;
}
export function isHidden(visibility: ProcessedComputable<Visibility | boolean>) {
export function isHidden(visibility: MaybeRef<Visibility | boolean>) {
const currVisibility = unref(visibility);
return currVisibility === Visibility.Hidden;
}
/**
* Takes a function and marks it as JSX so it won't get auto-wrapped into a ComputedRef.
* The function may also return empty string as empty JSX tags cause issues.
*/
export function jsx(func: () => JSX.Element | ""): JSXFunction {
(func as Partial<JSXFunction>)[DoNotCache] = true;
return func as JSXFunction;
}
/** Utility function to set a property on an object if and only if it doesn't already exist */
export function setDefault<T, K extends keyof T>(
object: T,
key: K,
value: T[K]
): asserts object is Exclude<T, K> & Required<Pick<T, K>> {
if (object[key] == null && value != null) {
object[key] = value;
}
export function isType<T extends symbol>(object: unknown, type: T): object is { type: T } {
return object != null && typeof object === "object" && "type" in object && object.type === type;
}
/**
@ -121,6 +73,24 @@ export function findFeatures(obj: Record<string, unknown>, ...types: symbol[]):
return objects;
}
export function getFirstFeature<T extends VueFeature>(
features: T[],
filter: (feature: T) => boolean
): {
firstFeature: Ref<T | undefined>;
collapsedContent: MaybeRef<Renderable>;
hasCollapsedContent: Ref<boolean>;
} {
const filteredFeatures = computed(() =>
features.filter(feature => isVisible(feature.visibility ?? true) && filter(feature))
);
return {
firstFeature: computed(() => filteredFeatures.value[0]),
collapsedContent: computed(() => renderCol(...filteredFeatures.value.slice(1))),
hasCollapsedContent: computed(() => filteredFeatures.value.length > 1)
};
}
/**
* Traverses an object and returns all features that are _not_ any of the given types.
* Features are any object with a "type" property that has a symbol value.

64
src/features/grids/Grid.vue
View file

@ -1,60 +1,26 @@
<template>
<div
v-if="isVisible(visibility)"
:style="{
visibility: isHidden(visibility) ? 'hidden' : undefined
}"
class="table-grid"
>
<div v-for="row in unref(rows)" class="row-grid" :class="{ mergeAdjacent }" :key="row">
<GridCell
v-for="col in unref(cols)"
:key="col"
v-bind="gatherCellProps(unref(cells)[row * 100 + col])"
/>
</div>
<div class="table-grid">
<Cells />
</div>
</template>
<script lang="ts">
<script setup lang="tsx">
import "components/common/table.css";
import themes from "data/themes";
import { isHidden, isVisible, Visibility } from "features/feature";
import type { GridCell } from "features/grids/grid";
import type { Grid } from "features/grids/grid";
import settings from "game/settings";
import { processedPropType } from "util/vue";
import { computed, defineComponent, unref } from "vue";
import GridCellVue from "./GridCell.vue";
import { render } from "util/vue";
import { computed, unref } from "vue";
const props = defineProps<{
rows: Grid["rows"];
cols: Grid["cols"];
cells: Grid["cells"];
}>();
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
rows: {
type: processedPropType<number>(Number),
required: true
},
cols: {
type: processedPropType<number>(Number),
required: true
},
cells: {
type: processedPropType<Record<string, GridCell>>(Object),
required: true
}
},
components: { GridCell: GridCellVue },
setup() {
const mergeAdjacent = computed(() => themes[settings.theme].mergeAdjacent);
function gatherCellProps(cell: GridCell) {
const { visibility, onClick, onHold, display, title, style, canClick, id } = cell;
return { visibility, onClick, onHold, display, title, style, canClick, id };
}
return { unref, gatherCellProps, Visibility, mergeAdjacent, isVisible, isHidden };
}
});
const Cells = () => new Array(unref(props.rows)).fill(0).map((_, row) => <div class={{ "row-grid": true, mergeAdjacent: mergeAdjacent.value }}>
{new Array(unref(props.cols)).map((_, col) => render(props.cells[row][col]))}
</div>);
</script>

81
src/features/grids/GridCell.vue
View file

@ -1,13 +1,6 @@
<template>
<button
v-if="isVisible(visibility)"
:class="{ feature: true, tile: true, can: unref(canClick), locked: !unref(canClick) }"
:style="[
{
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
:class="{ tile: true, can: unref(canClick), locked: !unref(canClick) }"
@click="onClick"
@mousedown="start"
@mouseleave="stop"
@ -16,72 +9,32 @@
@touchend.passive="stop"
@touchcancel.passive="stop"
>
<div v-if="title"><component :is="titleComponent" /></div>
<component :is="component" style="white-space: pre-line" />
<Node :id="id" />
<div v-if="title"><Title /></div>
<Component style="white-space: pre-line" />
</button>
</template>
<script lang="ts">
<script setup lang="tsx">
import "components/common/features.css";
import Node from "components/Node.vue";
import type { CoercableComponent, StyleValue } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import {
computeComponent,
computeOptionalComponent,
processedPropType,
render,
setupHoldToClick
} from "util/vue";
import type { PropType } from "vue";
import { defineComponent, toRefs, unref } from "vue";
import { toRef, unref } from "vue";
import { GridCell } from "./grid";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
onHold: Function as PropType<VoidFunction>,
display: {
type: processedPropType<CoercableComponent>(Object, String, Function),
required: true
},
title: processedPropType<CoercableComponent>(Object, String, Function),
style: processedPropType<StyleValue>(String, Object, Array),
canClick: {
type: processedPropType<boolean>(Boolean),
required: true
},
id: {
type: String,
required: true
}
},
components: {
Node
},
setup(props) {
const { onClick, onHold, title, display } = toRefs(props);
const props = defineProps<{
onClick: GridCell["onClick"];
onHold: GridCell["onHold"];
display: GridCell["display"];
title: GridCell["title"];
canClick: GridCell["canClick"];
}>();
const { start, stop } = setupHoldToClick(onClick, onHold);
const { start, stop } = setupHoldToClick(toRef(props, "onClick"), toRef(props, "onHold"));
const titleComponent = computeOptionalComponent(title);
const component = computeComponent(display);
return {
start,
stop,
titleComponent,
component,
Visibility,
unref,
isVisible,
isHidden
};
}
});
const Title = () => props.title == null ? <></> : render(props.title);
const Component = () => render(props.display);
</script>
<style scoped>

370
src/features/grids/grid.ts
View file

@ -1,370 +0,0 @@
import type {
CoercableComponent,
GenericComponent,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
import GridComponent from "features/grids/Grid.vue";
import type { Persistent, State } from "game/persistence";
import { persistent } from "game/persistence";
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 Grid} features. */
export const GridType = Symbol("Grid");
/** A type representing a computable value for a cell in the grid. */
export type CellComputable<T> = Computable<T> | ((id: string | number, state: State) => T);
/** Create proxy to more easily get the properties of cells on a grid. */
function createGridProxy(grid: GenericGrid): Record<string | number, GridCell> {
return new Proxy({}, getGridHandler(grid)) as Record<string | number, GridCell>;
}
/**
* Returns traps for a proxy that will give cell proxies when accessing any numerical key.
* @param grid The grid to get the cells from.
* @see {@link createGridProxy}
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getGridHandler(grid: GenericGrid): ProxyHandler<Record<string | number, GridCell>> {
const keys = computed(() => {
const keys = [];
for (let row = 1; row <= unref(grid.rows); row++) {
for (let col = 1; col <= unref(grid.cols); col++) {
keys.push((row * 100 + col).toString());
}
}
return keys;
});
return {
get(target: Record<string | number, GridCell>, key: PropertyKey) {
if (key === "isProxy") {
return true;
}
if (typeof key === "symbol") {
return (grid as never)[key];
}
if (!keys.value.includes(key.toString())) {
return undefined;
}
if (target[key] == null) {
target[key] = new Proxy(
grid,
getCellHandler(key.toString())
) as unknown as GridCell;
}
return target[key];
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
set(target: Record<string | number, GridCell>, key: PropertyKey, value: any) {
console.warn("Cannot set grid cells", target, key, value);
return false;
},
ownKeys() {
return keys.value;
},
has(target: Record<string | number, GridCell>, key: PropertyKey) {
return keys.value.includes(key.toString());
},
getOwnPropertyDescriptor(target: Record<string | number, GridCell>, key: PropertyKey) {
if (keys.value.includes(key.toString())) {
return {
configurable: true,
enumerable: true,
writable: false
};
}
}
};
}
/**
* Returns traps for a proxy that will get the properties for the specified cell
* @param id The grid cell ID to get properties from.
* @see {@link getGridHandler}
* @see {@link createGridProxy}
*/
function getCellHandler(id: string): ProxyHandler<GenericGrid> {
const keys = [
"id",
"visibility",
"canClick",
"startState",
"state",
"style",
"classes",
"title",
"display",
"onClick",
"onHold"
];
const cache: Record<string, Ref<unknown>> = {};
return {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
get(target, key, receiver): any {
if (key === "isProxy") {
return true;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let prop = (target as any)[key];
if (isFunction(prop)) {
return () => prop.call(receiver, id, target.getState(id));
}
if (prop != null || typeof key === "symbol") {
return prop;
}
key = key.slice(0, 1).toUpperCase() + key.slice(1);
if (key === "startState") {
return prop.call(receiver, id);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
prop = (target as any)[`get${key}`];
if (isFunction(prop)) {
if (!(key in cache)) {
cache[key] = computed(() => prop.call(receiver, id, target.getState(id)));
}
return cache[key].value;
} else if (prop != null) {
return unref(prop);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
prop = (target as any)[`on${key}`];
if (isFunction(prop)) {
return () => prop.call(receiver, id, target.getState(id));
} else if (prop != null) {
return prop;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return (target as any)[key];
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
set(target: Record<string, any>, key: string, value: any, receiver: typeof Proxy): boolean {
key = `set${key.slice(0, 1).toUpperCase() + key.slice(1)}`;
if (key in target && isFunction(target[key]) && target[key].length < 3) {
target[key].call(receiver, id, value);
return true;
} else {
console.warn(`No setter for "${key}".`, target);
return false;
}
},
ownKeys() {
return keys;
},
has(target, key) {
return keys.includes(key.toString());
},
getOwnPropertyDescriptor(target, key) {
if (keys.includes(key.toString())) {
return {
configurable: true,
enumerable: true,
writable: false
};
}
}
};
}
/**
* Represents a cell within a grid. These properties will typically be accessed via a cell proxy that calls functions on the grid to get the properties for a specific cell.
* @see {@link createGridProxy}
*/
export interface GridCell {
/** A unique identifier for the grid cell. */
id: string;
/** Whether this cell should be visible. */
visibility: Visibility | boolean;
/** Whether this cell can be clicked. */
canClick: boolean;
/** The initial persistent state of this cell. */
startState: State;
/** The persistent state of this cell. */
state: State;
/** CSS to apply to this feature. */
style?: StyleValue;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Record<string, boolean>;
/** A header to appear at the top of the display. */
title?: CoercableComponent;
/** The main text that appears in the display. */
display: CoercableComponent;
/** A function that is called when the cell is clicked. */
onClick?: (e?: MouseEvent | TouchEvent) => void;
/** A function that is called when the cell is held down. */
onHold?: VoidFunction;
}
/**
* An object that configures a {@link Grid}.
*/
export interface GridOptions {
/** Whether this grid should be visible. */
visibility?: Computable<Visibility | boolean>;
/** The number of rows in the grid. */
rows: Computable<number>;
/** The number of columns in the grid. */
cols: Computable<number>;
/** A computable to determine the visibility of a cell. */
getVisibility?: CellComputable<Visibility | boolean>;
/** A computable to determine if a cell can be clicked. */
getCanClick?: CellComputable<boolean>;
/** A computable to get the initial persistent state of a cell. */
getStartState: Computable<State> | ((id: string | number) => State);
/** A computable to get the CSS styles for a cell. */
getStyle?: CellComputable<StyleValue>;
/** A computable to get the CSS classes for a cell. */
getClasses?: CellComputable<Record<string, boolean>>;
/** A computable to get the title component for a cell. */
getTitle?: CellComputable<CoercableComponent>;
/** A computable to get the display component for a cell. */
getDisplay: CellComputable<CoercableComponent>;
/** A function that is called when a cell is clicked. */
onClick?: (id: string | number, state: State, e?: MouseEvent | TouchEvent) => void;
/** A function that is called when a cell is held down. */
onHold?: (id: string | number, state: State) => void;
}
/**
* The properties that are added onto a processed {@link BoardOptions} to create a {@link Board}.
*/
export interface BaseGrid {
/** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
/** Get the auto-generated ID for identifying a specific cell of this grid that appears in the DOM. Will not persist between refreshes or updates. */
getID: (id: string | number, state: State) => string;
/** Get the persistent state of the given cell. */
getState: (id: string | number) => State;
/** Set the persistent state of the given cell. */
setState: (id: string | number, state: State) => void;
/** A dictionary of cells within this grid. */
cells: Record<string | number, GridCell>;
/** The persistent state of this grid, which is a dictionary of cell states. */
cellState: Persistent<Record<string | number, State>>;
/** A symbol that helps identify features of the same type. */
type: typeof GridType;
/** 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<string, unknown>;
}
/** An object that represents a feature that is a grid of cells that all behave according to the same rules. */
export type Grid<T extends GridOptions> = Replace<
T & BaseGrid,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
rows: GetComputableType<T["rows"]>;
cols: GetComputableType<T["cols"]>;
getVisibility: GetComputableTypeWithDefault<T["getVisibility"], Visibility.Visible>;
getCanClick: GetComputableTypeWithDefault<T["getCanClick"], true>;
getStartState: GetComputableType<T["getStartState"]>;
getStyle: GetComputableType<T["getStyle"]>;
getClasses: GetComputableType<T["getClasses"]>;
getTitle: GetComputableType<T["getTitle"]>;
getDisplay: GetComputableType<T["getDisplay"]>;
}
>;
/** A type that matches any valid {@link Grid} object. */
export type GenericGrid = Replace<
Grid<GridOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
getVisibility: ProcessedComputable<Visibility | boolean>;
getCanClick: ProcessedComputable<boolean>;
}
>;
/**
* Lazily creates a grid with the given options.
* @param optionsFunc Grid options.
*/
export function createGrid<T extends GridOptions>(
optionsFunc: OptionsFunc<T, BaseGrid, GenericGrid>
): Grid<T> {
const cellState = persistent<Record<string | number, State>>({}, false);
return createLazyProxy(feature => {
const grid = optionsFunc.call(feature, feature);
grid.id = getUniqueID("grid-");
grid[Component] = GridComponent as GenericComponent;
grid.cellState = cellState;
grid.getID = function (this: GenericGrid, cell: string | number) {
return grid.id + "-" + cell;
};
grid.getState = function (this: GenericGrid, cell: string | number) {
if (this.cellState.value[cell] != null) {
return cellState.value[cell];
}
return this.cells[cell].startState;
};
grid.setState = function (this: GenericGrid, cell: string | number, state: State) {
cellState.value[cell] = state;
};
grid.cells = createGridProxy(grid as GenericGrid);
processComputable(grid as T, "visibility");
setDefault(grid, "visibility", Visibility.Visible);
processComputable(grid as T, "rows");
processComputable(grid as T, "cols");
processComputable(grid as T, "getVisibility");
setDefault(grid, "getVisibility", Visibility.Visible);
processComputable(grid as T, "getCanClick");
setDefault(grid, "getCanClick", true);
processComputable(grid as T, "getStartState");
processComputable(grid as T, "getStyle");
processComputable(grid as T, "getClasses");
processComputable(grid as T, "getTitle");
processComputable(grid as T, "getDisplay");
if (grid.onClick) {
const onClick = grid.onClick.bind(grid);
grid.onClick = function (id, state, e) {
if (unref((grid as GenericGrid).cells[id].canClick)) {
onClick(id, state, e);
}
};
}
if (grid.onHold) {
const onHold = grid.onHold.bind(grid);
grid.onHold = function (id, state) {
if (unref((grid as GenericGrid).cells[id].canClick)) {
onHold(id, state);
}
};
}
grid[GatherProps] = function (this: GenericGrid) {
const { visibility, rows, cols, cells, id } = this;
return { visibility, rows, cols, cells, id };
};
return grid as unknown as Grid<T>;
});
}

440
src/features/grids/grid.tsx Normal file
View file

@ -0,0 +1,440 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { OptionsFunc, Replace } from "features/feature";
import { Visibility } from "features/feature";
import Grid from "features/grids/Grid.vue";
import type { Persistent, State } from "game/persistence";
import { persistent } from "game/persistence";
import { isFunction } from "util/common";
import { ProcessedRefOrGetter, processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { Renderable, VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
import type { CSSProperties, MaybeRef, MaybeRefOrGetter, Ref } from "vue";
import { computed, unref } from "vue";
import GridCell from "./GridCell.vue";
/** A symbol used to identify {@link Grid} features. */
export const GridType = Symbol("Grid");
/** A type representing a MaybeRefOrGetter value for a cell in the grid. */
export type CellMaybeRefOrGetter<T> =
| MaybeRefOrGetter<T>
| ((row: number, col: number, state: State) => T);
export type ProcessedCellRefOrGetter<T> =
| MaybeRef<T>
| ((row: number, col: number, state: State) => T);
/**
* Represents a cell within a grid. These properties will typically be accessed via a cell proxy that calls functions on the grid to get the properties for a specific cell.
* @see {@link createGridProxy}
*/
export interface GridCell extends VueFeature {
/** Which roe in the grid this cell is from. */
row: number;
/** Which col in the grid this cell is from. */
col: number;
/** Whether this cell can be clicked. */
canClick: boolean;
/** The initial persistent state of this cell. */
startState: State;
/** The persistent state of this cell. */
state: State;
/** A header to appear at the top of the display. */
title?: MaybeRef<Renderable>;
/** The main text that appears in the display. */
display: MaybeRef<Renderable>;
/** A function that is called when the cell is clicked. */
onClick?: (e?: MouseEvent | TouchEvent) => void;
/** A function that is called when the cell is held down. */
onHold?: VoidFunction;
}
/**
* An object that configures a {@link Grid}.
*/
export interface GridOptions extends VueFeatureOptions {
/** The number of rows in the grid. */
rows: MaybeRefOrGetter<number>;
/** The number of columns in the grid. */
cols: MaybeRefOrGetter<number>;
/** A MaybeRefOrGetter to determine the visibility of a cell. */
getVisibility?: CellMaybeRefOrGetter<Visibility | boolean>;
/** A MaybeRefOrGetter to determine if a cell can be clicked. */
getCanClick?: CellMaybeRefOrGetter<boolean>;
/** A MaybeRefOrGetter to get the initial persistent state of a cell. */
getStartState: MaybeRefOrGetter<State> | ((row: number, col: number) => State);
/** A MaybeRefOrGetter to get the CSS styles for a cell. */
getStyle?: CellMaybeRefOrGetter<CSSProperties>;
/** A MaybeRefOrGetter to get the CSS classes for a cell. */
getClasses?: CellMaybeRefOrGetter<Record<string, boolean>>;
/** A MaybeRefOrGetter to get the title component for a cell. */
getTitle?: CellMaybeRefOrGetter<MaybeRefOrGetter<Renderable>>;
/** A MaybeRefOrGetter to get the display component for a cell. */
getDisplay: CellMaybeRefOrGetter<MaybeRefOrGetter<Renderable>>;
/** A function that is called when a cell is clicked. */
onClick?: (row: number, col: number, state: State, e?: MouseEvent | TouchEvent) => void;
/** A function that is called when a cell is held down. */
onHold?: (row: number, col: number, state: State) => void;
}
/**
* The properties that are added onto a processed {@link BoardOptions} to create a {@link Board}.
*/
export interface BaseGrid extends VueFeature {
/** Get the auto-generated ID for identifying a specific cell of this grid that appears in the DOM. Will not persist between refreshes or updates. */
getID: (row: number, col: number, state: State) => string;
/** Get the persistent state of the given cell. */
getState: (row: number, col: number) => State;
/** Set the persistent state of the given cell. */
setState: (row: number, col: number, state: State) => void;
/** A dictionary of cells within this grid. */
cells: GridCell[][];
/** The persistent state of this grid, which is a dictionary of cell states. */
cellState: Persistent<Record<number, Record<number, State>>>;
/** A symbol that helps identify features of the same type. */
type: typeof GridType;
}
/** An object that represents a feature that is a grid of cells that all behave according to the same rules. */
export type Grid = Replace<
Replace<GridOptions, BaseGrid>,
{
getVisibility: ProcessedCellRefOrGetter<Visibility | boolean>;
getCanClick: ProcessedCellRefOrGetter<boolean>;
rows: ProcessedRefOrGetter<GridOptions["rows"]>;
cols: ProcessedRefOrGetter<GridOptions["cols"]>;
getStartState: MaybeRef<State> | ((row: number, col: number) => State);
getStyle: ProcessedCellRefOrGetter<GridOptions["getStyle"]>;
getClasses: ProcessedCellRefOrGetter<GridOptions["getClasses"]>;
getTitle: ProcessedCellRefOrGetter<GridOptions["getTitle"]>;
getDisplay: ProcessedCellRefOrGetter<GridOptions["getDisplay"]>;
}
>;
function getCellRowHandler(grid: Grid, row: number) {
return new Proxy({} as GridCell[], {
get(target, key) {
if (key === "isProxy") {
return true;
}
if (typeof key !== "string") {
return;
}
if (key === "length") {
return unref(grid.cols);
}
const keyNum = parseInt(key);
if (!Number.isFinite(keyNum) || keyNum >= unref(grid.cols)) {
if (keyNum in target) {
return target[keyNum];
}
return (target[keyNum] = getCellHandler(grid, row, keyNum));
}
},
set(target, key, value) {
console.warn("Cannot set grid cells", target, key, value);
return false;
},
ownKeys() {
return [...new Array(unref(grid.cols)).fill(0).map((_, i) => "" + i), "length"];
},
has(target, key) {
if (key === "length") {
return true;
}
if (typeof key !== "string") {
return false;
}
const keyNum = parseInt(key);
if (!Number.isFinite(keyNum) || keyNum >= unref(grid.cols)) {
return false;
}
return true;
},
getOwnPropertyDescriptor(target, key) {
if (typeof key !== "string") {
return;
}
const keyNum = parseInt(key);
if (key !== "length" && (!Number.isFinite(keyNum) || keyNum >= unref(grid.cols))) {
return;
}
return {
configurable: true,
enumerable: true,
writable: false
};
}
});
}
/**
* Returns traps for a proxy that will get the properties for the specified cell
* @param id The grid cell ID to get properties from.
* @see {@link getGridHandler}
* @see {@link createGridProxy}
*/
function getCellHandler(grid: Grid, row: number, col: number): GridCell {
const keys = [
"id",
"visibility",
"classes",
"style",
"components",
"wrappers",
VueFeature,
"row",
"col",
"canClick",
"startState",
"state",
"title",
"display",
"onClick",
"onHold"
] as const;
const cache: Record<string, Ref<unknown>> = {};
return new Proxy({} as GridCell, {
// The typing in this function is absolutely atrocious in order to support custom properties
get(target, key, receiver) {
switch (key) {
case "isProxy":
return true;
case "wrappers":
return [];
case VueFeature:
return true;
case "row":
return row;
case "col":
return col;
case "startState": {
if (typeof grid.getStartState === "function") {
return grid.getStartState(row, col);
}
return unref(grid.getStartState);
}
case "state": {
return grid.getState(row, col);
}
case "components":
return [
computed(() => (
<GridCell
onClick={receiver.onClick}
onHold={receiver.onHold}
display={receiver.display}
title={receiver.title}
canClick={receiver.canClick}
/>
))
];
}
let prop = (grid as any)[key];
if (isFunction(prop)) {
return () => prop.call(receiver, row, col, grid.getState(row, col));
}
if (prop != null || typeof key === "symbol") {
return prop;
}
key = key.slice(0, 1).toUpperCase() + key.slice(1);
prop = (grid as any)[`get${key}`];
if (isFunction(prop)) {
if (!(key in cache)) {
cache[key] = computed(() =>
prop.call(receiver, row, col, grid.getState(row, col))
);
}
return cache[key].value;
} else if (prop != null) {
return unref(prop);
}
prop = (grid as any)[`on${key}`];
if (isFunction(prop)) {
return () => prop.call(receiver, row, col, grid.getState(row, col));
} else if (prop != null) {
return prop;
}
return (grid as any)[key];
},
set(target, key, value) {
if (typeof key !== "string") {
return false;
}
key = `set${key.slice(0, 1).toUpperCase() + key.slice(1)}`;
if (key in grid && isFunction((grid as any)[key]) && (grid as any)[key].length < 3) {
(grid as any)[key].call(grid, row, col, value);
return true;
} else {
console.warn(`No setter for "${key}".`, target);
return false;
}
},
ownKeys() {
return keys;
},
has(target, key) {
return (keys as readonly (string | symbol)[]).includes(key);
},
getOwnPropertyDescriptor(target, key) {
if ((keys as readonly (string | symbol)[]).includes(key)) {
return {
configurable: true,
enumerable: true,
writable: false
};
}
}
});
}
function convertCellMaybeRefOrGetter<T>(
value: CellMaybeRefOrGetter<T>
): ProcessedCellRefOrGetter<T> {
if (typeof value === "function" && value.length > 0) {
return value;
}
return processGetter(value) as MaybeRef<T>;
}
/**
* Lazily creates a grid with the given options.
* @param optionsFunc Grid options.
*/
export function createGrid<T extends GridOptions>(optionsFunc: OptionsFunc<T, BaseGrid, Grid>) {
const cellState = persistent<Record<number, Record<number, State>>>({}, false);
return createLazyProxy(feature => {
const options = optionsFunc.call(feature, feature as Grid);
const {
rows,
cols,
getVisibility,
getCanClick,
getStartState,
getStyle,
getClasses,
getTitle,
getDisplay,
onClick,
onHold,
...props
} = options;
const grid = {
type: GridType,
...(props as Omit<typeof props, keyof VueFeature | keyof GridOptions>),
...vueFeatureMixin("grid", options, () => (
<Grid rows={grid.rows} cols={grid.cols} cells={grid.cells} />
)),
cellState,
cells: new Proxy({} as Record<number, GridCell[]>, {
get(target, key: PropertyKey) {
if (key === "isProxy") {
return true;
}
if (key === "length") {
return unref(grid.rows);
}
if (typeof key !== "string") {
return;
}
const keyNum = parseInt(key);
if (!Number.isFinite(keyNum) || keyNum >= unref(grid.rows)) {
if (keyNum in target) {
return target[keyNum];
}
return (target[keyNum] = getCellRowHandler(grid, keyNum));
}
},
set(target, key, value) {
console.warn("Cannot set grid cells", target, key, value);
return false;
},
ownKeys(): string[] {
return [...new Array(unref(grid.rows)).fill(0).map((_, i) => "" + i), "length"];
},
has(target, key) {
if (key === "length") {
return true;
}
if (typeof key !== "string") {
return false;
}
const keyNum = parseInt(key);
if (!Number.isFinite(keyNum) || keyNum >= unref(grid.rows)) {
return false;
}
return true;
},
getOwnPropertyDescriptor(target, key) {
if (typeof key !== "string") {
return;
}
const keyNum = parseInt(key);
if (
key !== "length" &&
(!Number.isFinite(keyNum) || keyNum >= unref(grid.rows))
) {
return;
}
return {
configurable: true,
enumerable: true,
writable: false
};
}
}),
rows: processGetter(rows),
cols: processGetter(cols),
getVisibility: convertCellMaybeRefOrGetter(getVisibility ?? true),
getCanClick: convertCellMaybeRefOrGetter(getCanClick ?? true),
getStartState: processGetter(getStartState),
getStyle: convertCellMaybeRefOrGetter(getStyle),
getClasses: convertCellMaybeRefOrGetter(getClasses),
getTitle: convertCellMaybeRefOrGetter(getTitle),
getDisplay: convertCellMaybeRefOrGetter(getDisplay),
getID: function (row: number, col: number): string {
return grid.id + "-" + row + "-" + col;
},
getState: function (row: number, col: number): State {
if (cellState.value[row][col] != null) {
return cellState.value[row][col];
}
return grid.cells[row][col].startState;
},
setState: function (row: number, col: number, state: State) {
cellState.value[row] ??= {};
cellState.value[row][col] = state;
},
onClick:
onClick == null
? undefined
: function (row, col, state, e) {
if (grid.cells[row][col].canClick) {
onClick.call(grid, row, col, state, e);
}
},
onHold:
onHold == null
? undefined
: function (row, col, state) {
if (grid.cells[row][col].canClick) {
onHold.call(grid, row, col, state);
}
}
} satisfies Grid;
return grid;
});
}

72
src/features/hotkey.tsx
View file

@ -1,22 +1,21 @@
import Hotkey from "components/Hotkey.vue";
import { hasWon } from "data/projEntry";
import type { OptionsFunc, Replace } from "features/feature";
import { findFeatures, jsx, setDefault } from "features/feature";
import { findFeatures } from "features/feature";
import { globalBus } from "game/events";
import player from "game/player";
import { registerInfoComponent } from "game/settings";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
import {
processGetter,
type MaybeRefOrGetter,
type UnwrapRef,
type MaybeRef
} from "util/computed";
import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { shallowReactive, unref } from "vue";
import Hotkey from "components/Hotkey.vue";
/** A dictionary of all hotkeys. */
export const hotkeys: Record<string, GenericHotkey | undefined> = shallowReactive({});
export const hotkeys: Record<string, Hotkey | undefined> = shallowReactive({});
/** A symbol used to identify {@link Hotkey} features. */
export const HotkeyType = Symbol("Hotkey");
@ -25,13 +24,13 @@ export const HotkeyType = Symbol("Hotkey");
*/
export interface HotkeyOptions {
/** Whether or not this hotkey is currently enabled. */
enabled?: Computable<boolean>;
enabled?: MaybeRefOrGetter<boolean>;
/** The key tied to this hotkey */
key: string;
/** The description of this hotkey, to display in the settings. */
description: Computable<string>;
description: MaybeRefOrGetter<string>;
/** What to do upon pressing the key. */
onPress: VoidFunction;
onPress: (e?: MouseEvent | TouchEvent) => void;
}
/**
@ -43,19 +42,11 @@ export interface BaseHotkey {
}
/** An object that represents a hotkey shortcut that performs an action upon a key sequence being pressed. */
export type Hotkey<T extends HotkeyOptions> = Replace<
T & BaseHotkey,
export type Hotkey = Replace<
Replace<HotkeyOptions, BaseHotkey>,
{
enabled: GetComputableTypeWithDefault<T["enabled"], true>;
description: GetComputableType<T["description"]>;
}
>;
/** A type that matches any valid {@link Hotkey} object. */
export type GenericHotkey = Replace<
Hotkey<HotkeyOptions>,
{
enabled: ProcessedComputable<boolean>;
enabled: MaybeRef<boolean>;
description: UnwrapRef<HotkeyOptions["description"]>;
}
>;
@ -66,28 +57,33 @@ const uppercaseNumbers = [")", "!", "@", "#", "$", "%", "^", "&", "*", "("];
* @param optionsFunc Hotkey options.
*/
export function createHotkey<T extends HotkeyOptions>(
optionsFunc: OptionsFunc<T, BaseHotkey, GenericHotkey>
): Hotkey<T> {
optionsFunc: OptionsFunc<T, BaseHotkey, Hotkey>
) {
return createLazyProxy(feature => {
const hotkey = optionsFunc.call(feature, feature);
hotkey.type = HotkeyType;
const options = optionsFunc.call(feature, feature as Hotkey);
const { enabled, description, key, onPress, ...props } = options;
processComputable(hotkey as T, "enabled");
setDefault(hotkey, "enabled", true);
processComputable(hotkey as T, "description");
const hotkey = {
type: HotkeyType,
...(props as Omit<typeof props, keyof HotkeyOptions>),
enabled: processGetter(enabled) ?? true,
description: processGetter(description),
key,
onPress
} satisfies Hotkey;
return hotkey as unknown as Hotkey<T>;
return hotkey;
});
}
globalBus.on("addLayer", layer => {
(findFeatures(layer, HotkeyType) as GenericHotkey[]).forEach(hotkey => {
(findFeatures(layer, HotkeyType) as Hotkey[]).forEach(hotkey => {
hotkeys[hotkey.key] = hotkey;
});
});
globalBus.on("removeLayer", layer => {
(findFeatures(layer, HotkeyType) as GenericHotkey[]).forEach(hotkey => {
(findFeatures(layer, HotkeyType) as Hotkey[]).forEach(hotkey => {
hotkeys[hotkey.key] = undefined;
});
});
@ -123,14 +119,14 @@ document.onkeydown = function (e) {
keysToCheck.push("ctrl+" + e.key);
}
const hotkey = hotkeys[keysToCheck.find(key => key in hotkeys) ?? ""];
if (hotkey && unref(hotkey.enabled)) {
if (hotkey != null && unref(hotkey.enabled)) {
e.preventDefault();
hotkey.onPress();
}
};
registerInfoComponent(
jsx(() => {
globalBus.on("setupVue", () =>
registerInfoComponent(() => {
const keys = Object.values(hotkeys).filter(hotkey => unref(hotkey?.enabled));
if (keys.length === 0) {
return "";
@ -142,7 +138,7 @@ registerInfoComponent(
<div style="column-count: 2">
{keys.map(hotkey => (
<div>
<Hotkey hotkey={hotkey as GenericHotkey} /> {unref(hotkey?.description)}
<Hotkey hotkey={hotkey as Hotkey} /> {unref(hotkey?.description)}
</div>
))}
</div>

86
src/features/infoboxes/Infobox.vue
View file

@ -1,15 +1,10 @@
<template>
<div
class="infobox"
v-if="isVisible(visibility)"
:style="[
{
:style="{
borderColor: unref(color),
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
:class="{ collapsed: unref(collapsed), stacked, ...unref(classes) }"
}"
:class="{ collapsed: unref(collapsed), stacked }"
>
<button
class="title"
@ -17,78 +12,37 @@
@click="collapsed.value = !unref(collapsed)"
>
<span class="toggle">▼</span>
<component :is="titleComponent" />
<Title />
</button>
<CollapseTransition>
<div v-if="!unref(collapsed)" class="body" :style="{ backgroundColor: unref(color) }">
<component :is="bodyComponent" :style="unref(bodyStyle)" />
<Body :style="unref(bodyStyle)" />
</div>
</CollapseTransition>
<Node :id="id" />
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
import Node from "components/Node.vue";
import themes from "data/themes";
import type { CoercableComponent } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import settings from "game/settings";
import { computeComponent, processedPropType } from "util/vue";
import type { PropType, Ref, StyleValue } from "vue";
import { computed, defineComponent, toRefs, unref } from "vue";
import { render } from "util/vue";
import { computed, unref } from "vue";
import { Infobox } from "./infobox";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
display: {
type: processedPropType<CoercableComponent>(Object, String, Function),
required: true
},
title: {
type: processedPropType<CoercableComponent>(Object, String, Function),
required: true
},
color: processedPropType<string>(String),
collapsed: {
type: Object as PropType<Ref<boolean>>,
required: true
},
style: processedPropType<StyleValue>(Object, String, Array),
titleStyle: processedPropType<StyleValue>(Object, String, Array),
bodyStyle: processedPropType<StyleValue>(Object, String, Array),
classes: processedPropType<Record<string, boolean>>(Object),
id: {
type: String,
required: true
}
},
components: {
Node,
CollapseTransition
},
setup(props) {
const { title, display } = toRefs(props);
const props = defineProps<{
color: Infobox["color"];
titleStyle: Infobox["titleStyle"];
bodyStyle: Infobox["bodyStyle"];
collapsed: Infobox["collapsed"];
display: Infobox["display"];
title: Infobox["title"];
}>();
const Title = () => render(props.title);
const Body = () => render(props.display);
const titleComponent = computeComponent(title);
const bodyComponent = computeComponent(display);
const stacked = computed(() => themes[settings.theme].mergeAdjacent);
return {
titleComponent,
bodyComponent,
stacked,
unref,
Visibility,
isVisible,
isHidden
};
}
});
</script>
<style scoped>

141
src/features/infoboxes/infobox.ts
View file

@ -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<Visibility | boolean>;
/** The background color of the Infobox. */
color?: Computable<string>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** CSS to apply to the title of the infobox. */
titleStyle?: Computable<StyleValue>;
/** CSS to apply to the body of the infobox. */
bodyStyle?: Computable<StyleValue>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** A header to appear at the top of the display. */
title: Computable<CoercableComponent>;
/** The main text that appears in the display. */
display: Computable<CoercableComponent>;
}
/**
* 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<boolean>;
/** 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<string, unknown>;
}
/** An object that represents a feature that displays information in a collapsible way. */
export type Infobox<T extends InfoboxOptions> = Replace<
T & BaseInfobox,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
color: GetComputableType<T["color"]>;
style: GetComputableType<T["style"]>;
titleStyle: GetComputableType<T["titleStyle"]>;
bodyStyle: GetComputableType<T["bodyStyle"]>;
classes: GetComputableType<T["classes"]>;
title: GetComputableType<T["title"]>;
display: GetComputableType<T["display"]>;
}
>;
/** A type that matches any valid {@link Infobox} object. */
export type GenericInfobox = Replace<
Infobox<InfoboxOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
/**
* Lazily creates an infobox with the given options.
* @param optionsFunc Infobox options.
*/
export function createInfobox<T extends InfoboxOptions>(
optionsFunc: OptionsFunc<T, BaseInfobox, GenericInfobox>
): Infobox<T> {
const collapsed = persistent<boolean>(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<T>;
});
}

86
src/features/infoboxes/infobox.tsx Normal file
View file

@ -0,0 +1,86 @@
import type { OptionsFunc, Replace } from "features/feature";
import Infobox from "features/infoboxes/Infobox.vue";
import type { Persistent } from "game/persistence";
import { persistent } from "game/persistence";
import { ProcessedRefOrGetter, processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { Renderable, VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
import { CSSProperties, 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. */
color?: MaybeRefOrGetter<string>;
/** CSS to apply to the title of the infobox. */
titleStyle?: MaybeRefOrGetter<CSSProperties>;
/** CSS to apply to the body of the infobox. */
bodyStyle?: MaybeRefOrGetter<CSSProperties>;
/** A header to appear at the top of the display. */
title: MaybeRefOrGetter<Renderable>;
/** The main text that appears in the display. */
display: MaybeRefOrGetter<Renderable>;
}
/**
* The properties that are added onto a processed {@link InfoboxOptions} to create an {@link Infobox}.
*/
export interface BaseInfobox extends VueFeature {
/** Whether or not this infobox is collapsed. */
collapsed: Persistent<boolean>;
/** A symbol that helps identify features of the same type. */
type: typeof InfoboxType;
}
/** An object that represents a feature that displays information in a collapsible way. */
export type Infobox = Replace<
Replace<InfoboxOptions, BaseInfobox>,
{
color: ProcessedRefOrGetter<InfoboxOptions["color"]>;
titleStyle: ProcessedRefOrGetter<InfoboxOptions["titleStyle"]>;
bodyStyle: ProcessedRefOrGetter<InfoboxOptions["bodyStyle"]>;
title: ProcessedRefOrGetter<InfoboxOptions["title"]>;
display: ProcessedRefOrGetter<InfoboxOptions["display"]>;
}
>;
/**
* Lazily creates an infobox with the given options.
* @param optionsFunc Infobox options.
*/
export function createInfobox<T extends InfoboxOptions>(
optionsFunc: OptionsFunc<T, BaseInfobox, Infobox>
) {
const collapsed = persistent<boolean>(false, false);
return createLazyProxy(feature => {
const options = optionsFunc.call(feature, feature as Infobox);
const { color, titleStyle, bodyStyle, title, display, ...props } = options;
const infobox = {
type: InfoboxType,
...(props as Omit<typeof props, keyof VueFeature | keyof InfoboxOptions>),
...vueFeatureMixin("infobox", options, () => (
<Infobox
color={infobox.color}
titleStyle={infobox.titleStyle}
bodyStyle={infobox.bodyStyle}
collapsed={infobox.collapsed}
title={infobox.title}
display={infobox.display}
/>
)),
collapsed,
color: processGetter(color),
titleStyle: processGetter(titleStyle),
bodyStyle: processGetter(bodyStyle),
title: processGetter(title),
display: processGetter(display)
} satisfies Infobox;
return infobox;
});
}

27
src/features/links/Link.vue
View file

@ -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<string, unknown>));
const linkProps = computed(() => kebabifyObject(props.link as unknown as Record<string, unknown>));
</script>

10
src/features/links/Links.vue
View file

@ -13,14 +13,13 @@
</template>
<script setup lang="ts">
import type { Link } from "features/links/links";
import type { FeatureNode } from "game/layers";
import { BoundsInjectionKey, NodesInjectionKey } from "game/layers";
import { computed, inject, onMounted, ref, toRef, watch } from "vue";
import { computed, inject, onMounted, ref, unref, watch } from "vue";
import LinkVue from "./Link.vue";
import { Links } from "./links";
const _props = defineProps<{ links?: Link[] }>();
const links = toRef(_props, "links");
const props = defineProps<{ links: Links["links"] }>();
const resizeListener = ref<Element | null>(null);
@ -36,7 +35,8 @@ onMounted(() => (boundingRect.value = resizeListener.value?.getBoundingClientRec
const validLinks = computed(() => {
const n = nodes.value;
return (
links.value?.filter(link => n[link.startNode.id]?.rect && n[link.endNode.id]?.rect) ?? []
unref(props.links)?.filter(link =>
n[link.startNode.id]?.rect && n[link.endNode.id]?.rect) ?? []
);
});
</script>

78
src/features/links/links.ts
View file

@ -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<Link[]>;
}
/**
* 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<string, unknown>;
}
/** An object that represents a list of links between nodes, which are the elements in the DOM for any renderable feature. */
export type Links<T extends LinksOptions> = Replace<
T & BaseLinks,
{
links: GetComputableType<T["links"]>;
}
>;
/** A type that matches any valid {@link Links} object. */
export type GenericLinks = Replace<
Links<LinksOptions>,
{
links: ProcessedComputable<Link[]>;
}
>;
/**
* Lazily creates links with the given options.
* @param optionsFunc Links options.
*/
export function createLinks<T extends LinksOptions>(
optionsFunc: OptionsFunc<T, BaseLinks, GenericLinks>
): Links<T> {
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<T>;
});
}

60
src/features/links/links.tsx Normal file
View file

@ -0,0 +1,60 @@
import type { OptionsFunc, Replace } from "features/feature";
import type { Position } from "game/layers";
import { processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { VueFeature, vueFeatureMixin } from "util/vue";
import type { MaybeRef, MaybeRefOrGetter, 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 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: MaybeRefOrGetter<Link[]>;
}
/**
* The properties that are added onto a processed {@link LinksOptions} to create an {@link Links}.
*/
export interface BaseLinks extends VueFeature {
/** A symbol that helps identify features of the same type. */
type: typeof LinksType;
}
/** 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<
Replace<LinksOptions, BaseLinks>,
{
links: MaybeRef<Link[]>;
}
>;
/**
* Lazily creates links with the given options.
* @param optionsFunc Links options.
*/
export function createLinks<T extends LinksOptions>(optionsFunc: OptionsFunc<T, BaseLinks, Links>) {
return createLazyProxy(feature => {
const options = optionsFunc?.call(feature, feature as Links);
const { links, ...props } = options;
const retLinks = {
type: LinksType,
...(props as Omit<typeof props, keyof VueFeature | keyof LinksOptions>),
...vueFeatureMixin("links", {}, () => <Links links={retLinks.links} />),
links: processGetter(links)
} satisfies Links;
return retLinks;
});
}

42
src/features/particles/Particles.vue
View file

@ -2,37 +2,22 @@
<div
ref="resizeListener"
class="resize-listener"
:style="unref(style)"
:class="unref(classes)"
/>
</template>
<script lang="tsx">
<script setup lang="tsx">
import { Application } from "@pixi/app";
import type { StyleValue } from "features/feature";
import { globalBus } from "game/events";
import "lib/pixi";
import { processedPropType } from "util/vue";
import type { PropType } from "vue";
import { defineComponent, nextTick, onBeforeUnmount, onMounted, shallowRef, unref } from "vue";
import { nextTick, onBeforeUnmount, onMounted, shallowRef, unref } from "vue";
import type { Particles } from "./particles";
const props = defineProps<{
onContainerResized: Particles["onContainerResized"];
onHotReload: Particles["onHotReload"];
onInit: (app: Application) => void;
}>();
// TODO get typing support on the Particles component
export default defineComponent({
props: {
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object),
onInit: {
type: Function as PropType<(app: Application) => void>,
required: true
},
id: {
type: String,
required: true
},
onContainerResized: Function as PropType<(rect: DOMRect) => void>,
onHotReload: Function as PropType<VoidFunction>
},
setup(props) {
const app = shallowRef<null | Application>(null);
const resizeObserver = new ResizeObserver(updateBounds);
@ -48,7 +33,7 @@ export default defineComponent({
backgroundAlpha: 0
});
resizeListener.value?.appendChild(app.value.view);
props.onInit?.(app.value as Application);
props.onInit(app.value);
}
updateBounds();
if (props.onHotReload) {
@ -72,13 +57,6 @@ export default defineComponent({
}
}
globalBus.on("fontsLoaded", updateBounds);
return {
unref,
resizeListener
};
}
});
</script>
<style scoped>

93
src/features/particles/particles.tsx
View file

@ -1,12 +1,12 @@
import { Application } from "@pixi/app";
import type { EmitterConfigV3 } from "@pixi/particle-emitter";
import { Emitter, upgradeConfig } from "@pixi/particle-emitter";
import type { GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
import { Component, GatherProps, getUniqueID } from "features/feature";
import ParticlesComponent from "features/particles/Particles.vue";
import type { Computable, GetComputableType } from "util/computed";
import type { OptionsFunc, Replace } from "features/feature";
import { ProcessedRefOrGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { Ref, shallowRef, unref } from "vue";
import { VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
import { Ref, shallowRef } from "vue";
import Particles from "./Particles.vue";
/** A symbol used to identify {@link Particles} features. */
export const ParticlesType = Symbol("Particles");
@ -14,11 +14,7 @@ export const ParticlesType = Symbol("Particles");
/**
* An object that configures {@link Particles}.
*/
export interface ParticlesOptions {
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
export interface ParticlesOptions extends VueFeatureOptions {
/** A function that is called when the particles canvas is resized. */
onContainerResized?: (boundingRect: DOMRect) => void;
/** A function that is called whenever the particles element is reloaded during development. For restarting particle effects. */
@ -28,9 +24,7 @@ export interface ParticlesOptions {
/**
* The properties that are added onto a processed {@link ParticlesOptions} to create an {@link Particles}.
*/
export interface BaseParticles {
/** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
export interface BaseParticles extends VueFeature {
/** The Pixi.JS Application powering this particles canvas. */
app: Ref<null | Application>;
/**
@ -41,52 +35,30 @@ export interface BaseParticles {
addEmitter: (config: EmitterConfigV3) => Promise<Emitter>;
/** A symbol that helps identify features of the same type. */
type: typeof ParticlesType;
/** 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<string, unknown>;
}
/**
* An object that represents a feature that display particle effects on the screen.
* The config should typically be gotten by designing the effect using the [online particle effect editor](https://pixijs.io/pixi-particles-editor/) and passing it into the {@link upgradeConfig} from @pixi/particle-emitter.
*/
export type Particles<T extends ParticlesOptions> = Replace<
T & BaseParticles,
export type Particles = Replace<
Replace<ParticlesOptions, BaseParticles>,
{
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
classes: ProcessedRefOrGetter<ParticlesOptions["classes"]>;
style: ProcessedRefOrGetter<ParticlesOptions["style"]>;
}
>;
/** A type that matches any valid {@link Particles} object. */
export type GenericParticles = Particles<ParticlesOptions>;
/**
* Lazily creates particles with the given options.
* @param optionsFunc Particles options.
*/
export function createParticles<T extends ParticlesOptions>(
optionsFunc?: OptionsFunc<T, BaseParticles, GenericParticles>
): Particles<T> {
optionsFunc?: OptionsFunc<T, BaseParticles, Particles>
) {
return createLazyProxy(feature => {
const particles =
optionsFunc?.call(feature, feature) ??
({} as ReturnType<NonNullable<typeof optionsFunc>>);
particles.id = getUniqueID("particles-");
particles.type = ParticlesType;
particles[Component] = ParticlesComponent as GenericComponent;
particles.app = shallowRef(null);
particles.addEmitter = (config: EmitterConfigV3): Promise<Emitter> => {
const genericParticles = particles as GenericParticles;
if (genericParticles.app.value) {
return Promise.resolve(new Emitter(genericParticles.app.value.stage, config));
}
return new Promise<Emitter>(resolve => {
emittersToAdd.push({ resolve, config });
});
};
const options = optionsFunc?.call(feature, feature as Particles) ?? ({} as T);
const { onContainerResized, onHotReload, ...props } = options;
let emittersToAdd: {
resolve: (value: Emitter | PromiseLike<Emitter>) => void;
@ -94,27 +66,34 @@ export function createParticles<T extends ParticlesOptions>(
}[] = [];
function onInit(app: Application) {
const genericParticles = particles as GenericParticles;
genericParticles.app.value = app;
emittersToAdd.forEach(({ resolve, config }) => resolve(new Emitter(app.stage, config)));
emittersToAdd = [];
}
particles.onContainerResized = particles.onContainerResized?.bind(particles);
particles[GatherProps] = function (this: GenericParticles) {
const { id, style, classes, onContainerResized, onHotReload } = this;
return {
id,
style: unref(style),
classes,
const particles = {
type: ParticlesType,
...(props as Omit<typeof props, keyof VueFeature | keyof ParticlesOptions>),
...vueFeatureMixin("particles", options, () => (
<Particles
onInit={onInit}
onContainerResized={particles.onContainerResized}
onHotReload={particles.onHotReload}
/>
)),
app: shallowRef<null | Application>(null),
onContainerResized,
onHotReload,
onInit
};
};
addEmitter: (config: EmitterConfigV3): Promise<Emitter> => {
if (particles.app.value != null) {
return Promise.resolve(new Emitter(particles.app.value.stage, config));
}
return new Promise<Emitter>(resolve => {
emittersToAdd.push({ resolve, config });
});
}
} satisfies Particles;
return particles as unknown as Particles<T>;
return particles;
});
}

299
src/features/repeatable.tsx
View file

@ -1,299 +0,0 @@
import { isArray } from "@vue/shared";
import ClickableComponent from "features/clickables/Clickable.vue";
import type {
CoercableComponent,
GenericComponent,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import { Component, GatherProps, Visibility, getUniqueID, jsx, setDefault } from "features/feature";
import { DefaultValue, Persistent, persistent } from "game/persistence";
import {
Requirements,
createVisibilityRequirement,
displayRequirements,
maxRequirementsMet,
payRequirements,
requirementsMet
} from "game/requirements";
import type { DecimalSource } from "util/bignum";
import Decimal, { formatWhole } from "util/bignum";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
} from "util/computed";
import { processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { coerceComponent, isCoercableComponent } from "util/vue";
import type { Ref } from "vue";
import { computed, unref } from "vue";
import { GenericDecorator } from "./decorators/common";
/** A symbol used to identify {@link Repeatable} features. */
export const RepeatableType = Symbol("Repeatable");
/** A type that can be used to customize the {@link Repeatable} display. */
export type RepeatableDisplay =
| 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 this repeatable, based off its amount. */
effectDisplay?: CoercableComponent;
/** Whether or not to show the current amount of this repeatable at the bottom of the display. */
showAmount?: boolean;
};
/** An object that configures a {@link Repeatable}. */
export interface RepeatableOptions {
/** Whether this repeatable should be visible. */
visibility?: Computable<Visibility | boolean>;
/** The requirement(s) to increase this repeatable. */
requirements: Requirements;
/** The maximum amount obtainable for this repeatable. */
limit?: Computable<DecimalSource>;
/** The initial amount this repeatable has on a new save / after reset. */
initialAmount?: DecimalSource;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** Shows a marker on the corner of the feature. */
mark?: Computable<boolean | string>;
/** Toggles a smaller design for the feature. */
small?: Computable<boolean>;
/** The display to use for this repeatable. */
display?: Computable<RepeatableDisplay>;
}
/**
* The properties that are added onto a processed {@link RepeatableOptions} to create a {@link Repeatable}.
*/
export interface BaseRepeatable {
/** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
/** The current amount this repeatable has. */
amount: Persistent<DecimalSource>;
/** Whether or not this repeatable's amount is at it's limit. */
maxed: Ref<boolean>;
/** Whether or not this repeatable can be clicked. */
canClick: ProcessedComputable<boolean>;
/**
* How much amount can be increased by, or 1 if unclickable.
**/
amountToIncrease: Ref<DecimalSource>;
/** A function that gets called when this repeatable is clicked. */
onClick: (event?: MouseEvent | TouchEvent) => void;
/** A symbol that helps identify features of the same type. */
type: typeof RepeatableType;
/** 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<string, unknown>;
}
/** An object that represents a feature with multiple "levels" with scaling requirements. */
export type Repeatable<T extends RepeatableOptions> = Replace<
T & BaseRepeatable,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
requirements: GetComputableType<T["requirements"]>;
limit: GetComputableTypeWithDefault<T["limit"], Decimal>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
mark: GetComputableType<T["mark"]>;
small: GetComputableType<T["small"]>;
display: Ref<CoercableComponent>;
}
>;
/** A type that matches any valid {@link Repeatable} object. */
export type GenericRepeatable = Replace<
Repeatable<RepeatableOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
limit: ProcessedComputable<DecimalSource>;
}
>;
/**
* Lazily creates a repeatable with the given options.
* @param optionsFunc Repeatable options.
*/
export function createRepeatable<T extends RepeatableOptions>(
optionsFunc: OptionsFunc<T, BaseRepeatable, GenericRepeatable>,
...decorators: GenericDecorator[]
): Repeatable<T> {
const amount = persistent<DecimalSource>(0);
const decoratedData = decorators.reduce(
(current, next) => Object.assign(current, next.getPersistentData?.()),
{}
);
return createLazyProxy<Repeatable<T>, Repeatable<T>>(feature => {
const repeatable = optionsFunc.call(feature, feature);
repeatable.id = getUniqueID("repeatable-");
repeatable.type = RepeatableType;
repeatable[Component] = ClickableComponent as GenericComponent;
for (const decorator of decorators) {
decorator.preConstruct?.(repeatable);
}
repeatable.amount = amount;
repeatable.amount[DefaultValue] = repeatable.initialAmount ?? 0;
Object.assign(repeatable, decoratedData);
const limitRequirement = {
requirementMet: computed(() =>
Decimal.sub(
unref((repeatable as GenericRepeatable).limit),
(repeatable as GenericRepeatable).amount.value
)
),
requiresPay: false,
visibility: Visibility.None,
canMaximize: true
} as const;
const visibilityRequirement = createVisibilityRequirement(repeatable as GenericRepeatable);
if (isArray(repeatable.requirements)) {
repeatable.requirements.unshift(visibilityRequirement);
repeatable.requirements.push(limitRequirement);
} else {
repeatable.requirements = [
visibilityRequirement,
repeatable.requirements,
limitRequirement
];
}
repeatable.maxed = computed(() =>
Decimal.gte(
(repeatable as GenericRepeatable).amount.value,
unref((repeatable as GenericRepeatable).limit)
)
);
processComputable(repeatable as T, "classes");
const classes = repeatable.classes as
| ProcessedComputable<Record<string, boolean>>
| undefined;
repeatable.classes = computed(() => {
const currClasses = unref(classes) || {};
if ((repeatable as GenericRepeatable).maxed.value) {
currClasses.bought = true;
}
return currClasses;
});
repeatable.amountToIncrease = computed(() =>
Decimal.clampMin(maxRequirementsMet(repeatable.requirements), 1)
);
repeatable.canClick = computed(() => requirementsMet(repeatable.requirements));
const onClick = repeatable.onClick;
repeatable.onClick = function (this: GenericRepeatable, event?: MouseEvent | TouchEvent) {
const genericRepeatable = repeatable as GenericRepeatable;
if (!unref(genericRepeatable.canClick)) {
return;
}
const amountToIncrease = unref(repeatable.amountToIncrease) ?? 1;
payRequirements(repeatable.requirements, amountToIncrease);
genericRepeatable.amount.value = Decimal.add(
genericRepeatable.amount.value,
amountToIncrease
);
onClick?.(event);
};
processComputable(repeatable as T, "display");
const display = repeatable.display;
repeatable.display = jsx(() => {
// TODO once processComputable types correctly, remove this "as X"
const currDisplay = unref(display) as RepeatableDisplay;
if (isCoercableComponent(currDisplay)) {
const CurrDisplay = coerceComponent(currDisplay);
return <CurrDisplay />;
}
if (currDisplay != null) {
const genericRepeatable = repeatable as GenericRepeatable;
const Title = coerceComponent(currDisplay.title ?? "", "h3");
const Description = coerceComponent(currDisplay.description ?? "");
const EffectDisplay = coerceComponent(currDisplay.effectDisplay ?? "");
return (
<span>
{currDisplay.title == null ? null : (
<div>
<Title />
</div>
)}
{currDisplay.description == null ? null : <Description />}
{currDisplay.showAmount === false ? null : (
<div>
<br />
<>Amount: {formatWhole(genericRepeatable.amount.value)}</>
{Decimal.isFinite(unref(genericRepeatable.limit)) ? (
<> / {formatWhole(unref(genericRepeatable.limit))}</>
) : undefined}
</div>
)}
{currDisplay.effectDisplay == null ? null : (
<div>
<br />
Currently: <EffectDisplay />
</div>
)}
{genericRepeatable.maxed.value ? null : (
<div>
<br />
{displayRequirements(
genericRepeatable.requirements,
unref(repeatable.amountToIncrease)
)}
</div>
)}
</span>
);
}
return "";
});
processComputable(repeatable as T, "visibility");
setDefault(repeatable, "visibility", Visibility.Visible);
processComputable(repeatable as T, "limit");
setDefault(repeatable, "limit", Decimal.dInf);
processComputable(repeatable as T, "style");
processComputable(repeatable as T, "mark");
processComputable(repeatable as T, "small");
for (const decorator of decorators) {
decorator.postConstruct?.(repeatable);
}
const decoratedProps = decorators.reduce(
(current, next) => Object.assign(current, next.getGatheredProps?.(repeatable)),
{}
);
repeatable[GatherProps] = function (this: GenericRepeatable) {
const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
this;
return {
display,
visibility,
style: unref(style),
classes,
onClick,
canClick,
small,
mark,
id,
...decoratedProps
};
};
return repeatable as unknown as Repeatable<T>;
});
}

59
src/features/reset.ts
View file

@ -1,14 +1,17 @@
import type { OptionsFunc, Replace } from "features/feature";
import { getUniqueID } from "features/feature";
import { globalBus } from "game/events";
import Formula from "game/formulas/formulas";
import type { BaseLayer } from "game/layers";
import { NonPersistent, Persistent, SkipPersistence } from "game/persistence";
import { DefaultValue, persistent } from "game/persistence";
import {
DefaultValue,
NonPersistent,
Persistent,
persistent,
SkipPersistence
} from "game/persistence";
import type { Unsubscribe } from "nanoevents";
import Decimal from "util/bignum";
import type { Computable, GetComputableType } from "util/computed";
import { processComputable } from "util/computed";
import { processGetter, type MaybeRefOrGetter, type UnwrapRef } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { isRef, unref } from "vue";
@ -20,7 +23,7 @@ export const ResetType = Symbol("Reset");
*/
export interface ResetOptions {
/** List of things to reset. Can include objects which will be recursed over for persistent values. */
thingsToReset: Computable<unknown[]>;
thingsToReset: MaybeRefOrGetter<unknown[]>;
/** A function that is called when the reset is performed. */
onReset?: VoidFunction;
}
@ -29,8 +32,6 @@ export interface ResetOptions {
* The properties that are added onto a processed {@link ResetOptions} to create an {@link Reset}.
*/
export interface BaseReset {
/** An auto-generated ID for identifying which reset is being performed. Will not persist between refreshes or updates. */
id: string;
/** Trigger the reset. */
reset: VoidFunction;
/** A symbol that helps identify features of the same type. */
@ -38,29 +39,28 @@ export interface BaseReset {
}
/** An object that represents a reset mechanic, which resets progress back to its initial state. */
export type Reset<T extends ResetOptions> = Replace<
T & BaseReset,
export type Reset = Replace<
Replace<ResetOptions, BaseReset>,
{
thingsToReset: GetComputableType<T["thingsToReset"]>;
thingsToReset: UnwrapRef<ResetOptions["thingsToReset"]>;
}
>;
/** A type that matches any valid {@link Reset} object. */
export type GenericReset = Reset<ResetOptions>;
/**
* Lazily creates a reset with the given options.
* @param optionsFunc Reset options.
*/
export function createReset<T extends ResetOptions>(
optionsFunc: OptionsFunc<T, BaseReset, GenericReset>
): Reset<T> {
export function createReset<T extends ResetOptions>(optionsFunc: OptionsFunc<T, BaseReset, Reset>) {
return createLazyProxy(feature => {
const reset = optionsFunc.call(feature, feature);
reset.id = getUniqueID("reset-");
reset.type = ResetType;
const options = optionsFunc.call(feature, feature as Reset);
const { thingsToReset, onReset, ...props } = options;
reset.reset = function () {
const reset = {
type: ResetType,
...(props as Omit<typeof props, keyof ResetOptions>),
onReset,
thingsToReset: processGetter(thingsToReset),
reset: function () {
const handleObject = (obj: unknown) => {
if (
obj != null &&
@ -81,14 +81,13 @@ export function createReset<T extends ResetOptions>(
}
}
};
unref((reset as GenericReset).thingsToReset).forEach(handleObject);
globalBus.emit("reset", reset as GenericReset);
reset.onReset?.();
};
unref(reset.thingsToReset).forEach(handleObject);
globalBus.emit("reset", reset);
onReset?.();
}
} satisfies Reset;
processComputable(reset as T, "thingsToReset");
return reset as unknown as Reset<T>;
return reset;
});
}
@ -98,7 +97,7 @@ const listeners: Record<string, Unsubscribe | undefined> = {};
* @param layer The layer the reset is attached to
* @param reset The reset mechanic to track the time since
*/
export function trackResetTime(layer: BaseLayer, reset: GenericReset): Persistent<Decimal> {
export function trackResetTime(layer: BaseLayer, reset: Reset): Persistent<Decimal> {
const resetTime = persistent<Decimal>(new Decimal(0));
globalBus.on("addLayer", layerBeingAdded => {
if (layer.id === layerBeingAdded.id) {
@ -123,6 +122,6 @@ globalBus.on("removeLayer", layer => {
declare module "game/events" {
interface GlobalEvents {
reset: (reset: GenericReset) => void;
reset: (reset: Reset) => void;
}
}

19
src/features/resources/MainDisplay.vue
View file

@ -10,8 +10,8 @@
<ResourceVue :resource="resource" :color="color || 'white'" />
{{ resource.displayName
}}<!-- remove whitespace -->
<span v-if="effectComponent"
>, <component :is="effectComponent" ref="effectRef"
<span v-if="effectDisplay"
>, <Effect ref="effectRef"
/></span>
</div>
</div>
@ -20,28 +20,23 @@
<script setup lang="ts">
import Sticky from "components/layout/Sticky.vue";
import type { CoercableComponent } from "features/feature";
import type { Resource } from "features/resources/resource";
import ResourceVue from "features/resources/Resource.vue";
import Decimal from "util/bignum";
import { computeOptionalComponent } from "util/vue";
import { ComponentPublicInstance, ref, Ref, StyleValue } from "vue";
import { computed, toRefs } from "vue";
import { Renderable } from "util/vue";
import { ComponentPublicInstance, computed, MaybeRefOrGetter, ref, StyleValue, toValue } from "vue";
const _props = defineProps<{
const props = defineProps<{
resource: Resource;
color?: string;
classes?: Record<string, boolean>;
style?: StyleValue;
effectDisplay?: CoercableComponent;
effectDisplay?: MaybeRefOrGetter<Renderable>;
}>();
const props = toRefs(_props);
const effectRef = ref<ComponentPublicInstance | null>(null);
const effectComponent = computeOptionalComponent(
props.effectDisplay as Ref<CoercableComponent | undefined>
);
const Effect = () => toValue(props.effectDisplay);
const showPrefix = computed(() => {
return Decimal.lt(props.resource.value, "1e1000");

5
src/features/resources/resource.ts
View file

@ -3,9 +3,8 @@ import type { Persistent, State } from "game/persistence";
import { NonPersistent, persistent } from "game/persistence";
import type { DecimalSource } from "util/bignum";
import Decimal, { format, formatWhole } from "util/bignum";
import type { ProcessedComputable } from "util/computed";
import { loadingSave } from "util/save";
import type { ComputedRef, Ref } from "vue";
import type { ComputedRef, MaybeRef, Ref } from "vue";
import { computed, isRef, ref, unref, watch } from "vue";
/** An object that represents a named and quantifiable resource in the game. */
@ -159,7 +158,7 @@ export function displayResource(resource: Resource, overrideAmount?: DecimalSour
}
/** Utility for unwrapping a resource that may or may not be inside a ref. */
export function unwrapResource(resource: ProcessedComputable<Resource>): Resource {
export function unwrapResource(resource: MaybeRef<Resource>): Resource {
if ("displayName" in resource) {
return resource;
}

13
src/features/tabs/Tab.vue
View file

@ -1,13 +0,0 @@
<template>
<component :is="component" />
</template>
<script setup lang="ts">
import type { CoercableComponent } from "features/feature";
import { computeComponent } from "util/vue";
import { toRefs } from "vue";
const _props = defineProps<{ display: CoercableComponent }>();
const { display } = toRefs(_props);
const component = computeComponent(display);
</script>

75
src/features/tabs/TabButton.vue
View file

@ -1,59 +1,34 @@
<template>
<button
v-if="isVisible(visibility)"
@click="selectTab"
class="tabButton"
:style="[
{
visibility: isHidden(visibility) ? 'hidden' : undefined
},
glowColorStyle,
unref(style) ?? {}
]"
:class="{
active,
...unref(classes)
}"
>
<component :is="component" />
<button @click="selectTab" class="tabButton" :style="glowColorStyle" :class="{ active }">
<Component />
</button>
</template>
<script lang="ts">
import type { CoercableComponent, StyleValue } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
<script setup lang="ts">
import { getNotifyStyle } from "game/notifications";
import { computeComponent, processedPropType, unwrapRef } from "util/vue";
import { computed, defineComponent, toRefs, unref } from "vue";
import { render } from "util/vue";
import { computed, unref } from "vue";
import { TabButton } from "./tabFamily";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
display: {
type: processedPropType<CoercableComponent>(Object, String, Function),
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object),
glowColor: processedPropType<string>(String),
active: Boolean,
floating: Boolean
},
emits: ["selectTab"],
setup(props, { emit }) {
const { display, glowColor, floating } = toRefs(props);
const props = defineProps<{
display: TabButton["display"];
glowColor: TabButton["glowColor"];
active?: boolean;
floating?: boolean;
}>();
const component = computeComponent(display);
const emit = defineEmits<{
selectTab: [];
}>();
const Component = () => render(props.display);
const glowColorStyle = computed(() => {
const color = unwrapRef(glowColor);
const color = unref(props.glowColor);
if (color == null || color === "") {
return {};
}
if (unref(floating)) {
if (props.floating) {
return getNotifyStyle(color);
}
return { boxShadow: `0px 9px 5px -6px ${color}` };
@ -62,18 +37,6 @@ export default defineComponent({
function selectTab() {
emit("selectTab");
}
return {
selectTab,
component,
glowColorStyle,
unref,
Visibility,
isVisible,
isHidden
};
}
});
</script>
<style scoped>

123
src/features/tabs/TabFamily.vue
View file

@ -1,16 +1,5 @@
<template>
<div
v-if="isVisible(visibility)"
class="tab-family-container"
:class="{ ...unref(classes), ...tabClasses }"
:style="[
{
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? [],
tabStyle ?? []
]"
>
<div class="tab-family-container" :class="tabClasses" :style="tabStyle">
<Sticky
class="tab-buttons-container"
:class="unref(buttonContainerClasses)"
@ -23,110 +12,58 @@
:floating="floating"
:key="id"
:active="unref(button.tab) === unref(activeTab)"
v-bind="gatherButtonProps(button)"
:display="button.display"
:glowColor="button.glowColor"
/>
</div>
</Sticky>
<template v-if="unref(activeTab)">
<component :is="unref(component)" />
</template>
<Component v-if="unref(activeTab) != null" />
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import Sticky from "components/layout/Sticky.vue";
import themes from "data/themes";
import type { CoercableComponent, StyleValue } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import type { GenericTab } from "features/tabs/tab";
import TabButton from "features/tabs/TabButton.vue";
import type { GenericTabButton } from "features/tabs/tabFamily";
import settings from "game/settings";
import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
import type { Component, PropType, Ref } from "vue";
import { computed, defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
import { render } from "util/vue";
import type { Component } from "vue";
import { computed, unref } from "vue";
import { TabFamily } from "./tabFamily";
import { TabType } from "./tab";
import { isType } from "features/feature";
export default defineComponent({
props: {
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
activeTab: {
type: processedPropType<GenericTab | CoercableComponent | null>(Object),
required: true
},
selected: {
type: Object as PropType<Ref<string>>,
required: true
},
tabs: {
type: processedPropType<Record<string, GenericTabButton>>(Object),
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object),
buttonContainerStyle: processedPropType<StyleValue>(String, Object, Array),
buttonContainerClasses: processedPropType<Record<string, boolean>>(Object)
},
components: {
Sticky,
TabButton
},
setup(props) {
const { activeTab } = toRefs(props);
const props = defineProps<{
activeTab: TabFamily["activeTab"];
selected: TabFamily["selected"];
tabs: TabFamily["tabs"];
buttonContainerClasses: TabFamily["buttonContainerClasses"];
buttonContainerStyle: TabFamily["buttonContainerStyle"];
}>();
const floating = computed(() => {
return themes[settings.theme].floatingTabs;
});
const component = shallowRef<Component | string>("");
watchEffect(() => {
const currActiveTab = unwrapRef(activeTab);
if (currActiveTab == null) {
component.value = "";
const Component = () => {
const activeTab = unref(props.activeTab);
if (activeTab == null) {
return;
}
if (isCoercableComponent(currActiveTab)) {
component.value = coerceComponent(currActiveTab);
return;
}
component.value = coerceComponent(unref(currActiveTab.display));
});
return render(activeTab);
};
const tabClasses = computed(() => {
const currActiveTab = unwrapRef(activeTab);
const tabClasses =
isCoercableComponent(currActiveTab) || !currActiveTab
? undefined
: unref(currActiveTab.classes);
return tabClasses;
const activeTab = unref(props.activeTab);
if (isType(activeTab, TabType)) {
return unref(activeTab.classes);
}
});
const tabStyle = computed(() => {
const currActiveTab = unwrapRef(activeTab);
return isCoercableComponent(currActiveTab) || !currActiveTab
? undefined
: unref(currActiveTab.style);
});
function gatherButtonProps(button: GenericTabButton) {
const { display, style, classes, glowColor, visibility } = button;
return { display, style: unref(style), classes, glowColor, visibility };
}
return {
floating,
tabClasses,
tabStyle,
Visibility,
component,
gatherButtonProps,
unref,
isVisible,
isHidden
};
const activeTab = unref(props.activeTab);
if (isType(activeTab, TabType)) {
return unref(activeTab.style);
}
});
</script>

64
src/features/tabs/tab.ts
View file

@ -1,14 +1,9 @@
import type {
CoercableComponent,
GenericComponent,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import { Component, GatherProps, getUniqueID } from "features/feature";
import TabComponent from "features/tabs/Tab.vue";
import type { Computable, GetComputableType } from "util/computed";
import type { OptionsFunc, Replace } from "features/feature";
import { ProcessedRefOrGetter, processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { render, Renderable, VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
import { MaybeRefOrGetter } from "vue";
import { JSX } from "vue/jsx-runtime";
/** A symbol used to identify {@link Tab} features. */
export const TabType = Symbol("Tab");
@ -16,63 +11,46 @@ export const TabType = Symbol("Tab");
/**
* An object that configures a {@link Tab}.
*/
export interface TabOptions {
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
export interface TabOptions extends VueFeatureOptions {
/** The display to use for this tab. */
display: Computable<CoercableComponent>;
display: MaybeRefOrGetter<Renderable>;
}
/**
* The properties that are added onto a processed {@link TabOptions} to create an {@link Tab}.
*/
export interface BaseTab {
/** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
export interface BaseTab extends VueFeature {
/** A symbol that helps identify features of the same type. */
type: typeof TabType;
/** 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<string, unknown>;
}
/**
* An object representing a tab of content in a tabbed interface.
* @see {@link TabFamily}
*/
export type Tab<T extends TabOptions> = Replace<
T & BaseTab,
export type Tab = Replace<
Replace<TabOptions, BaseTab>,
{
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
display: GetComputableType<T["display"]>;
display: ProcessedRefOrGetter<TabOptions["display"]>;
}
>;
/** A type that matches any valid {@link Tab} object. */
export type GenericTab = Tab<TabOptions>;
/**
* Lazily creates a tab with the given options.
* @param optionsFunc Tab options.
*/
export function createTab<T extends TabOptions>(
optionsFunc: OptionsFunc<T, BaseTab, GenericTab>
): Tab<T> {
export function createTab<T extends TabOptions>(optionsFunc: OptionsFunc<T, BaseTab, Tab>) {
return createLazyProxy(feature => {
const tab = optionsFunc.call(feature, feature);
tab.id = getUniqueID("tab-");
tab.type = TabType;
tab[Component] = TabComponent as GenericComponent;
const options = optionsFunc?.call(feature, feature as Tab) ?? ({} as T);
const { display, ...props } = options;
tab[GatherProps] = function (this: GenericTab) {
const { display } = this;
return { display };
};
const tab = {
type: TabType,
...(props as Omit<typeof props, keyof VueFeature | keyof TabOptions>),
...vueFeatureMixin("tab", options, (): JSX.Element => render(tab.display)),
display: processGetter(display)
} satisfies Tab;
return tab as unknown as Tab<T>;
return tab;
});
}

232
src/features/tabs/tabFamily.ts
View file

@ -1,232 +0,0 @@
import type {
CoercableComponent,
GenericComponent,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import {
Component,
GatherProps,
getUniqueID,
isVisible,
setDefault,
Visibility
} from "features/feature";
import TabButtonComponent from "features/tabs/TabButton.vue";
import TabFamilyComponent from "features/tabs/TabFamily.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 type { Ref } from "vue";
import { computed, unref } from "vue";
import type { GenericTab } from "./tab";
/** A symbol used to identify {@link TabButton} features. */
export const TabButtonType = Symbol("TabButton");
/** A symbol used to identify {@link TabFamily} features. */
export const TabFamilyType = Symbol("TabFamily");
/**
* An object that configures a {@link TabButton}.
*/
export interface TabButtonOptions {
/** Whether this tab button should be visible. */
visibility?: Computable<Visibility | boolean>;
/** The tab to display when this button is clicked. */
tab: Computable<GenericTab | CoercableComponent>;
/** The label on this button. */
display: Computable<CoercableComponent>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** The color of the glow effect to display when this button is active. */
glowColor?: Computable<string>;
}
/**
* The properties that are added onto a processed {@link TabButtonOptions} to create an {@link TabButton}.
*/
export interface BaseTabButton {
/** A symbol that helps identify features of the same type. */
type: typeof TabButtonType;
/** The Vue component used to render this feature. */
[Component]: GenericComponent;
}
/**
* An object that represents a button that can be clicked to change tabs in a tabbed interface.
* @see {@link TabFamily}
*/
export type TabButton<T extends TabButtonOptions> = Replace<
T & BaseTabButton,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
tab: GetComputableType<T["tab"]>;
display: GetComputableType<T["display"]>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
glowColor: GetComputableType<T["glowColor"]>;
}
>;
/** A type that matches any valid {@link TabButton} object. */
export type GenericTabButton = Replace<
TabButton<TabButtonOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
/**
* An object that configures a {@link TabFamily}.
*/
export interface TabFamilyOptions {
/** Whether this tab button should be visible. */
visibility?: Computable<Visibility | boolean>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** A dictionary of CSS classes to apply to the list of buttons for changing tabs. */
buttonContainerClasses?: Computable<Record<string, boolean>>;
/** CSS to apply to the list of buttons for changing tabs. */
buttonContainerStyle?: Computable<StyleValue>;
}
/**
* The properties that are added onto a processed {@link TabFamilyOptions} to create an {@link TabFamily}.
*/
export interface BaseTabFamily {
/** An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates. */
id: string;
/** All the tabs within this family. */
tabs: Record<string, TabButtonOptions>;
/** The currently active tab, if any. */
activeTab: Ref<GenericTab | CoercableComponent | null>;
/** The name of the tab that is currently active. */
selected: Persistent<string>;
/** A symbol that helps identify features of the same type. */
type: typeof TabFamilyType;
/** 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<string, unknown>;
}
/**
* An object that represents a tabbed interface.
* @see {@link TabFamily}
*/
export type TabFamily<T extends TabFamilyOptions> = Replace<
T & BaseTabFamily,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
tabs: Record<string, GenericTabButton>;
}
>;
/** A type that matches any valid {@link TabFamily} object. */
export type GenericTabFamily = Replace<
TabFamily<TabFamilyOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
/**
* Lazily creates a tab family with the given options.
* @param optionsFunc Tab family options.
*/
export function createTabFamily<T extends TabFamilyOptions>(
tabs: Record<string, () => TabButtonOptions>,
optionsFunc?: OptionsFunc<T, BaseTabFamily, GenericTabFamily>
): TabFamily<T> {
if (Object.keys(tabs).length === 0) {
console.error("Cannot create tab family with 0 tabs");
}
const selected = persistent(Object.keys(tabs)[0], false);
return createLazyProxy(feature => {
const tabFamily =
optionsFunc?.call(feature, feature) ??
({} as ReturnType<NonNullable<typeof optionsFunc>>);
tabFamily.id = getUniqueID("tabFamily-");
tabFamily.type = TabFamilyType;
tabFamily[Component] = TabFamilyComponent as GenericComponent;
tabFamily.tabs = Object.keys(tabs).reduce<Record<string, GenericTabButton>>(
(parsedTabs, tab) => {
const tabButton: TabButtonOptions & Partial<BaseTabButton> = tabs[tab]();
tabButton.type = TabButtonType;
tabButton[Component] = TabButtonComponent as GenericComponent;
processComputable(tabButton as TabButtonOptions, "visibility");
setDefault(tabButton, "visibility", Visibility.Visible);
processComputable(tabButton as TabButtonOptions, "tab");
processComputable(tabButton as TabButtonOptions, "display");
processComputable(tabButton as TabButtonOptions, "classes");
processComputable(tabButton as TabButtonOptions, "style");
processComputable(tabButton as TabButtonOptions, "glowColor");
parsedTabs[tab] = tabButton as GenericTabButton;
return parsedTabs;
},
{}
);
tabFamily.selected = selected;
tabFamily.activeTab = computed(() => {
const tabs = unref(processedTabFamily.tabs);
if (selected.value in tabs && isVisible(tabs[selected.value].visibility)) {
return unref(tabs[selected.value].tab);
}
const firstTab = Object.values(tabs).find(tab => isVisible(tab.visibility));
if (firstTab) {
return unref(firstTab.tab);
}
return null;
});
processComputable(tabFamily as T, "visibility");
setDefault(tabFamily, "visibility", Visibility.Visible);
processComputable(tabFamily as T, "classes");
processComputable(tabFamily as T, "style");
processComputable(tabFamily as T, "buttonContainerClasses");
processComputable(tabFamily as T, "buttonContainerStyle");
tabFamily[GatherProps] = function (this: GenericTabFamily) {
const {
visibility,
activeTab,
selected,
tabs,
style,
classes,
buttonContainerClasses,
buttonContainerStyle
} = this;
return {
visibility,
activeTab,
selected,
tabs,
style: unref(style),
classes,
buttonContainerClasses,
buttonContainerStyle
};
};
// This is necessary because board.types is different from T and TabFamily
const processedTabFamily = tabFamily as unknown as TabFamily<T>;
return processedTabFamily;
});
}

154
src/features/tabs/tabFamily.tsx Normal file
View file

@ -0,0 +1,154 @@
import type { OptionsFunc, Replace } from "features/feature";
import { isVisible } from "features/feature";
import { Tab } from "features/tabs/tab";
import TabButton from "features/tabs/TabButton.vue";
import TabFamily from "features/tabs/TabFamily.vue";
import type { Persistent } from "game/persistence";
import { persistent } from "game/persistence";
import { ProcessedRefOrGetter, processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { Renderable, VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
import type { CSSProperties, MaybeRef, MaybeRefOrGetter, Ref } from "vue";
import { computed, unref } from "vue";
/** A symbol used to identify {@link TabButton} features. */
export const TabButtonType = Symbol("TabButton");
/** A symbol used to identify {@link TabFamily} features. */
export const TabFamilyType = Symbol("TabFamily");
/**
* An object that configures a {@link TabButton}.
*/
export interface TabButtonOptions extends VueFeatureOptions {
/** The tab to display when this button is clicked. */
tab: Tab | MaybeRefOrGetter<Renderable>;
/** The label on this button. */
display: MaybeRefOrGetter<Renderable>;
/** The color of the glow effect to display when this button is active. */
glowColor?: MaybeRefOrGetter<string>;
}
/**
* The properties that are added onto a processed {@link TabButtonOptions} to create an {@link TabButton}.
*/
export interface BaseTabButton extends VueFeature {
/** A symbol that helps identify features of the same type. */
type: typeof TabButtonType;
}
/**
* An object that represents a button that can be clicked to change tabs in a tabbed interface.
* @see {@link TabFamily}
*/
export type TabButton = Replace<
Replace<TabButtonOptions, BaseTabButton>,
{
tab: Tab | MaybeRef<Renderable>;
display: ProcessedRefOrGetter<TabButtonOptions["display"]>;
glowColor: ProcessedRefOrGetter<TabButtonOptions["glowColor"]>;
}
>;
/**
* An object that configures a {@link TabFamily}.
*/
export interface TabFamilyOptions extends VueFeatureOptions {
/** A dictionary of CSS classes to apply to the list of buttons for changing tabs. */
buttonContainerClasses?: MaybeRefOrGetter<Record<string, boolean>>;
/** CSS to apply to the list of buttons for changing tabs. */
buttonContainerStyle?: MaybeRefOrGetter<CSSProperties>;
}
/**
* The properties that are added onto a processed {@link TabFamilyOptions} to create an {@link TabFamily}.
*/
export interface BaseTabFamily extends VueFeature {
/** All the tabs within this family. */
tabs: Record<string, TabButtonOptions>;
/** The currently active tab, if any. */
activeTab: Ref<Tab | MaybeRef<Renderable> | null>;
/** The name of the tab that is currently active. */
selected: Persistent<string>;
/** A symbol that helps identify features of the same type. */
type: typeof TabFamilyType;
}
/**
* An object that represents a tabbed interface.
* @see {@link TabFamily}
*/
export type TabFamily = Replace<
Replace<TabFamilyOptions, BaseTabFamily>,
{
tabs: Record<string, TabButton>;
}
>;
/**
* Lazily creates a tab family with the given options.
* @param optionsFunc Tab family options.
*/
export function createTabFamily<T extends TabFamilyOptions>(
tabs: Record<string, () => TabButtonOptions>,
optionsFunc?: OptionsFunc<T, BaseTabFamily, TabFamily>
) {
if (Object.keys(tabs).length === 0) {
console.error("Cannot create tab family with 0 tabs");
}
const selected = persistent(Object.keys(tabs)[0], false);
return createLazyProxy(feature => {
const options = optionsFunc?.call(feature, feature as TabFamily) ?? ({} as T);
const { buttonContainerClasses, buttonContainerStyle, ...props } = options;
const tabFamily = {
type: TabFamilyType,
...(props as Omit<typeof props, keyof VueFeature | keyof TabFamilyOptions>),
...vueFeatureMixin("tabFamily", options, () => (
<TabFamily
activeTab={tabFamily.activeTab}
selected={tabFamily.selected}
tabs={tabFamily.tabs}
buttonContainerClasses={tabFamily.buttonContainerClasses}
buttonContainerStyle={tabFamily.buttonContainerStyle}
/>
)),
tabs: Object.keys(tabs).reduce<Record<string, TabButton>>((parsedTabs, tab) => {
const options = tabs[tab]();
const { tab: buttonTab, glowColor, display, ...props } = options;
const tabButton = {
type: TabButtonType,
...(props as Omit<typeof props, keyof VueFeature | keyof TabButtonOptions>),
...vueFeatureMixin("tabButton", options),
tab: processGetter(buttonTab),
glowColor: processGetter(glowColor),
display: processGetter(display)
} satisfies TabButton;
parsedTabs[tab] = tabButton;
return parsedTabs;
}, {}),
buttonContainerClasses: processGetter(buttonContainerClasses),
buttonContainerStyle: processGetter(buttonContainerStyle),
selected,
activeTab: computed((): Tab | MaybeRef<Renderable> | null => {
if (
selected.value in tabFamily.tabs &&
isVisible(tabFamily.tabs[selected.value].visibility ?? true)
) {
return unref(tabFamily.tabs[selected.value].tab);
}
const firstTab = Object.values(tabFamily.tabs).find(tab =>
isVisible(tab.visibility ?? true)
);
if (firstTab != null) {
return unref(firstTab.tab);
}
return null;
})
} satisfies TabFamily;
return tabFamily;
});
}

120
src/features/tooltips/tooltip.ts
View file

@ -1,120 +0,0 @@
import type { CoercableComponent, GenericComponent, Replace, StyleValue } from "features/feature";
import { Component, GatherProps, setDefault } from "features/feature";
import { persistent } from "game/persistence";
import { Direction } from "util/common";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
} from "util/computed";
import { processComputable } from "util/computed";
import type { VueFeature } from "util/vue";
import type { Ref } from "vue";
import { nextTick, unref } from "vue";
import TooltipComponent from "./Tooltip.vue";
declare module "@vue/runtime-dom" {
interface CSSProperties {
"--xoffset"?: string;
"--yoffset"?: string;
}
}
/**
* An object that configures a {@link Tooltip}.
*/
export interface TooltipOptions {
/** Whether or not this tooltip can be pinned, meaning it'll stay visible even when not hovered. */
pinnable?: boolean;
/** The text to display inside the tooltip. */
display: Computable<CoercableComponent>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** The direction in which to display the tooltip */
direction?: Computable<Direction>;
/** The x offset of the tooltip, in px. */
xoffset?: Computable<string>;
/** The y offset of the tooltip, in px. */
yoffset?: Computable<string>;
}
/**
* The properties that are added onto a processed {@link TooltipOptions} to create an {@link Tooltip}.
*/
export interface BaseTooltip {
pinned?: Ref<boolean>;
}
/** An object that represents a tooltip that appears when hovering over an element. */
export type Tooltip<T extends TooltipOptions> = Replace<
T & BaseTooltip,
{
pinnable: undefined extends T["pinnable"] ? false : T["pinnable"];
pinned: T["pinnable"] extends true ? Ref<boolean> : undefined;
display: GetComputableType<T["display"]>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
direction: GetComputableTypeWithDefault<T["direction"], Direction.Up>;
xoffset: GetComputableType<T["xoffset"]>;
yoffset: GetComputableType<T["yoffset"]>;
}
>;
/** A type that matches any valid {@link Tooltip} object. */
export type GenericTooltip = Replace<
Tooltip<TooltipOptions>,
{
pinnable: boolean;
pinned: Ref<boolean> | undefined;
direction: ProcessedComputable<Direction>;
}
>;
/**
* Creates a tooltip on the given element with the given options.
* @param element The renderable feature to display the tooltip on.
* @param options Tooltip options.
*/
export function addTooltip<T extends TooltipOptions>(
element: VueFeature,
options: T & ThisType<Tooltip<T>> & Partial<BaseTooltip>
): Tooltip<T> {
processComputable(options as T, "display");
processComputable(options as T, "classes");
processComputable(options as T, "style");
processComputable(options as T, "direction");
setDefault(options, "direction", Direction.Up);
processComputable(options as T, "xoffset");
processComputable(options as T, "yoffset");
if (options.pinnable) {
options.pinned = persistent<boolean>(false, false);
}
nextTick(() => {
const elementComponent = element[Component];
element[Component] = TooltipComponent as GenericComponent;
const elementGatherProps = element[GatherProps].bind(element);
element[GatherProps] = function gatherTooltipProps(this: GenericTooltip) {
const { display, classes, style, direction, xoffset, yoffset, pinned } = this;
return {
element: {
[Component]: elementComponent,
[GatherProps]: elementGatherProps
},
display,
classes,
style: unref(style),
direction,
xoffset,
yoffset,
pinned
};
}.bind(options as GenericTooltip);
});
return options as unknown as Tooltip<T>;
}

89
src/features/trees/Tree.vue
View file

@ -1,79 +1,38 @@
<template>
<component :is="nodesComp" />
<component v-if="leftNodesComp" :is="leftNodesComp" />
<component v-if="rightNodesComp" :is="rightNodesComp" />
<Nodes />
<LeftNodes v-if="leftSideNodes" />
<RightNodes v-if="rightSideNodes" />
<Links v-if="branches" :links="unref(branches)" />
</template>
<script lang="tsx">
<script setup lang="tsx">
import "components/common/table.css";
import { jsx } from "features/feature";
import Links from "features/links/Links.vue";
import type { GenericTreeNode, TreeBranch } from "features/trees/tree";
import { coerceComponent, processedPropType, renderJSX, unwrapRef } from "util/vue";
import type { Component } from "vue";
import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
import type { Tree } from "features/trees/tree";
import { joinJSX, render } from "util/vue";
import { unref } from "vue";
export default defineComponent({
props: {
nodes: {
type: processedPropType<GenericTreeNode[][]>(Array),
required: true
},
leftSideNodes: processedPropType<GenericTreeNode[]>(Array),
rightSideNodes: processedPropType<GenericTreeNode[]>(Array),
branches: processedPropType<TreeBranch[]>(Array)
},
components: { Links },
setup(props) {
const { nodes, leftSideNodes, rightSideNodes } = toRefs(props);
const props = defineProps<{
nodes: Tree["nodes"];
leftSideNodes: Tree["leftSideNodes"];
rightSideNodes: Tree["rightSideNodes"];
branches: Tree["branches"];
}>();
const nodesComp = shallowRef<Component | "">();
watchEffect(() => {
const currNodes = unwrapRef(nodes);
nodesComp.value = coerceComponent(
jsx(() => (
<>
{currNodes.map(row => (
const Nodes = () => unref(props.nodes).map(nodes =>
<span class="row tree-row" style="margin: 50px auto;">
{row.map(renderJSX)}
</span>
))}
</>
))
);
});
{nodes.map(node => render(node))}
</span>);
const leftNodesComp = shallowRef<Component | "">();
watchEffect(() => {
const currNodes = unwrapRef(leftSideNodes);
leftNodesComp.value = currNodes
? coerceComponent(
jsx(() => (
<span class="left-side-nodes small">{currNodes.map(renderJSX)}</span>
))
)
: "";
});
const LeftNodes = () => props.leftSideNodes == null ? <></> :
<span class="left-side-nodes small">
{unref(props.leftSideNodes).map(node => render(node))}
</span>;
const rightNodesComp = shallowRef<Component | "">();
watchEffect(() => {
const currNodes = unwrapRef(rightSideNodes);
rightNodesComp.value = currNodes
? coerceComponent(
jsx(() => <span class="side-nodes small">{currNodes.map(renderJSX)}</span>)
)
: "";
});
return {
unref,
nodesComp,
leftNodesComp,
rightNodesComp
};
}
});
const RightNodes = () => props.rightSideNodes == null ? <></> :
<span class="side-nodes small">
{unref(props.rightSideNodes).map(node => render(node))}
</span>;
</script>
<style scoped>

109
src/features/trees/TreeNode.vue
View file

@ -1,11 +1,14 @@
<template>
<div
v-if="isVisible(visibility)"
:style="{ visibility: isHidden(visibility) ? 'hidden' : undefined }"
:style="{
backgroundColor: unref(color),
boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 20px ${unref(
glowColor
)}`
}"
:class="{
treeNode: true,
can: unref(canClick),
...unref(classes)
can: unref(canClick)
}"
@click="onClick"
@mousedown="start"
@ -15,100 +18,38 @@
@touchend.passive="stop"
@touchcancel.passive="stop"
>
<div
:style="[
{
backgroundColor: unref(color),
boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 20px ${unref(
glowColor
)}`
},
unref(style) ?? []
]"
>
<component :is="unref(comp)" />
</div>
<MarkNode :mark="unref(mark)" />
<Node :id="id" />
<Component />
</div>
</template>
<script lang="ts">
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { CoercableComponent, StyleValue } from "features/feature";
import { isHidden, isVisible, Visibility } from "features/feature";
import {
computeOptionalComponent,
isCoercableComponent,
processedPropType,
setupHoldToClick
} from "util/vue";
import type { PropType } from "vue";
import { defineComponent, toRefs, unref } from "vue";
<script setup lang="tsx">
import { render, setupHoldToClick } from "util/vue";
import { toRef, unref } from "vue";
import { TreeNode } from "./tree";
export default defineComponent({
props: {
display: processedPropType<CoercableComponent>(Object, String, Function),
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object),
onClick: Function as PropType<(e?: MouseEvent | TouchEvent) => void>,
onHold: Function as PropType<VoidFunction>,
color: processedPropType<string>(String),
glowColor: processedPropType<string>(String),
canClick: {
type: processedPropType<boolean>(Boolean),
required: true
},
mark: processedPropType<boolean | string>(Boolean, String),
id: {
type: String,
required: true
}
},
components: {
MarkNode,
Node
},
setup(props) {
const { onClick, onHold, display } = toRefs(props);
const props = defineProps<{
canClick: TreeNode["canClick"];
display: TreeNode["display"];
onClick: TreeNode["onClick"];
onHold: TreeNode["onHold"];
color: TreeNode["color"];
glowColor: TreeNode["glowColor"];
}>();
const comp = computeOptionalComponent(display);
const Component = () => props.display == null ? <></> :
render(props.display, el => <div>{el}</div>);
const { start, stop } = setupHoldToClick(onClick, onHold);
return {
start,
stop,
comp,
unref,
Visibility,
isCoercableComponent,
isVisible,
isHidden
};
}
});
const { start, stop } = setupHoldToClick(toRef(props, "onClick"), toRef(props, "onHold"));
</script>
<style scoped>
.treeNode {
height: 100px;
width: 100px;
border: 2px solid rgba(0, 0, 0, 0.125);
border-radius: 50%;
padding: 0;
margin: 0 10px 0 10px;
}
.treeNode > *:first-child {
width: 100%;
height: 100%;
border: 2px solid rgba(0, 0, 0, 0.125);
border-radius: inherit;
font-size: 40px;
color: rgba(0, 0, 0, 0.5);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
@ -116,7 +57,7 @@ export default defineComponent({
display: flex;
}
.treeNode > *:first-child > * {
.treeNode > * {
pointer-events: none;
}
</style>

383
src/features/trees/tree.ts
View file

@ -1,383 +0,0 @@
import { GenericDecorator } from "features/decorators/common";
import type {
CoercableComponent,
GenericComponent,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
import type { Link } from "features/links/links";
import type { GenericReset } from "features/reset";
import type { Resource } from "features/resources/resource";
import { displayResource } from "features/resources/resource";
import TreeComponent from "features/trees/Tree.vue";
import TreeNodeComponent from "features/trees/TreeNode.vue";
import type { DecimalSource } from "util/bignum";
import Decimal, { format, formatWhole } from "util/bignum";
import type {
Computable,
GetComputableType,
GetComputableTypeWithDefault,
ProcessedComputable
} from "util/computed";
import { convertComputable, processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import type { Ref } from "vue";
import { computed, ref, shallowRef, unref } from "vue";
/** A symbol used to identify {@link TreeNode} features. */
export const TreeNodeType = Symbol("TreeNode");
/** A symbol used to identify {@link Tree} features. */
export const TreeType = Symbol("Tree");
/**
* An object that configures a {@link TreeNode}.
*/
export interface TreeNodeOptions {
/** Whether this tree node should be visible. */
visibility?: Computable<Visibility | boolean>;
/** Whether or not this tree node can be clicked. */
canClick?: Computable<boolean>;
/** The background color for this node. */
color?: Computable<string>;
/** The label to display on this tree node. */
display?: Computable<CoercableComponent>;
/** The color of the glow effect shown to notify the user there's something to do with this node. */
glowColor?: Computable<string>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** Shows a marker on the corner of the feature. */
mark?: Computable<boolean | string>;
/** 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<string, unknown>;
}
/** An object that represents a node on a tree. */
export type TreeNode<T extends TreeNodeOptions> = Replace<
T & BaseTreeNode,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
canClick: GetComputableTypeWithDefault<T["canClick"], true>;
color: GetComputableType<T["color"]>;
display: GetComputableType<T["display"]>;
glowColor: GetComputableType<T["glowColor"]>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
mark: GetComputableType<T["mark"]>;
}
>;
/** A type that matches any valid {@link TreeNode} object. */
export type GenericTreeNode = Replace<
TreeNode<TreeNodeOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
canClick: ProcessedComputable<boolean>;
}
>;
/**
* Lazily creates a tree node with the given options.
* @param optionsFunc Tree Node options.
*/
export function createTreeNode<T extends TreeNodeOptions>(
optionsFunc?: OptionsFunc<T, BaseTreeNode, GenericTreeNode>,
...decorators: GenericDecorator[]
): TreeNode<T> {
const decoratedData = decorators.reduce(
(current, next) => Object.assign(current, next.getPersistentData?.()),
{}
);
return createLazyProxy(feature => {
const treeNode =
optionsFunc?.call(feature, feature) ??
({} as ReturnType<NonNullable<typeof optionsFunc>>);
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<T>;
});
}
/** Represents a branch between two nodes in a tree. */
export interface TreeBranch extends Omit<Link, "startNode" | "endNode"> {
startNode: GenericTreeNode;
endNode: GenericTreeNode;
}
/**
* An object that configures a {@link Tree}.
*/
export interface TreeOptions {
/** Whether this clickable should be visible. */
visibility?: Computable<Visibility | boolean>;
/** The nodes within the tree, in a 2D array. */
nodes: Computable<GenericTreeNode[][]>;
/** Nodes to show on the left side of the tree. */
leftSideNodes?: Computable<GenericTreeNode[]>;
/** Nodes to show on the right side of the tree. */
rightSideNodes?: Computable<GenericTreeNode[]>;
/** The branches between nodes within this tree. */
branches?: Computable<TreeBranch[]>;
/** 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<Link[]>;
/** Cause a reset on this node and propagate it through the tree according to {@link TreeOptions.resetPropagation}. */
reset: (node: GenericTreeNode) => void;
/** A flag that is true while the reset is still propagating through the tree. */
isResetting: Ref<boolean>;
/** A reference to the node that caused the currently propagating reset. */
resettingNode: Ref<GenericTreeNode | null>;
/** 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<string, unknown>;
}
/** 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<T extends TreeOptions> = Replace<
T & BaseTree,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
nodes: GetComputableType<T["nodes"]>;
leftSideNodes: GetComputableType<T["leftSideNodes"]>;
rightSideNodes: GetComputableType<T["rightSideNodes"]>;
branches: GetComputableType<T["branches"]>;
}
>;
/** A type that matches any valid {@link Tree} object. */
export type GenericTree = Replace<
Tree<TreeOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
/**
* Lazily creates a tree with the given options.
* @param optionsFunc Tree options.
*/
export function createTree<T extends TreeOptions>(
optionsFunc: OptionsFunc<T, BaseTree, GenericTree>
): Tree<T> {
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<T>;
});
}
/** 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<DecimalSource> = 0
): Ref<string> {
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)
})`;
});
}

279
src/features/trees/tree.tsx Normal file
View file

@ -0,0 +1,279 @@
import type { OptionsFunc, Replace } from "features/feature";
import { Link } from "features/links/links";
import type { Reset } from "features/reset";
import type { Resource } from "features/resources/resource";
import { displayResource } from "features/resources/resource";
import Tree from "features/trees/Tree.vue";
import TreeNode from "features/trees/TreeNode.vue";
import type { DecimalSource } from "util/bignum";
import Decimal, { format, formatWhole } from "util/bignum";
import { ProcessedRefOrGetter, processGetter } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { Renderable, VueFeature, vueFeatureMixin, VueFeatureOptions } from "util/vue";
import type { MaybeRef, MaybeRefOrGetter, Ref } from "vue";
import { computed, ref, shallowRef, unref } from "vue";
/** A symbol used to identify {@link TreeNode} features. */
export const TreeNodeType = Symbol("TreeNode");
/** A symbol used to identify {@link Tree} features. */
export const TreeType = Symbol("Tree");
/**
* An object that configures a {@link TreeNode}.
*/
export interface TreeNodeOptions extends VueFeatureOptions {
/** Whether or not this tree node can be clicked. */
canClick?: MaybeRefOrGetter<boolean>;
/** The background color for this node. */
color?: MaybeRefOrGetter<string>;
/** The label to display on this tree node. */
display?: MaybeRefOrGetter<Renderable>;
/** The color of the glow effect shown to notify the user there's something to do with this node. */
glowColor?: MaybeRefOrGetter<string>;
/** A reset object attached to this node, used for propagating resets through the tree. */
reset?: Reset;
/** A function that is called when the tree node is clicked. */
onClick?: (e?: MouseEvent | TouchEvent) => void;
/** A function that is called when the tree node is held down. */
onHold?: VoidFunction;
}
/**
* The properties that are added onto a processed {@link TreeNodeOptions} to create an {@link TreeNode}.
*/
export interface BaseTreeNode extends VueFeature {
/** A symbol that helps identify features of the same type. */
type: typeof TreeNodeType;
}
/** An object that represents a node on a tree. */
export type TreeNode = Replace<
TreeNodeOptions & BaseTreeNode,
{
canClick: MaybeRef<boolean>;
color: ProcessedRefOrGetter<TreeNodeOptions["color"]>;
display: ProcessedRefOrGetter<TreeNodeOptions["display"]>;
glowColor: ProcessedRefOrGetter<TreeNodeOptions["glowColor"]>;
}
>;
/**
* Lazily creates a tree node with the given options.
* @param optionsFunc Tree Node options.
*/
export function createTreeNode<T extends TreeNodeOptions>(
optionsFunc?: OptionsFunc<T, BaseTreeNode, TreeNode>
) {
return createLazyProxy(feature => {
const options = optionsFunc?.call(feature, feature as TreeNode) ?? ({} as T);
const { canClick, color, display, glowColor, onClick, onHold, ...props } = options;
const treeNode = {
type: TreeNodeType,
...(props as Omit<typeof props, keyof VueFeature | keyof TreeNodeOptions>),
...vueFeatureMixin("treeNode", options, () => (
<TreeNode
canClick={treeNode.canClick}
display={treeNode.display}
onClick={treeNode.onClick}
onHold={treeNode.onHold}
color={treeNode.color}
glowColor={treeNode.glowColor}
/>
)),
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<Link, "startNode" | "endNode"> {
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<TreeNode[][]>;
/** Nodes to show on the left side of the tree. */
leftSideNodes?: MaybeRefOrGetter<TreeNode[]>;
/** Nodes to show on the right side of the tree. */
rightSideNodes?: MaybeRefOrGetter<TreeNode[]>;
/** The branches between nodes within this tree. */
branches?: MaybeRefOrGetter<TreeBranch[]>;
/** 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 BaseTree extends VueFeature {
/** The link objects for each of the branches of the tree. */
links: Ref<Link[]>;
/** 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<boolean>;
/** A reference to the node that caused the currently propagating reset. */
resettingNode: Ref<TreeNode | null>;
/** A symbol that helps identify features of the same type. */
type: typeof TreeType;
}
/** 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<
TreeOptions & BaseTree,
{
nodes: ProcessedRefOrGetter<TreeOptions["nodes"]>;
leftSideNodes: ProcessedRefOrGetter<TreeOptions["leftSideNodes"]>;
rightSideNodes: ProcessedRefOrGetter<TreeOptions["rightSideNodes"]>;
branches: ProcessedRefOrGetter<TreeOptions["branches"]>;
}
>;
/**
* Lazily creates a tree with the given options.
* @param optionsFunc Tree options.
*/
export function createTree<T extends TreeOptions>(optionsFunc: OptionsFunc<T, BaseTree, Tree>) {
return createLazyProxy(feature => {
const options = optionsFunc.call(feature, feature as Tree);
const {
branches,
nodes,
leftSideNodes,
rightSideNodes,
reset,
resetPropagation,
onReset,
...props
} = options;
const tree = {
type: TreeType,
...(props as Omit<typeof props, keyof VueFeature | keyof TreeOptions>),
...vueFeatureMixin("tree", options, () => (
<Tree
nodes={tree.nodes}
leftSideNodes={tree.leftSideNodes}
rightSideNodes={tree.rightSideNodes}
branches={tree.branches}
/>
)),
branches: processGetter(branches),
isResetting: ref(false),
resettingNode: shallowRef<TreeNode | null>(null),
nodes: processGetter(nodes),
leftSideNodes: processGetter(leftSideNodes),
rightSideNodes: processGetter(rightSideNodes),
links: processGetter(branches) ?? [],
resetPropagation,
onReset,
reset:
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<DecimalSource> = 0
): Ref<string> {
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)
})`;
});
}

136
src/features/upgrades/Upgrade.vue
View file

@ -1,136 +0,0 @@
<template>
<button
v-if="isVisible(visibility)"
:style="[
{
visibility: isHidden(visibility) ? 'hidden' : undefined
},
unref(style) ?? {}
]"
@click="purchase"
:class="{
feature: true,
upgrade: true,
can: unref(canPurchase),
locked: !unref(canPurchase),
bought: unref(bought),
...unref(classes)
}"
:disabled="!unref(canPurchase)"
>
<component v-if="unref(component)" :is="unref(component)" />
<MarkNode :mark="unref(mark)" />
<Node :id="id" />
</button>
</template>
<script lang="tsx">
import "components/common/features.css";
import MarkNode from "components/MarkNode.vue";
import Node from "components/Node.vue";
import type { StyleValue } from "features/feature";
import { isHidden, isVisible, jsx, Visibility } from "features/feature";
import type { GenericUpgrade } from "features/upgrades/upgrade";
import { displayRequirements, Requirements } from "game/requirements";
import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "util/vue";
import type { Component, PropType, UnwrapRef } from "vue";
import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
export default defineComponent({
props: {
display: {
type: processedPropType<UnwrapRef<GenericUpgrade["display"]>>(String, Object, Function),
required: true
},
visibility: {
type: processedPropType<Visibility | boolean>(Number, Boolean),
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object),
requirements: {
type: Object as PropType<Requirements>,
required: true
},
canPurchase: {
type: processedPropType<boolean>(Boolean),
required: true
},
bought: {
type: processedPropType<boolean>(Boolean),
required: true
},
mark: processedPropType<boolean | string>(Boolean, String),
id: {
type: String,
required: true
},
purchase: {
type: Function as PropType<VoidFunction>,
required: true
}
},
components: {
Node,
MarkNode
},
setup(props) {
const { display, requirements, bought } = toRefs(props);
const component = shallowRef<Component | string>("");
watchEffect(() => {
const currDisplay = unwrapRef(display);
if (currDisplay == null) {
component.value = "";
return;
}
if (isCoercableComponent(currDisplay)) {
component.value = coerceComponent(currDisplay);
return;
}
const Title = coerceComponent(currDisplay.title || "", "h3");
const Description = coerceComponent(currDisplay.description, "div");
const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "");
component.value = coerceComponent(
jsx(() => (
<span>
{currDisplay.title != null ? (
<div>
<Title />
</div>
) : null}
<Description />
{currDisplay.effectDisplay != null ? (
<div>
Currently: <EffectDisplay />
</div>
) : null}
{bought.value ? null : <><br />{displayRequirements(requirements.value)}</>}
</span>
))
);
});
return {
component,
unref,
Visibility,
isVisible,
isHidden
};
}
});
</script>
<style scoped>
.upgrade {
min-height: 120px;
width: 120px;
font-size: 10px;
}
.upgrade > * {
pointer-events: none;
}
</style>

228
src/features/upgrades/upgrade.ts
View file

@ -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<Visibility | boolean>;
/** Dictionary of CSS classes to apply to this feature. */
classes?: Computable<Record<string, boolean>>;
/** CSS to apply to this feature. */
style?: Computable<StyleValue>;
/** Shows a marker on the corner of the feature. */
mark?: Computable<boolean | string>;
/** 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<boolean>;
/** Whether or not the upgrade can currently be purchased. */
canPurchase: Ref<boolean>;
/** 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<string, unknown>;
}
/** An object that represents a feature that can be purchased a single time. */
export type Upgrade<T extends UpgradeOptions> = Replace<
T & BaseUpgrade,
{
visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
display: GetComputableType<T["display"]>;
requirements: GetComputableType<T["requirements"]>;
mark: GetComputableType<T["mark"]>;
}
>;
/** A type that matches any valid {@link Upgrade} object. */
export type GenericUpgrade = Replace<
Upgrade<UpgradeOptions>,
{
visibility: ProcessedComputable<Visibility | boolean>;
}
>;
/**
* Lazily creates an upgrade with the given options.
* @param optionsFunc Upgrade options.
*/
export function createUpgrade<T extends UpgradeOptions>(
optionsFunc: OptionsFunc<T, BaseUpgrade, GenericUpgrade>,
...decorators: GenericDecorator[]
): Upgrade<T> {
const bought = persistent<boolean>(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<T>;
});
}
/**
* 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<boolean>,
upgrades: GenericUpgrade[] = []
): void {
upgrades =
upgrades.length === 0 ? (findFeatures(layer, UpgradeType) as GenericUpgrade[]) : upgrades;
const isAutoActive: ProcessedComputable<boolean> = isFunction(autoActive)
? computed(autoActive)
: autoActive;
layer.on("update", () => {
if (unref(isAutoActive)) {
upgrades.forEach(upgrade => upgrade.purchase());
}
});
}

101
src/game/boards/Board.vue Normal file
View file

@ -0,0 +1,101 @@
<template>
<panZoom
selector=".stage"
:options="{ initialZoom: 1, minZoom: 0.1, maxZoom: 10, zoomDoubleClickSpeed: 1 }"
ref="stage"
@init="onInit"
@mousemove="(e: MouseEvent) => emit('drag', e)"
@touchmove="(e: TouchEvent) => emit('drag', e)"
@mouseleave="(e: MouseEvent) => emit('mouseLeave', e)"
@mouseup="(e: MouseEvent) => emit('mouseUp', e)"
@touchend.passive="(e: TouchEvent) => emit('mouseUp', e)"
>
<div
class="event-listener"
@mousedown="(e: MouseEvent) => emit('mouseDown', e)"
@touchstart="(e: TouchEvent) => emit('mouseDown', e)"
/>
<div class="stage">
<slot />
</div>
</panZoom>
</template>
<script setup lang="ts">
import type { PanZoom } from "panzoom";
import type { ComponentPublicInstance } from "vue";
import { computed, ref } from "vue";
// Required to make sure panzoom component gets registered:
import "./board";
defineExpose({
panZoomInstance: computed(() => stage.value?.panZoomInstance)
});
const emit = defineEmits<{
(event: "drag", e: MouseEvent | TouchEvent): void;
(event: "mouseDown", e: MouseEvent | TouchEvent): void;
(event: "mouseUp", e: MouseEvent | TouchEvent): void;
(event: "mouseLeave", e: MouseEvent | TouchEvent): void;
}>();
const stage = ref<{ panZoomInstance: PanZoom } & ComponentPublicInstance<HTMLElement>>();
function onInit(panzoomInstance: PanZoom) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
panzoomInstance.setTransformOrigin(null);
panzoomInstance.moveTo(0, stage.value?.$el.clientHeight / 2);
}
</script>
<style scoped>
.event-listener {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.stage {
transition-duration: 0s;
width: 100%;
height: 100%;
pointer-events: none;
}
</style>
<style>
.vue-pan-zoom-item {
overflow: hidden;
}
.vue-pan-zoom-scene {
width: 100%;
height: 100%;
cursor: grab;
}
.vue-pan-zoom-scene:active {
cursor: grabbing;
}
.stage > * {
pointer-events: initial;
}
/* "Only" child (excluding resize listener) */
.layer-tab > .vue-pan-zoom-item:first-child:nth-last-child(2) {
width: calc(100% + 20px);
height: calc(100% + 100px);
margin: -50px -10px;
}
.board-node {
position: absolute;
top: 0;
left: 50%;
transition-duration: 0s;
}
</style>
game/boards/board

29
src/game/boards/CircleProgress.vue Normal file
View file

@ -0,0 +1,29 @@
<template>
<circle
:r="r"
fill="transparent"
:stroke-dasharray="r * 2 * Math.PI"
:stroke-width="5"
:stroke-dashoffset="r * 2 * Math.PI - progress * r * 2 * Math.PI"
:stroke="stroke"
/>
</template>
<script setup lang="ts">
import type { SVGAttributes } from "vue";
interface CircleProgressProps extends SVGAttributes {
r: number;
progress: number;
stroke: string;
}
defineProps<CircleProgressProps>();
</script>
<style scoped>
circle {
transition-duration: 0.05s;
transform: rotate(-90deg);
}
</style>

23
src/game/boards/Draggable.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<div
class="board-node"
:style="`transform: translate(calc(${unref(position).x}px - 50%), ${unref(position).y}px);`"
@mousedown="e => mouseDown(e)"
@touchstart.passive="e => mouseDown(e)"
@mouseup="e => mouseUp(e)"
@touchend.passive="e => mouseUp(e)"
>
<slot />
</div>
</template>
<script setup lang="tsx">
import { Ref, unref } from "vue";
import { NodePosition } from "./board";
defineProps<{
mouseDown: (e: MouseEvent | TouchEvent) => void;
mouseUp: (e: MouseEvent | TouchEvent) => void;
position: Ref<NodePosition>;
}>();
</script>

28
src/game/boards/SVGNode.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<svg
@mousedown="e => emit('mouseDown', e)"
@touchstart.passive="e => emit('mouseDown', e)"
@mouseup="e => emit('mouseUp', e)"
@touchend.passive="e => emit('mouseUp', e)"
width="1"
height="1"
>
<slot />
</svg>
</template>
<script setup lang="ts">
const emit = defineEmits<{
(e: "mouseDown", event: MouseEvent | TouchEvent): void;
(e: "mouseUp", event: MouseEvent | TouchEvent): void;
}>();
</script>
<style scoped>
svg {
cursor: pointer;
transition-duration: 0s;
overflow: visible;
position: absolute;
}
</style>

30
src/game/boards/SquareProgress.vue Normal file
View file

@ -0,0 +1,30 @@
<template>
<rect
:width="size"
:height="size"
:transform="`translate(${-size / 2}, ${-size / 2})`"
fill="transparent"
:stroke-dasharray="size * 4"
:stroke-width="5"
:stroke-dashoffset="size * 4 - progress * size * 4"
:stroke="stroke"
/>
</template>
<script setup lang="ts">
import type { SVGAttributes } from "vue";
interface SquareProgressProps extends SVGAttributes {
size: number;
progress: number;
stroke: string;
}
defineProps<SquareProgressProps>();
</script>
<style scoped>
rect {
transition-duration: 0.05s;
}
</style>

425
src/game/boards/board.tsx Normal file
View file

@ -0,0 +1,425 @@
import { globalBus } from "game/events";
import { Persistent, persistent } from "game/persistence";
import type { PanZoom } from "panzoom";
import { Direction, isFunction } from "util/common";
import { processGetter } from "util/computed";
import { VueFeature } from "util/vue";
import type { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter, Ref } from "vue";
import { computed, ref, unref, watchEffect } from "vue";
import panZoom from "vue-panzoom";
import { JSX } from "vue/jsx-runtime";
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<T, R, S extends unknown[] = []> =
| MaybeRefOrGetter<R>
| ((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<T, R, S extends unknown[]>(
property: NodeMaybeRefOrGetter<T, R, S>,
node: T,
...args: S
): R {
return isFunction<R, [T, ...S], MaybeRef<R>>(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<T> {
/** 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 <Board> element. */
board: Ref<ComponentPublicInstance<typeof Board> | 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<T, T[]>;
/** The maximum distance (in pixels, before zoom) away a node can be and still drop onto a receiving node. */
dropAreaRadius?: NodeMaybeRefOrGetter<T, number>;
/** 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<T> {
/** A ref to the node currently being moved. */
nodeBeingDragged: Ref<T | undefined>;
/** 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<T | undefined>;
/** A ref to whether or not the node being dragged has actually been dragged away from its starting position. */
hasDragged: Ref<boolean>;
/** The position of the node being dragged relative to where it started at the beginning of the drag. */
dragDelta: Ref<NodePosition>;
/** The nodes that can receive the node currently being dragged. */
receivingNodes: Ref<T[]>;
/** 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<T>(options: DraggableNodeOptions<T>): DraggableNode<T> {
const nodeBeingDragged = ref<T>();
const receivingNode = ref<T>();
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<NodePosition>();
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<T> {
/** 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<T | undefined>;
/** A reference to whether or not the node being dragged has been moved away from its initial position. Typically from {@link setupDraggableNode}. */
hasDragged: Ref<boolean>;
/** A reference to how far the node being dragged is from its initial position. Typically from {@link setupDraggableNode}. */
dragDelta: Ref<NodePosition>;
/** 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;
}
/**
* 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<T>(
element: VueFeature,
options: MakeDraggableOptions<T>
): asserts element is VueFeature & { position: Persistent<NodePosition> } {
const position = persistent(options.initialPosition ?? { x: 0, y: 0 });
(element as VueFeature & { position: Persistent<NodePosition> }).position = position;
const computedPosition = computed(() => {
if (options.nodeBeingDragged.value === options.id) {
return {
x: position.value.x + options.dragDelta.value.x,
y: position.value.y + options.dragDelta.value.y
};
}
return position.value;
});
function handleMouseDown(e: MouseEvent | TouchEvent) {
if (options.onMouseDown?.(e) === false) {
return;
}
if (options.nodeBeingDragged.value == null) {
options.startDrag(e, options.id);
}
}
function handleMouseUp(e: MouseEvent | TouchEvent) {
options.onMouseUp?.(e);
}
element.wrappers.push(el => (
<Draggable mouseDown={handleMouseDown} mouseUp={handleMouseUp} position={computedPosition}>
{el}
</Draggable>
));
}
/** An object that configures how to setup a list of actions using {@link setupActions}. */
export interface SetupActionsOptions<T extends NodePosition> {
/** The node to display actions upon, or undefined when the actions should be hidden. */
node: MaybeRefOrGetter<T | undefined>;
/** Whether or not to currently display the actions. */
shouldShowActions?: NodeMaybeRefOrGetter<T, boolean>;
/** The list of actions to display. Actions are arbitrary JSX elements. */
actions: NodeMaybeRefOrGetter<T, ((position: NodePosition) => JSX.Element)[]>;
/** The distance from the node to place the actions. */
distance: NodeMaybeRefOrGetter<T, number>;
/** The arc length to place between actions, in radians. */
arcLength?: NodeMaybeRefOrGetter<T, number>;
}
/**
* 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<T extends NodePosition>(options: SetupActionsOptions<T>) {
const node = processGetter(options.node) as MaybeRef<T | undefined>;
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<T extends NodePosition>(
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;
}
}
}

6
src/game/events.ts
View file

@ -1,7 +1,7 @@
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. */
@ -11,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<string, unknown>) => void;
addLayer: (layer: Layer, saveData: Record<string, unknown>) => 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.

39
src/game/formulas/formulas.ts
View file

@ -1,7 +1,7 @@
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 { MaybeRefOrGetter, MaybeRef, processGetter } from "util/computed";
import { Ref, computed, ref, unref } from "vue";
import * as ops from "./operations";
import type {
@ -48,6 +48,7 @@ export interface InternalFormula<T extends [FormulaSource] | FormulaSource[]> {
invertIntegral?(value: DecimalSource): DecimalSource;
}
// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[]> {
readonly inputs: T;
@ -59,7 +60,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
protected readonly description: string | undefined;
protected readonly internalVariables: number;
public readonly innermostVariable: ProcessedComputable<DecimalSource> | undefined;
public readonly innermostVariable: MaybeRef<DecimalSource> | undefined;
constructor(options: FormulaOptions<T>) {
let readonlyProperties;
@ -92,7 +93,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
private setupVariable({
variable
}: {
variable: ProcessedComputable<DecimalSource>;
variable: MaybeRef<DecimalSource>;
}): InternalFormulaProperties<T> {
return {
inputs: [variable] as T,
@ -206,7 +207,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
* Creates a formula that evaluates to a constant value.
* @param value The constant value for this formula.
*/
public static constant(value: ProcessedComputable<DecimalSource>): InvertibleIntegralFormula {
public static constant(value: MaybeRef<DecimalSource>): InvertibleIntegralFormula {
return new Formula({ inputs: [value] });
}
@ -214,7 +215,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
* Creates a formula that is marked as the variable for an outer formula. Typically used for inverting and integrating.
* @param value The variable for this formula.
*/
public static variable(value: ProcessedComputable<DecimalSource>): InvertibleIntegralFormula {
public static variable(value: MaybeRef<DecimalSource>): InvertibleIntegralFormula {
return new Formula({ variable: value });
}
@ -247,11 +248,11 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
*/
public static step(
value: FormulaSource,
start: Computable<DecimalSource>,
start: MaybeRefOrGetter<DecimalSource>,
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;
@ -292,7 +293,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
*/
public static if(
value: FormulaSource,
condition: Computable<boolean>,
condition: MaybeRefOrGetter<boolean>,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula,
elseFormulaModifier?: (value: InvertibleIntegralFormula) => GenericFormula
) {
@ -300,7 +301,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
const variable = Formula.variable(lhsRef);
const formula = formulaModifier(variable);
const elseFormula = elseFormulaModifier?.(variable);
const processedCondition = convertComputable(condition);
const processedCondition = processGetter(condition);
function evalStep(lhs: DecimalSource) {
if (unref(processedCondition)) {
lhsRef.value = lhs;
@ -339,7 +340,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
}
public static conditional(
value: FormulaSource,
condition: Computable<boolean>,
condition: MaybeRefOrGetter<boolean>,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula,
elseFormulaModifier?: (value: InvertibleIntegralFormula) => GenericFormula
) {
@ -908,20 +909,20 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
}
public step(
start: Computable<DecimalSource>,
start: MaybeRefOrGetter<DecimalSource>,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
) {
return Formula.step(this, start, formulaModifier);
}
public if(
condition: Computable<boolean>,
condition: MaybeRefOrGetter<boolean>,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
) {
return Formula.if(this, condition, formulaModifier);
}
public conditional(
condition: Computable<boolean>,
condition: MaybeRefOrGetter<boolean>,
formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
) {
return Formula.if(this, condition, formulaModifier);
@ -1442,13 +1443,13 @@ export function findNonInvertible(formula: GenericFormula): GenericFormula | nul
export function calculateMaxAffordable(
formula: GenericFormula,
resource: Resource,
cumulativeCost: Computable<boolean> = true,
directSum?: Computable<number>,
maxBulkAmount: Computable<DecimalSource> = Decimal.dInf
cumulativeCost: MaybeRefOrGetter<boolean> = true,
directSum?: MaybeRefOrGetter<number>,
maxBulkAmount: MaybeRefOrGetter<DecimalSource> = 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)) {

8
src/game/formulas/types.d.ts vendored
View file

@ -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<any>;
type FormulaSource = ProcessedComputable<DecimalSource> | GenericFormula;
type FormulaSource = MaybeRef<DecimalSource> | GenericFormula;
type InvertibleFormula = GenericFormula & {
invert: NonNullable<GenericFormula["invert"]>;
};
@ -38,7 +38,7 @@ type SubstitutionFunction<T> = (
) => GenericFormula;
type VariableFormulaOptions = {
variable: ProcessedComputable<DecimalSource>;
variable: MaybeRef<DecimalSource>;
description?: string;
};
type ConstantFormulaOptions = {
@ -67,7 +67,7 @@ type InternalFormulaProperties<T extends [FormulaSource] | FormulaSource[]> = {
internalIntegrate?: IntegrateFunction<T>;
internalIntegrateInner?: IntegrateFunction<T>;
applySubstitution?: SubstitutionFunction<T>;
innermostVariable?: ProcessedComputable<DecimalSource>;
innermostVariable?: MaybeRef<DecimalSource>;
description?: string;
};

27
src/game/gameLoop.ts
View file

@ -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<boolean> = null;
let intervalID: NodeJS.Timeout | null = null;
function update() {
const now = Date.now();
@ -95,12 +91,6 @@ 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 {
@ -108,6 +98,15 @@ export async function startGameLoop() {
}
}
setInterval(() => {
watch(hasWon, hasWon => {
if (hasWon) {
globalBus.emit("gameWon");
}
});
setInterval(
() => {
state.mouseActivity = [...state.mouseActivity.slice(-7), false];
}, 1000 * 60 * 60);
},
1000 * 60 * 60
);

Some files were not shown because too many files have changed in this diff Show more