removes unused imports and also makes the log gain info static

This commit is contained in:
circle-gon 2022-12-04 02:31:33 +00:00
parent e32fac2426
commit 94f29f5da6
3 changed files with 331 additions and 180 deletions

View file

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

View file

@ -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 { createUpgrade, Upgrade, UpgradeOptions } from "features/upgrades/upgrade";
import player from "game/player";
import {
createAdditiveModifier,
createExponentialModifier,
createMultiplicativeModifier,
createSequentialModifier
} from "game/modifiers";
import { createUpgrade, Upgrade } from "features/upgrades/upgrade";
import elves from "./elves";
interface BetterFertilizerUpgOptions {
canAfford: () => boolean,
onPurchase: VoidFunction,
display: JSXFunction,
style: StyleValue,
visibility: () => Visibility
canAfford: () => boolean;
onPurchase: VoidFunction;
display: JSXFunction;
style: StyleValue;
visibility: () => Visibility;
}
interface UnlockKilnUpgOptions {
resource: Resource,
cost: DecimalSource,
resource: Resource;
cost: DecimalSource;
display: {
title: string,
description: string
},
style: StyleValue,
visibility: () => Visibility
title: string;
description: string;
};
style: StyleValue;
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/>
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 />
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); },
</>
)),
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); },
onClick() { activeFires.value = 0; }
canClick() {
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); },
onClick() { activeFires.value = Decimal.sub(activeFires.value, 1); }
canClick() {
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); },
onClick() { activeFires.value = Decimal.add(activeFires.value, 1); }
canClick() {
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); },
onClick() { activeFires.value = buildFire.amount.value; }
canClick() {
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(() => <>
<h3>Bonfire</h3><br/>
Burn 10,000 logs for 10 coal and 1000 ash<br/>
display: jsx(() => (
<>
<h3>Bonfire</h3>
<br />
Burn 10,000 logs for 10 coal and 1000 ash
<br />
<br />
Currently:
<br />-{format(bonfireLogs.value)} logs/sec
<br />+{format(bonfireCoal.value)} coal/sec
<br />+{format(bonfireAsh.value)} ash/sec
<br />
Currently:<br/>
-{format(bonfireLogs.value)} logs/sec<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); },
onClick() { activeBonfires.value = 0; }
canClick() {
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); },
onClick() { activeBonfires.value = Decimal.sub(activeBonfires.value, 1); }
canClick() {
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); },
onClick() { activeBonfires.value = Decimal.add(activeBonfires.value, 1); }
canClick() {
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); },
onClick() { activeBonfires.value = buildBonfire.amount.value; }
canClick() {
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(() => <>
<h3>Charcoal Kiln</h3><br/>
Burn 1,000,000 logs for 10,000 coal and 10,000 ash<br/>
display: jsx(() => (
<>
<h3>Charcoal Kiln</h3>
<br />
Burn 1,000,000 logs for 10,000 coal and 10,000 ash
<br />
<br />
Currently:
<br />-{format(kilnLogs.value)} logs/sec
<br />+{format(kilnCoal.value)} coal/sec
<br />+{format(kilnAsh.value)} ash/sec
<br />
Currently:<br/>
-{format(kilnLogs.value)} logs/sec<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); },
onClick() { activeKilns.value = 0; }
canClick() {
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); },
onClick() { activeKilns.value = Decimal.sub(activeKilns.value, 1); }
canClick() {
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); },
onClick() { activeKilns.value = Decimal.add(activeKilns.value, 1); }
canClick() {
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); },
onClick() { activeKilns.value = buildKiln.amount.value; }
canClick() {
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 = [
warmerCutters,
warmerPlanters,
basicFertilizer,
unlockBonfire
];
const row1upgrades = [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)
&& Decimal.gte(ash.value, 1e5);
return Decimal.gte(trees.logs.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(() => <>
<h3>Mulched Soil</h3><br/>
Double the bonus from Fertilized Soil<br/>
display: jsx(() => (
<>
<h3>Mulched Soil</h3>
<br />
Double the bonus from Fertilized Soil
<br />
<br />
Cost: {formatWhole(1e5)} {trees.logs.displayName}
<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 = [
dedicatedCutters,
dedicatedPlanters,
betterFertilizer,
unlockKiln
];
const row2upgrades = [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(() => <>
Cutters cut down trees {format(computedHeatedCutterEffect.value)}x faster
</>)
effectDisplay: jsx(() => (
<>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(() => <>
Planters plant trees {format(computedHeatedPlanterEffect.value)}x faster
</>)
effectDisplay: jsx(() => (
<>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(() => <>
Trees give {format(computedFertilizerEffect.value)}x more logs
</>)
effectDisplay: jsx(() => (
<>Trees give {format(computedFertilizerEffect.value)}x more logs</>
))
},
style: { color: colorText },
visibility: () => showIf(basicFertilizer.bought.value)
})) as GenericBuyable;
const row3buyables = [
heatedCutters,
heatedPlanters,
moreFertilizer
]
const row3buyables = [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,
@ -416,9 +484,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
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>
{render(buildBonfire)}
<div>{formatWhole(activeBonfires.value)}/{formatWhole(buildBonfire.amount.value)}</div>
<div>
{formatWhole(activeBonfires.value)}/
{formatWhole(buildBonfire.amount.value)}
</div>
{renderRow(minBonfire, removeBonfire, addBonfire, maxBonfire)}
</Column>
</> : undefined
}
{ unlockKiln.bought.value ? <>
</>
) : undefined}
{unlockKiln.bought.value ? (
<>
<Spacer />
<Column>
{render(buildKiln)}
<div>{formatWhole(activeKilns.value)}/{formatWhole(buildKiln.amount.value)}</div>
<div>
{formatWhole(activeKilns.value)}/
{formatWhole(buildKiln.amount.value)}
</div>
{renderRow(minKiln, removeKiln, addKiln, maxKiln)}
</Column>
</> : undefined
}
</>
) : undefined}
</Row>
<Spacer />
{renderRow(...row1upgrades)}

View file

@ -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" />
{Decimal.gt(computedAutoCuttingAmount.value, 0)
<MainDisplay
resource={logs}
color={colorBright}
style="margin-bottom: 0"
effectDisplay={
Decimal.gt(computedAutoCuttingAmount.value, 0)
? `expected: +${format(
logGain.apply(computedAutoCuttingAmount.value)
)}/s, average: +${format(ema.value)}/s`
: undefined}
: undefined
}
/>
<MainDisplay
resource={saplings}
color={colorDark}