Implemented Elves

src/data/layers/coal.tsx

@@ -22,9 +22,10 @@ import { Direction } from "util/common";
 import { render, renderRow } from "util/vue";
 import { computed, ref, unref, watch, watchEffect } from "vue";
 import trees from "./trees";
-import { createAdditiveModifier, createMultiplicativeModifier, createSequentialModifier } from "game/modifiers";
+import { createAdditiveModifier, createExponentialModifier, createMultiplicativeModifier, createSequentialModifier } from "game/modifiers";
 import { createUpgrade } from "features/upgrades/upgrade";
 import player from "game/player";
+import elves from "./elves";
 
 const id = "coal";
 const day = 3;
@@ -45,8 +46,19 @@ const layer = createLayer(id, function (this: BaseLayer) {
         width: 600,
         height: 25,
         fillStyle: `backgroundColor: ${colorCoal}`,
-        progress: () => Decimal.log10(totalCoal.value).div(Math.log10(totalCoalGoal)),
-        display: jsx(() => <>{formatWhole(totalCoal.value)}/{formatWhole(totalCoalGoal)}</>)
+        progress: () =>
+            main.day.value === day
+                ? Decimal.log10(totalCoal.value).div(Math.log10(totalCoalGoal))
+                : 1,
+        display: jsx(() =>
+            main.day.value === day ? (
+                <>
+                    {formatWhole(totalCoal.value)}/{formatWhole(totalCoalGoal)}
+                </>
+            ) : (
+                ""
+            )
+        )
     }));
 
     const activeFires = persistent<DecimalSource>(0);
@@ -311,8 +323,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         cost() {
             let v = this.amount.value;
             if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
-            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
-            if (Decimal.gte(v, 1000)) v = Decimal.pow(v, 2).div(1000);
+            if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
+            if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
             return Decimal.add(v, 1).pow(2.5).times(10);
         },
         display: {
@@ -330,8 +342,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         cost() {
             let v = this.amount.value;
             if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
-            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
-            if (Decimal.gte(v, 1000)) v = Decimal.pow(v, 2).div(1000);
+            if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
+            if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
             return Decimal.add(v, 1).pow(2.5).times(10);
         },
         display: {
@@ -349,8 +361,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         cost() {
             let v = this.amount.value;
             if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
-            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
-            if (Decimal.gte(v, 1000)) v = Decimal.pow(v, 2).div(1000);
+            if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
+            if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
             return Decimal.add(v, 1).pow(1.5).times(50000);
         },
         display: {
@@ -426,6 +438,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             addend() { return kilnCoal.value; },
             description: "Charcoal Kilns",
             enabled() { return Decimal.gt(activeKilns.value, 0); }
+        })),
+        createExponentialModifier(() => ({
+            exponent: 1.25,
+            description: "3 Elves Trained",
+            enabled: elves.milestones[2].earned
         }))
     ]);
     const computedCoalGain = computed(() => coalGain.apply(0));

src/data/layers/elves.tsx

@@ -0,0 +1,326 @@
+/**
+ * @module
+ * @hidden
+ */
+import Spacer from "components/layout/Spacer.vue";
+import Modal from "components/Modal.vue";
+import { createCollapsibleModifierSections } from "data/common";
+import { main } from "data/projEntry";
+import { createBar, GenericBar } from "features/bars/bar";
+import { GenericBuyable } from "features/buyable";
+import { jsx, showIf } from "features/feature";
+import { createMilestone } from "features/milestones/milestone";
+import { createReset } from "features/reset";
+import { createUpgrade, GenericUpgrade } from "features/upgrades/upgrade";
+import { globalBus } from "game/events";
+import { BaseLayer, createLayer } from "game/layers";
+import { createMultiplicativeModifier, createSequentialModifier } from "game/modifiers";
+import { persistent } from "game/persistence";
+import player from "game/player";
+import Decimal, { DecimalSource, formatWhole } from "util/bignum";
+import { Direction } from "util/common";
+import { render, renderCol, renderRow } from "util/vue";
+import { computed, ref, Ref, unref, watchEffect } from "vue";
+import coal from "./coal";
+import trees from "./trees";
+import workshop from "./workshop";
+
+const id = "elves";
+const day = 4;
+const layer = createLayer(id, function (this: BaseLayer) {
+    const name = "Elves";
+    const colorBright = "red";
+    const colorDark = "#911D21";
+
+    const coalGoal = 1e9;
+
+    const dayProgress = createBar(() => ({
+        direction: Direction.Right,
+        width: 600,
+        height: 25,
+        fillStyle: `backgroundColor: ${colorDark}`,
+        progress: () =>
+            main.day.value === day
+                ? Decimal.div(totalElves.value, 6)
+                      .times(5 / 6)
+                      .add(
+                          Decimal.div(
+                              Decimal.add(coal.coal.value, 1).log10(),
+                              Decimal.log10(coalGoal)
+                          )
+                              .clamp(0, 1)
+                              .div(6)
+                      )
+                : 1,
+        display: jsx(() =>
+            main.day.value === day ? (
+                Decimal.lt(totalElves.value, 6) ? (
+                    <>{formatWhole(totalElves.value)}/6 elves</>
+                ) : (
+                    <>
+                        {formatWhole(coal.coal.value)}/{formatWhole(coalGoal)} coal
+                    </>
+                )
+            ) : (
+                ""
+            )
+        )
+    })) as GenericBar;
+
+    const elfReset = createReset(() => ({
+        thingsToReset: [trees, workshop, coal],
+        onReset() {
+            setTimeout(() => {
+                if (researchMilestone.earned.value) {
+                    trees.row1Upgrades[4].bought.value = true;
+                    trees.row2Upgrades[4].bought.value = true;
+                }
+            });
+        }
+    }));
+
+    function createElf(options: { name: string; description: string; buyable: GenericBuyable }) {
+        const trainingCost = computed(() => Decimal.pow(4, totalElves.value).times(1e6));
+        const buyProgress = persistent<DecimalSource>(0);
+
+        function update(diff: number) {
+            if (upgrade.bought.value) {
+                buyProgress.value = Decimal.add(buyProgress.value, diff);
+                const cooldown = Decimal.recip(computedAutoBuyCooldown.value);
+                while (Decimal.gte(buyProgress.value, cooldown)) {
+                    if (unref(options.buyable.canPurchase)) {
+                        options.buyable.amount.value = Decimal.add(options.buyable.amount.value, 1);
+                        buyProgress.value = cooldown.sub(0.1);
+                    } else {
+                        buyProgress.value = cooldown;
+                        break;
+                    }
+                }
+            }
+        }
+
+        const upgrade = createUpgrade(() => {
+            return {
+                buyProgress,
+                update,
+                resource: coal.coal,
+                cost: trainingCost,
+                display: () => ({
+                    title: options.name,
+                    description: jsx(() => (
+                        <>
+                            {options.description}
+                            {upgrade.bought.value ? null : (
+                                <>
+                                    {" "}
+                                    Training this elf will require resetting all your progress from
+                                    days 1-3.
+                                </>
+                            )}
+                        </>
+                    )),
+                    showCost: !upgrade.bought.value
+                }),
+                style: "width: 190px",
+                onPurchase: elfReset.reset
+            };
+        }) as GenericUpgrade & { buyProgress: Ref<number>; update: (diff: number) => void };
+        return upgrade;
+    }
+
+    const cuttersElf = createElf({
+        name: "Holly",
+        description:
+            "Holly will automatically purchase cutters you can afford, without actually spending any logs.",
+        buyable: trees.row1Buyables[0]
+    });
+    const plantersElf = createElf({
+        name: "Ivy",
+        description:
+            "Ivy will automatically purchase planters you can afford, without actually spending any logs.",
+        buyable: trees.row1Buyables[1]
+    });
+    const expandersElf = createElf({
+        name: "Hope",
+        description:
+            "Hope will automatically purchase forest expanders you can afford, without actually spending any logs.",
+        buyable: trees.row1Buyables[2]
+    });
+    const treesElves = [cuttersElf, plantersElf, expandersElf];
+    const heatedCuttersElf = createElf({
+        name: "Jack",
+        description:
+            "Jack will automatically purchase heated cutters you can afford, without actually spending any coal.",
+        buyable: coal.heatedCutters
+    });
+    const heatedPlantersElf = createElf({
+        name: "Mary",
+        description:
+            "Mary will automatically purchase heated planters you can afford, without actually spending any coal.",
+        buyable: coal.heatedPlanters
+    });
+    const fertilizerElf = createElf({
+        name: "Noel",
+        description:
+            "Noel will automatically purchase fertilized soil you can afford, without actually spending any ash.",
+        buyable: coal.moreFertilizer
+    });
+    const coalElves = [heatedCuttersElf, heatedPlantersElf, fertilizerElf];
+    const elves = {
+        cuttersElf,
+        plantersElf,
+        expandersElf,
+        heatedCuttersElf,
+        heatedPlantersElf,
+        fertilizerElf
+    };
+    const totalElves = computed(() => Object.values(elves).filter(elf => elf.bought.value).length);
+
+    const manualMilestone = createMilestone(() => ({
+        display: {
+            requirement: "1 Elf Trained",
+            effectDisplay:
+                "Manual cutting and planting can happen twice as often for each trained elf"
+        },
+        shouldEarn: () => Decimal.gte(totalElves.value, 1)
+    }));
+    const researchMilestone = createMilestone(() => ({
+        display: {
+            requirement: "2 Elves Trained",
+            effectDisplay: "Research I & II are't reset after training"
+        },
+        shouldEarn: () => Decimal.gte(totalElves.value, 2),
+        visibility: () => showIf(manualMilestone.earned.value)
+    }));
+    const coalGainMilestone = createMilestone(() => ({
+        display: {
+            requirement: "3 Elves Trained",
+            effectDisplay: "Coal gain is raised to the 1.25"
+        },
+        shouldEarn: () => Decimal.gte(totalElves.value, 3),
+        visibility: () => showIf(researchMilestone.earned.value)
+    }));
+    const logGainMilestone = createMilestone(() => ({
+        display: {
+            requirement: "4 Elves Trained",
+            effectDisplay: "Trees give twice as many logs"
+        },
+        shouldEarn: () => Decimal.gte(totalElves.value, 4),
+        visibility: () => showIf(coalGainMilestone.earned.value)
+    }));
+    const forestMilestone = createMilestone(() => ({
+        display: {
+            requirement: "5 Elves Trained",
+            effectDisplay: "Forest is twice as large"
+        },
+        shouldEarn: () => Decimal.gte(totalElves.value, 5),
+        visibility: () => showIf(logGainMilestone.earned.value)
+    }));
+    const elvesMilestone = createMilestone(() => ({
+        display: {
+            requirement: "6 Elves Trained",
+            effectDisplay: "Elves work twice as fast"
+        },
+        shouldEarn: () => Decimal.gte(totalElves.value, 6),
+        visibility: () => showIf(forestMilestone.earned.value)
+    }));
+    const milestones = [
+        manualMilestone,
+        researchMilestone,
+        coalGainMilestone,
+        logGainMilestone,
+        forestMilestone,
+        elvesMilestone
+    ];
+
+    const autoBuyCooldown = createSequentialModifier(() => [
+        createMultiplicativeModifier(() => ({
+            multiplier: 2,
+            description: "6 Elves Trained",
+            enabled: elvesMilestone.earned
+        }))
+    ]);
+    const computedAutoBuyCooldown = computed(() => autoBuyCooldown.apply(0.1));
+
+    const [generalTab, generalTabCollapsed] = createCollapsibleModifierSections(() => [
+        {
+            title: "Elf Auto-Buy Frequency",
+            modifier: autoBuyCooldown,
+            base: 10,
+            unit: "/s"
+        }
+    ]);
+    const showModifiersModal = ref(false);
+    const modifiersModal = jsx(() => (
+        <Modal
+            modelValue={showModifiersModal.value}
+            onUpdate:modelValue={(value: boolean) => (showModifiersModal.value = value)}
+            v-slots={{
+                header: () => <h2>{name} Modifiers</h2>,
+                body: generalTab
+            }}
+        />
+    ));
+
+    globalBus.on("update", diff => {
+        if (Decimal.lt(main.day.value, day)) {
+            return;
+        }
+
+        Object.values(elves).forEach(elf => elf.update(diff));
+    });
+
+    watchEffect(() => {
+        if (
+            main.day.value === day &&
+            Decimal.gte(totalElves.value, 6) &&
+            Decimal.gte(coal.coal.value, coalGoal)
+        ) {
+            main.loreTitle.value = "Day complete!";
+            main.loreBody.value =
+                "The workshop now hums with the bustling elves working everything. They can take it from here - you deserve a break after such a long day! Good Job!";
+            main.day.value = day + 1;
+            main.minimized.value = false;
+            player.devSpeed = 0;
+        }
+    });
+
+    return {
+        name,
+        color: colorBright,
+        elves,
+        totalElves,
+        milestones,
+        generalTabCollapsed,
+        minWidth: 700,
+        display: jsx(() => (
+            <>
+                <div>
+                    {main.day.value === day
+                        ? `Reach ${formatWhole(6)} trained elves and ${formatWhole(coalGoal)} ${
+                              coal.coal.displayName
+                          } to complete the day`
+                        : `Day Complete!`}{" "}
+                    -{" "}
+                    <button
+                        class="button"
+                        style="display: inline-block;"
+                        onClick={() => (showModifiersModal.value = true)}
+                    >
+                        Check Modifiers
+                    </button>
+                </div>
+                {render(dayProgress)}
+                {render(modifiersModal)}
+                <Spacer />
+                <div style="width: 600px">
+                    {renderRow(...treesElves)}
+                    {renderRow(...coalElves)}
+                </div>
+                {renderCol(...milestones)}
+            </>
+        ))
+    };
+});
+
+export default layer;

src/data/layers/trees.tsx

@@ -29,6 +29,7 @@ import { Direction, WithRequired } from "util/common";
 import { render, renderRow } from "util/vue";
 import { computed, ref, watchEffect } from "vue";
 import coal from "./coal";
+import elves from "./elves";
 import workshop from "./workshop";
 
 const id = "trees";
@@ -55,6 +56,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             addend: () => Decimal.div(workshop.foundationProgress.value, 2),
             description: "75% Foundation Completed",
             enabled: workshop.milestones.morePlantsMilestone1.earned
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 2,
+            description: "5 Elves Trained",
+            enabled: elves.milestones[4].earned
         }))
     ]) as WithRequired<Modifier, "description" | "revert">;
     const trees = createResource(
@@ -170,8 +176,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         cost() {
             let v = this.amount.value;
             if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
-            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
-            if (Decimal.gte(v, 1000)) v = Decimal.pow(v, 2).div(1000);
+            if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
+            if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
             return Decimal.times(100, v).add(200);
         },
         display: {
@@ -185,8 +191,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         cost() {
             let v = this.amount.value;
             if (Decimal.gte(v, 50)) v = Decimal.pow(v, 2).div(50);
-            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
-            if (Decimal.gte(v, 1000)) v = Decimal.pow(v, 2).div(1000);
+            if (Decimal.gte(v, 200)) v = Decimal.pow(v, 2).div(200);
+            if (Decimal.gte(v, 2e6)) v = Decimal.pow(v, 2).div(2e6);
             return Decimal.times(100, v).add(200);
         },
         display: {
@@ -198,7 +204,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
     const expandingForestBuyable = createBuyable(() => ({
         resource: logs,
         cost() {
-            return Decimal.pow(Decimal.add(this.amount.value, 1), 1.5).times(500);
+            let v = this.amount.value;
+            if (Decimal.gte(v, 100)) v = Decimal.pow(v, 2).div(100);
+            if (Decimal.gte(v, 1e5)) v = Decimal.pow(v, 2).div(1e5);
+            return Decimal.pow(Decimal.add(v, 1), 1.5).times(500);
         },
         display: {
             title: "Expand Forest",
@@ -213,7 +222,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
         width: 600,
         height: 25,
         fillStyle: `backgroundColor: ${colorDark}`,
-        progress: () => Decimal.log10(totalLogs.value).div(Math.log10(totalLogGoal)),
+        progress: () =>
+            main.day.value === day
+                ? Decimal.log10(totalLogs.value).div(Math.log10(totalLogGoal))
+                : 1,
         display: jsx(() =>
             main.day.value === day ? (
                 <>
@@ -243,6 +255,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             multiplier: 0.5,
             description: "Sharper Fingers",
             enabled: manualCutUpgrade2.bought
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: () => Decimal.pow(0.5, elves.totalElves.value),
+            description: "1 Elf Trained",
+            enabled: elves.milestones[0].earned
         }))
     ]);
     const computedManualCuttingCooldown = computed(() => manualCuttingCooldown.apply(1));
@@ -299,6 +316,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             multiplier: 0.5,
             description: "Greener Fingers",
             enabled: manualPlantUpgrade2.bought
+        })),
+        createMultiplicativeModifier(() => ({
+            multiplier: () => Decimal.pow(0.5, elves.totalElves.value),
+            description: "1 Elf Trained",
+            enabled: elves.milestones[0].earned
         }))
     ]);
     const computedManualPlantingCooldown = computed(() => manualPlantingCooldown.apply(1));
@@ -368,6 +390,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
             description: "Fertilized Soil",
             enabled: () => Decimal.gt(coal.moreFertilizer.amount.value, 0)
         })),
+        createMultiplicativeModifier(() => ({
+            multiplier: 2,
+            description: "4 Elves Trained",
+            enabled: elves.milestones[3].earned
+        })),
         createExponentialModifier(() => ({
             exponent: 1.1,
             description: "100% Foundation Completed",
@@ -490,6 +517,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
             visible: manualCutUpgrade1.bought,
             unit: "/click"
         },
+        {
+            title: "Manual Cutting Cooldown",
+            modifier: manualCuttingCooldown,
+            base: 1,
+            visible: manualCutUpgrade1.bought,
+            unit: "s"
+        },
         {
             title: "Manual Planting Amount",
             modifier: manualPlantingAmount,
@@ -497,6 +531,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
             visible: manualPlantUpgrade1.bought,
             unit: "/click"
         },
+        {
+            title: "Manual Planting Cooldown",
+            modifier: manualPlantingCooldown,
+            base: 1,
+            visible: manualPlantUpgrade1.bought,
+            unit: "s"
+        },
         {
             title: `Auto Cutting Amount`,
             modifier: autoCuttingAmount,

src/data/layers/workshop.tsx

@@ -56,8 +56,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 </span>
             </>
         )),
-        visibility: () => showIf(main.day.value === day),
-        canClick: () => Decimal.gte(foundationConversion.actualGain.value, 1),
+        visibility: () => showIf(Decimal.lt(foundationProgress.value, 100)),
+        canClick: () =>
+            Decimal.gte(foundationConversion.actualGain.value, 1) &&
+            Decimal.lt(foundationProgress.value, 100),
         onClick() {
             if (!unref(this.canClick)) {
                 return;
@@ -147,7 +149,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
         width: 600,
         height: 25,
         fillStyle: `backgroundColor: ${colorDark}`,
-        progress: () => Decimal.div(foundationProgress.value, 100),
+        progress: () => (main.day.value === day ? Decimal.div(foundationProgress.value, 100) : 1),
         display: jsx(() =>
             main.day.value === day ? <>{formatWhole(foundationProgress.value)}%</> : ""
         )
@@ -182,6 +184,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 {render(dayProgress)}
                 <Spacer />
                 {render(buildFoundation)}
+                <div>You have {formatWhole(foundationProgress.value)}% completed</div>
                 <Spacer />
                 {renderCol(...Object.values(milestones))}
             </>

src/data/projEntry.tsx

@@ -17,7 +17,9 @@ import workshop from "./layers/workshop";
 import treeSymbol from "./symbols/tree.png";
 import workshopSymbol from "./symbols/sws.png";
 import coalSymbol from "./symbols/coal.png";
+import elfSymbol from "./symbols/elf.png";
 import coal from "./layers/coal";
+import elves from "./layers/elves";
 
 export interface Day extends VueFeature {
     day: number;
@@ -121,8 +123,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
         createDay(() => ({
             day: 4,
             shouldNotify: false,
-            layer: null,
-            symbol: "",
+            layer: "elves",
+            symbol: elfSymbol,
             story: "Alright, it seems you finally have enough things setup to start bringing in the elves! Unfortunately, it seems they'll need to be retrained on how to help, since they're out of practice by 11 months!"
         })),
         createDay(() => ({
@@ -310,7 +312,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
 export const getInitialLayers = (
     /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     player: Partial<PlayerData>
-): Array<GenericLayer> => [main, trees, workshop, coal];
+): Array<GenericLayer> => [main, trees, workshop, coal, elves];
 
 /**
  * A computed ref whose value is true whenever the game is over.

src/features/upgrades/Upgrade.vue

@@ -107,7 +107,7 @@ export default defineComponent({
                                 Currently: <EffectDisplay />
                             </div>
                         ) : null}
-                        {props.resource != null ? (
+                        {props.resource != null && currDisplay.showCost !== false ? (
                             <>
                                 <br />
                                 Cost: {props.resource &&

src/features/upgrades/upgrade.ts

@@ -38,6 +38,7 @@ export interface UpgradeOptions {
               title?: CoercableComponent;
               description: CoercableComponent;
               effectDisplay?: CoercableComponent;
+              showCost?: boolean;
           }
     >;
     mark?: Computable<boolean | string>;