removes unused imports and also makes the log gain info static

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-    "vitest.commandLine": "npx vitest"
+    "vitest.commandLine": "npx vitest",
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

src/data/layers/coal.tsx

@@ -20,29 +20,33 @@ import { persistent } from "game/persistence";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
 import { Direction } from "util/common";
 import { render, renderRow } from "util/vue";
-import { computed, ref, unref, watch, watchEffect } from "vue";
+import { computed, ref, unref, watchEffect } from "vue";
 import trees from "./trees";
-import { createAdditiveModifier, createExponentialModifier, createMultiplicativeModifier, createSequentialModifier } from "game/modifiers";
+import {
-import { createUpgrade, Upgrade, UpgradeOptions } from "features/upgrades/upgrade";
+    createAdditiveModifier,
-import player from "game/player";
+    createExponentialModifier,
+    createMultiplicativeModifier,
+    createSequentialModifier
+} from "game/modifiers";
+import { createUpgrade, Upgrade } from "features/upgrades/upgrade";
 import elves from "./elves";
 
 interface BetterFertilizerUpgOptions {
-    canAfford: () => boolean,
+    canAfford: () => boolean;
-    onPurchase: VoidFunction,
+    onPurchase: VoidFunction;
-    display: JSXFunction,
+    display: JSXFunction;
-    style: StyleValue,
+    style: StyleValue;
-    visibility: () => Visibility
+    visibility: () => Visibility;
 }
 interface UnlockKilnUpgOptions {
-    resource: Resource,
+    resource: Resource;
-    cost: DecimalSource,
+    cost: DecimalSource;
     display: {
-        title: string,
+        title: string;
-        description: string
+        description: string;
-    },
+    };
-    style: StyleValue,
+    style: StyleValue;
-    visibility: () => Visibility
+    visibility: () => Visibility;
 }
 
 const id = "coal";
@@ -51,7 +55,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
     const name = "Coal";
     const colorCoal = "#151716";
     const colorAsh = "#B2BeB5";
-    const colorText = "var(--foreground)"
+    const colorText = "var(--foreground)";
 
     const coal = createResource<DecimalSource>(0, "coal");
     const totalCoal = trackTotal(coal);
@@ -86,48 +90,74 @@ const layer = createLayer(id, function (this: BaseLayer) {
     const buildFire = createBuyable(() => ({
         resource: trees.logs,
         cost() {
-            return Decimal.times(buildBonfire.amount.value, 10).plus(this.amount.value).pow(1.5).times(1e4);
+            return Decimal.times(buildBonfire.amount.value, 10)
+                .plus(this.amount.value)
+                .pow(1.5)
+                .times(1e4);
+        },
+        display: jsx(() => (
+            <>
+                <h3>Small Fire</h3>
+                <br />
+                Burn 1000 logs for 0.1 coal and 50 ash
+                <br />
+                <br />
+                Currently:
+                <br />-{format(fireLogs.value)} logs/sec
+                <br />+{format(fireCoal.value)} coal/sec
+                <br />+{format(fireAsh.value)} ash/sec
+                <br />
+                <br />
+                Cost: {formatWhole(unref(buildFire.cost!))} {buildFire.resource!.displayName}
+            </>
+        )),
+        onPurchase() {
+            activeFires.value = Decimal.add(activeFires.value, 1);
         },
-        display: jsx(() => <>
-            <h3>Small Fire</h3><br/>
-            Burn 1000 logs for 0.1 coal and 50 ash<br/>
-            <br/>
-            Currently:<br/>
-            -{format(fireLogs.value)} logs/sec<br/>
-            +{format(fireCoal.value)} coal/sec<br/>
-            +{format(fireAsh.value)} ash/sec<br/>
-            <br/>
-            Cost: {formatWhole(unref(buildFire.cost!))} {buildFire.resource!.displayName}
-        </>),
-        onPurchase() { activeFires.value = Decimal.add(activeFires.value, 1); },
         style: {
             color: colorText,
             width: "160px"
         }
     })) as GenericBuyable;
     const minFire = createClickable(() => ({
-        display: '0',
+        display: "0",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.gt(activeFires.value, 0); },
+        canClick() {
-        onClick() { activeFires.value = 0; }
+            return Decimal.gt(activeFires.value, 0);
+        },
+        onClick() {
+            activeFires.value = 0;
+        }
     }));
     const removeFire = createClickable(() => ({
-        display: '-',
+        display: "-",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.gt(activeFires.value, 0); },
+        canClick() {
-        onClick() { activeFires.value = Decimal.sub(activeFires.value, 1); }
+            return Decimal.gt(activeFires.value, 0);
+        },
+        onClick() {
+            activeFires.value = Decimal.sub(activeFires.value, 1);
+        }
     }));
     const addFire = createClickable(() => ({
-        display: '+',
+        display: "+",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.lt(activeFires.value, buildFire.amount.value); },
+        canClick() {
-        onClick() { activeFires.value = Decimal.add(activeFires.value, 1); }
+            return Decimal.lt(activeFires.value, buildFire.amount.value);
+        },
+        onClick() {
+            activeFires.value = Decimal.add(activeFires.value, 1);
+        }
     }));
     const maxFire = createClickable(() => ({
-        display: 'Max',
+        display: "Max",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.lt(activeFires.value, buildFire.amount.value); },
+        canClick() {
-        onClick() { activeFires.value = buildFire.amount.value; }
+            return Decimal.lt(activeFires.value, buildFire.amount.value);
+        },
+        onClick() {
+            activeFires.value = buildFire.amount.value;
+        }
     }));
 
     const fireResource = createResource(buildFire.amount, "small fires");
@@ -138,17 +168,22 @@ const layer = createLayer(id, function (this: BaseLayer) {
     const buildBonfire = createBuyable(() => ({
         resource: fireResource,
         cost: 10,
-        display: jsx(() => <>
+        display: jsx(() => (
-            <h3>Bonfire</h3><br/>
+            <>
-            Burn 10,000 logs for 10 coal and 1000 ash<br/>
+                <h3>Bonfire</h3>
-            <br/>
+                <br />
-            Currently:<br/>
+                Burn 10,000 logs for 10 coal and 1000 ash
-            -{format(bonfireLogs.value)} logs/sec<br/>
+                <br />
-            +{format(bonfireCoal.value)} coal/sec<br/>
+                <br />
-            +{format(bonfireAsh.value)} ash/sec<br/>
+                Currently:
-            <br/>
+                <br />-{format(bonfireLogs.value)} logs/sec
-            Cost: {formatWhole(unref(buildBonfire.cost!))} {buildBonfire.resource!.displayName}
+                <br />+{format(bonfireCoal.value)} coal/sec
-        </>),
+                <br />+{format(bonfireAsh.value)} ash/sec
+                <br />
+                <br />
+                Cost: {formatWhole(unref(buildBonfire.cost!))} {buildBonfire.resource!.displayName}
+            </>
+        )),
         onPurchase(cost) {
             activeFires.value = Decimal.sub(activeFires.value, cost!).max(0);
             activeBonfires.value = Decimal.add(activeBonfires.value, 1);
@@ -159,28 +194,44 @@ const layer = createLayer(id, function (this: BaseLayer) {
         }
     })) as GenericBuyable;
     const minBonfire = createClickable(() => ({
-        display: '0',
+        display: "0",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.gt(activeBonfires.value, 0); },
+        canClick() {
-        onClick() { activeBonfires.value = 0; }
+            return Decimal.gt(activeBonfires.value, 0);
+        },
+        onClick() {
+            activeBonfires.value = 0;
+        }
     }));
     const removeBonfire = createClickable(() => ({
-        display: '-',
+        display: "-",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.gt(activeBonfires.value, 0); },
+        canClick() {
-        onClick() { activeBonfires.value = Decimal.sub(activeBonfires.value, 1); }
+            return Decimal.gt(activeBonfires.value, 0);
+        },
+        onClick() {
+            activeBonfires.value = Decimal.sub(activeBonfires.value, 1);
+        }
     }));
     const addBonfire = createClickable(() => ({
-        display: '+',
+        display: "+",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.lt(activeBonfires.value, buildBonfire.amount.value); },
+        canClick() {
-        onClick() { activeBonfires.value = Decimal.add(activeBonfires.value, 1); }
+            return Decimal.lt(activeBonfires.value, buildBonfire.amount.value);
+        },
+        onClick() {
+            activeBonfires.value = Decimal.add(activeBonfires.value, 1);
+        }
     }));
     const maxBonfire = createClickable(() => ({
-        display: 'Max',
+        display: "Max",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.lt(activeBonfires.value, buildBonfire.amount.value); },
+        canClick() {
-        onClick() { activeBonfires.value = buildBonfire.amount.value; }
+            return Decimal.lt(activeBonfires.value, buildBonfire.amount.value);
+        },
+        onClick() {
+            activeBonfires.value = buildBonfire.amount.value;
+        }
     }));
 
     const activeKilns = persistent<DecimalSource>(0);
@@ -192,17 +243,22 @@ const layer = createLayer(id, function (this: BaseLayer) {
         cost() {
             return Decimal.pow(1.1, this.amount.value).times(1e7);
         },
-        display: jsx(() => <>
+        display: jsx(() => (
-            <h3>Charcoal Kiln</h3><br/>
+            <>
-            Burn 1,000,000 logs for 10,000 coal and 10,000 ash<br/>
+                <h3>Charcoal Kiln</h3>
-            <br/>
+                <br />
-            Currently:<br/>
+                Burn 1,000,000 logs for 10,000 coal and 10,000 ash
-            -{format(kilnLogs.value)} logs/sec<br/>
+                <br />
-            +{format(kilnCoal.value)} coal/sec<br/>
+                <br />
-            +{format(kilnAsh.value)} ash/sec<br/>
+                Currently:
-            <br/>
+                <br />-{format(kilnLogs.value)} logs/sec
-            Cost: {formatWhole(unref(buildKiln.cost!))} {buildKiln.resource!.displayName}
+                <br />+{format(kilnCoal.value)} coal/sec
-        </>),
+                <br />+{format(kilnAsh.value)} ash/sec
+                <br />
+                <br />
+                Cost: {formatWhole(unref(buildKiln.cost!))} {buildKiln.resource!.displayName}
+            </>
+        )),
         onPurchase() {
             activeKilns.value = Decimal.add(activeKilns.value, 1);
         },
@@ -212,28 +268,44 @@ const layer = createLayer(id, function (this: BaseLayer) {
         }
     })) as GenericBuyable;
     const minKiln = createClickable(() => ({
-        display: '0',
+        display: "0",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.gt(activeKilns.value, 0); },
+        canClick() {
-        onClick() { activeKilns.value = 0; }
+            return Decimal.gt(activeKilns.value, 0);
+        },
+        onClick() {
+            activeKilns.value = 0;
+        }
     }));
     const removeKiln = createClickable(() => ({
-        display: '-',
+        display: "-",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.gt(activeKilns.value, 0); },
+        canClick() {
-        onClick() { activeKilns.value = Decimal.sub(activeKilns.value, 1); }
+            return Decimal.gt(activeKilns.value, 0);
+        },
+        onClick() {
+            activeKilns.value = Decimal.sub(activeKilns.value, 1);
+        }
     }));
     const addKiln = createClickable(() => ({
-        display: '+',
+        display: "+",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.lt(activeKilns.value, buildKiln.amount.value); },
+        canClick() {
-        onClick() { activeKilns.value = Decimal.add(activeKilns.value, 1); }
+            return Decimal.lt(activeKilns.value, buildKiln.amount.value);
+        },
+        onClick() {
+            activeKilns.value = Decimal.add(activeKilns.value, 1);
+        }
     }));
     const maxKiln = createClickable(() => ({
-        display: 'Max',
+        display: "Max",
         style: { minHeight: "20px", width: "40px", color: colorText },
-        canClick() { return Decimal.lt(activeKilns.value, buildKiln.amount.value); },
+        canClick() {
-        onClick() { activeKilns.value = buildKiln.amount.value; }
+            return Decimal.lt(activeKilns.value, buildKiln.amount.value);
+        },
+        onClick() {
+            activeKilns.value = buildKiln.amount.value;
+        }
     }));
 
     const warmerCutters = createUpgrade(() => ({
@@ -270,15 +342,12 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Bigger Fires",
             description: "Put all those fires together into a larger blaze"
         },
-        onPurchase() { fireResource.value = Decimal.add(fireResource.value, this.cost); },
+        onPurchase() {
+            fireResource.value = Decimal.add(fireResource.value, this.cost);
+        },
         style: { color: colorText }
     }));
-    const row1upgrades = [
+    const row1upgrades = [warmerCutters, warmerPlanters, basicFertilizer, unlockBonfire];
-        warmerCutters,
-        warmerPlanters,
-        basicFertilizer,
-        unlockBonfire
-    ];
 
     const dedicatedCutters = createUpgrade(() => ({
         resource: coal,
@@ -302,20 +371,24 @@ const layer = createLayer(id, function (this: BaseLayer) {
     }));
     const betterFertilizer: Upgrade<BetterFertilizerUpgOptions> = createUpgrade(() => ({
         canAfford() {
-            return Decimal.gte(trees.logs.value, 1e5)
+            return Decimal.gte(trees.logs.value, 1e5) && Decimal.gte(ash.value, 1e5);
-                && Decimal.gte(ash.value, 1e5);
         },
         onPurchase() {
             trees.logs.value = Decimal.sub(trees.logs.value, 1e5);
             ash.value = Decimal.sub(ash.value, 1e5);
         },
-        display: jsx(() => <>
+        display: jsx(() => (
-            <h3>Mulched Soil</h3><br/>
+            <>
-            Double the bonus from Fertilized Soil<br/>
+                <h3>Mulched Soil</h3>
-            <br/>
+                <br />
-            Cost: {formatWhole(1e5)} {trees.logs.displayName}<br/>
+                Double the bonus from Fertilized Soil
-            {formatWhole(1e5)} {ash.displayName}
+                <br />
-        </>),
+                <br />
+                Cost: {formatWhole(1e5)} {trees.logs.displayName}
+                <br />
+                {formatWhole(1e5)} {ash.displayName}
+            </>
+        )),
         style: { color: colorText },
         visibility: () => showIf(unlockBonfire.bought.value)
     }));
@@ -330,12 +403,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         style: { color: colorText },
         visibility: () => showIf(unlockBonfire.bought.value)
     }));
-    const row2upgrades = [
+    const row2upgrades = [dedicatedCutters, dedicatedPlanters, betterFertilizer, unlockKiln];
-        dedicatedCutters,
-        dedicatedPlanters,
-        betterFertilizer,
-        unlockKiln
-    ];
 
     const heatedCutters = createBuyable(() => ({
         resource: coal,
@@ -349,9 +417,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
         display: {
             title: "Heated Cutters",
             description: "Even warmer cutters cut down trees faster",
-            effectDisplay: jsx(() => <>
+            effectDisplay: jsx(() => (
-                Cutters cut down trees {format(computedHeatedCutterEffect.value)}x faster
+                <>Cutters cut down trees {format(computedHeatedCutterEffect.value)}x faster</>
-            </>)
+            ))
         },
         style: { color: colorText },
         visibility: () => showIf(warmerCutters.bought.value)
@@ -368,9 +436,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
         display: {
             title: "Heated Planters",
             description: "Even warmer planters plant trees faster",
-            effectDisplay: jsx(() => <>
+            effectDisplay: jsx(() => (
-                Planters plant trees {format(computedHeatedPlanterEffect.value)}x faster
+                <>Planters plant trees {format(computedHeatedPlanterEffect.value)}x faster</>
-            </>)
+            ))
         },
         style: { color: colorText },
         visibility: () => showIf(warmerPlanters.bought.value)
@@ -387,24 +455,24 @@ const layer = createLayer(id, function (this: BaseLayer) {
         display: {
             title: "Fertilized Soil",
             description: "More fertilizer helps trees grow bigger",
-            effectDisplay: jsx(() => <>
+            effectDisplay: jsx(() => (
-                Trees give {format(computedFertilizerEffect.value)}x more logs
+                <>Trees give {format(computedFertilizerEffect.value)}x more logs</>
-            </>)
+            ))
         },
         style: { color: colorText },
         visibility: () => showIf(basicFertilizer.bought.value)
     })) as GenericBuyable;
-    const row3buyables = [
+    const row3buyables = [heatedCutters, heatedPlanters, moreFertilizer];
-        heatedCutters,
-        heatedPlanters,
-        moreFertilizer
-    ]
 
     const heatedCutterEffect = createSequentialModifier(() => [
         createAdditiveModifier(() => ({
-            addend() { return Decimal.times(heatedCutters.amount.value, 0.25); },
+            addend() {
+                return Decimal.times(heatedCutters.amount.value, 0.25);
+            },
             description: "Heated Cutters",
-            enabled() { return Decimal.gt(heatedCutters.amount.value, 0); }
+            enabled() {
+                return Decimal.gt(heatedCutters.amount.value, 0);
+            }
         })),
         createMultiplicativeModifier(() => ({
             multiplier: 2,
@@ -413,12 +481,16 @@ const layer = createLayer(id, function (this: BaseLayer) {
         }))
     ]);
     const computedHeatedCutterEffect = computed(() => heatedCutterEffect.apply(1));
-    
+
     const heatedPlanterEffect = createSequentialModifier(() => [
         createAdditiveModifier(() => ({
-            addend() { return Decimal.times(heatedPlanters.amount.value, 0.25); },
+            addend() {
+                return Decimal.times(heatedPlanters.amount.value, 0.25);
+            },
             description: "Heated Planters",
-            enabled() { return Decimal.gt(heatedPlanters.amount.value, 0); }
+            enabled() {
+                return Decimal.gt(heatedPlanters.amount.value, 0);
+            }
         })),
         createMultiplicativeModifier(() => ({
             multiplier: 2,
@@ -430,9 +502,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const fertilizerEffect = createSequentialModifier(() => [
         createAdditiveModifier(() => ({
-            addend() { return Decimal.times(moreFertilizer.amount.value, 0.25); },
+            addend() {
+                return Decimal.times(moreFertilizer.amount.value, 0.25);
+            },
             description: "Fertilized Soil",
-            enabled() { return Decimal.gt(moreFertilizer.amount.value, 0); }
+            enabled() {
+                return Decimal.gt(moreFertilizer.amount.value, 0);
+            }
         })),
         createMultiplicativeModifier(() => ({
             multiplier: 2,
@@ -444,19 +520,31 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const coalGain = createSequentialModifier(() => [
         createAdditiveModifier(() => ({
-            addend() { return fireCoal.value; },
+            addend() {
+                return fireCoal.value;
+            },
             description: "Small Fires",
-            enabled() { return Decimal.gt(activeFires.value, 0); }
+            enabled() {
+                return Decimal.gt(activeFires.value, 0);
+            }
         })),
         createAdditiveModifier(() => ({
-            addend() { return bonfireCoal.value; },
+            addend() {
+                return bonfireCoal.value;
+            },
             description: "Bonfires",
-            enabled() { return Decimal.gt(activeBonfires.value, 0); }
+            enabled() {
+                return Decimal.gt(activeBonfires.value, 0);
+            }
         })),
         createAdditiveModifier(() => ({
-            addend() { return kilnCoal.value; },
+            addend() {
+                return kilnCoal.value;
+            },
             description: "Charcoal Kilns",
-            enabled() { return Decimal.gt(activeKilns.value, 0); }
+            enabled() {
+                return Decimal.gt(activeKilns.value, 0);
+            }
         })),
         createExponentialModifier(() => ({
             exponent: 1.25,
@@ -468,38 +556,62 @@ const layer = createLayer(id, function (this: BaseLayer) {
 
     const ashGain = createSequentialModifier(() => [
         createAdditiveModifier(() => ({
-            addend() { return fireAsh.value; },
+            addend() {
+                return fireAsh.value;
+            },
             description: "Small Fires",
-            enabled() { return Decimal.gt(activeFires.value, 0); }
+            enabled() {
+                return Decimal.gt(activeFires.value, 0);
+            }
         })),
         createAdditiveModifier(() => ({
-            addend() { return bonfireAsh.value; },
+            addend() {
+                return bonfireAsh.value;
+            },
             description: "Bonfires",
-            enabled() { return Decimal.gt(activeBonfires.value, 0); }
+            enabled() {
+                return Decimal.gt(activeBonfires.value, 0);
+            }
         })),
         createAdditiveModifier(() => ({
-            addend() { return kilnAsh.value; },
+            addend() {
+                return kilnAsh.value;
+            },
             description: "Charcoal Kilns",
-            enabled() { return Decimal.gt(activeKilns.value, 0); }
+            enabled() {
+                return Decimal.gt(activeKilns.value, 0);
+            }
         }))
     ]);
     const computedAshGain = computed(() => ashGain.apply(0));
 
     const logConsumption = createSequentialModifier(() => [
         createAdditiveModifier(() => ({
-            addend() { return Decimal.negate(fireLogs.value); },
+            addend() {
+                return Decimal.negate(fireLogs.value);
+            },
             description: "Small Fires",
-            enabled() { return Decimal.gt(activeFires.value, 0); }
+            enabled() {
+                return Decimal.gt(activeFires.value, 0);
+            }
         })),
         createAdditiveModifier(() => ({
-            addend() { return Decimal.negate(bonfireLogs.value); },
+            addend() {
+                return Decimal.negate(bonfireLogs.value);
+            },
             description: "Bonfires",
-            enabled() { return Decimal.gt(activeBonfires.value, 0); }
+            enabled() {
+                return Decimal.gt(activeBonfires.value, 0);
+            }
         })),
         createAdditiveModifier(() => ({
-            addend() { return Decimal.negate(kilnLogs.value); },
+            addend() {
+                return Decimal.negate(kilnLogs.value);
+            },
             description: "Charcoal Kilns",
-            enabled() { return Decimal.gt(activeKilns.value, 0); }
+            enabled() {
+                return Decimal.gt(activeKilns.value, 0);
+            }
         }))
     ]);
     const computedLogConsumption = computed(() => logConsumption.apply(0));
@@ -509,19 +621,37 @@ const layer = createLayer(id, function (this: BaseLayer) {
             title: "Log Consumption",
             modifier: logConsumption,
             base: 0,
-            visible() { return Decimal.gt(activeFires.value, 0) || Decimal.gt(activeBonfires.value, 0) || Decimal.gt(activeKilns.value, 0); }
+            visible() {
+                return (
+                    Decimal.gt(activeFires.value, 0) ||
+                    Decimal.gt(activeBonfires.value, 0) ||
+                    Decimal.gt(activeKilns.value, 0)
+                );
+            }
         },
         {
             title: "Coal Gain",
             modifier: coalGain,
             base: 0,
-            visible() { return Decimal.gt(activeFires.value, 0) || Decimal.gt(activeBonfires.value, 0) || Decimal.gt(activeKilns.value, 0); }
+            visible() {
+                return (
+                    Decimal.gt(activeFires.value, 0) ||
+                    Decimal.gt(activeBonfires.value, 0) ||
+                    Decimal.gt(activeKilns.value, 0)
+                );
+            }
         },
         {
             title: "Ash Gain",
             modifier: ashGain,
             base: 0,
-            visible() { return Decimal.gt(activeFires.value, 0) || Decimal.gt(activeBonfires.value, 0) || Decimal.gt(activeKilns.value, 0); }
+            visible() {
+                return (
+                    Decimal.gt(activeFires.value, 0) ||
+                    Decimal.gt(activeBonfires.value, 0) ||
+                    Decimal.gt(activeKilns.value, 0)
+                );
+            }
         }
     ]);
     const showModifiersModal = ref(false);
@@ -587,7 +717,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
             <>
                 <div>
                     {main.day.value === day
-                        ? `Reach ${formatWhole(totalCoalGoal)} ${coal.displayName} to complete the day`
+                        ? `Reach ${formatWhole(totalCoalGoal)} ${
+                              coal.displayName
+                          } to complete the day`
                         : `${name} Complete!`}{" "}
                     -{" "}
                     <button
@@ -626,27 +758,37 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <Row>
                     <Column>
                         {render(buildFire)}
-                        <div>{formatWhole(activeFires.value)}/{formatWhole(buildFire.amount.value)}</div>
+                        <div>
+                            {formatWhole(activeFires.value)}/{formatWhole(buildFire.amount.value)}
+                        </div>
                         {renderRow(minFire, removeFire, addFire, maxFire)}
                     </Column>
-                    { unlockBonfire.bought.value ? <>
+                    {unlockBonfire.bought.value ? (
-                        <Spacer />
+                        <>
-                        <Column>
+                            <Spacer />
-                            {render(buildBonfire)}
+                            <Column>
-                            <div>{formatWhole(activeBonfires.value)}/{formatWhole(buildBonfire.amount.value)}</div>
+                                {render(buildBonfire)}
-                            {renderRow(minBonfire, removeBonfire, addBonfire, maxBonfire)}
+                                <div>
-                        </Column>
+                                    {formatWhole(activeBonfires.value)}/
-                        </> : undefined
+                                    {formatWhole(buildBonfire.amount.value)}
-                    }
+                                </div>
-                    { unlockKiln.bought.value ? <>
+                                {renderRow(minBonfire, removeBonfire, addBonfire, maxBonfire)}
-                        <Spacer />
+                            </Column>
-                        <Column>
+                        </>
-                            {render(buildKiln)}
+                    ) : undefined}
-                            <div>{formatWhole(activeKilns.value)}/{formatWhole(buildKiln.amount.value)}</div>
+                    {unlockKiln.bought.value ? (
-                            {renderRow(minKiln, removeKiln, addKiln, maxKiln)}
+                        <>
-                        </Column>
+                            <Spacer />
-                        </> : undefined
+                            <Column>
-                    }
+                                {render(buildKiln)}
+                                <div>
+                                    {formatWhole(activeKilns.value)}/
+                                    {formatWhole(buildKiln.amount.value)}
+                                </div>
+                                {renderRow(minKiln, removeKiln, addKiln, maxKiln)}
+                            </Column>
+                        </>
+                    ) : undefined}
                 </Row>
                 <Spacer />
                 {renderRow(...row1upgrades)}

src/data/layers/trees.tsx

@@ -24,7 +24,6 @@ import {
     Modifier
 } from "game/modifiers";
 import { persistent } from "game/persistence";
-import player from "game/player";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
 import { Direction, WithRequired } from "util/common";
 import { render, renderRow } from "util/vue";
@@ -685,12 +684,18 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 {render(dayProgress)}
                 {render(modifiersModal)}
                 <Spacer />
-                <MainDisplay resource={logs} color={colorBright} style="margin-bottom: 0" />
+                <MainDisplay
-                {Decimal.gt(computedAutoCuttingAmount.value, 0)
+                    resource={logs}
-                    ? `expected: +${format(
+                    color={colorBright}
-                          logGain.apply(computedAutoCuttingAmount.value)
+                    style="margin-bottom: 0"
-                      )}/s, average: +${format(ema.value)}/s`
+                    effectDisplay={
-                    : undefined}
+                        Decimal.gt(computedAutoCuttingAmount.value, 0)
+                            ? `expected: +${format(
+                                  logGain.apply(computedAutoCuttingAmount.value)
+                              )}/s, average: +${format(ema.value)}/s`
+                            : undefined
+                    }
+                />
                 <MainDisplay
                     resource={saplings}
                     color={colorDark}