First pass at typescript support

Oh man did this end up requiring a *ton* of other work as well.
There's still a few typing issues I still can't quite work out,
and others I'd like to improve when I have time. In fact, this version
doesn't even really work, it has a stack overflow error caused by
a tooltip for some reason have a tree inside it, which in turn has
another tooltip, etc. There's also 17 errors that I *really* feel like
shouldn't be there, but they are, and 113 warnings - mostly using !
to assert that things are non-null. Lots of work left to do, to sum up.

The reason I'm committing this now is because I really need to get to
work on my game jam, and since it won't use a tree or really many of
TMT-X's features, I can get away with using a broken engine :)

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+    root: true,
+    env: {
+        node: true
+    },
+    extends: [
+        "plugin:vue/vue3-essential",
+        "eslint:recommended",
+        "@vue/typescript/recommended",
+        "@vue/prettier",
+        "@vue/prettier/@typescript-eslint"
+    ],
+    parserOptions: {
+        ecmaVersion: 2020
+    },
+    rules: {
+        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    }
+};

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "tabWidth": 4
+}

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-	presets: [
+    presets: ["@vue/cli-plugin-babel/preset"]
-		'@vue/cli-plugin-babel/preset'
+};
-	]
-}

jsconfig.json

@@ -1,5 +0,0 @@
-{
-	"include": [
-		"./src/components/**/*"
-	]
-}

package.json

@@ -8,44 +8,49 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@ivanv/vue-collapse-transition": "^1.0.2",
     "core-js": "^3.6.5",
     "lodash.clonedeep": "^4.5.0",
-    "vue": "^3.1.4",
+    "vue": "^3.2.2",
-    "vue-next-select": "^2.7.0",
+    "vue-class-component": "^8.0.0-rc.1",
+    "vue-next-select": "^2.9.0",
     "vue-sortable": "github:Netbel/vue-sortable#master-fix",
     "vue-textarea-autosize": "^1.1.1",
     "vue-transition-expand": "^0.1.0"
   },
   "devDependencies": {
+    "@ivanv/vue-collapse-transition": "^1.0.2",
+    "@types/lodash.clonedeep": "^4.5.6",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0-beta.1",
+    "@vue/compiler-sfc": "^3.2.2",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0-alpha.0",
+    "prettier": "^1.19.1",
     "raw-loader": "^4.0.2",
     "sass": "^1.36.0",
-    "sass-loader": "^10.2.0"
+    "sass-loader": "^10.2.0",
-  },
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
-  "eslintConfig": {
+    "typescript": "~4.1.5"
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead"
+  ],
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,vue}": [
+      "vue-cli-service lint",
+      "git add"
     ]
+  }
 }

src/App.vue

@@ -9,20 +9,21 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import themes from './data/themes';
+import { defineComponent } from "vue";
-import player from './game/player';
+import themes from "./data/themes";
-import modInfo from './data/modInfo.json';
+import player from "./game/player";
-import { mapState } from './util/vue';
+import modInfo from "./data/modInfo.json";
-import './main.css';
+import { mapState } from "./util/vue";
+import "./main.css";
 
-export default {
+export default defineComponent({
-	name: 'App',
+    name: "App",
     data() {
         return { useHeader: modInfo.useHeader };
     },
     computed: {
-		...mapState([ 'showTPS' ]),
+        ...mapState(["showTPS"]),
         theme() {
             return themes[player.theme].variables;
         }
@@ -32,7 +33,7 @@ export default {
             // TODO use event to update mouse position for particles
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/Achievement.vue

@@ -1,52 +1,66 @@
 <template>
     <tooltip v-if="achievement.unlocked" :display="tooltip">
-		<div :style="style"
+        <div
-			:class="{ [layer || tab.layer]: true, feature: true, achievement: true, locked: !achievement.earned,
+            :style="style"
-				bought: achievement.earned }">
+            :class="{
+                [layer]: true,
+                feature: true,
+                achievement: true,
+                locked: !achievement.earned,
+                bought: achievement.earned
+            }"
+        >
             <component v-if="display" :is="display" />
             <branch-node :branches="achievement.branches" :id="id" featureType="achievement" />
         </div>
     </tooltip>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import { CoercableComponent } from "@/typings/component";
+import { Achievement } from "@/typings/features/achievement";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'achievement',
+    name: "achievement",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		achievement() {
+        achievement(): Achievement {
-			return layers[this.layer || this.tab.layer].achievements[this.id];
+            return layers[this.layer].achievements!.data[this.id];
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				layers[this.layer || this.tab.layer].componentStyles?.achievement,
+                layers[this.layer].componentStyles?.achievement,
                 this.achievement.style,
-				this.achievement.image && this.achievement.earned ? {
+                this.achievement.image && this.achievement.earned
+                    ? {
                           backgroundImage: `url(${this.achievement.image}`
-				} : null
+                      }
+                    : undefined
             ];
         },
-		display() {
+        display(): Component | string {
             if (this.achievement.display) {
-				return coerceComponent(this.achievement.display, 'h3');
+                return coerceComponent(this.achievement.display, "h3");
             }
-			return coerceComponent(this.achievement.name, 'h3');
+            return coerceComponent(this.achievement.name!, "h3");
         },
-		tooltip() {
+        tooltip(): CoercableComponent {
             if (this.achievement.earned) {
                 return this.achievement.doneTooltip || this.achievement.tooltip || "You did it!";
             }
             return this.achievement.goalTooltip || this.achievement.tooltip || "LOCKED";
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/Achievements.vue

@@ -3,7 +3,11 @@
         <template v-if="filteredAchievements.rows && filteredAchievements.cols">
             <div v-for="row in filteredAchievements.rows" class="row" :key="row">
                 <div v-for="col in filteredAchievements.cols" :key="col">
-					<achievement v-if="filteredAchievements[row * 10 + col] !== undefined" class="align" :id="row * 10 + col" />
+                    <achievement
+                        v-if="filteredAchievements[row * 10 + col] !== undefined"
+                        class="align"
+                        :id="row * 10 + col"
+                    />
                 </div>
             </div>
         </template>
@@ -13,24 +17,32 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { getFiltered } from '../../util/vue';
+import { Achievement } from "@/typings/features/achievement";
+import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'achievements',
+    name: "achievements",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        achievements: {
-		achievements: Array
+            type: Object as PropType<Array<string>>
+        }
     },
     computed: {
-		filteredAchievements() {
+        filteredAchievements(): Record<string, Achievement> {
-			return getFiltered(layers[this.layer || this.tab.layer].achievements, this.achievements);
+            if (layers[this.layer].achievements) {
+                return getFiltered<Achievement>(
+                    layers[this.layer].achievements!.data,
+                    this.achievements
+                );
+            }
+            return {};
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/Bar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="bar.unlocked" :style="style" class="bar">
+    <div v-if="bar.unlocked" :style="style" :class="{ [layer]: true, bar: true }">
         <div class="overlayTextContainer border" :style="borderStyle">
             <component class="overlayText" :style="textStyle" :is="display" />
         </div>
@@ -10,85 +10,89 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { Direction } from "@/game/enums";
-import { UP, DOWN, LEFT, RIGHT, DEFAULT, coerceComponent } from '../../util/vue';
+import { layers } from "@/game/layers";
-import Decimal from '../../util/bignum';
+import { Bar } from "@/typings/features/bar";
+import Decimal from "@/util/bignum";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'bar',
+    name: "bar",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		bar() {
+        bar(): Bar {
-			return layers[this.layer || this.tab.layer].bars[this.id];
+            return layers[this.layer].bars!.data[this.id];
         },
-		progress() {
+        progress(): number {
-			let progress = this.bar.progress instanceof Decimal ? this.bar.progress.toNumber() : this.bar.progress;
+            let progress =
+                this.bar.progress instanceof Decimal
+                    ? this.bar.progress.toNumber()
+                    : (this.bar.progress as number);
             return (1 - Math.min(Math.max(progress, 0), 1)) * 100;
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				{ 'width': this.bar.width + "px", 'height': this.bar.height + "px" },
+                { width: this.bar.width + "px", height: this.bar.height + "px" },
-				layers[this.layer || this.tab.layer].componentStyles?.bar,
+                layers[this.layer].componentStyles?.bar,
                 this.bar.style
             ];
         },
-		borderStyle() {
+        borderStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				{ 'width': this.bar.width + "px", 'height': this.bar.height + "px" },
+                { width: this.bar.width + "px", height: this.bar.height + "px" },
                 this.bar.borderStyle
             ];
         },
-		textStyle() {
+        textStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
-			return [
+            return [this.bar.style, this.bar.textStyle];
-				this.bar.style,
-				this.bar.textStyle
-			];
         },
-		backgroundStyle() {
+        backgroundStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				{ 'width': this.bar.width + "px", 'height': this.bar.height + "px" },
+                { width: this.bar.width + "px", height: this.bar.height + "px" },
                 this.bar.style,
                 this.bar.baseStyle,
                 this.bar.borderStyle
             ];
         },
-		fillStyle() {
+        fillStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
-			const fillStyle = { 'width': (this.bar.width + 0.5) + "px", 'height': (this.bar.height + 0.5) + "px" };
+            const fillStyle: Partial<CSSStyleDeclaration> = {
+                width: this.bar.width + 0.5 + "px",
+                height: this.bar.height + 0.5 + "px"
+            };
             switch (this.bar.direction) {
-				case UP:
+                case Direction.Up:
-					fillStyle['clip-path'] = `inset(${this.progress}% 0% 0% 0%)`;
+                    fillStyle.clipPath = `inset(${this.progress}% 0% 0% 0%)`;
-					fillStyle.width = this.bar.width + 1 + 'px';
+                    fillStyle.width = this.bar.width + 1 + "px";
                     break;
-				case DOWN:
+                case Direction.Down:
-					fillStyle['clip-path'] = `inset(0% 0% ${this.progress}% 0%)`;
+                    fillStyle.clipPath = `inset(0% 0% ${this.progress}% 0%)`;
-					fillStyle.width = this.bar.width + 1 + 'px';
+                    fillStyle.width = this.bar.width + 1 + "px";
                     break;
-				case RIGHT:
+                case Direction.Right:
-					fillStyle['clip-path'] = `inset(0% ${this.progress}% 0% 0%)`;
+                    fillStyle.clipPath = `inset(0% ${this.progress}% 0% 0%)`;
                     break;
-				case LEFT:
+                case Direction.Left:
-					fillStyle['clip-path'] = `inset(0% 0% 0% ${this.progress} + '%)`;
+                    fillStyle.clipPath = `inset(0% 0% 0% ${this.progress} + '%)`;
                     break;
-				case DEFAULT:
+                case Direction.Default:
-					fillStyle['clip-path'] = 'inset(0% 50% 0% 0%)';
+                    fillStyle.clipPath = "inset(0% 50% 0% 0%)";
                     break;
             }
-			return [
+            return [fillStyle, this.bar.style, this.bar.fillStyle];
-				fillStyle,
-				this.bar.style,
-				this.bar.fillStyle
-			];
         },
-		display() {
+        display(): Component | string {
             return coerceComponent(this.bar.display);
         }
     }
-};
+});
 </script>
 
 <style scoped>
@@ -115,7 +119,7 @@ export default {
     border-radius: 10px;
     border-color: var(--color);
     overflow: hidden;
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+    mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
     margin: 0;
 }
 

src/components/features/Buyable.vue

@@ -1,8 +1,24 @@
 <template>
     <div v-if="buyable.unlocked" style="display: grid">
-		<button :style="style" @click="buyable.buy" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start"
+        <button
-			:class="{ feature: true, [layer || tab.layer]: true, buyable: true, can: buyable.canBuy, locked: !buyable.canAfford, bought }"
+            :style="style"
-			@touchend="stop" @touchcancel="stop" :disabled="!buyable.canBuy">
+            @click="buyable.buy"
+            @mousedown="start"
+            @mouseleave="stop"
+            @mouseup="stop"
+            @touchstart="start"
+            :class="{
+                feature: true,
+                [layer]: true,
+                buyable: true,
+                can: buyable.canBuy,
+                locked: !buyable.canAfford,
+                bought
+            }"
+            @touchend="stop"
+            @touchcancel="stop"
+            :disabled="!buyable.canBuy"
+        >
             <div v-if="title">
                 <component :is="title" />
             </div>
@@ -10,67 +26,95 @@
             <mark-node :mark="buyable.mark" />
             <branch-node :branches="buyable.branches" :id="id" featureType="buyable" />
         </button>
-		<div v-if="(buyable.sellOne !== undefined && buyable.canSellOne !== false) ||
+        <div
-			(buyable.sellAll !== undefined && buyable.canSellAll !== false)" style="width: 100%">
+            v-if="
-			<button @click="buyable.sellAll" v-if="buyable.sellAll !== undefined && buyable.canSellAll !== false"
+                (buyable.sellOne !== undefined && buyable.canSellOne !== false) ||
-				:class="{ 'buyable-button': true, can: buyable.unlocked, locked: !buyable.unlocked, feature: true }"
+                    (buyable.sellAll !== undefined && buyable.canSellAll !== false)
-				:style="{ 'background-color': buyable.canSellAll ? layerColor : '' }">
+            "
+            style="width: 100%"
+        >
+            <button
+                @click="buyable.sellAll"
+                v-if="buyable.sellAll !== undefined && buyable.canSellAll !== false"
+                :class="{
+                    'buyable-button': true,
+                    can: buyable.unlocked,
+                    locked: !buyable.unlocked,
+                    feature: true
+                }"
+                :style="{ 'background-color': buyable.canSellAll ? layerColor : '' }"
+            >
                 Sell All
             </button>
-			<button @click="buyable.sellOne" v-if="buyable.sellOne !== undefined && buyable.canSellOne !== false"
+            <button
-				:class="{ 'buyable-button': true, can: buyable.unlocked, locked: !buyable.unlocked, feature: true }"
+                @click="buyable.sellOne"
-				:style="{ 'background-color': buyable.canSellOne ? layerColor : '' }">
+                v-if="buyable.sellOne !== undefined && buyable.canSellOne !== false"
+                :class="{
+                    'buyable-button': true,
+                    can: buyable.unlocked,
+                    locked: !buyable.unlocked,
+                    feature: true
+                }"
+                :style="{ 'background-color': buyable.canSellOne ? layerColor : '' }"
+            >
                 Sell One
             </button>
         </div>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import player from '../../game/player';
+import player from "@/game/player";
-import { coerceComponent } from '../../util/vue';
+import { Buyable } from "@/typings/features/buyable";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'buyable',
+    name: "buyable",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ],
+            type: [Number, String],
-		size: [ Number, String ]
+            required: true
+        },
+        size: Number
     },
     data() {
         return {
-			interval: false,
+            interval: null,
             time: 0
+        } as {
+            interval: number | null;
+            time: number;
         };
     },
     computed: {
-		buyable() {
+        buyable(): Buyable {
-			return layers[this.layer || this.tab.layer].buyables[this.id];
+            return layers[this.layer].buyables!.data[this.id];
         },
-		bought() {
+        bought(): boolean {
-			return player[this.layer || this.tab.layer].buyables[this.id].gte(this.buyable.purchaseLimit);
+            return player.layers[this.layer].buyables[this.id].gte(this.buyable.purchaseLimit);
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				this.buyable.canBuy ? { 'background-color': layers[this.layer || this.tab.layer].color } : {},
+                this.buyable.canBuy ? { backgroundColor: layers[this.layer].color } : undefined,
-				this.size ? { 'height': this.size, 'width': this.size } : {},
+                this.size ? { height: this.size + "px", width: this.size + "px" } : undefined,
-				layers[this.layer || this.tab.layer].componentStyles?.buyable,
+                layers[this.layer].componentStyles?.buyable,
                 this.buyable.style
             ];
         },
-		title() {
+        title(): Component | string | null {
             if (this.buyable.title) {
-				return coerceComponent(this.buyable.title, 'h2');
+                return coerceComponent(this.buyable.title, "h2");
             }
             return null;
         },
-		display() {
+        display(): Component | string {
-			return coerceComponent(this.buyable.display, 'div');
+            return coerceComponent(this.buyable.display, "div");
         },
-		layerColor() {
+        layerColor(): string {
-			return layers[this.layer || this.tab.layer].color;
+            return layers[this.layer].color;
         }
     },
     methods: {
@@ -80,12 +124,14 @@ export default {
             }
         },
         stop() {
+            if (this.interval) {
                 clearInterval(this.interval);
-			this.interval = false;
+                this.interval = null;
                 this.time = 0;
             }
         }
-};
+    }
+});
 </script>
 
 <style scoped>

src/components/features/Buyables.vue

@@ -1,63 +1,85 @@
 <template>
     <div v-if="filteredBuyables" class="table">
-		<respec-button v-if="showRespec" style="margin-bottom: 12px;" :confirmRespec="confirmRespec"
+        <respec-button
-			@set-confirm-respec="setConfirmRespec" @respec="respec" />
+            v-if="showRespec"
+            style="margin-bottom: 12px;"
+            :confirmRespec="confirmRespec"
+            :respecWarningDisplay="respecWarningDisplay"
+            @set-confirm-respec="setConfirmRespec"
+            @respec="respec"
+        />
         <template v-if="filteredBuyables.rows && filteredBuyables.cols">
             <div v-for="row in filteredBuyables.rows" class="row" :key="row">
                 <div v-for="col in filteredBuyables.cols" :key="col">
-					<buyable v-if="filteredBuyables[row * 10 + col] !== undefined" class="align buyable-container" :style="{ height }"
+                    <buyable
-						:id="row * 10 + col" :size="height === 'inherit' ? null : height" />
+                        v-if="filteredBuyables[row * 10 + col] !== undefined"
+                        class="align buyable-container"
+                        :style="{ height }"
+                        :id="row * 10 + col"
+                        :size="height === 'inherit' ? null : height"
+                    />
                 </div>
             </div>
         </template>
         <row v-else>
-			<buyable v-for="(buyable, id) in filteredBuyables" :key="id" class="align buyable-container"
+            <buyable
-				:style="{ height }" :id="id" :size="height === 'inherit' ? null : height" />
+                v-for="(buyable, id) in filteredBuyables"
+                :key="id"
+                class="align buyable-container"
+                :style="{ height }"
+                :id="id"
+                :size="height === 'inherit' ? null : height"
+            />
         </row>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import player from '../../game/player';
+import player from "@/game/player";
-import { getFiltered } from '../../util/vue';
+import { CoercableComponent } from "@/typings/component";
+import { Buyable } from "@/typings/features/buyable";
+import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'buyables',
+    name: "buyables",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        buyables: {
-		buyables: Array,
+            type: Object as PropType<Array<string>>
+        },
         height: {
-			type: [ Number, String ],
+            type: [Number, String],
             default: "inherit"
         }
     },
-	emits: [ 'set-confirm-respec' ],
     computed: {
-		filteredBuyables() {
+        filteredBuyables(): Record<string, Buyable> {
-			return getFiltered(layers[this.layer || this.tab.layer].buyables, this.buyables);
+            if (layers[this.layer].buyables) {
+                return getFiltered<Buyable>(layers[this.layer].buyables!.data, this.buyables);
+            }
+            return {};
         },
-		showRespec() {
+        showRespec(): boolean | undefined {
-			return layers[this.layer || this.tab.layer].buyables.showRespec;
+            return layers[this.layer].buyables!.showRespecButton;
         },
-		confirmRespec() {
+        confirmRespec(): boolean {
-			return player[this.layer || this.tab.layer].buyables.confirmRespec;
+            return player.layers[this.layer].confirmRespecBuyables;
+        },
+        respecWarningDisplay(): CoercableComponent | undefined {
+            return layers[this.layer].buyables?.respecWarningDisplay;
         }
     },
     methods: {
-		setConfirmRespec(value) {
+        setConfirmRespec(value: boolean) {
-			if (this.confirmRespec != undefined) {
+            player.layers[this.layer].confirmRespecBuyables = value;
-				this.$emit("set-confirm-respec", value);
-			} else {
-				player[this.layer || this.tab.layer].buyables.confirmRespec = value;
-			}
         },
         respec() {
-			layers[this.layer || this.tab.layer].buyables.respec?.();
+            layers[this.layer].buyables!.respec?.();
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/Challenge.vue

@@ -1,13 +1,17 @@
 <template>
-	<div v-if="challenge.shown" :style="style"
+    <div
+        v-if="challenge.shown"
+        :style="style"
         :class="{
             feature: true,
+            [layer]: true,
             challenge: true,
             resetNotify: challenge.active,
             notify: challenge.active && challenge.canComplete,
             done: challenge.completed,
             maxed: challenge.maxed
-		}">
+        }"
+    >
         <div v-if="title"><component :is="title" /></div>
         <button :style="{ backgroundColor: challenge.maxed ? null : buttonColor }" @click="toggle">
             {{ buttonText }}
@@ -19,40 +23,41 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import { Challenge } from "@/typings/features/challenge";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'challenge',
+    name: "challenge",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		challenge() {
+        challenge(): Challenge {
-			return layers[this.layer || this.tab.layer].challenges[this.id];
+            return layers[this.layer].challenges!.data[this.id];
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
-			return [
+            return [layers[this.layer].componentStyles?.challenge, this.challenge.style];
-				layers[this.layer || this.tab.layer].componentStyles?.challenge,
-				this.challenge.style
-			];
         },
-		title() {
+        title(): Component | string | null {
             if (this.challenge.titleDisplay) {
-				return coerceComponent(this.challenge.titleDisplay, 'div');
+                return coerceComponent(this.challenge.titleDisplay, "div");
             }
             if (this.challenge.name) {
-				return coerceComponent(this.challenge.name, 'h3');
+                return coerceComponent(this.challenge.name, "h3");
             }
             return null;
         },
-		buttonColor() {
+        buttonColor(): string {
-			return layers[this.layer || this.tab.layer].color;
+            return layers[this.layer].color;
         },
-		buttonText() {
+        buttonText(): string {
             if (this.challenge.active) {
                 return this.challenge.canComplete ? "Finish" : "Exit Early";
             }
@@ -61,9 +66,9 @@ export default {
             }
             return "Start";
         },
-		fullDisplay() {
+        fullDisplay(): Component | string | null {
             if (this.challenge.fullDisplay) {
-				return coerceComponent(this.challenge.fullDisplay, 'div');
+                return coerceComponent(this.challenge.fullDisplay, "div");
             }
             return null;
         }
@@ -73,7 +78,7 @@ export default {
             this.challenge.toggle();
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/Challenges.vue

@@ -3,7 +3,10 @@
         <template v-if="filteredChallenges.rows && filteredChallenges.cols">
             <div v-for="row in filteredChallenges.rows" class="row" :key="row">
                 <div v-for="col in filteredChallenges.cols" :key="col">
-					<challenge v-if="filteredChallenges[row * 10 + col] !== undefined" :id="row * 10 + col" />
+                    <challenge
+                        v-if="filteredChallenges[row * 10 + col] !== undefined"
+                        :id="row * 10 + col"
+                    />
                 </div>
             </div>
         </template>
@@ -13,24 +16,26 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { getFiltered } from '../../util/vue';
+import { Challenge } from "@/typings/features/challenge";
+import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'challenges',
+    name: "challenges",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        challenges: {
-		challenges: Array
+            type: Object as PropType<Array<string>>
+        }
     },
     computed: {
-		filteredChallenges() {
+        filteredChallenges(): Record<string, Challenge> {
-			return getFiltered(layers[this.layer || this.tab.layer].challenges, this.challenges);
+            return getFiltered(layers[this.layer].challenges!.data, this.challenges);
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/Clickable.vue

@@ -1,8 +1,23 @@
 <template>
     <div v-if="clickable.unlocked">
-		<button :style="style" @click="clickable.click" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start"
+        <button
-			@touchend="stop" @touchcancel="stop" :disabled="!clickable.canClick"
+            :style="style"
-			:class="{ feature: true, [layer || tab.layer]: true, clickable: true, can: clickable.canClick, locked: !clickable.canClick }">
+            @click="clickable.click"
+            @mousedown="start"
+            @mouseleave="stop"
+            @mouseup="stop"
+            @touchstart="start"
+            @touchend="stop"
+            @touchcancel="stop"
+            :disabled="!clickable.canClick"
+            :class="{
+                feature: true,
+                [layer]: true,
+                clickable: true,
+                can: clickable.canClick,
+                locked: !clickable.canClick
+            }"
+        >
             <div v-if="title">
                 <component :is="title" />
             </div>
@@ -13,61 +28,68 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import { Clickable } from "@/typings/features/clickable";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'clickable',
+    name: "clickable",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ],
+            type: [Number, String],
-		size: {
+            required: true
-			type: [ Number, String ]
+        },
-		}
+        size: String
     },
     data() {
         return {
-			interval: false,
+            interval: null,
             time: 0
+        } as {
+            interval: number | null;
+            time: number;
         };
     },
     computed: {
-		clickable() {
+        clickable(): Clickable {
-			return layers[this.layer || this.tab.layer].clickables[this.id];
+            return layers[this.layer].clickables!.data[this.id];
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				this.clickable.canClick ? { 'background-color': layers[this.layer || this.tab.layer].color } : {},
+                this.clickable.canClick ? { backgroundColor: layers[this.layer].color } : undefined,
-				this.size ? {'height': this.size, 'width': this.size} : {},
+                this.size ? { height: this.size, width: this.size } : undefined,
-				layers[this.layer || this.tab.layer].componentStyles?.clickable,
+                layers[this.layer].componentStyles?.clickable,
                 this.clickable.style
             ];
         },
-		title() {
+        title(): Component | string | null {
             if (this.clickable.title) {
-				return coerceComponent(this.clickable.title, 'h2');
+                return coerceComponent(this.clickable.title, "h2");
             }
             return null;
         },
-		display() {
+        display(): Component | string {
-			return coerceComponent(this.clickable.display, 'div');
+            return coerceComponent(this.clickable.display, "div");
         }
     },
     methods: {
         start() {
-			if (!this.interval) {
+            if (!this.interval && this.clickable.click) {
                 this.interval = setInterval(this.clickable.click, 250);
             }
         },
         stop() {
+            if (this.interval) {
                 clearInterval(this.interval);
-			this.interval = false;
+                this.interval = null;
                 this.time = 0;
             }
         }
-};
+    }
+});
 </script>
 
 <style scoped>

src/components/features/Clickables.vue

@@ -1,60 +1,74 @@
 <template>
     <div v-if="filteredClickables" class="table">
-		<master-button v-if="showMasterButton" style="margin-bottom: 12px;" @press="press" />
+        <master-button v-if="showMaster" style="margin-bottom: 12px;" @press="press" />
         <template v-if="filteredClickables.rows && filteredClickables.cols">
             <div v-for="row in filteredClickables.rows" class="row" :key="row">
                 <div v-for="col in filteredClickables.cols" :key="col">
-					<clickable v-if="filteredClickables[row * 10 + col] !== undefined" class="align clickable-container"
+                    <clickable
-						:style="{ height }" :id="row * 10 + col" :size="height === 'inherit' ? null : height" />
+                        v-if="filteredClickables[row * 10 + col] !== undefined"
+                        class="align clickable-container"
+                        :style="{ height }"
+                        :id="row * 10 + col"
+                        :size="height === 'inherit' ? null : height"
+                    />
                 </div>
             </div>
         </template>
         <row v-else>
-			<clickable v-for="(clickable, id) in filteredClickables" :key="id" class="align clickable-container" :style="{ height }"
+            <clickable
-						:id="id" :size="height === 'inherit' ? null : height" />
+                v-for="(clickable, id) in filteredClickables"
+                :key="id"
+                class="align clickable-container"
+                :style="{ height }"
+                :id="id"
+                :size="height === 'inherit' ? null : height"
+            />
         </row>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { Clickable } from "@/typings/features/clickable";
-import { getFiltered } from '../../util/vue';
+import { defineComponent, PropType } from "vue";
+import { layers } from "@/game/layers";
+import { getFiltered, InjectLayerMixin } from "@/util/vue";
 
-export default {
+export default defineComponent({
-	name: 'clickables',
+    name: "clickables",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        achievements: {
-		clickables: Array,
+            type: Object as PropType<Array<string>>
-		showMaster: {
+        },
+        showMasterButton: {
             type: Boolean,
             default: null
         },
         height: {
-			type: [ Number, String ],
+            type: [Number, String],
             default: "inherit"
         }
     },
     computed: {
-		filteredClickables() {
+        filteredClickables(): Record<string, Clickable> {
-			return getFiltered(layers[this.layer || this.tab.layer].clickables, this.clickables);
+            return getFiltered(layers[this.layer].clickables!.data, this.clickables);
         },
-		showMasterButton() {
+        showMaster(): boolean | undefined {
-			if (layers[this.layer || this.tab.layer].clickables?.masterButtonClick == undefined) {
+            if (layers[this.layer].clickables?.masterButtonClick == undefined) {
                 return false;
             }
-			if (this.showMaster != undefined) {
+            if (this.showMasterButton != undefined) {
-				return this.showMaster;
+                return this.showMasterButton;
             }
-			return layers[this.layer || this.tab.layer].clickables?.showMaster;
+            return layers[this.layer].clickables?.showMasterButton;
         }
     },
     methods: {
         press() {
-			layers[this.layer || this.tab.layer].clickables.masterButtonClick();
+            layers[this.layer].clickables?.masterButtonClick?.();
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/DefaultChallengeDisplay.vue

@@ -5,42 +5,48 @@
     <component v-if="rewardDisplay" :is="rewardDisplay" />
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import { Challenge } from "@/typings/features/challenge";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'default-challenge-display',
+    name: "default-challenge-display",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		challenge() {
+        challenge(): Challenge {
-			return layers[this.layer || this.tab.layer].challenges[this.id];
+            return layers[this.layer].challenges!.data[this.id];
         },
-		challengeDescription() {
+        challengeDescription(): Component | string {
-			return coerceComponent(this.challenge.challengeDescription, 'div');
+            return coerceComponent(this.challenge.challengeDescription, "div");
         },
-		goalDescription() {
+        goalDescription(): Component | string {
             if (this.challenge.goalDescription) {
                 return coerceComponent(this.challenge.goalDescription);
             }
-			return coerceComponent(`{{ format(${this.challenge.goal}) }} ${this.challenge.currencyDisplayName || 'points'}`);
+            return coerceComponent(
+                `{{ format(${this.challenge.goal}) }} ${this.challenge.currencyDisplayName ||
+                    "points"}`
+            );
         },
-		rewardDescription() {
+        rewardDescription(): Component | string {
             return coerceComponent(this.challenge.rewardDescription);
         },
-		rewardDisplay() {
+        rewardDisplay(): Component | string | null {
             if (this.challenge.rewardDisplay) {
                 return coerceComponent(`Currently: ${this.challenge.rewardDisplay}`);
             }
             return null;
-		},
         }
-};
+    }
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/DefaultPrestigeButtonDisplay.vue

@@ -2,76 +2,78 @@
     <span>
         {{ resetDescription }}<b>{{ resetGain }}</b>
         {{ resource }}
-		<br v-if="nextAt"/><br v-if="nextAt"/>
+        <br v-if="nextAt" /><br v-if="nextAt" />
         {{ nextAt }}
     </span>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import player from '../../game/player';
+import player from "@/game/player";
-import { format, formatWhole } from '../../util/bignum';
+import Decimal, { format, formatWhole } from "@/util/bignum";
+import { InjectLayerMixin } from "@/util/vue";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'default-prestige-button-display',
+    name: "default-prestige-button-display",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
-	props: {
-		layer: String
-	},
     computed: {
-		resetDescription() {
+        resetDescription(): string {
-			if (player[this.layer || this.tab.layer].points.lt(1e3) || layers[this.layer || this.tab.layer].type === "static") {
+            if (player.layers[this.layer].points.lt(1e3) || layers[this.layer].type === "static") {
-				return layers[this.layer || this.tab.layer].resetDescription || "Reset for ";
+                return layers[this.layer].resetDescription || "Reset for ";
             }
             return "";
         },
-		resetGain() {
+        resetGain(): string {
-			return formatWhole(layers[this.layer || this.tab.layer].resetGain);
+            return formatWhole(layers[this.layer].resetGain);
         },
-		resource() {
+        resource(): string {
-			return layers[this.layer || this.tab.layer].resource;
+            return layers[this.layer].resource;
         },
-		showNextAt() {
+        showNextAt(): boolean {
-			if (layers[this.layer || this.tab.layer].showNextAt != undefined) {
+            if (layers[this.layer].showNextAt != undefined) {
-				return layers[this.layer || this.tab.layer].showNextAt;
+                return layers[this.layer].showNextAt!;
             } else {
-				return layers[this.layer || this.tab.layer].type === "static" ?
+                return layers[this.layer].type === "static"
-					player[this.layer || this.tab.layer].points.lt(30) : 											// static
+                    ? player.layers[this.layer].points.lt(30) // static
-					player[this.layer || this.tab.layer].points.lt(1e3) && layers[this.layer ||
+                    : player.layers[this.layer].points.lt(1e3) &&
-						this.tab.layer].resetGain.lt(100);	// normal
+                          layers[this.layer].resetGain.lt(100); // normal
             }
         },
-		nextAt() {
+        nextAt(): string {
             if (this.showNextAt) {
                 let prefix;
-				if (layers[this.layer || this.tab.layer].type === "static") {
+                if (layers[this.layer].type === "static") {
-					if (layers[this.layer || this.tab.layer].baseAmount.gte(layers[this.layer || this.tab.layer].nextAt) &&
+                    if (
-						layers[this.layer || this.tab.layer].canBuyMax !== false) {
+                        Decimal.gte(layers[this.layer].baseAmount!, layers[this.layer].nextAt) &&
+                        layers[this.layer].canBuyMax !== false
+                    ) {
                         prefix = "Next:";
                     } else {
                         prefix = "Req:";
                     }
 
-					const baseAmount = formatWhole(layers[this.layer || this.tab.layer].baseAmount);
+                    const baseAmount = formatWhole(layers[this.layer].baseAmount!);
-					const nextAt = (layers[this.layer || this.tab.layer].roundUpCost ? formatWhole : format)(layers[this.layer || this.tab.layer].nextAtMax);
+                    const nextAt = (layers[this.layer].roundUpCost ? formatWhole : format)(
-					const baseResource = layers[this.layer || this.tab.layer].baseResource;
+                        layers[this.layer].nextAtMax
+                    );
+                    const baseResource = layers[this.layer].baseResource;
 
                     return `${prefix} ${baseAmount} / ${nextAt} ${baseResource}`;
                 } else {
                     let amount;
-					if (layers[this.layer || this.tab.layer].roundUpCost) {
+                    if (layers[this.layer].roundUpCost) {
-						amount = formatWhole(layers[this.layer || this.tab.layer].nextAt);
+                        amount = formatWhole(layers[this.layer].nextAt);
                     } else {
-						amount = format(layers[this.layer || this.tab.layer].nextAt);
+                        amount = format(layers[this.layer].nextAt);
                     }
-					return `Next at ${amount} ${layers[this.layer || this.tab.layer].baseResource}`;
+                    return `Next at ${amount} ${layers[this.layer].baseResource}`;
                 }
             }
             return "";
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/DefaultUpgradeDisplay.vue

@@ -2,52 +2,55 @@
     <span>
         <div v-if="title"><component :is="title" /></div>
         <component :is="description" />
-		<div v-if="effectDisplay"><br>Currently: <component :is="effectDisplay" /></div>
+        <div v-if="effectDisplay"><br />Currently: <component :is="effectDisplay" /></div>
-		<br>
+        <br />
         Cost: {{ cost }} {{ costResource }}
     </span>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import { Upgrade } from "@/typings/features/upgrade";
-import { formatWhole } from '../../util/bignum';
+import { formatWhole } from "@/util/bignum";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'default-upgrade-display',
+    name: "default-upgrade-display",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		upgrade() {
+        upgrade(): Upgrade {
-			return layers[this.layer || this.tab.layer].upgrades[this.id];
+            return layers[this.layer].upgrades!.data[this.id];
         },
-		title() {
+        title(): Component | string | null {
             if (this.upgrade.title) {
-				return coerceComponent(this.upgrade.title, 'h3');
+                return coerceComponent(this.upgrade.title, "h3");
             }
             return null;
         },
-		description() {
+        description(): Component | string {
-			return coerceComponent(this.upgrade.description, 'div');
+            return coerceComponent(this.upgrade.description, "div");
         },
-		effectDisplay() {
+        effectDisplay(): Component | string | null {
             if (this.upgrade.effectDisplay) {
                 return coerceComponent(this.upgrade.effectDisplay);
             }
             return null;
         },
-		cost() {
+        cost(): string {
             return formatWhole(this.upgrade.cost);
         },
-		costResource() {
+        costResource(): string {
-			return this.upgrade.currencyDisplayName || layers[this.layer || this.tab.layer].resource;
+            return this.upgrade.currencyDisplayName || layers[this.layer].resource;
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/Grid.vue

@@ -2,29 +2,33 @@
     <div v-if="grid" class="table">
         <div v-for="row in grid.rows" class="row" :key="row">
             <div v-for="col in grid.cols" :key="col">
-				<gridable class="align" :id="id" :cell="row * 100 + col" />
+                <grid-cell class="align" :id="id" :cell="row * 100 + col" />
             </div>
         </div>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
+import { Grid } from "@/typings/features/grid";
+import { InjectLayerMixin } from "@/util/vue";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'grid',
+    name: "grid",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		grid() {
+        grid(): Grid {
-			return layers[this.layer || this.tab.layer].grids[this.id];
+            return layers[this.layer].grids!.data[this.id];
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/GridCell.vue

@@ -0,0 +1,97 @@
+<template>
+    <button
+        v-if="gridable.unlocked"
+        :class="{ feature: true, tile: true, can: canClick, locked: !canClick }"
+        :style="style"
+        @click="gridable.click"
+        @mousedown="start"
+        @mouseleave="stop"
+        @mouseup="stop"
+        @touchstart="start"
+        @touchend="stop"
+        @touchcancel="stop"
+        :disabled="!canClick"
+    >
+        <div v-if="title"><component :is="title" /></div>
+        <component :is="display" style="white-space: pre-line;" />
+        <branch-node :branches="gridable.branches" :id="id" featureType="gridable" />
+    </button>
+</template>
+
+<script lang="ts">
+import { layers } from "@/game/layers";
+import { GridCell } from "@/typings/features/grid";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
+
+export default defineComponent({
+    name: "grid-cell",
+    mixins: [InjectLayerMixin],
+    props: {
+        id: {
+            type: [Number, String],
+            required: true
+        },
+        cell: {
+            type: [Number, String],
+            required: true
+        },
+        size: [Number, String]
+    },
+    data() {
+        return {
+            interval: null,
+            time: 0
+        } as {
+            interval: number | null;
+            time: number;
+        };
+    },
+    computed: {
+        gridCell(): GridCell {
+            return layers[this.layer].grids!.data[this.id][this.cell] as GridCell;
+        },
+        canClick(): boolean {
+            return this.gridCell.canClick;
+        },
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
+            return [
+                this.canClick ? { backgroundColor: layers[this.layer].color } : {},
+                layers[this.layer].componentStyles?.["grid-cell"],
+                this.gridCell.style
+            ];
+        },
+        title(): Component | string | null {
+            if (this.gridCell.title) {
+                return coerceComponent(this.gridCell.title, "h3");
+            }
+            return null;
+        },
+        display(): Component | string {
+            return coerceComponent(this.gridCell.display, "div");
+        }
+    },
+    methods: {
+        start() {
+            if (!this.interval && this.gridCell.click) {
+                this.interval = setInterval(this.gridCell.click, 250);
+            }
+        },
+        stop() {
+            if (this.interval) {
+                clearInterval(this.interval);
+                this.interval = null;
+                this.time = 0;
+            }
+        }
+    }
+});
+</script>
+
+<style scoped>
+.tile {
+    min-height: 80px;
+    width: 80px;
+    font-size: 10px;
+}
+</style>

src/components/features/Gridable.vue

@@ -1,77 +0,0 @@
-<template>
-	<button v-if="gridable.unlocked" :class="{ feature: true, tile: true, can: canClick, locked: !canClick}"
-		:style="style" @click="gridable.click" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start"
-		@touchend="stop" @touchcancel="stop" :disabled="!canClick">
-		<div v-if="title"><component :is="title" /></div>
-		<component :is="display" style="white-space: pre-line;" />
-		<branch-node :branches="gridable.branches" :id="id" featureType="gridable" />
-	</button>
-</template>
-
-<script>
-import { layers } from '../../game/layers';
-import { coerceComponent } from '../../util/vue';
-
-export default {
-	name: 'gridable',
-	inject: [ 'tab' ],
-	props: {
-		layer: String,
-		id: [ Number, String ],
-		cell: [ Number, String ],
-		size: {
-			type: [ Number, String ]
-		}
-	},
-	data() {
-		return {
-			interval: false,
-			time: 0
-		};
-	},
-	computed: {
-		gridable() {
-			return layers[this.layer || this.tab.layer].grids[this.id][this.cell];
-		},
-		canClick() {
-			return this.gridable.canClick;
-		},
-		style() {
-			return [
-				this.canClick ? { 'background-color': layers[this.layer || this.tab.layer].color } : {},
-				layers[this.layer || this.tab.layer].componentStyles?.gridable,
-				this.gridable.style
-			];
-		},
-		title() {
-			if (this.gridable.title) {
-				return coerceComponent(this.gridable.title, 'h3');
-			}
-			return null;
-		},
-		display() {
-			return coerceComponent(this.gridable.display, 'div');
-		}
-	},
-	methods: {
-		start() {
-			if (!this.interval) {
-				this.interval = setInterval(this.gridable.click, 250);
-			}
-		},
-		stop() {
-			clearInterval(this.interval);
-			this.interval = false;
-			this.time = 0;
-		}
-	}
-};
-</script>
-
-<style scoped>
-.tile {
-	min-height: 80px;
-	width: 80px;
-	font-size: 10px;
-}
-</style>

src/components/features/Infobox.vue

@@ -13,68 +13,71 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import themes from "@/data/themes";
-import player from '../../game/player';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import player from "@/game/player";
-import themes from '../../data/themes';
+import { Infobox } from "@/typings/features/infobox";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'infobox',
+    name: "infobox",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		infobox() {
+        infobox(): Infobox {
-			return layers[this.layer || this.tab.layer].infoboxes[this.id];
+            return layers[this.layer].infoboxes!.data[this.id];
         },
-		borderColor() {
+        borderColor(): string {
-			return this.infobox.borderColor || layers[this.layer || this.tab.layer].color;
+            return this.infobox.borderColor || layers[this.layer].color;
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
                 { borderColor: this.borderColor },
-				layers[this.layer || this.tab.layer].componentStyles?.infobox,
+                layers[this.layer].componentStyles?.infobox,
                 this.infobox.style
             ];
         },
-		titleStyle() {
+        titleStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				{ backgroundColor: layers[this.layer || this.tab.layer].color },
+                { backgroundColor: layers[this.layer].color },
-				layers[this.layer || this.tab.layer].componentStyles?.['infobox-title'],
+                layers[this.layer].componentStyles?.["infobox-title"],
                 this.infobox.titleStyle
             ];
         },
-		bodyStyle() {
+        bodyStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
-			return [
+            return [layers[this.layer].componentStyles?.["infobox-body"], this.infobox.bodyStyle];
-				layers[this.layer || this.tab.layer].componentStyles?.['infobox-body'],
-				this.infobox.bodyStyle
-			];
         },
-		title() {
+        title(): Component | string {
             if (this.infobox.title) {
                 return coerceComponent(this.infobox.title);
             }
-			return coerceComponent(layers[this.layer || this.tab.layer].name);
+            return coerceComponent(layers[this.layer].name || this.layer);
         },
-		body() {
+        body(): Component | string {
             return coerceComponent(this.infobox.body);
         },
-		collapsed() {
+        collapsed(): boolean {
-			return player[this.layer || this.tab.layer].infoboxes[this.id];
+            return player.layers[this.layer].infoboxes[this.id];
         },
-		stacked() {
+        stacked(): boolean {
             return themes[player.theme].stackedInfoboxes;
         }
     },
     methods: {
         toggle() {
-			player[this.layer || this.tab.layer].infoboxes[this.id] = !player[this.layer || this.tab.layer].infoboxes[this.id];
+            player.layers[this.layer].infoboxes[this.id] = !player.layers[this.layer].infoboxes[
+                this.id
+            ];
         }
     }
-};
+});
 </script>
 
 <style scoped>
@@ -148,7 +151,7 @@ export default {
 }
 
 .body {
-	transition-duration: .5s;
+    transition-duration: 0.5s;
     border-radius: 5px;
     border-top-left-radius: 0;
 }

src/components/features/MainDisplay.vue

@@ -2,49 +2,52 @@
     <div>
         <span v-if="showPrefix">You have </span>
         <resource :amount="amount" :color="color" />
-		{{ resource }}<!-- remove whitespace -->
+        {{ resource
-		<span v-if="effectDisplay">, <component :is="effectDisplay" /></span>
+        }}<!-- remove whitespace -->
-		<br><br>
+        <span v-if="effectDisplay">, <component :is="effectDisplay"/></span>
+        <br /><br />
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import player from '../../game/player';
+import { layers } from "@/game/layers";
-import { layers } from '../../game/layers';
+import player from "@/game/player";
-import { format, formatWhole } from '../../util/bignum';
+import { format, formatWhole } from "@/util/bignum";
-import { coerceComponent } from '../../util/vue';
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'main-display',
+    name: "main-display",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
         precision: Number
     },
     computed: {
-		style() {
+        style(): Partial<CSSStyleDeclaration> | undefined {
-			return layers[this.layer || this.tab.layer].componentStyles?.['main-display'];
+            return layers[this.layer].componentStyles?.["main-display"];
         },
-		resource() {
+        resource(): string {
-			return layers[this.layer || this.tab.layer].resource;
+            return layers[this.layer].resource;
         },
-		effectDisplay() {
+        effectDisplay(): Component | string | undefined {
-			return coerceComponent(layers[this.layer || this.tab.layer].effectDisplay);
+            return (
+                layers[this.layer].effectDisplay &&
+                coerceComponent(layers[this.layer].effectDisplay!)
+            );
         },
-		showPrefix() {
+        showPrefix(): boolean {
-			return player[this.layer || this.tab.layer].points.lt('1e1000');
+            return player.layers[this.layer].points.lt("1e1000");
         },
-		color() {
+        color(): string {
-			return layers[this.layer || this.tab.layer].color;
+            return layers[this.layer].color;
         },
-		amount() {
+        amount(): string {
-			return this.precision == undefined ?
+            return this.precision == undefined
-				formatWhole(player[this.layer || this.tab.layer].points) :
+                ? formatWhole(player.layers[this.layer].points)
-				format(player[this.layer || this.tab.layer].points, this.precision);
+                : format(player.layers[this.layer].points, this.precision);
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/MarkNode.vue

@@ -5,13 +5,15 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'mark-node',
+
+export default defineComponent({
+    name: "mark-node",
     props: {
-		mark: [ Boolean, String ]
+        mark: [Boolean, String]
     }
-};
+});
 </script>
 
 <style scoped>
@@ -52,7 +54,7 @@ export default {
     width: 0;
     height: 0;
     position: absolute;
-	top: .6em;
+    top: 0.6em;
     left: -1em;
     border-right: 1em solid transparent;
     border-bottom: 0.7em solid #ffcc00;

src/components/features/MasterButton.vue

@@ -1,37 +1,40 @@
 <template>
-	<button @click="press" :class="{ feature: true, can: unlocked, locked: !unlocked }" :style="style">
+    <button
+        @click="press"
+        :class="{ feature: true, can: unlocked, locked: !unlocked }"
+        :style="style"
+    >
         <component :is="masterButtonDisplay" />
     </button>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import player from '../../game/player';
+import player from "@/game/player";
-import { coerceComponent } from '../../util/vue';
+import { CoercableComponent } from "@/typings/component";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'master-button',
+    name: "master-button",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        display: [String, Object] as PropType<CoercableComponent>
-		display: [ String, Object ]
     },
-	emits: [ 'press' ],
+    emits: ["press"],
     computed: {
-		style() {
+        style(): Partial<CSSStyleDeclaration> | undefined {
-			return [
+            return layers[this.layer].componentStyles?.["master-button"];
-				layers[this.layer || this.tab.layer].componentStyles?.['master-button']
-			];
         },
-		unlocked() {
+        unlocked(): boolean {
-			return player[this.layer || this.tab.layer].unlocked;
+            return player.layers[this.layer].unlocked;
         },
-		masterButtonDisplay() {
+        masterButtonDisplay(): Component | string {
             if (this.display) {
                 return coerceComponent(this.display);
             }
-			if (layers[this.layer || this.tab.layer].clickables?.masterButtonDisplay) {
+            if (layers[this.layer].clickables?.masterButtonDisplay) {
-				return coerceComponent(layers[this.layer || this.tab.layer].clickables?.masterButtonDisplay);
+                return coerceComponent(layers[this.layer].clickables!.masterButtonDisplay!);
             }
             return coerceComponent("Click Me!");
         }
@@ -41,8 +44,7 @@ export default {
             this.$emit("press");
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/Milestone.vue

@@ -1,5 +1,9 @@
 <template>
-	<div v-if="milestone.shown" :style="style" :class="{ feature: true,  milestone: true, done: milestone.earned }">
+    <div
+        v-if="milestone.shown"
+        :style="style"
+        :class="{ feature: true, milestone: true, done: milestone.earned }"
+    >
         <div v-if="requirementDisplay"><component :is="requirementDisplay" /></div>
         <div v-if="effectDisplay"><component :is="effectDisplay" /></div>
         <component v-if="optionsDisplay" :is="optionsDisplay" />
@@ -7,47 +11,48 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import { Milestone } from "@/typings/features/milestone";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'milestone',
+    name: "milestone",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		milestone() {
+        milestone(): Milestone {
-			return layers[this.layer || this.tab.layer].milestones[this.id];
+            return layers[this.layer].milestones!.data[this.id];
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
-			return [
+            return [layers[this.layer].componentStyles?.milestone, this.milestone.style];
-				layers[this.layer || this.tab.layer].componentStyles?.milestone,
-				this.milestone.style
-			];
         },
-		requirementDisplay() {
+        requirementDisplay(): Component | string | null {
             if (this.milestone.requirementDisplay) {
-				return coerceComponent(this.milestone.requirementDisplay, 'h3');
+                return coerceComponent(this.milestone.requirementDisplay, "h3");
             }
             return null;
         },
-		effectDisplay() {
+        effectDisplay(): Component | string | null {
             if (this.milestone.effectDisplay) {
-				return coerceComponent(this.milestone.effectDisplay, 'b');
+                return coerceComponent(this.milestone.effectDisplay, "b");
             }
             return null;
         },
-		optionsDisplay() {
+        optionsDisplay(): Component | string | null {
             if (this.milestone.optionsDisplay && this.milestone.earned) {
-				return coerceComponent(this.milestone.optionsDisplay, 'div');
+                return coerceComponent(this.milestone.optionsDisplay, "div");
             }
             return null;
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/Milestones.vue

@@ -4,24 +4,29 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { getFiltered } from '../../util/vue';
+import { Milestone } from "@/typings/features/milestone";
+import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'milestones',
+    name: "milestones",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        milestones: {
-		milestones: Array
+            type: Object as PropType<Array<string>>
+        }
     },
     computed: {
-		filteredMilestones() {
+        filteredMilestones(): Record<string, Milestone> {
-			return getFiltered(layers[this.layer || this.tab.layer].milestones, this.milestones);
+            if (layers[this.layer].milestones) {
+                return getFiltered<Milestone>(layers[this.layer].milestones!.data, this.milestones);
+            }
+            return {};
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/features/PrestigeButton.vue

@@ -1,48 +1,49 @@
 <template>
-	<button :style="style" @click="resetLayer"
+    <button
-		:class="{ [layer || tab.layer]: true, reset: true, locked: !canReset, can: canReset }" >
+        :style="style"
+        @click="resetLayer"
+        :class="{ [layer]: true, reset: true, locked: !canReset, can: canReset }"
+    >
         <component v-if="prestigeButtonDisplay" :is="prestigeButtonDisplay" />
         <default-prestige-button-display v-else />
     </button>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { resetLayer } from '../../util/layers';
+import { resetLayer } from "@/util/layers";
-import { coerceComponent } from '../../util/vue';
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'prestige-button',
+    name: "prestige-button",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
-	props: {
-		layer: String
-	},
     computed: {
-		canReset() {
+        canReset(): boolean {
-			return layers[this.layer || this.tab.layer].canReset;
+            return layers[this.layer].canReset;
         },
-		color() {
+        color(): string {
-			return layers[this.layer || this.tab.layer].color;
+            return layers[this.layer].color;
         },
-		prestigeButtonDisplay() {
+        prestigeButtonDisplay(): Component | string | null {
-			if (layers[this.layer || this.tab.layer].prestigeButtonDisplay) {
+            if (layers[this.layer].prestigeButtonDisplay) {
-				return coerceComponent(layers[this.layer || this.tab.layer].prestigeButtonDisplay);
+                return coerceComponent(layers[this.layer].prestigeButtonDisplay!);
             }
             return null;
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				this.canReset ? { 'background-color': this.color } : {},
+                this.canReset ? { backgroundColor: this.color } : undefined,
-				layers[this.layer || this.tab.layer].componentStyles?.['prestige-button']
+                layers[this.layer].componentStyles?.["prestige-button"]
             ];
         }
     },
     methods: {
         resetLayer() {
-			resetLayer(this.layer || this.tab.layer);
+            resetLayer(this.layer);
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/ResourceDisplay.vue

@@ -1,51 +1,72 @@
 <template>
     <div class="resource-display" :class="{ empty }">
-		<div v-if="baseAmount != undefined">You have {{ baseAmount }} {{ baseResource }}</div>
+        <div v-if="baseAmount != undefined && baseResource != undefined">
-		<div v-if="passiveGeneration != undefined">You are gaining {{ passiveGeneration }} {{ resource }} per second</div>
+            You have {{ baseAmount }} {{ baseResource }}
-		<spacer v-if="(baseAmount != undefined || passiveGeneration != undefined) && (best != undefined || total != undefined)" />
+        </div>
+        <div v-if="passiveGeneration != undefined">
+            You are gaining {{ passiveGeneration }} {{ resource }} per second
+        </div>
+        <spacer
+            v-if="
+                (baseAmount != undefined || passiveGeneration != undefined) &&
+                    (best != undefined || total != undefined)
+            "
+        />
         <div v-if="best != undefined">Your best {{ resource }} is {{ best }}</div>
         <div v-if="total != undefined">You have made a total of {{ total }} {{ resource }}</div>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import player from '../../game/player';
+import player from "@/game/player";
-import Decimal, { formatWhole } from '../../util/bignum';
+import { DecimalSource } from "@/lib/break_eternity";
+import Decimal, { formatWhole } from "@/util/bignum";
+import { InjectLayerMixin } from "@/util/vue";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'resource-display',
+    name: "resource-display",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
-	props: {
-		layer: String
-	},
     computed: {
-		baseAmount() {
+        baseAmount(): string | null {
-			return layers[this.layer || this.tab.layer].baseAmount ? formatWhole(layers[this.layer || this.tab.layer].baseAmount) : null;
+            return layers[this.layer].baseAmount
+                ? formatWhole(layers[this.layer].baseAmount!)
+                : null;
         },
-		baseResource() {
+        baseResource(): string | undefined {
-			return layers[this.layer || this.tab.layer].baseResource;
+            return layers[this.layer].baseResource;
         },
-		passiveGeneration() {
+        passiveGeneration(): string | null {
-			return layers[this.layer || this.tab.layer].passiveGeneration ?
+            return layers[this.layer].passiveGeneration
-				formatWhole(Decimal.times(layers[this.layer || this.tab.layer].resetGain,
+                ? formatWhole(
-					layers[this.layer || this.tab.layer].passiveGeneration)) :
+                      Decimal.times(
-				null;
+                          layers[this.layer].resetGain,
+                          layers[this.layer].passiveGeneration === true
+                              ? 1
+                              : (layers[this.layer].passiveGeneration as DecimalSource)
+                      )
+                  )
+                : null;
         },
-		resource() {
+        resource(): string {
-			return layers[this.layer || this.tab.layer].resource;
+            return layers[this.layer].resource;
         },
-		best() {
+        best(): string | null {
-			return player[this.layer || this.tab.layer].best ? formatWhole(player[this.layer || this.tab.layer].best) : null;
+            return player.layers[this.layer].best
+                ? formatWhole(player.layers[this.layer].best as Decimal)
+                : null;
         },
-		total() {
+        total(): string | null {
-			return player[this.layer || this.tab.layer].total ? formatWhole(player[this.layer || this.tab.layer].total) : null;
+            return player.layers[this.layer].total
+                ? formatWhole(player.layers[this.layer].total as Decimal)
+                : null;
         },
-		empty() {
+        empty(): boolean {
             return !(this.baseAmount || this.passiveGeneration || this.best || this.total);
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/RespecButton.vue

@@ -3,8 +3,12 @@
         <tooltip display="Disable respec confirmation">
             <Toggle :value="confirmRespec" @change="setConfirmRespec" />
         </tooltip>
-		<button @click="respec" :class="{ feature: true, respec: true, can: unlocked, locked: !unlocked }"
+        <button
-			style="margin-right: 18px" :style="style">
+            @click="respec"
+            :class="{ feature: true, respec: true, can: unlocked, locked: !unlocked }"
+            style="margin-right: 18px"
+            :style="style"
+        >
             <component :is="respecButtonDisplay" />
         </button>
         <Modal :show="confirming" @close="cancel">
@@ -13,13 +17,15 @@
             </template>
             <template v-slot:body>
                 <slot name="respec-warning">
-					<div>Are you sure you want to respec? This will force you to do a {{ name }} respec as well!</div>
+                    <component :is="respecWarning" />
                 </slot>
             </template>
             <template v-slot:footer>
                 <div class="modal-footer">
                     <div class="modal-flex-grow"></div>
-					<danger-button class="button modal-button" @click="confirm" skipConfirm>Yes</danger-button>
+                    <danger-button class="button modal-button" @click="confirm" skipConfirm
+                        >Yes</danger-button
+                    >
                     <button class="button modal-button" @click="cancel">Cancel</button>
                 </div>
             </template>
@@ -27,46 +33,52 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import player from '../../game/player';
+import player from "@/game/player";
-import { coerceComponent } from '../../util/vue';
+import { CoercableComponent } from "@/typings/component";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'respec-button',
+    name: "respec-button",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
+    props: {
+        confirmRespec: Boolean,
+        display: [String, Object] as PropType<CoercableComponent>,
+        respecWarningDisplay: [String, Object] as PropType<CoercableComponent>
+    },
     data() {
         return {
             confirming: false
         };
     },
-	props: {
+    emits: ["set-confirm-respec", "respec"],
-		layer: String,
-		confirmRespec: Boolean,
-		display: [ String, Object ]
-	},
-	emits: [ 'set-confirm-respec', 'respec' ],
     computed: {
-		style() {
+        style(): Partial<CSSStyleDeclaration> | undefined {
-			return [
+            return layers[this.layer].componentStyles?.["respec-button"];
-				layers[this.layer || this.tab.layer].componentStyles?.['respec-button']
-			];
         },
-		unlocked() {
+        unlocked(): boolean {
-			return player[this.layer || this.tab.layer].unlocked;
+            return player.layers[this.layer].unlocked;
         },
-		respecButtonDisplay() {
+        respecButtonDisplay(): Component | string {
             if (this.display) {
                 return coerceComponent(this.display);
             }
             return coerceComponent("Respec");
         },
-		name() {
+        respecWarning(): Component | string {
-			return layers[this.layer || this.tab.layer].name || this.layer || this.tab.layer;
+            if (this.respecWarningDisplay) {
+                return coerceComponent(this.respecWarningDisplay);
+            }
+            return coerceComponent(
+                `Are you sure you want to respec? This will force you to do a ${layers[this.layer]
+                    .name || this.layer} respec as well!`
+            );
         }
     },
     methods: {
-		setConfirmRespec(value) {
+        setConfirmRespec(value: boolean) {
             this.$emit("set-confirm-respec", value);
         },
         respec() {
@@ -84,7 +96,7 @@ export default {
             this.confirming = false;
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/Subtab.vue

@@ -0,0 +1,32 @@
+<template>
+    <LayerProvider :layer="layer" :index="tab.index">
+        <component :is="display" />
+    </LayerProvider>
+</template>
+
+<script lang="ts">
+import { layers } from "@/game/layers";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
+
+export default defineComponent({
+    name: "subtab",
+    mixins: [InjectLayerMixin],
+    props: {
+        id: {
+            type: [Number, String],
+            required: true
+        }
+    },
+    computed: {
+        display(): Component | string | undefined {
+            return (
+                layers[this.layer].subtabs![this.id].display &&
+                coerceComponent(layers[this.layer].subtabs![this.id].display!)
+            );
+        }
+    }
+});
+</script>
+
+<style scoped></style>

src/components/features/Upgrade.vue

@@ -1,44 +1,55 @@
 <template>
-	<button v-if="upgrade.unlocked" :style="style" @click="buy"
+    <button
+        v-if="upgrade.unlocked"
+        :style="style"
+        @click="buy"
         :class="{
             feature: true,
-			[tab.layer]: true,
+            [layer]: true,
             upgrade: true,
             can: upgrade.canAfford && !upgrade.bought,
             locked: !upgrade.canAfford && !upgrade.bought,
             bought: upgrade.bought
-		}" :disabled="!upgrade.canAfford && !upgrade.bought">
+        }"
+        :disabled="!upgrade.canAfford && !upgrade.bought"
+    >
         <component v-if="fullDisplay" :is="fullDisplay" />
         <default-upgrade-display v-else :id="id" />
         <branch-node :branches="upgrade.branches" :id="id" featureType="upgrade" />
     </button>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import { Upgrade } from "@/typings/features/upgrade";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'upgrade',
+    name: "upgrade",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        id: {
-		id: [ Number, String ]
+            type: [Number, String],
+            required: true
+        }
     },
     computed: {
-		upgrade() {
+        upgrade(): Upgrade {
-			return layers[this.layer || this.tab.layer].upgrades[this.id];
+            return layers[this.layer].upgrades!.data[this.id];
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				this.upgrade.canAfford && !this.upgrade.bought ? { 'background-color': layers[this.layer || this.tab.layer].color } : {},
+                this.upgrade.canAfford && !this.upgrade.bought
-				layers[this.layer || this.tab.layer].componentStyles?.upgrade,
+                    ? { backgroundColor: layers[this.layer].color }
+                    : undefined,
+                layers[this.layer].componentStyles?.upgrade,
                 this.upgrade.style
             ];
         },
-		fullDisplay() {
+        fullDisplay(): Component | string | null {
             if (this.upgrade.fullDisplay) {
-				return coerceComponent(this.upgrade.fullDisplay, 'div');
+                return coerceComponent(this.upgrade.fullDisplay, "div");
             }
             return null;
         }
@@ -48,7 +59,7 @@ export default {
             this.upgrade.buy();
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/features/Upgrades.vue

@@ -3,7 +3,11 @@
         <template v-if="filteredUpgrades.rows && filteredUpgrades.cols">
             <div v-for="row in filteredUpgrades.rows" class="row" :key="row">
                 <div v-for="col in filteredUpgrades.cols" :key="col">
-					<upgrade v-if="filteredUpgrades[row * 10 + col] !== undefined" class="align" :id="row * 10 + col" />
+                    <upgrade
+                        v-if="filteredUpgrades[row * 10 + col] !== undefined"
+                        class="align"
+                        :id="row * 10 + col"
+                    />
                 </div>
             </div>
         </template>
@@ -13,24 +17,29 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { getFiltered } from '../../util/vue';
+import { Upgrade } from "@/typings/features/upgrade";
+import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'upgrades',
+    name: "upgrades",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        upgrades: {
-		upgrades: Array
+            type: Object as PropType<Array<string>>
+        }
     },
     computed: {
-		filteredUpgrades() {
+        filteredUpgrades(): Record<string, Upgrade> {
-			return getFiltered(layers[this.layer || this.tab.layer].upgrades, this.upgrades);
+            if (layers[this.layer].upgrades) {
+                return getFiltered<Upgrade>(layers[this.layer].upgrades!.data, this.upgrades);
+            }
+            return {};
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/fields/DangerButton.vue

@@ -9,32 +9,34 @@
     </span>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'danger-button',
+
+export default defineComponent({
+    name: "danger-button",
     data() {
         return {
             confirming: false
-		}
+        };
     },
     props: {
         disabled: Boolean,
         skipConfirm: Boolean
     },
-	emits: [ 'click', 'confirmingChanged' ],
+    emits: ["click", "confirmingChanged"],
     watch: {
         confirming(newValue) {
-			this.$emit('confirmingChanged', newValue);
+            this.$emit("confirmingChanged", newValue);
         }
     },
     methods: {
         click() {
             if (this.skipConfirm) {
-				this.$emit('click');
+                this.$emit("click");
                 return;
             }
             if (this.confirming) {
-				this.$emit('click');
+                this.$emit("click");
             }
             this.confirming = !this.confirming;
         },
@@ -42,7 +44,7 @@ export default {
             this.confirming = false;
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/fields/FeedbackButton.vue

@@ -1,23 +1,30 @@
 <template>
-	<button @click.stop="click" class="feedback" :class="{ activated, left }"><slot /></button>
+    <button @click.stop="click" class="feedback" :class="{ activated, left }">
+        <slot />
+    </button>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'feedback-button',
+
+export default defineComponent({
+    name: "feedback-button",
     data() {
         return {
             activated: false,
             activatedTimeout: null
-		}
+        } as {
+            activated: boolean;
+            activatedTimeout: number | null;
+        };
     },
     props: {
         left: Boolean
     },
-	emits: [ 'click' ],
+    emits: ["click"],
     methods: {
         click() {
-			this.$emit('click');
+            this.$emit("click");
 
             // Give feedback to user
             if (this.activatedTimeout) {
@@ -26,11 +33,11 @@ export default {
             this.activated = false;
             this.$nextTick(() => {
                 this.activated = true;
-				this.activatedTimeout = setTimeout(() => this.activated = false, 500);
+                this.activatedTimeout = setTimeout(() => (this.activated = false), 500);
             });
         }
     }
-};
+});
 </script>
 
 <style scoped>
@@ -43,10 +50,10 @@ export default {
     left: calc(100% + 5px);
     top: 50%;
     transform: translateY(-50%);
-	content: '✔';
+    content: "✔";
     opacity: 0;
     pointer-events: none;
-	box-shadow: inset 0 0 0 35px rgba(111,148,182,0);
+    box-shadow: inset 0 0 0 35px rgba(111, 148, 182, 0);
     text-shadow: none;
 }
 
@@ -56,7 +63,7 @@ export default {
 }
 
 .feedback.activated::after {
-	animation: feedback .5s ease-out forwards;
+    animation: feedback 0.5s ease-out forwards;
 }
 
 @keyframes feedback {

src/components/fields/Select.vue

@@ -1,32 +1,42 @@
 <template>
     <div class="field">
         <span class="field-title" v-if="title">{{ title }}</span>
-		<vue-select :options="options" :model-value="value" @update:modelValue="setSelected" label-by="label" :value-by="getValue" :placeholder="placeholder" :close-on-select="closeOnSelect" />
+        <vue-select
+            :options="options"
+            :model-value="value"
+            @update:modelValue="setSelected"
+            label-by="label"
+            :value-by="getValue"
+            :placeholder="placeholder"
+            :close-on-select="closeOnSelect"
+        />
     </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'Select',
+
+export default defineComponent({
+    name: "Select",
     props: {
         title: String,
         options: Array, // https://vue-select.org/guide/options.html#options-prop
-		value: [ String, Object ],
+        value: [String, Object],
-		default: [ String, Object ],
+        default: [String, Object],
         placeholder: String,
         closeOnSelect: Boolean
     },
-	emits: [ 'change' ],
+    emits: ["change"],
     methods: {
-		setSelected(value) {
+        setSelected(value: any) {
             value = value || this.default;
-			this.$emit('change', value);
+            this.$emit("change", value);
         },
-		getValue(item) {
+        getValue(item?: { value: any }) {
             return item?.value;
         }
     }
-};
+});
 </script>
 
 <style>
@@ -40,7 +50,7 @@ export default {
 
 .vue-select,
 .vue-dropdown {
-	border-color: rgba(var(--color), .26);
+    border-color: rgba(var(--color), 0.26);
 }
 
 .vue-dropdown {

src/components/fields/Slider.vue

@@ -2,22 +2,30 @@
     <div class="field">
         <span class="field-title" v-if="title">{{ title }}</span>
         <tooltip :display="`${value}`" :class="{ fullWidth: !title }">
-			<input type="range" :value="value" @input="e => $emit('change', parseInt(e.target.value))" :min="min" :max="max" />
+            <input
+                type="range"
+                :value="value"
+                @input="e => $emit('change', parseInt(e.target.value))"
+                :min="min"
+                :max="max"
+            />
         </tooltip>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'Slider',
+
+export default defineComponent({
+    name: "Slider",
     props: {
         title: String,
         value: Number,
         min: Number,
         max: Number
     },
-	emits: [ 'change' ]
+    emits: ["change"]
-};
+});
 </script>
 
 <style scoped>

src/components/fields/Text.vue

@@ -2,17 +2,32 @@
     <form @submit.prevent="$emit('submit')">
         <div class="field">
             <span class="field-title" v-if="title">{{ title }}</span>
-			<textarea-autosize v-if="textarea" :placeholder="placeholder" :value="value" :maxHeight="maxHeight"
+            <textarea-autosize
-				@input="value => $emit('change', value)" ref="field" />
+                v-if="textarea"
-			<input v-else type="text" :value="value" @input="e => $emit('change', e.target.value)" :placeholder="placeholder" ref="field"
+                :placeholder="placeholder"
-				:class="{ fullWidth: !title }" />
+                :value="value"
+                :maxHeight="maxHeight"
+                @input="value => $emit('change', value)"
+                ref="field"
+            />
+            <input
+                v-else
+                type="text"
+                :value="value"
+                @input="e => $emit('change', e.target.value)"
+                :placeholder="placeholder"
+                ref="field"
+                :class="{ fullWidth: !title }"
+            />
         </div>
     </form>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'TextField',
+
+export default defineComponent({
+    name: "TextField",
     props: {
         title: String,
         value: String,
@@ -20,11 +35,11 @@ export default {
         placeholder: String,
         maxHeight: Number
     },
-	emits: [ 'change', 'submit', 'input' ],
+    emits: ["change", "submit"],
     mounted() {
-		this.$refs.field.focus();
+        (this.$refs.field as HTMLElement).focus();
     }
-};
+});
 </script>
 
 <style scoped>

src/components/fields/Toggle.vue

@@ -5,21 +5,23 @@
     </label>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "vue";
+
 // Reference: https://codepen.io/finnhvman/pen/pOeyjE
-export default {
+export default defineComponent({
-	name: 'Toggle',
+    name: "Toggle",
     props: {
         title: String,
         value: Boolean
     },
-	emits: [ 'change' ],
+    emits: ["change"],
     methods: {
-		handleInput(e) {
+        handleInput(e: InputEvent) {
-			this.$emit('change', e.target.checked);
+            this.$emit("change", (e.target as HTMLInputElement).checked);
         }
     }
-};
+});
 </script>
 
 <style scoped>
@@ -59,7 +61,8 @@ span::after {
     width: 20px;
     height: 20px;
     background-color: white;
-	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+        0 1px 5px 0 rgba(0, 0, 0, 0.12);
     transition: background-color 0.2s, transform 0.2s;
 }
 

src/components/index.js

@@ -1,28 +0,0 @@
-// Import and register all components,
-// which will allow us to use them in any template strings anywhere in the project
-
-//import TransitionExpand from 'vue-transition-expand';
-//import 'vue-transition-expand/dist/vue-transition-expand.css';
-import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue';
-import VueTextareaAutosize from 'vue-textarea-autosize';
-import Sortable from 'vue-sortable';
-import VueNextSelect from 'vue-next-select';
-import 'vue-next-select/dist/index.css';
-
-export function registerComponents(vue) {
-	/* from files */
-	const componentsContext = require.context('./');
-	componentsContext.keys().forEach(path => {
-		const component = componentsContext(path).default;
-		if (component && !(component.name in vue._context.components)) {
-			vue.component(component.name, component);
-		}
-	});
-
-	/* from packages */
-	//vue.use(TransitionExpand);
-	vue.component('collapse-transition', CollapseTransition);
-	vue.use(VueTextareaAutosize);
-	vue.use(Sortable);
-	vue.component('vue-select', VueNextSelect);
-}

src/components/index.ts

@@ -0,0 +1,26 @@
+// Import and register all components,
+// which will allow us to use them in any template strings anywhere in the project
+
+import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
+import VueTextareaAutosize from "vue-textarea-autosize";
+import Sortable from "vue-sortable";
+import VueNextSelect from "vue-next-select";
+import "vue-next-select/dist/index.css";
+import { App } from "vue";
+
+export function registerComponents(vue: App): void {
+    /* from files */
+    const componentsContext = require.context("./");
+    componentsContext.keys().forEach(path => {
+        const component = componentsContext(path).default;
+        if (component && !(component.name in vue._context.components)) {
+            vue.component(component.name, component);
+        }
+    });
+
+    /* from packages */
+    vue.component("collapse-transition", CollapseTransition);
+    vue.use(VueTextareaAutosize);
+    vue.use(Sortable);
+    vue.component("vue-select", VueNextSelect);
+}

src/components/system/Column.vue

@@ -6,8 +6,10 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-     name: 'column'
+
-};
+export default defineComponent({
+    name: "column"
+});
 </script>

src/components/system/DefaultLayerTab.vue

@@ -12,32 +12,31 @@
     <achievements />
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'default-layer-tab',
+    name: "default-layer-tab",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
-	props: {
-		layer: String
-	},
     computed: {
-		infobox() {
+        infobox(): string | undefined {
-			return layers[this.layer || this.tab.layer].infoboxes && Object.keys(layers[this.layer || this.tab.layer].infoboxes)[0];
+            return (
+                layers[this.layer].infoboxes && Object.keys(layers[this.layer].infoboxes!.data)[0]
+            );
         },
-		midsection() {
+        midsection(): Component | string | null {
-			if (layers[this.layer || this.tab.layer].midsection) {
+            if (layers[this.layer].midsection) {
-				return coerceComponent(layers[this.layer || this.tab.layer].midsection);
+                return coerceComponent(layers[this.layer].midsection!);
             }
             return null;
         },
-		showPrestigeButton() {
+        showPrestigeButton(): boolean {
-			return layers[this.layer || this.tab.layer].type !== "none";
+            return layers[this.layer].type !== "none";
-		},
         }
-};
+    }
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/system/GameOverScreen.vue

@@ -12,9 +12,12 @@
         <template v-slot:body="{ shown }">
             <div v-if="shown">
                 <div>It took you {{ timePlayed }} to beat the game.</div>
-				<br>
+                <br />
-				<div>Please check the Discord to discuss the game or to check for new content updates!</div>
+                <div>
-				<br>
+                    Please check the Discord to discuss the game or to check for new content
+                    updates!
+                </div>
+                <br />
                 <div>
                     <a :href="discordLink">
                         <img src="images/discord.png" class="game-over-modal-discord" />
@@ -32,17 +35,25 @@
     </Modal>
 </template>
 
-<script>
+<script lang="ts">
-import modInfo from '../../data/modInfo.json';
+import { hasWon } from "@/data/mod";
-import { hasWon } from '../../data/mod';
+import modInfo from "@/data/modInfo.json";
-import { formatTime } from '../../util/bignum';
+import player from "@/game/player";
-import player from '../../game/player';
+import { formatTime } from "@/util/bignum";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'GameOverScreen',
+    name: "GameOverScreen",
     data() {
         const { title, logo, discordName, discordLink, versionNumber, versionTitle } = modInfo;
-		return { title, logo, discordName, discordLink, versionNumber, versionTitle };
+        return {
+            title,
+            logo,
+            discordName,
+            discordLink,
+            versionNumber,
+            versionTitle
+        };
     },
     computed: {
         timePlayed() {
@@ -60,7 +71,7 @@ export default {
             console.warn("Not yet implemented!");
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/Info.vue

@@ -5,23 +5,28 @@
                 <img class="info-modal-logo" v-if="logo" :src="logo" :alt="title" />
                 <div class="info-modal-title">
                     <h2>{{ title }}</h2>
-					<h4>v{{ versionNumber}}: {{ versionTitle }}</h4>
+                    <h4>v{{ versionNumber }}: {{ versionTitle }}</h4>
                 </div>
             </div>
         </template>
         <template v-slot:body="{ shown }">
             <div v-if="shown">
-				<div v-if="author">
+                <div v-if="author">By {{ author }}</div>
-					By {{ author }}
-				</div>
                 <div>
-					Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex
+                    Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and
+                    Aarex
                 </div>
-				<br/>
+                <br />
-				<div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div>
+                <div class="link" @click="$emit('openDialog', 'Changelog')">
-				<br>
+                    Changelog
+                </div>
+                <br />
                 <div>
-					<a :href="discordLink" v-if="discordLink !== 'https://discord.gg/WzejVAx'" class="info-modal-discord-link">
+                    <a
+                        :href="discordLink"
+                        v-if="discordLink !== 'https://discord.gg/WzejVAx'"
+                        class="info-modal-discord-link"
+                    >
                         <img src="images/discord.png" class="info-modal-discord" />
                         {{ discordName }}
                     </a>
@@ -44,10 +49,10 @@
                         Jacorb's Games
                     </a>
                 </div>
-				<br>
+                <br />
                 <div>Time Played: {{ timePlayed }}</div>
                 <div v-if="hotkeys">
-					<br>
+                    <br />
                     <h4>Hotkeys</h4>
                     <div v-for="key in hotkeys" :key="key.key">
                         {{ key.key }}: {{ key.description }}
@@ -58,36 +63,48 @@
     </Modal>
 </template>
 
-<script>
+<script lang="ts">
-import modInfo from '../../data/modInfo.json';
+import modInfo from "@/data/modInfo.json";
-import { formatTime } from '../../util/bignum';
+import { hotkeys } from "@/game/layers";
-import { hotkeys } from '../../game/layers';
+import player from "@/game/player";
-import player from '../../game/player';
+import { formatTime } from "@/util/bignum";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'Info',
+    name: "Info",
     data() {
-		const { title, logo, author, discordName, discordLink, versionNumber, versionTitle } = modInfo;
+        const {
-		return { title, logo, author, discordName, discordLink, versionNumber, versionTitle };
+            title,
+            logo,
+            author,
+            discordName,
+            discordLink,
+            versionNumber,
+            versionTitle
+        } = modInfo;
+        return {
+            title,
+            logo,
+            author,
+            discordName,
+            discordLink,
+            versionNumber,
+            versionTitle
+        };
     },
     props: {
         show: Boolean
     },
-	emits: [ 'closeDialog', 'openDialog' ],
+    emits: ["closeDialog", "openDialog"],
     computed: {
         timePlayed() {
             return formatTime(player.timePlayed);
         },
         hotkeys() {
-			return Object.keys(hotkeys).reduce((acc, curr) => {
+            return hotkeys.filter(hotkey => hotkey.unlocked);
-				if (hotkeys[curr].unlocked !== false) {
-					acc[curr] = hotkeys[curr];
-				}
-				return acc;
-			}, {});
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/LayerProvider.vue

@@ -2,12 +2,14 @@
     <slot />
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'LayerProvider',
+
+export default defineComponent({
+    name: "LayerProvider",
     provide() {
         return {
-			'tab': {
+            tab: {
                 layer: this.layer,
                 index: this.index
             }
@@ -17,8 +19,7 @@ export default {
         layer: String,
         index: Number
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/system/LayerTab.vue

@@ -1,37 +1,65 @@
 <template>
     <LayerProvider :layer="layer" :index="index">
         <div class="layer-container">
-			<button v-if="index > 0 && allowGoBack && !minimized" class="goBack" @click="goBack(index)">←</button>
+            <button
-			<button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized"><div>{{ name }}</div></button>
+                v-if="index > 0 && allowGoBack && !minimized"
+                class="goBack"
+                @click="goBack(index)"
+            >
+                ←
+            </button>
+            <button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized">
+                <div>{{ name }}</div>
+            </button>
             <div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }" v-else>
                 <branches>
-					<sticky v-if="subtabs" class="subtabs-container" :class="{ floating, firstTab: firstTab || !allowGoBack, minimizable }">
+                    <sticky
+                        v-if="subtabs"
+                        class="subtabs-container"
+                        :class="{
+                            floating,
+                            firstTab: firstTab || !allowGoBack,
+                            minimizable
+                        }"
+                    >
                         <div class="subtabs">
-							<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id"
+                            <tab-button
-								:activeTab="id === activeSubtab" :options="subtab" :text="id" />
+                                v-for="(subtab, id) in subtabs"
+                                @selectTab="selectSubtab(id)"
+                                :key="id"
+                                :activeTab="id === activeSubtab"
+                                :options="subtab"
+                                :text="id"
+                            />
                         </div>
                     </sticky>
                     <component v-if="display" :is="display" />
                     <default-layer-tab v-else />
                 </branches>
             </div>
-			<button v-if="minimizable" class="minimize" @click="toggleMinimized">▼</button>
+            <button v-if="minimizable" class="minimize" @click="toggleMinimized">
+                ▼
+            </button>
         </div>
     </LayerProvider>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import modInfo from "@/data/modInfo.json";
-import player from '../../game/player';
+import themes from "@/data/themes";
-import { coerceComponent } from '../../util/vue';
+import { layers } from "@/game/layers";
-import { isPlainObject } from '../../util/common';
+import player from "@/game/player";
-import modInfo from '../../data/modInfo.json';
+import { Subtab } from "@/typings/features/subtab";
-import themes from '../../data/themes';
+import { coerceComponent } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'layer-tab',
+    name: "layer-tab",
     props: {
-		layer: String,
+        layer: {
+            type: String,
+            required: true
+        },
         index: Number,
         forceFirstTab: Boolean,
         minimizable: Boolean,
@@ -41,49 +69,49 @@ export default {
         return { allowGoBack: modInfo.allowGoBack };
     },
     computed: {
-		minimized() {
+        minimized(): boolean {
             return this.minimizable && player.minimized[this.layer];
         },
-		name() {
+        name(): string {
-			return layers[this.layer].name;
+            return layers[this.layer].name || this.layer;
         },
-		floating() {
+        floating(): boolean {
             return themes[player.theme].floatingTabs;
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             const style = [];
             if (layers[this.layer].style) {
                 style.push(layers[this.layer].style);
             }
             if (layers[this.layer].activeSubtab?.style) {
-				style.push(layers[this.layer].activeSubtab.style);
+                style.push(layers[this.layer].activeSubtab!.style);
             }
             return style;
         },
-		display() {
+        display(): Component | string | null {
             if (layers[this.layer].activeSubtab?.display) {
-				return coerceComponent(layers[this.layer].activeSubtab.display);
+                return coerceComponent(layers[this.layer].activeSubtab!.display!);
             }
             if (layers[this.layer].display) {
-				return coerceComponent(layers[this.layer].display);
+                return coerceComponent(layers[this.layer].display!);
             }
             return null;
         },
-		subtabs() {
+        subtabs(): Record<string, Subtab> | null {
             if (layers[this.layer].subtabs) {
-				return Object.entries(layers[this.layer].subtabs)
+                return Object.entries(layers[this.layer].subtabs!)
-					.filter(subtab => isPlainObject(subtab[1]) && subtab[1].unlocked !== false)
+                    .filter(subtab => subtab[1].unlocked !== false)
-					.reduce((acc, curr) => {
+                    .reduce((acc: Record<string, Subtab>, curr: [string, Subtab]) => {
                         acc[curr[0]] = curr[1];
                         return acc;
                     }, {});
             }
             return null;
         },
-		activeSubtab() {
+        activeSubtab(): string | undefined {
             return layers[this.layer].activeSubtab?.id;
         },
-		firstTab() {
+        firstTab(): boolean {
             if (this.forceFirstTab != undefined) {
                 return this.forceFirstTab;
             }
@@ -114,6 +142,10 @@ export default {
         }
     },
     mounted() {
+        this.setup();
+    },
+    methods: {
+        setup() {
             if (this.tab == undefined) {
                 return;
             }
@@ -133,21 +165,20 @@ export default {
                     tab.style.margin = null;
                 }
             } else {
-			this.$nextTick(this.mounted);
+                this.$nextTick(this.setup);
             }
         },
-	methods: {
+        selectSubtab(subtab: string) {
-		selectSubtab(subtab) {
             player.subtabs[this.layer].mainTabs = subtab;
         },
         toggleMinimized() {
             player.minimized[this.layer] = !player.minimized[this.layer];
         },
-		goBack(index) {
+        goBack(index: number) {
             player.tabs = player.tabs.slice(0, index);
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/Microtab.vue

@@ -1,62 +1,83 @@
 <template>
     <div v-if="microtabs" class="microtabs">
-		<LayerProvider :layer="layer || tab.layer" :index="tab.index">
+        <LayerProvider :layer="layer" :index="tab.index">
             <div v-if="microtabs" class="tabs" :class="{ floating }">
-				<tab-button v-for="(microtab, id) in microtabs" @selectTab="selectMicrotab(id)" :key="id"
+                <tab-button
-					:activeTab="id === activeMicrotab.id" :options="microtab" :text="id" />
+                    v-for="(microtab, id) in microtabs"
+                    @selectTab="selectMicrotab(id)"
+                    :key="id"
+                    :activeTab="id === activeMicrotab?.id"
+                    :options="microtab"
+                    :text="id"
+                />
             </div>
+            <template v-if="activeMicrotab">
                 <layer-tab v-if="embed" :layer="embed" />
                 <component v-else :is="display" />
+            </template>
         </LayerProvider>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import themes from "@/data/themes";
-import player from '../../game/player';
+import { layers } from "@/game/layers";
-import { coerceComponent } from '../../util/vue';
+import player from "@/game/player";
-import themes from '../../data/themes';
+import { Microtab, MicrotabFamily } from "@/typings/features/subtab";
+import { coerceComponent, InjectLayerMixin } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'microtab',
+    name: "microtab",
-	inject: [ 'tab' ],
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
+        family: {
-		family: String,
+            type: String,
-		id: String
+            required: true
+        },
+        id: {
+            type: String,
+            required: true
+        }
     },
     computed: {
         floating() {
             return themes[player.theme].floatingTabs;
         },
-		tabFamily() {
+        tabFamily(): MicrotabFamily {
-			return layers[this.layer || this.tab.layer].microtabs[this.family];
+            return layers[this.layer].microtabs![this.family];
         },
-		microtabs() {
+        microtabs(): Record<string, Microtab> {
-			return Object.keys(this.tabFamily)
+            return Object.keys(this.tabFamily.data)
-				.filter(microtab =>
+                .filter(
-					microtab !== 'activeMicrotab' && this.tabFamily[microtab].isProxy && this.tabFamily[microtab].unlocked !== false)
+                    microtab =>
-				.reduce((acc, curr) => {
+                        microtab !== "activeMicrotab" &&
-					acc[curr] = this.tabFamily[curr];
+                        this.tabFamily.data[microtab].isProxy &&
+                        this.tabFamily.data[microtab].unlocked !== false
+                )
+                .reduce((acc: Record<string, Microtab>, curr) => {
+                    acc[curr] = this.tabFamily.data[curr];
                     return acc;
                 }, {});
         },
-		activeMicrotab() {
+        activeMicrotab(): Microtab | undefined {
-			return this.id != undefined ? this.tabFamily[this.id] : this.tabFamily.activeMicrotab;
+            return this.id != undefined
+                ? this.tabFamily.data[this.id]
+                : this.tabFamily.activeMicrotab;
         },
-		embed() {
+        embed(): string | undefined {
-			return this.activeMicrotab.embedLayer;
+            return this.activeMicrotab!.embedLayer;
         },
-		display() {
+        display(): Component | string | undefined {
-			return coerceComponent(this.activeMicrotab.display);
+            return this.activeMicrotab!.display && coerceComponent(this.activeMicrotab!.display!);
         }
     },
     methods: {
-		selectMicrotab(tab) {
+        selectMicrotab(tab: string) {
-			player.subtabs[this.layer || this.tab.layer][this.family] = tab;
+            player.subtabs[this.layer][this.family] = tab;
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/Modal.vue

@@ -1,7 +1,16 @@
 <template>
     <teleport to="#modal-root">
-		<transition name="modal" @before-enter="setAnimating(true)" @after-leave="setAnimating(false)">
+        <transition
-			<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')" v-bind="$attrs">
+            name="modal"
+            @before-enter="setAnimating(true)"
+            @after-leave="setAnimating(false)"
+        >
+            <div
+                class="modal-mask"
+                v-show="show"
+                v-on:pointerdown.self="$emit('close')"
+                v-bind="$attrs"
+            >
                 <div class="modal-wrapper">
                     <div class="modal-container">
                         <div class="modal-header">
@@ -20,7 +29,10 @@
                             <slot name="footer" :shown="isVisible">
                                 <div class="modal-default-footer">
                                     <div class="modal-default-flex-grow"></div>
-									<button class="button modal-default-button" @click="$emit('close')">
+                                    <button
+                                        class="button modal-default-button"
+                                        @click="$emit('close')"
+                                    >
                                         Close
                                     </button>
                                 </div>
@@ -33,29 +45,31 @@
     </teleport>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'Modal',
+
+export default defineComponent({
+    name: "Modal",
     data() {
         return {
             isAnimating: false
-		}
+        };
     },
     props: {
         show: Boolean
     },
-	emits: [ 'close' ],
+    emits: ["close"],
     computed: {
-		isVisible() {
+        isVisible(): boolean {
             return this.show || this.isAnimating;
         }
     },
     methods: {
-		setAnimating(isAnimating) {
+        setAnimating(isAnimating: boolean) {
             this.isAnimating = isAnimating;
         }
     }
-}
+});
 </script>
 
 <style scoped>

src/components/system/NaNScreen.vue

@@ -6,24 +6,36 @@
             </div>
         </template>
         <template v-slot:body>
-			<div>Attempted to assign "{{ path }}" to NaN (previously {{ format(previous) }}). Auto-saving has been {{ autosave ? 'enabled' : 'disabled' }}. Check the console for more details, and consider sharing it with the developers on discord.</div>
+            <div>
-			<br>
+                Attempted to assign "{{ path }}" to NaN (previously {{ format(previous) }}).
+                Auto-saving has been {{ autosave ? "enabled" : "disabled" }}. Check the console for
+                more details, and consider sharing it with the developers on discord.
+            </div>
+            <br />
             <div>
                 <a :href="discordLink" class="nan-modal-discord-link">
                     <img src="images/discord.png" class="nan-modal-discord" />
                     {{ discordName }}
                 </a>
             </div>
-			<br>
+            <br />
             <Toggle title="Autosave" :value="autosave" @change="setAutosave" />
             <Toggle title="Pause game" :value="paused" @change="togglePaused" />
         </template>
         <template v-slot:footer>
             <div class="nan-footer">
-				<button @click="toggleSavesManager" class="button">Open Saves Manager</button>
+                <button @click="toggleSavesManager" class="button">
+                    Open Saves Manager
+                </button>
                 <button @click="setZero" class="button">Set to 0</button>
                 <button @click="setOne" class="button">Set to 1</button>
-				<button @click="setPrev" class="button" v-if="previous && previous.neq(0) && previous.neq(1)">Set to previous</button>
+                <button
+                    @click="setPrev"
+                    class="button"
+                    v-if="previous && previous.neq(0) && previous.neq(1)"
+                >
+                    Set to previous
+                </button>
                 <button @click="ignore" class="button danger">Ignore</button>
             </div>
         </template>
@@ -31,50 +43,60 @@
     <SavesManager :show="showSaves" @closeDialog="toggleSavesManager" />
 </template>
 
-<script>
+<script lang="ts">
-import modInfo from '../../data/modInfo.json';
+import modInfo from "@/data/modInfo.json";
-import Decimal, { format } from '../../util/bignum';
+import player from "@/game/player";
-import { mapState } from '../../util/vue';
+import Decimal, { format } from "@/util/bignum";
-import player from '../../game/player';
+import { mapState } from "@/util/vue";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'NaNScreen',
+    name: "NaNScreen",
     data() {
         const { discordName, discordLink } = modInfo;
         return { discordName, discordLink, format, showSaves: false };
     },
     computed: {
-		...mapState([ 'hasNaN', 'autosave' ]),
+        ...mapState(["hasNaN", "autosave"]),
-		path() {
+        path(): string | undefined {
-			return player.NaNPath.join('.');
+            return player.NaNPath?.join(".");
         },
-		previous() {
+        previous(): any {
-			return player.NaNReceiver?.[this.property];
+            if (player.NaNReceiver && this.property) {
+                return player.NaNReceiver[this.property];
+            }
+            return null;
         },
         paused() {
             return player.devSpeed === 0;
         },
-		property() {
+        property(): string | undefined {
-			return player.NaNPath.slice(-1)[0];
+            return player.NaNPath?.slice(-1)[0];
         }
     },
     methods: {
         setZero() {
+            if (player.NaNReceiver && this.property) {
                 player.NaNReceiver[this.property] = new Decimal(0);
                 player.hasNaN = false;
+            }
         },
         setOne() {
+            if (player.NaNReceiver && this.property) {
                 player.NaNReceiver[this.property] = new Decimal(1);
                 player.hasNaN = false;
+            }
         },
         setPrev() {
             player.hasNaN = false;
         },
         ignore() {
+            if (player.NaNReceiver && this.property) {
                 player.NaNReceiver[this.property] = new Decimal(NaN);
                 player.hasNaN = false;
+            }
         },
-		setAutosave(autosave) {
+        setAutosave(autosave: boolean) {
             player.autosave = autosave;
         },
         toggleSavesManager() {
@@ -84,7 +106,7 @@ export default {
             player.devSpeed = this.paused ? 1 : 0;
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/Nav.vue

@@ -3,7 +3,9 @@
         <img v-if="banner" :src="banner" height="100%" :alt="title" />
         <div v-else class="title">{{ title }}</div>
         <div @click="openDialog('Changelog')" class="version-container">
-			<tooltip display="Changelog" bottom class="version"><span>v{{ version }}</span></tooltip>
+            <tooltip display="Changelog" bottom class="version"
+                ><span>v{{ version }}</span></tooltip
+            >
         </div>
         <div style="flex-grow: 1; cursor: unset;"></div>
         <div class="discord">
@@ -12,9 +14,17 @@
                 <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
                     <a :href="discordLink" target="_blank">{{ discordName }}</a>
                 </li>
-				<li><a href="https://discord.gg/WzejVAx" target="_blank">The Paper Pilot Community</a></li>
+                <li>
-				<li><a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a></li>
+                    <a href="https://discord.gg/WzejVAx" target="_blank"
-				<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
+                        >The Paper Pilot Community</a
+                    >
+                </li>
+                <li>
+                    <a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a>
+                </li>
+                <li>
+                    <a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a>
+                </li>
             </ul>
         </div>
         <div @click="openDialog('Info')">
@@ -33,13 +43,19 @@
     </div>
     <div v-else class="overlay-nav" v-bind="$attrs">
         <div @click="openDialog('Changelog')" class="version-container">
-			<tooltip display="Changelog" right xoffset="25%" class="version"><span>v{{ version }}</span></tooltip>
+            <tooltip display="Changelog" right xoffset="25%" class="version"
+                ><span>v{{ version }}</span></tooltip
+            >
         </div>
         <div @click="openDialog('Saves')">
-			<tooltip display="Saves" right class="saves"><span class="material-icons">library_books</span></tooltip>
+            <tooltip display="Saves" right class="saves"
+                ><span class="material-icons">library_books</span></tooltip
+            >
         </div>
         <div @click="openDialog('Options')">
-			<tooltip display="<span>Options</span>" right class="options"><img src="images/options_wheel.png" /></tooltip>
+            <tooltip display="<span>Options</span>" right class="options"
+                ><img src="images/options_wheel.png"
+            /></tooltip>
         </div>
         <div @click="openDialog('Info')">
             <tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip>
@@ -50,9 +66,17 @@
                 <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
                     <a :href="discordLink" target="_blank">{{ discordName }}</a>
                 </li>
-				<li><a href="https://discord.gg/WzejVAx" target="_blank">The Paper Pilot Community</a></li>
+                <li>
-				<li><a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a></li>
+                    <a href="https://discord.gg/WzejVAx" target="_blank"
-				<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li>
+                        >The Paper Pilot Community</a
+                    >
+                </li>
+                <li>
+                    <a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a>
+                </li>
+                <li>
+                    <a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a>
+                </li>
             </ul>
         </div>
     </div>
@@ -61,11 +85,15 @@
     <Options :show="showOptions" @closeDialog="closeDialog" />
 </template>
 
-<script>
+<script lang="ts">
-import modInfo from '../../data/modInfo';
+import modInfo from "@/data/modInfo.json";
+import { defineComponent } from "vue";
 
-export default {
+type modals = "Info" | "Saves" | "Options" | "Changelog";
-	name: 'Nav',
+type showModals = "showInfo" | "showSaves" | "showOptions" | "showChangelog";
+
+export default defineComponent({
+    name: "Nav",
     data() {
         return {
             useHeader: modInfo.useHeader,
@@ -78,20 +106,20 @@ export default {
             showSaves: false,
             showOptions: false,
             showChangelog: false
-		}
+        };
     },
     methods: {
         openDiscord() {
-			window.open(this.discordLink, 'mywindow');
+            window.open(this.discordLink, "mywindow");
         },
-		openDialog(dialog) {
+        openDialog(dialog: modals) {
-			this[`show${dialog}`] = true;
+            this[`show${dialog}` as showModals] = true;
         },
-		closeDialog(dialog) {
+        closeDialog(dialog: modals) {
-			this[`show${dialog}`] = false;
+            this[`show${dialog}` as showModals] = false;
         }
     }
-};
+});
 </script>
 
 <style scoped>
@@ -169,7 +197,7 @@ export default {
     padding: 20px;
     right: -280px;
     width: 200px;
-	transition: right .25s ease;
+    transition: right 0.25s ease;
     background: var(--secondary-background);
     z-index: 10;
 }
@@ -178,7 +206,7 @@ export default {
     position: absolute;
     left: -280px;
     right: unset;
-    transition: left .25s ease;
+    transition: left 0.25s ease;
 }
 
 .overlay-nav .discord:hover .discord-links {
@@ -205,8 +233,7 @@ export default {
 
 .info:hover span {
     transform: scale(1.2, 1.2);
-	text-shadow: 5px 0 10px var(--link),
+    text-shadow: 5px 0 10px var(--link), -3px 0 12px var(--link);
-		-3px 0 12px var(--link);
 }
 
 .saves span {
@@ -215,8 +242,7 @@ export default {
 
 .saves:hover span {
     transform: scale(1.2, 1.2);
-	text-shadow: 5px 0 10px var(--color),
+    text-shadow: 5px 0 10px var(--color), -3px 0 12px var(--color);
-		-3px 0 12px var(--color);
 }
 
 .options img {

src/components/system/Options.vue

@@ -6,57 +6,84 @@
             </div>
         </template>
         <template v-slot:body>
-			<Select title="Theme" :options="themes" :value="theme" @change="setTheme" default="classic" />
+            <Select
-			<Select title="Show Milestones" :options="msDisplayOptions" :value="msDisplay" @change="setMSDisplay" default="all" />
+                title="Theme"
-			<Toggle title="Offline Production" :value="offlineProd" @change="toggleOption('offlineProd')" />
+                :options="themes"
+                :value="theme"
+                @change="setTheme"
+                default="classic"
+            />
+            <Select
+                title="Show Milestones"
+                :options="msDisplayOptions"
+                :value="msDisplay"
+                @change="setMSDisplay"
+                default="all"
+            />
+            <Toggle
+                title="Offline Production"
+                :value="offlineProd"
+                @change="toggleOption('offlineProd')"
+            />
             <Toggle title="Autosave" :value="autosave" @change="toggleOption('autosave')" />
             <Toggle title="Pause game" :value="paused" @change="togglePaused" />
             <Toggle title="Show TPS" :value="showTPS" @change="toggleOption('showTPS')" />
-			<Toggle title="Hide Maxed Challenges" :value="hideChallenges" @change="toggleOption('hideChallenges')" />
+            <Toggle
+                title="Hide Maxed Challenges"
+                :value="hideChallenges"
+                @change="toggleOption('hideChallenges')"
+            />
         </template>
     </Modal>
 </template>
 
-<script>
+<script lang="ts">
-import themes from '../../data/themes';
+import { defineComponent } from "vue";
-import { camelToTitle } from '../../util/common';
+import themes, { Themes } from "@/data/themes";
-import { mapState } from '../../util/vue';
+import { camelToTitle } from "@/util/common";
-import player from '../../game/player';
+import { mapState } from "@/util/vue";
+import player from "@/game/player";
+import { MilestoneDisplay } from "@/game/enums";
 
-export default {
+export default defineComponent({
-	name: 'Options',
+    name: "Options",
     props: {
         show: Boolean
     },
-	emits: [ 'closeDialog' ],
+    emits: ["closeDialog"],
     data() {
         return {
-			themes: Object.keys(themes).map(theme => ({ label: camelToTitle(theme), value: theme })),
+            themes: Object.keys(themes).map(theme => ({
-			msDisplayOptions: [ "all", "last", "configurable", "incomplete", "none" ]
+                label: camelToTitle(theme),
-				.map(option => ({ label: camelToTitle(option), value: option }))
+                value: theme
-		}
+            })),
+            msDisplayOptions: ["all", "last", "configurable", "incomplete", "none"].map(option => ({
+                label: camelToTitle(option),
+                value: option
+            }))
+        };
     },
     computed: {
-		...mapState([ "autosave", "offlineProd", "showTPS", "hideChallenges", "theme", "msDisplay" ]),
+        ...mapState(["autosave", "offlineProd", "showTPS", "hideChallenges", "theme", "msDisplay"]),
         paused() {
             return player.devSpeed === 0;
         }
     },
     methods: {
-		toggleOption(option) {
+        toggleOption(option: string) {
             player[option] = !player[option];
         },
-		setTheme(theme) {
+        setTheme(theme: Themes) {
             player.theme = theme;
         },
-		setMSDisplay(msDisplay) {
+        setMSDisplay(msDisplay: MilestoneDisplay) {
             player.msDisplay = msDisplay;
         },
         togglePaused() {
             player.devSpeed = this.paused ? 1 : 0;
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/Resource.vue

@@ -4,15 +4,16 @@
     </h2>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'resource',
+
+export default defineComponent({
+    name: "resource",
     props: {
         color: String,
         amount: String
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/system/Row.vue

@@ -6,8 +6,10 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-     name: 'row'
+
-};
+export default defineComponent({
+    name: "row"
+});
 </script>

src/components/system/Save.vue

@@ -1,17 +1,34 @@
 <template>
     <div class="save" :class="{ active }">
-			<div class='handle material-icons'>drag_handle</div>
+        <div class="handle material-icons">drag_handle</div>
         <div class="actions" v-if="!editing">
-				<feedback-button @click="$emit('export')" class="button" left v-if="save.error == undefined && !confirming">
+            <feedback-button
+                @click="$emit('export')"
+                class="button"
+                left
+                v-if="save.error == undefined && !confirming"
+            >
                 <span class="material-icons">content_paste</span>
             </feedback-button>
-				<button @click="$emit('duplicate')" class="button" v-if="save.error == undefined && !confirming">
+            <button
+                @click="$emit('duplicate')"
+                class="button"
+                v-if="save.error == undefined && !confirming"
+            >
                 <span class="material-icons">content_copy</span>
             </button>
-				<button @click="toggleEditing" class="button" v-if="save.error == undefined && !confirming">
+            <button
+                @click="toggleEditing"
+                class="button"
+                v-if="save.error == undefined && !confirming"
+            >
                 <span class="material-icons">edit</span>
             </button>
-				<danger-button :disabled="active" @click="$emit('delete')" @confirmingChanged="confirmingChanged">
+            <danger-button
+                :disabled="active"
+                @click="$emit('delete')"
+                @confirmingChanged="confirmingChanged"
+            >
                 <span class="material-icons" style="margin: -2px">delete</span>
             </danger-button>
         </div>
@@ -27,32 +44,40 @@
             <button class="button open" @click="$emit('open')">
                 <h3>{{ save.name }}</h3>
             </button>
-				<span class="save-version">v{{ save.modVersion }}</span><br>
+            <span class="save-version">v{{ save.modVersion }}</span
-				<div>Last played {{ dateFormat.format(time) }}</div>
+            ><br />
+            <div v-if="time">Last played {{ dateFormat.format(time) }}</div>
         </div>
         <div class="details" v-else-if="save.error == undefined && editing">
             <TextField v-model="newName" class="editname" @submit="changeName" />
         </div>
-			<div v-else class="details error">
+        <div v-else class="details error">Error: Failed to load save with id {{ save.id }}</div>
-				Error: Failed to load save with id {{ save.id }}
-			</div>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import player from '../../game/player';
+import player from "@/game/player";
+import { PlayerData } from "@/typings/player";
+import { defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'save',
+    name: "save",
     props: {
-		save: Object
+        save: {
+            type: Object as PropType<Partial<PlayerData>>,
+            required: true
+        }
     },
-	emits: [ 'export', 'open', 'duplicate', 'delete', 'editSave' ],
+    emits: ["export", "open", "duplicate", "delete", "editSave"],
     data() {
         return {
-			dateFormat: new Intl.DateTimeFormat('en-US', {
+            dateFormat: new Intl.DateTimeFormat("en-US", {
-				year: 'numeric', month: 'numeric', day: 'numeric',
+                year: "numeric",
-				hour: 'numeric', minute: 'numeric', second: 'numeric',
+                month: "numeric",
+                day: "numeric",
+                hour: "numeric",
+                minute: "numeric",
+                second: "numeric"
             }),
             editing: false,
             confirming: false,
@@ -60,27 +85,27 @@ export default {
         };
     },
     computed: {
-		active() {
+        active(): boolean {
             return this.save.id === player.id;
         },
-		time() {
+        time(): number | undefined {
             return this.active ? player.time : this.save.time;
         }
     },
     methods: {
-		confirmingChanged(confirming) {
+        confirmingChanged(confirming: boolean) {
             this.confirming = confirming;
         },
         toggleEditing() {
-			this.newName = this.save.name;
+            this.newName = this.save.name || "";
             this.editing = !this.editing;
         },
         changeName() {
-			this.$emit('editSave', this.newName);
+            this.$emit("editSave", this.newName);
             this.editing = false;
         }
     }
-};
+});
 </script>
 
 <style scoped>
@@ -119,14 +144,14 @@ export default {
 }
 
 .error {
-    font-size: .8em;
+    font-size: 0.8em;
     color: var(--danger);
 }
 
 .save-version {
     margin-left: 4px;
-	font-size: .7em;
+    font-size: 0.7em;
-	opacity: .7;
+    opacity: 0.7;
 }
 
 .actions {

src/components/system/SavesManager.vue

@@ -4,24 +4,48 @@
             <h2>Saves Manager</h2>
         </template>
         <template v-slot:body v-sortable="{ update, handle: '.handle' }">
-			<save v-for="(save, index) in saves" :key="index" :save="save" @open="openSave(save.id)" @export="exportSave(save.id)"
+            <save
-				@editSave="name => editSave(save.id, name)" @duplicate="duplicateSave(save.id)" @delete="deleteSave(save.id)" />
+                v-for="(save, index) in saves"
+                :key="index"
+                :save="save"
+                @open="openSave(save.id)"
+                @export="exportSave(save.id)"
+                @editSave="name => editSave(save.id, name)"
+                @duplicate="duplicateSave(save.id)"
+                @delete="deleteSave(save.id)"
+            />
         </template>
         <template v-slot:footer>
             <div class="modal-footer">
-				<TextField :value="saveToImport" @submit="importSave" @input="importSave"
+                <TextField
-					title="Import Save" placeholder="Paste your save here!" :class="{ importingFailed }" />
+                    :value="saveToImport"
+                    @submit="importSave"
+                    @input="importSave"
+                    title="Import Save"
+                    placeholder="Paste your save here!"
+                    :class="{ importingFailed }"
+                />
                 <div class="field">
                     <span class="field-title">Create Save</span>
                     <div class="field-buttons">
                         <button class="button" @click="newSave">New Game</button>
-						<Select v-if="Object.keys(bank).length > 0" :options="bank" closeOnSelect
+                        <Select
-							@change="newFromPreset" placeholder="Select preset" class="presets" :value="[]" />
+                            v-if="Object.keys(bank).length > 0"
+                            :options="bank"
+                            closeOnSelect
+                            @change="newFromPreset"
+                            placeholder="Select preset"
+                            class="presets"
+                            :value="[]"
+                        />
                     </div>
                 </div>
                 <div class="footer">
                     <div style="flex-grow: 1"></div>
-					<button class="button modal-default-button" @click="$emit('closeDialog', 'Saves')">
+                    <button
+                        class="button modal-default-button"
+                        @click="$emit('closeDialog', 'Saves')"
+                    >
                         Close
                     </button>
                 </div>
@@ -30,22 +54,29 @@
     </Modal>
 </template>
 
-<script>
+<script lang="ts">
-import { newSave, getUniqueID, loadSave, save } from '../../util/save';
+import modInfo from "@/data/modInfo.json";
-import player from '../../game/player';
+import player from "@/game/player";
-import modInfo from '../../data/modInfo.json';
+import { PlayerData } from "@/typings/player";
+import { getUniqueID, loadSave, newSave, save } from "@/util/save";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'SavesManager',
+    name: "SavesManager",
     props: {
         show: Boolean
     },
-	emits: [ 'closeDialog' ],
+    emits: ["closeDialog"],
     data() {
-		let bankContext = require.context('raw-loader!../../../saves', true, /\.txt$/);
+        let bankContext = require.context("raw-loader!../../../saves", true, /\.txt$/);
-		let bank = bankContext.keys().reduce((acc, curr) => {
+        let bank = bankContext
+            .keys()
+            .reduce((acc: Array<{ label: string; value: string }>, curr) => {
                 // .slice(2, -4) strips the leading ./ and the trailing .txt
-			acc.push({ label: curr.slice(2, -4), value: bankContext(curr).default });
+                acc.push({
+                    label: curr.slice(2, -4),
+                    value: bankContext(curr).default
+                });
                 return acc;
             }, []);
         return {
@@ -53,6 +84,11 @@ export default {
             saves: {}, // Gets populated when the modal is opened
             saveToImport: "",
             bank
+        } as {
+            importingFailed: boolean;
+            saves: Record<string, Partial<PlayerData>>;
+            saveToImport: string;
+            bank: Array<{ label: string; value: string }>;
         };
     },
     watch: {
@@ -65,24 +101,34 @@ export default {
     methods: {
         loadSaveData() {
             try {
-				const { saves } = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
+                const { saves } = JSON.parse(
-				this.saves = saves.reduce((acc, curr) => {
+                    decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
+                );
+                this.saves = saves.reduce(
+                    (acc: Record<string, Partial<PlayerData>>, curr: string) => {
                         try {
-						acc[curr] = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(curr)))));
+                            acc[curr] = JSON.parse(
+                                decodeURIComponent(escape(atob(localStorage.getItem(curr)!)))
+                            );
                             acc[curr].id = curr;
-					} catch(error) {
+                        } catch (error) {
                             console.warn(`Can't load save with id "${curr}"`, error);
                             acc[curr] = { error, id: curr };
                         }
                         return acc;
-				}, {});
+                    },
-			} catch(e) {
+                    {}
-				this.saves = { [ player.id ]: player };
+                );
-				const modData = { active: player.id, saves: [ player.id ] };
+            } catch (e) {
-				localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
+                this.saves = { [player.id]: player };
+                const modData = { active: player.id, saves: [player.id] };
+                localStorage.setItem(
+                    modInfo.id,
+                    btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
+                );
             }
         },
-		exportSave(id) {
+        exportSave(id: string) {
             let saveToExport;
             if (player.id === id) {
                 save();
@@ -100,57 +146,86 @@ export default {
             document.execCommand("copy");
             document.body.removeChild(el);
         },
-		duplicateSave(id) {
+        duplicateSave(id: string) {
             if (player.id === id) {
                 save();
             }
 
             const playerData = { ...this.saves[id], id: getUniqueID() };
-			localStorage.setItem(playerData.id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData)))));
+            localStorage.setItem(
+                playerData.id,
+                btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
+            );
 
-			const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
+            const modData = JSON.parse(
+                decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
+            );
             modData.saves.push(playerData.id);
-			localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
+            localStorage.setItem(
+                modInfo.id,
+                btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
+            );
             this.saves[playerData.id] = playerData;
         },
-		deleteSave(id) {
+        deleteSave(id: string) {
-			const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
+            const modData = JSON.parse(
-			modData.saves = modData.saves.filter(save => save !== id);
+                decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
+            );
+            modData.saves = modData.saves.filter((save: string) => save !== id);
             localStorage.removeItem(id);
-			localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
+            localStorage.setItem(
+                modInfo.id,
+                btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
+            );
             delete this.saves[id];
         },
-		openSave(id) {
+        openSave(id: string) {
             this.saves[player.id].time = player.time;
             loadSave(this.saves[id]);
-			const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
+            const modData = JSON.parse(
+                decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
+            );
             modData.active = id;
-			localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
+            localStorage.setItem(
+                modInfo.id,
+                btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
+            );
         },
-		async newSave() {
+        newSave() {
-			const playerData = await newSave();
+            const playerData = newSave();
             this.saves[playerData.id] = playerData;
         },
-		newFromPreset(preset) {
+        newFromPreset(preset: string) {
             const playerData = JSON.parse(decodeURIComponent(escape(atob(preset))));
             playerData.id = getUniqueID();
-			localStorage.setItem(playerData.id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData)))));
+            localStorage.setItem(
+                playerData.id,
+                btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
+            );
 
-			const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
+            const modData = JSON.parse(
+                decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
+            );
             modData.saves.push(playerData.id);
-			localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
+            localStorage.setItem(
+                modInfo.id,
+                btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
+            );
             this.saves[playerData.id] = playerData;
         },
-		editSave(id, newName) {
+        editSave(id: string, newName: string) {
             this.saves[id].name = newName;
             if (player.id === id) {
                 player.name = newName;
                 save();
             } else {
-				localStorage.setItem(id, btoa(unescape(encodeURIComponent(JSON.stringify(this.saves[id])))));
+                localStorage.setItem(
+                    id,
+                    btoa(unescape(encodeURIComponent(JSON.stringify(this.saves[id]))))
+                );
             }
         },
-		importSave(text) {
+        importSave(text: string) {
             this.saveToImport = text;
             if (text) {
                 this.$nextTick(() => {
@@ -158,14 +233,22 @@ export default {
                         const playerData = JSON.parse(decodeURIComponent(escape(atob(text))));
                         const id = getUniqueID();
                         playerData.id = id;
-						localStorage.setItem(id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData)))));
+                        localStorage.setItem(
+                            id,
+                            btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
+                        );
                         this.saves[id] = playerData;
                         this.saveToImport = "";
                         this.importingFailed = false;
 
-						const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
+                        const modData = JSON.parse(
+                            decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
+                        );
                         modData.saves.push(id);
-						localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
+                        localStorage.setItem(
+                            modInfo.id,
+                            btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
+                        );
                     } catch (e) {
                         this.importingFailed = true;
                     }
@@ -174,15 +257,18 @@ export default {
                 this.importingFailed = false;
             }
         },
-		update(e) {
+        update(e: { newIndex: number; oldIndex: number }) {
-			this.saves.splice(e.newIndex, 0, this.saves.splive(e.oldIndex, 1)[0]);
+            const modData = JSON.parse(
-
+                decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
-			const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
+            );
             modData.saves.splice(e.newIndex, 0, modData.saves.splice(e.oldIndex, 1)[0]);
-			localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
+            localStorage.setItem(
+                modInfo.id,
+                btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
+            );
         }
     }
-};
+});
 </script>
 
 <style scoped>
@@ -220,11 +306,7 @@ export default {
     width: 220px;
 }
 
-.presets .vue-dropdown {
+.presets .vue-select[aria-expanded="true"] vue-dropdown {
-
-}
-
-.presets .vue-select[aria-expanded='true'] vue-dropdown {
     visibility: hidden;
 }
 </style>

src/components/system/Spacer.vue

@@ -2,20 +2,22 @@
     <div :style="{ width: spacingWidth, height: spacingHeight }"></div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-     name: 'spacer',
+
+export default defineComponent({
+    name: "spacer",
     props: {
         width: String,
         height: String
     },
     computed: {
-          spacingWidth() {
+        spacingWidth(): string {
-               return this.width || '8px';
+            return this.width || "8px";
         },
-          spacingHeight() {
+        spacingHeight(): string {
-               return this.height || '17px';
+            return this.height || "17px";
         }
     }
-};
+});
 </script>

src/components/system/Sticky.vue

@@ -4,44 +4,53 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-	name: 'sticky',
+
+export default defineComponent({
+    name: "sticky",
     data() {
         return {
-			top: 0,
+            top: "0",
             observer: null
+        } as {
+            top: string;
+            observer: ResizeObserver | null;
         };
     },
     mounted() {
+        this.setup();
+    },
+    methods: {
+        setup() {
             this.$nextTick(() => {
                 if (this.$refs.sticky == undefined) {
-				this.$nextTick(this.mounted);
+                    this.$nextTick(this.setup);
                 } else {
                     this.updateTop();
                     this.observer = new ResizeObserver(this.updateTop);
-				this.observer.observe(this.$refs.sticky.parentElement);
+                    this.observer.observe((this.$refs.sticky as HTMLElement).parentElement!);
                 }
             });
         },
-	methods: {
         updateTop() {
-			let el = this.$refs.sticky;
+            let el = this.$refs.sticky as HTMLElement;
             if (el == undefined) {
                 return;
             }
 
             let top = 0;
             while (el.previousSibling) {
-				if (el.previousSibling.dataset && 'vSticky' in el.previousSibling.dataset) {
+                const sibling = el.previousSibling as HTMLElement;
-					top += el.previousSibling.offsetHeight;
+                if (sibling.dataset && "vSticky" in sibling.dataset) {
+                    top += sibling.offsetHeight;
                 }
-				el = el.previousSibling;
+                el = sibling;
             }
             this.top = top + "px";
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/Subtab.vue

@@ -1,27 +0,0 @@
-<template>
-	<LayerProvider :layer="layer || tab.layer" :index="tab.index">
-		<component :is="display" />
-	</LayerProvider>
-</template>
-
-<script>
-import { layers } from '../../game/layers';
-import { coerceComponent } from '../../util/vue';
-
-export default {
-	name: 'subtab',
-	inject: [ 'tab' ],
-	props: {
-		layer: String,
-		id: String
-	},
-	computed: {
-		display() {
-			return coerceComponent(layers[this.layer || this.tab.layer].subtabs[this.id].display);
-		}
-	}
-};
-</script>
-
-<style scoped>
-</style>

src/components/system/TPS.vue

@@ -1,21 +1,25 @@
 <template>
-	<div class="tpsDisplay" v-if="tps !== 'NaN'">
+    <div class="tpsDisplay" v-if="tps !== 'NaN'">TPS: {{ tps }}</div>
-		TPS: {{ tps }}
-	</div>
 </template>
 
-<script>
+<script lang="ts">
-import Decimal, { formatWhole } from '../../util/bignum';
+import player from "@/game/player";
-import player from '../../game/player';
+import Decimal, { formatWhole } from "@/util/bignum";
+import { defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'TPS',
+    name: "TPS",
     computed: {
         tps() {
-			return formatWhole(Decimal.div(player.lastTenTicks.length, player.lastTenTicks.reduce((acc, curr) => acc + curr, 0)))
+            return formatWhole(
+                Decimal.div(
+                    player.lastTenTicks.length,
+                    player.lastTenTicks.reduce((acc, curr) => acc + curr, 0)
+                )
+            );
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/TabButton.vue

@@ -1,50 +1,70 @@
 <template>
-	<button @click="$emit('selectTab')" class="tabButton" :style="style"
+    <button
-		:class="{ notify: options.notify, resetNotify: options.resetNotify, floating, activeTab }">
+        @click="$emit('selectTab')"
+        class="tabButton"
+        :style="style"
+        :class="{
+            notify: options.notify,
+            resetNotify: options.resetNotify,
+            floating,
+            activeTab
+        }"
+    >
         {{ text }}
     </button>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import themes from "@/data/themes";
-import player from '../../game/player';
+import { layers } from "@/game/layers";
-import themes from '../../data/themes';
+import player from "@/game/player";
+import { Subtab } from "@/typings/features/subtab";
+import { InjectLayerMixin } from "@/util/vue";
+import { defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'tab-button',
+    name: "tab-button",
+    mixins: [InjectLayerMixin],
     props: {
-		layer: String,
         text: String,
-		options: Object,
+        options: {
+            type: Object as PropType<Subtab>,
+            required: true
+        },
         activeTab: Boolean
     },
-	emits: [ 'selectTab' ],
+    emits: ["selectTab"],
-	inject: [ 'tab' ],
     computed: {
-		floating() {
+        floating(): boolean {
             return themes[player.theme].floatingTabs;
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				(this.floating || this.activeTab) && { 'border-color': layers[this.layer || this.tab.layer].color },
+                this.floating || this.activeTab
-				layers[this.layer || this.tab.layer].componentStyles?.['tab-button'],
+                    ? {
-				this.options.resetNotify && this.options.glowColor &&
+                          borderColor: layers[this.layer].color
-					{
+                      }
-						boxShadow: this.floating ?
+                    : undefined,
-							`-2px -4px 4px rgba(0, 0, 0, 0) inset, 0 0 8px ${this.options.glowColor}` :
+                layers[this.layer].componentStyles?.["tab-button"],
-							`0px 10px 7px -10px ${this.options.glowColor}`
+                this.options.resetNotify && this.options.glowColor
-					},
+                    ? {
-				this.options.notify && this.options.glowColor &&
+                          boxShadow: this.floating
-					{
+                              ? `-2px -4px 4px rgba(0, 0, 0, 0) inset, 0 0 8px ${this.options.glowColor}`
-						boxShadow: this.floating ?
+                              : `0px 10px 7px -10px ${this.options.glowColor}`
-							`-2px -4px 4px rgba(0, 0, 0, 0) inset, 0 0 20px ${this.options.glowColor}` :
+                      }
-							`0px 15px 7px -10px ${this.options.glowColor}`
+                    : undefined,
-					},
+                this.options.notify && this.options.glowColor
+                    ? {
+                          boxShadow: this.floating
+                              ? `-2px -4px 4px rgba(0, 0, 0, 0) inset, 0 0 20px ${this.options.glowColor}`
+                              : `0px 15px 7px -10px ${this.options.glowColor}`
+                      }
+                    : undefined,
                 this.options.buttonStyle
             ];
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/Tabs.vue

@@ -3,11 +3,20 @@
         <div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
             <Nav v-if="index === 0 && !useHeader" />
             <div class="inner-tab">
-				<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]">
+                <LayerProvider
+                    :layer="tab"
+                    :index="index"
+                    v-if="tab in components && components[tab]"
+                >
                     <component :is="components[tab]" />
                 </LayerProvider>
-				<layer-tab :layer="tab" :index="index" v-else-if="tab in components" :minimizable="true"
+                <layer-tab
-					:tab="() => $refs[`tab-${index}`]" />
+                    :layer="tab"
+                    :index="index"
+                    v-else-if="tab in components"
+                    :minimizable="true"
+                    :tab="() => $refs[`tab-${index}`]"
+                />
                 <component :is="tab" :index="index" v-else />
             </div>
             <div class="separator" v-if="index !== tabs.length - 1"></div>
@@ -15,26 +24,32 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import modInfo from '../../data/modInfo.json';
+import modInfo from "@/data/modInfo.json";
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import { mapState } from '../../util/vue';
+import { coerceComponent, mapState } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'Tabs',
+    name: "Tabs",
     data() {
         return { useHeader: modInfo.useHeader };
     },
     computed: {
-		...mapState([ 'tabs' ]),
+        ...mapState(["tabs"]),
         components() {
-			return Object.keys(layers).reduce((acc, curr) => {
+            return Object.keys(layers).reduce(
-				acc[curr] = layers[curr].component || false;
+                (acc: Record<string, Component | string | false>, curr) => {
+                    acc[curr] =
+                        (layers[curr].component && coerceComponent(layers[curr].component!)) ||
+                        false;
                     return acc;
-			}, {});
+                },
+                {}
+            );
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/system/Tooltip.vue

@@ -1,20 +1,34 @@
 <template>
-	<div class="tooltip-container" :class="{ shown }" @mouseenter="setHover(true)" @mouseleave="setHover(false)">
+    <div
+        class="tooltip-container"
+        :class="{ shown }"
+        @mouseenter="setHover(true)"
+        @mouseleave="setHover(false)"
+    >
         <slot />
         <transition name="fade">
-			<div v-if="shown" class="tooltip" :class="{ top, left, right, bottom }"
+            <div
-				:style="{ '--xoffset': xoffset || '0px', '--yoffset': yoffset || '0px' }">
+                v-if="shown"
+                class="tooltip"
+                :class="{ top, left, right, bottom }"
+                :style="{
+                    '--xoffset': xoffset || '0px',
+                    '--yoffset': yoffset || '0px'
+                }"
+            >
                 <component :is="tooltipDisplay" />
             </div>
         </transition>
     </div>
 </template>
 
-<script>
+<script lang="ts">
-import { coerceComponent } from '../../util/vue';
+import { CoercableComponent } from "@/typings/component";
+import { coerceComponent } from "@/util/vue";
+import { Component, defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'tooltip',
+    name: "tooltip",
     data() {
         return {
             hover: false
@@ -22,7 +36,10 @@ export default {
     },
     props: {
         force: Boolean,
-		display: String,
+        display: {
+            type: [String, Object] as PropType<CoercableComponent>,
+            required: true
+        },
         top: Boolean,
         left: Boolean,
         right: Boolean,
@@ -31,10 +48,10 @@ export default {
         yoffset: String
     },
     computed: {
-		tooltipDisplay() {
+        tooltipDisplay(): Component | string {
             return coerceComponent(this.display);
         },
-		shown() {
+        shown(): boolean {
             return this.force || this.hover;
         }
     },
@@ -44,11 +61,11 @@ export default {
         }
     },
     methods: {
-		setHover(hover) {
+        setHover(hover: boolean) {
             this.hover = hover;
         }
     }
-};
+});
 </script>
 
 <style scoped>
@@ -58,7 +75,8 @@ export default {
     --yoffset: 0px;
 }
 
-.tooltip, .tooltip::after {
+.tooltip,
+.tooltip::after {
     pointer-events: none;
     position: absolute;
 }
@@ -83,7 +101,8 @@ export default {
     z-index: 10;
 }
 
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
     opacity: 0;
 }
 

src/components/system/VerticalRule.vue

@@ -2,13 +2,15 @@
     <div class="vr" :style="{ height }"></div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { defineComponent } from "vue";
-     name: 'vr',
+
+export default defineComponent({
+    name: "vr",
     props: {
         height: String
     }
-};
+});
 </script>
 
 <style scoped>

src/components/tree/BranchLine.vue

@@ -1,48 +1,66 @@
 <template>
-	<line :stroke="stroke" :stroke-width="strokeWidth" v-bind="typeof options === 'string' ? [] : options"
+    <line
-		:x1="startPosition.x" :y1="startPosition.y" :x2="endPosition.x" :y2="endPosition.y" />
+        :stroke="stroke"
+        :stroke-width="strokeWidth"
+        v-bind="typeof options === 'string' ? [] : options"
+        :x1="startPosition.x"
+        :y1="startPosition.y"
+        :x2="endPosition.x"
+        :y2="endPosition.y"
+    />
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { BranchNode, BranchOptions, Position } from "@/typings/branches";
-	name: 'branch-line',
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+    name: "branch-line",
     props: {
-		options: [ String, Object ],
+        options: {
-		startNode: Object,
+            type: [String, Object] as PropType<string | BranchOptions>,
-		endNode: Object
+            required: true
+        },
+        startNode: {
+            type: Object as PropType<BranchNode>,
+            required: true
+        },
+        endNode: {
+            type: Object as PropType<BranchNode>,
+            required: true
+        }
     },
     computed: {
-		stroke() {
+        stroke(): string {
-			if (typeof this.options === 'string' || !('stroke' in this.options)) {
+            if (typeof this.options === "string" || !("stroke" in this.options)) {
-				return 'white';
+                return "white";
             }
-			return this.options.stroke;
+            return this.options.stroke!;
         },
-		strokeWidth() {
+        strokeWidth(): string {
-			if (typeof this.options === 'string' || !('stroke-width' in this.options)) {
+            if (typeof this.options === "string" || !("stroke-width" in this.options)) {
-				return '15px';
+                return "15px";
             }
-			return this.options['stroke-width'];
+            return this.options["stroke-width"]!;
         },
-		startPosition() {
+        startPosition(): Position {
             const position = { x: this.startNode.x || 0, y: this.startNode.y || 0 };
-			if (typeof this.options !== 'string' && 'startOffset' in this.options) {
+            if (typeof this.options !== "string" && "startOffset" in this.options) {
-				position.x += this.options.startOffset.x || 0;
+                position.x += this.options.startOffset?.x || 0;
-				position.y += this.options.startOffset.y || 0;
+                position.y += this.options.startOffset?.y || 0;
             }
             return position;
         },
-		endPosition() {
+        endPosition(): Position {
             const position = { x: this.endNode.x || 0, y: this.endNode.y || 0 };
-			if (typeof this.options !== 'string' && 'endOffset' in this.options) {
+            if (typeof this.options !== "string" && "endOffset" in this.options) {
-				position.x += this.options.endOffset.x || 0;
+                position.x += this.options.endOffset?.x || 0;
-				position.y += this.options.endOffset.y || 0;
+                position.y += this.options.endOffset?.y || 0;
             }
             return position;
         }
     }
-};
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

src/components/tree/BranchNode.vue

@@ -2,66 +2,114 @@
     <div class="branch"></div>
 </template>
 
-<script>
+<script lang="ts">
-export default {
+import { BranchOptions } from "@/typings/branches";
-	name: 'branch-node',
+import { ComponentPublicInstance, defineComponent, PropType } from "vue";
+
+// Annoying work-around for injected functions not appearing on `this`
+// Also requires those annoying 3 lines in any function that uses this
+type BranchInjectedComponent<T extends ComponentPublicInstance> = {
+    registerNode?: (id: string, component: ComponentPublicInstance) => void;
+    unregisterNode?: (id: string) => void;
+    registerBranch?: (start: string, options: string | BranchOptions) => void;
+    unregisterBranch?: (start: string, options: string | BranchOptions) => void;
+} & T;
+
+export default defineComponent({
+    name: "branch-node",
     props: {
-		featureType: String,
+        featureType: {
-		id: [ Number, String ],
+            type: String,
-		branches: Array
+            required: true
         },
-	inject: [ 'registerNode', 'unregisterNode', 'registerBranch', 'unregisterBranch' ],
+        id: {
+            type: [Number, String],
+            required: true
+        },
+        branches: Array as PropType<Array<string | BranchOptions>>
+    },
+    inject: ["registerNode", "unregisterNode", "registerBranch", "unregisterBranch"],
     mounted() {
         const id = `${this.featureType}@${this.id}`;
-		if (this.registerNode) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
-			this.registerNode(id, this);
+        const _this = this;
+        const injectedThis = this as BranchInjectedComponent<typeof _this>;
+        if (injectedThis.registerNode) {
+            injectedThis.registerNode(id, this);
         }
-		if (this.registerBranch) {
+        if (injectedThis.registerBranch) {
-			this.branches?.map(this.handleBranch).forEach(branch => this.registerBranch(id, branch));
+            this.branches
+                ?.map(this.handleBranch)
+                .forEach(branch => injectedThis.registerBranch!(id, branch));
         }
     },
     beforeUnmount() {
         const id = `${this.featureType}@${this.id}`;
-		if (this.unregisterNode) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
-			this.unregisterNode(id);
+        const _this = this;
+        const injectedThis = this as BranchInjectedComponent<typeof _this>;
+        if (injectedThis.unregisterNode) {
+            injectedThis.unregisterNode(id);
         }
-		if (this.unregisterBranch) {
+        if (injectedThis.unregisterBranch) {
-			this.branches?.map(this.handleBranch).forEach(branch => this.unregisterBranch(id, branch));
+            this.branches
+                ?.map(this.handleBranch)
+                .forEach(branch => injectedThis.unregisterBranch!(id, branch));
         }
     },
     watch: {
         featureType(newValue, oldValue) {
-			if (this.registerNode && this.unregisterNode) {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
-				this.unregisterNode(`${oldValue}@${this.id}`);
+            const _this = this;
-				this.registerNode(`${newValue}@${this.id}`, this);
+            const injectedThis = this as BranchInjectedComponent<typeof _this>;
+            if (injectedThis.registerNode && injectedThis.unregisterNode) {
+                injectedThis.unregisterNode(`${oldValue}@${this.id}`);
+                injectedThis.registerNode(`${newValue}@${this.id}`, this);
             }
         },
         id(newValue, oldValue) {
-			if (this.registerNode && this.unregisterNode) {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
-				this.unregisterNode(`${this.featureType}@${oldValue}`);
+            const _this = this;
-				this.registerNode(`${this.featureType}@${newValue}`, this);
+            const injectedThis = this as BranchInjectedComponent<typeof _this>;
+            if (injectedThis.registerNode && injectedThis.unregisterNode) {
+                injectedThis.unregisterNode(`${this.featureType}@${oldValue}`);
+                injectedThis.registerNode(`${this.featureType}@${newValue}`, this);
             }
         },
         branches(newValue, oldValue) {
-			if (this.registerBranch && this.unregisterBranch) {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            const _this = this;
+            const injectedThis = this as BranchInjectedComponent<typeof _this>;
+            if (injectedThis.registerBranch && injectedThis.unregisterBranch) {
                 const id = `${this.featureType}@${this.id}`;
-				oldValue?.map(this.handleBranch).forEach(branch => this.unregisterBranch(id, branch));
+                oldValue
-				newValue?.map(this.handleBranch).forEach(branch => this.registerBranch(id, branch));
+                    ?.map(this.handleBranch)
+                    .forEach((branch: string | BranchOptions) =>
+                        injectedThis.unregisterBranch!(id, branch)
+                    );
+                newValue
+                    ?.map(this.handleBranch)
+                    .forEach((branch: string | BranchOptions) =>
+                        injectedThis.registerBranch!(id, branch)
+                    );
             }
         }
     },
     methods: {
-		handleBranch(branch) {
+        handleBranch(branch: string | BranchOptions) {
-			if (typeof branch === 'string') {
+            if (typeof branch === "string") {
-				return branch.includes('@') ? branch : `${this.featureType}@${branch}`;
+                return branch.includes("@") ? branch : `${this.featureType}@${branch}`;
             }
-			if (!branch.target?.includes('@')) {
+            if (!branch.target?.includes("@")) {
-				return { ...branch, target: `${branch.featureType || this.featureType}@${branch.target}` };
+                return {
+                    ...branch,
+                    target: `${branch.featureType || this.featureType}@${branch.target}`
+                };
             }
             return branch;
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/tree/Branches.vue

@@ -2,31 +2,44 @@
     <slot />
     <div ref="resizeListener" class="resize-listener" />
     <svg v-bind="$attrs">
-		<branch-line v-for="(branch, index) in branches" :key="index"
+        <branch-line
-			:startNode="nodes[branch.start]" :endNode="nodes[branch.end]" :options="branch.options" />
+            v-for="(branch, index) in branches"
+            :key="index"
+            :startNode="nodes[branch.start]"
+            :endNode="nodes[branch.end]"
+            :options="branch.options"
+        />
     </svg>
 </template>
 
-<script>
+<script lang="ts">
+import { BranchLink, BranchNode, BranchOptions } from "@/typings/branches";
+import { ComponentPublicInstance, defineComponent } from "vue";
+
 const observerOptions = {
     attributes: true,
     childList: true,
     subtree: true
 };
 
-export default {
+export default defineComponent({
-	name: 'branches',
+    name: "branches",
     data() {
         return {
-			observer: new MutationObserver(this.updateNodes),
+            observer: new MutationObserver(this.updateNodes as (...args: unknown[]) => void),
-			resizeObserver: new ResizeObserver(this.updateNodes),
+            resizeObserver: new ResizeObserver(this.updateNodes as (...args: unknown[]) => void),
             nodes: {},
             links: []
+        } as {
+            observer: MutationObserver;
+            resizeObserver: ResizeObserver;
+            nodes: Record<string, BranchNode>;
+            links: Array<BranchLink>;
         };
     },
     mounted() {
         // ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element
-		this.resizeObserver.observe(this.$refs.resizeListener);
+        this.resizeObserver.observe(this.$refs.resizeListener as HTMLElement);
         this.updateNodes();
     },
     provide() {
@@ -38,47 +51,57 @@ export default {
         };
     },
     computed: {
-		branches() {
+        branches(): Array<BranchLink> {
-			return this.links.filter(link => link.start in this.nodes && link.end in this.nodes &&
+            return this.links.filter(
-				this.nodes[link.start].x != undefined && this.nodes[link.start].y != undefined &&
+                link =>
-				this.nodes[link.end].x != undefined && this.nodes[link.end].y != undefined);
+                    link.start in this.nodes &&
+                    link.end in this.nodes &&
+                    this.nodes[link.start].x != undefined &&
+                    this.nodes[link.start].y != undefined &&
+                    this.nodes[link.end].x != undefined &&
+                    this.nodes[link.end].y != undefined
+            );
         }
     },
     methods: {
         updateNodes() {
             if (this.$refs.resizeListener != undefined) {
-				const containerRect = this.$refs.resizeListener.getBoundingClientRect();
+                const containerRect = (this.$refs
+                    .resizeListener as HTMLElement).getBoundingClientRect();
                 Object.keys(this.nodes).forEach(id => this.updateNode(id, containerRect));
             }
         },
-		updateNode(id, containerRect) {
+        updateNode(id: string, containerRect: DOMRect) {
             const linkStartRect = this.nodes[id].element.getBoundingClientRect();
             this.nodes[id].x = linkStartRect.x + linkStartRect.width / 2 - containerRect.x;
             this.nodes[id].y = linkStartRect.y + linkStartRect.height / 2 - containerRect.y;
         },
-		registerNode(id, component) {
+        registerNode(id: string, component: ComponentPublicInstance) {
             const element = component.$el.parentElement;
             this.nodes[id] = { component, element };
             this.observer.observe(element, observerOptions);
             this.$nextTick(() => {
                 if (this.$refs.resizeListener != undefined) {
-					this.updateNode(id, this.$refs.resizeListener.getBoundingClientRect());
+                    this.updateNode(
+                        id,
+                        (this.$refs.resizeListener as HTMLElement).getBoundingClientRect()
+                    );
                 }
             });
         },
-		unregisterNode(id) {
+        unregisterNode(id: string) {
             delete this.nodes[id];
         },
-		registerBranch(start, options) {
+        registerBranch(start: string, options: string | BranchOptions) {
-			const end = typeof options === 'string' ? options : options.target;
+            const end = typeof options === "string" ? options : options.target;
-			this.links.push({ start, end, options });
+            this.links.push({ start, end: end!, options });
         },
-		unregisterBranch(start, options) {
+        unregisterBranch(start: string, options: string | BranchOptions) {
             const index = this.links.findIndex(l => l.start === start && l.options === options);
             this.links.splice(index, 1);
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/tree/Tree.vue

@@ -1,62 +1,89 @@
 <template>
     <span class="row" v-for="(row, index) in rows" :key="index">
-		<tree-node v-for="(node, nodeIndex) in row" :key="nodeIndex" :id="node" @show-modal="openModal" :append="append" />
+        <tree-node
+            v-for="(node, nodeIndex) in row"
+            :key="nodeIndex"
+            :id="node"
+            @show-modal="openModal"
+            :append="append"
+        />
     </span>
     <span class="side-nodes" v-if="rows.side">
-		<tree-node v-for="(node, nodeIndex) in rows.side" :key="nodeIndex" :id="node" @show-modal="openModal" :append="append" small />
+        <tree-node
+            v-for="(node, nodeIndex) in rows.side"
+            :key="nodeIndex"
+            :id="node"
+            @show-modal="openModal"
+            :append="append"
+            small
+        />
     </span>
     <modal :show="showModal" @close="closeModal">
-		<template v-slot:header><h2 v-if="modalHeader">{{ modalHeader }}</h2></template>
+        <template v-slot:header
-		<template v-slot:body><layer-tab v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true" /></template>
+            ><h2 v-if="modalHeader">{{ modalHeader }}</h2></template
+        >
+        <template v-slot:body
+            ><layer-tab v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true"
+        /></template>
     </modal>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
+import { defineComponent, PropType } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'tree',
+    name: "tree",
     data() {
         return {
             showModal: false,
             modal: null
+        } as {
+            showModal: boolean;
+            modal: string | null;
         };
     },
     props: {
-		nodes: Array,
+        nodes: Object as PropType<Record<string, Array<string | number>>>,
         append: Boolean
     },
-	inject: [ 'tab' ],
+    inject: ["tab"],
     computed: {
-		modalHeader() {
+        modalHeader(): string | null {
             if (this.modal == null) {
                 return null;
             }
-			return layers[this.modal].name;
+            return layers[this.modal].name || this.modal;
         },
-		rows() {
+        rows(): Record<string | number, Array<string | number>> {
             if (this.nodes != undefined) {
                 return this.nodes;
             }
-			const rows = Object.keys(layers).reduce((acc, curr) => {
+            const rows = Object.keys(layers).reduce(
+                (acc: Record<string | number, Array<string | number>>, curr) => {
                     if (!(layers[curr].displayRow in acc)) {
                         acc[layers[curr].displayRow] = [];
                     }
                     if (layers[curr].position != undefined) {
-					acc[layers[curr].displayRow][layers[curr].position] = curr;
+                        acc[layers[curr].displayRow][layers[curr].position!] = curr;
                     } else {
                         acc[layers[curr].displayRow].push(curr);
                     }
                     return acc;
-			}, []);
+                },
-			return Object.keys(rows).reduce((acc, curr) => {
+                {}
+            );
+            return Object.keys(rows).reduce(
+                (acc: Record<string | number, Array<string | number>>, curr) => {
                     acc[curr] = rows[curr].filter(layer => layer);
                     return acc;
-			}, []);
+                },
+                {}
+            );
         }
     },
     methods: {
-		openModal(id) {
+        openModal(id: string) {
             this.showModal = true;
             this.modal = id;
         },
@@ -64,7 +91,7 @@ export default {
             this.showModal = false;
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/components/tree/TreeNode.vue

@@ -1,5 +1,8 @@
 <template>
-	<tooltip :display="tooltip" :force="forceTooltip" :class="{
+    <tooltip
+        :display="tooltip"
+        :force="forceTooltip"
+        :class="{
             ghost: layer.layerShown === 'ghost',
             treeNode: true,
             [id]: true,
@@ -9,7 +12,8 @@
             resetNotify: layer.resetNotify,
             can: unlocked,
             small
-		}">
+        }"
+    >
         <LayerProvider :index="tab.index" :layer="id">
             <button v-if="layer.shown" @click="clickTab" :style="style" :disabled="!unlocked">
                 <component :is="display" />
@@ -20,39 +24,48 @@
     </tooltip>
 </template>
 
-<script>
+<script lang="ts">
-import { layers } from '../../game/layers';
+import { layers } from "@/game/layers";
-import player from '../../game/player';
+import player from "@/game/player";
-import { coerceComponent } from '../../util/vue';
+import { CoercableComponent } from "@/typings/component";
+import { Layer } from "@/typings/layer";
+import { coerceComponent } from "@/util/vue";
+import { Component, defineComponent } from "vue";
 
-export default {
+export default defineComponent({
-	name: 'tree-node',
+    name: "tree-node",
     props: {
-		id: [ String, Number ],
+        id: {
+            type: [String, Number],
+            required: true
+        },
         small: Boolean,
         append: Boolean
     },
-	emits: [ 'show-modal' ],
+    emits: ["show-modal"],
-	inject: [ 'tab' ],
+    inject: ["tab"],
     computed: {
-		layer() {
+        layer(): Layer {
             return layers[this.id];
         },
-		unlocked() {
+        unlocked(): boolean {
             if (this.layer.canClick != undefined) {
                 return this.layer.canClick;
             }
             return this.layer.unlocked;
         },
-		style() {
+        style(): Array<Partial<CSSStyleDeclaration> | undefined> {
             return [
-				this.unlocked ? { backgroundColor: this.layer.color } : null,
+                this.unlocked ? { backgroundColor: this.layer.color } : undefined,
-				this.layer.notify && this.unlocked ?
+                this.layer.notify && this.unlocked
-					{ boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 20px ${this.layer.trueGlowColor}` } : null,
+                    ? {
+                          boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 20px ${this.layer.trueGlowColor}`
+                      }
+                    : undefined,
                 this.layer.nodeStyle
             ];
         },
-		display() {
+        display(): Component | string {
             if (this.layer.display != undefined) {
                 return coerceComponent(this.layer.display);
             } else if (this.layer.image != undefined) {
@@ -61,52 +74,57 @@ export default {
                 return coerceComponent(this.layer.symbol);
             }
         },
-		forceTooltip() {
+        forceTooltip(): boolean {
-			return player[this.id].forceTooltip;
+            return player.layers[this.id].forceTooltip === true;
         },
-		tooltip() {
+        tooltip(): CoercableComponent {
             if (this.layer.canClick != undefined) {
                 if (this.layer.canClick) {
-					return this.layer.tooltip || 'I am a button!';
+                    return this.layer.tooltip || "I am a button!";
                 } else {
-					return this.layer.tooltipLocked || this.layer.tooltip || 'I am a button!';
+                    return this.layer.tooltipLocked || this.layer.tooltip || "I am a button!";
                 }
             }
-			if (player[this.id].unlocked) {
+            if (player.layers[this.id].unlocked) {
-				return this.layer.tooltip || `{{ formatWhole(player.${this.id}.points) }} {{ layers.${this.id}.resource }}`;
+                return (
+                    this.layer.tooltip ||
+                    `{{ formatWhole(player.${this.id}.points) }} {{ layers.${this.id}.resource }}`
+                );
             } else {
-				return this.layer.tooltipLocked ||
+                return (
-					`Reach {{ formatWhole(layers.${this.id}.requires) }} {{ layers.${this.id}.baseResource }} to unlock (You have {{ formatWhole(layers.${this.id}.baseAmount) }} {{ layers.${this.id}.baseResource }})`;
+                    this.layer.tooltipLocked ||
+                    `Reach {{ formatWhole(layers.${this.id}.requires) }} {{ layers.${this.id}.baseResource }} to unlock (You have {{ formatWhole(layers.${this.id}.baseAmount) }} {{ layers.${this.id}.baseResource }})`
+                );
             }
-		},
-		components() {
-			return Object.keys(layers).reduce((acc, curr) => {
-				acc[curr] = layers[curr].component || false;
-				return acc;
-			}, {});
         }
     },
     methods: {
-		clickTab(e) {
+        clickTab(e: MouseEvent) {
             if (e.shiftKey) {
-				player[this.id].forceTooltip = !player[this.id].forceTooltip;
+                player.layers[this.id].forceTooltip = !player.layers[this.id].forceTooltip;
             } else if (this.layer.click != undefined) {
                 this.layer.click();
             } else if (this.layer.modal) {
-				this.$emit('show-modal', this.id);
+                this.$emit("show-modal", this.id);
             } else if (this.append) {
-				if (player.tabs.includes(this.id)) {
+                if (player.tabs.includes(this.id.toString())) {
-					const index = player.tabs.lastIndexOf(this.id);
+                    const index = player.tabs.lastIndexOf(this.id.toString());
                     player.tabs = [...player.tabs.slice(0, index), ...player.tabs.slice(index + 1)];
                 } else {
-					player.tabs = [...player.tabs, this.id];
+                    player.tabs = [...player.tabs, this.id.toString()];
                 }
             } else {
-				player.tabs = [...player.tabs.slice(0, this.tab.index + 1), this.id];
+                player.tabs = [
+                    ...player.tabs.slice(
+                        0,
+                        ((this as unknown) as { tab: { index: number } }).tab.index + 1
+                    ),
+                    this.id.toString()
+                ];
             }
         }
     }
-};
+});
 </script>
 
 <style scoped>

src/data/layers/aca/a.js

@@ -1,82 +0,0 @@
-import Decimal from '../../../util/bignum';
-import player from '../../../game/player';
-
-export default {
-    id: "a",
-    startData() { return {
-        unlocked: true,
-        points: new Decimal(0),
-    }},
-    color: "yellow",
-    modal: true,
-    name: "Achievements",
-    resource: "achievement power",
-    row: "side",
-    tooltip() { // Optional, tooltip displays when the layer is locked
-        return ("Achievements")
-    },
-    achievementPopups: true,
-    achievements: {
-        11: {
-            image: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
-            name: "Get me!",
-            done() {return true}, // This one is a freebie
-            goalTooltip: "How did this happen?", // Shows when achievement is not completed
-            doneTooltip: "You did it!", // Showed when the achievement is completed
-        },
-        12: {
-            name: "Impossible!",
-            done() {return false},
-            goalTooltip: "Mwahahaha!", // Shows when achievement is not completed
-            doneTooltip: "HOW????", // Showed when the achievement is completed
-            style: {'color': '#04e050'},
-        },
-        13: {
-            name: "EIEIO",
-            done() {return player.f.points.gte(1)},
-            tooltip: "Get a farm point.\n\nReward: The dinosaur is now your friend (you can max Farm Points).", // Showed when the achievement is completed
-            onComplete() {console.log("Bork bork bork!")}
-        },
-    },
-    midsection: "<grid id='test' />",
-    grids: {
-        test: {
-            maxRows: 3,
-            rows: 2,
-            cols: 2,
-            getStartData(cell) {
-                return cell
-            },
-            getUnlocked() { // Default
-                return true
-            },
-            getCanClick() {
-                return player.points.eq(10)
-            },
-            getStyle(cell, data) {
-                return {'background-color': '#'+ (data*1234%999999)}
-            },
-            click() { // Don't forget onHold
-                this.data++
-            },
-            getTitle(cell) {
-                let direction;
-                if (cell === '101') {
-                    direction = 'top';
-                } else if (cell === '102') {
-                    direction = 'bottom';
-                } else if (cell === '201') {
-                    direction = 'left';
-                } else if (cell === '202') {
-                    direction = 'right';
-                }
-                return `<tooltip display='${JSON.stringify(this.style)}' ${direction}>
-                    <h3>Gridable #${cell}</h3>
-                </tooltip>`
-            },
-            getDisplay(cell, data) {
-                return data
-            },
-        }
-    },
-}

src/data/layers/aca/a.ts

@@ -0,0 +1,103 @@
+/* eslint-disable */
+import player from "@/game/player";
+import { GridCell } from "@/typings/features/grid";
+import { RawLayer } from "@/typings/layer";
+import Decimal from "@/util/bignum";
+
+export default {
+  id: "a",
+  startData() {
+    return {
+      unlocked: true,
+      points: new Decimal(0)
+    };
+  },
+  color: "yellow",
+  modal: true,
+  name: "Achievements",
+  resource: "achievement power",
+  row: "side",
+  tooltip() {
+    // Optional, tooltip displays when the layer is locked
+    return "Achievements";
+  },
+  achievementPopups: true,
+  achievements: {
+    data: {
+      11: {
+        image: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
+        name: "Get me!",
+        done() {
+          return true;
+        }, // This one is a freebie
+        goalTooltip: "How did this happen?", // Shows when achievement is not completed
+        doneTooltip: "You did it!" // Showed when the achievement is completed
+      },
+      12: {
+        name: "Impossible!",
+        done() {
+          return false;
+        },
+        goalTooltip: "Mwahahaha!", // Shows when achievement is not completed
+        doneTooltip: "HOW????", // Showed when the achievement is completed
+        style: { color: "#04e050" }
+      },
+      13: {
+        name: "EIEIO",
+        done() {
+          return player.layers.f.points.gte(1);
+        },
+        tooltip:
+          "Get a farm point.\n\nReward: The dinosaur is now your friend (you can max Farm Points).", // Showed when the achievement is completed
+        onComplete() {
+          console.log("Bork bork bork!");
+        }
+      }
+    }
+  },
+  midsection: "<grid id='test' />",
+  grids: {
+    data: {
+      test: {
+        maxRows: 3,
+        rows: 2,
+        cols: 2,
+        getStartData(cell: string) {
+          return cell;
+        },
+        getUnlocked() {
+          // Default
+          return true;
+        },
+        getCanClick() {
+          return player.points.eq(10);
+        },
+        getStyle(cell) {
+          return { backgroundColor: "#" + ((Number((this[cell] as GridCell).data) * 1234) % 999999) };
+        },
+        click(cell) {
+          // Don't forget onHold
+          (this[cell] as GridCell).data = ((this[cell] as GridCell).data as number) + 1;
+        },
+        getTitle(cell) {
+          let direction;
+          if (cell === "101") {
+            direction = "top";
+          } else if (cell === "102") {
+            direction = "bottom";
+          } else if (cell === "201") {
+            direction = "left";
+          } else if (cell === "202") {
+            direction = "right";
+          }
+          return `<tooltip display='${JSON.stringify(this.style)}' ${direction}>
+                        <h3>Gridable #${cell}</h3>
+                    </tooltip>`;
+        },
+        getDisplay(cell) {
+          return (this[cell] as GridCell).data;
+        }
+      }
+    }
+  }
+} as RawLayer;

src/data/layers/aca/c.js

@@ -1,399 +0,0 @@
-import Decimal, { format, formatWhole } from '../../../util/bignum';
-import player from '../../../game/player';
-import { layers } from '../../../game/layers';
-import { hasUpgrade, hasMilestone, getBuyableAmount, setBuyableAmount, upgradeEffect, buyableEffect, challengeCompletions } from '../../../util/features';
-import { resetLayer, resetLayerData } from '../../../util/layers';
-import { UP, RIGHT } from '../../../util/vue';
-
-const tmp = layers;
-
-export default {
-	id: "c", // This is assigned automatically, both to the layer and all upgrades, etc. Shown here so you know about it
-	name: "Candies", // This is optional, only used in a few places, If absent it just uses the layer id.
-	symbol: "C", // This appears on the layer's node. Default is the id with the first letter capitalized
-	position: 0, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
-	startData() { return {
-		unlocked: true,
-		points: new Decimal(0),
-		best: new Decimal(0),
-		total: new Decimal(0),
-		beep: false,
-		thingy: "pointy",
-		otherThingy: 10,
-		spentOnBuyables: new Decimal(0)
-	}},
-	minWidth: 800,
-	color: "#4BDC13",
-	requires: new Decimal(10), // Can be a function that takes requirement increases into account
-	resource: "lollipops", // Name of prestige currency
-	baseResource: "points", // Name of resource prestige is based on
-	baseAmount() {return player.points}, // Get the current amount of baseResource
-	type: "normal", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
-	exponent: 0.5, // Prestige currency exponent
-	base: 5, // Only needed for static layers, base of the formula (b^(x^exp))
-	roundUpCost: false, // True if the cost needs to be rounded up (use when baseResource is static?)
-
-	// For normal layers, gain beyond [softcap] points is put to the [softcapPower]th power
-	softcap: new Decimal(1e100),
-	softcapPower: new Decimal(0.5),
-	canBuyMax() {}, // Only needed for static layers with buy max
-	gainMult() { // Calculate the multiplier for main currency from bonuses
-		let mult = new Decimal(1)
-		if (hasUpgrade(this.layer, 166)) mult = mult.times(2) // These upgrades don't exist
-		if (hasUpgrade(this.layer, 120)) mult = mult.times(upgradeEffect(this.layer, 120))
-		return mult
-	},
-	gainExp() { // Calculate the exponent on main currency from bonuses
-		return new Decimal(1)
-	},
-	row: 0, // Row the layer is in on the tree (0 is the first row)
-	effect() {
-		return { // Formulas for any boosts inherent to resources in the layer. Can return a single value instead of an object if there is just one effect
-		waffleBoost: Decimal.pow(player[this.layer].points, 0.2),
-		icecreamCap: (player[this.layer].points * 10)
-	}},
-	effectDisplay() { // Optional text to describe the effects
-		let eff = this.effect;
-		const waffleBoost = eff.waffleBoost.times(buyableEffect(this.layer, 11).first)
-		return "which are boosting waffles by "+format(waffleBoost)+" and increasing the Ice Cream cap by "+format(eff.icecreamCap)
-	},
-	infoboxes:{
-		coolInfo: {
-			title: "Lore",
-			titleStyle: {'color': '#FE0000'},
-			body: "DEEP LORE!",
-			bodyStyle: {'background-color': "#0000EE"}
-		}
-	},
-	milestones: {
-		0: {requirementDisplay: "3 Lollipops",
-			done() {return player[this.layer].best.gte(3)}, // Used to determine when to give the milestone
-			effectDisplay: "Unlock the next milestone",
-		},
-		1: {requirementDisplay: "4 Lollipops",
-			unlocked() {return hasMilestone(this.layer, 0)},
-			done() {return player[this.layer].best.gte(4)},
-			effectDisplay: "You can toggle beep and boop (which do nothing)",
-			optionsDisplay: `
-				<div style="display: flex; justify-content: center">
-					<Toggle :value="player.c.beep" @change="value => player.c.beep = value" />
-					<Toggle :value="player.f.boop" @change="value => player.f.boop = value" />
-				</div>
-			`,
-			style() {
-				if(hasMilestone(this.layer, this.id)) return {
-					'background-color': '#1111DD'
-			}},
-
-			},
-	},
-	challenges: {
-
-		11: {
-			name: "Fun",
-			completionLimit: 3,
-			challengeDescription() {return "Makes the game 0% harder<br>"+challengeCompletions(this.layer, this.id) + "/" + this.completionLimit + " completions"},
-			unlocked() { return player[this.layer].best.gt(0) },
-			goalDescription: 'Have 20 points I guess',
-			canComplete() {
-				return player.points.gte(20)
-			},
-			rewardEffect() {
-				let ret = player[this.layer].points.add(1).tetrate(0.02)
-				return ret;
-			},
-			rewardDisplay() { return format(this.rewardEffect)+"x" },
-			countsAs: [12, 21], // Use this for if a challenge includes the effects of other challenges. Being in this challenge "counts as" being in these.
-			rewardDescription: "Says hi",
-			onComplete() {console.log("hiii")}, // Called when you successfully complete the challenge
-			onEnter() {console.log("So challenging")},
-			onExit() {console.log("Sweet freedom!")},
-
-		},
-	},
-	upgrades: {
-
-		11: {
-			title: "Generator of Genericness",
-			description: "Gain 1 Point every second.",
-			cost: new Decimal(1),
-			unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
-		},
-		12: {
-			description: "Point generation is faster based on your unspent Lollipops.",
-			cost: new Decimal(1),
-			unlocked() { return (hasUpgrade(this.layer, 11))},
-			effect() { // Calculate bonuses from the upgrade. Can return a single value or an object with multiple values
-				let ret = player[this.layer].points.add(1).pow(player[this.layer].upgrades.includes(24)?1.1:(player[this.layer].upgrades.includes(14)?0.75:0.5))
-				if (ret.gte("1e20000000")) ret = ret.sqrt().times("1e10000000")
-				return ret;
-			},
-			effectDisplay() { return format(this.effect)+"x" }, // Add formatting to the effect
-		},
-		13: {
-			unlocked() { return (hasUpgrade(this.layer, 12))},
-			onPurchase() { // This function triggers when the upgrade is purchased
-				player[this.layer].unlockOrder = 0
-			},
-			style() {
-				if (hasUpgrade(this.layer, this.id)) return {
-				'background-color': '#1111dd'
-				}
-				else if (!this.canAfford) {
-					return {
-						'background-color': '#dd1111'
-					}
-				} // Otherwise use the default
-			},
-			canAfford(){return player.points.lte(7)},
-			pay(){player.points = player.points.add(7)},
-			fullDisplay: "Only buyable with less than 7 points, and gives you 7 more. Unlocks a secret subtab."
-		},
-		22: {
-			title: "This upgrade doesn't exist",
-			description: "Or does it?.",
-			currencyLocation() {return player[this.layer].buyables}, // The object in player data that the currency is contained in
-			currencyDisplayName: "exhancers", // Use if using a nonstandard currency
-			currencyInternalName: 11, // Use if using a nonstandard currency
-
-			cost: new Decimal(3),
-			unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
-		},
-	},
-	buyables: {
-		showRespec: true,
-		respec() { // Optional, reset things and give back your currency. Having this function makes a respec button appear
-			player[this.layer].points = player[this.layer].points.add(player[this.layer].spentOnBuyables) // A built-in thing to keep track of this but only keeps a single value
-			this.reset();
-			resetLayer(this.layer, true) // Force a reset
-		},
-		respecText: "Respec Thingies", // Text on Respec button, optional
-		respecMessage: "Are you sure? Respeccing these doesn't accomplish much.",
-		11: {
-			title: "Exhancers", // Optional, displayed at the top in a larger font
-			cost() { // cost for buying xth buyable, can be an object if there are multiple currencies
-				let x = this.amount;
-				if (x.gte(25)) x = x.pow(2).div(25)
-				let cost = Decimal.pow(2, x.pow(1.5))
-				return cost.floor()
-			},
-			effect() { // Effects of owning x of the items, x is a decimal
-				let x = this.amount;
-				let eff = {}
-				if (x.gte(0)) eff.first = Decimal.pow(25, x.pow(1.1))
-				else eff.first = Decimal.pow(1/25, x.times(-1).pow(1.1))
-
-				if (x.gte(0)) eff.second = x.pow(0.8)
-				else eff.second = x.times(-1).pow(0.8).times(-1)
-				return eff;
-			},
-			display() { // Everything else displayed in the buyable button after the title
-				let data = tmp[this.layer].buyables[this.id]
-				return "Cost: " + format(data.cost) + " lollipops\n\
-				Amount: " + player[this.layer].buyables[this.id] + "/4\n\
-				Adds + " + format(data.effect.first) + " things and multiplies stuff by " + format(data.effect.second)
-			},
-			unlocked() { return player[this.layer].unlocked },
-			canAfford() {
-				return player[this.layer].points.gte(tmp[this.layer].buyables[this.id].cost)},
-			buy() {
-				let cost = tmp[this.layer].buyables[this.id].cost
-				player[this.layer].points = player[this.layer].points.sub(cost)
-				player[this.layer].buyables[this.id] = player[this.layer].buyables[this.id].add(1)
-				player[this.layer].spentOnBuyables = player[this.layer].spentOnBuyables.add(cost) // This is a built-in system that you can use for respeccing but it only works with a single Decimal value
-			},
-			buyMax() {}, // You'll have to handle this yourself if you want
-			style: {'height':'222px'},
-			purchaseLimit: new Decimal(4),
-			sellOne() {
-				let amount = getBuyableAmount(this.layer, this.id)
-				if (amount.lte(0)) return // Only sell one if there is at least one
-				setBuyableAmount(this.layer, this.id, amount.sub(1))
-				player[this.layer].points = player[this.layer].points.add(this.cost)
-			},
-		},
-	},
-	doReset(resettingLayer){ // Triggers when this layer is being reset, along with the layer doing the resetting. Not triggered by lower layers resetting, but is by layers on the same row.
-		if(layers[resettingLayer].row > this.row) resetLayerData(this.layer, ["points"]) // This is actually the default behavior
-	},
-	automate() {
-	}, // Do any automation inherent to this layer if appropriate
-	resetsNothing() {return false},
-	onPrestige() {
-		return
-	}, // Useful for if you gain secondary resources or have other interesting things happen to this layer when you reset it. You gain the currency after this function ends.
-
-	hotkeys: [
-		{key: "c", description: "reset for lollipops or whatever", press(){if (layers[this.layer].canReset) resetLayer(this.layer)}},
-		{key: "ctrl+c", description: "respec things", press(){layers[this.layer].buyables.respec()}, unlocked() {return hasUpgrade('c', '22')}}  ,
-	],
-	increaseUnlockOrder: [], // Array of layer names to have their order increased when this one is first unlocked
-
-	microtabs: {
-		stuff: {
-			first: {
-				display: `
-					<upgrades />
-					<div>confirmed</div>`
-			},
-			second: {
-				embedLayer: "f"
-			},
-		},
-		otherStuff: {
-			// There could be another set of microtabs here
-		}
-	},
-
-	bars: {
-		longBoi: {
-			fillStyle: {'background-color' : "#FFFFFF"},
-			baseStyle: {'background-color' : "#696969"},
-			textStyle: {'color': '#04e050'},
-
-			borderStyle() {return {}},
-			direction: RIGHT,
-			width: 300,
-			height: 30,
-			progress() {
-				return (player.points.add(1).log(10).div(10)).toNumber()
-			},
-			display() {
-				return format(player.points) + " / 1e10 points"
-			},
-			unlocked: true,
-
-		},
-		tallBoi: {
-			fillStyle: {'background-color' : "#4BEC13"},
-			baseStyle: {'background-color' : "#000000"},
-			textStyle: {'text-shadow': '0px 0px 2px #000000'},
-
-			borderStyle() {return {'border-width': "7px"}},
-			direction: UP,
-			width: 50,
-			height: 200,
-			progress() {
-				return player.points.div(100)
-			},
-			display() {
-				return formatWhole((player.points.div(1)).min(100)) + "%"
-			},
-			unlocked: true,
-
-		},
-		flatBoi: {
-			fillStyle: {'background-color' : "#FE0102"},
-			baseStyle: {'background-color' : "#222222"},
-			textStyle: {'text-shadow': '0px 0px 2px #000000'},
-
-			borderStyle() {return {}},
-			direction: UP,
-			width: 100,
-			height: 30,
-			progress() {
-				return player.c.points.div(50)
-			},
-			unlocked: true,
-
-		},
-	},
-
-	// Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
-	subtabs: {
-		"main tab": {
-			buttonStyle() {return  {'color': 'orange'}},
-			notify: true,
-			display: `
-				<main-display />
-				<sticky><prestige-button /></sticky>
-				<resource-display />
-				<spacer height="5px" />
-				<button onclick='console.log("yeet")'>'HI'</button>
-				<div>Name your points!</div>
-				<TextField :value="player.c.thingy" @input="value => player.c.thingy = value" :field="false" />
-				<sticky style="color: red; font-size: 32px; font-family: Comic Sans MS;">I have {{ format(player.points) }} {{ player.c.thingy }} points!</sticky>
-				<hr />
-				<milestones />
-				<spacer />
-				<upgrades />
-				<challenges />`,
-			glowColor: "blue",
-
-		},
-		thingies: {
-			resetNotify: true,
-			style() {return  {'background-color': '#222222', '--background': '#222222'}},
-			buttonStyle() {return {'border-color': 'orange'}},
-			display: `
-				<buyables />
-				<spacer />
-				<row style="width: 600px; height: 350px; background-color: green; border-style: solid;">
-					<Toggle :value="player.c.beep" @change="value => player.c.beep = value" />
-					<spacer width="30px" height="10px" />
-					<div>Beep</div>
-					<spacer />
-					<vr height="200px"/>
-					<column>
-						<prestige-button style="width: 150px; height: 80px" />
-						<prestige-button style="width: 100px; height: 150px" />
-					</column>
-				</row>
-				<spacer />
-				<img src="https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png" />`
-		},
-		jail: {
-			display: `
-				<infobox id="coolInfo" />
-				<bar id="longBoi" />
-				<spacer />
-				<row>
-					<column style="background-color: #555555; padding: 15px">
-						<div style="color: teal">Sugar level:</div><spacer /><bar id="tallBoi" />
-					</column>
-					<spacer />
-					<column>
-						<div>idk</div>
-						<spacer width="0" height="50px" />
-						<bar id="flatBoi" />
-					</column>
-				</row>
-				<spacer />
-				<div>It's jail because "bars"! So funny! Ha ha!</div>
-				<tree :nodes="[['f', 'c'], ['g', 'spook', 'h']]" />`
-		},
-		illuminati: {
-			unlocked() {return (hasUpgrade("c", 13))},
-			display: `
-				<h1> C O N F I R M E D </h1>
-				<spacer />
-				<microtab family="stuff" style="width: 660px; height: 370px; background-color: brown; --background: brown; border: solid white; margin: auto" />
-				<div>Adjust how many points H gives you!</div>
-				<Slider :value="player.c.otherThingy" @change="value => player.c.otherThingy = value" :min="1" :max="30" />`
-		}
-
-	},
-	style() {return {
-		//'background-color': '#3325CC'
-	}},
-	nodeStyle() {return { // Style on the layer node
-		'color': '#3325CC',
-		'text-decoration': 'underline'
-	}},
-	glowColor: "orange", // If the node is highlighted, it will be this color (default is red)
-	componentStyles: {
-		"challenge"() {return {'height': '200px'}},
-		"prestige-button"() {return {'color': '#AA66AA'}},
-	},
-	tooltip() { // Optional, tooltip displays when the layer is unlocked
-		let tooltip = "{{ formatWhole(player.c.points) }} {{ layers.c.resource }}";
-		if (player[this.layer].buyables[11].gt(0)) tooltip += "<br><i><br><br><br>{{ formatWhole(player.c.buyables[11]) }} Exhancers</i>"
-		return tooltip
-	},
-	shouldNotify() { // Optional, layer will be highlighted on the tree if true.
-					// Layer will automatically highlight if an upgrade is purchasable.
-		return (player.c.buyables[11] == 1)
-	},
-	mark: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
-	resetDescription: "Melt your points into ",
-};

src/data/layers/aca/c.ts

@@ -0,0 +1,573 @@
+/* eslint-disable */
+import { Direction } from "@/game/enums";
+import { layers } from "@/game/layers";
+import player from "@/game/player";
+import { DecimalSource } from "@/lib/break_eternity";
+import { RawLayer } from "@/typings/layer";
+import Decimal, { format, formatWhole } from "@/util/bignum";
+import {
+  buyableEffect,
+  challengeCompletions,
+  getBuyableAmount,
+  hasMilestone,
+  hasUpgrade,
+  setBuyableAmount,
+  upgradeEffect
+} from "@/util/features";
+import { resetLayer, resetLayerData } from "@/util/layers";
+
+export default {
+  id: "c", // This is assigned automatically, both to the layer and all upgrades, etc. Shown here so you know about it
+  name: "Candies", // This is optional, only used in a few places, If absent it just uses the layer id.
+  symbol: "C", // This appears on the layer's node. Default is the id with the first letter capitalized
+  position: 0, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
+  startData() {
+    return {
+      unlocked: true,
+      points: new Decimal(0),
+      best: new Decimal(0),
+      total: new Decimal(0),
+      beep: false,
+      thingy: "pointy",
+      otherThingy: 10,
+      spentOnBuyables: new Decimal(0)
+    };
+  },
+  minWidth: 800,
+  color: "#4BDC13",
+  requires: new Decimal(10), // Can be a function that takes requirement increases into account
+  resource: "lollipops", // Name of prestige currency
+  baseResource: "points", // Name of resource prestige is based on
+  baseAmount() {
+    return player.points;
+  }, // Get the current amount of baseResource
+  type: "normal", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
+  exponent: 0.5, // Prestige currency exponent
+  base: 5, // Only needed for static layers, base of the formula (b^(x^exp))
+  roundUpCost: false, // True if the cost needs to be rounded up (use when baseResource is static?)
+
+  // For normal layers, gain beyond [softcap] points is put to the [softcapPower]th power
+  softcap: new Decimal(1e100),
+  softcapPower: new Decimal(0.5),
+  canBuyMax() {}, // Only needed for static layers with buy max
+  gainMult() {
+    // Calculate the multiplier for main currency from bonuses
+    let mult = new Decimal(1);
+    /*
+    if (hasUpgrade(this.layer, 166)) mult = mult.times(2); // These upgrades don't exist
+    if (hasUpgrade(this.layer, 120))
+      mult = mult.times(upgradeEffect(this.layer, 120) as DecimalSource);
+    */
+    return mult;
+  },
+  gainExp() {
+    // Calculate the exponent on main currency from bonuses
+    return new Decimal(1);
+  },
+  row: 0, // Row the layer is in on the tree (0 is the first row)
+  effect() {
+    return {
+      // Formulas for any boosts inherent to resources in the layer. Can return a single value instead of an object if there is just one effect
+      waffleBoost: Decimal.pow(player.layers[this.layer].points, 0.2),
+      icecreamCap: player.layers[this.layer].points.times(10)
+    };
+  },
+  effectDisplay() {
+    // Optional text to describe the effects
+    const eff = this.effect as { waffleBoost: Decimal; icecreamCap: Decimal };
+    const waffleBoost = eff.waffleBoost.times(
+      (buyableEffect(this.layer, 11) as { first: Decimal, second: Decimal }).first
+    );
+    return (
+      "which are boosting waffles by " +
+      format(waffleBoost) +
+      " and increasing the Ice Cream cap by " +
+      format(eff.icecreamCap)
+    );
+  },
+  infoboxes: {
+    data: {
+      coolInfo: {
+        title: "Lore",
+        titleStyle: { color: "#FE0000" },
+        body: "DEEP LORE!",
+        bodyStyle: { "background-color": "#0000EE" }
+      }
+    }
+  },
+  milestones: {
+    data: {
+      0: {
+        requirementDisplay: "3 Lollipops",
+        done() {
+          return (player.layers[this.layer].best as Decimal).gte(3);
+        }, // Used to determine when to give the milestone
+        effectDisplay: "Unlock the next milestone"
+      },
+      1: {
+        requirementDisplay: "4 Lollipops",
+        unlocked() {
+          return hasMilestone(this.layer, 0);
+        },
+        done() {
+          return (player.layers[this.layer].best as Decimal).gte(4);
+        },
+        effectDisplay: "You can toggle beep and boop (which do nothing)",
+        optionsDisplay: `
+					<div style="display: flex; justify-content: center">
+						<Toggle :value="player.layers.c.beep" @change="value => player.layers.c.beep = value" />
+						<Toggle :value="player.layers.f.boop" @change="value => player.layers.f.boop = value" />
+					</div>
+				`,
+        style() {
+          if (hasMilestone(this.layer, this.id))
+            return {
+              backgroundColor: "#1111DD"
+            };
+        }
+      }
+    }
+  },
+  challenges: {
+    data: {
+      11: {
+        name: "Fun",
+        completionLimit: 3,
+        challengeDescription() {
+          return (
+            "Makes the game 0% harder<br>" +
+            challengeCompletions(this.layer, this.id) +
+            "/" +
+            this.completionLimit +
+            " completions"
+          );
+        },
+        unlocked() {
+          return (player.layers[this.layer].best as Decimal).gt(0);
+        },
+        goalDescription: "Have 20 points I guess",
+        canComplete() {
+          return player.points.gte(20);
+        },
+        effect() {
+          const ret = player.layers[this.layer].points.add(1).tetrate(0.02);
+          return ret;
+        },
+        rewardDisplay() {
+          return format(this.effect as Decimal) + "x";
+        },
+        countsAs: [12, 21], // Use this for if a challenge includes the effects of other challenges. Being in this challenge "counts as" being in these.
+        rewardDescription: "Says hi",
+        onComplete() {
+          console.log("hiii");
+        }, // Called when you successfully complete the challenge
+        onEnter() {
+          console.log("So challenging");
+        },
+        onExit() {
+          console.log("Sweet freedom!");
+        }
+      }
+    }
+  },
+  upgrades: {
+    data: {
+      11: {
+        title: "Generator of Genericness",
+        description: "Gain 1 Point every second.",
+        cost: new Decimal(1),
+        unlocked() {
+          return player.layers[this.layer].unlocked;
+        } // The upgrade is only visible when this is true
+      },
+      12: {
+        description:
+          "Point generation is faster based on your unspent Lollipops.",
+        cost: new Decimal(1),
+        unlocked() {
+          return hasUpgrade(this.layer, 11);
+        },
+        effect() {
+          // Calculate bonuses from the upgrade. Can return a single value or an object with multiple values
+          let ret = player.layers[this.layer].points
+            .add(1)
+            .pow(
+              player.layers[this.layer].upgrades!.includes(24)
+                ? 1.1
+                : player.layers[this.layer].upgrades!.includes(14)
+                ? 0.75
+                : 0.5
+            );
+          if (ret.gte("1e20000000")) ret = ret.sqrt().times("1e10000000");
+          return ret;
+        },
+        effectDisplay() {
+          return format(this.effect as Decimal) + "x";
+        } // Add formatting to the effect
+      },
+      13: {
+        unlocked() {
+          return hasUpgrade(this.layer, 12);
+        },
+        onPurchase() {
+          // This function triggers when the upgrade is purchased
+          player.layers[this.layer].unlockOrder = 0;
+        },
+        style() {
+          if (hasUpgrade(this.layer, this.id))
+            return {
+              "background-color": "#1111dd"
+            };
+          else if (!this.canAfford) {
+            return {
+              "background-color": "#dd1111"
+            };
+          } // Otherwise use the default
+        },
+        canAfford() {
+          return player.points.lte(7);
+        },
+        pay() {
+          player.points = player.points.add(7);
+        },
+        fullDisplay:
+          "Only buyable with less than 7 points, and gives you 7 more. Unlocks a secret subtab."
+      },
+      22: {
+        title: "This upgrade doesn't exist",
+        description: "Or does it?.",
+        currencyLocation() {
+          return player.layers[this.layer].buyables;
+        }, // The object in player data that the currency is contained in
+        currencyDisplayName: "exhancers", // Use if using a nonstandard currency
+        currencyInternalName: 11, // Use if using a nonstandard currency
+
+        cost: new Decimal(3),
+        unlocked() {
+          return player.layers[this.layer].unlocked;
+        } // The upgrade is only visible when this is true
+      }
+    }
+  },
+  buyables: {
+    showBRespecButton: true,
+    respec() {
+      // Optional, reset things and give back your currency. Having this function makes a respec button appear
+      player.layers[this.layer].points = player.layers[this.layer].points.add(
+        player.layers[this.layer].spentOnBuyables as Decimal
+      ); // A built-in thing to keep track of this but only keeps a single value
+      this.reset();
+      resetLayer(this.layer, true); // Force a reset
+    },
+    respecButtonDisplay: "Respec Thingies", // Text on Respec button, optional
+    respecWarningDisplay:
+      "Are you sure? Respeccing these doesn't accomplish much.",
+    data: {
+      11: {
+        title: "Exhancers", // Optional, displayed at the top in a larger font
+        cost() {
+          // cost for buying xth buyable, can be an object if there are multiple currencies
+          let x = this.amount;
+          if (x.gte(25)) x = x.pow(2).div(25);
+          const cost = Decimal.pow(2, x.pow(1.5));
+          return cost.floor();
+        },
+        effect() {
+          // Effects of owning x of the items, x is a decimal
+          const x = this.amount;
+          const eff = {} as { first?: Decimal; second?: Decimal };
+          if (x.gte(0)) eff.first = Decimal.pow(25, x.pow(1.1));
+          else eff.first = Decimal.pow(1 / 25, x.times(-1).pow(1.1));
+
+          if (x.gte(0)) eff.second = x.pow(0.8);
+          else
+            eff.second = x
+              .times(-1)
+              .pow(0.8)
+              .times(-1);
+          return eff;
+        },
+        display() {
+          // Everything else displayed in the buyable button after the title
+          return (
+            "Cost: " +
+            format(this.cost!) +
+            " lollipops\n\
+					Amount: " +
+            player.layers[this.layer].buyables![this.id] +
+            "/4\n\
+					Adds + " +
+            format((this.effect as { first: Decimal; second: Decimal }).first) +
+            " things and multiplies stuff by " +
+            format((this.effect as { first: Decimal; second: Decimal }).second)
+          );
+        },
+        unlocked() {
+          return player.layers[this.layer].unlocked;
+        },
+        canAfford() {
+          return player.layers[this.layer].points.gte(this.cost!);
+        },
+        buy() {
+          const cost = this.cost!;
+          player.layers[this.layer].points = player.layers[
+            this.layer
+          ].points.sub(cost);
+          player.layers[this.layer].buyables![this.id] = player.layers[
+            this.layer
+          ].buyables![this.id].add(1);
+          player.layers[this.layer].spentOnBuyables = (player.layers[
+            this.layer
+          ].spentOnBuyables as Decimal).add(cost); // This is a built-in system that you can use for respeccing but it only works with a single Decimal value
+        },
+        buyMax() {}, // You'll have to handle this yourself if you want
+        style: { height: "222px" },
+        purchaseLimit: new Decimal(4),
+        sellOne() {
+          const amount = getBuyableAmount(this.layer, this.id)!;
+          if (amount.lte(0)) return; // Only sell one if there is at least one
+          setBuyableAmount(this.layer, this.id, amount.sub(1));
+          player.layers[this.layer].points = player.layers[
+            this.layer
+          ].points.add(this.cost!);
+        }
+      }
+    }
+  },
+  onReset(resettingLayer: string) {
+    // Triggers when this layer is being reset, along with the layer doing the resetting. Not triggered by lower layers resetting, but is by layers on the same row.
+    if (
+      layers[resettingLayer].row != undefined &&
+      this.row != undefined &&
+      layers[resettingLayer].row! > this.row!
+    )
+      resetLayerData(this.layer, ["points"]); // This is actually the default behavior
+  },
+  automate() {}, // Do any automation inherent to this layer if appropriate
+  resetsNothing() {
+    return false;
+  },
+  onPrestige() {
+    return;
+  }, // Useful for if you gain secondary resources or have other interesting things happen to this layer when you reset it. You gain the currency after this function ends.
+
+  hotkeys: [
+    {
+      key: "c",
+      description: "reset for lollipops or whatever",
+      press() {
+        if (layers[this.layer].canReset) resetLayer(this.layer);
+      }
+    },
+    {
+      key: "ctrl+c",
+      description: "respec things",
+      press() {
+        layers[this.layer].buyables!.respec!();
+      },
+      unlocked() {
+        return hasUpgrade("c", "22");
+      }
+    }
+  ],
+  increaseUnlockOrder: [], // Array of layer names to have their order increased when this one is first unlocked
+
+  microtabs: {
+    stuff: {
+      data: {
+        first: {
+          display: `
+						<upgrades />
+						<div>confirmed</div>`
+        },
+        second: {
+          embedLayer: "f"
+        }
+      }
+    },
+    otherStuff: {
+      // There could be another set of microtabs here
+      data: {}
+    }
+  },
+
+  bars: {
+    data: {
+      longBoi: {
+        fillStyle: { "background-color": "#FFFFFF" },
+        baseStyle: { "background-color": "#696969" },
+        textStyle: { color: "#04e050" },
+
+        borderStyle() {
+          return {};
+        },
+        direction: Direction.Right,
+        width: 300,
+        height: 30,
+        progress() {
+          return player.points
+            .add(1)
+            .log(10)
+            .div(10)
+            .toNumber();
+        },
+        display() {
+          return format(player.points) + " / 1e10 points";
+        },
+        unlocked: true
+      },
+      tallBoi: {
+        fillStyle: { "background-color": "#4BEC13" },
+        baseStyle: { "background-color": "#000000" },
+        textStyle: { "text-shadow": "0px 0px 2px #000000" },
+
+        borderStyle() {
+          return { "border-width": "7px" };
+        },
+        direction: Direction.Up,
+        width: 50,
+        height: 200,
+        progress() {
+          return player.points.div(100);
+        },
+        display() {
+          return formatWhole(player.points.div(1).min(100)) + "%";
+        },
+        unlocked: true
+      },
+      flatBoi: {
+        fillStyle: { "background-color": "#FE0102" },
+        baseStyle: { "background-color": "#222222" },
+        textStyle: { "text-shadow": "0px 0px 2px #000000" },
+
+        borderStyle() {
+          return {};
+        },
+        direction: Direction.Up,
+        width: 100,
+        height: 30,
+        progress() {
+          return player.layers.c.points.div(50);
+        },
+        unlocked: true
+      }
+    }
+  },
+
+  // Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
+  subtabs: {
+    "main tab": {
+      buttonStyle() {
+        return { color: "orange" };
+      },
+      notify: true,
+      display: `
+				<main-display />
+				<sticky><prestige-button /></sticky>
+				<resource-display />
+				<spacer height="5px" />
+				<button onclick='console.log("yeet")'>'HI'</button>
+				<div>Name your points!</div>
+				<TextField :value="player.layers.c.thingy" @input="value => player.layers.c.thingy = value" :field="false" />
+				<sticky style="color: red; font-size: 32px; font-family: Comic Sans MS;">I have {{ format(player.points) }} {{ player.layers.c.thingy }} points!</sticky>
+				<hr />
+				<milestones />
+				<spacer />
+				<upgrades />
+				<challenges />`,
+      glowColor: "blue"
+    },
+    thingies: {
+      resetNotify: true,
+      style() {
+        return { "background-color": "#222222", "--background": "#222222" };
+      },
+      buttonStyle() {
+        return { "border-color": "orange" };
+      },
+      display: `
+				<buyables />
+				<spacer />
+				<row style="width: 600px; height: 350px; background-color: green; border-style: solid;">
+					<Toggle :value="player.layers.c.beep" @change="value => player.layers.c.beep = value" />
+					<spacer width="30px" height="10px" />
+					<div>Beep</div>
+					<spacer />
+					<vr height="200px"/>
+					<column>
+						<prestige-button style="width: 150px; height: 80px" />
+						<prestige-button style="width: 100px; height: 150px" />
+					</column>
+				</row>
+				<spacer />
+				<img src="https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png" />`
+    },
+    jail: {
+      display: `
+				<infobox id="coolInfo" />
+				<bar id="longBoi" />
+				<spacer />
+				<row>
+					<column style="background-color: #555555; padding: 15px">
+						<div style="color: teal">Sugar level:</div><spacer /><bar id="tallBoi" />
+					</column>
+					<spacer />
+					<column>
+						<div>idk</div>
+						<spacer width="0" height="50px" />
+						<bar id="flatBoi" />
+					</column>
+				</row>
+				<spacer />
+				<div>It's jail because "bars"! So funny! Ha ha!</div>
+				<tree :nodes="[['f', 'c'], ['g', 'spook', 'h']]" />`
+    },
+    illuminati: {
+      unlocked() {
+        return hasUpgrade("c", 13);
+      },
+      display: `
+				<h1> C O N F I R M E D </h1>
+				<spacer />
+				<microtab family="stuff" style="width: 660px; height: 370px; background-color: brown; --background: brown; border: solid white; margin: auto" />
+				<div>Adjust how many points H gives you!</div>
+				<Slider :value="player.layers.c.otherThingy" @change="value => player.c.otherThingy = value" :min="1" :max="30" />`
+    }
+  },
+  style() {
+    return {
+      //'background-color': '#3325CC'
+    };
+  },
+  nodeStyle() {
+    return {
+      // Style on the layer node
+      color: "#3325CC",
+      "text-decoration": "underline"
+    };
+  },
+  glowColor: "orange", // If the node is highlighted, it will be this color (default is red)
+  componentStyles: {
+    challenge() {
+      return { height: "200px" };
+    },
+    "prestige-button"() {
+      return { color: "#AA66AA" };
+    }
+  },
+  tooltip() {
+    // Optional, tooltip displays when the layer is unlocked
+    let tooltip = "{{ formatWhole(player.layers.c.points) }} {{ layers.c.resource }}";
+    if (player.layers[this.layer].buyables![11].gt(0))
+      tooltip +=
+        "<br><i><br><br><br>{{ formatWhole(player.layers.c.buyables![11]) }} Exhancers</i>";
+    return tooltip;
+  },
+  shouldNotify() {
+    // Optional, layer will be highlighted on the tree if true.
+    // Layer will automatically highlight if an upgrade is purchasable.
+    return player.layers.c.buyables![11] == new Decimal(1);
+  },
+  mark: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
+  resetDescription: "Melt your points into "
+} as RawLayer;

src/data/layers/aca/f.js

@@ -1,107 +0,0 @@
-import Decimal, { formatWhole } from '../../../util/bignum';
-import player from '../../../game/player';
-import { layers as tmp } from '../../../game/layers';
-import { getClickableState } from '../../../util/features';
-
-export default {
-    id: "f",
-    infoboxes:{
-        coolInfo: {
-            title: "Lore",
-            titleStyle: {'color': '#FE0000'},
-            body: "DEEP LORE!",
-            bodyStyle: {'background-color': "#0000EE"}
-        }
-    },
-
-    startData() { return {
-        unlocked: false,
-        points: new Decimal(0),
-        boop: false,
-        clickables: {[11]: "Start"}, // Optional default Clickable state
-    }},
-    color: "#FE0102",
-    requires() {return new Decimal(10)},
-    resource: "farm points",
-    baseResource: "points",
-    baseAmount() {return player.points},
-    type: "static",
-    exponent: 0.5,
-    base: 3,
-    roundUpCost: true,
-    canBuyMax() {return false},
-    name: "Farms",
-    //directMult() {return new Decimal(player.c.otherThingy)},
-
-    row: 1,
-    branches: [{ target: "c", 'stroke-width': '25px', 'stroke': 'blue', style: 'filter: blur(5px)' }], // When this layer appears, a branch will appear from this layer to any layers here. Each entry can be a pair consisting of a layer id and a color.
-
-    tooltipLocked() { // Optional, tooltip displays when the layer is locked
-        return ("This weird farmer dinosaur will only see you if you have at least {{layers.f.requires}} points. You only have {{ formatWhole(player.points) }}")
-    },
-    midsection: '<div><br/><img src="https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390" /><div>Bork Bork!</div></div>',
-    // The following are only currently used for "custom" Prestige type:
-    prestigeButtonDisplay() { //Is secretly HTML
-        if (!this.canBuyMax) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your points and lollipops! (At least " + formatWhole(tmp[this.layer].nextAt) + " points)"
-        if (this.canBuyMax) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you <b>" + formatWhole(tmp[this.layer].resetGain) + "</b> Farm Points in exchange for all of your points and lollipops! (You'll get another one at " + formatWhole(tmp[this.layer].nextAtDisp) + " points)"
-    },
-    canReset() {
-        return tmp[this.layer].baseAmount.gte(tmp[this.layer].nextAt)
-    },
-    // This is also non minimal, a Clickable!
-    clickables: {
-
-        masterButtonClick() {
-            if (getClickableState(this.layer, 11) == "Borkened...")
-                player[this.layer].clickables[11] = "Start"
-        },
-        masterButtonDisplay() {return (getClickableState(this.layer, 11) == "Borkened...") ? "Fix the clickable!" : "Does nothing"}, // Text on Respec button, optional
-        11: {
-            title: "Clicky clicky!", // Optional, displayed at the top in a larger font
-            display() { // Everything else displayed in the buyable button after the title
-                let data = getClickableState(this.layer, this.id)
-                return "Current state:<br>" + data
-            },
-            unlocked() { return player[this.layer].unlocked },
-            canClick() {
-                return getClickableState(this.layer, this.id) !== "Borkened..."},
-            click() {
-                switch(getClickableState(this.layer, this.id)){
-                    case "Start":
-                        player[this.layer].clickables[this.id] = "A new state!"
-                        break;
-                    case "A new state!":
-                        player[this.layer].clickables[this.id] = "Keep going!"
-                        break;
-                    case "Keep going!":
-                        player[this.layer].clickables[this.id] = "Maybe that's a bit too far..."
-                        break;
-                    case "Maybe that's a bit too far...":
-                        //makeParticles(coolParticle, 4)
-                        player[this.layer].clickables[this.id] = "Borkened..."
-                        break;
-                    default:
-                        player[this.layer].clickables[this.id] = "Start"
-                        break;
-                }
-            },
-            hold(){
-                console.log("Clickkkkk...")
-            },
-            style() {
-                switch(getClickableState(this.layer, this.id)){
-                    case "Start":
-                        return {'background-color': 'green'}
-                    case "A new state!":
-                        return {'background-color': 'yellow'}
-                    case "Keep going!":
-                        return {'background-color': 'orange'}
-                    case "Maybe that's a bit too far...":
-                        return {'background-color': 'red'}
-                    default:
-                        return {}
-            }},
-        },
-    },
-
-}

src/data/layers/aca/f.ts

@@ -0,0 +1,151 @@
+/* eslint-disable */
+import { layers as tmp } from "@/game/layers";
+import player from "@/game/player";
+import { RawLayer } from "@/typings/layer";
+import Decimal, { formatWhole } from "@/util/bignum";
+import { getClickableState } from "@/util/features";
+
+export default {
+  id: "f",
+  infoboxes: {
+    data: {
+      coolInfo: {
+        title: "Lore",
+        titleStyle: { color: "#FE0000" },
+        body: "DEEP LORE!",
+        bodyStyle: { "background-color": "#0000EE" }
+      }
+    }
+  },
+
+  startData() {
+    return {
+      unlocked: false,
+      points: new Decimal(0),
+      boop: false,
+      clickables: { [11]: "Start" } // Optional default Clickable state
+    };
+  },
+  color: "#FE0102",
+  requires() {
+    return new Decimal(10);
+  },
+  resource: "farm points",
+  baseResource: "points",
+  baseAmount() {
+    return player.points;
+  },
+  type: "static",
+  exponent: 0.5,
+  base: 3,
+  roundUpCost: true,
+  canBuyMax() {
+    return false;
+  },
+  name: "Farms",
+  //directMult() {return new Decimal(player.c.otherThingy)},
+
+  row: 1,
+  branches: [
+    {
+      target: "c",
+      "stroke-width": "25px",
+      stroke: "blue",
+      style: "filter: blur(5px)"
+    }
+  ], // When this layer appears, a branch will appear from this layer to any layers here. Each entry can be a pair consisting of a layer id and a color.
+
+  tooltipLocked() {
+    // Optional, tooltip displays when the layer is locked
+    return "This weird farmer dinosaur will only see you if you have at least {{layers.f.requires}} points. You only have {{ formatWhole(player.points) }}";
+  },
+  midsection:
+    '<div><br/><img src="https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390" /><div>Bork Bork!</div></div>',
+  // The following are only currently used for "custom" Prestige type:
+  prestigeButtonDisplay() {
+    //Is secretly HTML
+    if (!this.canBuyMax)
+      return (
+        "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your points and lollipops! (At least " +
+        formatWhole(tmp[this.layer].nextAt) +
+        " points)"
+      );
+    if (this.canBuyMax)
+      return (
+        "Hi! I'm a <u>weird dinosaur</u> and I'll give you <b>" +
+        formatWhole(tmp[this.layer].resetGain) +
+        "</b> Farm Points in exchange for all of your points and lollipops! (You'll get another one at " +
+        formatWhole(tmp[this.layer].nextAt) +
+        " points)"
+      );
+  },
+  canReset() {
+    return Decimal.gte(tmp[this.layer].baseAmount!, tmp[this.layer].nextAt);
+  },
+  // This is also non minimal, a Clickable!
+  clickables: {
+    masterButtonClick() {
+      if (getClickableState(this.layer, 11) == "Borkened...")
+        player.layers[this.layer].clickables![11] = "Start";
+    },
+    masterButtonDisplay() {
+      return getClickableState(this.layer, 11) == "Borkened..."
+        ? "Fix the clickable!"
+        : "Does nothing";
+    }, // Text on Respec button, optional
+    data: {
+      11: {
+        title: "Clicky clicky!", // Optional, displayed at the top in a larger font
+        display() {
+          // Everything else displayed in the buyable button after the title
+          const data = getClickableState(this.layer, this.id);
+          return "Current state:<br>" + data;
+        },
+        unlocked() {
+          return player.layers[this.layer].unlocked;
+        },
+        canClick() {
+          return getClickableState(this.layer, this.id) !== "Borkened...";
+        },
+        click() {
+          switch (getClickableState(this.layer, this.id)) {
+            case "Start":
+              player.layers[this.layer].clickables![this.id] = "A new state!";
+              break;
+            case "A new state!":
+              player.layers[this.layer].clickables![this.id] = "Keep going!";
+              break;
+            case "Keep going!":
+              player.layers[this.layer].clickables![this.id] =
+                "Maybe that's a bit too far...";
+              break;
+            case "Maybe that's a bit too far...":
+              //makeParticles(coolParticle, 4)
+              player.layers[this.layer].clickables![this.id] = "Borkened...";
+              break;
+            default:
+              player.layers[this.layer].clickables![this.id] = "Start";
+              break;
+          }
+        },
+        hold() {
+          console.log("Clickkkkk...");
+        },
+        style() {
+          switch (getClickableState(this.layer, this.id)) {
+            case "Start":
+              return { "background-color": "green" };
+            case "A new state!":
+              return { "background-color": "yellow" };
+            case "Keep going!":
+              return { "background-color": "orange" };
+            case "Maybe that's a bit too far...":
+              return { "background-color": "red" };
+            default:
+              return {};
+          }
+        }
+      }
+    }
+  }
+} as RawLayer;

src/data/layers/demo-infinity.js

@@ -1,153 +0,0 @@
-import Decimal, { format } from '../../util/bignum';
-import player from '../../game/player';
-import { layers } from '../../game/layers';
-import { hasUpgrade, hasMilestone, getBuyableAmount, setBuyableAmount, hasChallenge } from '../../util/features';
-import { resetLayer } from '../../util/layers';
-
-export default {
-    id: "i",
-    position: 2, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
-    startData() { return {
-        unlocked: false,
-		points: new Decimal(0),
-
-    }},
-  branches: ["p"],
-    color: "#964B00",
-    requires(){
-      let require = new Decimal(8).plus(player.i.points.div(10).floor().times(2))
-      return require
-    } , // Can be a function that takes requirement increases into account
-  effectDisplay(){return "Multiplying points and prestige points by "+format(player[this.layer].points.plus(1).pow(hasUpgrade("p",235)?6.9420:1))},
-    resource: "Infinity", // Name of prestige currency
-    baseResource: "pointy points", // Name of resource prestige is based on
-    baseAmount() {return player.p.buyables[21]}, // Get the current amount of baseResource
-    type: "custom", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
-    resetGain(){
-
-      if (hasMilestone("p",12)){return getBuyableAmount("p",21).div(2).floor().times(2).times(5).sub(30).sub(player.i.points)}
-      return (player.p.buyables[21].gte(layers.i.requires)?1:0)}, // Prestige currency exponent
-    getNextAt(){return new Decimal(100)},
-  canReset(){return player.p.buyables[21].gte(layers.i.requires)},
-  prestigeButtonDisplay(){return "Reset everything for +"+format(layers.i.resetGain)+" Infinity.<br>You need "+format(layers.i.requires)+" pointy points to reset."},
-    row: 1, // Row the layer is in on the tree (0 is the first row)
-    hotkeys: [
-        {key: "i", description: "I: Infinity", press(){if (layers.i.canReset) resetLayer(this.layer)}},
-    ],
-    layerShown(){return player[this.layer].unlocked||new Decimal(player.p.buyables[21]).gte(8)},
-    milestones: {
-    0: {
-        requirementDisplay: "2 Infinity points",
-        effectDisplay: "Keep ALL milestones on reset",
-        done() { return player[this.layer].points.gte(2) },
-
-    },
-      1: {
-        requirementDisplay: "3 Infinity points",
-        effectDisplay: "Pointy points don't reset generators",
-        done() { return player[this.layer].points.gte(3) },
-      unlocked(){return hasMilestone(this.layer,this.id-1)}
-    },
-      2: {
-        requirementDisplay: "4 Infinity points",
-        effectDisplay: "Start with 6 <b>Time Dilation</b>, 3 <b>Point</b>, and 1 of the other 2 challenges",
-        done() { return player[this.layer].points.gte(4) },
-unlocked(){return hasMilestone(this.layer,this.id-1)}
-    },
-      3: {
-        requirementDisplay: "5 Infinity points",
-        effectDisplay: "Start with 40 upgrades and 6 boosts",
-        done() { return player[this.layer].points.gte(5) },
-unlocked(){return hasMilestone(this.layer,this.id-1)}
-    },
-      4: {
-        requirementDisplay: "6 Infinity points",
-        effectDisplay: "You can choose all of the 14th row upgrades, and remove the respec button",
-        done() { return player[this.layer].points.gte(6) },
-unlocked(){return hasMilestone(this.layer,this.id-1)}
-    },
-      5: {
-        requirementDisplay: "8 Infinity points",
-        effectDisplay: "Keep all upgrades and 7 Time dilation",
-        done() { return player[this.layer].points.gte(8) },
-unlocked(){return hasMilestone(this.layer,this.id-1)}
-    },
-      6: {
-        requirementDisplay: "10 Infinity points",
-        effectDisplay: "Infinity reset nothing and auto prestige",
-        done() { return player[this.layer].points.gte(10) },
-unlocked(){return hasMilestone(this.layer,this.id-1)}
-    },
-    },
-  resetsNothing(){return hasMilestone(this.layer,6)},
-update(){
-  if (hasMilestone(this.layer,0)){
-    if (!hasMilestone("p",0)){
-      player.p.milestones.push(0)
-      player.p.milestones.push(1)
-      player.p.milestones.push(2)
-      player.p.milestones.push(3)
-      player.p.milestones.push(4)
-      player.p.milestones.push(5)
-      player.p.milestones.push(6)
-      player.p.milestones.push(7)
-      player.p.milestones.push(8)
-    }
-  }
-  if (hasMilestone(this.layer,2)){
-    if (!hasChallenge("p",11)){
-      player.p.challenges[11]=new Decimal(hasMilestone(this.layer,5)?7:6)
-      player.p.challenges[12]=new Decimal(3)
-      player.p.challenges[21]=new Decimal(1)
-      player.p.challenges[22]=new Decimal(1)
-    }
-  }
-  if (hasMilestone(this.layer,3)){
-    if (!hasUpgrade("p",71)){
-      player.p.upgrades=[11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44,51,52,53,54,61,62,63,64,71,72,73,74,81,82,83,84,91,92,93,94,101,102,103,104]
-    }
-    if (getBuyableAmount("p",11).lt(6)){setBuyableAmount("p",11,new Decimal(6))}
-  }
-  if (hasUpgrade(this.layer,13)){
-
-    for (let i=0;i<(hasUpgrade("p",222)?100:hasUpgrade("p",215)?10:1);i++){
-      if (layers.p.buyables[12].canAfford)layers.p.buyables[12].buy()
-    if (layers.p.buyables[13].canAfford)layers.p.buyables[13].buy()
-    if (layers.p.buyables[14].canAfford&&layers.p.buyables[14].unlocked())layers.p.buyables[14].buy()
-    if (layers.p.buyables[21].canAfford)layers.p.buyables[21].buy()}
-  }
-  if (hasUpgrade("p",223)){
-    if (hasMilestone("p",14))player.p.buyables[22]=player.p.buyables[22].max(player.p.buyables[21].sub(7))
-    else if (layers.p.buyables[22].canAfford)layers.p.buyables[22].buy()
-  }
-  if (hasMilestone(this.layer,5)&&!hasUpgrade("p",111)){player.p.upgrades=[11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44,51,52,53,54,61,62,63,64,71,72,73,74,81,82,83,84,91,92,93,94,101,102,103,104,111,121,122,131,132,141,142,143]}
-    if (hasMilestone(this.layer,6)) {
-      this.reset();
-    }
-},
-  upgrades:{
-    rows: 999,
-    cols: 5,
-    11:{
-      title: "Prestige",
-      description: "Gain 100% of prestige points per second",
-      cost(){
-        return new Decimal(1)},
-      unlocked(){return hasMilestone(this.layer,4)}
-    },
-    12:{
-      title: "Automation",
-      description: "Remove the nerf of upgrade <b>Active</b>",
-      cost(){
-        return new Decimal(2)},
-      unlocked(){return hasUpgrade(this.layer,11)}
-    },
-    13:{
-      title: "Pointy",
-      description: "Automatically buy generators and pointy points",
-      cost(){
-        return new Decimal(5)},
-      unlocked(){return hasUpgrade(this.layer,11)}
-    },
-  }
-  }

src/data/layers/demo-infinity.ts

@@ -0,0 +1,354 @@
+/* eslint-disable */
+import { layers } from "@/game/layers";
+import player from "@/game/player";
+import { Layer, RawLayer } from "@/typings/layer";
+import Decimal, { format } from "@/util/bignum";
+import {
+  getBuyableAmount, hasChallenge, hasMilestone, hasUpgrade, setBuyableAmount
+} from "@/util/features";
+import { resetLayer } from "@/util/layers";
+
+export default {
+  id: "i",
+  position: 2, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
+  startData() {
+    return {
+      unlocked: false,
+      points: new Decimal(0)
+    };
+  },
+  branches: ["p"],
+  color: "#964B00",
+  requires() {
+    const require = new Decimal(8).plus(
+      player.layers.i.points
+        .div(10)
+        .floor()
+        .times(2)
+    );
+    return require;
+  }, // Can be a function that takes requirement increases into account
+  effectDisplay() {
+    return (
+      "Multiplying points and prestige points by " +
+      format(
+        player.layers[this.layer].points
+          .plus(1)
+          .pow(hasUpgrade("p", 235) ? 6.942 : 1)
+      )
+    );
+  },
+  resource: "Infinity", // Name of prestige currency
+  baseResource: "pointy points", // Name of resource prestige is based on
+  baseAmount() {
+    return player.layers.p.buyables![21];
+  }, // Get the current amount of baseResource
+  type: "custom", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
+  resetGain() {
+    if (hasMilestone("p", 12)) {
+      return getBuyableAmount("p", 21)!
+        .div(2)
+        .floor()
+        .times(2)
+        .times(5)
+        .sub(30)
+        .sub(player.layers.i.points);
+    }
+    return player.layers.p.buyables![21].gte(layers.i.requires!) ? 1 : 0;
+  }, // Prestige currency exponent
+  getNextAt() {
+    return new Decimal(100);
+  },
+  canReset() {
+    return player.layers.p.buyables![21].gte(layers.i.requires!);
+  },
+  prestigeButtonDisplay() {
+    return (
+      "Reset everything for +" +
+      format(layers.i.resetGain) +
+      " Infinity.<br>You need " +
+      format(layers.i.requires!) +
+      " pointy points to reset."
+    );
+  },
+  row: 1, // Row the layer is in on the tree (0 is the first row)
+  hotkeys: [
+    {
+      key: "i",
+      description: "I: Infinity",
+      press() {
+        if (layers.i.canReset) resetLayer(this.layer);
+      }
+    }
+  ],
+  layerShown() {
+    return (
+      player.layers[this.layer].unlocked ||
+      new Decimal(player.layers.p.buyables[21]).gte(8)
+    );
+  },
+  milestones: {
+    data: {
+      0: {
+        requirementDisplay: "2 Infinity points",
+        effectDisplay: "Keep ALL milestones on reset",
+        done() {
+          return player.layers[this.layer].points.gte(2);
+        }
+      },
+      1: {
+        requirementDisplay: "3 Infinity points",
+        effectDisplay: "Pointy points don't reset generators",
+        done() {
+          return player.layers[this.layer].points.gte(3);
+        },
+        unlocked() {
+          return hasMilestone(this.layer, Number(this.id) - 1);
+        }
+      },
+      2: {
+        requirementDisplay: "4 Infinity points",
+        effectDisplay:
+          "Start with 6 <b>Time Dilation</b>, 3 <b>Point</b>, and 1 of the other 2 challenges",
+        done() {
+          return player.layers[this.layer].points.gte(4);
+        },
+        unlocked() {
+          return hasMilestone(this.layer, Number(this.id) - 1);
+        }
+      },
+      3: {
+        requirementDisplay: "5 Infinity points",
+        effectDisplay: "Start with 40 upgrades and 6 boosts",
+        done() {
+          return player.layers[this.layer].points.gte(5);
+        },
+        unlocked() {
+          return hasMilestone(this.layer, Number(this.id) - 1);
+        }
+      },
+      4: {
+        requirementDisplay: "6 Infinity points",
+        effectDisplay:
+          "You can choose all of the 14th row upgrades, and remove the respec button",
+        done() {
+          return player.layers[this.layer].points.gte(6);
+        },
+        unlocked() {
+          return hasMilestone(this.layer, Number(this.id) - 1);
+        }
+      },
+      5: {
+        requirementDisplay: "8 Infinity points",
+        effectDisplay: "Keep all upgrades and 7 Time dilation",
+        done() {
+          return player.layers[this.layer].points.gte(8);
+        },
+        unlocked() {
+          return hasMilestone(this.layer, Number(this.id) - 1);
+        }
+      },
+      6: {
+        requirementDisplay: "10 Infinity points",
+        effectDisplay: "Infinity reset nothing and auto prestige",
+        done() {
+          return player.layers[this.layer].points.gte(10);
+        },
+        unlocked() {
+          return hasMilestone(this.layer, Number(this.id) - 1);
+        }
+      }
+    }
+  },
+  resetsNothing() {
+    return hasMilestone(this.layer, 6);
+  },
+  update(this: Layer) {
+    if (hasMilestone(this.layer, 0)) {
+      if (!hasMilestone("p", 0)) {
+        player.layers.p.milestones!.push(0);
+        player.layers.p.milestones!.push(1);
+        player.layers.p.milestones!.push(2);
+        player.layers.p.milestones!.push(3);
+        player.layers.p.milestones!.push(4);
+        player.layers.p.milestones!.push(5);
+        player.layers.p.milestones!.push(6);
+        player.layers.p.milestones!.push(7);
+        player.layers.p.milestones!.push(8);
+      }
+    }
+    if (hasMilestone(this.layer, 2)) {
+      if (!hasChallenge("p", 11)) {
+        player.layers.p.challenges![11] = new Decimal(
+          hasMilestone(this.layer, 5) ? 7 : 6
+        );
+        player.layers.p.challenges![12] = new Decimal(3);
+        player.layers.p.challenges![21] = new Decimal(1);
+        player.layers.p.challenges![22] = new Decimal(1);
+      }
+    }
+    if (hasMilestone(this.layer, 3)) {
+      if (!hasUpgrade("p", 71)) {
+        player.layers.p.upgrades = [
+          11,
+          12,
+          13,
+          14,
+          21,
+          22,
+          23,
+          24,
+          31,
+          32,
+          33,
+          34,
+          41,
+          42,
+          43,
+          44,
+          51,
+          52,
+          53,
+          54,
+          61,
+          62,
+          63,
+          64,
+          71,
+          72,
+          73,
+          74,
+          81,
+          82,
+          83,
+          84,
+          91,
+          92,
+          93,
+          94,
+          101,
+          102,
+          103,
+          104
+        ];
+      }
+      if (getBuyableAmount("p", 11)!.lt(6)) {
+        setBuyableAmount("p", 11, new Decimal(6));
+      }
+    }
+    if (hasUpgrade(this.layer, 13)) {
+      for (
+        let i = 0;
+        i < (hasUpgrade("p", 222) ? 100 : hasUpgrade("p", 215) ? 10 : 1);
+        i++
+      ) {
+        if (layers.p.buyables!.data[12].canAfford) layers.p.buyables!.data[12].buy();
+        if (layers.p.buyables!.data[13].canAfford) layers.p.buyables!.data[13].buy();
+        if (
+          layers.p.buyables!.data[14].canAfford &&
+          layers.p.buyables!.data[14].unlocked
+        )
+          layers.p.buyables!.data[14].buy();
+        if (layers.p.buyables!.data[21].canAfford) layers.p.buyables!.data[21].buy();
+      }
+    }
+    if (hasUpgrade("p", 223)) {
+      if (hasMilestone("p", 14))
+        player.layers.p.buyables![22] = player.layers.p.buyables![22].max(
+          player.layers.p.buyables![21].sub(7)
+        );
+      else if (layers.p.buyables!.data[22].canAfford) layers.p.buyables!.data[22].buy();
+    }
+    if (hasMilestone(this.layer, 5) && !hasUpgrade("p", 111)) {
+      player.layers.p.upgrades = [
+        11,
+        12,
+        13,
+        14,
+        21,
+        22,
+        23,
+        24,
+        31,
+        32,
+        33,
+        34,
+        41,
+        42,
+        43,
+        44,
+        51,
+        52,
+        53,
+        54,
+        61,
+        62,
+        63,
+        64,
+        71,
+        72,
+        73,
+        74,
+        81,
+        82,
+        83,
+        84,
+        91,
+        92,
+        93,
+        94,
+        101,
+        102,
+        103,
+        104,
+        111,
+        121,
+        122,
+        131,
+        132,
+        141,
+        142,
+        143
+      ];
+    }
+    if (hasMilestone(this.layer, 6)) {
+      this.reset();
+    }
+  },
+  upgrades: {
+    rows: 999,
+    cols: 5,
+    data: {
+      11: {
+        title: "Prestige",
+        description: "Gain 100% of prestige points per second",
+        cost() {
+          return new Decimal(1);
+        },
+        unlocked() {
+          return hasMilestone(this.layer, 4);
+        }
+      },
+      12: {
+        title: "Automation",
+        description: "Remove the nerf of upgrade <b>Active</b>",
+        cost() {
+          return new Decimal(2);
+        },
+        unlocked() {
+          return hasUpgrade(this.layer, 11);
+        }
+      },
+      13: {
+        title: "Pointy",
+        description: "Automatically buy generators and pointy points",
+        cost() {
+          return new Decimal(5);
+        },
+        unlocked() {
+          return hasUpgrade(this.layer, 11);
+        }
+      }
+    }
+  }
+} as RawLayer;

src/data/layers/demo.js

@@ -1,940 +0,0 @@
-import Decimal, { format } from '../../util/bignum';
-import player from '../../game/player';
-import { layers } from '../../game/layers';
-import { hasUpgrade, hasMilestone, getBuyableAmount, setBuyableAmount, hasChallenge } from '../../util/features';
-import { resetLayer } from '../../util/layers';
-
-export default {
-	id: "p",
-	position: 2,
-	startData() { return {
-		unlocked: true,
-		points: new Decimal(0),
-		gp: new Decimal(0),
-		g: new Decimal(0),
-		geff: new Decimal(1),
-		cmult: new Decimal(1),
-	}},
-	color: "#4BDC13",
-	requires(){
-		let require = new Decimal(68.99)
-		if (hasMilestone(this.layer,0))require=require.plus(0.01)
-		if (hasUpgrade(this.layer,21))require=require.tetrate(hasUpgrade("p",34)?(new Decimal(1).div(new Decimal(1).plus(layers.p.upgrades[34].effect))):1)
-		if (hasUpgrade(this.layer,22))require=require.pow(hasUpgrade("p",34)?(new Decimal(1).div(new Decimal(1).plus(layers.p.upgrades[34].effect))):1)
-		if (hasUpgrade(this.layer,23))require=require.div(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
-		if (hasUpgrade(this.layer,24))require=require.sub(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
-		return require.max(1)
-	},
-	resource: "prestige points",
-	baseResource: "points",
-	baseAmount() {return player.points}, // Get the current amount of baseResource
-	type: "normal", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
-	exponent: 0.5, // Prestige currency exponent
-	gainMult() { // Calculate the multiplier for main currency from bonuses
-		let mult = new Decimal(1)
-		if (hasUpgrade(this.layer,131))mult=mult.times(10)
-			if (player.i.unlocked)mult=mult.times(player.i.points.plus(1).pow(hasUpgrade("p",235)?6.9420:1))
-				if (hasUpgrade(this.layer,222))mult=mult.times(getBuyableAmount(this.layer,22).plus(1))
-					if (hasUpgrade("p",231)){
-						let asdf = (hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10())
-						mult=mult.mul(asdf.plus(1))
-					}
-					if (hasMilestone(this.layer,13))mult=mult.mul(new Decimal(2).plus(layers.p.buyables[33].effect).pow(getBuyableAmount(this.layer,32)))
-						return mult
-				},
-	gainExp() { // Calculate the exponent on main currency from bonuses
-		return new Decimal(1)
-	},
-	row: 0, // Row the layer is in on the tree (0 is the first row)
-	hotkeys: [
-	{key: "p", description: "P: Reset for prestige points", press(){if (layers.p.canReset) resetLayer(this.layer)}},
-	],
-	layerShown(){return true},
-	upgrades:{
-		rows: 999,
-		cols: 5,
-		11:{
-			title: "Gain points",
-			description: "Point generation is increased by 1",
-			cost(){
-				if (hasMilestone(this.layer,2))return new Decimal(1)
-					return new Decimal(1.00001)},
-				unlocked(){return true}
-			},
-			12:{
-				title: "Gain more points",
-				description: "Point generation is singled",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,11)}
-			},
-			13:{
-				title: "Gain more points",
-				description: "Point generation is lined",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,12)}
-			},
-			14:{
-				title: "Gain more points",
-				description: "Point generation is tetrated by 1",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,13)}
-			},
-			21:{
-				title: "Lower prestige requirement",
-				description: "Prestige point requirement is superrooted by 1",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,14)}
-			},
-			22:{
-				title: "Lower prestige requirement more",
-				description: "Prestige point requirement is line rooted",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,21)}
-			},
-			23:{
-				title: "Lower prestige requirement more",
-				description: "Prestige point requirement is wholed",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,22)}
-			},
-			24:{
-				title: "Lower prestige requirement more",
-				description: "Prestige point requirement is decreased by 1",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,23)}
-			},
-			31:{
-				title: "Unlock",
-				description: "Unlock an upgrade",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,24)}
-			},
-			32:{
-				title: "An",
-				description: "Unlock an upgrade",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,31)}
-			},
-			33:{
-				title: "Upgrade",
-				description: "Unlock an upgrade",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,32)}
-			},
-			34:{
-				title: "Increase",
-				description(){return "Add 0.01 to all above upgrades. Currently: +"+format(this.effect)},
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,33)},
-				effect(){
-					let r = (hasUpgrade("p",41)?new Decimal(0.01).times(layers.p.upgrades[41].effect):new Decimal(0.01))
-					r=r.times(new Decimal(1).plus(new Decimal(player[this.layer].challenges[11]).add(1).pow(hasUpgrade(this.layer,121)?1.2:1)))
-					if (hasUpgrade(this.layer,92)) r=r.plus(new Decimal(0.001).times(player[this.layer].g.plus(1)).min(0.05))
-						return r
-				}
-			},
-			41:{
-				title: "Increase again",
-				description(){return "Multiply the previous upgrade by 1.01. Currently: x"+format(this.effect)},
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,34)},
-				effect(){return new Decimal(1.01).pow(hasUpgrade("p",42)?layers.p.upgrades[42].effect:1).times(hasUpgrade("p",63)?2:1)}
-			},
-			42:{
-				title: "Increase again",
-				description(){return "Exponentiate the previous upgrade by 1.01. Currently: ^"+format(this.effect)},
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,41)},
-				effect(){return new Decimal(1.01).tetrate(hasUpgrade("p",43)?layers.p.upgrades[43].effect:1).times(hasUpgrade("p",63)?2:1).times(hasUpgrade("p",64)?2:1)}
-			},
-			43:{
-				title: "Increase again",
-				description(){return "Tetrate the previous upgrade by 1.01. Currently: ^^"+format(this.effect)},
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,42)},
-				effect(){return new Decimal(1.01).pentate(hasUpgrade("p",44)?layers.p.upgrades[44].effect:1).times(hasUpgrade("p",63)?2:1).times(hasUpgrade("p",64)?2:1)}
-			},
-			44:{
-				title: "Increase again",
-				description(){return "Pentate the previous upgrade by 1.01. Currently: ^^^"+format(this.effect)},
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,43)},
-				effect(){return new Decimal(1.01).times(hasUpgrade("p",63)?2:1).times(hasUpgrade("p",64)?2:1)}
-			},
-			51:{
-				title: "Challenging",
-				description: "This upgrade doesn't unlock a challenge",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,44)},
-			},
-			52:{
-				title: "Not challenging",
-				description: "This upgrade doesn't add 1 to the completion limit",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,51)},
-			},
-			53:{
-				title: "Not not challenging",
-				description: "This upgrade doesn't add 1 to the completion limit",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,52)},
-			},
-			54:{
-				title: "(not^3) challenging",
-				description: "Fix the bug where you can't buy upgrades when you have 1 prestige point",
-				cost(){return new Decimal(0.99999)},
-				unlocked(){return hasUpgrade(this.layer,53)},
-				onPurchase(){player.p.points=player.p.points.round()},
-			},
-			61:{
-				title: "(not^4) challenging",
-				description: "Doesn't unlock a second challenge",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,54)&&hasUpgrade(this.layer,53)},
-			},
-			62:{
-				title: "Infinity points",
-				description: "You can now complete Time Dilation 4 more times",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,61)},
-			},
-			63:{
-				title: "Eternity points",
-				description: "Double all fourth row upgrade effects",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,62)},
-			},
-			64:{
-				title: "Reality points",
-				description: "Previous upgrade, but only to the last 3 upgrades",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,63)},
-			},
-			71:{
-				title: "1",
-				description: "Add 1.1 to point gain, but reset all above upgrades",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,64)},
-				onPurchase(){if (!hasMilestone(this.layer,0)) player[this.layer].upgrades=[71]}
-			},
-			72:{
-				title: "2",
-				description: "Multiply point gain by 1.1, but reset all above upgrades",
-				cost(){return new Decimal(2)},
-				unlocked(){return hasUpgrade(this.layer,64)&&hasUpgrade(this.layer, this.id-1)},
-				onPurchase(){if (!hasMilestone(this.layer,1))player[this.layer].upgrades=[71,72]}
-			},
-			73:{
-				title: "3",
-				description: "Raise point gain by ^1.1, but reset all above upgrades",
-				cost(){return new Decimal(4)},
-				unlocked(){return hasUpgrade(this.layer,64)&&hasUpgrade(this.layer, this.id-1)},
-				onPurchase(){if (!hasMilestone(this.layer,1))player[this.layer].upgrades=[71,72,73]}
-			},
-			74:{
-				title: "4",
-				description: "Tetrate point gain by 1.1, but reset all above upgrades",
-				cost(){return new Decimal(8)},
-				unlocked(){return hasUpgrade(this.layer,64)&&hasUpgrade(this.layer, this.id-1)},
-				onPurchase(){if (!hasMilestone(this.layer,2))player[this.layer].upgrades=[71,72,73,74]
-					if (hasMilestone(this.layer,1)&&!hasMilestone(this.layer,2)) {player[this.layer].upgrades=[11,12,13,14,21,22,23,24,71,72,73,74]}}
-				},
-			81:{
-				title: "5",
-				description: "Generator efficiency is increased by 2",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,74)&&(player[this.layer].buyables[12].gt(0)||player[this.layer].buyables[21].gt(0))},
-			},
-			82:{
-				title: "6",
-				description: "Unlock another way to buy generators",
-				cost(){return new Decimal(1)},
-				unlocked(){return hasUpgrade(this.layer,81)&&(player[this.layer].buyables[12].gt(0)||player[this.layer].buyables[21].gt(0))},
-			},
-			83:{
-				title: "7",
-				description: "Generator efficiency is boosted by prestige points",
-				cost(){return new Decimal(3)},
-				unlocked(){return hasUpgrade(this.layer,82)},
-			},
-			84:{
-				title: "8",
-				description: "You can complete <b>Point</b> one more time",
-				cost(){return new Decimal(3)},
-				unlocked(){return hasUpgrade(this.layer,83)},
-			},
-			91:{
-				title: "9",
-				description: "New Challenge Time",
-				cost(){return new Decimal(20)},
-				unlocked(){return hasUpgrade(this.layer,84)&&new Decimal(player[this.layer].challenges[12]).gte(3)},
-			},
-			92:{
-				title: "10",
-				description: "Each of the first 50 generators adds 0.001 to <b>Increase</b>",
-				cost(){return new Decimal(5)},
-				unlocked(){return hasUpgrade(this.layer,91)&&hasChallenge(this.layer,21)},
-			},
-			93:{
-				title: "11",
-				description: "Change the tree trunk in generator effect to a hypertessaract root",
-				cost(){return new Decimal(7)},
-				unlocked(){return hasUpgrade(this.layer,92)},
-			},
-			94:{
-				title: "12",
-				description: "Unlock a clickable in generators",
-				cost(){return new Decimal(50)},
-				unlocked(){return hasUpgrade(this.layer,93)},
-			},
-			101:{
-				title: "10th row????",
-				description: "Decrease the dimensions of <b>11</b> by 2",
-				cost(){return new Decimal(10)},
-				unlocked(){return hasUpgrade(this.layer,94)},
-			},
-			102:{
-				title: "2 Tree Trunks",
-				description: "Double log of generator points adds to generator efficiency",
-				cost(){return new Decimal(25)},
-				unlocked(){return hasUpgrade(this.layer,101)},
-			},
-			103:{
-				title: "(not^5) challenging",
-				description: "Unlock the last challenge",
-				cost(){return new Decimal(103)},
-				unlocked(){return hasUpgrade(this.layer,102)},
-			},
-			104:{
-				title: "2 layers tree",
-				description: "Prestige points boost points, and unlock another tab",
-				cost(){return new Decimal(100)},
-				unlocked(){return hasUpgrade(this.layer,103)&&hasChallenge(this.layer,22)},
-			},
-			111:{
-				title: "not (hardcapped)",
-				description: "Remove the generator clickable hardcap, and you can only pick one upgrade on each row below this",
-				cost(){return new Decimal(110)},
-				unlocked(){return hasUpgrade(this.layer,104)&&hasMilestone(this.layer,6)},
-			},
-			112:{
-				title: "Respec button",
-				description: "Respec all lower upgrades, but you don't get points back",
-				cost(){return new Decimal(100)},
-				unlocked(){return hasUpgrade(this.layer,111)&&(hasUpgrade(this.layer,121)||hasUpgrade(this.layer,122))&&!hasMilestone("i",4)},
-				onPurchase(){
-					player.p.upgrades=player.p.upgrades.filter(function x(i){return i<112})
-				}
-			},
-			121:{
-				title: "Timers",
-				description: "Raise the <b>Time Dilation</b> reward effect to the 1.2",
-				cost(){return new Decimal(500)},
-				unlocked(){return hasUpgrade(this.layer,111)&&(!hasUpgrade(this.layer,122)||hasMilestone(this.layer,7))},
-			},
-			122:{
-				title: "Generators",
-				description: "Decrease the first generator buyable cost scaling base by 2",
-				cost(){return new Decimal(500)},
-				unlocked(){return hasUpgrade(this.layer,111)&&(!hasUpgrade(this.layer,121)||hasMilestone(this.layer,7))},
-			},
-			131:{
-				title: "Prestige",
-				description: "Gain 10x more prestige points",
-				cost(){return new Decimal(5000)},
-				unlocked(){return (hasUpgrade(this.layer,121)||hasUpgrade(this.layer,122))&&(!hasUpgrade(this.layer,132)||hasMilestone(this.layer,7))},
-			},
-			132:{
-				title: "One and a half",
-				description: "Raise generator effect to the 1.5",
-				cost(){return new Decimal(5000)},
-				unlocked(){return (hasUpgrade(this.layer,121)||hasUpgrade(this.layer,122))&&(!hasUpgrade(this.layer,131)||hasMilestone(this.layer,7))},
-			},
-
-			141:{
-				title: "Active",
-				description: "Multiply generator efficiency now increases by 1, but it doesn't automatically click.",
-				cost(){return new Decimal(50000)},
-				unlocked(){return (hasUpgrade(this.layer,131)||hasUpgrade(this.layer,132))&&((!hasUpgrade(this.layer,142)&&!hasUpgrade(this.layer,143))||hasMilestone("i",4))},
-			},
-			142:{
-				title: "Passive",
-				description: "Gain 5x more points",
-				cost(){return new Decimal(50000)},
-				unlocked(){return (hasUpgrade(this.layer,131)||hasUpgrade(this.layer,132))&&((!hasUpgrade(this.layer,141)&&!hasUpgrade(this.layer,143))||hasMilestone("i",4))},
-			},
-			143:{
-				title: "Idle",
-				description: "Hours played multiply generator power",
-				cost(){return new Decimal(50000)},
-				unlocked(){return (hasUpgrade(this.layer,131)||hasUpgrade(this.layer,132))&&((!hasUpgrade(this.layer,142)&&!hasUpgrade(this.layer,141))||hasMilestone("i",4))},
-			},
-			211:{
-				title: "Prestige",
-				description: "Pointy points multiply points",
-				cost(){return new Decimal(1)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades")},
-			},
-			212:{
-				title: "Pointy",
-				description: "Pointy prestige points reduce the cost scaling of pointy points",
-				cost(){return new Decimal(2)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,211))},
-			},
-			213:{
-				title: "Time",
-				description: "Generator power also multiplies point gain",
-				cost(){return new Decimal(6)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,212))},
-			},
-			214:{
-				title: "^0",
-				description: "Further reduce the pointy point scaling",
-				cost(){return new Decimal(11)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,213))},
-			},
-			215:{
-				title: "bulk",
-				description: "Auto-pointy points now buys 10 per tick",
-				cost(){return new Decimal(27)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,214))},
-			},
-			221:{
-				title: "^-1",
-				description: "^0 is even more powerful",
-				cost(){return new Decimal(28)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,215))},
-			},
-			222:{
-				title: "???",
-				description: "square <b>bulk</b> and pointy prestige points multiply prestige points",
-				cost(){return new Decimal(90)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,221))},
-			},
-			223:{
-				title: "more automation",
-				description: "Automatically gain pointy prestige points",
-				cost(){return new Decimal(96)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,222))},
-			},
-			224:{
-				title: "Generation",
-				description: "Generator costs are divided by generator effect",
-				cost(){return new Decimal(100)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,223))},
-			},
-			225:{
-				title: "Boosters",
-				description: "Unlock boosters (next update)",
-				cost(){return new Decimal(135)},
-				canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
-				unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,224))},
-			},
-			231:{
-				title: "Blue",
-				description: "The generator effect also affects prestige points",
-				cost(){return new Decimal(4)},
-				canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
-				unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,11))},
-				currencyDisplayName: "pointy boosters"
-			},
-			232:{
-				title: "Red",
-				description: "Unlock a third way to buy generators",
-				cost(){return new Decimal(5)},
-				canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
-				unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,12))},
-				currencyDisplayName: "pointy boosters"
-			},
-			233:{
-				title: "Green",
-				description: "Prestige points do not reset your pointy points and boosters don't reset generators",
-				cost(){return new Decimal(5)},
-				canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
-				unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,12))},
-				currencyDisplayName: "pointy boosters"
-			},
-			234:{
-				title: "Yellow",
-				description: "Divide the cost of the third generator buyable based on boosters",
-				cost(){return new Decimal(6)},
-				canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
-				unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,12))},
-				currencyDisplayName: "pointy boosters"
-			},
-			235:{
-				title: "Orange",
-				description: "Raise the Infinity effect to the 6.9420th power",
-				cost(){return new Decimal(8)},
-				canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
-				pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
-				unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,12))},
-				currencyDisplayName: "pointy boosters"
-			},
-		},
-
-		clickables: {
-			rows: 1,
-			cols: 1,
-			11: {
-
-				display() {return "Multiply generator efficiency by "+format(player.p.cmult)+((player.p.cmult.min(100).eq(100)&&!hasUpgrade(this.layer,111))?" (hardcapped)":"")},
-				unlocked(){return hasUpgrade("p",94)},
-				click(){player.p.cmult=player.p.cmult.plus(hasUpgrade("p",141)?1:0.01)
-				if (!hasUpgrade(this.layer,111))player.p.cmult=player.p.cmult.min(100)
-			},
-		canClick(){return player.p.cmult.lt(100)||hasUpgrade(this.layer,111)},
-	},
-
-},
-
-challenges:{
-	rows: 99,
-	cols: 2,
-	11:{
-		name: "Time dilation",
-		challengeDescription(){return "Point gain exponent is raised to the ^0.75"},
-		goal(){return new Decimal(100).times(new Decimal(10).pow(new Decimal(player[this.layer].challenges[this.id]).times(new Decimal(1).sub(new Decimal(layers[this.layer].challenges[12].effect).div(100))).pow(2)))},
-		rewardDescription(){return "You have completed this challenge "+player[this.layer].challenges[this.id]+"/"+this.completionLimit+" times. Multiply <b>Increase</b>'s effect by challenge completions+1. Currently: x"+format(new Decimal(player[this.layer].challenges[this.id]).add(1).pow(hasUpgrade(this.layer,121)?1.2:1))},
-		unlocked(){return hasUpgrade("p",51)||hasChallenge(this.layer,this.id)},
-		completionLimit(){
-			if (hasUpgrade("p",62))return 7
-				if (hasUpgrade("p",53))return 3
-					if (hasUpgrade("p",52))return 2
-						return 1
-
-				}
-			},
-			12:{
-				name: "Point",
-				challengeDescription: "Points are pointed",
-				goal(){return new Decimal(100)},
-				rewardDescription(){return "You have completed this challenge "+player[this.layer].challenges[this.id]+"/"+this.completionLimit+" times, making previous challenge goal scale "+(layers[this.layer].challenges[this.id].effect)+"% slower."},
-				unlocked(){return hasUpgrade("p",61)||hasChallenge(this.layer,this.id)},
-				effect(){
-					if (!hasChallenge(this.layer,this.id)) return 0
-						if (player[this.layer].challenges[this.id]==1) return 50
-							if (player[this.layer].challenges[this.id]==2) return 60
-								if (player[this.layer].challenges[this.id]==3) return 70
-							},
-						completionLimit(){
-							let l=new Decimal(1)
-							if (hasUpgrade("p",84)) l=l.plus(1)
-								if (hasMilestone("p",3))l=l.plus(1)
-									return l
-
-							}
-						},
-						21:{
-							name: "Time Points",
-							challengeDescription: "You are stuck in all above challenges",
-							goal(){return new Decimal(308.25)},
-							rewardDescription(){return "Lower the first generator buyable cost base by 6"},
-							unlocked(){return hasUpgrade("p",91)||hasChallenge(this.layer,this.id)},
-						},
-						22:{
-							name: "Last Challenge",
-							challengeDescription: "Generator points do nothing",
-							goal(){return new Decimal(9999)},
-							rewardDescription(){return "Autoclick the clickable and reduce <b>2 Tree Trunks</b> by 1"},
-							unlocked(){return hasUpgrade("p",103)||hasChallenge(this.layer,this.id)},
-						}
-					},
-					buyables: {
-						rows: 99,
-						cols: 4,
-						11: {
-							cost() { return new Decimal(0)},
-							display() { return "Reset all upgrades and challenges, but get a boost. You have reset "+getBuyableAmount(this.layer,this.id)+" times.<br>"+(getBuyableAmount(this.layer,this.id).eq(6)?"You can't buy more than 6 boosts!":"You need all upgrades to reset.") },
-							canAfford() { return (player[this.layer].points.gte(this.cost)&&hasUpgrade(this.layer,74)&&hasUpgrade(this.layer,64))&&getBuyableAmount(this.layer,this.id).lt(6) },
-							buy() {
-								player[this.layer].points = player[this.layer].points.sub(this.cost)
-								setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-								player[this.layer].points=new Decimal(0)
-								player[this.layer].upgrades=[]
-								if (hasMilestone(this.layer,1))player[this.layer].upgrades=[11,12,13,14,21,22,23,24]
-									if (hasMilestone(this.layer,3))player[this.layer].upgrades=[11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44,51,52,53,54,61,62,63,64]
-										if (!hasMilestone(this.layer,2)){
-											for (let c in layers[this.layer].challenges){
-												player[this.layer].challenges[c]=new Decimal(0)
-											}
-										}
-									},
-									unlocked(){return (hasUpgrade(this.layer,74)&&hasUpgrade(this.layer,64))||hasMilestone(this.layer,0)}
-								},
-								12: {
-									cost() { return new Decimal(1).times(new Decimal(hasChallenge(this.layer,21)?4:10).sub(hasUpgrade(this.layer,122)?2:0).pow(player.p.buyables[this.id])).div(hasUpgrade(this.layer,224)?(hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10()):1)},
-									display() { return "Buy a generator for "+format(this.cost)+" points" },
-									canAfford() { return (player.points.gte(this.cost)&&hasMilestone(this.layer,5)) },
-									buy() {
-										if (!hasMilestone("p",13))player.points = player.points.sub(this.cost)
-											setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-										player[this.layer].g=player[this.layer].g.plus(1)
-									},
-									unlocked(){return (hasMilestone(this.layer,5))}
-								},
-								13: {
-									cost() { return new Decimal(1).times(new Decimal(2).pow(player.p.buyables[this.id])).div(hasUpgrade(this.layer,224)?(hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10()):1)},
-									display() { return "Buy a generator for "+format(this.cost)+" prestige points" },
-									canAfford() { return (player.p.points.gte(this.cost)&&hasUpgrade("p",82)) },
-									buy() {
-										if (!hasMilestone("p",13))player.p.points = player.p.points.sub(this.cost)
-											setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-										player[this.layer].g=player[this.layer].g.plus(1)
-									},
-									unlocked(){return (hasUpgrade(this.layer,82))}
-								},
-								14: {
-									cost() { return new Decimal(900).mul(new Decimal(1.01).pow(getBuyableAmount(this.layer,this.id))).round().div(hasUpgrade(this.layer,234)?getBuyableAmount(this.layer,23).pow(0.3).plus(1):1)},
-									display() { return "Buy a generator for "+format(this.cost)+" Infinity points" },
-									canAfford() { return (player.i.points.gte(this.cost)&&hasUpgrade("p",232)) },
-									buy() {
-										if (!hasMilestone("p",13))player.i.points = player.i.points.sub(this.cost).round()
-											setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-										player[this.layer].g=player[this.layer].g.plus(1)
-									},
-									unlocked(){return (hasUpgrade(this.layer,232))}
-								},
-								21: {
-									cost() { return new Decimal(20).plus(getBuyableAmount(this.layer, this.id).pow(new Decimal(2).sub(new Decimal(hasUpgrade(this.layer,221)?0.9:hasUpgrade(this.layer,214)?0.6:0.3).times(hasUpgrade(this.layer,212)?(new Decimal(1).sub(new Decimal(0.75).pow(getBuyableAmount(this.layer,22)))):0))))},
-									display() { return "Reset your generators for +1 pointy point! Cost: "+format(this.cost)+" Generators" },
-									canAfford() { return (player.p.g.gte(this.cost)&&hasUpgrade("p",104)) },
-									buy() {
-										if (!hasMilestone("i",1))player.p.g = new Decimal(0)
-											setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-										if (!hasMilestone("i",1))setBuyableAmount(this.layer,12, new Decimal(0))
-											if (!hasMilestone("i",1))setBuyableAmount(this.layer,13, new Decimal(0))
-												if (!hasMilestone("i",1))player.p.gp=new Decimal(0)
-											},
-										unlocked(){return (hasUpgrade(this.layer,104))}
-									},
-									22: {
-										cost() { return new Decimal(8).plus(getBuyableAmount(this.layer,this.id))},
-										display() { return "Gain a pointy prestige point. Cost: "+format(this.cost)+" Pointy Points" },
-										canAfford() { return (getBuyableAmount(this.layer,21).gte(this.cost)&&(hasMilestone("i",5))) },
-										buy() {
-											if (!hasUpgrade(this.layer,233))setBuyableAmount(this.layer,21, getBuyableAmount(this.layer,21).sub(this.cost))
-												setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-										},
-										unlocked(){return (hasMilestone("i",5))}
-									},
-									23: {
-										cost() { return new Decimal(124).plus(getBuyableAmount(this.layer,this.id).times(2).pow(2))},
-										display() { return "Gain a booster. Cost: "+format(this.cost)+" Pointy Points" },
-										canAfford() { return (getBuyableAmount(this.layer,21).gte(this.cost)&&(hasMilestone("i",5))) },
-										buy() {
-											if (!hasMilestone(this.layer,15))setBuyableAmount(this.layer,21, getBuyableAmount(this.layer,21).sub(this.cost))
-												setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-											if (!hasMilestone(this.layer,15)){
-												if (!hasMilestone(this.layer,12)){player.p.upgrades=player.p.upgrades.filter((x)=>{return (x<200||x>230)})
-													if (hasMilestone(this.layer,11)){player.p.upgrades.push(215);player.p.upgrades.push(225);player.p.upgrades.push(223);player.p.upgrades.push(222)}}
-												setBuyableAmount("p",21,new Decimal(0))
-												setBuyableAmount("p",22,new Decimal(0))
-												if (!hasUpgrade("p",233)){
-													setBuyableAmount("p",12,new Decimal(0))
-													setBuyableAmount("p",13,new Decimal(0))
-													setBuyableAmount("p",14,new Decimal(0))
-
-													player.p.g = new Decimal(0)}
-													player.p.gp=new Decimal(0)}
-												},
-												unlocked(){return (hasUpgrade("p",225)||getBuyableAmount("p",23).gt(0))}
-											},
-											31: {
-												cost() { return new Decimal(1e93).times(new Decimal(1.5).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1.1).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
-												effect(){return new Decimal(2).plus(layers.p.buyables[33].effect).pow(getBuyableAmount(this.layer,this.id).plus(layers.p.buyables[51].effect))},
-												display() { return "Double point gain. \nCurrently: x"+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
-												canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
-												buy() {
-													player.p.points=player.p.points.sub(this.cost)
-													setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-												},
-												unlocked(){return (hasMilestone("p",13))}
-											},
-											32: {
-												cost() { return new Decimal(1e95).times(new Decimal(2).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1.01).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
-												display() { return "Double prestige point gain. \nCurrently: x"+format(new Decimal(2).plus(layers.p.buyables[33].effect).pow(getBuyableAmount(this.layer,this.id)))+"\nCost: "+format(this.cost)+" Prestige points" },
-												canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
-												buy() {
-													player.p.points=player.p.points.sub(this.cost)
-													setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-												},
-												unlocked(){return (hasMilestone("p",13)&&getBuyableAmount(this.layer,31).gte(5))}
-											},
-											33: {
-												cost() { return new Decimal(1e100).times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1.01).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
-												effect(){return new Decimal(0.01).mul(getBuyableAmount(this.layer,this.id)).times(layers.p.buyables[43].effect)},
-												display() { return "Add 0.01 to the previous 2 buyable bases. \nCurrently: +"+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
-												canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
-												buy() {
-													player.p.points=player.p.points.sub(this.cost)
-													setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-												},
-												unlocked(){return (hasMilestone("p",13)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte(1e100)))}
-											},
-											41: {
-												cost() { return new Decimal(1e110).times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
-												effect(){return new Decimal(0.01).mul(getBuyableAmount(this.layer,this.id).plus(layers.p.buyables[51].effect))},
-												display() { return "Add 0.01 to the booster effect base. \nCurrently: +"+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
-												canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
-												buy() {
-													player.p.points=player.p.points.sub(this.cost)
-													setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-												},
-												unlocked(){return (hasMilestone("p",13)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte(1e110)))}
-											},
-											42: {
-												cost() { let c =  new Decimal(1e270).times(new Decimal(2).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1.01).pow(getBuyableAmount(this.layer,this.id).pow(2)))
-
-													return c
-												},
-												effect(){
-													let f= new Decimal(1.001).pow(getBuyableAmount(this.layer,this.id))
-													if (f.gte(1.1))f=f.pow(0.8).times(new Decimal(1.1).pow(0.2))
-														if (f.gte(1.35))f=f.pow(0.5).times(new Decimal(1.35).pow(0.5))
-															if (f.gte(3))f=new Decimal(3)
-																return f
-														},
-														display() { return "Raise point gain to the 1.001 \nCurrently: ^"+format(this.effect)+(this.effect.eq(3)?"(hardcapped)":"")+"\nCost: "+format(this.cost)+" Prestige points" },
-														canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13)))&&this.effect.lt(3) },
-														buy() {
-															player.p.points=player.p.points.sub(this.cost)
-															setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-														},
-														unlocked(){return (hasMilestone("p",13)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte(1e270)))}
-													},
-													43: {
-														cost() { return new Decimal("1e375").times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
-														effect(){return new Decimal(0.01).mul(getBuyableAmount(this.layer,this.id)).plus(1)},
-														display() { return "Multiply the above buyable effect. \nCurrently: *"+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
-														canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
-														buy() {
-															player.p.points=player.p.points.sub(this.cost)
-															setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-														},
-														unlocked(){return (hasMilestone("p",13)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte("1e375")))}
-													},
-													51: {
-														cost() { return new Decimal("1e1740").times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1e10).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
-														effect(){return getBuyableAmount(this.layer,this.id).pow(0.55)},
-														display() { return "Add free levels to the above 2 buyables \nCurrently: "+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
-														canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
-														buy() {
-															player.p.points=player.p.points.sub(this.cost)
-															setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
-														},
-														unlocked(){return (hasMilestone("p",15)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte("1e1700")))}
-													},
-												},
-												milestones: {
-													0: {
-														requirementDisplay: "1 reset",
-														effectDisplay: "Add 0.01 to base point gain and prestige requirement, and <b>1</b> doesn't reset upgrades",
-														done() { return getBuyableAmount("p",11).gte(1) },
-														unlocked(){return layers.p.activeSubtab!="Pointy points"}
-													},
-													1: {
-														requirementDisplay: "2 resets",
-														effectDisplay: "<div><b>2</b> and <b>3</b> don't reset upgrades, and start with the first 8 upgrades on reset</div>",
-														done() { return getBuyableAmount("p",11).gte(2) },
-														unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
-													},
-													2: {
-														requirementDisplay: "3 resets",
-														effectDisplay: "<div><b>4</b> doesn't reset upgrades, and permanently fix the bug where you can't buy upgrades when you have 1 prestige point</div>",
-														done() { return getBuyableAmount("p",11).gte(3) },
-														unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
-													},
-													3: {
-														requirementDisplay: "4 resets",
-														effectDisplay: "Don't reset challenges, add 1 to <b>Point</b> maximum completions, and start with 24 upgrades",
-														done() { return getBuyableAmount("p",11).gte(4) },
-														unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
-													},
-													4: {
-														requirementDisplay: "5 resets",
-														effectDisplay: "Each useless upgrade adds 0.1 to base point gain",
-														done() { return getBuyableAmount("p",11).gte(5) },
-														unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
-													},
-													5: {
-														requirementDisplay: "6 resets",
-														effectDisplay: "Unlock something",
-														done() { return getBuyableAmount("p",11).gte(6) },
-														unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
-													},
-													6: {
-														requirementDisplay: "1 pointy point",
-														effectDisplay: "Unlock the upgrade tree",
-														done() { return getBuyableAmount("p",21).gte(1) },
-														unlocked(){return hasMilestone(this.layer,this.id-1)&&(hasUpgrade(this.layer,104)||player.i.unlocked)&&layers.p.activeSubtab!="Pointy points"}
-													},
-													7: {
-														requirementDisplay: "7 pointy points",
-														effectDisplay: "You can now buy both first and second row upgrade tree upgrades",
-														done() { return getBuyableAmount("p",21).gte(7) },
-														unlocked(){return hasMilestone(this.layer,this.id-1)&&(hasUpgrade(this.layer,111)||player.i.unlocked)&&layers.p.activeSubtab!="Pointy points"}
-													},
-													8: {
-														requirementDisplay: "8 pointy points",
-														effectDisplay: "Unlock another layer",
-														done() { return getBuyableAmount("p",21).gte(8) },
-														unlocked(){return hasMilestone(this.layer,this.id-1)&&(hasUpgrade(this.layer,141)||hasUpgrade(this.layer,143)||hasUpgrade(this.layer,142)||player.i.unlocked)&&layers.p.activeSubtab!="Pointy points"}
-													},
-													11: {
-														requirementDisplay: "3 boosters",
-														effectDisplay: "Keep automation on booster reset",
-														done() { return getBuyableAmount("p",23).gte(3) },
-														unlocked(){return (getBuyableAmount("p",23).gt(0)||hasMilestone(this.layer,this.id))}
-													},
-													12: {
-														requirementDisplay: "5 boosters",
-														effectDisplay: "Keep all prestige upgrades on booster reset and buy max infinity points",
-														done() { return getBuyableAmount("p",23).gte(5) },
-														unlocked(){return (getBuyableAmount("p",23).gt(0)||hasMilestone(this.layer,this.id))}
-													},
-													13: {
-														requirementDisplay: "10 boosters",
-														effectDisplay: "Generators cost nothing",
-														done() { return getBuyableAmount("p",23).gte(10) },
-														unlocked(){return (getBuyableAmount("p",23).gt(0)||hasMilestone(this.layer,this.id))}
-													},
-													14: {
-														requirementDisplay: "15 boosters",
-														effectDisplay: "Auto buy the first 3 buyables and buy max pointy prestige points",
-														done() { return getBuyableAmount("p",23).gte(15) },
-														unlocked(){return (getBuyableAmount("p",41).gt(0)||hasMilestone(this.layer,this.id))}
-													},
-													15: {
-														requirementDisplay: "20 boosters",
-														effectDisplay: "Boosters reset nothing and auto booster",
-														done() { return getBuyableAmount("p",23).gte(16) },
-														unlocked(){return (getBuyableAmount("p",41).gt(0)||hasMilestone(this.layer,this.id))}
-													},
-												},
-												passiveGeneration(){return (hasUpgrade("i",11)?1:0)},
-												update(diff){
-													if (hasMilestone(this.layer,2)&&!hasUpgrade(this.layer,54)){
-														player[this.layer].upgrades.push(54)
-													}
-													if (hasMilestone(this.layer,1)&&!hasUpgrade(this.layer,11)&&!hasMilestone(this.layer,3)){
-														player[this.layer].upgrades=[11,12,13,14,21,22,23,24]
-													}
-													if (hasMilestone(this.layer,3)&&!hasUpgrade(this.layer,31)){
-														player[this.layer].upgrades=[11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44,51,52,53,54,61,62,63,64]
-													}
-													if (hasMilestone(this.layer,5)){
-														player[this.layer].gp=player[this.layer].gp.plus(player.p.g.times(diff).times(player.p.geff))
-													}
-													let geff=new Decimal(1)
-													if (hasUpgrade("p",81)) geff=geff.plus(2)
-														if (hasUpgrade("p",102)) geff=geff.plus(hasChallenge("p",22)?player.p.gp.plus(1).log(10):player.p.gp.plus(1).log(10).plus(1).log(10))
-															if (hasUpgrade("p",83)) geff=geff.times(player.p.points.plus(1).log(10).plus(1))
-																if (hasUpgrade("p",94)) geff=geff.times(player.p.cmult)
-																	if (hasUpgrade("p",104)) geff=geff.times(new Decimal(player.p.buyables[21]).plus(1))
-																		if (hasUpgrade("p",143)) geff=geff.times(new Decimal(player.timePlayed).div(3600).max(1))
-																			if (hasUpgrade("p",225)) geff=geff.pow(new Decimal(player.p.buyables[23]).div(10).mul(new Decimal(0.1).plus(layers.p.buyables[41].effect).times(10)).plus(1))
-																				player.p.geff=geff
-																			if (hasChallenge("p",22)&&(!hasUpgrade("p",141)||hasUpgrade("i",12)))player.p.cmult=player.p.cmult.plus(hasUpgrade("p",141)?1:0.01)
-																				if (!hasUpgrade("p",111)) player.p.cmult=player.p.cmult.min(100)
-																					if (hasMilestone(this.layer,14)){
-																						if (layers.p.buyables[31].canAfford())layers.p.buyables[31].buy()
-																							if (layers.p.buyables[32].canAfford())layers.p.buyables[32].buy()
-																								if (layers.p.buyables[33].canAfford())layers.p.buyables[33].buy()
-																							}
-																						if (hasMilestone(this.layer,15)){
-																							if (layers.p.buyables[23].canAfford())layers.p.buyables[23].buy()
-																						}
-																				},
-																				subtabs: {
-																					"Upgrades": {
-																						display: `
-																							<main-display />
-																							<spacer />
-																							<prestige-button display="" />
-																							<spacer />
-																							<spacer />
-																							<upgrades />`
-																					},
-																					"Challenges": {
-																						unlocked() { return hasUpgrade("p", 51) || hasMilestone("p", 0); },
-																						display: `
-																							<spacer />
-																							<spacer />
-																							<challenges />`
-																					},
-																					"Buyables and Milestones": {
-																						unlocked(){return hasUpgrade("p",74)||hasMilestone("p",0)},
-																						display: `
-																							<spacer />
-																							<spacer />
-																							<row><buyable id="11" /></row>
-																							<spacer />
-																							<div v-if="hasMilestone('p', 0)">Your boosts are making the point challenge {{ getBuyableAmount('p', 11).plus(1) }}x less pointy</div>
-																							<spacer />
-																							<milestones />`
-																					},
-																					"Generators": {
-																						unlocked(){return hasMilestone("p",5)||player.i.points.gte(1)},
-																						display: `
-																							<spacer />
-																							<div>You have {{ format(player.p.gp) }} generator points, adding {{ format(hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10()) }} to point gain</div>
-																							<div>You have {{ format(player.p.g) }} generators, generating {{ format(player.p.g.times(player.p.geff)) }} generator points per second</div>
-																							<div>Generator efficiency is {{ format(player.p.geff) }}</div>
-																							<spacer />
-																							<spacer />
-																							<buyables :buyables="[12, 13, 14]" />
-																							<row><clickable id="11" /></row>`
-																					},
-																					"Pointy Points": {
-																						unlocked(){return hasUpgrade("p",104)||player.i.points.gte(1)},
-																						display: `
-																							<div style="color: red; font-size: 32px; font-family: Comic Sans MS">{{ format(player.p.buyables[21]) }} pointy points</div>
-																							<div style="color: red; font-size: 32px; font-family: Comic Sans MS">My pointy points are multiplying generator efficiency by {{ format(new Decimal(player.p.buyables[21]).plus(1)) }}</div>
-																							<spacer />
-																							<spacer />
-																							<row><buyable id="21" /></row>
-																							<div v-if="hasMilestone('i', 5)" style="color: red; font-size: 32px; font-family: Comic Sans MS">I have {{ format(player.p.buyables[22]) }} pointy prestige points</div>
-																							<row><buyable id="22" /></row>
-																							<spacer />
-																							<upgrades :upgrades="[211, 212, 213, 214, 215]" />
-																							<upgrades :upgrades="[221, 222, 223, 224, 225]" />
-																							<div v-if="hasMilestone('p', 225)" style="color: red; font-size: 32px; font-family: Comic Sans MS">I have {{ format(player.p.buyables[23]) }} pointy boosters!</div>
-																							<row><buyable id="23" /></row>
-																							<div v-if="hasMilestone('p', 225) || getBuyableAmount('p', 23).gt(0)" style="color: red; font-size: 32px; font-family: Comic Sans MS">My pointy boosters are raising generator efficiency to the ^{{ format(new Decimal(player.p.buyables[23]).div(10).mul(new Decimal(0.1).plus(layers.p.buyables[41].effect).times(10)).plus(1)) }}</div>
-																							<spacer />
-																							<spacer />
-																							<div v-if="hasMilestone('p', 11)" style="font-size: 24px">Booster upgrades</div>
-																							<upgrades :upgrades="[231, 232, 233, 234, 235]" />`
-																					},
-																					"Buyables": {
-																						unlocked(){return hasMilestone("p",13)},
-																						display: `
-																							<buyables :buyables="[31, 32, 33]" />
-																							<buyables :buyables="[41, 42, 43]" />`
-																					}
-																				}
-}

src/data/mod.js

@@ -1,120 +0,0 @@
-import { computed } from 'vue';
-import { hasUpgrade, upgradeEffect, hasMilestone, inChallenge, getBuyableAmount } from '../util/features';
-import { layers } from '../game/layers';
-import player from '../game/player';
-import Decimal from '../util/bignum';
-
-// Import initial layers
-import f from './layers/aca/f.js';
-import c from './layers/aca/c.js';
-import a from './layers/aca/a.js';
-import demoLayer from './layers/demo.js';
-import demoInfinityLayer from './layers/demo-infinity.js';
-const g = {
-	id: "g",
-	symbol: "TH",
-	branches: ["c"],
-	color: '#6d3678',
-	shown: true,
-	canClick() {return player.points.gte(10)},
-	tooltip: "Thanos your points",
-	click() {
-		player.points = player.points.div(2);
-		console.log(this.layer);
-	}
-};
-const h = {
-	id: "h",
-	branches: ["g", () => ({ target: 'flatBoi', featureType: 'bar', endOffset: { x: -50 + 100 * layers.c.bars.flatBoi.progress.toNumber() } })],
-	tooltip() {return "Restore your points to {{ player.c.otherThingy }}"},
-	row: "side",
-	position: 3,
-	canClick() {return player.points.lt(player.c.otherThingy)},
-	click() {player.points = new Decimal(player.c.otherThingy)}
-};
-const spook = {
-	id: "spook",
-	row: 1,
-	layerShown: "ghost",
-};
-
-const main = {
-	id: 'main',
-	display: `
-		<div v-if="player.devSpeed === 0">Game Paused</div>
-		<div v-else-if="player.devSpeed && player.devSpeed !== 1">Dev Speed: {{ format(player.devSpeed) }}x</div>
-		<div v-if="player.offTime != undefined">Offline Time: {{ formatTime(player.offTime.remain) }}</div>
-		<div>
-			<span v-if="player.points.lt('1e1000')">You have </span>
-			<h2>{{ format(player.points) }}</h2>
-			<span v-if="player.points.lt('1e1e6')"> points</span>
-		</div>
-		<div v-if="Decimal.gt(pointGain, 0)">
-			({{ player.oompsMag != 0 ? format(player.oomps) + " OOM" + (player.oompsMag < 0 ? "^OOM" : player.oompsMag > 1 ? "^" + player.oompsMag : "") + "s" : formatSmall(pointGain) }}/sec)
-		</div>
-		<spacer />
-		<tree :append="true" />`,
-	name: "Tree"
-};
-
-export const getInitialLayers = () => [ main, f, c, a, g, h, spook, demoLayer, demoInfinityLayer ];
-
-export function getStartingData() {
-	return {
-		points: new Decimal(10),
-	}
-}
-
-export const hasWon = computed(() => {
-	return false;
-});
-
-export const pointGain = computed(() => {
-	if(!hasUpgrade("c", 11))
-		return new Decimal(0);
-	let gain = new Decimal(3.19)
-	if (hasUpgrade("c", 12)) gain = gain.times(upgradeEffect("c", 12))
-	if (hasMilestone("p",0))gain=gain.plus(0.01)
-	if (hasMilestone("p",4)){
-		if (hasUpgrade("p",12))gain=gain.plus(0.1)
-		if (hasUpgrade("p",13))gain=gain.plus(0.1)
-		if (hasUpgrade("p",14))gain=gain.plus(0.1)
-		if (hasUpgrade("p",21))gain=gain.plus(0.1)
-		if (hasUpgrade("p",22))gain=gain.plus(0.1)
-		if (hasUpgrade("p",23))gain=gain.plus(0.1)
-		if (hasUpgrade("p",31))gain=gain.plus(0.1)
-		if (hasUpgrade("p",32))gain=gain.plus(0.1)
-		if (hasUpgrade("p",33))gain=gain.plus(0.1)
-	}
-	if (hasUpgrade("p",11))gain=gain.plus(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
-	if (hasUpgrade("p",12))gain=gain.times(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
-	if (hasUpgrade("p",13))gain=gain.pow(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
-	if (hasUpgrade("p",14))gain=gain.tetrate(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
-
-	if (hasUpgrade("p",71)) gain=gain.plus(1.1)
-	if (hasUpgrade("p",72)) gain=gain.times(1.1)
-	if (hasUpgrade("p",73)) gain=gain.pow(1.1)
-	if (hasUpgrade("p",74)) gain=gain.tetrate(1.1)
-	if (hasMilestone("p",5)&&!inChallenge("p",22)){
-		let asdf = (hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10())
-		gain=gain.plus(asdf)
-		if (hasUpgrade("p",213))gain=gain.mul(asdf.plus(1))
-    }
-	if (hasUpgrade("p",104)) gain=gain.times(player.p.points.plus(1).pow(0.5))
-	if (hasUpgrade("p",142))gain=gain.times(5)
-	if (player.i.unlocked)gain=gain.times(player.i.points.plus(1).pow(hasUpgrade("p",235)?6.9420:1))
-	if (inChallenge("p",11)||inChallenge("p",21))gain=new Decimal(10).pow(gain.log10().pow(0.75))
-	if (inChallenge("p",12)||inChallenge("p",21))gain=gain.pow(new Decimal(1).sub(new Decimal(1).div(getBuyableAmount("p",11).plus(1))))
-	if (hasUpgrade("p",211))gain=gain.times(getBuyableAmount("p",21).plus(1))
-	if (hasMilestone("p",13))gain=gain.times(layers.p.buyables[31].effect)
-	if (hasMilestone("p",13))gain=gain.pow(layers.p.buyables[42].effect)
-	return gain;
-});
-
-/* eslint-disable-next-line no-unused-vars */
-export function update(delta) {
-}
-
-/* eslint-disable-next-line no-unused-vars */
-export function fixOldSave(oldVersion, playerData) {
-}

src/data/mod.ts

@@ -0,0 +1,187 @@
+import { layers } from "@/game/layers";
+import player from "@/game/player";
+import { RawLayer } from "@/typings/layer";
+import { PlayerData } from "@/typings/player";
+import Decimal from "@/util/bignum";
+import {
+    getBuyableAmount,
+    hasMilestone,
+    hasUpgrade,
+    inChallenge,
+    upgradeEffect
+} from "@/util/features";
+import { computed } from "vue";
+import a from "./layers/aca/a";
+import c from "./layers/aca/c";
+import f from "./layers/aca/f";
+import demoLayer from "./layers/demo";
+import demoInfinityLayer from "./layers/demo-infinity";
+
+// Import initial layers
+
+const g = {
+    id: "g",
+    symbol: "TH",
+    branches: ["c"],
+    color: "#6d3678",
+    shown: true,
+    canClick() {
+        return player.points.gte(10);
+    },
+    tooltip: "Thanos your points",
+    click() {
+        player.points = player.points.div(2);
+        console.log(this.layer);
+    }
+} as RawLayer;
+const h = {
+    id: "h",
+    branches: [
+        "g",
+        () => ({
+            target: "flatBoi",
+            featureType: "bar",
+            endOffset: {
+                x:
+                    -50 +
+                    100 *
+                        (layers.c.bars!.data.flatBoi.progress instanceof Number
+                            ? (layers.c.bars!.data.flatBoi.progress as number)
+                            : (layers.c.bars!.data.flatBoi.progress as Decimal).toNumber())
+            }
+        })
+    ],
+    tooltip() {
+        return "Restore your points to {{ player.c.otherThingy }}";
+    },
+    row: "side",
+    position: 3,
+    canClick() {
+        return player.points.lt(player.layers.c.otherThingy as Decimal);
+    },
+    click() {
+        player.points = new Decimal(player.layers.c.otherThingy as Decimal);
+    }
+} as RawLayer;
+const spook = {
+    id: "spook",
+    row: 1,
+    layerShown: "ghost"
+} as RawLayer;
+
+const main = {
+    id: "main",
+    display: `
+		<div v-if="player.devSpeed === 0">Game Paused</div>
+		<div v-else-if="player.devSpeed && player.devSpeed !== 1">Dev Speed: {{ format(player.devSpeed) }}x</div>
+		<div v-if="player.offTime != undefined">Offline Time: {{ formatTime(player.offTime.remain) }}</div>
+		<div>
+			<span v-if="player.points.lt('1e1000')">You have </span>
+			<h2>{{ format(player.points) }}</h2>
+			<span v-if="player.points.lt('1e1e6')"> points</span>
+		</div>
+		<div v-if="Decimal.gt(pointGain, 0)">
+			({{ player.oompsMag != 0 ? format(player.oomps) + " OOM" + (player.oompsMag < 0 ? "^OOM" : player.oompsMag > 1 ? "^" + player.oompsMag : "") + "s" : formatSmall(pointGain) }}/sec)
+		</div>
+		<spacer />
+		<tree :append="true" />`,
+    name: "Tree"
+} as RawLayer;
+
+export const getInitialLayers = (
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    playerData: Partial<PlayerData>
+): Array<RawLayer> => [main, f, c, a, g, h, spook, demoLayer, demoInfinityLayer];
+
+export function getStartingData(): Record<string, unknown> {
+    return {
+        points: new Decimal(10)
+    };
+}
+
+export const hasWon = computed(() => {
+    return false;
+});
+
+export const pointGain = computed(() => {
+    if (!hasUpgrade("c", 11)) return new Decimal(0);
+    let gain = new Decimal(3.19);
+    if (hasUpgrade("c", 12)) gain = gain.times(upgradeEffect("c", 12) as Decimal);
+    if (hasMilestone("p", 0)) gain = gain.plus(0.01);
+    if (hasMilestone("p", 4)) {
+        if (hasUpgrade("p", 12)) gain = gain.plus(0.1);
+        if (hasUpgrade("p", 13)) gain = gain.plus(0.1);
+        if (hasUpgrade("p", 14)) gain = gain.plus(0.1);
+        if (hasUpgrade("p", 21)) gain = gain.plus(0.1);
+        if (hasUpgrade("p", 22)) gain = gain.plus(0.1);
+        if (hasUpgrade("p", 23)) gain = gain.plus(0.1);
+        if (hasUpgrade("p", 31)) gain = gain.plus(0.1);
+        if (hasUpgrade("p", 32)) gain = gain.plus(0.1);
+        if (hasUpgrade("p", 33)) gain = gain.plus(0.1);
+    }
+    if (hasUpgrade("p", 11))
+        gain = gain.plus(
+            hasUpgrade("p", 34)
+                ? new Decimal(1).plus(layers.p.upgrades!.data[34].effect as Decimal)
+                : 1
+        );
+    if (hasUpgrade("p", 12))
+        gain = gain.times(
+            hasUpgrade("p", 34)
+                ? new Decimal(1).plus(layers.p.upgrades!.data[34].effect as Decimal)
+                : 1
+        );
+    if (hasUpgrade("p", 13))
+        gain = gain.pow(
+            hasUpgrade("p", 34)
+                ? new Decimal(1).plus(layers.p.upgrades!.data[34].effect as Decimal)
+                : 1
+        );
+    if (hasUpgrade("p", 14))
+        gain = gain.tetrate(
+            hasUpgrade("p", 34)
+                ? new Decimal(1).plus(layers.p.upgrades!.data[34].effect as Decimal).toNumber()
+                : 1
+        );
+
+    if (hasUpgrade("p", 71)) gain = gain.plus(1.1);
+    if (hasUpgrade("p", 72)) gain = gain.times(1.1);
+    if (hasUpgrade("p", 73)) gain = gain.pow(1.1);
+    if (hasUpgrade("p", 74)) gain = gain.tetrate(1.1);
+    if (hasMilestone("p", 5) && !inChallenge("p", 22)) {
+        const asdf = hasUpgrade("p", 132)
+            ? (player.layers.p.gp as Decimal).plus(1).pow(new Decimal(1).div(2))
+            : hasUpgrade("p", 101)
+            ? (player.layers.p.gp as Decimal).plus(1).pow(new Decimal(1).div(3))
+            : hasUpgrade("p", 93)
+            ? (player.layers.p.gp as Decimal).plus(1).pow(0.2)
+            : (player.layers.p.gp as Decimal).plus(1).log10();
+        gain = gain.plus(asdf);
+        if (hasUpgrade("p", 213)) gain = gain.mul(asdf.plus(1));
+    }
+    if (hasUpgrade("p", 104)) gain = gain.times(player.layers.p.points.plus(1).pow(0.5));
+    if (hasUpgrade("p", 142)) gain = gain.times(5);
+    if (player.layers.i.unlocked)
+        gain = gain.times(player.layers.i.points.plus(1).pow(hasUpgrade("p", 235) ? 6.942 : 1));
+    if (inChallenge("p", 11) || inChallenge("p", 21))
+        gain = new Decimal(10).pow(gain.log10().pow(0.75));
+    if (inChallenge("p", 12) || inChallenge("p", 21))
+        gain = gain.pow(new Decimal(1).sub(new Decimal(1).div(getBuyableAmount("p", 11)!.plus(1))));
+    if (hasUpgrade("p", 211)) gain = gain.times(getBuyableAmount("p", 21)!.plus(1));
+    if (hasMilestone("p", 13)) gain = gain.times(layers.p.buyables!.data[31].effect as Decimal);
+    if (hasMilestone("p", 13)) gain = gain.pow(layers.p.buyables!.data[42].effect as Decimal);
+    return gain;
+});
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function update(delta: Decimal): void {}
+/* eslint-enable @typescript-eslint/no-unused-vars */
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export function fixOldSave(
+    oldVersion: string | undefined,
+    playerData: Partial<PlayerData>
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+): void {}
+/* eslint-enable @typescript-eslint/no-unused-vars */

src/data/themes.js

@@ -1,52 +0,0 @@
-const defaultTheme = {
-	variables: {
-		"--background": "#0f0f0f",
-		"--background-tooltip": "rgba(0, 0, 0, 0.75)",
-		"--secondary-background": "#0f0f0f",
-		"--color": "#dfdfdf",
-		"--points": "#ffffff",
-		"--locked": "#bf8f8f",
-		"--bought": "#77bf5f",
-		"--link": "#02f2f2",
-		"--separator": "#dfdfdf",
-		"--border-radius": "25%",
-		"--danger": "rgb(220, 53, 69)",
-		"--modal-border": "solid 2px var(--color)",
-		"--feature-margin": "0px",
-	},
-	stackedInfoboxes: false,
-	floatingTabs: true
-};
-
-export default {
-	classic: defaultTheme,
-	paper: {
-		...defaultTheme,
-		variables: {
-			...defaultTheme.variables,
-			"--background": "#2a323d",
-			"--secondary-background": "#333c4a",
-			"--locked": "#3a3e45",
-			"--bought": "#5C8A58",
-			"--separator": "#333c4a",
-			"--border-radius": "4px",
-			"--modal-border": "",
-			"--feature-margin": "5px",
-		},
-		stackedInfoboxes: true,
-		floatingTabs: false
-	},
-	aqua: {
-		...defaultTheme,
-		variables: {
-			...defaultTheme.variables,
-			"--background": "#001f3f",
-			"--background-tooltip": "rgba(0, 15, 31, 0.75)",
-			"--secondary-background": "#001f3f",
-			"--color": "#bfdfff",
-			"--points": "#dfefff",
-			"--locked": "#c4a7b3",
-			"--separator": "#bfdfff"
-		}
-	}
-};

src/data/themes.ts

@@ -0,0 +1,60 @@
+import { Theme } from "@/typings/theme";
+
+const defaultTheme: Theme = {
+    variables: {
+        "--background": "#0f0f0f",
+        "--background-tooltip": "rgba(0, 0, 0, 0.75)",
+        "--secondary-background": "#0f0f0f",
+        "--color": "#dfdfdf",
+        "--points": "#ffffff",
+        "--locked": "#bf8f8f",
+        "--bought": "#77bf5f",
+        "--link": "#02f2f2",
+        "--separator": "#dfdfdf",
+        "--border-radius": "25%",
+        "--danger": "rgb(220, 53, 69)",
+        "--modal-border": "solid 2px var(--color)",
+        "--feature-margin": "0px"
+    },
+    stackedInfoboxes: false,
+    floatingTabs: true
+};
+
+export enum Themes {
+    Classic = "classic",
+    Paper = "paper",
+    Aqua = "aqua"
+}
+
+export default {
+    classic: defaultTheme,
+    paper: {
+        ...defaultTheme,
+        variables: {
+            ...defaultTheme.variables,
+            "--background": "#2a323d",
+            "--secondary-background": "#333c4a",
+            "--locked": "#3a3e45",
+            "--bought": "#5C8A58",
+            "--separator": "#333c4a",
+            "--border-radius": "4px",
+            "--modal-border": "",
+            "--feature-margin": "5px"
+        },
+        stackedInfoboxes: true,
+        floatingTabs: false
+    } as Theme,
+    aqua: {
+        ...defaultTheme,
+        variables: {
+            ...defaultTheme.variables,
+            "--background": "#001f3f",
+            "--background-tooltip": "rgba(0, 15, 31, 0.75)",
+            "--secondary-background": "#001f3f",
+            "--color": "#bfdfff",
+            "--points": "#dfefff",
+            "--locked": "#c4a7b3",
+            "--separator": "#bfdfff"
+        }
+    } as Theme
+} as Record<Themes, Theme>;

src/game/enums.ts

@@ -0,0 +1,30 @@
+export enum LayerType {
+    Static = "static",
+    Normal = "normal",
+    Custom = "custom",
+    None = "none"
+}
+
+export enum Direction {
+    Up = "Up",
+    Down = "Down",
+    Left = "Left",
+    Right = "Right",
+    Default = "Up"
+}
+
+export enum MilestoneDisplay {
+    All = "all",
+    Last = "last",
+    Configurable = "configurable",
+    Incomplete = "incomplete",
+    None = "none"
+}
+
+export enum ImportingStatus {
+    NotImporting = "NOT_IMPORTING",
+    Importing = "IMPORTING",
+    Failed = "FAILED",
+    WrongID = "WRONG_ID",
+    Force = "FORCE"
+}

src/game/gameLoop.js

@@ -1,156 +0,0 @@
-import { update as modUpdate, hasWon, pointGain } from '../data/mod';
-import Decimal from '../util/bignum';
-import modInfo from '../data/modInfo.json';
-import { layers } from './layers';
-import player from './player';
-
-function updatePopups(/* diff */) {
-	// TODO
-}
-
-function updateParticles(/* diff */) {
-	// TODO
-}
-
-function updateOOMPS(diff) {
-	if (player.points != undefined) {
-		player.oompsMag = 0;
-		if (player.points.lte(new Decimal(1e100))) {
-			player.lastPoints = player.points;
-			return;
-		}
-
-		let curr = player.points;
-		let prev = player.lastPoints || new Decimal(0);
-		player.lastPoints = curr;
-		if (curr.gt(prev)) {
-			if (curr.gte("10^^8")) {
-				curr = curr.slog(1e10);
-				prev = prev.slog(1e10);
-				player.oomps = curr.sub(prev).div(diff);
-				player.oompsMag = -1;
-			} else {
-				while (curr.div(prev).log(10).div(diff).gte("100") && player.oompsMag <= 5 && prev.gt(0)) {
-					curr = curr.log(10);
-					prev = prev.log(10);
-					player.oomps = curr.sub(prev).div(diff);
-					player.oompsMag++;
-				}
-			}
-		}
-	}
-}
-
-function updateLayers(diff) {
-	// Update each active layer
-	const activeLayers = Object.keys(layers).filter(layer => !layers[layer].deactivated);
-	activeLayers.forEach(layer => {
-		if (player[layer].resetTime != undefined) {
-			player[layer].resetTime = player[layer].resetTime.add(diff);
-		}
-		if (layers[layer].passiveGeneration) {
-			player[layer].points =
-				player[layer].points.add(Decimal.times(layers[layer].resetGain, layers[layer].passiveGeneration).times(diff));
-		}
-		layers[layer].update?.(diff);
-	});
-	// Automate each active layer
-	activeLayers.forEach(layer => {
-		if (layers[layer].autoReset && layers[layer].canReset) {
-			layers[layer].reset();
-		}
-		layers[layer].automate?.();
-		if (layers[layer].upgrades && layers[layer].autoUpgrade) {
-			Object.values(layers[layer].upgrades).forEach(upgrade => upgrade.buy());
-		}
-	});
-	// Check each active layer for newly unlocked achievements or milestones
-	activeLayers.forEach(layer => {
-		if (layers[layer].milestones) {
-			Object.values(layers[layer].milestones).forEach(milestone => {
-				if (milestone.unlocked !== false && !milestone.earned && milestone.done) {
-					player[layer].milestones.push(milestone.id);
-					milestone.onComplete?.();
-					// TODO popup notification
-					player[layer].lastMilestone = milestone.id;
-				}
-			});
-		}
-		if (layers[layer].achievements) {
-			Object.values(layers[layer].achievements).forEach(achievement => {
-				if (achievement.unlocked !== false && !achievement.earned && achievement.done) {
-					player[layer].achievements.push(achievement.id);
-					achievement.onComplete?.();
-					// TODO popup notification
-				}
-			});
-		}
-	});
-}
-
-function update() {
-	let now = Date.now();
-	let diff = (now - player.time) / 1e3;
-	player.time = now;
-	let trueDiff = diff;
-
-	// Always update UI
-	updatePopups(trueDiff);
-	updateParticles(trueDiff);
-	player.lastTenTicks.push(trueDiff);
-	if (player.lastTenTicks.length > 10) {
-		player.lastTenTicks = player.lastTenTicks.slice(1);
-	}
-
-	// Stop here if the game is paused on the win screen
-	if (hasWon.value && !player.keepGoing) {
-		return;
-	}
-	// Stop here if the player had a NaN value
-	if (player.hasNaN) {
-		return;
-	}
-
-	diff = new Decimal(diff).max(0);
-
-	// Add offline time if any
-	if (player.offTime != undefined) {
-		if (player.offTime.remain > modInfo.offlineLimit * 3600) {
-			player.offTime.remain = modInfo.offlineLimit * 3600;
-		}
-		if (player.offTime.remain > 0 && player.devSpeed !== 0) {
-			let offlineDiff = Math.max(player.offTime.remain / 10, diff);
-			player.offTime.remain -= offlineDiff;
-			diff = diff.add(offlineDiff);
-		} else if (player.devSpeed === 0) {
-			player.offTime.remain += diff.toNumber();
-		}
-		if (!player.offlineProd || player.offTime.remain <= 0) {
-			player.offTime = undefined;
-		}
-	}
-
-	// Cap at max tick length
-	diff = Decimal.min(diff, modInfo.maxTickLength);
-
-	// Apply dev speed
-	if (player.devSpeed != undefined) {
-		diff = diff.times(player.devSpeed);
-	}
-
-	// Update
-	if (diff.eq(0)) {
-		return;
-	}
-	player.timePlayed = player.timePlayed.add(diff);
-	if (player.points != undefined) {
-		player.points = player.points.add(Decimal.times(pointGain.value, diff));
-	}
-	modUpdate(diff);
-	updateOOMPS(trueDiff);
-	updateLayers(diff);
-}
-
-export default function startGameLoop() {
-	setInterval(update, 50);
-}

src/game/gameLoop.ts

@@ -0,0 +1,171 @@
+import { hasWon, pointGain, update as modUpdate } from "@/data/mod";
+import modInfo from "@/data/modInfo.json";
+import Decimal, { DecimalSource } from "@/util/bignum";
+import { layers } from "./layers";
+import player from "./player";
+
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+function updatePopups(diff: number) {
+    // TODO
+}
+
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+function updateParticles(diff: number) {
+    // TODO
+}
+
+function updateOOMPS(diff: DecimalSource) {
+    if (player.points != undefined) {
+        player.oompsMag = 0;
+        if (player.points.lte(new Decimal(1e100))) {
+            player.lastPoints = player.points;
+            return;
+        }
+
+        let curr = player.points;
+        let prev = (player.lastPoints as Decimal) || new Decimal(0);
+        player.lastPoints = curr;
+        if (curr.gt(prev)) {
+            if (curr.gte("10^^8")) {
+                curr = curr.slog(1e10);
+                prev = prev.slog(1e10);
+                player.oomps = curr.sub(prev).div(diff);
+                player.oompsMag = -1;
+            } else {
+                while (
+                    curr
+                        .div(prev)
+                        .log(10)
+                        .div(diff)
+                        .gte("100") &&
+                    player.oompsMag <= 5 &&
+                    prev.gt(0)
+                ) {
+                    curr = curr.log(10);
+                    prev = prev.log(10);
+                    player.oomps = curr.sub(prev).div(diff);
+                    player.oompsMag++;
+                }
+            }
+        }
+    }
+}
+
+function updateLayers(diff: DecimalSource) {
+    // Update each active layer
+    const activeLayers = Object.keys(layers).filter(layer => !layers[layer].deactivated);
+    activeLayers.forEach(layer => {
+        if (player.layers[layer].resetTime != undefined) {
+            player.layers[layer].resetTime = player.layers[layer].resetTime.add(diff);
+        }
+        if (layers[layer].passiveGeneration) {
+            const passiveGeneration =
+                typeof layers[layer].passiveGeneration == "boolean"
+                    ? 1
+                    : (layers[layer].passiveGeneration as DecimalSource);
+            player.layers[layer].points = player.layers[layer].points.add(
+                Decimal.times(layers[layer].resetGain, passiveGeneration).times(diff)
+            );
+        }
+        layers[layer].update?.(diff);
+    });
+    // Automate each active layer
+    activeLayers.forEach(layer => {
+        if (layers[layer].autoReset && layers[layer].canReset) {
+            layers[layer].reset();
+        }
+        layers[layer].automate?.();
+        if (layers[layer].upgrades && layers[layer].autoUpgrade) {
+            Object.values(layers[layer].upgrades!.data).forEach(upgrade => upgrade.buy());
+        }
+    });
+    // Check each active layer for newly unlocked achievements or milestones
+    activeLayers.forEach(layer => {
+        if (layers[layer].milestones) {
+            Object.values(layers[layer].milestones!.data).forEach(milestone => {
+                if (milestone.unlocked !== false && !milestone.earned && milestone.done) {
+                    player.layers[layer].milestones.push(milestone.id);
+                    milestone.onComplete?.();
+                    // TODO popup notification
+                    player.layers[layer].lastMilestone = milestone.id;
+                }
+            });
+        }
+        if (layers[layer].achievements) {
+            Object.values(layers[layer].achievements!.data).forEach(achievement => {
+                if (achievement.unlocked !== false && !achievement.earned && achievement.done) {
+                    player.layers[layer].achievements.push(achievement.id);
+                    achievement.onComplete?.();
+                    // TODO popup notification
+                }
+            });
+        }
+    });
+}
+
+function update() {
+    const now = Date.now();
+    let diff: DecimalSource = (now - player.time) / 1e3;
+    player.time = now;
+    const trueDiff = diff;
+
+    // Always update UI
+    updatePopups(trueDiff);
+    updateParticles(trueDiff);
+    player.lastTenTicks.push(trueDiff);
+    if (player.lastTenTicks.length > 10) {
+        player.lastTenTicks = player.lastTenTicks.slice(1);
+    }
+
+    // Stop here if the game is paused on the win screen
+    if (hasWon.value && !player.keepGoing) {
+        return;
+    }
+    // Stop here if the player had a NaN value
+    if (player.hasNaN) {
+        return;
+    }
+
+    diff = new Decimal(diff).max(0);
+
+    // Add offline time if any
+    if (player.offlineTime != undefined) {
+        if (player.offlineTime.gt(modInfo.offlineLimit * 3600)) {
+            player.offlineTime = new Decimal(modInfo.offlineLimit * 3600);
+        }
+        if (player.offlineTime.gt(0) && player.devSpeed !== 0) {
+            const offlineDiff = Decimal.max(player.offlineTime.div(10), diff);
+            player.offlineTime = player.offlineTime.sub(offlineDiff);
+            diff = diff.add(offlineDiff);
+        } else if (player.devSpeed === 0) {
+            player.offlineTime = player.offlineTime.add(diff);
+        }
+        if (!player.offlineProd || player.offlineTime.lt(0)) {
+            player.offlineTime = null;
+        }
+    }
+
+    // Cap at max tick length
+    diff = Decimal.min(diff, modInfo.maxTickLength);
+
+    // Apply dev speed
+    if (player.devSpeed != undefined) {
+        diff = diff.times(player.devSpeed);
+    }
+
+    // Update
+    if (diff.eq(0)) {
+        return;
+    }
+    player.timePlayed = player.timePlayed.add(diff);
+    if (player.points != undefined) {
+        player.points = player.points.add(Decimal.times(pointGain.value, diff));
+    }
+    modUpdate(diff);
+    updateOOMPS(trueDiff);
+    updateLayers(diff);
+}
+
+export default function startGameLoop(): void {
+    setInterval(update, 50);
+}

src/game/layers.js

@@ -1,452 +0,0 @@
-import clone from 'lodash.clonedeep';
-import { isFunction, isPlainObject } from '../util/common';
-import { createProxy, createGridProxy } from '../util/proxies';
-import playerProxy from './player';
-import Decimal from '../util/bignum';
-import { noCache, getStartingBuyables, getStartingClickables, getStartingChallenges, defaultLayerProperties } from '../util/layers';
-import { applyPlayerData } from '../util/save';
-import { isRef } from 'vue';
-
-export const layers = {};
-export const hotkeys = [];
-window.layers = layers;
-
-export function addLayer(layer, player = null) {
-	player = player || playerProxy;
-
-	// Check for required properties
-	if (!('id' in layer)) {
-		console.error(`Cannot add layer without a "id" property!`, layer);
-		return;
-	}
-	if (layer.type === "static" || layer.type === "normal") {
-		const missingProperty = [ 'baseAmount', 'requires' ].find(prop => !(prop in layer));
-		if (missingProperty) {
-			console.error(`Cannot add layer without a "${missingProperty}" property!`, layer);
-			return;
-		}
-	}
-
-	// Clone object to prevent modifying the original
-	layer = clone(layer);
-
-	player[layer.id] = applyPlayerData({
-		upgrades: [],
-		achievements: [],
-		milestones: [],
-		infoboxes: {},
-		buyables: getStartingBuyables(layer),
-		clickables: getStartingClickables(layer),
-		challenges: getStartingChallenges(layer),
-		grids: {},
-		...layer.startData?.()
-	}, player[layer.id]);
-
-	// Set default property values
-	layer = Object.assign({}, defaultLayerProperties, layer);
-	layer.layer = layer.id;
-	if (layer.type === "static" && (layer.base == undefined || Decimal.lte(layer.base, 1))) {
-		layer.base = 2;
-	}
-
-	// Process each feature
-	for (let property of uncachedProperties) {
-		if (layer[property] && !isRef(layer.property)) {
-			layer[property].forceCached = false;
-		}
-	}
-	for (let property of gridProperties) {
-		if (layer[property]) {
-			setRowCol(layer[property]);
-		}
-	}
-	for (let property of featureProperties) {
-		if (layer[property]) {
-			setupFeature(layer.id, layer[property]);
-		}
-	}
-	if (layer.upgrades) {
-		for (let id in layer.upgrades) {
-			if (isPlainObject(layer.upgrades[id])) {
-				layer.upgrades[id].bought = function() {
-					return !layer.deactivated && playerProxy[layer.id].upgrades.some(upgrade => upgrade == id);
-				}
-				setDefault(layer.upgrades[id], 'canAfford', function() {
-					if (this.currencyInternalName) {
-						let name = this.currencyInternalName;
-						if (this.currencyLocation) {
-							return !(this.currencyLocation[name].lt(this.cost));
-						} else if (this.currencyLayer) {
-							let lr = this.currencyLayer;
-							return !(playerProxy[lr][name].lt(this.cost));
-						} else {
-							return !(playerProxy[name].lt(this.cost));
-						}
-					} else {
-						return !(playerProxy[this.layer].points.lt(this.cost))
-					}
-				});
-				setDefault(layer.upgrades[id], 'pay', function() {
-					if (this.bought || !this.canAfford) {
-						return;
-					}
-					if (this.currencyInternalName) {
-						let name = this.currencyInternalName
-						if (this.currencyLocation) {
-							if (this.currencyLocation[name].lt(this.cost)) {
-								return;
-							}
-							this.currencyLocation[name] = this.currencyLocation[name].sub(this.cost);
-						} else if (this.currencyLayer) {
-							let lr = this.currencyLayer;
-							if (playerProxy[lr][name].lt(this.cost)) {
-								return;
-							}
-							playerProxy[lr][name] = playerProxy[lr][name].sub(this.cost);
-						} else {
-							if (playerProxy[name].lt(this.cost)) {
-								return;
-							}
-							playerProxy[name] = playerProxy[name].sub(this.cost);
-						}
-					} else {
-						if (playerProxy[this.layer].points.lt(this.cost)) {
-							return;
-						}
-						playerProxy[this.layer].points = playerProxy[this.layer].points.sub(this.cost);
-					}
-				}, false);
-				setDefault(layer.upgrades[id], 'buy', function() {
-					if (this.bought || !this.canAfford) {
-						return;
-					}
-					this.pay();
-					playerProxy[this.layer].upgrades.push(this.id);
-					this.onPurchase?.();
-				}, false);
-			}
-		}
-	}
-	if (layer.achievements) {
-		for (let id in layer.achievements) {
-			if (isPlainObject(layer.achievements[id])) {
-				layer.achievements[id].earned = function() {
-					return !layer.deactivated && playerProxy[layer.id].achievements.some(achievement => achievement == id);
-				}
-				setDefault(layer.achievements[id], 'onComplete', null, false);
-			}
-		}
-	}
-	if (layer.challenges) {
-		layer.activeChallenge = function() {
-			return Object.values(this.challenges).find(challenge => challenge.active);
-		}
-		for (let id in layer.challenges) {
-			if (isPlainObject(layer.challenges[id])) {
-				layer.challenges[id].shown = function() {
-					return this.unlocked !== false && (playerProxy.hideChallenges === false || !this.maxed);
-				}
-				layer.challenges[id].completed = function() {
-					return !layer.deactivated && playerProxy[layer.id].challenges[id]?.gt(0);
-				}
-				layer.challenges[id].completions = function() {
-					return playerProxy[layer.id].challenges[id];
-				}
-				layer.challenges[id].maxed = function() {
-					return !layer.deactivated && Decimal.gte(playerProxy[layer.id].challenges[id], this.completionLimit);
-				}
-				layer.challenges[id].active = function() {
-					return !layer.deactivated && playerProxy[layer.id].activeChallenge === id;
-				}
-				layer.challenges[id].toggle = noCache(function() {
-					let exiting = playerProxy[layer.id].activeChallenge === id;
-					if (exiting) {
-						if (this.canComplete && !this.maxed) {
-							let completions = this.canComplete;
-							if (completions === true) {
-								completions = 1;
-							}
-							playerProxy[layer.id].challenges[id] =
-								Decimal.min(playerProxy[layer.id].challenges[id].add(completions), this.completionLimit);
-							this.onComplete?.();
-						}
-						playerProxy[layer.id].activeChallenge = null;
-						this.onExit?.();
-						layer.reset(true);
-					} else if (!exiting && this.canStart) {
-						layer.reset(true);
-						playerProxy[layer.id].activeChallenge = id;
-						this.onEnter?.();
-					}
-				});
-				setDefault(layer.challenges[id], 'onComplete', null, false);
-				setDefault(layer.challenges[id], 'onEnter', null, false);
-				setDefault(layer.challenges[id], 'onExit', null, false);
-				setDefault(layer.challenges[id], 'canStart', true);
-				setDefault(layer.challenges[id], 'completionLimit', new Decimal(1));
-				setDefault(layer.challenges[id], 'mark', function() {
-					return Decimal.gt(this.completionLimit, 1) && this.maxed;
-				});
-				setDefault(layer.challenges[id], 'canComplete', function() {
-					if (!this.active) {
-						return false;
-					}
-					if (this.currencyInternalName) {
-						let name = this.currencyInternalName;
-						if (this.currencyLocation) {
-							return !(this.currencyLocation[name].lt(this.goal));
-						} else if (this.currencyLayer) {
-							let lr = this.currencyLayer;
-							return !(playerProxy[lr][name].lt(this.goal));
-						} else {
-							return !(playerProxy[name].lt(this.goal));
-						}
-					} else {
-						return !(playerProxy.points.lt(this.goal));
-					}
-				});
-			}
-		}
-	}
-	if (layer.buyables) {
-		setDefault(layer.buyables, 'respec', null, false);
-		setDefault(layer.buyables, 'reset', function() {
-			playerProxy[this.layer].buyables = getStartingBuyables(layer);
-		}, false);
-		for (let id in layer.buyables) {
-			if (isPlainObject(layer.buyables[id])) {
-				layer.buyables[id].amount = function() {
-					return playerProxy[layer.id].buyables[id];
-				}
-				layer.buyables[id].amountSet = function(amount) {
-					playerProxy[layer.id].buyables[id] = amount;
-				}
-				layer.buyables[id].canBuy = function() {
-					return !layer.deactivated && this.unlocked !== false && this.canAfford !== false &&
-						Decimal.lt(playerProxy[layer.id].buyables[id], this.purchaseLimit);
-				}
-				setDefault(layer.buyables[id], 'purchaseLimit', new Decimal(Infinity));
-				setDefault(layer.buyables[id], 'sellOne', null, false);
-				setDefault(layer.buyables[id], 'sellAll', null, false);
-				if (layer.buyables[id].cost != undefined) {
-					setDefault(layer.buyables[id], 'buy', function() {
-						if (this.canBuy) {
-							playerProxy[this.layer].points = playerProxy[this.layer].points.sub(this.cost());
-							this.amount = this.amount.add(1);
-						}
-					}, false);
-				}
-			}
-		}
-	}
-	if (layer.clickables) {
-		layer.clickables.layer = layer.id;
-		setDefault(layer.clickables, 'masterButtonClick', null, false);
-		if (layer.clickables.masterButtonDisplay != undefined) {
-			setDefault(layer.clickables, 'showMaster', true);
-		}
-		for (let id in layer.clickables) {
-			if (isPlainObject(layer.clickables[id])) {
-				layer.clickables[id].state = function() {
-					return playerProxy[layer.id].clickables[id];
-				}
-				layer.clickables[id].stateSet = function(state) {
-					playerProxy[layer.id].clickables[id] = state;
-				}
-				setDefault(layer.clickables[id], 'click', null, false);
-				setDefault(layer.clickables[id], 'hold', null, false);
-			}
-		}
-	}
-	if (layer.milestones) {
-		for (let id in layer.milestones) {
-			if (isPlainObject(layer.milestones[id])) {
-				layer.milestones[id].earned = function() {
-					return !layer.deactivated && playerProxy[layer.id].milestones.some(milestone => milestone == id);
-				}
-				layer.milestones[id].shown = function() {
-					if (!this.unlocked) {
-						return false;
-					}
-					switch (playerProxy.msDisplay) {
-						default:
-						case "all":
-							return true;
-						case "last":
-							return this.optionsDisplay || !this.earned ||
-								playerProxy[this.layer].milestones[playerProxy[this.layer].milestones.length - 1] === this.id;
-						case "configurable":
-							return this.optionsDisplay || !this.earned;
-						case "incomplete":
-							return !this.earned;
-						case "none":
-							return false;
-					}
-				}
-			}
-		}
-	}
-	if (layer.grids) {
-		for (let id in layer.grids) {
-			if (isPlainObject(layer.grids[id])) {
-				setDefault(player[layer.id].grids, id, {});
-				layer.grids[id].getData = function(cell) {
-					if (playerProxy[layer.id].grids[id][cell] != undefined) {
-						return playerProxy[layer.id].grids[id][cell];
-					}
-					if (isFunction(this.getStartData)) {
-						return this.getStartData(cell);
-					}
-					return this.getStartData;
-				}
-				layer.grids[id].dataSet = function(cell, data) {
-					playerProxy[layer.id].grids[id][cell] = data;
-				}
-				setDefault(layer.grids[id], 'getUnlocked', true, false);
-				setDefault(layer.grids[id], 'getCanClick', true, false);
-				setDefault(layer.grids[id], 'getStartData', "", false);
-				setDefault(layer.grids[id], 'getStyle', null, false);
-				setDefault(layer.grids[id], 'click', null, false);
-				setDefault(layer.grids[id], 'hold', null, false);
-				setDefault(layer.grids[id], 'getTitle', null, false);
-				setDefault(layer.grids[id], 'getDisplay', null, false);
-				layer.grids[id] = createGridProxy(layer.grids[id]);
-			}
-		}
-	}
-	if (layer.subtabs) {
-		layer.activeSubtab = function() {
-			if (layer.subtabs[playerProxy.subtabs[layer.id].mainTabs] &&
-				layer.subtabs[playerProxy.subtabs[layer.id].mainTabs].unlocked !== false) {
-				return layer.subtabs[playerProxy.subtabs[layer.id].mainTabs];
-			}
-			// Default to first unlocked tab
-			return Object.values(layer.subtabs).find(subtab => subtab.unlocked !== false);
-		}
-		setDefault(player, 'subtabs', {});
-		setDefault(player.subtabs, layer.id, {});
-		setDefault(player.subtabs[layer.id], 'mainTabs', Object.keys(layer.subtabs)[0]);
-		for (let id in layer.subtabs) {
-			if (isPlainObject(layer.subtabs[id])) {
-				layer.subtabs[id].active = function() {
-					return playerProxy.subtabs[this.layer].mainTabs === this.id;
-				}
-			}
-		}
-	}
-	if (layer.microtabs) {
-		setDefault(player, 'subtabs', {});
-		setDefault(player.subtabs, layer.id, {});
-		for (let family in layer.microtabs) {
-			layer.microtabs[family].activeMicrotab = function() {
-				if (this[playerProxy.subtabs[this.layer][family]] && this[playerProxy.subtabs[this.layer][family]].unlocked !== false) {
-					return this[playerProxy.subtabs[this.layer][family]];
-				}
-				// Default to first unlocked tab
-				return this[Object.keys(this).find(microtab => microtab !== 'activeMicrotab' && this[microtab].unlocked !== false)];
-			}
-			setDefault(player.subtabs[layer.id], family, Object.keys(layer.microtabs[family]).find(tab => tab !== 'activeMicrotab'));
-			layer.microtabs[family].layer = layer.id;
-			layer.microtabs[family].family = family;
-			for (let id in layer.microtabs[family]) {
-				if (isPlainObject(layer.microtabs[family][id])) {
-					layer.microtabs[family][id].layer = layer.id;
-					layer.microtabs[family][id].family = family;
-					layer.microtabs[family][id].id = id;
-					layer.microtabs[family][id].active = function() {
-						return playerProxy.subtabs[this.layer][this.family] === this.id;
-					}
-				}
-			}
-		}
-	}
-	if (layer.hotkeys) {
-		for (let id in layer.hotkeys) {
-			if (isPlainObject(layer.hotkeys[id])) {
-				setDefault(layer.hotkeys[id], 'press', null, false);
-				setDefault(layer.hotkeys[id], 'unlocked', function() {
-					return layer.unlocked;
-				});
-			}
-		}
-	}
-
-	// Create layer proxy
-	layer = createProxy(layer);
-
-	// Register layer
-	layers[layer.id] = layer;
-
-	// Register hotkeys
-	if (layer.hotkeys) {
-		for (let id in layer.hotkeys) {
-			hotkeys[layer.hotkeys[id].key] = layer.hotkeys[id];
-		}
-	}
-}
-
-export function removeLayer(layer) {
-	// Un-set hotkeys
-	if (layers[layer].hotkeys) {
-		for (let id in layers[layer].hotkeys) {
-			delete hotkeys[id];
-		}
-	}
-
-	delete layers[layer];
-}
-
-export function reloadLayer(layer) {
-	removeLayer(layer.id);
-
-	// Re-create layer
-	addLayer(layer);
-}
-
-const uncachedProperties = [ 'startData', 'click', 'update', 'reset', 'hardReset' ];
-const gridProperties = [ 'upgrades', 'achievements', 'challenges', 'buyables', 'clickables' ];
-const featureProperties = [ 'upgrades', 'achievements', 'challenges', 'buyables', 'clickables', 'milestones', 'bars',
-	'infoboxes', 'grids', 'hotkeys', 'subtabs' ];
-
-function setRowCol(features) {
-	if (features.rows && features.cols) {
-		return
-	}
-	let maxRow = 0;
-	let maxCol = 0;
-	for (let id in features) {
-		if (!isNaN(id)) {
-			if (Math.floor(id / 10) > maxRow) {
-				maxRow = Math.floor(id / 10);
-			}
-			if (id % 10 > maxCol) {
-				maxCol = id % 10;
-			}
-		}
-	}
-	features.rows = maxRow;
-	features.cols = maxCol;
-}
-
-function setupFeature(layer, features) {
-	features.layer = layer;
-	for (let id in features) {
-		const feature = features[id];
-		if (isPlainObject(feature)) {
-			feature.id = id;
-			feature.layer = layer;
-			if (feature.unlocked == undefined) {
-				feature.unlocked = true;
-			}
-		}
-	}
-}
-
-function setDefault(object, key, value, forceCached) {
-	if (object[key] == undefined && value != undefined) {
-		object[key] = value;
-	}
-	if (object[key] != undefined && isFunction(object[key]) && forceCached != undefined) {
-		object[key].forceCached = forceCached;
-	}
-}

src/game/layers.ts

@@ -0,0 +1,604 @@
+import { CacheableFunction } from "@/typings/cacheableFunction";
+import { Achievement } from "@/typings/features/achievement";
+import { Buyable } from "@/typings/features/buyable";
+import { Challenge } from "@/typings/features/challenge";
+import { Clickable } from "@/typings/features/clickable";
+import {
+    Feature,
+    Features,
+    GridFeatures,
+    RawFeature,
+    RawFeatures,
+    RawGridFeatures
+} from "@/typings/features/feature";
+import { Grid } from "@/typings/features/grid";
+import { Hotkey } from "@/typings/features/hotkey";
+import { Milestone } from "@/typings/features/milestone";
+import { Microtab, Subtab } from "@/typings/features/subtab";
+import { Upgrade } from "@/typings/features/upgrade";
+import { Layer, RawLayer } from "@/typings/layer";
+import { PlayerData } from "@/typings/player";
+import { State } from "@/typings/state";
+import Decimal, { DecimalSource } from "@/util/bignum";
+import { isFunction } from "@/util/common";
+import {
+    defaultLayerProperties,
+    getStartingBuyables,
+    getStartingChallenges,
+    getStartingClickables,
+    noCache
+} from "@/util/layers";
+import { createGridProxy, createLayerProxy } from "@/util/proxies";
+import { applyPlayerData } from "@/util/save";
+import clone from "lodash.clonedeep";
+import { isRef } from "vue";
+import { default as playerProxy } from "./player";
+
+export const layers: Record<string, Readonly<Layer>> = {};
+export const hotkeys: Hotkey[] = [];
+window.layers = layers;
+
+export function addLayer(layer: RawLayer, player?: Partial<PlayerData>): void {
+    player = player || playerProxy;
+
+    // Check for required properties
+    if (!("id" in layer)) {
+        console.error(`Cannot add layer without a "id" property!`, layer);
+        return;
+    }
+    if (layer.type === "static" || layer.type === "normal") {
+        const missingProperty = ["baseAmount", "requires"].find(prop => !(prop in layer));
+        if (missingProperty) {
+            console.error(`Cannot add layer without a "${missingProperty}" property!`, layer);
+            return;
+        }
+    }
+
+    // Clone object to prevent modifying the original
+    layer = clone(layer);
+
+    setDefault(player, "layers", {});
+    player.layers![layer.id] = applyPlayerData(
+        {
+            points: new Decimal(0),
+            unlocked: false,
+            resetTime: new Decimal(0),
+            upgrades: [],
+            achievements: [],
+            milestones: [],
+            infoboxes: {},
+            buyables: getStartingBuyables(layer.buyables?.data),
+            clickables: getStartingClickables(layer.clickables?.data),
+            challenges: getStartingChallenges(layer.challenges?.data),
+            grids: {},
+            confirmRespecBuyables: false,
+            ...(layer.startData?.() || {})
+        },
+        player.layers![layer.id]
+    );
+
+    // Set default property values
+    layer = Object.assign({}, defaultLayerProperties, layer);
+    layer.layer = layer.id;
+    if (layer.type === "static" && layer.base == undefined) {
+        layer.base = 2;
+    }
+
+    // Process each feature
+    const uncachedProperties = ["startData", "click", "update", "reset", "hardReset"];
+    for (const property of uncachedProperties) {
+        if (layer[property] && !isRef(layer.property) && isFunction(layer[property])) {
+            (layer[property] as CacheableFunction).forceCached = false;
+        }
+    }
+    if (layer.upgrades) {
+        setupFeatures<
+            RawGridFeatures<GridFeatures<Upgrade>, Upgrade>,
+            GridFeatures<Upgrade>,
+            Upgrade
+        >(layer.id, layer.upgrades!);
+        setRowCol(layer.upgrades);
+        for (const id in layer.upgrades.data) {
+            layer.upgrades.data[id].bought = function() {
+                return (
+                    !layers[this.layer].deactivated &&
+                    playerProxy.layers[this.layer].upgrades.some(
+                        (upgrade: string | number) => upgrade == id
+                    )
+                );
+            };
+            setDefault(layer.upgrades.data[id], "canAfford", function() {
+                if (this.currencyInternalName) {
+                    const name = this.currencyInternalName;
+                    if (this.currencyLocation) {
+                        return !Decimal.lt(this.currencyLocation[name], this.cost);
+                    } else if (this.currencyLayer) {
+                        return !Decimal.lt(
+                            playerProxy.layers[this.currencyLayer][name] as DecimalSource,
+                            this.cost
+                        );
+                    } else {
+                        return !Decimal.lt(playerProxy[name] as DecimalSource, this.cost);
+                    }
+                } else {
+                    return !playerProxy.layers[this.layer].points.lt(this.cost);
+                }
+            });
+            setDefault(
+                layer.upgrades.data[id],
+                "pay",
+                function() {
+                    if (this.bought || !this.canAfford) {
+                        return;
+                    }
+                    if (this.currencyInternalName) {
+                        const name = this.currencyInternalName;
+                        if (this.currencyLocation) {
+                            if (Decimal.lt(this.currencyLocation[name], this.cost)) {
+                                return;
+                            }
+                            this.currencyLocation[name] = Decimal.sub(
+                                this.currencyLocation[name],
+                                this.cost
+                            );
+                        } else if (this.currencyLayer) {
+                            const lr = this.currencyLayer;
+                            if (
+                                Decimal.lt(playerProxy.layers[lr][name] as DecimalSource, this.cost)
+                            ) {
+                                return;
+                            }
+                            playerProxy.layers[lr][name] = Decimal.sub(
+                                playerProxy.layers[lr][name] as DecimalSource,
+                                this.cost
+                            );
+                        } else {
+                            if (Decimal.lt(playerProxy[name] as DecimalSource, this.cost)) {
+                                return;
+                            }
+                            playerProxy[name] = Decimal.sub(
+                                playerProxy[name] as DecimalSource,
+                                this.cost
+                            );
+                        }
+                    } else {
+                        if (playerProxy.layers[this.layer].points.lt(this.cost)) {
+                            return;
+                        }
+                        playerProxy.layers[this.layer].points = playerProxy.layers[
+                            this.layer
+                        ].points.sub(this.cost);
+                    }
+                },
+                false
+            );
+            setDefault(
+                layer.upgrades.data[id],
+                "buy",
+                function() {
+                    if (this.bought || !this.canAfford) {
+                        return;
+                    }
+                    this.pay();
+                    playerProxy.layers[this.layer].upgrades.push(this.id);
+                    this.onPurchase?.();
+                },
+                false
+            );
+            setDefault(layer.upgrades.data[id], "onPurchase", undefined, false);
+        }
+    }
+    if (layer.achievements) {
+        setupFeatures<
+            RawGridFeatures<GridFeatures<Achievement>, Achievement>,
+            GridFeatures<Achievement>,
+            Achievement
+        >(layer.id, layer.achievements!);
+        setRowCol(layer.achievements);
+        for (const id in layer.achievements.data) {
+            layer.achievements.data[id].earned = function() {
+                return (
+                    !layers[this.layer].deactivated &&
+                    playerProxy.layers[this.layer].achievements.some(
+                        (achievement: string | number) => achievement == id
+                    )
+                );
+            };
+            setDefault(layer.achievements.data[id], "onComplete", undefined, false);
+        }
+    }
+    if (layer.challenges) {
+        setupFeatures<
+            RawGridFeatures<GridFeatures<Challenge>, Challenge>,
+            GridFeatures<Challenge>,
+            Challenge
+        >(layer.id, layer.challenges);
+        setRowCol(layer.challenges);
+        layer.activeChallenge = function() {
+            return Object.values(this.challenges!.data).find(
+                (challenge: Challenge) => challenge.active
+            );
+        };
+        for (const id in layer.challenges.data) {
+            layer.challenges.data[id].shown = function() {
+                return (
+                    this.unlocked !== false && (playerProxy.hideChallenges === false || !this.maxed)
+                );
+            };
+            layer.challenges.data[id].completed = function() {
+                return (
+                    !layers[this.layer].deactivated &&
+                    playerProxy.layers[this.layer].challenges[id]?.gt(0)
+                );
+            };
+            layer.challenges.data[id].completions = function() {
+                return playerProxy.layers[this.layer].challenges[id];
+            };
+            layer.challenges.data[id].maxed = function() {
+                return (
+                    !layers[this.layer].deactivated &&
+                    Decimal.gte(playerProxy.layers[this.layer].challenges[id], this.completionLimit)
+                );
+            };
+            layer.challenges.data[id].active = function() {
+                return (
+                    !layers[this.layer].deactivated &&
+                    playerProxy.layers[this.layer].activeChallenge === id
+                );
+            };
+            layer.challenges.data[id].toggle = noCache(function(this: Challenge) {
+                const exiting = playerProxy.layers[this.layer].activeChallenge === id;
+                if (exiting) {
+                    if (this.canComplete && !this.maxed) {
+                        let completions: boolean | DecimalSource = this.canComplete;
+                        if (completions === true) {
+                            completions = 1;
+                        }
+                        playerProxy.layers[this.layer].challenges[id] = Decimal.min(
+                            playerProxy.layers[this.layer].challenges[id].add(completions),
+                            this.completionLimit
+                        );
+                        this.onComplete?.();
+                    }
+                    playerProxy.layers[this.layer].activeChallenge = null;
+                    this.onExit?.();
+                    layers[this.layer].reset(true);
+                } else if (!exiting && this.canStart) {
+                    layers[this.layer].reset(true);
+                    playerProxy.layers[this.layer].activeChallenge = id;
+                    this.onEnter?.();
+                }
+            });
+            setDefault(layer.challenges.data[id], "onComplete", undefined, false);
+            setDefault(layer.challenges.data[id], "onEnter", undefined, false);
+            setDefault(layer.challenges.data[id], "onExit", undefined, false);
+            setDefault(layer.challenges.data[id], "canStart", true);
+            setDefault(layer.challenges.data[id], "completionLimit", new Decimal(1));
+            setDefault(layer.challenges.data[id], "mark", function() {
+                return Decimal.gt(this.completionLimit, 1) && this.maxed;
+            });
+            setDefault(layer.challenges.data[id], "canComplete", function() {
+                if (!this.active) {
+                    return false;
+                }
+                if (this.currencyInternalName) {
+                    const name = this.currencyInternalName;
+                    if (this.currencyLocation) {
+                        return !Decimal.lt(this.currencyLocation[name], this.goal);
+                    } else if (this.currencyLayer) {
+                        const lr = this.currencyLayer;
+                        return !Decimal.lt(
+                            playerProxy.layers[lr][name] as DecimalSource,
+                            this.goal
+                        );
+                    } else {
+                        return !Decimal.lt(playerProxy[name] as DecimalSource, this.goal);
+                    }
+                } else {
+                    return !playerProxy.points.lt(this.goal);
+                }
+            });
+        }
+    }
+    if (layer.buyables) {
+        setupFeatures<
+            RawGridFeatures<GridFeatures<Buyable>, Buyable>,
+            GridFeatures<Buyable>,
+            Buyable
+        >(layer.id, layer.buyables);
+        setRowCol(layer.buyables);
+        setDefault(layer.buyables, "respec", undefined, false);
+        setDefault(
+            layer.buyables,
+            "reset",
+            function(this: NonNullable<Layer["buyables"]>) {
+                playerProxy.layers[this.layer].buyables = getStartingBuyables(layer.buyables?.data);
+            },
+            false
+        );
+        for (const id in layer.buyables.data) {
+            layer.buyables.data[id].amount = function() {
+                return playerProxy.layers[this.layer].buyables[id];
+            };
+            layer.buyables.data[id].amountSet = function(amount: Decimal) {
+                playerProxy.layers[this.layer].buyables[id] = amount;
+            };
+            layer.buyables.data[id].canBuy = function() {
+                return (
+                    !layers[this.layer].deactivated &&
+                    this.unlocked !== false &&
+                    this.canAfford !== false &&
+                    Decimal.lt(playerProxy.layers[this.layer].buyables[id], this.purchaseLimit)
+                );
+            };
+            setDefault(layer.buyables.data[id], "purchaseLimit", new Decimal(Infinity));
+            setDefault(layer.buyables.data[id], "sellOne", undefined, false);
+            setDefault(layer.buyables.data[id], "sellAll", undefined, false);
+            if (layer.buyables.data[id].cost != undefined) {
+                setDefault(
+                    layer.buyables.data[id],
+                    "buy",
+                    function() {
+                        if (this.canBuy) {
+                            playerProxy.layers[this.layer].points = playerProxy.layers[
+                                this.layer
+                            ].points.sub(this.cost!);
+                            this.amount = this.amount.add(1);
+                        }
+                    },
+                    false
+                );
+            }
+        }
+    }
+    if (layer.clickables) {
+        setupFeatures<
+            RawGridFeatures<GridFeatures<Clickable>, Clickable>,
+            GridFeatures<Clickable>,
+            Clickable
+        >(layer.id, layer.clickables);
+        setRowCol(layer.clickables);
+        setDefault(layer.clickables, "masterButtonClick", undefined, false);
+        if (layer.clickables.masterButtonDisplay != undefined) {
+            setDefault(layer.clickables, "showMasterButton", true);
+        }
+        for (const id in layer.clickables.data) {
+            layer.clickables.data[id].state = function() {
+                return playerProxy.layers[this.layer].clickables[id];
+            };
+            layer.clickables.data[id].stateSet = function(state: State) {
+                playerProxy.layers[this.layer].clickables[id] = state;
+            };
+            setDefault(layer.clickables.data[id], "canClick", true);
+            setDefault(layer.clickables.data[id], "click", undefined, false);
+            setDefault(layer.clickables.data[id], "hold", undefined, false);
+        }
+    }
+    if (layer.milestones) {
+        setupFeatures<RawFeatures<Features<Milestone>, Milestone>, Features<Milestone>, Milestone>(
+            layer.id,
+            layer.milestones
+        );
+        for (const id in layer.milestones.data) {
+            layer.milestones.data[id].earned = function() {
+                return (
+                    !layer.deactivated &&
+                    playerProxy.layers[this.layer].milestones.some(
+                        (milestone: string | number) => milestone == id
+                    )
+                );
+            };
+            layer.milestones.data[id].shown = function() {
+                if (!this.unlocked) {
+                    return false;
+                }
+                switch (playerProxy.msDisplay) {
+                    default:
+                    case "all":
+                        return true;
+                    case "last":
+                        return (
+                            this.optionsDisplay ||
+                            !this.earned ||
+                            playerProxy.layers[this.layer].milestones[
+                                playerProxy.layers[this.layer].milestones.length - 1
+                            ] === this.id
+                        );
+                    case "configurable":
+                        return this.optionsDisplay || !this.earned;
+                    case "incomplete":
+                        return !this.earned;
+                    case "none":
+                        return false;
+                }
+            };
+            setDefault(layer.milestones.data[id], "done", false);
+        }
+    }
+    if (layer.grids) {
+        setupFeatures<RawFeatures<Features<Grid>, Grid>, Features<Grid>, Grid>(
+            layer.id,
+            layer.grids
+        );
+        for (const id in layer.grids.data) {
+            setDefault(player.layers![layer.id].grids, id, {});
+            layer.grids.data[id].getData = function(cell): State {
+                if (playerProxy.layers[this.layer].grids[id][cell] != undefined) {
+                    return playerProxy.layers[this.layer].grids[id][cell];
+                }
+                if (isFunction(this.getStartData)) {
+                    return (this.getStartData as (this: Grid, cell: string | number) => State)(
+                        cell
+                    );
+                }
+                return this.getStartData;
+            };
+            layer.grids.data[id].setData = function(cell, data) {
+                playerProxy.layers[this.layer].grids[id][cell] = data;
+            };
+            setDefault(layer.grids.data[id], "getUnlocked", true, false);
+            setDefault(layer.grids.data[id], "getCanClick", true, false);
+            setDefault(layer.grids.data[id], "getStartData", "", false);
+            setDefault(layer.grids.data[id], "getStyle", undefined, false);
+            setDefault(layer.grids.data[id], "click", undefined, false);
+            setDefault(layer.grids.data[id], "hold", undefined, false);
+            setDefault(layer.grids.data[id], "getTitle", undefined, false);
+            layer.grids.data[id] = createGridProxy(layer.grids.data[id]) as Grid;
+        }
+    }
+    if (layer.subtabs) {
+        layer.activeSubtab = function() {
+            if (
+                layers[this.layer].subtabs![playerProxy.subtabs[this.layer].mainTabs!] &&
+                layers[this.layer].subtabs![playerProxy.subtabs[this.layer].mainTabs!].unlocked !==
+                    false
+            ) {
+                return layers[this.layer].subtabs![playerProxy.subtabs[this.layer].mainTabs!];
+            }
+            // Default to first unlocked tab
+            return Object.values(layers[this.layer].subtabs!).find(
+                (subtab: Subtab) => subtab.unlocked !== false
+            );
+        };
+        setDefault(player, "subtabs", {});
+        setDefault(player.subtabs!, layer.id, {});
+        setDefault(player.subtabs![layer.id], "mainTabs", Object.keys(layer.subtabs)[0]);
+        for (const id in layer.subtabs) {
+            layer.subtabs[id].active = function() {
+                return playerProxy.subtabs[this.layer].mainTabs === this.id;
+            };
+        }
+    }
+    if (layer.microtabs) {
+        setDefault(player, "subtabs", {});
+        setDefault(player.subtabs!, layer.id, {});
+        for (const family in layer.microtabs) {
+            if (Object.keys(layer.microtabs[family]).length === 0) {
+                console.warn(
+                    "Cannot create microtab family with 0 tabs",
+                    layer.id,
+                    family,
+                    layer.microtabs[family]
+                );
+                continue;
+            }
+            layer.microtabs[family].activeMicrotab = function() {
+                if (
+                    this.data[playerProxy.subtabs[this.layer as string][family]] &&
+                    this.data[playerProxy.subtabs[this.layer as string][family]].unlocked !== false
+                ) {
+                    return this[playerProxy.subtabs[this.layer as string][family]];
+                }
+                // Default to first unlocked tab
+                const firstUnlocked: string | undefined = Object.keys(this).find(
+                    microtab =>
+                        microtab !== "activeMicrotab" && this.data[microtab].unlocked !== false
+                );
+                return firstUnlocked != undefined ? this[firstUnlocked] : undefined;
+            };
+            setDefault(
+                player.subtabs![layer.id],
+                family,
+                Object.keys(layer.microtabs[family]).find(tab => tab !== "activeMicrotab")!
+            );
+            layer.microtabs[family].layer = layer.id;
+            layer.microtabs[family].family = family;
+            for (const id in layer.microtabs[family].data) {
+                const microtab: RawFeature<Microtab> = layer.microtabs[family].data[id];
+                microtab.layer = layer.id;
+                microtab.family = family;
+                microtab.id = id;
+                microtab.active = function() {
+                    return playerProxy.subtabs[this.layer][this.family] === this.id;
+                };
+            }
+        }
+    }
+    if (layer.hotkeys) {
+        for (const id in layer.hotkeys) {
+            setDefault(layer.hotkeys[id], "press", undefined, false);
+            setDefault(layer.hotkeys[id], "unlocked", function() {
+                return layers[this.layer].unlocked;
+            });
+        }
+    }
+
+    // Create layer proxy
+    layer = createLayerProxy(layer) as Layer;
+
+    // Register layer
+    layers[layer.id] = layer as Layer;
+
+    // Register hotkeys
+    if (layers[layer.id].hotkeys) {
+        for (const hotkey of layers[layer.id].hotkeys!) {
+            hotkeys.push(hotkey);
+        }
+    }
+}
+
+export function removeLayer(layer: string): void {
+    // Un-set hotkeys
+    if (layers[layer].hotkeys) {
+        for (const hotkey of Object.values(layers[layer].hotkeys!)) {
+            const index = hotkeys.indexOf(hotkey);
+            if (index >= 0) {
+                hotkeys.splice(index, 1);
+            }
+        }
+    }
+
+    delete layers[layer];
+}
+
+export function reloadLayer(layer: Layer): void {
+    removeLayer(layer.id);
+
+    // Re-create layer
+    addLayer(layer);
+}
+
+function setRowCol<T extends GridFeatures<S>, S extends Feature>(features: RawGridFeatures<T, S>) {
+    if (features.rows && features.cols) {
+        return;
+    }
+    let maxRow = 0;
+    let maxCol = 0;
+    for (const id in features) {
+        const index = Number(id);
+        if (!isNaN(index)) {
+            if (Math.floor(index / 10) > maxRow) {
+                maxRow = Math.floor(index / 10);
+            }
+            if (index % 10 > maxCol) {
+                maxCol = index % 10;
+            }
+        }
+    }
+    features.rows = maxRow;
+    features.cols = maxCol;
+}
+
+function setupFeatures<T extends RawFeatures<R, S>, R extends Features<S>, S extends Feature>(
+    layer: string,
+    features: T
+) {
+    features.layer = layer;
+    for (const id in features.data) {
+        const feature = features.data[id];
+        (feature as Feature).id = id;
+        (feature as Feature).layer = layer;
+        if (feature.unlocked == undefined) {
+            (feature as Feature).unlocked = true;
+        }
+    }
+}
+
+function setDefault<T, K extends keyof T>(object: T, key: K, value: T[K], forceCached?: boolean) {
+    if (object[key] == undefined && value != undefined) {
+        object[key] = value;
+    }
+    if (object[key] != undefined && isFunction(object[key]) && forceCached != undefined) {
+        Object.assign(object[key], { forceCached });
+    }
+}

src/game/player.js

@@ -1,52 +0,0 @@
-import { reactive } from 'vue';
-import { isPlainObject } from '../util/common';
-import Decimal from '../util/bignum';
-
-const state = reactive({});
-
-const playerHandler = {
-	get(target, key) {
-		if (key === '__state' || key === '__path') {
-			return target[key];
-		}
-		if (target.__state[key] == undefined) {
-			return;
-		}
-		if (isPlainObject(target.__state[key]) && !(target.__state[key] instanceof Decimal)) {
-			if (target.__state[key] !== target[key]?.__state) {
-				const path = [ ...target.__path, key ];
-				target[key] = new Proxy({ __state: target.__state[key], __path: path }, playerHandler);
-			}
-			return target[key];
-		}
-
-		return target.__state[key];
-	},
-	set(target, property, value, receiver) {
-		if (!state.hasNaN && ((typeof value === 'number' && isNaN(value)) || (value instanceof Decimal && (isNaN(value.sign) || isNaN(value.layer) || isNaN(value.mag))))) {
-			const currentValue = target.__state[property];
-			if (!((typeof currentValue === 'number' && isNaN(currentValue)) || (currentValue instanceof Decimal && (isNaN(currentValue.sign) || isNaN(currentValue.layer) || isNaN(currentValue.mag))))) {
-				state.autosave = false;
-				state.hasNaN = true;
-				state.NaNPath = [ ...target.__path, property ];
-				state.NaNReceiver = receiver;
-				console.error(`Attempted to set NaN value`, [ ...target.__path, property ], target.__state);
-				throw 'Attempted to set NaN value. See above for details';
-			}
-		}
-		target.__state[property] = value;
-		if (property === 'points') {
-			if (target.__state.best != undefined) {
-				target.__state.best = Decimal.max(target.__state.best, value);
-			}
-			if (target.__state.total != undefined) {
-				const diff = Decimal.sub(value, target.__state.points);
-				if (diff.gt(0)) {
-					target.__state.total = target.__state.total.add(diff);
-				}
-			}
-		}
-		return true;
-	}
-};
-export default window.player = new Proxy({ __state: state, __path: [ 'player' ] }, playerHandler);

src/game/player.ts

@@ -0,0 +1,112 @@
+import { Themes } from "@/data/themes";
+import { PlayerData } from "@/typings/player";
+import Decimal from "@/util/bignum";
+import { isPlainObject } from "@/util/common";
+import { reactive } from "vue";
+import { ImportingStatus, MilestoneDisplay } from "./enums";
+
+const state = reactive<PlayerData>({
+    id: "",
+    points: new Decimal(0),
+    oomps: new Decimal(0),
+    oompsMag: 0,
+    name: "",
+    tabs: [],
+    time: -1,
+    autosave: true,
+    offlineProd: true,
+    offlineTime: null,
+    timePlayed: new Decimal(0),
+    keepGoing: false,
+    lastTenTicks: [],
+    showTPS: true,
+    msDisplay: MilestoneDisplay.All,
+    hideChallenges: false,
+    theme: Themes.Paper,
+    subtabs: {},
+    minimized: {},
+    modID: "",
+    modVersion: "",
+    hasNaN: false,
+    NaNPath: [],
+    NaNReceiver: null,
+    importing: ImportingStatus.NotImporting,
+    saveToImport: "",
+    saveToExport: "",
+    layers: {}
+});
+
+const playerHandler: ProxyHandler<Record<string, any>> = {
+    get(target: Record<string, any>, key: string): any {
+        if (key === "__state" || key === "__path") {
+            return target[key];
+        }
+        if (target.__state[key] == undefined) {
+            return;
+        }
+        if (isPlainObject(target.__state[key]) && !(target.__state[key] instanceof Decimal)) {
+            if (target.__state[key] !== target[key]?.__state) {
+                const path = [...target.__path, key];
+                target[key] = new Proxy(
+                    { __state: target.__state[key], __path: path },
+                    playerHandler
+                );
+            }
+            return target[key];
+        }
+
+        return target.__state[key];
+    },
+    set(
+        target: Record<string, any>,
+        property: string,
+        value: any,
+        receiver: ProxyConstructor
+    ): boolean {
+        if (
+            !state.hasNaN &&
+            ((typeof value === "number" && isNaN(value)) ||
+                (value instanceof Decimal &&
+                    (isNaN(value.sign) || isNaN(value.layer) || isNaN(value.mag))))
+        ) {
+            const currentValue = target.__state[property];
+            if (
+                !(
+                    (typeof currentValue === "number" && isNaN(currentValue)) ||
+                    (currentValue instanceof Decimal &&
+                        (isNaN(currentValue.sign) ||
+                            isNaN(currentValue.layer) ||
+                            isNaN(currentValue.mag)))
+                )
+            ) {
+                state.autosave = false;
+                state.hasNaN = true;
+                state.NaNPath = [...target.__path, property];
+                state.NaNReceiver = (receiver as unknown) as Record<string, unknown>;
+                console.error(
+                    `Attempted to set NaN value`,
+                    [...target.__path, property],
+                    target.__state
+                );
+                throw "Attempted to set NaN value. See above for details";
+            }
+        }
+        target.__state[property] = value;
+        if (property === "points") {
+            if (target.__state.best != undefined) {
+                target.__state.best = Decimal.max(target.__state.best, value);
+            }
+            if (target.__state.total != undefined) {
+                const diff = Decimal.sub(value, target.__state.points);
+                if (diff.gt(0)) {
+                    target.__state.total = target.__state.total.add(diff);
+                }
+            }
+        }
+        return true;
+    }
+};
+export default window.player = new Proxy(
+    { __state: state, __path: ["player"] },
+    playerHandler
+) as PlayerData;

src/main.js

@@ -1,22 +0,0 @@
-import { createApp } from 'vue';
-import App from './App';
-import { load } from './util/save';
-import { setVue } from './util/vue';
-import gameLoop from './game/gameLoop';
-import { registerComponents } from './components/index';
-import modInfo from './data/modInfo.json';
-
-requestAnimationFrame(async () => {
-	await load();
-
-	// Create Vue
-	const vue = window.vue = createApp({
-		...App
-	});
-	setVue(vue);
-	registerComponents(vue);
-	vue.mount('#app');
-	document.title = modInfo.title;
-
-	gameLoop();
-});

src/main.ts

@@ -0,0 +1,22 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import { load } from "./util/save";
+import { setVue } from "./util/vue";
+import gameLoop from "./game/gameLoop";
+import { registerComponents } from "./components/index";
+import modInfo from "./data/modInfo.json";
+
+requestAnimationFrame(async () => {
+    await load();
+
+    // Create Vue
+    const vue = (window.vue = createApp({
+        ...App
+    }));
+    setVue(vue);
+    registerComponents(vue);
+    vue.mount("#app");
+    document.title = modInfo.title;
+
+    gameLoop();
+});

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { defineComponent } from 'vue';
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}

src/typings/branches.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPublicInstance } from "vue";
+
+export interface BranchLink {
+    start: string;
+    end: string;
+    options: string | BranchOptions;
+}
+
+export interface BranchNode {
+    x?: number;
+    y?: number;
+    component: ComponentPublicInstance;
+    element: HTMLElement;
+}
+
+export interface BranchOptions {
+    target?: string;
+    featureType?: string;
+    stroke?: string;
+    "stroke-width"?: string;
+    startOffset?: Position;
+    endOffset?: Position;
+}
+
+export interface Position {
+    x: number;
+    y: number;
+}

src/typings/cacheableFunction.d.ts

@@ -0,0 +1,3 @@
+export interface CacheableFunction extends Function {
+    forceCached?: boolean;
+}

src/typings/component.d.ts

@@ -0,0 +1,3 @@
+import { ComponentOptions } from "vue";
+
+export type CoercableComponent = string | ComponentOptions;

src/typings/computable.d.ts

@@ -0,0 +1,5 @@
+export type Computable<T> = {
+    [K in keyof T]:
+        | ((this: T) => T[K])
+        | (NonNullable<T[K]> extends (..._: infer A) => infer R ? (this: T, ..._: A) => R : T[K]);
+};