diff --git a/src/data/layers/sleigh.tsx b/src/data/layers/sleigh.tsx new file mode 100644 index 0000000..93247e9 --- /dev/null +++ b/src/data/layers/sleigh.tsx @@ -0,0 +1,225 @@ +/** + * @module + * @hidden + */ +import Spacer from "components/layout/Spacer.vue"; +import { createCollapsibleMilestones} from "data/common"; +import { main } from "data/projEntry"; +import { createBar } from "features/bars/bar"; +import { jsx, showIf } from "features/feature"; +import { createMilestone } from "features/milestones/milestone"; +import { BaseLayer, createLayer } from "game/layers"; +import Decimal, { DecimalSource, format, formatWhole } from "util/bignum"; +import { Direction} from "util/common"; +import { render } from "util/vue"; +import { computed, watchEffect } from "vue"; +import management from "./management"; +import trees from "./trees"; +import metal from "./metal"; +import plastic from "./plastic" +import { createBuyable, GenericBuyable } from "features/buyable"; +import { Resource } from "features/resources/resource"; +import { isArray } from "@vue/shared"; + +const id = "sleigh"; +const day = 22; +const layer = createLayer(id, function (this: BaseLayer) { + const name = "Sleigh"; + const color = "#D71830"; + const colorDark = "#A01020"; + function displayCost( + res: Resource | Resource[], + cost: DecimalSource, + label: string + ) { + const affordable = (isArray(res) ? res : [res]).every(res => Decimal.gte(res.value, cost)); + return ( + + {format(cost)} {label} + + ); + } + const sleighProgress = computed(() => sleigh.amount) + const sleighCost = computed(() => { + let v = sleighProgress.value.value; + return { + wood: Decimal.mul(1e60, Decimal.pow(1.2, v)), + metal: Decimal.mul(1e40, Decimal.pow(1.1, v)), + plastic: Decimal.mul(1e10, Decimal.pow(1.05, v)) + }; + }); + const sleigh = createBuyable(() => ({ + display: jsx(() => ( + <> + Fix 1% of the sleigh +
+
+ + Cost: {displayCost(trees.logs, sleighCost.value.wood, "logs")}, + {displayCost(metal.metal, sleighCost.value.metal, "metal")}, + {displayCost(plastic.plastic, sleighCost.value.plastic, "plastic")} + + + )), + canPurchase(): boolean { + return ( + sleighCost.value.wood.lte(trees.logs.value) && + sleighCost.value.metal.lte(metal.metal.value) && + sleighCost.value.plastic.lte(plastic.plastic.value) + ); + }, + onPurchase() { + this.amount.value = Decimal.add(this.amount.value, 1); + }, + visibility: () => showIf(Decimal.lt(sleighProgress.value.value, 100)), + style: "width: 600px" + })) as GenericBuyable; + + const shouldShowPopups = computed(() => true); + const milestone1 = createMilestone(() => ({ + display: { + requirement: "1% Sleigh Fixed", + effectDisplay: "Ore gives 5% more metal for each % of sleigh fixed" + }, + shouldEarn: () => Decimal.gte(sleighProgress.value.value, 1), + showPopups: shouldShowPopups + })); + const milestone2 = createMilestone(() => ({ + display: { + requirement: "10% Sleigh Fixed", + effectDisplay: "Gain an additional 5% more wood for each 5% of sleigh fixed" + }, + shouldEarn: () => Decimal.gte(sleighProgress.value.value, 10), + showPopups: shouldShowPopups + })); + const milestone3 = createMilestone(() => ({ + display: { + requirement: "20% Sleigh Fixed", + effectDisplay: "Gain an additional 5% more plastic for each 5% of sleigh fixed" + }, + shouldEarn: () => Decimal.gte(sleighProgress.value.value, 20), + showPopups: shouldShowPopups + })); + const milestone4 = createMilestone(() => ({ + display: { + requirement: "30% Sleigh Fixed", + effectDisplay: "All automatic metal actions are doubled" + }, + shouldEarn: () => Decimal.gte(sleighProgress.value.value, 30), + showPopups: shouldShowPopups + })); + const milestone5 = createMilestone(() => ({ + display: { + requirement: "40% Sleigh Fixed", + effectDisplay: "Plastic gain is doubled" + }, + shouldEarn: () => Decimal.gte(sleighProgress.value.value, 40), + showPopups: shouldShowPopups + })); + const milestone6 = createMilestone(() => ({ + display: { + requirement: "50% Sleigh Fixed", + effectDisplay: "Trees give 10x as many logs" + }, + shouldEarn: () => Decimal.gte(sleighProgress.value.value, 50), + showPopups: shouldShowPopups + })); + const milestone7 = createMilestone(() => ({ + display: { + requirement: "75% Sleigh Fixed", + effectDisplay: "Gain 10 extra refineries for every 2% of sleigh fixed" + }, + shouldEarn: () => Decimal.gte(sleighProgress.value.value, 75), + showPopups: shouldShowPopups + })); + const milestone8 = createMilestone(() => ({ + display: { + requirement: "100% Sleigh Fixed", + effectDisplay: "Metal per ore is raised to the 1.2th power" + }, + shouldEarn: () => Decimal.gte(sleighProgress.value.value, 100), + showPopups: shouldShowPopups + })); + const milestones = { + milestone1, + milestone2, + milestone3, + milestone4, + milestone5, + milestone6, + milestone7, + milestone8 + }; + const { collapseMilestones, display: milestonesDisplay } = + createCollapsibleMilestones(milestones); + + const dayProgress = createBar(() => ({ + direction: Direction.Right, + width: 600, + height: 25, + fillStyle: `backgroundColor: ${colorDark}`, + progress: () => + main.day.value === day || main.currentlyMastering.value?.name === name + ? Decimal.div(sleighProgress.value.value, 100) + : 1, + display: jsx(() => + main.day.value === day || main.currentlyMastering.value?.name === name ? ( + <>{formatWhole(sleighProgress.value.value)}% + ) : ( + "" + ) + ) + })); + + watchEffect(() => { + if (main.day.value === day && Decimal.gte(sleighProgress.value.value, 100)) { + main.completeDay(); + } + }); + + return { + name, + day, + color, + sleighProgress, + milestones, + collapseMilestones, + minWidth: 700, + sleigh, + display: jsx(() => ( + <> +
+ {main.day.value === day + ? `Fix the sleigh to complete the day` + : `${name} Complete!`} +
+ {render(dayProgress)} + +
+ The sleigh is +

+ {formatWhole(sleighProgress.value.value)} +

+ % fixed +
+ {Decimal.lt(sleighProgress.value.value, 100) || + management.elfTraining.expandersElfTraining.milestones[2].earned.value ? ( + + ) : null} + {render(sleigh)} + + {milestonesDisplay()} + + )), + minimizedDisplay: jsx(() => ( +
+ {name}{" "} + + {formatWhole(sleighProgress.value.value)}% sleigh + +
+ )), + }; +}); + +export default layer; diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx index bdc9897..25fcfaf 100644 --- a/src/data/projEntry.tsx +++ b/src/data/projEntry.tsx @@ -36,6 +36,7 @@ import ribbon from "./layers/ribbon"; import toys from "./layers/toys"; import trees from "./layers/trees"; import workshop from "./layers/workshop"; +import sleigh from "./layers/sleigh"; import wrappingPaper from "./layers/wrapping-paper"; import boxesSymbol from "./symbols/cardboardBox.png"; import clothSymbol from "./symbols/cloth.png"; @@ -487,9 +488,9 @@ export const main = createLayer("main", function (this: BaseLayer) { createDay(() => ({ day: 22, shouldNotify: false, - layer: null, // "sleigh" + layer: "sleigh", // "sleigh" symbol: "", - story: "", + story: "default body", completedStory: "", masteredStory: "" })), @@ -621,7 +622,8 @@ export const getInitialLayers = ( ribbon, toys, factory, - reindeer + reindeer, + sleigh ]; /**