Implemented first row of upgrades

src/data/Day.vue

@@ -30,12 +30,13 @@ import type { Ref } from "vue";
 import Notif from "components/Notif.vue";
 import { computeComponent } from "util/vue";
 import { ProcessedComputable } from "util/computed";
+import Decimal from "util/bignum";
+import { main } from "./projEntry";
 
 const props = defineProps<{
     day: number;
     symbol: CoercableComponent;
     opened: Ref<boolean>;
-    unlocked: ProcessedComputable<boolean>;
     shouldNotify: ProcessedComputable<boolean>;
 }>();
 
@@ -48,7 +49,10 @@ const emit = defineEmits<{
 const symbolComp = computeComponent(toRef(props, "symbol"));
 
 const canOpen = computed(
-    () => unref(props.unlocked) && new Date().getMonth() === 12 && new Date().getDate() >= props.day
+    () =>
+        Decimal.gte(main.day.value, props.day) &&
+        new Date().getMonth() === 12 &&
+        new Date().getDate() >= props.day
 );
 
 function tryUnlock() {

src/data/layers/trees.tsx

@@ -3,18 +3,26 @@
  * @hidden
  */
 import Spacer from "components/layout/Spacer.vue";
+import { main } from "data/projEntry";
 import { createClickable } from "features/clickables/clickable";
 import { jsx } from "features/feature";
 import MainDisplay from "features/resources/MainDisplay.vue";
 import { createResource } from "features/resources/resource";
-import Resource from "features/resources/Resource.vue";
 import { addTooltip } from "features/tooltips/tooltip";
 import Tooltip from "features/tooltips/Tooltip.vue";
+import { createUpgrade } from "features/upgrades/upgrade";
+import { globalBus } from "game/events";
 import { BaseLayer, createLayer } from "game/layers";
-import { createModifierSection, createSequentialModifier } from "game/modifiers";
+import {
+    createAdditiveModifier,
+    createModifierSection,
+    createMultiplicativeModifier,
+    createSequentialModifier
+} from "game/modifiers";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
+import { Direction } from "util/common";
 import { renderRow } from "util/vue";
-import { computed } from "vue";
+import { computed, watchEffect } from "vue";
 
 const id = "trees";
 const layer = createLayer(id, function (this: BaseLayer) {
@@ -22,28 +30,100 @@ const layer = createLayer(id, function (this: BaseLayer) {
     const color = "#4BDC13";
 
     const logs = createResource<DecimalSource>(0, "logs");
-    const trees = createResource<DecimalSource>(1e6, "trees");
+    const trees = createResource<DecimalSource>(10, "trees");
     const saplings = createResource<DecimalSource>(0, "saplings");
 
-    const manualCuttingAmount = createSequentialModifier(() => []);
+    const manualCutUpgrade1 = createUpgrade(() => ({
+        resource: logs,
+        cost: 10,
+        display: {
+            title: "Wooden Fingers",
+            description: "Cut down an additional tree per click"
+        }
+    }));
+    const manualPlantUpgrade1 = createUpgrade(() => ({
+        resource: saplings,
+        cost: 10,
+        display: {
+            title: "Leafy Fingers",
+            description: "Plant an additional tree per click"
+        }
+    }));
+    const autoCutUpgrade1 = createUpgrade(() => ({
+        resource: logs,
+        cost: 25,
+        display: {
+            title: "Automated Knives",
+            description: "Cut down a tree every second"
+        }
+    }));
+    const autoPlantUpgrade1 = createUpgrade(() => ({
+        resource: saplings,
+        cost: 25,
+        display: {
+            title: "Automated Spade",
+            description: "Plant a tree every second"
+        }
+    }));
+    const researchUpgrade1 = createUpgrade(() => ({
+        resource: logs,
+        cost: 100,
+        display: {
+            title: "Research I",
+            description: "Get 25% more logs from each tree cut down and unlock more upgrades"
+        }
+    }));
+    const row1Upgrades = [
+        manualCutUpgrade1,
+        manualPlantUpgrade1,
+        autoCutUpgrade1,
+        autoPlantUpgrade1,
+        researchUpgrade1
+    ];
+
+    const manualCuttingAmount = createSequentialModifier(() => [
+        createAdditiveModifier(() => ({
+            addend: 1,
+            description: "Wooden Fingers",
+            enabled: manualCutUpgrade1.bought
+        }))
+    ]);
     const manualComputedCuttingAmount = computed(() => manualCuttingAmount.apply(1));
-    const manualCuttingAmountDisplay = createModifierSection("Modifiers", "", manualCuttingAmount);
 
-    const autoCuttingAmount = createSequentialModifier(() => []);
+    const autoCuttingAmount = createSequentialModifier(() => [
+        createAdditiveModifier(() => ({
+            addend: 1,
+            description: "Automated Knives",
+            enabled: autoCutUpgrade1.bought
+        }))
+    ]);
     const autoComputedCuttingAmount = computed(() => autoCuttingAmount.apply(0));
-    const autoCuttingAmountDisplay = createModifierSection("Modifiers", "", autoCuttingAmount);
 
-    const manualPlantingAmount = createSequentialModifier(() => []);
+    const manualPlantingAmount = createSequentialModifier(() => [
+        createAdditiveModifier(() => ({
+            addend: 1,
+            description: "Leafy Fingers",
+            enabled: manualPlantUpgrade1.bought
+        }))
+    ]);
     const manualComputedPlantingAmount = computed(() => manualPlantingAmount.apply(1));
-    const manualPlantingAmountDisplay = createModifierSection(
-        "Modifiers",
-        "",
-        manualPlantingAmount
-    );
 
-    const autoPlantingAmount = createSequentialModifier(() => []);
+    const autoPlantingAmount = createSequentialModifier(() => [
+        createAdditiveModifier(() => ({
+            addend: 1,
+            description: "Automated Spade",
+            enabled: autoPlantUpgrade1.bought
+        }))
+    ]);
     const autoComputedPlantingAmount = computed(() => autoPlantingAmount.apply(0));
-    const autoPlantingAmountDisplay = createModifierSection("Modifiers", "", autoPlantingAmount);
+
+    const logGain = createSequentialModifier(() => [
+        createMultiplicativeModifier(() => ({
+            multiplier: 1.25,
+            description: "Research I",
+            enabled: researchUpgrade1.bought
+        }))
+    ]);
 
     const cutTree = createClickable(() => ({
         display: {
@@ -60,13 +140,16 @@ const layer = createLayer(id, function (this: BaseLayer) {
         },
         canClick: () => Decimal.gt(trees.value, 0),
         onClick() {
-            trees.value = Decimal.sub(trees.value, 1);
+            const amount = Decimal.min(trees.value, manualComputedCuttingAmount.value);
-            logs.value = Decimal.add(logs.value, 1);
+            trees.value = Decimal.sub(trees.value, amount);
-            saplings.value = Decimal.add(saplings.value, 1);
+            logs.value = Decimal.add(logs.value, logGain.apply(amount));
+            saplings.value = Decimal.add(saplings.value, amount);
         }
     }));
     addTooltip(cutTree, {
-        display: jsx(() => manualCuttingAmountDisplay)
+        display: jsx(() => createModifierSection("Modifiers", "", manualCuttingAmount, 1)),
+        direction: Direction.Down,
+        style: "width: 400px; text-align: left"
     });
 
     const plantTree = createClickable(() => ({
@@ -84,12 +167,45 @@ const layer = createLayer(id, function (this: BaseLayer) {
         },
         canClick: () => Decimal.gt(saplings.value, 0),
         onClick() {
-            trees.value = Decimal.add(trees.value, 1);
+            const amount = Decimal.min(saplings.value, manualComputedPlantingAmount.value);
-            saplings.value = Decimal.sub(saplings.value, 1);
+            trees.value = Decimal.add(trees.value, amount);
+            saplings.value = Decimal.sub(saplings.value, amount);
         }
     }));
-    addTooltip(cutTree, {
+    addTooltip(plantTree, {
-        display: jsx(() => manualPlantingAmountDisplay)
+        display: jsx(() => createModifierSection("Modifiers", "", manualPlantingAmount, 1)),
+        direction: Direction.Down,
+        style: "width: 400px; text-align: left"
+    });
+
+    watchEffect(() => {
+        if (main.day.value === 1 && false) {
+            main.loreTitle.value = "Day complete!";
+            main.loreBody.value =
+                "Santa looks at all the wood you've gathered and tells you you've done well! He says you should take the rest of the day off so you're refreshed for tomorrow's work. Good Job!";
+            main.day.value = 2;
+        }
+    });
+
+    globalBus.on("update", diff => {
+        if (Decimal.lt(main.day.value, 1)) {
+            return;
+        }
+
+        const amountCut = Decimal.min(
+            trees.value,
+            Decimal.times(autoComputedCuttingAmount.value, diff)
+        );
+        trees.value = Decimal.sub(trees.value, amountCut);
+        logs.value = Decimal.add(logs.value, logGain.apply(amountCut));
+        saplings.value = Decimal.add(saplings.value, amountCut);
+
+        const amountPlanted = Decimal.min(
+            saplings.value,
+            Decimal.times(autoComputedPlantingAmount.value, diff)
+        );
+        trees.value = Decimal.add(trees.value, amountPlanted);
+        saplings.value = Decimal.sub(saplings.value, amountPlanted);
     });
 
     return {
@@ -100,6 +216,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
         saplings,
         cutTree,
         plantTree,
+        row1Upgrades,
+        minWidth: 700,
         display: jsx(() => (
             <>
                 <MainDisplay resource={logs} color={color} style="margin-bottom: 0" />
@@ -108,7 +226,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <br />
                 {Decimal.gt(autoComputedCuttingAmount.value, 0) ? (
                     <>
-                        <Tooltip display={jsx(() => autoCuttingAmountDisplay)}>
+                        <Tooltip
+                            display={jsx(() =>
+                                createModifierSection("Modifiers", "", autoCuttingAmount)
+                            )}
+                            direction={Direction.Down}
+                            style="width: 400px; text-align: left"
+                        >
                             You cut down {format(autoComputedCuttingAmount.value)} trees/s
                         </Tooltip>
                         <br />
@@ -116,7 +240,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 ) : null}
                 {Decimal.gt(autoComputedPlantingAmount.value, 0) ? (
                     <>
-                        <Tooltip display={jsx(() => autoPlantingAmountDisplay)}>
+                        <Tooltip
+                            display={jsx(() =>
+                                createModifierSection("Modifiers", "", autoPlantingAmount)
+                            )}
+                            direction={Direction.Down}
+                            style="width: 400px; text-align: left"
+                        >
                             You plant {format(autoComputedPlantingAmount.value)} trees/s
                         </Tooltip>
                         <br />
@@ -124,6 +254,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 ) : null}
                 <Spacer />
                 {renderRow(cutTree, plantTree)}
+                <Spacer />
+                {renderRow(...row1Upgrades)}
             </>
         ))
     };

src/data/projEntry.tsx

@@ -9,7 +9,7 @@ import type { PlayerData } from "game/player";
 import player from "game/player";
 import { format, formatTime } from "util/bignum";
 import { render, renderRow, VueFeature } from "util/vue";
-import { computed, ref } from "vue";
+import { computed, ref, unref } from "vue";
 import type { Ref } from "vue";
 import trees from "./layers/trees";
 import { createLazyProxy } from "util/proxies";
@@ -29,12 +29,12 @@ export interface Day extends VueFeature {
 export const main = createLayer("main", function (this: BaseLayer) {
     const day = persistent<number>(1);
 
-    const openLore = ref<number>(-1);
+    const loreTitle = ref<string>("");
+    const loreBody = ref<string>("");
 
     function createDay(
         optionsFunc: () => {
             day: number;
-            unlocked: Computable<boolean>;
             shouldNotify: Computable<boolean>;
             layer: string | null;
             symbol: CoercableComponent;
@@ -46,25 +46,23 @@ export const main = createLayer("main", function (this: BaseLayer) {
         return createLazyProxy(() => {
             const day = optionsFunc();
 
-            const unlocked = convertComputable(day.unlocked);
             const shouldNotify = convertComputable(day.shouldNotify);
 
             return {
                 ...day,
                 opened,
-                unlocked,
                 shouldNotify,
                 [Component]: Day,
                 [GatherProps]: function (this: Day) {
-                    const { day, layer, symbol, opened, unlocked, shouldNotify } = this;
+                    const { day, layer, symbol, opened, shouldNotify, story } = this;
                     return {
                         day,
                         symbol,
                         opened,
-                        unlocked,
                         shouldNotify,
                         onOpenLore() {
-                            openLore.value = day;
+                            loreTitle.value = unref(layers[layer ?? "trees"]?.name ?? "");
+                            loreBody.value = story;
                         },
                         onOpenLayer() {
                             if (player.tabs.includes(layer ?? "trees")) {
@@ -76,7 +74,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
                         },
                         onUnlockLayer() {
                             opened.value = true;
-                            openLore.value = day;
+                            loreTitle.value = unref(layers[layer ?? "trees"]?.name ?? "");
+                            loreBody.value = story;
                         }
                     };
                 }
@@ -87,7 +86,6 @@ export const main = createLayer("main", function (this: BaseLayer) {
     const days = [
         createDay(() => ({
             day: 1,
-            unlocked: true,
             shouldNotify: false,
             layer: null,
             symbol: "🎄",
@@ -95,7 +93,6 @@ export const main = createLayer("main", function (this: BaseLayer) {
         })),
         createDay(() => ({
             day: 2,
-            unlocked: false,
             shouldNotify: false,
             layer: null,
             symbol: "<span class='material-icons'>cabin</span>",
@@ -103,7 +100,6 @@ export const main = createLayer("main", function (this: BaseLayer) {
         })),
         createDay(() => ({
             day: 3,
-            unlocked: false,
             shouldNotify: false,
             layer: null,
             symbol: "🧝",
@@ -113,11 +109,11 @@ export const main = createLayer("main", function (this: BaseLayer) {
 
     const loreModal = jsx(() => (
         <Modal
-            modelValue={openLore.value !== -1}
+            modelValue={loreBody.value !== ""}
-            onUpdate:modelValue={() => (openLore.value = -1)}
+            onUpdate:modelValue={() => (loreBody.value = "")}
             v-slots={{
-                header: () => <h2>{layers[days[openLore.value - 1]?.layer ?? "trees"]?.name}</h2>,
+                header: () => <h2>{loreTitle.value}</h2>,
-                body: () => days[openLore.value - 1]?.story ?? ""
+                body: () => loreBody.value
             }}
         />
     ));
@@ -126,6 +122,8 @@ export const main = createLayer("main", function (this: BaseLayer) {
         name: "Calendar",
         days,
         day,
+        loreTitle,
+        loreBody,
         minWidth: 710,
         display: jsx(() => (
             <>