From f3a4f5e5fe294883239aea3e7143f624d3bd444b Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Wed, 30 Nov 2022 19:51:03 -0600 Subject: [PATCH] Implemented first row of upgrades --- src/data/Day.vue | 8 +- src/data/layers/trees.tsx | 184 ++++++++++++++++++++++++++++++++------ src/data/projEntry.tsx | 30 +++---- 3 files changed, 178 insertions(+), 44 deletions(-) diff --git a/src/data/Day.vue b/src/data/Day.vue index 766cf90..9a07d49 100644 --- a/src/data/Day.vue +++ b/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; - unlocked: ProcessedComputable; shouldNotify: ProcessedComputable; }>(); @@ -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() { diff --git a/src/data/layers/trees.tsx b/src/data/layers/trees.tsx index 3e24e03..ed8d807 100644 --- a/src/data/layers/trees.tsx +++ b/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(0, "logs"); - const trees = createResource(1e6, "trees"); + const trees = createResource(10, "trees"); const saplings = createResource(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); - logs.value = Decimal.add(logs.value, 1); - saplings.value = Decimal.add(saplings.value, 1); + const amount = Decimal.min(trees.value, manualComputedCuttingAmount.value); + trees.value = Decimal.sub(trees.value, amount); + 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); - saplings.value = Decimal.sub(saplings.value, 1); + const amount = Decimal.min(saplings.value, manualComputedPlantingAmount.value); + trees.value = Decimal.add(trees.value, amount); + saplings.value = Decimal.sub(saplings.value, amount); } })); - addTooltip(cutTree, { - display: jsx(() => manualPlantingAmountDisplay) + addTooltip(plantTree, { + 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(() => ( <> @@ -108,7 +226,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
{Decimal.gt(autoComputedCuttingAmount.value, 0) ? ( <> - autoCuttingAmountDisplay)}> + + createModifierSection("Modifiers", "", autoCuttingAmount) + )} + direction={Direction.Down} + style="width: 400px; text-align: left" + > You cut down {format(autoComputedCuttingAmount.value)} trees/s
@@ -116,7 +240,13 @@ const layer = createLayer(id, function (this: BaseLayer) { ) : null} {Decimal.gt(autoComputedPlantingAmount.value, 0) ? ( <> - autoPlantingAmountDisplay)}> + + createModifierSection("Modifiers", "", autoPlantingAmount) + )} + direction={Direction.Down} + style="width: 400px; text-align: left" + > You plant {format(autoComputedPlantingAmount.value)} trees/s
@@ -124,6 +254,8 @@ const layer = createLayer(id, function (this: BaseLayer) { ) : null} {renderRow(cutTree, plantTree)} + + {renderRow(...row1Upgrades)} )) }; diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx index 65e7077..e16630f 100644 --- a/src/data/projEntry.tsx +++ b/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(1); - const openLore = ref(-1); + const loreTitle = ref(""); + const loreBody = ref(""); function createDay( optionsFunc: () => { day: number; - unlocked: Computable; shouldNotify: Computable; 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: "cabin", @@ -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(() => ( (openLore.value = -1)} + modelValue={loreBody.value !== ""} + onUpdate:modelValue={() => (loreBody.value = "")} v-slots={{ - header: () =>

{layers[days[openLore.value - 1]?.layer ?? "trees"]?.name}

, - body: () => days[openLore.value - 1]?.story ?? "" + header: () =>

{loreTitle.value}

, + 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(() => ( <>