Merge branch 'feat/update-deps' into feat/board-rewrite

2024-11-29 07:52:52 -06:00 · 2024-11-29 07:52:52 -06:00 · 99511288c9
commit 99511288c9
parent 68e6e3f37a 4987916900
90 changed files with 5829 additions and 5075 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1 @@
+.eslintrc.cjs
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -5,15 +5,22 @@ module.exports = {
    env: {
        node: true
    },
-    extends: [
-        "plugin:vue/vue3-essential",
-        "@vue/eslint-config-typescript/recommended",
-        "@vue/eslint-config-prettier"
+    parser: '@typescript-eslint/parser',
+    plugins: ["@typescript-eslint"],
+    overrides: [
+        {
+            files: ['*.ts', '*.tsx'],
+            extends: [
+                "plugin:vue/vue3-essential",
+                "@vue/eslint-config-typescript/recommended",
+                "@vue/eslint-config-prettier"
+            ],
+            parserOptions: {
+                ecmaVersion: 2020,
+                project: "./tsconfig.json"
+            },
+        }
    ],
-    parserOptions: {
-        ecmaVersion: 2020,
-        project: "tsconfig.json"
-    },
    ignorePatterns: ["src/lib"],
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
@ -27,6 +34,13 @@ module.exports = {
                allowNullableObject: true,
                allowNullableBoolean: true
            }
+        ],
+        "eqeqeq": [
+            "error",
+            "always",
+            {
+                "null": "never"
+            }
        ]
    },
    globals: {
--- a/.forgejo/workflows/deploy.yaml
+++ b/.forgejo/workflows/deploy.yaml
@ -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: |
--- a/.forgejo/workflows/test.yaml
+++ b/.forgejo/workflows/test.yaml
@ -7,15 +7,14 @@ 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
+      - run: npm run lint
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -12,10 +12,11 @@ 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
+      - run: npm run lint
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,7 +1,7 @@
 {
    "vitest.commandLine": "npx vitest",
    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "git.ignoreLimitWarning": true,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -6,6 +6,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [0.6.2] - 2024-04-01
+### Added
+- Export save button in error boundaries
+- isRendered utility function
+- Automatic galaxy.click cloud saves support 
+- Support for null and undefined in persistent refs
+### Changes
+- round, floor, ceil, trunc, and add now invert as no-ops
+- "The Paper Pilot Community" renamed to "Profectus & Friends"
+- Updated CI etc. to work with Forgejo
+- Improved modifier typing
+- Rename `printFormula` to `Formula.stringify`
+### Fixed
+- Hotkeys not working correctly with most combinations of modifiers
+- Reset button using `currentAt` when not gaining
+- Formulas not using modifiers that are disabled initially
+- branchedResetPropagation logic being incorrect
+- Fixed default elementsd in the main layer not updating Context when being added or removed
+- Board links props not working in camelCase
+- Board links absorbing pointer events
+- Thrown errors not appearing in console
+- Disabled elements would eat mouse events
+- Fixed cost requirement without formula counting as being able to afford infinite purchases rather than just one
+- Pinnable tooltips causing innocuous console error
+- Bars with direction as "Left" wouldn't appear correctly
+### Documentation
+- Clarified expected progress values for board nodes
+- Added CONTRIBUTING.md and enforce eslint on all PRs
+### Tests
+- Update formula test cases
+- Tree reset propagation
+
+Contributors: thepaperpilot, escapee, nif
+
 ## [0.6.1] - 2023-05-17
 ### Added
 - Error boundaries around each layer, and errors now display on the page when in development
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,31 @@
+# Contributing to Profectus
+
+Thank you for considering contributing to Profectus! We appreciate your interest in improving our project. Please take a moment to review the following guidelines to streamline the contribution process.
+
+## Getting Started
+
+For detailed instructions on setting up local development environment, please refer to the [Setup Guide](https://moddingtree.com/guide/getting-started/setup).
+
+## Issue Reporting
+
+If you encounter a bug or have a suggestion for improvement, please open an issue on Incremental Social. Provide as much detail as possible, including an example repo or steps to reproduce the issue if applicable.
+
+## Contributing
+
+Make sure to open your PR on [Incremental Social](https://code.incremental.social/profectus/Profectus) - the GitHub repo is just a mirror!
+
+### Code Review
+
+All PRs must be reviewed and approved by at least one of the project maintainers before merging. Please be patient during the review process and be open to feedback.
+
+### Testing
+
+Ensure that your changes pass all existing tests and, if applicable, add new tests to cover the changes you've made. Run `npm run test` to run all the tests.
+
+### Code Style
+
+We use ESLint and Prettier to enforce consistent code style throughout the project. Before submitting a PR, run `npm run lint:fix` to automatically fix any linting issues.
+
+## License
+
+By contributing to Profectus, you agree that your contributions will be licensed under the project's [LICENSE](./LICENSE).
--- a/index.html
+++ b/index.html
@ -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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +1,8 @@
 {
  "name": "profectus",
-  "version": "0.6.1",
+  "version": "0.6.2",
  "private": true,
+  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
@ -9,49 +10,56 @@
    "preview": "vite preview",
    "test": "vitest run",
    "testw": "vitest",
-    "serve": "vite preview --host"
+    "serve": "vite preview --host",
+    "lint": "eslint src --max-warnings 0",
+    "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",
-    "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",
+    "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": "^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": "^0.29.3",
-    "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"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -6,8 +6,10 @@
            <Nav v-if="useHeader" />
            <Game />
            <TPS v-if="unref(showTPS)" />
+            <AddictionWarning />
            <GameOverScreen />
            <NaNScreen />
+            <CloudSaveResolver />
            <component :is="gameComponent" />
        </div>
    </template>
@ -16,14 +18,16 @@
 <script setup lang="tsx">
 import "@fontsource/roboto-mono";
 import Error from "components/Error.vue";
+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 { CSSProperties, watch } from "vue";
+import type { CSSProperties } from "vue";
 import { computed, toRef, unref } from "vue";
 import Game from "./components/Game.vue";
-import GameOverScreen from "./components/GameOverScreen.vue";
-import NaNScreen from "./components/NaNScreen.vue";
 import Nav from "./components/Nav.vue";
 import TPS from "./components/TPS.vue";
 import projInfo from "./data/projInfo.json";
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@ -29,14 +29,23 @@ import player from "game/player";
 import { computed, toRef, unref } from "vue";
 import Layer from "./Layer.vue";
 import Nav from "./Nav.vue";
+import { deepUnref } from "util/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 };
+    const { display, name, color, minimizable, minimizedDisplay } = deepUnref(layer);
+    return {
+        display,
+        name,
+        color,
+        minimizable,
+        minimizedDisplay,
+        minimized: layer.minimized,
+        nodes: layer.nodes
+    };
 }
 </script>

--- a/src/components/Layer.vue
+++ b/src/components/Layer.vue
@ -23,80 +23,48 @@
    </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 player from "game/player";
-import { computeComponent, computeOptionalComponent, processedPropType, unwrapRef } from "util/vue";
-import { PropType, Ref, computed, defineComponent, onErrorCaptured, ref, toRefs, unref } from "vue";
+import { computeComponent, computeOptionalComponent } from "util/vue";
+import { Ref, computed, onErrorCaptured, ref, toRef, 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<{
+    index: number;
+    display: CoercableComponent;
+    minimizedDisplay?: CoercableComponent;
+    minimized: Ref<boolean>;
+    name: string;
+    color?: string;
+    minimizable?: boolean;
+    nodes: Ref<Record<string, FeatureNode | undefined>>;
+}>();

-        const component = computeComponent(display);
-        const minimizedComponent = computeOptionalComponent(minimizedDisplay);
-        const showGoBack = computed(
-            () => projInfo.allowGoBack && index.value > 0 && !unwrapRef(minimized)
-        );
+const component = computeComponent(toRef(props, "display"));
+const minimizedComponent = computeOptionalComponent(toRef(props, "minimizedDisplay"));
+const showGoBack = computed(
+    () => projInfo.allowGoBack && props.index > 0 && !unref(props.minimized)
+);

-        function goBack() {
-            player.tabs.splice(unref(props.index), Infinity);
-        }
+function goBack() {
+    player.tabs.splice(unref(props.index), Infinity);
+}

-        function updateNodes(nodes: Record<string, FeatureNode | undefined>) {
-            props.nodes.value = nodes;
-        }
+function updateNodes(nodes: Record<string, FeatureNode | undefined>) {
+    props.nodes.value = nodes;
+}

-        const errors = ref<Error[]>([]);
-        onErrorCaptured((err, instance, info) => {
-            console.warn(`Error caught in "${props.name}" layer`, err, instance, info);
-            errors.value.push(
-                err instanceof Error ? (err as Error) : new Error(JSON.stringify(err))
-            );
-            return false;
-        });
-
-        return {
-            component,
-            minimizedComponent,
-            showGoBack,
-            updateNodes,
-            unref,
-            goBack,
-            errors
-        };
-    }
+const errors = ref<Error[]>([]);
+onErrorCaptured((err, instance, info) => {
+    console.warn(`Error caught in "${props.name}" layer`, err, instance, info);
+    errors.value.push(
+        err instanceof Error ? (err as Error) : new Error(JSON.stringify(err))
+    );
+    return false;
 });
 </script>

--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@ -36,7 +36,7 @@
        </div>
        <div @click="savesManager?.open()">
            <Tooltip display="Saves" :direction="Direction.Down" xoffset="-20px">
-                <span class="material-icons">library_books</span>
+                <span class="material-icons" :class="{ needsSync }">library_books</span>
            </Tooltip>
        </div>
        <div @click="options?.open()">
@ -53,7 +53,7 @@
        </div>
        <div @click="savesManager?.open()">
            <Tooltip display="Saves" :direction="Direction.Right">
-                <span class="material-icons">library_books</span>
+                <span class="material-icons" :class="{ needsSync }">library_books</span>
            </Tooltip>
        </div>
        <div @click="options?.open()">
@ -98,12 +98,14 @@
 import Changelog from "data/Changelog.vue";
 import projInfo from "data/projInfo.json";
 import Tooltip from "features/tooltips/Tooltip.vue";
+import settings from "game/settings";
 import { Direction } from "util/common";
+import { galaxy, syncedSaves } from "util/galaxy";
 import type { ComponentPublicInstance } from "vue";
-import { ref } from "vue";
-import Info from "./Info.vue";
-import Options from "./Options.vue";
-import SavesManager from "./SavesManager.vue";
+import { computed, ref } from "vue";
+import Info from "./modals/Info.vue";
+import Options from "./modals/Options.vue";
+import SavesManager from "./modals/SavesManager.vue";

 const info = ref<ComponentPublicInstance<typeof Info> | null>(null);
 const savesManager = ref<ComponentPublicInstance<typeof SavesManager> | null>(null);
@ -117,6 +119,10 @@ const { useHeader, banner, title, discordName, discordLink, versionNumber } = pr
 function openDiscord() {
    window.open(discordLink, "mywindow");
 }
+
+const needsSync = computed(
+    () => galaxy.value?.loggedIn === true && !syncedSaves.value.includes(settings.active)
+);
 </script>

 <style scoped>
@ -264,4 +270,32 @@ function openDiscord() {
    color: var(--foreground);
    text-shadow: none;
 }
+
+.needsSync {
+    color: var(--danger);
+    animation: 4s wiggle ease infinite;
+}
+
+@keyframes wiggle {
+    0% {
+        transform: rotate(-3deg);
+        box-shadow: 0 2px 2px #0003;
+    }
+    5% {
+        transform: rotate(20deg);
+    }
+    10% {
+        transform: rotate(-15deg);
+    }
+    15% {
+        transform: rotate(5deg);
+    }
+    20% {
+        transform: rotate(-1deg);
+    }
+    25% {
+        transform: rotate(0);
+        box-shadow: 0 2px 2px #0003;
+    }
+}
 </style>
--- a/src/components/Node.vue
+++ b/src/components/Node.vue
@ -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>
--- a/src/components/fields/DangerButton.vue
+++ b/src/components/fields/DangerButton.vue
@ -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;
    }
--- a/src/components/fields/FeedbackButton.vue
+++ b/src/components/fields/FeedbackButton.vue
@ -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;
--- a/src/components/fields/Select.vue
+++ b/src/components/fields/Select.vue
@ -16,8 +16,8 @@
 <script setup lang="ts">
 import "components/common/fields.css";
 import type { CoercableComponent } from "features/feature";
-import { computeOptionalComponent, unwrapRef } from "util/vue";
-import { ref, toRef, watch } from "vue";
+import { computeOptionalComponent } from "util/vue";
+import { ref, toRef, unref, watch } from "vue";
 import VueNextSelect from "vue-next-select";
 import "vue-next-select/dist/index.css";

@ -40,7 +40,7 @@ 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;
    }
 });
--- a/src/components/fields/Slider.vue
+++ b/src/components/fields/Slider.vue
@ -11,22 +11,22 @@
 import "components/common/fields.css";
 import Tooltip from "features/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));
--- a/src/components/modals/AddictionWarning.vue
+++ b/src/components/modals/AddictionWarning.vue
@ -0,0 +1,84 @@
+<template>
+    <Modal v-model="isOpen" v-bind="$attrs">
+        <template v-slot:header>
+            <div class="vga-modal-header">
+                <h2>Kindly consider taking a break.</h2>
+            </div>
+        </template>
+        <template v-slot:body>
+            <p>
+                You've been actively enjoying this game for awhile recently - and it's great that
+                you've been having a good time! That said, there are dangers to games like these that you should be aware of:
+            </p>
+            <p>
+                While incremental games can be fun and even healthy in certain contexts, they can
+                exacerbate video game addiction even more than other genres. If you feel like
+                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>
+            <h4>Resources:</h4>
+            <p>
+                <span>
+                    <a style="display: inline" href="https://www.samhsa.gov/" target="_blank">
+                        SAMHSA
+                    </a>
+                    (<a style="display: inline" href="tel:1-800-662-4357">1-800-662-HELP</a>)
+                </span>
+                <br />
+                <a href="https://www.reddit.com/r/StopGaming/">r/StopGaming</a>
+            </p>
+        </template>
+        <template v-slot:footer>
+            <div class="vga-footer">
+                <button @click="neverShow" class="button">Never show this again</button>
+                <button @click="isOpen = false" class="button">Close</button>
+            </div>
+        </template>
+    </Modal>
+    <SavesManager ref="savesManager" />
+</template>
+
+<script setup lang="ts">
+import projInfo from "data/projInfo.json";
+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(() => {
+    if (
+        projInfo.disableHealthWarning === false &&
+        settings.showHealthWarning &&
+        state.mouseActivity.filter(i => i).length > 6
+    ) {
+        isOpen.value = true;
+    }
+});
+
+function neverShow() {
+    settings.showHealthWarning = false;
+    isOpen.value = false;
+}
+</script>
+
+<style scoped>
+.vga-modal-header {
+    padding-top: 10px;
+    margin-left: 10px;
+}
+
+.vga-footer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.vga-footer button {
+    margin: 0 10px;
+}
+
+p {
+    margin-bottom: 10px;
+}
+</style>
--- a/src/components/modals/CloudSaveResolver.vue
+++ b/src/components/modals/CloudSaveResolver.vue
@ -0,0 +1,228 @@
+<template>
+    <Modal v-model="isOpen" width="960px" ref="modal" :prevent-closing="true">
+        <template v-slot:header>
+            <div class="cloud-saves-modal-header">
+                <h2>Cloud {{ pluralizedSave }} loaded!</h2>
+            </div>
+        </template>
+        <template v-slot:body>
+            <div>
+                Upon loading, your cloud {{ pluralizedSave }}
+                {{ conflictingSaves.length > 1 ? "appear" : "appears" }} to be out of sync with your
+                local {{ pluralizedSave }}. Which
+                {{ pluralizedSave }}
+                do you want to keep?
+            </div>
+            <br />
+            <div
+                v-for="(conflict, i) in unref(conflictingSaves)"
+                :key="conflict.id"
+                class="conflict-container"
+            >
+                <div @click="selectCloud(i)" :class="{ selected: selectedSaves[i] === 'cloud' }">
+                    <h2>
+                        Cloud
+                        <span
+                            v-if="(conflict.cloud.time ?? 0) > (conflict.local.time ?? 0)"
+                            class="note"
+                            >(more recent)</span
+                        >
+                        <span
+                            v-if="
+                                (conflict.cloud.timePlayed ?? 0) > (conflict.local.timePlayed ?? 0)
+                            "
+                            class="note"
+                            >(more playtime)</span
+                        >
+                    </h2>
+                    <Save :save="conflict.cloud" :readonly="true" />
+                </div>
+                <div @click="selectLocal(i)" :class="{ selected: selectedSaves[i] === 'local' }">
+                    <h2>
+                        Local
+                        <span
+                            v-if="(conflict.cloud.time ?? 0) <= (conflict.local.time ?? 0)"
+                            class="note"
+                            >(more recent)</span
+                        >
+                        <span
+                            v-if="
+                                (conflict.cloud.timePlayed ?? 0) <= (conflict.local.timePlayed ?? 0)
+                            "
+                            class="note"
+                            >(more playtime)</span
+                        >
+                    </h2>
+                    <Save :save="conflict.local" :readonly="true" />
+                </div>
+                <div
+                    @click="selectBoth(i)"
+                    :class="{ selected: selectedSaves[i] === 'both' }"
+                    style="flex-basis: 30%"
+                >
+                    <h2>Both</h2>
+                    <div class="save">Keep Both</div>
+                </div>
+            </div>
+        </template>
+        <template v-slot:footer>
+            <div class="cloud-saves-footer">
+                <button @click="close" class="button">Confirm</button>
+            </div>
+        </template>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import { stringifySave } from "game/player";
+import settings from "game/settings";
+import LZString from "lz-string";
+import { conflictingSaves, galaxy } from "util/galaxy";
+import { getUniqueID, save, setupInitialStore } from "util/save";
+import { ComponentPublicInstance, computed, ref, unref, watch } from "vue";
+import Modal from "./Modal.vue";
+import Save from "./Save.vue";
+
+const isOpen = ref(false);
+// True means replacing local save with cloud save
+const selectedSaves = ref<("cloud" | "local" | "both")[]>([]);
+
+const pluralizedSave = computed(() => (conflictingSaves.value.length > 1 ? "saves" : "save"));
+
+const modal = ref<ComponentPublicInstance<typeof Modal> | null>(null);
+
+watch(
+    () => conflictingSaves.value.length > 0,
+    shouldOpen => {
+        if (shouldOpen) {
+            selectedSaves.value = conflictingSaves.value.map(({ local, cloud }) => {
+                return (local.time ?? 0) < (cloud.time ?? 0) ? "cloud" : "local";
+            });
+            isOpen.value = true;
+        }
+    },
+    { immediate: true }
+);
+
+watch(
+    () => modal.value?.isOpen,
+    open => {
+        if (open === false) {
+            conflictingSaves.value = [];
+        }
+    }
+);
+
+function selectLocal(index: number) {
+    selectedSaves.value[index] = "local";
+}
+
+function selectCloud(index: number) {
+    selectedSaves.value[index] = "cloud";
+}
+
+function selectBoth(index: number) {
+    selectedSaves.value[index] = "both";
+}
+
+function close() {
+    for (let i = 0; i < selectedSaves.value.length; i++) {
+        const { slot, local, cloud } = conflictingSaves.value[i];
+        switch (selectedSaves.value[i]) {
+            case "local":
+                // Replace cloud save with local
+                galaxy.value
+                    ?.save(
+                        slot,
+                        LZString.compressToUTF16(stringifySave(setupInitialStore(local))),
+                        cloud.name
+                    )
+                    .catch(console.error);
+                break;
+            case "cloud":
+                // Replace local save with cloud
+                save(setupInitialStore(cloud));
+                break;
+            case "both":
+                // Get a new save ID for the cloud save, and sync the local one to the cloud
+                const id = getUniqueID();
+                save({ ...setupInitialStore(cloud), id });
+                settings.saves.push(id);
+                galaxy.value
+                    ?.save(
+                        slot,
+                        LZString.compressToUTF16(stringifySave(setupInitialStore(local))),
+                        cloud.name
+                    )
+                    .catch(console.error);
+                break;
+        }
+    }
+    isOpen.value = false;
+}
+</script>
+
+<style scoped>
+.cloud-saves-modal-header {
+    padding: 10px 0;
+    margin-left: 10px;
+}
+
+.cloud-saves-footer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.cloud-saves-footer button {
+    margin: 0 10px;
+}
+
+.conflict-container {
+    display: flex;
+}
+
+.conflict-container > * {
+    flex-basis: 50%;
+    display: flex;
+    flex-flow: column;
+    margin: 0;
+}
+
+.conflict-container + .conflict-container {
+    margin-top: 1em;
+}
+
+.conflict-container h2 {
+    display: flex;
+    flex-flow: column wrap;
+    height: 1.5em;
+    margin: 0;
+}
+
+.note {
+    font-size: x-small;
+    opacity: 0.7;
+    margin-right: 1em;
+}
+
+.save {
+    border: solid 4px var(--outline);
+    padding: 4px;
+    background: var(--raised-background);
+    margin: var(--feature-margin);
+    display: flex;
+    align-items: center;
+    min-height: 30px;
+    height: 100%;
+}
+</style>
+
+<style>
+.conflict-container .save {
+    cursor: pointer;
+}
+
+.conflict-container .selected .save {
+    border-color: var(--bought);
+}
+</style>
--- a/src/components/modals/GameOverScreen.vue
+++ b/src/components/modals/GameOverScreen.vue
@ -37,14 +37,14 @@
 </template>

 <script setup lang="ts">
-import Modal from "components/Modal.vue";
 import { hasWon } from "data/projEntry";
 import projInfo from "data/projInfo.json";
 import player from "game/player";
 import { formatTime } from "util/bignum";
 import { loadSave, newSave } from "util/save";
 import { computed, toRef } from "vue";
-import Toggle from "./fields/Toggle.vue";
+import Toggle from "../fields/Toggle.vue";
+import Modal from "./Modal.vue";

 const { title, logo, discordName, discordLink, versionNumber, versionTitle } = projInfo;

--- a/src/components/modals/Info.vue
+++ b/src/components/modals/Info.vue
@ -60,7 +60,6 @@
 </template>

 <script setup lang="tsx">
-import Modal from "components/Modal.vue";
 import type Changelog from "data/Changelog.vue";
 import projInfo from "data/projInfo.json";
 import { jsx } from "features/feature";
@ -68,12 +67,12 @@ 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 { 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);

@ -90,7 +89,7 @@ defineExpose({
 });

 function openChangelog() {
-    unref(props.changelog)?.open();
+    props.changelog?.open();
 }
 </script>

--- a/src/components/modals/Modal.vue
+++ b/src/components/modals/Modal.vue
@ -4,6 +4,7 @@
            name="modal"
            @before-enter="isAnimating = true"
            @after-leave="isAnimating = false"
+            appear
        >
            <div
                class="modal-mask"
@ -12,7 +13,7 @@
                v-bind="$attrs"
            >
                <div class="modal-wrapper">
-                    <div class="modal-container">
+                    <div class="modal-container" :width="width">
                        <div class="modal-header">
                            <slot name="header" :shown="isOpen"> default header </slot>
                        </div>
@ -40,20 +41,24 @@

 <script setup lang="ts">
 import type { FeatureNode } from "game/layers";
-import { computed, ref, toRefs, unref } from "vue";
-import Context from "./Context.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() {
-    emit("update:modelValue", false);
+    if (props.preventClosing !== true) {
+        emit("update:modelValue", false);
+    }
 }

 const isAnimating = ref(false);
--- a/src/components/modals/NaNScreen.vue
+++ b/src/components/modals/NaNScreen.vue
@ -46,7 +46,6 @@
 </template>

 <script setup lang="ts">
-import Modal from "components/Modal.vue";
 import projInfo from "data/projInfo.json";
 import player from "game/player";
 import state from "game/state";
@ -54,7 +53,8 @@ import type { DecimalSource } from "util/bignum";
 import Decimal, { format } from "util/bignum";
 import type { ComponentPublicInstance } from "vue";
 import { computed, ref, toRef, watch } from "vue";
-import Toggle from "./fields/Toggle.vue";
+import Toggle from "../fields/Toggle.vue";
+import Modal from "./Modal.vue";
 import SavesManager from "./SavesManager.vue";

 const { discordName, discordLink } = projInfo;
--- a/src/components/modals/Options.vue
+++ b/src/components/modals/Options.vue
@ -14,6 +14,7 @@
                <Toggle :title="unthrottledTitle" v-model="unthrottled" />
                <Toggle v-if="projInfo.enablePausing" :title="isPausedTitle" v-model="isPaused" />
                <Toggle :title="offlineProdTitle" v-model="offlineProd" />
+                <Toggle :title="showHealthWarningTitle" v-model="showHealthWarning" v-if="!projInfo.disableHealthWarning" />
                <Toggle :title="autosaveTitle" v-model="autosave" />
                <FeedbackButton v-if="!autosave" class="button save-button" @click="save()">Manually save</FeedbackButton>
            </div>
@ -28,20 +29,20 @@
 </template>

 <script setup lang="tsx">
-import Modal from "components/Modal.vue";
 import projInfo from "data/projInfo.json";
-import { save } from "util/save";
 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 { computed, ref, toRefs } from "vue";
-import Select from "./fields/Select.vue";
-import Toggle from "./fields/Toggle.vue";
-import FeedbackButton from "./fields/FeedbackButton.vue";
+import FeedbackButton from "../fields/FeedbackButton.vue";
+import Select from "../fields/Select.vue";
+import Toggle from "../fields/Toggle.vue";
+import Modal from "./Modal.vue";

 const isOpen = ref(false);
 const currentTab = ref("behaviour");
@ -72,7 +73,7 @@ const settingFieldsComponent = computed(() => {
    return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
 });

-const { showTPS, theme, unthrottled, alignUnits } = toRefs(settings);
+const { showTPS, theme, unthrottled, alignUnits, showHealthWarning } = toRefs(settings);
 const { autosave, offlineProd } = toRefs(player);
 const isPaused = computed({
    get() {
@ -91,10 +92,16 @@ const unthrottledTitle = jsx(() => (
 ));
 const offlineProdTitle = jsx(() => (
    <span class="option-title">
-        Offline Production<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        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">
+        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">
        Autosave<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
--- a/src/components/modals/Save.vue
+++ b/src/components/modals/Save.vue
@ -1,7 +1,7 @@
 <template>
-    <div class="save" :class="{ active: isActive }">
-        <div class="handle material-icons">drag_handle</div>
-        <div class="actions" v-if="!isEditing">
+    <div class="save" :class="{ active: isActive, readonly }">
+        <div class="handle material-icons" v-if="readonly !== true">drag_handle</div>
+        <div class="actions" v-if="!isEditing && readonly !== true">
            <FeedbackButton
                @click="emit('export')"
                class="button"
@ -40,7 +40,7 @@
                </Tooltip>
            </DangerButton>
        </div>
-        <div class="actions" v-else>
+        <div class="actions" v-else-if="readonly !== true">
            <button @click="changeName" class="button">
                <Tooltip display="Save" :direction="Direction.Left" class="info">
                    <span class="material-icons">check</span>
@ -53,12 +53,17 @@
            </button>
        </div>
        <div class="details" v-if="save.error == undefined && !isEditing">
-            <button class="button open" @click="emit('open')">
+            <Tooltip display="Synced!" :direction="Direction.Right" v-if="synced"
+                ><span class="material-icons synced">cloud</span></Tooltip
+            >
+            <button class="button open" @click="emit('open')" :disabled="readonly">
                <h3>{{ save.name }}</h3>
            </button>
            <span class="save-version">v{{ save.modVersion }}</span
            ><br />
-            <div v-if="currentTime">Last played {{ dateFormat.format(currentTime) }}</div>
+            <div v-if="currentTime" class="time">
+                Last played {{ dateFormat.format(currentTime) }}
+            </div>
        </div>
        <div class="details" v-else-if="save.error == undefined && isEditing">
            <Text v-model="newName" class="editname" @submit="changeName" />
@ -73,16 +78,18 @@
 import Tooltip from "features/tooltips/Tooltip.vue";
 import player from "game/player";
 import { Direction } from "util/common";
-import { computed, ref, toRefs, watch } from "vue";
-import DangerButton from "./fields/DangerButton.vue";
-import FeedbackButton from "./fields/FeedbackButton.vue";
-import Text from "./fields/Text.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";

-const _props = defineProps<{
+const props = defineProps<{
    save: LoadablePlayerData;
+    readonly?: boolean;
 }>();
-const { save } = toRefs(_props);
+
 const emit = defineEmits<{
    (e: "export"): void;
    (e: "open"): void;
@ -104,11 +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);
+const isActive = computed(
+    () => 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(
+    () =>
+        !props.readonly &&
+        galaxy.value?.loggedIn === true &&
+        syncedSaves.value.includes(props.save.id)
 );

 function changeName() {
@ -139,6 +154,13 @@ function changeName() {
    padding-left: 0;
 }

+.open:disabled {
+    cursor: inherit;
+    color: var(--foreground);
+    opacity: 1;
+    pointer-events: none;
+}
+
 .handle {
    flex-grow: 0;
    margin-right: 8px;
@ -152,6 +174,10 @@ function changeName() {
    margin-right: 80px;
 }

+.save.readonly .details {
+    margin-right: 0;
+}
+
 .error {
    font-size: 0.8em;
    color: var(--danger);
@ -176,6 +202,17 @@ function changeName() {
 .editname {
    margin: 0;
 }
+
+.time {
+    font-size: small;
+}
+
+.synced {
+    font-size: 100%;
+    margin-right: 0.5em;
+    vertical-align: middle;
+    cursor: default;
+}
 </style>

 <style>
@ -201,4 +238,8 @@ function changeName() {
 .save .field {
    margin: 0;
 }
+
+.details > .tooltip-container {
+    display: inline;
+}
 </style>
--- a/src/components/modals/SavesManager.vue
+++ b/src/components/modals/SavesManager.vue
@ -4,6 +4,9 @@
            <h2>Saves Manager</h2>
        </template>
        <template #body="{ shown }">
+            <div v-if="showNotSyncedWarning" style="color: var(--danger)">
+                Not all saves are synced! You may need to delete stale saves.
+            </div>
            <Draggable
                :list="settings.saves"
                handle=".handle"
@ -57,18 +60,28 @@
 </template>

 <script setup lang="ts">
-import Modal from "components/Modal.vue";
 import projInfo from "data/projInfo.json";
 import type { Player } from "game/player";
 import player, { stringifySave } from "game/player";
 import settings from "game/settings";
 import LZString from "lz-string";
-import { getUniqueID, loadSave, newSave, save } from "util/save";
+import { galaxy, syncedSaves } from "util/galaxy";
+import {
+    clearCachedSave,
+    clearCachedSaves,
+    decodeSave,
+    getCachedSave,
+    getUniqueID,
+    loadSave,
+    newSave,
+    save
+} from "util/save";
 import type { ComponentPublicInstance } from "vue";
-import { computed, nextTick, ref, shallowReactive, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import Draggable from "vuedraggable";
-import Select from "./fields/Select.vue";
-import Text from "./fields/Text.vue";
+import Select from "../fields/Select.vue";
+import Text from "../fields/Text.vue";
+import Modal from "./Modal.vue";
 import Save from "./Save.vue";

 export type LoadablePlayerData = Omit<Partial<Player>, "id"> & { id: string; error?: unknown };
@ -90,16 +103,8 @@ watch(saveToImport, importedSave => {
    if (importedSave) {
        nextTick(() => {
            try {
-                if (importedSave[0] === "{") {
-                    // plaintext. No processing needed
-                } else if (importedSave[0] === "e") {
-                    // Assumed to be base64, which starts with e
-                    importedSave = decodeURIComponent(escape(atob(importedSave)));
-                } else if (importedSave[0] === "ᯡ") {
-                    // Assumed to be lz, which starts with ᯡ
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    importedSave = LZString.decompressFromUTF16(importedSave)!;
-                } else {
+                importedSave = decodeSave(importedSave) ?? "";
+                if (importedSave === "") {
                    console.warn("Unable to determine preset encoding", importedSave);
                    importingFailed.value = true;
                    return;
@ -125,7 +130,7 @@ 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({
@ -139,48 +144,10 @@ let bank = ref(
    }, [])
 );

-const cachedSaves = shallowReactive<Record<string, LoadablePlayerData | undefined>>({});
-function getCachedSave(id: string) {
-    if (cachedSaves[id] == null) {
-        let save = localStorage.getItem(id);
-        if (save == null) {
-            cachedSaves[id] = { error: `Save doesn't exist in localStorage`, id };
-        } else if (save === "dW5kZWZpbmVk") {
-            cachedSaves[id] = { error: `Save is undefined`, id };
-        } else {
-            try {
-                if (save[0] === "{") {
-                    // plaintext. No processing needed
-                } else if (save[0] === "e") {
-                    // Assumed to be base64, which starts with e
-                    save = decodeURIComponent(escape(atob(save)));
-                } else if (save[0] === "ᯡ") {
-                    // Assumed to be lz, which starts with ᯡ
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    save = LZString.decompressFromUTF16(save)!;
-                } else {
-                    console.warn("Unable to determine preset encoding", save);
-                    importingFailed.value = true;
-                    cachedSaves[id] = { error: "Unable to determine preset encoding", id };
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    return cachedSaves[id]!;
-                }
-                cachedSaves[id] = { ...JSON.parse(save), id };
-            } catch (error) {
-                cachedSaves[id] = { error, id };
-                console.warn(
-                    `SavesManager: Failed to load info about save with id ${id}:\n${error}\n${save}`
-                );
-            }
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return cachedSaves[id]!;
-}
 // Wipe cache whenever the modal is opened
 watch(isOpen, isOpen => {
    if (isOpen) {
-        Object.keys(cachedSaves).forEach(key => delete cachedSaves[key]);
+        clearCachedSaves();
    }
 });

@ -191,6 +158,10 @@ const saves = computed(() =>
    }, {})
 );

+const showNotSyncedWarning = computed(
+    () => galaxy.value?.loggedIn === true && settings.saves.length < syncedSaves.value.length
+);
+
 function exportSave(id: string) {
    let saveToExport;
    if (player.id === id) {
@ -233,20 +204,37 @@ function duplicateSave(id: string) {
 }

 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;
+                try {
+                    if (JSON.parse(content).id === id) {
+                        return true;
+                    }
+                } catch (e) {
+                    return false;
+                }
+            });
+            if (slot != null) {
+                galaxy.value?.save(parseInt(slot), "", "").catch(console.error);
+            }
+        });
+    }
    settings.saves = settings.saves.filter((save: string) => save !== id);
    localStorage.removeItem(id);
-    cachedSaves[id] = undefined;
+    clearCachedSave(id);
 }

 function openSave(id: string) {
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    saves.value[player.id]!.time = player.time;
    save();
-    cachedSaves[player.id] = undefined;
+    clearCachedSave(player.id);
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    loadSave(saves.value[id]!);
    // Delete cached version in case of opening it again
-    cachedSaves[id] = undefined;
+    clearCachedSave(id);
 }

 function newFromPreset(preset: string) {
@ -256,16 +244,8 @@ function newFromPreset(preset: string) {
        selectedPreset.value = null;
    });

-    if (preset[0] === "{") {
-        // plaintext. No processing needed
-    } else if (preset[0] === "e") {
-        // Assumed to be base64, which starts with e
-        preset = decodeURIComponent(escape(atob(preset)));
-    } else if (preset[0] === "ᯡ") {
-        // Assumed to be lz, which starts with ᯡ
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        preset = LZString.decompressFromUTF16(preset)!;
-    } else {
+    preset = decodeSave(preset) ?? "";
+    if (preset === "") {
        console.warn("Unable to determine preset encoding", preset);
        return;
    }
@ -287,7 +267,7 @@ function editSave(id: string, newName: string) {
            save();
        } else {
            save(currSave as Player);
-            cachedSaves[id] = undefined;
+            clearCachedSave(id);
        }
    }
 }
--- a/src/data/Changelog.vue
+++ b/src/data/Changelog.vue
@ -19,7 +19,7 @@
 </template>

 <script setup lang="ts">
-import Modal from "components/Modal.vue";
+import Modal from "components/modals/Modal.vue";
 import { ref } from "vue";

 const isOpen = ref(false);
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@ -128,7 +128,7 @@ export function createResetButton<T extends ClickableOptions & ResetButtonOption
                        )}
                    </b>{" "}
                    {resetButton.conversion.gainResource.displayName}
-                    {unref(resetButton.showNextAt) != null ? (
+                    {unref(resetButton.showNextAt as ProcessedComputable<boolean>) != null ? (
                        <div>
                            <br />
                            {unref(resetButton.conversion.buyMax) ? "Next:" : "Req:"}{" "}
--- a/src/data/projInfo-schema.json
+++ b/src/data/projInfo-schema.json
@ -88,6 +88,10 @@
            "type": "string",
            "enum": ["base64", "lz", "plain"],
            "description": "The encoding to use when exporting to the clipboard. Plain-text is fast to generate but is easiest for the player to manipulate and cheat with. Base 64 is slightly slower and the string will be longer but will offer a small barrier to people trying to cheat. LZ-String is the slowest method, but produces the smallest strings and still offers a small barrier to those trying to cheat. Some sharing platforms like pastebin may automatically delete base64 encoded text, and some sites might not support all the characters used in lz-string exports."
+        },
+        "disableHealthWarning": {
+            "type": "boolean",
+            "description": "Whether or not to disable the health warning that appears to the player after excessive playtime (activity during 6 of the last 8 hours). If left enabled, the player will still be able to individually turn off the health warning in settings or by clicking \"Do not show again\" in the warning itself."
        }
    }
 }
--- a/src/data/projInfo.json
+++ b/src/data/projInfo.json
@ -22,5 +22,6 @@
 	"maxTickLength": 3600,
 	"offlineLimit": 1,
 	"enablePausing": true,
-	"exportEncoding": "base64"
+	"exportEncoding": "base64",
+	"disableHealthWarning": false
 }
--- a/src/features/achievements/Achievement.vue
+++ b/src/features/achievements/Achievement.vue
@ -23,89 +23,62 @@
    </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 { coerceComponent, isCoercableComponent } from "util/vue";
+import { Component, shallowRef, StyleValue, unref, UnwrapRef, watchEffect } from "vue";
 import { GenericAchievement } from "./achievement";

-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<{
+    visibility: Visibility | boolean;
+    display?: UnwrapRef<GenericAchievement["display"]>;
+    earned: boolean;
+    requirements?: Requirements;
+    image?: string;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    mark?: boolean | string;
+    small?: boolean;
+    id: string;
+}>();

-        const comp = shallowRef<Component | string>("");
+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(() => (
-                    <span>
-                        <Requirement />
-                        {currDisplay.effectDisplay != null ? (
-                            <div>
-                                <EffectDisplay />
-                            </div>
-                        ) : null}
-                        {currDisplay.optionsDisplay != null ? (
-                            <div class="equal-spaced">
-                                <OptionsDisplay />
-                            </div>
-                        ) : null}
-                    </span>
-                ))
-            );
-        });
-
-        return {
-            comp,
-            unref,
-            Visibility,
-            isVisible,
-            isHidden
-        };
+watchEffect(() => {
+    const currDisplay = props.display;
+    if (currDisplay == null) {
+        comp.value = "";
+        return;
    }
+    if (isCoercableComponent(currDisplay)) {
+        comp.value = coerceComponent(currDisplay);
+        return;
+    }
+    const Requirement = coerceComponent(currDisplay.requirement ? currDisplay.requirement :
+        jsx(() => displayRequirements(props.requirements ?? [])), "h3");
+    const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "", "b");
+    const OptionsDisplay = props.earned ?
+        coerceComponent(currDisplay.optionsDisplay || "", "span") :
+        "";
+    comp.value = coerceComponent(
+        jsx(() => (
+            <span>
+                <Requirement />
+                {currDisplay.effectDisplay != null ? (
+                    <div>
+                        <EffectDisplay />
+                    </div>
+                ) : null}
+                {currDisplay.optionsDisplay != null ? (
+                    <div class="equal-spaced">
+                        <OptionsDisplay />
+                    </div>
+                ) : null}
+            </span>
+        ))
+    );
 });
 </script>

--- a/src/features/achievements/achievement.tsx
+++ b/src/features/achievements/achievement.tsx
@ -1,5 +1,4 @@
-import { computed } from "@vue/reactivity";
-import { isArray } from "@vue/shared";
+import { computed } from "vue";
 import Select from "components/fields/Select.vue";
 import AchievementComponent from "features/achievements/Achievement.vue";
 import { GenericDecorator } from "features/decorators/common";
@ -208,7 +207,7 @@ export function createAchievement<T extends AchievementOptions>(
                        unref(achievement.earned) &&
                        !(
                            display != null &&
-                            typeof display == "object" &&
+                            typeof display === "object" &&
                            "optionsDisplay" in (display as Record<string, unknown>)
                        )
                    ) {
@ -275,7 +274,7 @@ export function createAchievement<T extends AchievementOptions>(
            const requirements = [
                createVisibilityRequirement(genericAchievement),
                createBooleanRequirement(() => !genericAchievement.earned.value),
-                ...(isArray(achievement.requirements)
+                ...(Array.isArray(achievement.requirements)
                    ? achievement.requirements
                    : [achievement.requirements])
            ];
@ -306,18 +305,20 @@ const msDisplayOptions = Object.values(AchievementDisplay).map(option => ({
    value: option
 }));

-registerSettingField(
-    jsx(() => (
-        <Select
-            title={jsx(() => (
-                <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}
-        />
-    ))
+globalBus.on("setupVue", () =>
+    registerSettingField(
+        jsx(() => (
+            <Select
+                title={jsx(() => (
+                    <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}
+            />
+        ))
+    )
 );
--- a/src/features/action.tsx
+++ b/src/features/action.tsx
@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import ClickableComponent from "features/clickables/Clickable.vue";
 import {
    Component,
@ -31,7 +30,7 @@ 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 { Decorator, GenericDecorator } from "./decorators/common";
+import { GenericDecorator } from "./decorators/common";

 /** A symbol used to identify {@link Action} features. */
 export const ActionType = Symbol("Action");
@ -157,7 +156,7 @@ export function createAction<T extends ActionOptions>(
                }
            ];
            const originalStyle = unref(style);
-            if (isArray(originalStyle)) {
+            if (Array.isArray(originalStyle)) {
                currStyle.push(...originalStyle);
            } else if (originalStyle != null) {
                currStyle.push(originalStyle);
@ -219,7 +218,7 @@ export function createAction<T extends ActionOptions>(

        const onClick = action.onClick.bind(action);
        action.onClick = function () {
-            if (unref(action.canClick) === false) {
+            if (unref(action.canClick as ProcessedComputable<boolean>) === false) {
                return;
            }
            const amount = Decimal.div(progress.value, unref(genericAction.duration));
--- a/src/features/bars/Bar.vue
+++ b/src/features/bars/Bar.vue
@ -41,107 +41,68 @@
    </div>
 </template>

-<script lang="ts">
-import MarkNode from "components/MarkNode.vue";
-import Node from "components/Node.vue";
+<script setup lang="ts">
 import { CoercableComponent, isHidden, isVisible, Visibility } from "features/feature";
 import type { DecimalSource } from "util/bignum";
 import Decimal from "util/bignum";
 import { Direction } from "util/common";
-import { computeOptionalComponent, processedPropType, unwrapRef } from "util/vue";
+import { computeOptionalComponent } from "util/vue";
 import type { CSSProperties, StyleValue } from "vue";
-import { computed, defineComponent, toRefs, unref } from "vue";
+import { computed, toRef, unref } from "vue";

-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<{
+    progress: DecimalSource;
+    width: number;
+    height: number;
+    direction: Direction;
+    display?: CoercableComponent;
+    visibility: Visibility | boolean;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    borderStyle?: StyleValue;
+    textStyle?: StyleValue;
+    baseStyle?: StyleValue;
+    fillStyle?: StyleValue;
+    mark?: boolean | string;
+    id: string;
+}>();

-        const normalizedProgress = computed(() => {
-            let progressNumber =
-                progress.value instanceof Decimal
-                    ? progress.value.toNumber()
-                    : Number(progress.value);
-            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"
-            };
-            switch (unref(direction)) {
-                case Direction.Up:
-                    barStyle.clipPath = `inset(${normalizedProgress.value}% 0% 0% 0%)`;
-                    barStyle.width = unwrapRef(width) + 1 + "px";
-                    break;
-                case Direction.Down:
-                    barStyle.clipPath = `inset(0% 0% ${normalizedProgress.value}% 0%)`;
-                    barStyle.width = unwrapRef(width) + 1 + "px";
-                    break;
-                case Direction.Right:
-                    barStyle.clipPath = `inset(0% ${normalizedProgress.value}% 0% 0%)`;
-                    break;
-                case Direction.Left:
-                    barStyle.clipPath = `inset(0% 0% 0% ${normalizedProgress.value}%)`;
-                    break;
-                case Direction.Default:
-                    barStyle.clipPath = "inset(0% 50% 0% 0%)";
-                    break;
-            }
-            return barStyle;
-        });
-
-        const component = computeOptionalComponent(display);
-
-        return {
-            normalizedProgress,
-            barStyle,
-            component,
-            unref,
-            Visibility,
-            isVisible,
-            isHidden
-        };
-    }
+const normalizedProgress = computed(() => {
+    let progressNumber =
+        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: props.width + 0.5 + "px",
+        height: props.height + 0.5 + "px"
+    };
+    switch (props.direction) {
+        case Direction.Up:
+            barStyle.clipPath = `inset(${normalizedProgress.value}% 0% 0% 0%)`;
+            barStyle.width = props.width + 1 + "px";
+            break;
+        case Direction.Down:
+            barStyle.clipPath = `inset(0% 0% ${normalizedProgress.value}% 0%)`;
+            barStyle.width = props.width + 1 + "px";
+            break;
+        case Direction.Right:
+            barStyle.clipPath = `inset(0% ${normalizedProgress.value}% 0% 0%)`;
+            break;
+        case Direction.Left:
+            barStyle.clipPath = `inset(0% 0% 0% ${normalizedProgress.value}%)`;
+            break;
+        case Direction.Default:
+            barStyle.clipPath = "inset(0% 50% 0% 0%)";
+            break;
+    }
+    return barStyle;
+});
+
+const component = computeOptionalComponent(toRef(props, "display"));
 </script>

 <style scoped>
--- a/src/features/challenges/Challenge.vue
+++ b/src/features/challenges/Challenge.vue
@ -30,7 +30,7 @@
    </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";
@ -39,139 +39,92 @@ 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 { coerceComponent, isCoercableComponent } from "util/vue";
+import type { Component, UnwrapRef } from "vue";
+import { computed, shallowRef, unref, watchEffect } from "vue";

-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: boolean;
+    maxed: boolean;
+    canComplete: boolean;
+    display?: UnwrapRef<GenericChallenge["display"]>;
+    requirements?: Requirements;
+    visibility: Visibility | boolean;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    completed: boolean;
+    canStart: boolean;
+    mark?: boolean | string;
+    id: string;
+    toggle: VoidFunction;
+}>();

-        const buttonText = computed(() => {
-            if (active.value) {
-                return canComplete.value ? "Finish" : "Exit Early";
-            }
-            if (maxed.value) {
-                return "Completed";
-            }
-            return "Start";
-        });
-
-        const comp = shallowRef<Component | string>("");
-
-        const notifyStyle = computed(() => {
-            const currActive = unwrapRef(active);
-            const currCanComplete = unwrapRef(canComplete);
-            if (currActive) {
-                if (currCanComplete) {
-                    return getHighNotifyStyle();
-                }
-                return getNotifyStyle();
-            }
-            return {};
-        });
-
-        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");
-            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 />
-                        <div>
-                            <br />
-                            Goal: <Goal />
-                        </div>
-                        {currDisplay.reward != null ? (
-                            <div>
-                                <br />
-                                Reward: <Reward />
-                            </div>
-                        ) : null}
-                        {currDisplay.effectDisplay != null ? (
-                            <div>
-                                Currently: <EffectDisplay />
-                            </div>
-                        ) : null}
-                    </span>
-                ))
-            );
-        });
-
-        return {
-            buttonText,
-            notifyStyle,
-            comp,
-            Visibility,
-            isVisible,
-            isHidden,
-            unref
-        };
+const buttonText = computed(() => {
+    if (props.active) {
+        return props.canComplete ? "Finish" : "Exit Early";
    }
+    if (props.maxed) {
+        return "Completed";
+    }
+    return "Start";
+});
+
+const comp = shallowRef<Component | string>("");
+
+const notifyStyle = computed(() => {
+    const currActive = props.active;
+    const currCanComplete = props.canComplete;
+    if (currActive) {
+        if (currCanComplete) {
+            return getHighNotifyStyle();
+        }
+        return getNotifyStyle();
+    }
+    return {};
+});
+
+watchEffect(() => {
+    const currDisplay = props.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");
+    const Goal = coerceComponent(currDisplay.goal != null ? currDisplay.goal : jsx(() => displayRequirements(props.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 />
+                <div>
+                    <br />
+                    Goal: <Goal />
+                </div>
+                {currDisplay.reward != null ? (
+                    <div>
+                        <br />
+                        Reward: <Reward />
+                    </div>
+                ) : null}
+                {currDisplay.effectDisplay != null ? (
+                    <div>
+                        Currently: <EffectDisplay />
+                    </div>
+                ) : null}
+            </span>
+        ))
+    );
 });
 </script>

--- a/src/features/challenges/challenge.tsx
+++ b/src/features/challenges/challenge.tsx
@ -1,4 +1,3 @@
-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";
@ -348,7 +347,7 @@ export function createActiveChallenge(
 export function isAnyChallengeActive(
    challenges: GenericChallenge[] | Ref<GenericChallenge | null>
 ): Ref<boolean> {
-    if (isArray(challenges)) {
+    if (Array.isArray(challenges)) {
        challenges = createActiveChallenge(challenges);
    }
    return computed(() => (challenges as Ref<GenericChallenge | null>).value != null);
@ -364,17 +363,19 @@ globalBus.on("loadSettings", settings => {
    setDefault(settings, "hideChallenges", false);
 });

-registerSettingField(
-    jsx(() => (
-        <Toggle
-            title={jsx(() => (
-                <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}
-        />
-    ))
+globalBus.on("setupVue", () =>
+    registerSettingField(
+        jsx(() => (
+            <Toggle
+                title={jsx(() => (
+                    <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}
+            />
+        ))
+    )
 );
--- a/src/features/clickables/Clickable.vue
+++ b/src/features/clickables/Clickable.vue
@ -27,7 +27,7 @@
    </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";
@ -37,90 +37,53 @@ import { isHidden, isVisible, jsx, Visibility } from "features/feature";
 import {
    coerceComponent,
    isCoercableComponent,
-    processedPropType,
-    setupHoldToClick,
-    unwrapRef
+    setupHoldToClick
 } from "util/vue";
-import type { Component, PropType, UnwrapRef } from "vue";
-import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
+import type { Component, UnwrapRef } from "vue";
+import { shallowRef, toRef, unref, watchEffect } 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<{
+    display: UnwrapRef<GenericClickable["display"]>;
+    visibility: Visibility | boolean;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    onClick?: (e?: MouseEvent | TouchEvent) => void;
+    onHold?: VoidFunction;
+    canClick: boolean;
+    small?: boolean;
+    mark?: boolean | string;
+    id: string;
+}>();

-        const comp = shallowRef<Component | string>("");
+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 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
-        };
+watchEffect(() => {
+    const currDisplay = props.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(toRef(props, "onClick"), toRef(props, "onHold"));
 </script>

 <style scoped>
--- a/src/features/clickables/clickable.ts
+++ b/src/features/clickables/clickable.ts
@ -129,7 +129,7 @@ export function createClickable<T extends ClickableOptions>(
        if (clickable.onClick) {
            const onClick = clickable.onClick.bind(clickable);
            clickable.onClick = function (e) {
-                if (unref(clickable.canClick) !== false) {
+                if (unref(clickable.canClick as ProcessedComputable<boolean>) !== false) {
                    onClick(e);
                }
            };
@ -137,7 +137,7 @@ export function createClickable<T extends ClickableOptions>(
        if (clickable.onHold) {
            const onHold = clickable.onHold.bind(clickable);
            clickable.onHold = function () {
-                if (unref(clickable.canClick) !== false) {
+                if (unref(clickable.canClick as ProcessedComputable<boolean>) !== false) {
                    onHold();
                }
            };
--- a/src/features/conversion.ts
+++ b/src/features/conversion.ts
@ -228,7 +228,7 @@ export function createIndependentConversion<S extends ConversionOptions>(
                        conversion.baseResource.value
                    )
                ).max(conversion.gainResource.value);
-                if (unref(conversion.buyMax) === false) {
+                if (unref(conversion.buyMax as ProcessedComputable<boolean>) === false) {
                    gain = gain.min(Decimal.add(conversion.gainResource.value, 1));
                }
                return gain;
@ -245,7 +245,7 @@ export function createIndependentConversion<S extends ConversionOptions>(
                    .floor()
                    .max(0);

-                if (unref(conversion.buyMax) === false) {
+                if (unref(conversion.buyMax as ProcessedComputable<boolean>) === false) {
                    gain = gain.min(1);
                }
                return gain;
--- a/src/features/feature.ts
+++ b/src/features/feature.ts
@ -2,6 +2,7 @@ import Decimal from "util/bignum";
 import { DoNotCache, ProcessedComputable } from "util/computed";
 import type { CSSProperties, DefineComponent } from "vue";
 import { isRef, unref } from "vue";
+import { JSX } from "vue/jsx-runtime";

 /**
 * A symbol to use as a key for a vue component a feature can be rendered with
@ -92,7 +93,7 @@ export function setDefault<T, K extends keyof T>(
    key: K,
    value: T[K]
 ): asserts object is Exclude<T, K> & Required<Pick<T, K>> {
-    if (object[key] === undefined && value != undefined) {
+    if (object[key] == null && value != null) {
        object[key] = value;
    }
 }
@ -135,7 +136,7 @@ export function excludeFeatures(obj: Record<string, unknown>, ...types: symbol[]
            if (value != null && typeof value === "object") {
                if (
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    typeof (value as Record<string, any>).type == "symbol" &&
+                    typeof (value as Record<string, any>).type === "symbol" &&
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    !types.includes((value as Record<string, any>).type)
                ) {
--- a/src/features/grids/Grid.vue
+++ b/src/features/grids/Grid.vue
@ -7,7 +7,7 @@
        class="table-grid"
    >
        <div v-for="row in unref(rows)" class="row-grid" :class="{ mergeAdjacent }" :key="row">
-            <GridCell
+            <GridCellVue
                v-for="col in unref(cols)"
                :key="col"
                v-bind="gatherCellProps(unref(cells)[row * 100 + col])"
@ -16,45 +16,26 @@
    </div>
 </template>

-<script lang="ts">
+<script setup lang="ts">
 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 settings from "game/settings";
-import { processedPropType } from "util/vue";
-import { computed, defineComponent, unref } from "vue";
+import { computed, unref } from "vue";
 import GridCellVue from "./GridCell.vue";

-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);
+defineProps<{
+    visibility: Visibility | boolean;
+    rows: number;
+    cols: number;
+    cells: Record<string, GridCell>;
+}>();

-        function gatherCellProps(cell: GridCell) {
-            const { visibility, onClick, onHold, display, title, style, canClick, id } = cell;
-            return { visibility, onClick, onHold, display, title, style, canClick, id };
-        }
+const mergeAdjacent = computed(() => themes[settings.theme].mergeAdjacent);

-        return { unref, gatherCellProps, Visibility, mergeAdjacent, isVisible, isHidden };
-    }
-});
+function gatherCellProps(cell: GridCell) {
+    const { visibility, onClick, onHold, display, title, style, canClick, id } = cell;
+    return { visibility, onClick, onHold, display, title, style, canClick, id };
+}
 </script>
--- a/src/features/grids/GridCell.vue
+++ b/src/features/grids/GridCell.vue
@ -22,7 +22,7 @@
    </button>
 </template>

-<script lang="ts">
+<script setup lang="ts">
 import "components/common/features.css";
 import Node from "components/Node.vue";
 import type { CoercableComponent, StyleValue } from "features/feature";
@ -30,58 +30,26 @@ import { isHidden, isVisible, Visibility } from "features/feature";
 import {
    computeComponent,
    computeOptionalComponent,
-    processedPropType,
    setupHoldToClick
 } from "util/vue";
-import type { PropType } from "vue";
-import { defineComponent, toRefs, unref } from "vue";
+import { toRef, unref } from "vue";

-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<{
+    visibility: Visibility | boolean;
+    onClick?: (e?: MouseEvent | TouchEvent) => void;
+    onHold?: VoidFunction;
+    display: CoercableComponent;
+    title?: CoercableComponent;
+    style?: StyleValue;
+    canClick: boolean;
+    id: string;
+}>();

-        const { start, stop } = setupHoldToClick(onClick, onHold);

-        const titleComponent = computeOptionalComponent(title);
-        const component = computeComponent(display);
+const { start, stop } = setupHoldToClick(toRef(props, "onClick"), toRef(props, "onHold"));

-        return {
-            start,
-            stop,
-            titleComponent,
-            component,
-            Visibility,
-            unref,
-            isVisible,
-            isHidden
-        };
-    }
-});
+const titleComponent = computeOptionalComponent(toRef(props, "title"));
+const component = computeComponent(toRef(props, "display"));
 </script>

 <style scoped>
--- a/src/features/grids/grid.ts
+++ b/src/features/grids/grid.ts
@ -128,7 +128,7 @@ function getCellHandler(id: string): ProxyHandler<GenericGrid> {
            if (isFunction(prop)) {
                return () => prop.call(receiver, id, target.getState(id));
            }
-            if (prop != undefined || typeof key === "symbol") {
+            if (prop != null || typeof key === "symbol") {
                return prop;
            }

@ -145,7 +145,7 @@ function getCellHandler(id: string): ProxyHandler<GenericGrid> {
                    cache[key] = computed(() => prop.call(receiver, id, target.getState(id)));
                }
                return cache[key].value;
-            } else if (prop != undefined) {
+            } else if (prop != null) {
                return unref(prop);
            }

@ -153,7 +153,7 @@ function getCellHandler(id: string): ProxyHandler<GenericGrid> {
            prop = (target as any)[`on${key}`];
            if (isFunction(prop)) {
                return () => prop.call(receiver, id, target.getState(id));
-            } else if (prop != undefined) {
+            } else if (prop != null) {
                return prop;
            }

@ -318,7 +318,7 @@ export function createGrid<T extends GridOptions>(
            return grid.id + "-" + cell;
        };
        grid.getState = function (this: GenericGrid, cell: string | number) {
-            if (this.cellState.value[cell] != undefined) {
+            if (this.cellState.value[cell] != null) {
                return cellState.value[cell];
            }
            return this.cells[cell].startState;
--- a/src/features/hotkey.tsx
+++ b/src/features/hotkey.tsx
@ -99,40 +99,57 @@ document.onkeydown = function (e) {
    if (hasWon.value && !player.keepGoing) {
        return;
    }
-    let key = e.key;
-    if (uppercaseNumbers.includes(key)) {
-        key = "shift+" + uppercaseNumbers.indexOf(key);
+    const keysToCheck: string[] = [e.key];
+    if (e.shiftKey && e.ctrlKey) {
+        keysToCheck.splice(0, 1);
+        keysToCheck.push("ctrl+shift+" + e.key.toUpperCase());
+        keysToCheck.push("shift+ctrl+" + e.key.toUpperCase());
+        if (uppercaseNumbers.includes(e.key)) {
+            keysToCheck.push("ctrl+shift+" + uppercaseNumbers.indexOf(e.key));
+            keysToCheck.push("shift+ctrl+" + uppercaseNumbers.indexOf(e.key));
+        } else {
+            keysToCheck.push("ctrl+shift+" + e.key.toLowerCase());
+            keysToCheck.push("shift+ctrl+" + e.key.toLowerCase());
+        }
+    } else if (uppercaseNumbers.includes(e.key)) {
+        keysToCheck.push("shift+" + e.key);
+        keysToCheck.push("shift+" + uppercaseNumbers.indexOf(e.key));
    } else if (e.shiftKey) {
-        key = "shift+" + key;
+        keysToCheck.push("shift+" + e.key.toUpperCase());
+        keysToCheck.push("shift+" + e.key.toLowerCase());
+    } else if (e.ctrlKey) {
+        // remove e.key since the key doesn't change based on ctrl being held or not
+        keysToCheck.splice(0, 1);
+        keysToCheck.push("ctrl+" + e.key);
    }
-    if (e.ctrlKey) {
-        key = "ctrl+" + key;
-    }
-    const hotkey = hotkeys[key] ?? hotkeys[key.toLowerCase()];
+    const hotkey = hotkeys[keysToCheck.find(key => key in hotkeys) ?? ""];
    if (hotkey && unref(hotkey.enabled)) {
        e.preventDefault();
        hotkey.onPress();
    }
 };

-registerInfoComponent(
-    jsx(() => {
-        const keys = Object.values(hotkeys).filter(hotkey => unref(hotkey?.enabled));
-        if (keys.length === 0) {
-            return "";
-        }
-        return (
-            <div>
-                <br />
-                <h4>Hotkeys</h4>
-                <div style="column-count: 2">
-                    {keys.map(hotkey => (
-                        <div>
-                            <Hotkey hotkey={hotkey as GenericHotkey} /> {hotkey?.description}
-                        </div>
-                    ))}
+globalBus.on("setupVue", () =>
+    registerInfoComponent(
+        jsx(() => {
+            const keys = Object.values(hotkeys).filter(hotkey => unref(hotkey?.enabled));
+            if (keys.length === 0) {
+                return "";
+            }
+            return (
+                <div>
+                    <br />
+                    <h4>Hotkeys</h4>
+                    <div style="column-count: 2">
+                        {keys.map(hotkey => (
+                            <div>
+                                <Hotkey hotkey={hotkey as GenericHotkey} />{" "}
+                                {unref(hotkey?.description)}
+                            </div>
+                        ))}
+                    </div>
                </div>
-            </div>
-        );
-    })
+            );
+        })
+    )
 );
--- a/src/features/infoboxes/Infobox.vue
+++ b/src/features/infoboxes/Infobox.vue
@ -28,67 +28,33 @@
    </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 { computeComponent } from "util/vue";
+import type { Ref, StyleValue } from "vue";
+import { computed, toRef, unref } from "vue";

-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<{
+    visibility: Visibility | boolean;
+    display: CoercableComponent;
+    title: CoercableComponent;
+    color?: string;
+    collapsed: Ref<boolean>;
+    style?: StyleValue;
+    titleStyle?: StyleValue;
+    bodyStyle?: StyleValue;
+    classes?: Record<string, boolean>;
+    id: string;
+}>();

-        const titleComponent = computeComponent(title);
-        const bodyComponent = computeComponent(display);
-        const stacked = computed(() => themes[settings.theme].mergeAdjacent);
-
-        return {
-            titleComponent,
-            bodyComponent,
-            stacked,
-            unref,
-            Visibility,
-            isVisible,
-            isHidden
-        };
-    }
-});
+const titleComponent = computeComponent(toRef(props, "title"));
+const bodyComponent = computeComponent(toRef(props, "display"));
+const stacked = computed(() => themes[settings.theme].mergeAdjacent);
 </script>

 <style scoped>
--- a/src/features/links/Link.vue
+++ b/src/features/links/Link.vue
@ -14,47 +14,46 @@
 import type { Link } from "features/links/links";
 import type { FeatureNode } from "game/layers";
 import { kebabifyObject } from "util/vue";
-import { computed, toRefs } from "vue";
+import { computed } from "vue";

-const _props = defineProps<{
+const props = defineProps<{
    link: Link;
    startNode: FeatureNode;
    endNode: FeatureNode;
    boundingRect: DOMRect | undefined;
 }>();
-const props = toRefs(_props);

 const startPosition = computed(() => {
-    const rect = props.startNode.value.rect;
-    const boundingRect = props.boundingRect.value;
+    const rect = props.startNode.rect;
+    const boundingRect = props.boundingRect;
    const position = boundingRect
        ? {
              x: rect.x + rect.width / 2 - boundingRect.x,
              y: rect.y + rect.height / 2 - boundingRect.y
          }
        : { x: 0, y: 0 };
-    if (props.link.value.offsetStart) {
-        position.x += props.link.value.offsetStart.x;
-        position.y += props.link.value.offsetStart.y;
+    if (props.link.offsetStart) {
+        position.x += props.link.offsetStart.x;
+        position.y += props.link.offsetStart.y;
    }
    return position;
 });

 const endPosition = computed(() => {
-    const rect = props.endNode.value.rect;
-    const boundingRect = props.boundingRect.value;
+    const rect = props.endNode.rect;
+    const boundingRect = props.boundingRect;
    const position = boundingRect
        ? {
              x: rect.x + rect.width / 2 - boundingRect.x,
              y: rect.y + rect.height / 2 - boundingRect.y
          }
        : { x: 0, y: 0 };
-    if (props.link.value.offsetEnd) {
-        position.x += props.link.value.offsetEnd.x;
-        position.y += props.link.value.offsetEnd.y;
+    if (props.link.offsetEnd) {
+        position.x += props.link.offsetEnd.x;
+        position.y += props.link.offsetEnd.y;
    }
    return position;
 });

-const linkProps = computed(() => kebabifyObject(_props.link as unknown as Record<string, unknown>));
+const linkProps = computed(() => kebabifyObject(props.link as unknown as Record<string, unknown>));
 </script>
--- a/src/features/links/Links.vue
+++ b/src/features/links/Links.vue
@ -16,11 +16,10 @@
 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, watch } from "vue";
 import LinkVue from "./Link.vue";

-const _props = defineProps<{ links?: Link[] }>();
-const links = toRef(_props, "links");
+const props = defineProps<{ links?: Link[] }>();

 const resizeListener = ref<Element | null>(null);

@ -36,7 +35,7 @@ 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.startNode.id]?.rect) ?? []
+        props.links?.filter(link => n[link.startNode.id]?.rect && n[link.endNode.id]?.rect) ?? []
    );
 });
 </script>
--- a/src/features/particles/Particles.vue
+++ b/src/features/particles/Particles.vue
@ -7,78 +7,61 @@
    />
 </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";

-// 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 props = defineProps<{
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    onInit: (app: Application) => void;
+    id: string;
+    onContainerResized?: (rect: DOMRect) => void;
+    onHotReload?: VoidFunction;
+}>();

-        const resizeObserver = new ResizeObserver(updateBounds);
-        const resizeListener = shallowRef<HTMLElement | null>(null);
+const app = shallowRef<null | Application>(null);

-        onMounted(() => {
-            // ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element
-            const resListener = resizeListener.value;
-            if (resListener != null) {
-                resizeObserver.observe(resListener);
-                app.value = new Application({
-                    resizeTo: resListener,
-                    backgroundAlpha: 0
-                });
-                resizeListener.value?.appendChild(app.value.view);
-                props.onInit?.(app.value as Application);
-            }
-            updateBounds();
-            if (props.onHotReload) {
-                nextTick(props.onHotReload);
-            }
+const resizeObserver = new ResizeObserver(updateBounds);
+const resizeListener = shallowRef<HTMLElement | null>(null);
+
+onMounted(() => {
+    // ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element
+    const resListener = resizeListener.value;
+    if (resListener != null) {
+        resizeObserver.observe(resListener);
+        app.value = new Application({
+            resizeTo: resListener,
+            backgroundAlpha: 0
        });
-        onBeforeUnmount(() => {
-            app.value?.destroy();
-        });
-
-        let isDirty = true;
-        function updateBounds() {
-            if (isDirty) {
-                isDirty = false;
-                nextTick(() => {
-                    if (resizeListener.value != null) {
-                        props.onContainerResized?.(resizeListener.value.getBoundingClientRect());
-                    }
-                    isDirty = true;
-                });
-            }
-        }
-        globalBus.on("fontsLoaded", updateBounds);
-
-        return {
-            unref,
-            resizeListener
-        };
+        resizeListener.value?.appendChild(app.value.view);
+        props.onInit?.(app.value as Application);
+    }
+    updateBounds();
+    if (props.onHotReload) {
+        nextTick(props.onHotReload);
    }
 });
+onBeforeUnmount(() => {
+    app.value?.destroy();
+});
+
+let isDirty = true;
+function updateBounds() {
+    if (isDirty) {
+        isDirty = false;
+        nextTick(() => {
+            if (resizeListener.value != null) {
+                props.onContainerResized?.(resizeListener.value.getBoundingClientRect());
+            }
+            isDirty = true;
+        });
+    }
+}
+globalBus.on("fontsLoaded", updateBounds);
 </script>

 <style scoped>
--- a/src/features/repeatable.tsx
+++ b/src/features/repeatable.tsx
@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import ClickableComponent from "features/clickables/Clickable.vue";
 import type {
    CoercableComponent,
@ -162,7 +161,7 @@ export function createRepeatable<T extends RepeatableOptions>(
            canMaximize: true
        } as const;
        const visibilityRequirement = createVisibilityRequirement(repeatable as GenericRepeatable);
-        if (isArray(repeatable.requirements)) {
+        if (Array.isArray(repeatable.requirements)) {
            repeatable.requirements.unshift(visibilityRequirement);
            repeatable.requirements.push(limitRequirement);
        } else {
--- a/src/features/resources/MainDisplay.vue
+++ b/src/features/resources/MainDisplay.vue
@ -25,23 +25,19 @@ 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 { ComponentPublicInstance, computed, ref, StyleValue, toRef } from "vue";

-const _props = defineProps<{
+const props = defineProps<{
    resource: Resource;
    color?: string;
    classes?: Record<string, boolean>;
    style?: StyleValue;
    effectDisplay?: CoercableComponent;
 }>();
-const props = toRefs(_props);

 const effectRef = ref<ComponentPublicInstance | null>(null);

-const effectComponent = computeOptionalComponent(
-    props.effectDisplay as Ref<CoercableComponent | undefined>
-);
+const effectComponent = computeOptionalComponent(toRef(props, "effectDisplay"));

 const showPrefix = computed(() => {
    return Decimal.lt(props.resource.value, "1e1000");
--- a/src/features/tabs/Tab.vue
+++ b/src/features/tabs/Tab.vue
@ -5,9 +5,8 @@
 <script setup lang="ts">
 import type { CoercableComponent } from "features/feature";
 import { computeComponent } from "util/vue";
-import { toRefs } from "vue";
+import { toRef } from "vue";

-const _props = defineProps<{ display: CoercableComponent }>();
-const { display } = toRefs(_props);
-const component = computeComponent(display);
+const props = defineProps<{ display: CoercableComponent }>();
+const component = computeComponent(toRef(props, "display"));
 </script>
--- a/src/features/tabs/TabButton.vue
+++ b/src/features/tabs/TabButton.vue
@ -19,61 +19,43 @@
    </button>
 </template>

-<script lang="ts">
+<script setup lang="ts">
 import type { CoercableComponent, StyleValue } from "features/feature";
 import { isHidden, isVisible, Visibility } from "features/feature";
 import { getNotifyStyle } from "game/notifications";
-import { computeComponent, processedPropType, unwrapRef } from "util/vue";
-import { computed, defineComponent, toRefs, unref } from "vue";
+import { computeComponent } from "util/vue";
+import { computed, toRef, unref } from "vue";

-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<{
+    visibility: Visibility | boolean;
+    display: CoercableComponent;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    glowColor?: string;
+    active?: boolean;
+    floating?: boolean;
+}>();

-        const component = computeComponent(display);
+const emit = defineEmits<{
+    selectTab: [];
+}>();

-        const glowColorStyle = computed(() => {
-            const color = unwrapRef(glowColor);
-            if (color == null || color === "") {
-                return {};
-            }
-            if (unref(floating)) {
-                return getNotifyStyle(color);
-            }
-            return { boxShadow: `0px 9px 5px -6px ${color}` };
-        });
+const component = computeComponent(toRef(props, "display"));

-        function selectTab() {
-            emit("selectTab");
-        }
-
-        return {
-            selectTab,
-            component,
-            glowColorStyle,
-            unref,
-            Visibility,
-            isVisible,
-            isHidden
-        };
+const glowColorStyle = computed(() => {
+    const color = props.glowColor;
+    if (color == null || color === "") {
+        return {};
    }
+    if (props.floating) {
+        return getNotifyStyle(color);
+    }
+    return { boxShadow: `0px 9px 5px -6px ${color}` };
 });
+
+function selectTab() {
+    emit("selectTab");
+}
 </script>

 <style scoped>
--- a/src/features/tabs/TabFamily.vue
+++ b/src/features/tabs/TabFamily.vue
@ -33,7 +33,7 @@
    </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";
@ -42,93 +42,60 @@ 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 { coerceComponent, deepUnref, isCoercableComponent } from "util/vue";
+import type { Component, Ref } from "vue";
+import { computed, shallowRef, unref, watchEffect } from "vue";

-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<{
+    visibility: Visibility | boolean;
+    activeTab: GenericTab | CoercableComponent | null;
+    selected: Ref<string>;
+    tabs: Record<string, GenericTabButton>;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    buttonContainerStyle?: StyleValue;
+    buttonContainerClasses?: Record<string, boolean>;
+}>();

-        const floating = computed(() => {
-            return themes[settings.theme].floatingTabs;
-        });
-
-        const component = shallowRef<Component | string>("");
-
-        watchEffect(() => {
-            const currActiveTab = unwrapRef(activeTab);
-            if (currActiveTab == null) {
-                component.value = "";
-                return;
-            }
-            if (isCoercableComponent(currActiveTab)) {
-                component.value = coerceComponent(currActiveTab);
-                return;
-            }
-            component.value = coerceComponent(unref(currActiveTab.display));
-        });
-
-        const tabClasses = computed(() => {
-            const currActiveTab = unwrapRef(activeTab);
-            const tabClasses =
-                isCoercableComponent(currActiveTab) || !currActiveTab
-                    ? undefined
-                    : unref(currActiveTab.classes);
-            return tabClasses;
-        });
-
-        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 floating = computed(() => {
+    return themes[settings.theme].floatingTabs;
 });
+
+const component = shallowRef<Component | string>("");
+
+watchEffect(() => {
+    const currActiveTab = props.activeTab;
+    if (currActiveTab == null) {
+        component.value = "";
+        return;
+    }
+    if (isCoercableComponent(currActiveTab)) {
+        component.value = coerceComponent(currActiveTab);
+        return;
+    }
+    component.value = coerceComponent(unref(currActiveTab.display));
+});
+
+const tabClasses = computed(() => {
+    const currActiveTab = props.activeTab;
+    const tabClasses =
+        isCoercableComponent(currActiveTab) || !currActiveTab
+            ? undefined
+            : unref(currActiveTab.classes);
+    return tabClasses;
+});
+
+const tabStyle = computed(() => {
+    const currActiveTab = props.activeTab;
+    return isCoercableComponent(currActiveTab) || !currActiveTab
+        ? undefined
+        : unref(currActiveTab.style);
+});
+
+function gatherButtonProps(button: GenericTabButton) {
+    const { display, style, classes, glowColor, visibility } = deepUnref(button);
+    return { display, style, classes, glowColor, visibility };
+}
 </script>

 <style scoped>
--- a/src/features/tooltips/Tooltip.vue
+++ b/src/features/tooltips/Tooltip.vue
@ -34,7 +34,7 @@
    </div>
 </template>

-<script lang="tsx">
+<script setup lang="tsx">
 import themes from "data/themes";
 import type { CoercableComponent } from "features/feature";
 import { jsx, StyleValue } from "features/feature";
@ -45,66 +45,45 @@ import type { VueFeature } from "util/vue";
 import {
    coerceComponent,
    computeOptionalComponent,
-    processedPropType,
-    renderJSX,
-    unwrapRef
+    renderJSX
 } from "util/vue";
-import type { Component, PropType } from "vue";
-import { computed, defineComponent, ref, shallowRef, toRefs, unref } from "vue";
+import type { Component } from "vue";
+import { computed, ref, shallowRef, toRef, unref } from "vue";

-export default defineComponent({
-    props: {
-        element: Object as PropType<VueFeature>,
-        display: {
-            type: processedPropType<CoercableComponent>(Object, String, Function),
-            required: true
-        },
-        style: processedPropType<StyleValue>(Object, String, Array),
-        classes: processedPropType<Record<string, boolean>>(Object),
-        direction: processedPropType<Direction>(String),
-        xoffset: processedPropType<string>(String),
-        yoffset: processedPropType<string>(String),
-        pinned: Object as PropType<Persistent<boolean>>
-    },
-    setup(props) {
-        const { element, display, pinned } = toRefs(props);
+const props = defineProps<{
+    element?: VueFeature;
+    display: CoercableComponent;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    direction?: Direction;
+    xoffset?: string;
+    yoffset?: string;
+    pinned?: Persistent<boolean>;
+}>();

-        const isHovered = ref(false);
-        const isShown = computed(() => (unwrapRef(pinned) || isHovered.value) && comp.value);
-        const comp = computeOptionalComponent(display);
+const isHovered = ref(false);
+const isShown = computed(() => (props.pinned?.value === true || isHovered.value) && comp.value);
+const comp = computeOptionalComponent(toRef(props, "display"));

-        const elementComp = shallowRef<Component | "" | null>(
-            coerceComponent(
-                jsx(() => {
-                    const currComponent = unwrapRef(element);
-                    return currComponent == null ? "" : renderJSX(currComponent);
-                })
-            )
-        );
+const elementComp = shallowRef<Component | "" | null>(
+    coerceComponent(
+        jsx(() => {
+            const currComponent = props.element;
+            return currComponent == null ? "" : renderJSX(currComponent);
+        })
+    )
+);

-        function togglePinned(e: MouseEvent) {
-            const isPinned = pinned as unknown as Persistent<boolean> | undefined; // Vue typing :/
-            if (e.shiftKey && isPinned) {
-                isPinned.value = !isPinned.value;
-                e.stopPropagation();
-                e.preventDefault();
-            }
-        }
-
-        const showPin = computed(() => unwrapRef(pinned) && themes[settings.theme].showPin);
-
-        return {
-            Direction,
-            isHovered,
-            isShown,
-            comp,
-            elementComp,
-            unref,
-            togglePinned,
-            showPin
-        };
+function togglePinned(e: MouseEvent) {
+    const isPinned = props.pinned;
+    if (e.shiftKey && isPinned != null) {
+        isPinned.value = !isPinned.value;
+        e.stopPropagation();
+        e.preventDefault();
    }
-});
+}
+
+const showPin = computed(() => props.pinned?.value === true && themes[settings.theme].showPin);
 </script>

 <style scoped>
--- a/src/features/tooltips/tooltip.ts
+++ b/src/features/tooltips/tooltip.ts
@ -1,6 +1,6 @@
 import type { CoercableComponent, GenericComponent, Replace, StyleValue } from "features/feature";
 import { Component, GatherProps, setDefault } from "features/feature";
-import { deletePersistent, Persistent, persistent } from "game/persistence";
+import { persistent } from "game/persistence";
 import { Direction } from "util/common";
 import type {
    Computable,
--- a/src/features/trees/Tree.vue
+++ b/src/features/trees/Tree.vue
@ -5,74 +5,58 @@
    <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 { coerceComponent, renderJSX } from "util/vue";
 import type { Component } from "vue";
-import { defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
+import { shallowRef, unref, watchEffect } 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: GenericTreeNode[][];
+    leftSideNodes?: GenericTreeNode[];
+    rightSideNodes?: GenericTreeNode[];
+    branches?: TreeBranch[];
+}>();

-        const nodesComp = shallowRef<Component | "">();
-        watchEffect(() => {
-            const currNodes = unwrapRef(nodes);
-            nodesComp.value = coerceComponent(
+const nodesComp = shallowRef<Component | "">();
+watchEffect(() => {
+    const currNodes = props.nodes;
+    nodesComp.value = coerceComponent(
+        jsx(() => (
+            <>
+                {currNodes.map(row => (
+                    <span class="row tree-row" style="margin: 50px auto;">
+                        {row.map(renderJSX)}
+                    </span>
+                ))}
+            </>
+        ))
+    );
+});
+
+const leftNodesComp = shallowRef<Component | "">();
+watchEffect(() => {
+    const currNodes = props.leftSideNodes;
+    leftNodesComp.value = currNodes
+        ? coerceComponent(
                jsx(() => (
-                    <>
-                        {currNodes.map(row => (
-                            <span class="row tree-row" style="margin: 50px auto;">
-                                {row.map(renderJSX)}
-                            </span>
-                        ))}
-                    </>
+                    <span class="left-side-nodes small">{currNodes.map(renderJSX)}</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 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 rightNodesComp = shallowRef<Component | "">();
+watchEffect(() => {
+    const currNodes = props.rightSideNodes;
+    rightNodesComp.value = currNodes
+        ? coerceComponent(
+                jsx(() => <span class="side-nodes small">{currNodes.map(renderJSX)}</span>)
+            )
+        : "";
 });
 </script>

--- a/src/features/trees/TreeNode.vue
+++ b/src/features/trees/TreeNode.vue
@ -33,66 +33,34 @@
    </div>
 </template>

-<script lang="ts">
+<script setup lang="tsx">
 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 type { CoercableComponent, StyleValue, Visibility } from "features/feature";
+import { isHidden, isVisible } from "features/feature";
 import {
    computeOptionalComponent,
-    isCoercableComponent,
-    processedPropType,
    setupHoldToClick
 } from "util/vue";
-import type { PropType } from "vue";
-import { defineComponent, toRefs, unref } from "vue";
+import { toRef, unref } from "vue";

-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<{
+    visibility: Visibility | boolean;
+    canClick: boolean;
+    id: string;
+    display?: CoercableComponent;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    onClick?: (e?: MouseEvent | TouchEvent) => void;
+    onHold?: VoidFunction;
+    color?: string;
+    glowColor?: string;
+    mark?: boolean | string;
+}>();

-        const comp = computeOptionalComponent(display);
+const comp = computeOptionalComponent(toRef(props, "display"));

-        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>
--- a/src/features/trees/tree.ts
+++ b/src/features/trees/tree.ts
@ -1,4 +1,4 @@
-import { Decorator, GenericDecorator } from "features/decorators/common";
+import { GenericDecorator } from "features/decorators/common";
 import type {
    CoercableComponent,
    GenericComponent,
@ -141,7 +141,9 @@ export function createTreeNode<T extends TreeNodeOptions>(
        if (treeNode.onClick) {
            const onClick = treeNode.onClick.bind(treeNode);
            treeNode.onClick = function (e) {
-                if (unref(treeNode.canClick) !== false) {
+                if (
+                    unref(treeNode.canClick as ProcessedComputable<boolean | undefined>) !== false
+                ) {
                    onClick(e);
                }
            };
@ -149,7 +151,9 @@ export function createTreeNode<T extends TreeNodeOptions>(
        if (treeNode.onHold) {
            const onHold = treeNode.onHold.bind(treeNode);
            treeNode.onHold = function () {
-                if (unref(treeNode.canClick) !== false) {
+                if (
+                    unref(treeNode.canClick as ProcessedComputable<boolean | undefined>) !== false
+                ) {
                    onHold();
                }
            };
@ -342,15 +346,15 @@ export const branchedResetPropagation = function (
    if (links == null) return;
    const reset: GenericTreeNode[] = [];
    let current = [resettingNode];
-    while (current.length != 0) {
+    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
+                if ([...reset, ...current].includes(link.endNode)) continue;
                next.push(link.endNode);
                link.endNode.reset?.reset();
            }
-        };
+        }
        reset.push(...current);
        current = next;
    }
--- a/src/features/upgrades/Upgrade.vue
+++ b/src/features/upgrades/Upgrade.vue
@ -24,7 +24,7 @@
    </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";
@ -32,94 +32,56 @@ 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";
+import { coerceComponent, isCoercableComponent } from "util/vue";
+import type { Component, UnwrapRef } from "vue";
+import { shallowRef, 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 props = defineProps<{
+    display: UnwrapRef<GenericUpgrade["display"]>;
+    visibility: Visibility | boolean;
+    style?: StyleValue;
+    classes?: Record<string, boolean>;
+    requirements: Requirements;
+    canPurchase: boolean;
+    bought: boolean;
+    mark?: boolean | string;
+    id: string;
+    purchase?: VoidFunction;
+}>();

-        const component = shallowRef<Component | string>("");
+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
-        };
+watchEffect(() => {
+    const currDisplay = props.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}
+                {props.bought ? null : <><br />{displayRequirements(props.requirements)}</>}
+            </span>
+        ))
+    );
 });
 </script>

--- a/src/features/upgrades/upgrade.ts
+++ b/src/features/upgrades/upgrade.ts
@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import { GenericDecorator } from "features/decorators/common";
 import type {
    CoercableComponent,
@ -151,7 +150,7 @@ export function createUpgrade<T extends UpgradeOptions>(
        };

        const visibilityRequirement = createVisibilityRequirement(upgrade as GenericUpgrade);
-        if (isArray(upgrade.requirements)) {
+        if (Array.isArray(upgrade.requirements)) {
            upgrade.requirements.unshift(visibilityRequirement);
        } else {
            upgrade.requirements = [visibilityRequirement, upgrade.requirements];
--- a/src/game/events.ts
+++ b/src/game/events.ts
@ -2,6 +2,7 @@ import type { Settings } from "game/settings";
 import { createNanoEvents } from "nanoevents";
 import type { App } from "vue";
 import type { GenericLayer } from "./layers";
+import state from "./state";

 /** All types of events able to be sent or emitted from the global event bus. */
 export interface GlobalEvents {
@ -59,3 +60,7 @@ if ("fonts" in document) {
    // JSDom doesn't add document.fonts, and Object.defineProperty doesn't seem to work on document
    document.fonts.onloadingdone = () => globalBus.emit("fontsLoaded");
 }
+
+document.onmousemove = function () {
+    state.mouseActivity[state.mouseActivity.length - 1] = true;
+};
--- a/src/game/formulas/formulas.ts
+++ b/src/game/formulas/formulas.ts
@ -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;

@ -56,6 +57,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
    protected readonly internalIntegrate: IntegrateFunction<T> | undefined;
    protected readonly internalIntegrateInner: IntegrateFunction<T> | undefined;
    protected readonly applySubstitution: SubstitutionFunction<T> | undefined;
+    protected readonly description: string | undefined;
    protected readonly internalVariables: number;

    public readonly innermostVariable: ProcessedComputable<DecimalSource> | undefined;
@ -85,6 +87,7 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
        this.internalIntegrate = readonlyProperties.internalIntegrate;
        this.internalIntegrateInner = readonlyProperties.internalIntegrateInner;
        this.applySubstitution = readonlyProperties.applySubstitution;
+        this.description = options.description;
    }

    private setupVariable({
@ -216,6 +219,25 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
        return new Formula({ variable: value });
    }

+    /**
+     * Stringifies the formula so it's more easy to read in the console
+     * @param formula The formula source to print, used for mapping inputs
+     */
+    public static stringify(formula: FormulaSource): string {
+        if (formula instanceof InternalFormula) {
+            if (formula.description != null) {
+                return formula.description;
+            }
+            if (formula.internalEvaluate == null) {
+                return formula.hasVariable() ? "x" : format(formula.inputs[0] ?? 0);
+            }
+            return `${formula.internalEvaluate.name}(${formula.inputs
+                .map(Formula.stringify)
+                .join(", ")})`;
+        }
+        return format(unref(formula));
+    }
+
    // TODO add integration support to step-wise functions
    /**
     * Creates a step-wise formula. After {@link start} the formula will have an additional modifier.
@ -256,7 +278,9 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
        return new Formula({
            inputs: [value],
            evaluate: evalStep,
-            invert: formula.isInvertible() && formula.hasVariable() ? invertStep : undefined
+            invert: formula.isInvertible() && formula.hasVariable() ? invertStep : undefined,
+            // Can't do anything more descriptive, due to formula's input always being a variable
+            description: "indeterminate"
        });
    }

@ -309,7 +333,9 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
        return new Formula({
            inputs: [value],
            evaluate: evalStep,
-            invert: formula.isInvertible() && formula.hasVariable() ? invertStep : undefined
+            invert: formula.isInvertible() && formula.hasVariable() ? invertStep : undefined,
+            // Can't do anything more descriptive, due to formula's input always being a variable
+            description: "indeterminate"
        });
    }
    public static conditional(
@ -878,6 +904,10 @@ export abstract class InternalFormula<T extends [FormulaSource] | FormulaSource[
        });
    }

+    public stringify() {
+        return Formula.stringify(this);
+    }
+
    public step(
        start: Computable<DecimalSource>,
        formulaModifier: (value: InvertibleIntegralFormula) => GenericFormula
@ -1402,28 +1432,6 @@ export function findNonInvertible(formula: GenericFormula): GenericFormula | nul
    return null;
 }

-/**
- * Stringifies a formula so it's more easy to read in the console
- * @param formula The formula to print
- */
-export function printFormula(formula: FormulaSource): string {
-    if (formula instanceof InternalFormula) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return formula.internalEvaluate == null
-            ? formula.hasVariable()
-                ? "x"
-                : formula.inputs[0] ?? 0
-            : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              formula.internalEvaluate.name +
-                  "(" +
-                  formula.inputs.map(printFormula).join(", ") +
-                  ")";
-    }
-    return format(unref(formula));
-}
-
 /**
 * Utility for calculating the maximum amount of purchases possible with a given formula and resource. If {@link cumulativeCost} is changed to false, the calculation will be much faster with higher numbers.
 * @param formula The formula to use for calculating buy max from
--- a/src/game/formulas/operations.ts
+++ b/src/game/formulas/operations.ts
@ -552,7 +552,9 @@ export function tetrate(
 export function invertTetrate(
    value: DecimalSource,
    base: FormulaSource,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    height: FormulaSource,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    payload: FormulaSource
 ) {
    if (hasVariable(base)) {
@ -576,6 +578,7 @@ export function invertIteratedExp(
    value: DecimalSource,
    lhs: FormulaSource,
    height: FormulaSource,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    payload: FormulaSource
 ) {
    if (hasVariable(lhs)) {
@ -626,6 +629,7 @@ export function invertLayeradd(
    value: DecimalSource,
    lhs: FormulaSource,
    diff: FormulaSource,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    base: FormulaSource
 ) {
    if (hasVariable(lhs)) {
--- a/src/game/formulas/types.d.ts
+++ b/src/game/formulas/types.d.ts
@ -37,9 +37,13 @@ type SubstitutionFunction<T> = (
    ...inputs: T
 ) => GenericFormula;

-type VariableFormulaOptions = { variable: ProcessedComputable<DecimalSource> };
+type VariableFormulaOptions = {
+    variable: ProcessedComputable<DecimalSource>;
+    description?: string;
+};
 type ConstantFormulaOptions = {
    inputs: [FormulaSource];
+    description?: string;
 };
 type GeneralFormulaOptions<T extends [FormulaSource] | FormulaSource[]> = {
    inputs: T;
@ -48,6 +52,7 @@ type GeneralFormulaOptions<T extends [FormulaSource] | FormulaSource[]> = {
    integrate?: IntegrateFunction<T>;
    integrateInner?: IntegrateFunction<T>;
    applySubstitution?: SubstitutionFunction<T>;
+    description?: string;
 };
 type FormulaOptions<T extends [FormulaSource] | FormulaSource[]> =
    | VariableFormulaOptions
@ -63,6 +68,7 @@ type InternalFormulaProperties<T extends [FormulaSource] | FormulaSource[]> = {
    internalIntegrateInner?: IntegrateFunction<T>;
    applySubstitution?: SubstitutionFunction<T>;
    innermostVariable?: ProcessedComputable<DecimalSource>;
+    description?: string;
 };

 type SubstitutionStack = ((value: GenericFormula) => GenericFormula)[] | undefined;
--- a/src/game/gameLoop.ts
+++ b/src/game/gameLoop.ts
@ -1,18 +1,14 @@
+import { hasWon } from "data/projEntry";
 import projInfo from "data/projInfo.json";
 import { globalBus } from "game/events";
 import settings from "game/settings";
 import Decimal from "util/bignum";
 import { loadingSave } from "util/save";
-import type { Ref } from "vue";
 import { watch } from "vue";
 import player from "./player";
 import state from "./state";

-let intervalID: NodeJS.Timer | null = null;
-
-// Not imported immediately due to dependency cycles
-// This gets set during startGameLoop(), and will only be used in the update function
-let hasWon: null | Ref<boolean> = null;
+let intervalID: NodeJS.Timeout | null = null;

 function update() {
    const now = Date.now();
@ -43,7 +39,7 @@ function update() {
    loadingSave.value = false;

    // Add offline time if any
-    if (player.offlineTime != undefined) {
+    if (player.offlineTime != null) {
        if (Decimal.gt(player.offlineTime, projInfo.offlineLimit * 3600)) {
            player.offlineTime = projInfo.offlineLimit * 3600;
        }
@ -63,7 +59,7 @@ function update() {
    diff = Math.min(diff, projInfo.maxTickLength);

    // Apply dev speed
-    if (player.devSpeed != undefined) {
+    if (player.devSpeed != null) {
        diff *= player.devSpeed;
    }

@ -95,15 +91,22 @@ function update() {

 /** Starts the game loop for the project, which updates the game in ticks. */
 export async function startGameLoop() {
-    hasWon = (await import("data/projEntry")).hasWon;
-    watch(hasWon, hasWon => {
-        if (hasWon) {
-            globalBus.emit("gameWon");
-        }
-    });
    if (settings.unthrottled) {
        requestAnimationFrame(update);
    } else {
        intervalID = setInterval(update, 50);
    }
 }
+
+watch(hasWon, hasWon => {
+    if (hasWon) {
+        globalBus.emit("gameWon");
+    }
+});
+
+setInterval(
+    () => {
+        state.mouseActivity = [...state.mouseActivity.slice(-7), false];
+    },
+    1000 * 60 * 60
+);
--- a/src/game/layers.tsx
+++ b/src/game/layers.tsx
@ -1,4 +1,4 @@
-import Modal from "components/Modal.vue";
+import Modal from "components/modals/Modal.vue";
 import type {
    CoercableComponent,
    JSXFunction,
--- a/src/game/persistence.ts
+++ b/src/game/persistence.ts
@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import { globalBus } from "game/events";
 import type { GenericLayer } from "game/layers";
 import { addingLayers, persistentRefs } from "game/layers";
@ -62,6 +61,8 @@ export type State =
    | number
    | boolean
    | DecimalSource
+    | null
+    | undefined
    | { [key: string]: State }
    | { [key: number]: State };

@ -227,7 +228,7 @@ export function noPersist<T extends Persistent<S>, S extends State>(persistent:
                  if (key === PersistentState) {
                      return false;
                  }
-                  if (key == SkipPersistence) {
+                  if (key === SkipPersistence) {
                      return true;
                  }
                  return Reflect.has(target, key);
@ -279,7 +280,7 @@ globalBus.on("addLayer", (layer: GenericLayer, saveData: Record<string, unknown>
                    // Handle SaveDataPath
                    const newPath = [layer.id, ...path, key];
                    if (
-                        value[SaveDataPath] != undefined &&
+                        value[SaveDataPath] != null &&
                        JSON.stringify(newPath) !== JSON.stringify(value[SaveDataPath])
                    ) {
                        console.error(
@ -339,7 +340,7 @@ globalBus.on("addLayer", (layer: GenericLayer, saveData: Record<string, unknown>
                    // Show warning for persistent values inside arrays
                    // TODO handle arrays better
                    if (foundPersistentInChild) {
-                        if (isArray(value) && !isArray(obj)) {
+                        if (Array.isArray(value) && !Array.isArray(obj)) {
                            console.warn(
                                "Found array that contains persistent values when adding layer. Keep in mind changing the order of elements in the array will mess with existing player saves.",
                                ProxyState in obj
--- a/src/game/player.ts
+++ b/src/game/player.ts
@ -36,12 +36,12 @@ export type LayerData<T> = {
    [P in keyof T]?: T[P] extends (infer U)[]
        ? Record<string, LayerData<U>>
        : T[P] extends Record<string, never>
-        ? never
-        : T[P] extends Ref<infer S>
-        ? S
-        : T[P] extends object
-        ? LayerData<T[P]>
-        : T[P];
+          ? never
+          : T[P] extends Ref<infer S>
+            ? S
+            : T[P] extends object
+              ? LayerData<T[P]>
+              : T[P];
 };

 const player = reactive<Player>({
@ -64,7 +64,8 @@ export default window.player = player;

 /** Convert a player save data object into a JSON string. Unwraps refs. */
 export function stringifySave(player: Player): string {
-    return JSON.stringify(player, (key, value) => unref(value));
+    // Convert undefineds into nulls for proper parsing
+    return JSON.stringify(player, (key, value) => unref(value) ?? null);
 }

 declare global {
--- a/src/game/requirements.tsx
+++ b/src/game/requirements.tsx
@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import {
    CoercableComponent,
    isVisible,
@ -19,6 +18,7 @@ import {
 import { createLazyProxy } from "util/proxies";
 import { joinJSX, renderJSX } from "util/vue";
 import { computed, unref } from "vue";
+import { JSX } from "vue/jsx-runtime";
 import Formula, { calculateCost, calculateMaxAffordable } from "./formulas/formulas";
 import type { GenericFormula } from "./formulas/types";
 import { DefaultValue, Persistent } from "./persistence";
@ -179,7 +179,7 @@ export function createCostRequirement<T extends CostRequirementOptions>(
                    ? calculateCost(
                          req.cost,
                          amount ?? 1,
-                          unref(req.cumulativeCost) as boolean,
+                          unref(req.cumulativeCost as ProcessedComputable<boolean>),
                          unref(req.directSum) as number
                      )
                    : unref(req.cost as ProcessedComputable<DecimalSource>);
@ -222,7 +222,9 @@ export function createCostRequirement<T extends CostRequirementOptions>(
                Decimal.gte(
                    req.resource.value,
                    unref(req.cost as ProcessedComputable<DecimalSource>)
-                ) ? 1 : 0
+                )
+                    ? 1
+                    : 0
            );
        }

@ -267,7 +269,7 @@ export function createBooleanRequirement(
 * @param requirements The 1+ requirements to check
 */
 export function requirementsMet(requirements: Requirements): boolean {
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
        return requirements.every(requirementsMet);
    }
    const reqsMet = unref(requirements.requirementMet);
@ -279,7 +281,7 @@ export function requirementsMet(requirements: Requirements): boolean {
 * @param requirements The 1+ requirements to check
 */
 export function maxRequirementsMet(requirements: Requirements): DecimalSource {
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
        return requirements.map(maxRequirementsMet).reduce(Decimal.min);
    }
    const reqsMet = unref(requirements.requirementMet);
@ -297,13 +299,13 @@ export function maxRequirementsMet(requirements: Requirements): DecimalSource {
 * @param amount The amount of levels earned to be displayed
 */
 export function displayRequirements(requirements: Requirements, amount: DecimalSource = 1) {
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
        requirements = requirements.filter(r => isVisible(r.visibility));
        if (requirements.length === 1) {
            requirements = requirements[0];
        }
    }
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
        requirements = requirements.filter(r => "partialDisplay" in r);
        const withCosts = requirements.filter(r => unref(r.requiresPay));
        const withoutCosts = requirements.filter(r => !unref(r.requiresPay));
@ -341,7 +343,7 @@ export function displayRequirements(requirements: Requirements, amount: DecimalS
 * @param amount How many levels to pay for
 */
 export function payRequirements(requirements: Requirements, amount: DecimalSource = 1) {
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
        requirements.filter(r => unref(r.requiresPay)).forEach(r => r.pay?.(amount));
    } else if (unref(requirements.requiresPay)) {
        requirements.pay?.(amount);
--- a/src/game/settings.ts
+++ b/src/game/settings.ts
@ -3,7 +3,7 @@ import { Themes } from "data/themes";
 import type { CoercableComponent } from "features/feature";
 import { globalBus } from "game/events";
 import LZString from "lz-string";
-import { hardReset } from "util/save";
+import { decodeSave, hardReset } from "util/save";
 import { reactive, watch } from "vue";

 /** The player's settings object. */
@ -20,6 +20,8 @@ export interface Settings {
    unthrottled: boolean;
    /** Whether to align modifiers to the unit. */
    alignUnits: boolean;
+    /** Whether or not to show a video game health warning after playing excessively. */
+    showHealthWarning: boolean;
 }

 const state = reactive<Partial<Settings>>({
@ -28,7 +30,8 @@ const state = reactive<Partial<Settings>>({
    showTPS: true,
    theme: Themes.Nordic,
    unthrottled: false,
-    alignUnits: false
+    alignUnits: false,
+    showHealthWarning: true
 });

 watch(
@ -56,12 +59,15 @@ declare global {
 export default window.settings = state as Settings;
 /** A function that erases all player settings, including all saves. */
 export const hardResetSettings = (window.hardResetSettings = () => {
-    const settings = {
+    // Only partial because of any properties that are only added during the loadSettings event.
+    const settings: Partial<Settings> = {
        active: "",
        saves: [],
        showTPS: true,
        theme: Themes.Nordic,
-        alignUnits: false
+        unthrottled: false,
+        alignUnits: false,
+        showHealthWarning: true
    };
    globalBus.emit("loadSettings", settings);
    Object.assign(state, settings);
@ -78,16 +84,8 @@ export function loadSettings(): void {
    try {
        let item: string | null = localStorage.getItem(projInfo.id);
        if (item != null && item !== "") {
-            if (item[0] === "{") {
-                // plaintext. No processing needed
-            } else if (item[0] === "e") {
-                // Assumed to be base64, which starts with e
-                item = decodeURIComponent(escape(atob(item)));
-            } else if (item[0] === "ᯡ") {
-                // Assumed to be lz, which starts with ᯡ
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                item = LZString.decompressFromUTF16(item)!;
-            } else {
+            item = decodeSave(item);
+            if (item == null) {
                console.warn("Unable to determine settings encoding", item);
                return;
            }
--- a/src/game/state.ts
+++ b/src/game/state.ts
@ -6,6 +6,8 @@ import type { Persistent } from "./persistence";
 export interface Transient {
    /** A list of the duration, in ms, of the last 10 game ticks. Used for calculating TPS. */
    lastTenTicks: number[];
+    /** A list of bools represnting which of the last few hours had mouse activity. */
+    mouseActivity: boolean[];
    /** Whether or not a NaN value has been detected and undealt with. */
    hasNaN: boolean;
    /** The location within the player save data object of the NaN value. */
@ -25,6 +27,7 @@ declare global {
 /** The global transient state object. */
 export default window.state = shallowReactive<Transient>({
    lastTenTicks: [],
+    mouseActivity: [false],
    hasNaN: false,
    NaNPath: [],
    errors: reactive([])
--- a/src/main.css
+++ b/src/main.css
@ -66,3 +66,21 @@ ul {
 .Vue-Toastification__toast {
 	margin: unset;
 }
+
+:disabled {
+	pointer-events: none;
+}
+
+.material-icons {
+	font-family: 'Material Icons';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	display: inline-block;
+	line-height: 1;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -3,11 +3,14 @@ import App from "App.vue";
 import projInfo from "data/projInfo.json";
 import "game/notifications";
 import state from "game/state";
+import "util/galaxy";
 import { load } from "util/save";
 import { useRegisterSW } from "virtual:pwa-register/vue";
 import type { App as VueApp } from "vue";
 import { createApp, nextTick } from "vue";
 import { useToast } from "vue-toastification";
+import { globalBus } from "./game/events";
+import { startGameLoop } from "./game/gameLoop";

 declare global {
    /**
@ -17,11 +20,6 @@ declare global {
        vue: VueApp;
        projInfo: typeof projInfo;
    }
-
-    /** Fix for typedoc treating import functions as taking AssertOptions instead of GlobOptions. */
-    interface AssertOptions {
-        as: string;
-    }
 }

 const error = console.error;
@ -60,8 +58,6 @@ requestAnimationFrame(async () => {
        "padding: 4px;"
    );
    await load();
-    const { globalBus } = await import("./game/events");
-    const { startGameLoop } = await import("./game/gameLoop");

    // Create Vue
    const vue = (window.vue = createApp(App));
@ -74,33 +70,13 @@ requestAnimationFrame(async () => {
    // Setup PWA update prompt
    nextTick(() => {
        const toast = useToast();
-        const { updateServiceWorker } = useRegisterSW({
-            onNeedRefresh() {
-                toast.info("New content available, click here to update.", {
-                    timeout: false,
-                    closeOnClick: false,
-                    draggable: false,
-                    icon: {
-                        iconClass: "material-icons",
-                        iconChildren: "refresh",
-                        iconTag: "i"
-                    },
-                    rtl: false,
-                    onClick() {
-                        updateServiceWorker();
-                    }
-                });
-            },
+        useRegisterSW({
+            immediate: true,
            onOfflineReady() {
                toast.info("App ready to work offline");
            },
            onRegisterError: console.warn,
-            onRegistered(r) {
-                if (r) {
-                    // https://stackoverflow.com/questions/65500916/typeerror-failed-to-execute-update-on-serviceworkerregistration-illegal-in
-                    setInterval(() => r.update(), 60 * 60 * 1000);
-                }
-            }
+            onRegistered: console.info
        });
    });

--- a/src/util/break_eternity.ts
+++ b/src/util/break_eternity.ts
@ -16,8 +16,8 @@ export function exponentialFormat(num: DecimalSource, precision: number, mantiss
    const eString = e.gte(1e9)
        ? format(e, Math.max(Math.max(precision, 3), projInfo.defaultDecimalsShown))
        : e.gte(10000)
-        ? commaFormat(e, 0)
-        : e.toStringWithDecimalPlaces(0);
+          ? commaFormat(e, 0)
+          : e.toStringWithDecimalPlaces(0);
    if (mantissa) {
        return m.toStringWithDecimalPlaces(precision) + "e" + eString;
    } else {
@ -26,7 +26,7 @@ export function exponentialFormat(num: DecimalSource, precision: number, mantiss
 }

 export function commaFormat(num: DecimalSource, precision: number): string {
-    if (num === null || num === undefined) {
+    if (num == null) {
        return "NaN";
    }
    num = new Decimal(num);
@ -36,12 +36,12 @@ export function commaFormat(num: DecimalSource, precision: number): string {
    const init = num.toStringWithDecimalPlaces(precision);
    const portions = init.split(".");
    portions[0] = portions[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
-    if (portions.length == 1) return portions[0];
+    if (portions.length === 1) return portions[0];
    return portions[0] + "." + portions[1];
 }

 export function regularFormat(num: DecimalSource, precision: number): string {
-    if (num === null || num === undefined) {
+    if (num == null) {
        return "NaN";
    }
    num = new Decimal(num);
--- a/src/util/common.ts
+++ b/src/util/common.ts
@ -8,9 +8,8 @@ export type OptionalKeys<T> = {
 export type OmitOptional<T> = Pick<T, RequiredKeys<T>>;
 export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };

-export type ArrayElements<T extends ReadonlyArray<unknown>> = T extends ReadonlyArray<infer S>
-    ? S
-    : never;
+export type ArrayElements<T extends ReadonlyArray<unknown>> =
+    T extends ReadonlyArray<infer S> ? S : never;

 // Reference:
 // https://stackoverflow.com/questions/7225407/convert-camelcasetext-to-sentence-case-text
@ -36,5 +35,6 @@ export enum Direction {
    Down = "Down",
    Left = "Left",
    Right = "Right",
+    // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
    Default = "Up"
 }
--- a/src/util/computed.ts
+++ b/src/util/computed.ts
@ -10,10 +10,10 @@ export type ProcessedComputable<T> = T | Ref<T>;
 export type GetComputableType<T> = T extends { [DoNotCache]: true }
    ? T
    : T extends () => infer S
-    ? Ref<S>
-    : undefined extends T
-    ? undefined
-    : T;
+      ? Ref<S>
+      : undefined extends T
+        ? undefined
+        : T;
 export type GetComputableTypeWithDefault<T, S> = undefined extends T
    ? S
    : GetComputableType<NonNullable<T>>;
--- a/src/util/galaxy.ts
+++ b/src/util/galaxy.ts
@ -0,0 +1,186 @@
+import { LoadablePlayerData } from "components/modals/SavesManager.vue";
+import player, { Player, stringifySave } from "game/player";
+import settings from "game/settings";
+import LZString from "lz-string";
+import { GalaxyApi, initGalaxy } from "unofficial-galaxy-sdk";
+import { ref } from "vue";
+import { decodeSave, loadSave, save, setupInitialStore } from "./save";
+
+export const galaxy = ref<GalaxyApi>();
+export const conflictingSaves = ref<
+    { id: string; local: LoadablePlayerData; cloud: LoadablePlayerData; slot: number }[]
+>([]);
+export const syncedSaves = ref<string[]>([]);
+
+export function sync() {
+    if (galaxy.value?.loggedIn !== true) {
+        return;
+    }
+    if (conflictingSaves.value.length > 0) {
+        // Pause syncing while resolving conflicted saves
+        return;
+    }
+    galaxy.value
+        .getSaveList()
+        .then(syncSaves)
+        .then(list => {
+            syncedSaves.value = list.map(s => s.content.id);
+        })
+        .catch(console.error);
+}
+
+// Setup Galaxy API
+initGalaxy({
+    supportsSaving: true,
+    supportsSaveManager: true,
+    onLoggedInChanged
+})
+    .then(g => {
+        galaxy.value = g;
+        onLoggedInChanged(g);
+    })
+    .catch(console.error);
+
+function onLoggedInChanged(g: GalaxyApi) {
+    if (g.loggedIn !== true) {
+        return;
+    }
+    if (conflictingSaves.value.length > 0) {
+        // Pause syncing while resolving conflicted saves
+        return;
+    }
+
+    g.getSaveList()
+        .then(list => {
+            const saves = syncSaves(list);
+            syncedSaves.value = saves.map(s => s.content.id);
+
+            // If our current save has under 2 minutes of playtime, load the cloud save with the most recent time.
+            if (player.timePlayed < 120 * 1000 && saves.length > 0) {
+                const longestSave = saves.reduce((acc, curr) =>
+                    acc.content.time < curr.content.time ? curr : acc
+                );
+                loadSave(longestSave.content);
+            }
+        })
+        .catch(console.error);
+
+    setInterval(sync, 60 * 1000);
+}
+
+function syncSaves(
+    list: Record<
+        number,
+        {
+            label: string;
+            content: string;
+        }
+    >
+) {
+    const savesToUpload = new Set(settings.saves.slice());
+    const availableSlots = new Set(new Array(11).fill(0).map((_, i) => i));
+    const saves = (
+        Object.keys(list)
+            .map(slot => {
+                const { label, content } = list[slot as unknown as number];
+                try {
+                    return {
+                        slot: parseInt(slot),
+                        label,
+                        content: JSON.parse(decodeSave(content) ?? "")
+                    };
+                } catch (e) {
+                    return null;
+                }
+            })
+            .filter(
+                n =>
+                    n != null &&
+                    typeof n.content.id === "string" &&
+                    typeof n.content.time === "number" &&
+                    typeof n.content.timePlayed === "number"
+            ) as {
+            slot: number;
+            label?: string;
+            content: Partial<Player> & { id: string; time: number; timePlayed: number };
+        }[]
+    ).filter(cloudSave => {
+        if (cloudSave.label != null) {
+            cloudSave.content.name = cloudSave.label;
+        }
+        availableSlots.delete(cloudSave.slot);
+        const localSaveId = settings.saves.find(id => id === cloudSave.content.id);
+        if (localSaveId == null) {
+            settings.saves.push(cloudSave.content.id);
+            save(setupInitialStore(cloudSave.content));
+        } else {
+            savesToUpload.delete(localSaveId);
+            try {
+                const localSave = JSON.parse(
+                    decodeSave(localStorage.getItem(localSaveId) ?? "") ?? ""
+                ) as Partial<Player> | null;
+                if (localSave == null) {
+                    return false;
+                }
+                localSave.id = localSaveId;
+                localSave.time = localSave.time ?? 0;
+                localSave.timePlayed = localSave.timePlayed ?? 0;
+
+                const timePlayedDiff = Math.abs(
+                    localSave.timePlayed - cloudSave.content.timePlayed
+                );
+                const timeDiff = Math.abs(localSave.time - cloudSave.content.time);
+                // If their last played time and total time played are both within 2 minutes, just use the newer save (very unlikely to be coincidence)
+                // Otherwise, ask the player
+                if (timePlayedDiff < 120 * 1000 && timeDiff < 120 * 1000) {
+                    if (localSave.time < cloudSave.content.time) {
+                        save(setupInitialStore(cloudSave.content));
+                        if (settings.active === localSaveId) {
+                            loadSave(cloudSave.content);
+                        }
+                    } else {
+                        galaxy.value
+                            ?.save(
+                                cloudSave.slot,
+                                LZString.compressToUTF16(
+                                    stringifySave(setupInitialStore(localSave))
+                                ),
+                                localSave.name ?? cloudSave.label
+                            )
+                            .catch(console.error);
+                        // Update cloud save content for the return value
+                        cloudSave.content = localSave as Player;
+                    }
+                } else {
+                    conflictingSaves.value.push({
+                        id: localSaveId,
+                        cloud: cloudSave.content,
+                        local: localSave as LoadablePlayerData,
+                        slot: cloudSave.slot
+                    });
+                }
+            } catch (e) {
+                return false;
+            }
+        }
+        return true;
+    });
+
+    savesToUpload.forEach(id => {
+        try {
+            if (availableSlots.size > 0) {
+                const localSave = localStorage.getItem(id) ?? "";
+                const parsedLocalSave = JSON.parse(decodeSave(localSave) ?? "");
+                const slot = availableSlots.values().next().value;
+                if (slot == null) return;
+                galaxy.value
+                    ?.save(slot, localSave, parsedLocalSave.name)
+                    .then(() => syncedSaves.value.push(parsedLocalSave.id))
+                    .catch(console.error);
+                availableSlots.delete(slot);
+            }
+        } catch (e) {}
+    });
+
+    return saves;
+}
--- a/src/util/proxies.ts
+++ b/src/util/proxies.ts
@ -5,28 +5,30 @@ import Decimal from "util/bignum";
 export const ProxyState = Symbol("ProxyState");
 export const ProxyPath = Symbol("ProxyPath");

-export type ProxiedWithState<T> = NonNullable<T> extends Record<PropertyKey, unknown>
-    ? NonNullable<T> extends Decimal
-        ? T
-        : {
-              [K in keyof T]: ProxiedWithState<T[K]>;
-          } & {
-              [ProxyState]: T;
-              [ProxyPath]: string[];
-          }
-    : T;
+export type ProxiedWithState<T> =
+    NonNullable<T> extends Record<PropertyKey, unknown>
+        ? NonNullable<T> extends Decimal
+            ? T
+            : {
+                  [K in keyof T]: ProxiedWithState<T[K]>;
+              } & {
+                  [ProxyState]: T;
+                  [ProxyPath]: string[];
+              }
+        : T;

-export type Proxied<T> = NonNullable<T> extends Record<PropertyKey, unknown>
-    ? NonNullable<T> extends Persistent<infer S>
-        ? NonPersistent<S>
-        : NonNullable<T> extends Decimal
-        ? T
-        : {
-              [K in keyof T]: Proxied<T[K]>;
-          } & {
-              [ProxyState]: T;
-          }
-    : T;
+export type Proxied<T> =
+    NonNullable<T> extends Record<PropertyKey, unknown>
+        ? NonNullable<T> extends Persistent<infer S>
+            ? NonPersistent<S>
+            : NonNullable<T> extends Decimal
+              ? T
+              : {
+                    [K in keyof T]: Proxied<T[K]>;
+                } & {
+                    [ProxyState]: T;
+                }
+        : T;

 // Takes a function that returns an object and pretends to be that object
 // Note that the object is lazily calculated
--- a/src/util/save.ts
+++ b/src/util/save.ts
@ -1,10 +1,13 @@
+import { LoadablePlayerData } from "components/modals/SavesManager.vue";
+import { fixOldSave, getInitialLayers } from "data/projEntry";
 import projInfo from "data/projInfo.json";
 import { globalBus } from "game/events";
+import { addLayer, layers, removeLayer } from "game/layers";
 import type { Player } from "game/player";
 import player, { stringifySave } from "game/player";
 import settings, { loadSettings } from "game/settings";
 import LZString from "lz-string";
-import { ref } from "vue";
+import { ref, shallowReactive } from "vue";

 export function setupInitialStore(player: Partial<Player> = {}): Player {
    return Object.assign(
@ -42,17 +45,9 @@ export async function load(): Promise<void> {
            await loadSave(newSave());
            return;
        }
-        if (save[0] === "{") {
-            // plaintext. No processing needed
-        } else if (save[0] === "e") {
-            // Assumed to be base64, which starts with e
-            save = decodeURIComponent(escape(atob(save)));
-        } else if (save[0] === "ᯡ") {
-            // Assumed to be lz, which starts with ᯡ
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            save = LZString.decompressFromUTF16(save)!;
-        } else {
-            throw `Unable to determine save encoding`;
+        save = decodeSave(save);
+        if (save == null) {
+            throw "Unable to determine save encoding";
        }
        const player = JSON.parse(save);
        if (player.modID !== projInfo.id) {
@ -67,6 +62,23 @@ export async function load(): Promise<void> {
    }
 }

+export function decodeSave(save: string) {
+    if (save[0] === "{") {
+        // plaintext. No processing needed
+    } else if (save[0] === "e") {
+        // Assumed to be base64, which starts with e
+        save = decodeURIComponent(escape(atob(save)));
+    } else if (save[0] === "ᯡ") {
+        // Assumed to be lz, which starts with ᯡ
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        save = LZString.decompressFromUTF16(save)!;
+    } else {
+        console.warn("Unable to determine preset encoding", save);
+        return null;
+    }
+    return save;
+}
+
 export function newSave(): Player {
    const id = getUniqueID();
    const player = setupInitialStore({ id });
@ -91,8 +103,6 @@ export const loadingSave = ref(false);
 export async function loadSave(playerObj: Partial<Player>): Promise<void> {
    console.info("Loading save", playerObj);
    loadingSave.value = true;
-    const { layers, removeLayer, addLayer } = await import("game/layers");
-    const { fixOldSave, getInitialLayers } = await import("data/projEntry");

    for (const layer in layers) {
        const l = layers[layer];
@ -109,7 +119,7 @@ export async function loadSave(playerObj: Partial<Player>): Promise<void> {
        playerObj.time &&
        playerObj.devSpeed !== 0
    ) {
-        if (playerObj.offlineTime == undefined) playerObj.offlineTime = 0;
+        if (playerObj.offlineTime == null) playerObj.offlineTime = 0;
        playerObj.offlineTime += Math.min(
            playerObj.offlineTime + (Date.now() - playerObj.time) / 1000,
            projInfo.offlineLimit * 3600
@ -127,6 +137,40 @@ export async function loadSave(playerObj: Partial<Player>): Promise<void> {
    globalBus.emit("onLoad");
 }

+const cachedSaves = shallowReactive<Record<string, LoadablePlayerData | undefined>>({});
+export function getCachedSave(id: string) {
+    if (cachedSaves[id] == null) {
+        let save = localStorage.getItem(id);
+        if (save == null) {
+            cachedSaves[id] = { error: `Save doesn't exist in localStorage`, id };
+        } else if (save === "dW5kZWZpbmVk") {
+            cachedSaves[id] = { error: `Save is undefined`, id };
+        } else {
+            try {
+                save = decodeSave(save);
+                if (save == null) {
+                    console.warn("Unable to determine preset encoding", save);
+                    cachedSaves[id] = { error: "Unable to determine preset encoding", id };
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    return cachedSaves[id]!;
+                }
+                cachedSaves[id] = { ...JSON.parse(save), id };
+            } catch (error) {
+                cachedSaves[id] = { error, id };
+                console.warn(`Failed to load info about save with id ${id}:\n${error}\n${save}`);
+            }
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return cachedSaves[id]!;
+}
+export function clearCachedSaves() {
+    Object.keys(cachedSaves).forEach(key => delete cachedSaves[key]);
+}
+export function clearCachedSave(id: string) {
+    cachedSaves[id] = undefined;
+}
+
 setInterval(() => {
    if (player.autosave) {
        save();
--- a/src/util/vue.tsx
+++ b/src/util/vue.tsx
@ -1,16 +1,20 @@
+/* eslint-disable vue/multi-word-component-names */
+// ^ I have no idea why that's necessary; the rule is disabled, and this file isn't a vue component?
+// I'm _guessing_ it's related to us using DefineComponent, but I figured that eslint rule should
+// only apply to SFCs
 import Col from "components/layout/Column.vue";
 import Row from "components/layout/Row.vue";
 import type { CoercableComponent, GenericComponent, JSXFunction } from "features/feature";
 import {
    Component as ComponentKey,
    GatherProps,
+    Visibility,
    isVisible,
-    jsx,
-    Visibility
+    jsx
 } from "features/feature";
 import type { ProcessedComputable } from "util/computed";
 import { DoNotCache } from "util/computed";
-import type { Component, ComputedRef, DefineComponent, PropType, Ref, ShallowRef } from "vue";
+import type { Component, DefineComponent, Ref, ShallowRef, UnwrapRef } from "vue";
 import {
    computed,
    defineComponent,
@ -21,6 +25,7 @@ import {
    unref,
    watchEffect
 } from "vue";
+import { JSX } from "vue/jsx-runtime";
 import { camelToKebab } from "./common";

 export function coerceComponent(
@ -125,17 +130,17 @@ export function setupHoldToClick(
    stop: VoidFunction;
    handleHolding: VoidFunction;
 } {
-    const interval = ref<NodeJS.Timer | null>(null);
+    const interval = ref<NodeJS.Timeout | null>(null);
    const event = ref<MouseEvent | TouchEvent | undefined>(undefined);

    function start(e: MouseEvent | TouchEvent) {
-        if (!interval.value) {
+        if (interval.value == null) {
            interval.value = setInterval(handleHolding, 250);
        }
        event.value = e;
    }
    function stop() {
-        if (interval.value) {
+        if (interval.value != null) {
            clearInterval(interval.value);
            interval.value = null;
        }
@ -174,36 +179,38 @@ export function getFirstFeature<
 }

 export function computeComponent(
-    component: Ref<ProcessedComputable<CoercableComponent>>,
+    component: Ref<CoercableComponent>,
    defaultWrapper = "div"
 ): ShallowRef<Component | ""> {
    const comp = shallowRef<Component | "">();
    watchEffect(() => {
-        comp.value = coerceComponent(unwrapRef(component), defaultWrapper);
+        comp.value = coerceComponent(unref(component), defaultWrapper);
    });
    return comp as ShallowRef<Component | "">;
 }
 export function computeOptionalComponent(
-    component: Ref<ProcessedComputable<CoercableComponent | undefined> | undefined>,
+    component: Ref<CoercableComponent | undefined>,
    defaultWrapper = "div"
 ): ShallowRef<Component | "" | null> {
    const comp = shallowRef<Component | "" | null>(null);
    watchEffect(() => {
-        const currComponent = unwrapRef(component);
+        const currComponent = unref(component);
        comp.value =
-            currComponent == "" || currComponent == null
+            currComponent === "" || currComponent == null
                ? null
                : coerceComponent(currComponent, defaultWrapper);
    });
    return comp;
 }

-export function wrapRef<T>(ref: Ref<ProcessedComputable<T>>): ComputedRef<T> {
-    return computed(() => unwrapRef(ref));
-}
-
-export function unwrapRef<T>(ref: Ref<ProcessedComputable<T>>): T {
-    return unref<T>(unref(ref));
+export function deepUnref<T extends object>(refObject: T): { [K in keyof T]: UnwrapRef<T[K]> } {
+    return (Object.keys(refObject) as (keyof T)[]).reduce(
+        (acc, curr) => {
+            acc[curr] = unref(refObject[curr]) as UnwrapRef<T[keyof T]>;
+            return acc;
+        },
+        {} as { [K in keyof T]: UnwrapRef<T[K]> }
+    );
 }

 export function setRefValue<T>(ref: Ref<T | Ref<T>>, value: T) {
@ -221,14 +228,6 @@ export type PropTypes =
    | typeof Function
    | typeof Object
    | typeof Array;
-// TODO Unfortunately, the typescript engine gives up on typing completely when you use this method,
-// Even though it has the same typing as when doing it manually
-export function processedPropType<T>(...types: PropTypes[]): PropType<ProcessedComputable<T>> {
-    if (!types.includes(Object)) {
-        types.push(Object);
-    }
-    return types as PropType<ProcessedComputable<T>>;
-}

 export function trackHover(element: VueFeature): Ref<boolean> {
    const isHovered = ref(false);
@ -244,8 +243,11 @@ export function trackHover(element: VueFeature): Ref<boolean> {
 }

 export function kebabifyObject(object: Record<string, unknown>) {
-    return Object.keys(object).reduce((acc, curr) => {
-        acc[camelToKebab(curr)] = object[curr];
-        return acc;
-    }, {} as Record<string, unknown>);
+    return Object.keys(object).reduce(
+        (acc, curr) => {
+            acc[camelToKebab(curr)] = object[curr];
+            return acc;
+        },
+        {} as Record<string, unknown>
+    );
 }
--- a/tests/features/hotkey.test.ts
+++ b/tests/features/hotkey.test.ts
@ -0,0 +1,100 @@
+import { createHotkey, hotkeys } from "features/hotkey";
+import { afterEach, describe, expect, onTestFailed, test } from "vitest";
+import { Ref, ref } from "vue";
+import "../utils";
+
+function createSuccessHotkey(key: string, triggered: Ref<boolean>) {
+    hotkeys[key] = createHotkey(() => ({
+        description: "",
+        key: key,
+        onPress: () => (triggered.value = true)
+    }));
+}
+
+function createFailHotkey(key: string) {
+    hotkeys[key] = createHotkey(() => ({
+        description: "Fail test",
+        key,
+        onPress: () => expect(true).toBe(false)
+    }));
+}
+
+function mockKeypress(key: string, shiftKey = false, ctrlKey = false) {
+    const event = new KeyboardEvent("keydown", { key, shiftKey, ctrlKey });
+    expect(document.dispatchEvent(event)).toBe(true);
+    return event;
+}
+
+function testHotkey(pass: string, fail: string, key: string, shiftKey = false, ctrlKey = false) {
+    const triggered = ref(false);
+    createSuccessHotkey(pass, triggered);
+    createFailHotkey(fail);
+    mockKeypress(key, shiftKey, ctrlKey);
+    expect(triggered.value).toBe(true);
+}
+
+describe("Hotkeys fire correctly", () => {
+    afterEach(() => {
+        Object.keys(hotkeys).forEach(key => delete hotkeys[key]);
+    });
+
+    test("Lower case letters", () => testHotkey("a", "A", "a"));
+
+    test.each([["A"], ["shift+a"], ["shift+A"]])("Upper case letters using %s as key", key => {
+        testHotkey(key, "a", "A", true);
+    });
+
+    describe.each([
+        [0, ")"],
+        [1, "!"],
+        [2, "@"],
+        [3, "#"],
+        [4, "$"],
+        [5, "%"],
+        [6, "^"],
+        [7, "&"],
+        [8, "*"],
+        [9, "("]
+    ])("Handle number %i and it's 'capital', %s", (number, symbol) => {
+        test("Triggering number", () =>
+            testHotkey(number.toString(), symbol, number.toString(), true));
+        test.each([symbol, `shift+${number}`, `shift+${symbol}`])(
+            "Triggering symbol using %s as key",
+            key => testHotkey(key, number.toString(), symbol, true)
+        );
+    });
+
+    test("Ctrl modifier", () => testHotkey("ctrl+a", "a", "a", false, true));
+
+    test.each(["shift+ctrl+a", "ctrl+shift+a", "shift+ctrl+A", "ctrl+shift+A"])(
+        "Shift and Ctrl modifiers using %s as key",
+        key => {
+            const triggered = ref(false);
+            createSuccessHotkey(key, triggered);
+            createFailHotkey("a");
+            createFailHotkey("A");
+            createFailHotkey("shift+A");
+            createFailHotkey("shift+a");
+            createFailHotkey("ctrl+a");
+            createFailHotkey("ctrl+A");
+            mockKeypress("a", true, true);
+            expect(triggered.value).toBe(true);
+        }
+    );
+
+    test.each(["shift+ctrl+1", "ctrl+shift+1", "shift+ctrl+!", "ctrl+shift+!"])(
+        "Shift and Ctrl modifiers using %s as key",
+        key => {
+            const triggered = ref(false);
+            createSuccessHotkey(key, triggered);
+            createFailHotkey("1");
+            createFailHotkey("!");
+            createFailHotkey("shift+1");
+            createFailHotkey("shift+!");
+            createFailHotkey("ctrl+1");
+            createFailHotkey("ctrl+!");
+            mockKeypress("!", true, true);
+            expect(triggered.value).toBe(true);
+        }
+    );
+});
--- a/tests/game/snapshots/modifiers.test.ts.snap
+++ b/tests/game/snapshots/modifiers.test.ts.snap
--- a/tests/game/formulas.test.ts
+++ b/tests/game/formulas.test.ts
@ -155,7 +155,7 @@ describe("Formula Equality Checking", () => {
    describe("Formula aliases", () => {
        function testAliases<T extends FormulaFunctions>(
            aliases: T[],
-            args: Parameters<typeof Formula[T]>
+            args: Parameters<(typeof Formula)[T]>
        ) {
            describe(aliases[0], () => {
                let formula: GenericFormula;
@ -250,7 +250,7 @@ describe("Creating Formulas", () => {

    function checkFormula<T extends FormulaFunctions>(
        functionName: T,
-        args: Readonly<Parameters<typeof Formula[T]>>
+        args: Readonly<Parameters<(typeof Formula)[T]>>
    ) {
        let formula: GenericFormula;
        beforeAll(() => {
@ -274,7 +274,7 @@ describe("Creating Formulas", () => {
    // It's a lot of tests, but I'd rather be exhaustive
    function testFormulaCall<T extends FormulaFunctions>(
        functionName: T,
-        args: Readonly<Parameters<typeof Formula[T]>>
+        args: Readonly<Parameters<(typeof Formula)[T]>>
    ) {
        if ((functionName === "slog" || functionName === "layeradd") && args[0] === -1) {
            // These cases in particular take a long time, so skip them
@ -1275,3 +1275,16 @@ describe("Buy Max", () => {
        });
    });
 });
+
+describe("Stringifies", () => {
+    test("Nested formula", () => {
+        const variable = Formula.variable(ref(0));
+        expect(variable.add(5).pow(Formula.constant(10)).stringify()).toBe(
+            "pow(add(x, 5.00), 10.00)"
+        );
+    });
+    test("Indeterminate", () => {
+        expect(Formula.if(10, true, f => f.add(5)).stringify()).toBe("indeterminate");
+        expect(Formula.step(10, 5, f => f.add(5)).stringify()).toBe("indeterminate");
+    });
+});
--- a/tests/game/modifiers.test.ts
+++ b/tests/game/modifiers.test.ts
@ -1,5 +1,5 @@
 import { CoercableComponent, JSXFunction } from "features/feature";
-import Formula, { printFormula } from "game/formulas/formulas";
+import Formula from "game/formulas/formulas";
 import {
    createAdditiveModifier,
    createExponentialModifier,
@ -52,7 +52,7 @@ function testModifiers<
            expect(modifier.invert(operation(10, 5))).compare_tolerance(10));
        test("getFormula returns the right formula", () => {
            const value = ref(10);
-            expect(printFormula(modifier.getFormula(Formula.variable(value)))).toBe(
+            expect(modifier.getFormula(Formula.variable(value)).stringify()).toBe(
                `${operation.name}(x, 5.00)`
            );
        });
@ -156,7 +156,7 @@ describe("Sequential Modifiers", () => {
            expect(modifier.invert(Decimal.add(10, 5).times(5).pow(5))).compare_tolerance(10));
        test("getFormula returns the right formula", () => {
            const value = ref(10);
-            expect(printFormula(modifier.getFormula(Formula.variable(value)))).toBe(
+            expect(modifier.getFormula(Formula.variable(value)).stringify()).toBe(
                `pow(mul(add(x, 5.00), 5.00), 5.00)`
            );
        });
--- a/tests/utils.ts
+++ b/tests/utils.ts
@ -6,14 +6,11 @@ interface CustomMatchers<R = unknown> {
    toLogError(): R;
 }

-declare global {
-    // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace Vi {
-        // eslint-disable-next-line @typescript-eslint/no-empty-interface
-        interface Assertion extends CustomMatchers {}
-        // eslint-disable-next-line @typescript-eslint/no-empty-interface
-        interface AsymmetricMatchersContaining extends CustomMatchers {}
-    }
+declare module "vitest" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface Assertion extends CustomMatchers {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface AsymmetricMatchersContaining extends CustomMatchers {}
 }

 expect.extend({
--- a/tsconfig.json
+++ b/tsconfig.json
@ -6,6 +6,7 @@
    "strict": true,
    "checkJs": false,
    "jsx": "preserve",
+    "jsxImportSource": "vue",
    "importHelpers": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
--- a/vite.config.ts
+++ b/vite.config.ts
@ -31,7 +31,7 @@ export default defineConfig({
        }),
        tsconfigPaths(),
        VitePWA({
-            includeAssets: ["Logo.svg", "favicon.ico", "robots.txt", "apple-touch-icon.png"],
+            registerType: 'autoUpdate',
            workbox: {
              globPatterns: ['**/*.{js,css,html,ico,png,svg}']
            },