Add eslint rule for strict boolean expressions and fix linting issues

.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

@@ -31,7 +31,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/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

@@ -46,7 +46,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, unthrottled } = toRefs(settings);

src/components/Save.vue

@@ -104,11 +104,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
 );
 
 function changeName() {

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/Fraction.vue

@@ -0,0 +1 @@
+

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>
-        ><span style="text-decoration: overline"><slot /></span>
+        <div style="display: inline-block; border-top: 1px solid; padding-left: 0.2em">
+            <slot />
+        </div>
     </span>
 </template>

src/data/common.tsx

@@ -125,7 +125,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:"}{" "}
@@ -154,7 +154,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();
@@ -298,7 +298,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>
             );
 

src/data/projEntry.tsx

@@ -49,10 +49,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}
                 <div>

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, 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, 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,16 +201,16 @@ 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>
                                 <br />
-                                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(
-        if (canComplete && isActive) {
+        [challenge.canComplete as Ref<boolean>, isActive as Ref<boolean>],
-            challenge.complete(!exitOnComplete);
+        ([canComplete, isActive]) => {
+            if (canComplete && isActive) {
+                challenge.complete(!exitOnComplete);
+            }
         }
-    });
+    );
 }
 
 export function createActiveChallenge(

src/features/clickables/Clickable.vue

@@ -97,7 +97,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, 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";
@@ -81,7 +87,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);
                 }
             };
@@ -89,7 +95,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();
                 }
             };
@@ -131,7 +137,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

@@ -149,7 +149,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;
@@ -161,14 +161,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;
             });
         }
@@ -402,7 +403,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;
@@ -415,7 +416,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;
@@ -507,8 +508,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, 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

@@ -176,8 +176,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

@@ -77,7 +77,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)!)}
@@ -125,7 +125,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)!)}
@@ -194,7 +194,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/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

@@ -85,7 +85,7 @@ export function getUniqueID(): string {
         i = 0;
     do {
         id = `${projInfo.id}-${i++}`;
-    } while (localStorage.getItem(id));
+    } while (localStorage.getItem(id) != null);
     return id;
 }
 
@@ -106,7 +106,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

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