Merge branch 'main' into day-20-factory

.eslintrc.js

@@ -11,7 +11,8 @@ module.exports = {
         "@vue/eslint-config-prettier"
     ],
     parserOptions: {
-        ecmaVersion: 2020
+        ecmaVersion: 2020,
+        project: "tsconfig.json"
     },
     ignorePatterns: ["src/lib"],
     rules: {
@@ -19,7 +20,14 @@ module.exports = {
         "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
         "vue/script-setup-uses-vars": "warn",
         "vue/no-mutating-props": "off",
-        "vue/multi-word-component-names": "off"
+        "vue/multi-word-component-names": "off",
+        "@typescript-eslint/strict-boolean-expressions": [
+            "error",
+            {
+                allowNullableObject: true,
+                allowNullableBoolean: true
+            }
+        ]
     },
     globals: {
         defineProps: "readonly",

src/App.vue

@@ -32,7 +32,7 @@ const theme = computed(() => themes[settings.theme].variables as CSSProperties);
 const showTPS = toRef(settings, "showTPS");
 
 const gameComponent = computed(() => {
-    return coerceComponent(jsx(() => <>{gameComponents.map(render)}</>));
+    return coerceComponent(jsx(() => (<>{gameComponents.map(render)}</>)));
 });
 </script>
 

src/components/Info.vue

@@ -80,7 +80,7 @@ const isOpen = ref(false);
 const timePlayed = computed(() => formatTime(player.timePlayed));
 
 const infoComponent = computed(() => {
-    return coerceComponent(jsx(() => <>{infoComponents.map(render)}</>));
+    return coerceComponent(jsx(() => (<>{infoComponents.map(render)}</>)));
 });
 
 defineExpose({

src/components/Layer.vue

@@ -12,9 +12,7 @@
             </Context>
         </div>
 
-        <button v-if="unref(minimizable)" class="minimize" @click="setMinimized(true)">
+        <button v-if="unref(minimizable)" class="minimize" @click="setMinimized(true)">▼</button>
-            ▼
-        </button>
     </div>
 </template>
 
@@ -114,7 +112,6 @@ export default defineComponent({
             }
         }
 
-
         return {
             component,
             minimizedComponent,
@@ -124,7 +121,7 @@ export default defineComponent({
             goBack,
             setMinimized,
             minimized,
-            minWidth,
+            minWidth
         };
     }
 });

src/components/Modal.vue

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

src/components/NaNScreen.vue

@@ -62,7 +62,7 @@ const savesManager = ref<ComponentPublicInstance<typeof SavesManager> | null>(nu
 const path = computed(() => state.NaNPath?.join("."));
 const property = computed(() => state.NaNPath?.slice(-1)[0]);
 const previous = computed<DecimalSource | null>(() => {
-    if (state.NaNReceiver && property.value) {
+    if (state.NaNReceiver && property.value != null) {
         return state.NaNReceiver[property.value] as DecimalSource;
     }
     return null;
@@ -77,21 +77,21 @@ const isPaused = computed({
 });
 
 function setZero() {
-    if (state.NaNReceiver && property.value) {
+    if (state.NaNReceiver && property.value != null) {
         state.NaNReceiver[property.value] = new Decimal(0);
         state.hasNaN = false;
     }
 }
 
 function setOne() {
-    if (state.NaNReceiver && property.value) {
+    if (state.NaNReceiver && property.value != null) {
         state.NaNReceiver[property.value] = new Decimal(1);
         state.hasNaN = false;
     }
 }
 
 function ignore() {
-    if (state.NaNReceiver && property.value) {
+    if (state.NaNReceiver && property.value != null) {
         state.NaNReceiver[property.value] = new Decimal(NaN);
         state.hasNaN = false;
     }

src/components/Options.vue

@@ -81,7 +81,7 @@ const themes = Object.keys(rawThemes).map(theme => ({
 }));
 
 const settingFieldsComponent = computed(() => {
-    return coerceComponent(jsx(() => <>{settingFields.map(render)}</>));
+    return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
 });
 
 const { showTPS, theme, usingLog, alignUnits } = toRefs(settings);

src/components/Save.vue

@@ -107,11 +107,11 @@ const isEditing = ref(false);
 const isConfirming = ref(false);
 const newName = ref("");
 
-watch(isEditing, () => (newName.value = save.value.name || ""));
+watch(isEditing, () => (newName.value = save.value.name ?? ""));
 
-const isActive = computed(() => save.value && save.value.id === player.id);
+const isActive = computed(() => save.value != null && save.value.id === player.id);
 const currentTime = computed(() =>
-    isActive.value ? player.time : (save.value && save.value.time) || 0
+    isActive.value ? player.time : (save.value != null && save.value.time) ?? 0
 );
 
 const progressDisplay = computeComponent(

src/components/SavesManager.vue

@@ -281,7 +281,7 @@ function newFromPreset(preset: string) {
 
 function editSave(id: string, newName: string) {
     const currSave = saves.value[id];
-    if (currSave) {
+    if (currSave != null) {
         currSave.name = newName;
         if (player.id === id) {
             player.name = newName;

src/components/fields/Slider.vue

@@ -26,7 +26,7 @@ const emit = defineEmits<{
 
 const value = computed({
     get() {
-        return String(unref(props.modelValue) || 0);
+        return String(unref(props.modelValue) ?? 0);
     },
     set(value: string) {
         emit("update:modelValue", Number(value));

src/components/fields/Text.vue

@@ -55,7 +55,7 @@ onMounted(() => {
 
 const value = computed({
     get() {
-        return unref(props.modelValue) || "";
+        return unref(props.modelValue) ?? "";
     },
     set(value: string) {
         emit("update:modelValue", value);

src/components/fields/Toggle.vue

@@ -19,7 +19,7 @@ const emit = defineEmits<{
     (e: "update:modelValue", value: boolean): void;
 }>();
 
-const component = computed(() => coerceComponent(unref(props.title) || "<span></span>", "span"));
+const component = computed(() => coerceComponent(unref(props.title) ?? "<span></span>", "span"));
 
 const value = computed({
     get() {

src/components/math/Sqrt.vue

@@ -1,6 +1,8 @@
 <template>
     <span style="white-space: nowrap">
-        <span style="font-size: larger; font-family: initial">&radic;</span
+        <span style="font-size: larger; font-family: initial">&radic;</span>
-        ><div style="display: inline-block; border-top: 1px solid; padding-left: .2em"><slot /></div>
+        <div style="display: inline-block; border-top: 1px solid; padding-left: 0.2em">
+            <slot />
+        </div>
     </span>
 </template>

src/data/Day.vue

@@ -48,16 +48,15 @@
 <script setup lang="ts">
 import Notif from "components/Notif.vue";
 import Tooltip from "features/tooltips/Tooltip.vue";
-import Decimal from "util/bignum";
 import { layers } from "game/layers";
-import { Direction } from "util/common";
+import Decimal from "util/bignum";
 import { formatTime } from "util/break_eternity";
+import { Direction } from "util/common";
 import { ProcessedComputable } from "util/computed";
-import { Ref, Transition } from "vue";
+import { computed, Ref, Transition, unref } from "vue";
-import { computed, unref } from "vue";
-import { main } from "./projEntry";
 import coal from "./layers/coal";
 import dyes from "./layers/dyes";
+import { main } from "./projEntry";
 
 const props = defineProps<{
     day: number;
@@ -77,7 +76,7 @@ const emit = defineEmits<{
 
 const canOpen = computed(
     () =>
-        props.layer &&
+        props.layer != null &&
         Decimal.gte(main.day.value, props.day) &&
         new Date().getMonth() === 11 &&
         new Date().getDate() >= props.day
@@ -88,14 +87,14 @@ const includeMastery = computed(
     () =>
         props.mastered.value ||
         main.currentlyMastering.value == layers[props.layer ?? ""] ||
-        ["wrappingPaper", "ribbon"].includes(props.layer || "") ||
+        ["wrappingPaper", "ribbon"].includes(props.layer ?? "") ||
         (coal.mastered.value && props.layer == "elves") ||
         (dyes.mastered.value && props.layer == "elves")
 );
 const masteryLock = computed(() => isMastering.value && !includeMastery.value);
 
 function tryUnlock() {
-    if (canOpen.value) {
+    if (canOpen.value === true) {
         emit("unlockLayer");
     }
 }

src/data/Scene.vue

@@ -58,6 +58,7 @@
             <img v-if="day >= 10" :src="dyes" class="scene-item" />
             <img v-if="day >= 14" :src="wrappingPaper" class="scene-item" />
             <img v-if="day >= 15" :src="ribbons" class="scene-item" />
+            <img v-if="day >= 16" :src="toys" class="scene-item" />
         </div>
     </div>
 </template>
@@ -79,6 +80,7 @@ import advManagement from "./symbols/workshopMansion.png";
 import letters from "./symbols/letterbox.png";
 import wrappingPaper from "./symbols/wrappingPaper.png";
 import ribbons from "./symbols/ribbons.png";
+import toys from "./symbols/truck.png";
 
 defineProps<{
     day: number;

src/data/common.tsx

@@ -1,4 +1,5 @@
 import Collapsible from "components/layout/Collapsible.vue";
+import "data/layers/styles/day-gradients.css";
 import { createBar } from "features/bars/bar";
 import { GenericBuyable } from "features/buyable";
 import type { Clickable, ClickableOptions, GenericClickable } from "features/clickables/clickable";
@@ -16,14 +17,12 @@ import { GenericMilestone } from "features/milestones/milestone";
 import { displayResource, Resource, trackTotal } from "features/resources/resource";
 import type { GenericTree, GenericTreeNode, TreeNode, TreeNodeOptions } from "features/trees/tree";
 import { createTreeNode } from "features/trees/tree";
-import { BaseLayer, Layer } from "game/layers";
 import type { Modifier } from "game/modifiers";
 import type { Persistent } from "game/persistence";
 import { DefaultValue, persistent } from "game/persistence";
 import player from "game/player";
 import settings from "game/settings";
-import { DecimalSource, formatSmall } from "util/bignum";
+import Decimal, { DecimalSource, format, formatSmall } from "util/bignum";
-import Decimal, { format } from "util/bignum";
 import { formatWhole } from "util/break_eternity";
 import { Direction, WithRequired } from "util/common";
 import type {
@@ -34,10 +33,8 @@ import type {
 } from "util/computed";
 import { convertComputable, processComputable } from "util/computed";
 import { getFirstFeature, render, renderColJSX, renderJSX, VueFeature } from "util/vue";
-import { Ref, watchEffect } from "vue";
+import { computed, Ref, unref, watchEffect } from "vue";
-import { computed, unref } from "vue";
 import "./common.css";
-import "data/layers/styles/day-gradients.css";
 import { main } from "./projEntry";
 
 /** An object that configures a {@link ResetButton} */
@@ -138,7 +135,7 @@ export function createResetButton<T extends ClickableOptions & ResetButtonOption
                         )}
                     </b>{" "}
                     {resetButton.conversion.gainResource.displayName}
-                    {unref(resetButton.showNextAt) ? (
+                    {unref(resetButton.showNextAt) != null ? (
                         <div>
                             <br />
                             {unref(resetButton.conversion.buyMax) ? "Next:" : "Req:"}{" "}
@@ -167,7 +164,7 @@ export function createResetButton<T extends ClickableOptions & ResetButtonOption
 
         const onClick = resetButton.onClick;
         resetButton.onClick = function () {
-            if (!unref(resetButton.canClick)) {
+            if (unref(resetButton.canClick) === false) {
                 return;
             }
             resetButton.conversion.convert();
@@ -311,7 +308,7 @@ export function createCollapsibleModifierSections(
                         ▼
                     </span>
                     {s.title}
-                    {s.subtitle ? <span class="subtitle"> ({s.subtitle})</span> : null}
+                    {s.subtitle != null ? <span class="subtitle"> ({s.subtitle})</span> : null}
                 </h3>
             );
 
@@ -338,7 +335,8 @@ export function createCollapsibleModifierSections(
                     {hasPreviousSection ? <br /> : null}
                     <div
                         style={{
-                            "--unit": settings.alignUnits && s.unit ? "'" + s.unit + "'" : ""
+                            "--unit":
+                                settings.alignUnits && s.unit != null ? "'" + s.unit + "'" : ""
                         }}
                     >
                         {header}
@@ -455,7 +453,7 @@ export function setUpDailyProgressTracker(options: {
             animation: options.background.duration + " " + options.background.gradient + " linear infinite",
         },
         /* eslint-enable prettier/prettier */
-        textStyle: options.textColor ? { color: options.textColor } : undefined,
+        textStyle: options.textColor != null ? { color: options.textColor } : undefined,
         progress: progressFunc,
         display: jsx(() =>
             main.day.value === options.day ||

src/data/layers/dyes.tsx

@@ -35,6 +35,7 @@ import management from "./management";
 import oil from "./oil";
 import paper from "./paper";
 import trees from "./trees";
+import toys from "./toys";
 
 interface Dye {
     name: string;
@@ -373,6 +374,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
             enabled: main.days[day - 1].opened
         }));
 
+        const visibility = convertComputable(options.visibility ?? Visibility.Visible);
+
         return {
             name: options.name,
             amount,
@@ -380,7 +383,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
             hotkey,
             toGenerate,
             computedToGenerate,
-            display: jsx(() => (
+            display: jsx(() =>
+                unref(visibility) === Visibility.Visible ? (
                     <MainDisplay
                         resource={amount}
                         color={options.color}
@@ -388,7 +392,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
                         style="margin: 0; width: 200px; width: 180px; padding: 10px;"
                         sticky={false}
                     />
-            ))
+                ) : (
+                    ""
+                )
+            )
         };
     }
 
@@ -494,12 +501,12 @@ const layer = createLayer(id, function (this: BaseLayer) {
             key: "a",
             costs: () => [
                 {
-                    base: "1e42",
+                    base: "1e60",
                     root: 5,
                     res: trees.logs
                 },
                 {
-                    base: computed(() => (upgrades.yellowDyeUpg2.bought.value ? "1e15" : "2e15")),
+                    base: computed(() => (upgrades.yellowDyeUpg2.bought.value ? "1e17" : "2e17")),
                     root: 2,
                     res: oil.oil
                 }
@@ -507,10 +514,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             listedBoosts: [
                 {
                     visible: true,
-                    desc: computed(() => `*${format(boosts.black1.value)} letters processed.`)
+                    desc: computed(() => `*${format(boosts.black1.value)} oil gain.`)
                 }
             ],
-            dyesToReset: []
+            dyesToReset: [],
+            visibility: () => showIf(toys.milestones.milestone2.earned.value)
         }),
         orange: createDye({
             name: "Orange Dye",

src/data/layers/letters.tsx

@@ -79,7 +79,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 processingProgress.value,
                 computedProcessingCooldown.value
             ).floor();
-            letters.value = Decimal.times(amount, computedLettersGain.value).add(letters.value);
+            letters.value = Decimal.times(amount, computedLettersGain.value)
+                .add(letters.value)
+                .min(8e9);
             processingProgress.value = 0;
         }
     }));
@@ -215,12 +217,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         createMultiplicativeModifier(() => ({
             multiplier: () => Decimal.div(paperBuyable.amount.value, 2).add(1),
             description: "Printed Labels"
-        })),
-        createMultiplicativeModifier(() => ({
-            multiplier: () => dyes.boosts.black1.value,
-            description: "Black Dye Boost"
         }))
-        
     ]);
     const computedLettersGain = computed(() => lettersGain.apply(1));
     const processingCooldown = createSequentialModifier(() => [

src/data/layers/oil.tsx

@@ -40,6 +40,7 @@ import management from "./management";
 import workshop from "./workshop";
 import { WithRequired } from "util/common";
 import { ElfBuyable } from "./elves";
+import toys from "./toys";
 
 const id = "oil";
 const day = 9;
@@ -947,6 +948,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
             multiplier: 2,
             description: "Cocoa Level 3",
             enabled: management.elfTraining.oilElfTraining.milestones[2].earned
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: () => dyes.boosts.black1.value,
+            description: "Black Dye Boost"
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 50,
+            description: "350 toys",
+            enabled: toys.milestones.milestone4.earned
         }))
     ]) as WithRequired<Modifier, "description" | "revert">;
     const computedOilSpeed = computed(() => oilSpeed.apply(0));

src/data/layers/plastic.tsx

@@ -36,6 +36,7 @@ import metal from "./metal";
 import oil from "./oil";
 import paper from "./paper";
 import workshop from "./workshop";
+import toys from "./toys";
 
 const id = "plastic";
 const day = 10;
@@ -373,6 +374,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             multiplier: () => Decimal.div(buildRefinery.amount.value, 100).add(1),
             description: "Tinsel Level 4",
             enabled: management.elfTraining.plasticElfTraining.milestones[3].earned
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 50,
+            description: "350 toys",
+            enabled: toys.milestones.milestone4.earned
         }))
     ]);
     const computedPlasticGain = computed(() => plasticGain.apply(0));

src/data/layers/ribbon.tsx

@@ -41,7 +41,10 @@ const layer = createLayer(id, () => {
         )
     );
     const currentDyeType = computed(
-        () => Object.values(dyes.dyes)[new Decimal(ribbon.value).toNumber() % 6]
+        () =>
+            Object.values(dyes.dyes).filter(d => d !== dyes.dyes.black)[
+                new Decimal(ribbon.value).toNumber() % 6
+            ]
     );
 
     const ribbonProgress = persistent<DecimalSource>(0);
@@ -60,8 +63,20 @@ const layer = createLayer(id, () => {
             title: "Make Ribbon",
             description: jsx(() => (
                 <>
-                    Create another ribbon with {format(currentDyeCost.value)}{" "}
+                    Create another ribbon with{" "}
-                    {currentDyeType.value.name} and {format(1e9)} {cloth.cloth.displayName}
+                    <span
+                        class={
+                            Decimal.lt(currentDyeType.value.amount.value, currentDyeCost.value)
+                                ? "unaffordable"
+                                : ""
+                        }
+                    >
+                        {format(currentDyeCost.value)} {currentDyeType.value.name}
+                    </span>{" "}
+                    and{" "}
+                    <span class={Decimal.lt(cloth.cloth.value, 1e9) ? "unaffordable" : ""}>
+                        {format(1e9)} {cloth.cloth.displayName}
+                    </span>
                     <br />
                     {render(ribbonProgressBar)}
                 </>

src/data/layers/toys.tsx

@@ -4,49 +4,38 @@
  */
 import Spacer from "components/layout/Spacer.vue";
 import Modal from "components/Modal.vue";
-import { main } from "data/projEntry";
-import { createBar } from "features/bars/bar";
 import {
     createCollapsibleMilestones,
     createCollapsibleModifierSections,
     setUpDailyProgressTracker
 } from "data/common";
+import { main } from "data/projEntry";
 import { createBuyable, GenericBuyable } from "features/buyable";
-import { createClickable } from "features/clickables/clickable";
 import { jsx, showIf } from "features/feature";
-import { createHotkey } from "features/hotkey";
-import MainDisplay from "features/resources/MainDisplay.vue";
 import { createMilestone } from "features/milestones/milestone";
-import { createResource, Resource } from "features/resources/resource";
+import MainDisplay from "features/resources/MainDisplay.vue";
+import { createResource } from "features/resources/resource";
 import { createUpgrade } from "features/upgrades/upgrade";
 import { globalBus } from "game/events";
 import { BaseLayer, createLayer } from "game/layers";
-import {
+import { createSequentialModifier } from "game/modifiers";
-    createAdditiveModifier,
+import { noPersist } from "game/persistence";
-    createExponentialModifier,
+import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
-    createMultiplicativeModifier,
-    createSequentialModifier,
-    Modifier
-} from "game/modifiers";
-import { noPersist, persistent } from "game/persistence";
-import Decimal, { DecimalSource, format, formatGain, formatLimit, formatWhole } from "util/bignum";
-import { Direction, WithRequired } from "util/common";
 import { render, renderGrid, renderRow } from "util/vue";
 import { computed, ref } from "vue";
+import cloth from "./cloth";
+import dyes from "./dyes";
 import metal from "./metal";
 import plastic from "./plastic";
-import cloth from "./cloth";
 import trees from "./trees";
-import dyes from "./dyes";
-import paper from "./paper";
 import workshop from "./workshop";
+
 const id = "toys";
 const day = 17;
 
 const layer = createLayer(id, function (this: BaseLayer) {
     const name = "Toys";
-    const colorBright = "#4BDC13";
+    const color = "cornflowerblue";
-    const colorDark = "green";
 
     const clothes = createResource<DecimalSource>(0, "clothes");
     const woodenBlocks = createResource<DecimalSource>(0, " wooden blocks");
@@ -59,14 +48,14 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const clothesCost = computed(() => {
         let clothFactor = Decimal.add(1, clothesBuyable.amount.value);
-        if (milestones.milestone1.earned) {
+        if (milestones.milestone1.earned.value) {
             clothFactor = clothFactor.div(
                 Decimal.div(workshop.foundationProgress.value, 100).floor()
             );
         }
         return {
-            cloth: clothFactor.mul(1e8),
+            cloth: clothFactor.mul(1e13),
-            dye: clothFactor.mul(1e6)
+            dye: clothFactor.mul(2e14)
         };
     });
     const clothesBuyable = createBuyable(() => ({
@@ -79,8 +68,28 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <div>You have {formatWhole(clothes.value)} clothes.</div>
 
                 <div>
-                    Costs {format(clothesCost.value.cloth)} cloth and requires{" "}
+                    Costs{" "}
+                    <span
+                        class={
+                            Decimal.lt(cloth.cloth.value, clothesCost.value.cloth)
+                                ? "unaffordable"
+                                : ""
+                        }
+                    >
+                        {format(clothesCost.value.cloth)} cloth
+                    </span>{" "}
+                    and requires{" "}
+                    <span
+                        class={
+                            [dyes.dyes.red, dyes.dyes.yellow, dyes.dyes.blue].some(d =>
+                                Decimal.lt(d.amount.value, clothesCost.value.dye)
+                            )
+                                ? "unaffordable"
+                                : ""
+                        }
+                    >
                         {format(clothesCost.value.dye)} of red, yellow, and blue dye
+                    </span>
                 </div>
             </>
         )),
@@ -100,13 +109,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
     })) as GenericBuyable;
     const woodenBlocksCost = computed(() => {
         let woodFactor = Decimal.add(1, woodenBlocksBuyable.amount.value).pow(5);
-        if (milestones.milestone1.earned) {
+        if (milestones.milestone1.earned.value) {
             woodFactor = woodFactor.div(
                 Decimal.div(workshop.foundationProgress.value, 100).floor()
             );
         }
         return {
-            wood: woodFactor.mul(1e40)
+            wood: woodFactor.mul(1e63)
         };
     });
     const woodenBlocksBuyable = createBuyable(() => ({
@@ -133,15 +142,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
     const trucksCost = computed(() => {
         let factor = Decimal.add(1, trucksBuyable.amount.value).pow(3);
         let plasticFactor = Decimal.add(1, trucksBuyable.amount.value);
-        if (milestones.milestone1.earned) {
+        if (milestones.milestone1.earned.value) {
             factor = factor.div(Decimal.div(workshop.foundationProgress.value, 100).floor());
             plasticFactor = plasticFactor.div(
                 Decimal.div(workshop.foundationProgress.value, 100).floor()
             );
         }
         return {
-            metal: factor.mul(1e25),
+            metal: factor.mul(1e43),
-            plastic: plasticFactor.mul(1e10)
+            plastic: plasticFactor.mul(1e14)
         };
     });
     const trucksBuyable = createBuyable(() => ({
@@ -154,8 +163,26 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <div>You have {formatWhole(trucks.value)} trucks.</div>
 
                 <div>
-                    Costs {format(trucksCost.value.metal)} metal and{" "}
+                    Costs{" "}
+                    <span
+                        class={
+                            Decimal.lt(metal.metal.value, trucksCost.value.metal)
+                                ? "unaffordable"
+                                : ""
+                        }
+                    >
+                        {format(trucksCost.value.metal)} metal
+                    </span>{" "}
+                    and{" "}
+                    <span
+                        class={
+                            Decimal.lt(plastic.plastic.value, trucksCost.value.plastic)
+                                ? "unaffordable"
+                                : ""
+                        }
+                    >
                         {format(trucksCost.value.plastic)} plastic
+                    </span>
                 </div>
             </>
         )),
@@ -213,9 +240,27 @@ const layer = createLayer(id, function (this: BaseLayer) {
             requirement: "100 toys",
             effectDisplay: "Unlock black dyes."
         },
-        shouldEarn: () => Decimal.gte(toySum.value, 100)
+        shouldEarn: () => Decimal.gte(toySum.value, 100),
+        visibility: () => showIf(milestone1.earned.value)
     }));
-    const milestones = { milestone1, milestone2 };
+
+    const milestone3 = createMilestone(() => ({
+        display: {
+            requirement: "200 toys",
+            effectDisplay: "Beach wrapping paper is much more powerful."
+        },
+        shouldEarn: () => Decimal.gte(toySum.value, 200),
+        visibility: () => showIf(milestone2.earned.value)
+    }));
+    const milestone4 = createMilestone(() => ({
+        display: {
+            requirement: "350 toys",
+            effectDisplay: "Gain 50x oil and plastic."
+        },
+        shouldEarn: () => Decimal.gte(toySum.value, 350),
+        visibility: () => showIf(milestone3.earned.value)
+    }));
+    const milestones = { milestone1, milestone2, milestone3, milestone4 };
     const { collapseMilestones, display: milestonesDisplay } =
         createCollapsibleMilestones(milestones);
 
@@ -256,7 +301,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const { total: totalToys, trackerDisplay } = setUpDailyProgressTracker({
         resource: toySum,
-        goal: 200,
+        goal: 500,
         name,
         day,
         background: {
@@ -272,7 +317,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
     return {
         name,
         day,
-        color: colorBright,
+        color,
         clothes,
         woodenBlocks,
         trucks,
@@ -290,19 +335,19 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <Spacer />
                 <MainDisplay
                     resource={clothes}
-                    color={colorBright}
+                    color="lightblue"
                     style="margin-bottom: 0"
                     productionDisplay={undefined}
                 />
                 <MainDisplay
                     resource={woodenBlocks}
-                    color={colorDark}
+                    color="cornflowerblue"
                     style="margin-bottom: 0"
                     productionDisplay={undefined}
                 />
                 <MainDisplay
                     resource={trucks}
-                    color={colorDark}
+                    color="cadetblue"
                     style="margin-bottom: 0"
                     productionDisplay={undefined}
                 />
@@ -311,6 +356,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <Spacer />
                 {renderGrid(row1Upgrades)}
                 <Spacer />
+                <div>You have {formatWhole(toySum.value)} toys</div>
                 {milestonesDisplay()}
             </>
         )),

src/data/layers/trees.tsx

@@ -404,7 +404,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         createAdditiveModifier(() => ({
             addend: 1,
             description: "Automated Spade",
-            enabled: autoPlantUpgrade1.bought.value
+            enabled: autoPlantUpgrade1.bought
         })),
         createAdditiveModifier(() => ({
             addend: () => Decimal.div(autoPlantingBuyable1.amount.value, 2),

src/data/layers/workshop.tsx

@@ -49,7 +49,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         scaling: addHardcap(
             addSoftcap(addSoftcap(createPolynomialScaling(250, 1.5), 5423, 1 / 1e10), 1e20, 3e8),
             computed(() =>
-                toys.row1Upgrades[2].bought
+                toys.row1Upgrades[2].bought.value
                     ? 1200
                     : management.elfTraining.expandersElfTraining.milestones[2].earned.value
                     ? 1000
@@ -74,6 +74,16 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 exponent: 1 / 0.99,
                 description: "Holly Level 5",
                 enabled: management.elfTraining.cutterElfTraining.milestones[4].earned
+            })),
+            createExponentialModifier(() => ({
+                exponent: 0.1,
+                description: "Scaling Jump at 1000%",
+                enabled: computed(() => Decimal.gte(foundationProgress.value, 1000))
+            })),
+            createMultiplicativeModifier(() => ({
+                multiplier: 6969, // note: 6969 is a magic number. Don't touch this or it'll self-destruct.
+                description: "Scaling Jump at 1000%",
+                enabled: computed(() => Decimal.gte(foundationProgress.value, 1000))
             }))
         ])
     }));
@@ -89,12 +99,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <br />
                 <span style="font-size: large">
                     {masteryEffectActive.value ? "Requirement" : "Cost"}:{" "}
-                    {displayResource(
+                    {displayResource(trees.logs, foundationConversion.nextAt.value)}{" "}
-                        trees.logs,
-                        Decimal.gte(foundationConversion.actualGain.value, 1)
-                            ? foundationConversion.currentAt.value
-                            : foundationConversion.nextAt.value
-                    )}{" "}
                     {trees.logs.displayName}
                 </span>
             </>

src/data/layers/wrapping-paper.tsx

@@ -16,6 +16,7 @@ import { computed, Ref, unref, watchEffect } from "vue";
 import { main } from "../projEntry";
 import { default as dyes, type enumColor } from "./dyes";
 import elves from "./elves";
+import toys from "./toys";
 
 const id = "wrappingPaper";
 const day = 15;
@@ -277,7 +278,10 @@ const layer = createLayer(id, () => {
         beach1: computed(() =>
             main.isMastery.value
                 ? 1
-                : Decimal.add(wrappingPaper.beach.buyable.amount.value, 1).log10().add(1)
+                : Decimal.add(wrappingPaper.beach.buyable.amount.value, 1)
+                      .log10()
+                      .add(1)
+                      .pow(toys.milestones.milestone3.earned.value ? 1.6 : 1)
         )
     };
     const wrappingPaperSum = createResource(

src/data/projEntry.tsx

@@ -49,6 +49,7 @@ import paperSymbol from "./symbols/paperStacks.png";
 import plasticSymbol from "./symbols/plastic.png";
 import ribbonsSymbol from "./symbols/ribbons.png";
 import workshopSymbol from "./symbols/sws.png";
+import toysSymbol from "./symbols/truck.png";
 import treeSymbol from "./symbols/tree.png";
 import advManagementSymbol from "./symbols/workshopMansion.png";
 import wrappingPaperSymbol from "./symbols/wrappingPaper.png";
@@ -244,7 +245,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
                             }
                         },
                         onUnlockLayer() {
-                            if (layer) {
+                            if (layer != null) {
                                 opened.value = true;
                                 setTimeout(() => {
                                     loreScene.value = -1;
@@ -437,10 +438,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
         createDay(() => ({
             day: 17,
             shouldNotify: false,
-            layer: "toys", // "toys1"
+            layer: "toys",
-            symbol: "",
+            symbol: toysSymbol,
-            story: "",
+            story: "You've had enough of this running around and stalling - it is time to create some toys NOW! You have everything you need and then some, so let's finally just sit down and get this process started!",
-            completedStory: "",
+            completedStory:
+                "In your haste you may have been a bit wasteful with resources, but it feels really good to finally make some meaningful process on making toys for Santa. You already envision plans on how to get elves to help you out and start pumping out these toys, but for now... Good Job!",
             masteredStory: ""
         })),
         createDay(() => ({
@@ -558,10 +560,10 @@ export const main = createLayer("main", function (this: BaseLayer) {
         display: jsx(() => (
             <>
                 {player.devSpeed === 0 ? <div>Game Paused</div> : null}
-                {player.devSpeed && player.devSpeed !== 1 ? (
+                {player.devSpeed != null && player.devSpeed !== 1 ? (
                     <div>Dev Speed: {format(player.devSpeed)}x</div>
                 ) : null}
-                {player.offlineTime ? (
+                {player.offlineTime != null && player.offlineTime !== 0 ? (
                     <div>Offline Time: {formatTime(player.offlineTime)}</div>
                 ) : null}
                 <Spacer />
@@ -635,29 +637,5 @@ export function fixOldSave(
     oldVersion: string | undefined,
     player: Partial<PlayerData>
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-): void {
+): void {}
-    if (!["0.0", "0.1", "0.2", "0.3", "0.4"].includes(oldVersion ?? "")) {
-        return;
-    }
-    if ((player.layers?.workshop as LayerData<typeof workshop> | undefined)?.foundationProgress) {
-        (player.layers?.workshop as LayerData<typeof workshop> | undefined)!.foundationProgress =
-            Decimal.min(
-                (player.layers!.workshop as LayerData<typeof workshop> | undefined)!
-                    .foundationProgress!,
-                1000
-            );
-    }
-    /*player.offlineProd = false;
-    delete player.layers?.management;
-    if ((player.layers?.main as LayerData<typeof main> | undefined)?.days?.[11]) {
-        (player.layers!.main as LayerData<typeof main>).days![11].opened = false;
-    }
-    if ((player.layers?.main as LayerData<typeof main> | undefined)?.day === 12) {
-        (player.layers!.main as LayerData<typeof main>).day === 11;
-        player.devSpeed = 0;
-    }
-    if (player.tabs) {
-        player.tabs = player.tabs.filter(l => l !== "management");
-    }*/
-}
 /* eslint-enable @typescript-eslint/no-unused-vars */

src/features/achievements/achievement.tsx

@@ -109,7 +109,7 @@ export function createAchievement<T extends AchievementOptions>(
                 ) {
                     genericAchievement.earned.value = true;
                     genericAchievement.onComplete?.();
-                    if (genericAchievement.display) {
+                    if (genericAchievement.display != null) {
                         const Display = coerceComponent(unref(genericAchievement.display));
                         toast.info(
                             <div>

src/features/bars/bar.ts

@@ -1,5 +1,11 @@
 import BarComponent from "features/bars/Bar.vue";
-import type { CoercableComponent, GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
 import type { DecimalSource } from "util/bignum";
 import { Direction } from "util/common";

src/features/boards/Board.vue

@@ -210,7 +210,7 @@ function drag(e: MouseEvent | TouchEvent) {
         hasDragged.value = true;
     }
 
-    if (dragging.value) {
+    if (dragging.value != null) {
         e.preventDefault();
         e.stopPropagation();
     }

src/features/boards/BoardNode.vue

@@ -234,17 +234,17 @@ const title = computed(() => getNodeProperty(props.nodeType.value.title, unref(p
 const label = computed(() => getNodeProperty(props.nodeType.value.label, unref(props.node)));
 const size = computed(() => getNodeProperty(props.nodeType.value.size, unref(props.node)));
 const progress = computed(
-    () => getNodeProperty(props.nodeType.value.progress, unref(props.node)) || 0
+    () => getNodeProperty(props.nodeType.value.progress, unref(props.node)) ?? 0
 );
 const backgroundColor = computed(() => themes[settings.theme].variables["--background"]);
 const outlineColor = computed(
     () =>
-        getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ||
+        getNodeProperty(props.nodeType.value.outlineColor, unref(props.node)) ??
         themes[settings.theme].variables["--outline"]
 );
 const fillColor = computed(
     () =>
-        getNodeProperty(props.nodeType.value.fillColor, unref(props.node)) ||
+        getNodeProperty(props.nodeType.value.fillColor, unref(props.node)) ??
         themes[settings.theme].variables["--raised-background"]
 );
 const progressColor = computed(() =>
@@ -252,7 +252,7 @@ const progressColor = computed(() =>
 );
 const titleColor = computed(
     () =>
-        getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ||
+        getNodeProperty(props.nodeType.value.titleColor, unref(props.node)) ??
         themes[settings.theme].variables["--foreground"]
 );
 const progressDisplay = computed(() =>

src/features/buyable.tsx

@@ -1,5 +1,11 @@
 import ClickableComponent from "features/clickables/Clickable.vue";
-import type { CoercableComponent, GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
 import type { Resource } from "features/resources/resource";
 import { DefaultValue, Persistent } from "game/persistence";
@@ -170,18 +176,18 @@ export function createBuyable<T extends BuyableOptions>(
             }
             if (currDisplay != null && buyable.cost != null && buyable.resource != null) {
                 const genericBuyable = buyable as GenericBuyable;
-                const Title = coerceComponent(currDisplay.title || "", "h3");
+                const Title = coerceComponent(currDisplay.title ?? "", "h3");
-                const Description = coerceComponent(currDisplay.description || "");
+                const Description = coerceComponent(currDisplay.description ?? "");
-                const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "");
+                const EffectDisplay = coerceComponent(currDisplay.effectDisplay ?? "");
 
                 return (
                     <span>
-                        {currDisplay.title ? (
+                        {currDisplay.title == null ? null : (
                             <div>
                                 <Title />
                             </div>
-                        ) : null}
+                        )}
-                        {currDisplay.description ? <Description /> : null}
+                        {currDisplay.description == null ? null : <Description />}
                         {currDisplay.showAmount === false ? null : (
                             <div>
                                 <br />
@@ -195,15 +201,15 @@ export function createBuyable<T extends BuyableOptions>(
                                 )}
                             </div>
                         )}
-                        {currDisplay.effectDisplay ? (
+                        {currDisplay.effectDisplay == null ? null : (
                             <div>
                                 <br />
                                 Currently: <EffectDisplay />
                             </div>
-                        ) : null}
+                        )}
-                        {genericBuyable.cost && !genericBuyable.maxed.value ? (
+                        {genericBuyable.cost != null && !genericBuyable.maxed.value ? (
                             <div>
-                                Cost: {format(unref(genericBuyable.cost) || 0)}{" "}
+                                Cost: {format(unref(genericBuyable.cost))}{" "}
                                 {buyable.resource.displayName}
                             </div>
                         ) : null}

src/features/challenges/Challenge.vue

@@ -134,25 +134,25 @@ export default defineComponent({
             comp.value = coerceComponent(
                 jsx(() => (
                     <span>
-                        {currDisplay.title ? (
+                        {currDisplay.title != null ? (
                             <div>
                                 <Title />
                             </div>
                         ) : null}
                         <Description />
-                        {currDisplay.goal ? (
+                        {currDisplay.goal != null ? (
                             <div>
                                 <br />
                                 Goal: <Goal />
                             </div>
                         ) : null}
-                        {currDisplay.reward ? (
+                        {currDisplay.reward != null ? (
                             <div>
                                 <br />
                                 Reward: <Reward />
                             </div>
                         ) : null}
-                        {currDisplay.effectDisplay ? (
+                        {currDisplay.effectDisplay != null ? (
                             <div>
                                 Currently: <EffectDisplay />
                             </div>

src/features/challenges/challenge.tsx

@@ -126,7 +126,10 @@ export function createChallenge<T extends ChallengeOptions>(
         challenge.toggle = function () {
             const genericChallenge = challenge as GenericChallenge;
             if (genericChallenge.active.value) {
-                if (unref(genericChallenge.canComplete) && !genericChallenge.maxed.value) {
+                if (
+                    unref(genericChallenge.canComplete) !== false &&
+                    !genericChallenge.maxed.value
+                ) {
                     let completions: boolean | DecimalSource = unref(genericChallenge.canComplete);
                     if (typeof completions === "boolean") {
                         completions = 1;
@@ -264,11 +267,14 @@ export function setupAutoComplete(
     exitOnComplete = true
 ): WatchStopHandle {
     const isActive = typeof autoActive === "function" ? computed(autoActive) : autoActive;
-    return watch([challenge.canComplete, isActive], ([canComplete, isActive]) => {
+    return watch(
+        [challenge.canComplete as Ref<boolean>, isActive as Ref<boolean>],
+        ([canComplete, isActive]) => {
             if (canComplete && isActive) {
                 challenge.complete(!exitOnComplete);
             }
-    });
+        }
+    );
 }
 
 export function createActiveChallenge(

src/features/clickables/Clickable.vue

@@ -98,7 +98,7 @@ export default defineComponent({
             comp.value = coerceComponent(
                 jsx(() => (
                     <span>
-                        {currDisplay.title ? (
+                        {currDisplay.title != null ? (
                             <div>
                                 <Title />
                             </div>

src/features/clickables/clickable.ts

@@ -1,5 +1,11 @@
 import ClickableComponent from "features/clickables/Clickable.vue";
-import type { CoercableComponent, GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
 import type { BaseLayer } from "game/layers";
 import type { Unsubscribe } from "nanoevents";
@@ -84,7 +90,7 @@ export function createClickable<T extends ClickableOptions>(
         if (clickable.onClick) {
             const onClick = clickable.onClick.bind(clickable);
             clickable.onClick = function (e) {
-                if (unref(clickable.canClick)) {
+                if (unref(clickable.canClick) !== false) {
                     onClick(e);
                 }
             };
@@ -92,7 +98,7 @@ export function createClickable<T extends ClickableOptions>(
         if (clickable.onHold) {
             const onHold = clickable.onHold.bind(clickable);
             clickable.onHold = function () {
-                if (unref(clickable.canClick)) {
+                if (unref(clickable.canClick) !== false) {
                     onHold();
                 }
             };
@@ -136,7 +142,8 @@ export function setupAutoClick(
     clickable: GenericClickable,
     autoActive: Computable<boolean> = true
 ): Unsubscribe {
-    const isActive = typeof autoActive === "function" ? computed(autoActive) : autoActive;
+    const isActive: ProcessedComputable<boolean> =
+        typeof autoActive === "function" ? computed(autoActive) : autoActive;
     return layer.on("update", () => {
         if (unref(isActive) && unref(clickable.canClick)) {
             clickable.onClick?.();

src/features/conversion.ts

@@ -151,7 +151,7 @@ export function createConversion<T extends ConversionOptions>(
                     : conversion.scaling.currentGain(conversion as GenericConversion);
                 gain = Decimal.floor(gain).max(0);
 
-                if (!unref(conversion.buyMax)) {
+                if (unref(conversion.buyMax) === false) {
                     gain = gain.min(1);
                 }
                 return gain;
@@ -163,14 +163,15 @@ export function createConversion<T extends ConversionOptions>(
         if (conversion.currentAt == null) {
             conversion.currentAt = computed(() => {
                 let current = conversion.scaling.currentAt(conversion as GenericConversion);
-                if (conversion.roundUpCost) current = Decimal.ceil(current);
+                if (unref((conversion as GenericConversion).roundUpCost))
+                    current = Decimal.ceil(current);
                 return current;
             });
         }
         if (conversion.nextAt == null) {
             conversion.nextAt = computed(() => {
                 let next = conversion.scaling.nextAt(conversion as GenericConversion);
-                if (conversion.roundUpCost) next = Decimal.ceil(next);
+                if (unref((conversion as GenericConversion).roundUpCost)) next = Decimal.ceil(next);
                 return next;
             });
         }
@@ -405,7 +406,7 @@ export function createIndependentConversion<S extends ConversionOptions>(
                     : conversion.scaling.currentGain(conversion as GenericConversion);
                 gain = Decimal.floor(gain).max(conversion.gainResource.value);
 
-                if (!unref(conversion.buyMax)) {
+                if (unref(conversion.buyMax) === false) {
                     gain = gain.min(Decimal.add(conversion.gainResource.value, 1));
                 }
                 return gain;
@@ -418,7 +419,7 @@ export function createIndependentConversion<S extends ConversionOptions>(
                     conversion.gainResource.value
                 ).max(0);
 
-                if (!unref(conversion.buyMax)) {
+                if (unref(conversion.buyMax) === false) {
                     gain = gain.min(1);
                 }
                 return gain;
@@ -511,8 +512,10 @@ export function addSoftcap(
 ): ScalingFunction {
     return {
         ...scaling,
-        currentAt: conversion => softcap(scaling.currentAt(conversion), unref(cap), Decimal.recip(unref(power))),
+        currentAt: conversion =>
-        nextAt: conversion => softcap(scaling.nextAt(conversion), unref(cap), Decimal.recip(unref(power))),
+            softcap(scaling.currentAt(conversion), unref(cap), Decimal.recip(unref(power))),
+        nextAt: conversion =>
+            softcap(scaling.nextAt(conversion), unref(cap), Decimal.recip(unref(power))),
         currentGain: conversion =>
             softcap(scaling.currentGain(conversion), unref(cap), unref(power))
     };

src/features/feature.ts

@@ -102,7 +102,7 @@ export function findFeatures(obj: Record<string, unknown>, ...types: symbol[]):
     const handleObject = (obj: Record<string, unknown>) => {
         Object.keys(obj).forEach(key => {
             const value = obj[key];
-            if (value && typeof value === "object") {
+            if (value != null && typeof value === "object") {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 if (types.includes((value as Record<string, any>).type)) {
                     objects.push(value);
@@ -127,7 +127,7 @@ export function excludeFeatures(obj: Record<string, unknown>, ...types: symbol[]
     const handleObject = (obj: Record<string, unknown>) => {
         Object.keys(obj).forEach(key => {
             const value = obj[key];
-            if (value && typeof value === "object") {
+            if (value != null && typeof value === "object") {
                 if (
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     typeof (value as Record<string, any>).type == "symbol" &&

src/features/milestones/Milestone.vue

@@ -74,12 +74,12 @@ export default defineComponent({
                 jsx(() => (
                     <span>
                         <Requirement />
-                        {currDisplay.effectDisplay ? (
+                        {currDisplay.effectDisplay != null ? (
                             <div>
                                 <EffectDisplay />
                             </div>
                         ) : null}
-                        {currDisplay.optionsDisplay ? (
+                        {currDisplay.optionsDisplay != null ? (
                             <div class="equal-spaced">
                                 <OptionsDisplay />
                             </div>

src/features/milestones/milestone.tsx

@@ -1,5 +1,11 @@
 import Select from "components/fields/Select.vue";
-import type { CoercableComponent, GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
 import MilestoneComponent from "features/milestones/Milestone.vue";
 import { globalBus } from "game/events";
@@ -92,7 +98,7 @@ export function createMilestone<T extends MilestoneOptions>(
             const genericMilestone = milestone as GenericMilestone;
             earned.value = true;
             genericMilestone.onComplete?.();
-            if (genericMilestone.display && unref(genericMilestone.showPopups) === true) {
+            if (genericMilestone.display != null && unref(genericMilestone.showPopups) === true) {
                 const display = unref(genericMilestone.display);
                 const Display = coerceComponent(
                     isCoercableComponent(display) ? display : display.requirement
@@ -162,7 +168,10 @@ export function createMilestone<T extends MilestoneOptions>(
                 ) {
                     genericMilestone.earned.value = true;
                     genericMilestone.onComplete?.();
-                    if (genericMilestone.display && unref(genericMilestone.showPopups) === true) {
+                    if (
+                        genericMilestone.display != null &&
+                        unref(genericMilestone.showPopups) === true
+                    ) {
                         const display = unref(genericMilestone.display);
                         const Display = coerceComponent(
                             isCoercableComponent(display) ? display : display.requirement

src/features/reset.ts

@@ -43,7 +43,7 @@ export function createReset<T extends ResetOptions>(
 
         reset.reset = function () {
             const handleObject = (obj: unknown) => {
-                if (obj && typeof obj === "object") {
+                if (obj != null && typeof obj === "object") {
                     if (DefaultValue in obj) {
                         const persistent = obj as NonPersistent;
                         persistent.value = persistent[DefaultValue];

src/features/trees/tree.ts

@@ -88,7 +88,7 @@ export function createTreeNode<T extends TreeNodeOptions>(
         if (treeNode.onClick) {
             const onClick = treeNode.onClick.bind(treeNode);
             treeNode.onClick = function () {
-                if (unref(treeNode.canClick)) {
+                if (unref(treeNode.canClick) !== false) {
                     onClick();
                 }
             };
@@ -96,7 +96,7 @@ export function createTreeNode<T extends TreeNodeOptions>(
         if (treeNode.onHold) {
             const onHold = treeNode.onHold.bind(treeNode);
             treeNode.onHold = function () {
-                if (unref(treeNode.canClick)) {
+                if (unref(treeNode.canClick) !== false) {
                     onHold();
                 }
             };

src/features/upgrades/Upgrade.vue

@@ -96,13 +96,13 @@ export default defineComponent({
             component.value = coerceComponent(
                 jsx(() => (
                     <span>
-                        {currDisplay.title ? (
+                        {currDisplay.title != null ? (
                             <div>
                                 <Title />
                             </div>
                         ) : null}
                         <Description />
-                        {currDisplay.effectDisplay ? (
+                        {currDisplay.effectDisplay != null ? (
                             <div>
                                 Currently: <EffectDisplay />
                             </div>

src/features/upgrades/upgrade.ts

@@ -187,8 +187,11 @@ export function setupAutoPurchase(
     autoActive: Computable<boolean>,
     upgrades: GenericUpgrade[] = []
 ): void {
-    upgrades = upgrades || findFeatures(layer, UpgradeType);
+    upgrades =
-    const isAutoActive = isFunction(autoActive) ? computed(autoActive) : autoActive;
+        upgrades.length === 0 ? (findFeatures(layer, UpgradeType) as GenericUpgrade[]) : upgrades;
+    const isAutoActive: ProcessedComputable<boolean> = isFunction(autoActive)
+        ? computed(autoActive)
+        : autoActive;
     layer.on("update", () => {
         if (unref(isAutoActive)) {
             upgrades.forEach(upgrade => upgrade.purchase());

src/game/modifiers.tsx

@@ -78,7 +78,7 @@ export function createAdditiveModifier<T extends AdditiveModifierOptions>(
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              {unref(processedDescription) ? (
+                              {unref(processedDescription) != null ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
@@ -126,7 +126,7 @@ export function createMultiplicativeModifier<T extends MultiplicativeModifierOpt
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              {unref(processedDescription) ? (
+                              {unref(processedDescription) != null ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
@@ -195,7 +195,7 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              {unref(processedDescription) ? (
+                              {unref(processedDescription) != null ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}

src/game/persistence.ts

@@ -85,7 +85,7 @@ function getStackTrace() {
             ?.split("\n")
             .slice(3, 5)
             .map(line => line.trim())
-            .join("\n") || ""
+            .join("\n") ?? ""
     );
 }
 
@@ -134,7 +134,7 @@ export function persistent<T extends State>(defaultValue: T | Ref<T>): Persisten
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isPersistent(value: any): value is Persistent {
-    return value && typeof value === "object" && PersistentState in value;
+    return value != null && typeof value === "object" && PersistentState in value;
 }
 
 /**
@@ -168,7 +168,7 @@ globalBus.on("addLayer", (layer: GenericLayer, saveData: Record<string, unknown>
         let foundPersistent = false;
         Object.keys(obj).forEach(key => {
             let value = obj[key];
-            if (value && typeof value === "object") {
+            if (value != null && typeof value === "object") {
                 if (ProxyState in value) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     value = (value as any)[ProxyState] as object;

src/game/player.ts

@@ -70,7 +70,7 @@ const state = reactive<PlayerData>({
     modVersion: "",
     layers: {},
 
-    autoPause: true,
+    autoPause: true
 });
 
 /** Convert a player save data object into a JSON string. Unwraps refs. */

src/game/settings.ts

@@ -35,7 +35,7 @@ const state = reactive<Partial<Settings>>({
     unthrottled: false,
 
     usingLog: false,
-    alignUnits: false,
+    alignUnits: false
 });
 
 watch(
@@ -70,7 +70,7 @@ export const hardResetSettings = (window.hardResetSettings = () => {
         theme: Themes.Nordic,
 
         usingLog: false,
-        alignUnits: false,
+        alignUnits: false
     };
     globalBus.emit("loadSettings", settings);
     Object.assign(state, settings);

src/util/bignum.ts

@@ -33,7 +33,7 @@ declare global {
         formatSmall: (x: DecimalSource, precision?: number) => string;
         formatLimit: (list: [DecimalSource, string][], unit: string) => string;
         invertOOM: (x: DecimalSource) => Decimal;
-        formatGain: (x: DecimalSource) => string
+        formatGain: (x: DecimalSource) => string;
     }
 }
 window.Decimal = Decimal;
@@ -47,6 +47,6 @@ window.toPlaces = toPlaces;
 window.formatSmall = formatSmall;
 window.formatLimit = formatLimit;
 window.invertOOM = invertOOM;
-window.formatGain = formatGain
+window.formatGain = formatGain;
 
 export default Decimal;

src/util/break_eternity.ts

@@ -196,7 +196,11 @@ export function invertOOM(x: DecimalSource): Decimal {
     return x;
 }
 
-export function formatLimit(list: [DecimalSource, string][], unit: string, gainMultiplier: DecimalSource = Decimal.dOne): string {
+export function formatLimit(
+    list: [DecimalSource, string][],
+    unit: string,
+    gainMultiplier: DecimalSource = Decimal.dOne
+): string {
     let num = list[0][0];
     let str = list[0][1];
     for (let i = 1; i < list.length; i++) {

src/util/proxies.ts

@@ -39,7 +39,7 @@ export function createLazyProxy<T extends object, S extends T>(
             }
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const val = (calculateObj() as any)[key];
-            if (val && typeof val === "object" && NonPersistent in val) {
+            if (val != null && typeof val === "object" && NonPersistent in val) {
                 return val[NonPersistent];
             }
             return val;

src/util/save.ts

@@ -86,7 +86,7 @@ export function getUniqueID(): string {
         i = 0;
     do {
         id = `${projInfo.id}-${i++}`;
-    } while (localStorage.getItem(id));
+    } while (localStorage.getItem(id) != null);
     return id;
 }
 
@@ -107,7 +107,12 @@ export async function loadSave(playerObj: Partial<PlayerData>): Promise<void> {
     getInitialLayers(playerObj).forEach(layer => addLayer(layer, playerObj));
 
     playerObj = setupInitialStore(playerObj);
-    if (playerObj.offlineProd && playerObj.time && playerObj.devSpeed !== 0) {
+    if (
+        playerObj.offlineProd &&
+        playerObj.time != null &&
+        playerObj.time &&
+        playerObj.devSpeed !== 0
+    ) {
         if (playerObj.offlineTime == undefined) playerObj.offlineTime = 0;
         playerObj.offlineTime += Math.min(
             playerObj.offlineTime + (Date.now() - playerObj.time) / 1000,

src/util/vue.tsx

@@ -229,7 +229,10 @@ export function computeOptionalComponent(
     const comp = shallowRef<Component | "" | null>(null);
     watchEffect(() => {
         const currComponent = unwrapRef(component);
-        comp.value = !currComponent ? null : coerceComponent(currComponent, defaultWrapper);
+        comp.value =
+            currComponent == "" || currComponent == null
+                ? null
+                : coerceComponent(currComponent, defaultWrapper);
     });
     return comp;
 }