Fix various issues from typescript update

src/components/features/Achievements.vue

@@ -1,47 +1,30 @@
 <template>
-    <div v-if="filteredAchievements" class="table">
+    <div v-if="filtered" class="table">
-        <template v-if="filteredAchievements.rows && filteredAchievements.cols">
+        <template v-if="rows && cols">
-            <div v-for="row in filteredAchievements.rows" class="row" :key="row">
+            <div v-for="row in rows" class="row" :key="row">
-                <div v-for="col in filteredAchievements.cols" :key="col">
+                <div v-for="col in cols" :key="col">
                     <achievement
-                        v-if="filteredAchievements[row * 10 + col] !== undefined"
+                        v-if="filtered[row * 10 + col] !== undefined"
                         class="align"
                         :id="row * 10 + col"
                     />
                 </div>
             </div>
         </template>
-        <template v-frag v-else>
+        <row v-else>
-            <achievement v-for="(achievement, id) in filteredAchievements" :key="id" :id="id" />
+            <achievement v-for="(achievement, id) in filtered" :key="id" :id="id" />
-        </template>
+        </row>
     </div>
 </template>
 
 <script lang="ts">
-import { layers } from "@/game/layers";
 import { Achievement } from "@/typings/features/achievement";
-import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
-import { defineComponent, PropType } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
     name: "achievements",
-    mixins: [InjectLayerMixin],
+    mixins: [InjectLayerMixin, FilteredFeaturesMixin<Achievement>("achievements")]
-    props: {
-        achievements: {
-            type: Object as PropType<Array<string>>
-        }
-    },
-    computed: {
-        filteredAchievements(): Record<string, Achievement> {
-            if (layers[this.layer].achievements) {
-                return getFiltered<Achievement>(
-                    layers[this.layer].achievements!.data,
-                    this.achievements
-                );
-            }
-            return {};
-        }
-    }
 });
 </script>
 

src/components/features/Buyables.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="filteredBuyables" class="table">
+    <div v-if="filtered" class="table">
         <respec-button
             v-if="showRespec"
             style="margin-bottom: 12px;"
@@ -8,11 +8,11 @@
             @set-confirm-respec="setConfirmRespec"
             @respec="respec"
         />
-        <template v-if="filteredBuyables.rows && filteredBuyables.cols">
+        <template v-if="rows && cols">
-            <div v-for="row in filteredBuyables.rows" class="row" :key="row">
+            <div v-for="row in rows" class="row" :key="row">
-                <div v-for="col in filteredBuyables.cols" :key="col">
+                <div v-for="col in cols" :key="col">
                     <buyable
-                        v-if="filteredBuyables[row * 10 + col] !== undefined"
+                        v-if="filtered[row * 10 + col] !== undefined"
                         class="align buyable-container"
                         :style="{ height }"
                         :id="row * 10 + col"
@@ -23,7 +23,7 @@
         </template>
         <row v-else>
             <buyable
-                v-for="(buyable, id) in filteredBuyables"
+                v-for="(buyable, id) in filtered"
                 :key="id"
                 class="align buyable-container"
                 :style="{ height }"
@@ -39,28 +39,19 @@ import { layers } from "@/game/layers";
 import player from "@/game/player";
 import { CoercableComponent } from "@/typings/component";
 import { Buyable } from "@/typings/features/buyable";
-import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
-import { defineComponent, PropType } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
     name: "buyables",
-    mixins: [InjectLayerMixin],
+    mixins: [InjectLayerMixin, FilteredFeaturesMixin<Buyable>("buyables")],
     props: {
-        buyables: {
-            type: Object as PropType<Array<string>>
-        },
         height: {
             type: [Number, String],
             default: "inherit"
         }
     },
     computed: {
-        filteredBuyables(): Record<string, Buyable> {
-            if (layers[this.layer].buyables) {
-                return getFiltered<Buyable>(layers[this.layer].buyables!.data, this.buyables);
-            }
-            return {};
-        },
         showRespec(): boolean | undefined {
             return layers[this.layer].buyables!.showRespecButton;
         },

src/components/features/Challenges.vue

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

src/components/features/Clickables.vue

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

src/components/features/GridCell.vue

@@ -1,9 +1,9 @@
 <template>
     <button
-        v-if="gridable.unlocked"
+        v-if="gridCell.unlocked"
         :class="{ feature: true, tile: true, can: canClick, locked: !canClick }"
         :style="style"
-        @click="gridable.click"
+        @click="gridCell.click"
         @mousedown="start"
         @mouseleave="stop"
         @mouseup="stop"
@@ -14,7 +14,7 @@
     >
         <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" />
+        <branch-node :branches="gridCell.branches" :id="id" featureType="gridCell" />
     </button>
 </template>
 

src/components/features/Milestones.vue

@@ -1,31 +1,17 @@
 <template>
-    <div v-if="filteredMilestones" class="table">
+    <div v-if="filtered" class="table">
-        <milestone v-for="(milestone, id) in filteredMilestones" :key="id" :id="id" />
+        <milestone v-for="(milestone, id) in filtered" :key="id" :id="id" />
     </div>
 </template>
 
 <script lang="ts">
-import { layers } from "@/game/layers";
 import { Milestone } from "@/typings/features/milestone";
-import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
-import { defineComponent, PropType } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
     name: "milestones",
-    mixins: [InjectLayerMixin],
+    mixins: [InjectLayerMixin, FilteredFeaturesMixin<Milestone>("milestones")]
-    props: {
-        milestones: {
-            type: Object as PropType<Array<string>>
-        }
-    },
-    computed: {
-        filteredMilestones(): Record<string, Milestone> {
-            if (layers[this.layer].milestones) {
-                return getFiltered<Milestone>(layers[this.layer].milestones!.data, this.milestones);
-            }
-            return {};
-        }
-    }
 });
 </script>
 

src/components/features/Upgrades.vue

@@ -1,10 +1,10 @@
 <template>
-    <div v-if="filteredUpgrades" class="table">
+    <div v-if="filtered" class="table">
-        <template v-if="filteredUpgrades.rows && filteredUpgrades.cols">
+        <template v-if="rows && cols">
-            <div v-for="row in filteredUpgrades.rows" class="row" :key="row">
+            <div v-for="row in rows" class="row" :key="row">
-                <div v-for="col in filteredUpgrades.cols" :key="col">
+                <div v-for="col in cols" :key="col">
                     <upgrade
-                        v-if="filteredUpgrades[row * 10 + col] !== undefined"
+                        v-if="filtered[row * 10 + col] !== undefined"
                         class="align"
                         :id="row * 10 + col"
                     />
@@ -12,33 +12,19 @@
             </div>
         </template>
         <row v-else>
-            <upgrade v-for="(upgrade, id) in filteredUpgrades" :key="id" class="align" :id="id" />
+            <upgrade v-for="(upgrade, id) in filtered" :key="id" class="align" :id="id" />
         </row>
     </div>
 </template>
 
 <script lang="ts">
-import { layers } from "@/game/layers";
 import { Upgrade } from "@/typings/features/upgrade";
-import { getFiltered, InjectLayerMixin } from "@/util/vue";
+import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
-import { defineComponent, PropType } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
     name: "upgrades",
-    mixins: [InjectLayerMixin],
+    mixins: [InjectLayerMixin, FilteredFeaturesMixin<Upgrade>("upgrades")]
-    props: {
-        upgrades: {
-            type: Object as PropType<Array<string>>
-        }
-    },
-    computed: {
-        filteredUpgrades(): Record<string, Upgrade> {
-            if (layers[this.layer].upgrades) {
-                return getFiltered<Upgrade>(layers[this.layer].upgrades!.data, this.upgrades);
-            }
-            return {};
-        }
-    }
 });
 </script>
 

src/components/fields/Toggle.vue

@@ -36,6 +36,7 @@ input {
 
 span {
     width: 100%;
+    position: relative;
 }
 
 /* track */
@@ -55,7 +56,7 @@ span::before {
 span::after {
     content: "";
     position: absolute;
-    top: 6px;
+    top: 2px;
     right: 16px;
     border-radius: 50%;
     width: 20px;

src/components/system/LayerProvider.vue

@@ -3,21 +3,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, reactive } from "vue";
 
 export default defineComponent({
     name: "LayerProvider",
     provide() {
         return {
-            tab: {
+            tab: reactive({
                 layer: this.layer,
                 index: this.index
-            }
+            })
         };
     },
     props: {
         layer: String,
         index: Number
+    },
+    watch: {
+        layer(layer) {
+            this.$.provides.tab.layer = layer;
+        },
+        index(index) {
+            this.$.provides.tab.index = index;
+        }
     }
 });
 </script>

src/components/system/VerticalRule.vue

@@ -18,6 +18,6 @@ export default defineComponent({
     width: 4px;
     background: var(--separator);
     height: 100%;
-    margin: 0 7px;
+    margin: auto 7px;
 }
 </style>

src/data/mod.ts

@@ -84,6 +84,15 @@ const main = {
 			({{ player.oompsMag != 0 ? format(player.oomps) + " OOM" + (player.oompsMag < 0 ? "^OOM" : player.oompsMag > 1 ? "^" + player.oompsMag : "") + "s" : formatSmall(pointGain) }}/sec)
 		</div>
 		<spacer />
+        <modal :show="false">
+            <svg style="height: 80vmin; width: 80vmin;">
+                <path d="M 32 222 Q 128 222, 128 0 Q 128 222, 224 222 L 224 224 L 32 224"/>
+
+                <circle cx="64" cy="128" r="64" fill="#8da8b0"/>
+                <circle cx="128" cy="64" r="64" fill="#71368a"/>
+                <circle cx="192" cy="128" r="64" fill="#fa8508"/>
+            </svg>
+        </modal>
 		<tree :append="true" />`,
     name: "Tree"
 } as RawLayer;

src/typings/player.d.ts

@@ -54,9 +54,9 @@ export interface LayerSaveData {
     unlockOrder?: number;
     forceTooltip?: boolean;
     resetTime: Decimal;
-    upgrades: Array<string>;
+    upgrades: Array<string | number>;
-    achievements: Array<string>;
+    achievements: Array<string | number>;
-    milestones: Array<string>;
+    milestones: Array<string | number>;
     infoboxes: Record<string, boolean>;
     buyables: Record<string, Decimal>;
     clickables: Record<string, State>;

src/util/vue.ts

@@ -1,7 +1,9 @@
 import { hasWon, pointGain } from "@/data/mod";
 import { layers } from "@/game/layers";
 import player from "@/game/player";
-import { App, Component, ComponentOptions, defineComponent, inject } from "vue";
+import { Feature, Features, GridFeatures } from "@/typings/features/feature";
+import { Layer } from "@/typings/layer";
+import { App, Component, ComponentOptions, defineComponent, inject, PropType } from "vue";
 import Decimal, * as numberUtils from "./bignum";
 import {
     achievementEffect,
@@ -112,3 +114,48 @@ export const InjectLayerMixin = {
         }
     }
 };
+
+export function FilteredFeaturesMixin<T extends Feature>(
+    feature: keyof Layer
+): {
+    mixins: [typeof InjectLayerMixin];
+    props: {
+        [feature]: {
+            type: PropType<Array<string>>;
+        };
+    };
+    computed: {
+        filtered: () => Record<string, T> | undefined;
+        rows: () => number | undefined;
+        cols: () => number | undefined;
+    };
+} {
+    return {
+        mixins: [InjectLayerMixin],
+        props: {
+            [feature]: {
+                type: Object as PropType<Array<string>>
+            }
+        },
+        computed: {
+            filtered(this: { layer: string; [feature]: string[] }) {
+                return (
+                    (layers[this.layer][feature] as Features<T> | undefined) &&
+                    getFiltered((layers[this.layer][feature] as Features<T>).data, this[feature])
+                );
+            },
+            rows(this: { layer: string }) {
+                return (
+                    (layers[this.layer][feature] as Features<T> | undefined) &&
+                    (layers[this.layer][feature] as Features<T> | GridFeatures<T>).rows
+                );
+            },
+            cols(this: { layer: string }) {
+                return (
+                    (layers[this.layer][feature] as Features<T> | undefined) &&
+                    (layers[this.layer][feature] as Features<T> | GridFeatures<T>).cols
+                );
+            }
+        }
+    };
+}