This commit is contained in:
ducdat0507 2022-12-24 13:13:26 +07:00
commit 649aa0b93f
8 changed files with 324 additions and 35 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -29,6 +29,7 @@ import {
import { noPersist, persistent } from "game/persistence";
import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
import { WithRequired } from "util/common";
import { Computable } from "util/computed";
import { render, renderGrid, renderRow } from "util/vue";
import { computed, ref, unref } from "vue";
import boxes from "./boxes";
@ -48,7 +49,7 @@ interface BetterFertilizerUpgOptions {
canAfford: () => boolean;
onPurchase: VoidFunction;
display: JSXFunction;
style: StyleValue;
style: Computable<StyleValue>;
visibility: () => Visibility;
}
interface UnlockKilnUpgOptions {
@ -58,7 +59,7 @@ interface UnlockKilnUpgOptions {
title: string;
description: string;
};
style: StyleValue;
style: Computable<StyleValue>;
visibility: () => Visibility;
}
interface EfficientSmeltherUpgOptions {
@ -68,7 +69,7 @@ interface EfficientSmeltherUpgOptions {
title: string;
description: string;
};
style: StyleValue;
style: Computable<StyleValue>;
visibility: () => Visibility;
}
@ -361,7 +362,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Warmer Cutters",
description: "Cut down twice as many trees/s"
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
}));
const warmerPlanters = createUpgrade(() => ({
resource: noPersist(coal),
@ -370,7 +373,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Warmer Planters",
description: "Plant twice as many trees/s"
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
}));
const basicFertilizer = createUpgrade(() => ({
resource: noPersist(ash),
@ -379,7 +384,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Ashy Soil",
description: "Trees give 25% more logs"
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
}));
const unlockBonfire = createUpgrade(() => ({
resource: fireResource,
@ -389,9 +396,11 @@ const layer = createLayer(id, function (this: BaseLayer) {
description: "Put all those fires together into a larger blaze"
},
onPurchase() {
fireResource.value = Decimal.add(fireResource.value, this.cost);
fireResource.value = Decimal.add(fireResource.value, this.cost as number);
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
}));
const row1upgrades = [warmerCutters, warmerPlanters, basicFertilizer, unlockBonfire];
@ -402,7 +411,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Dedicated Cutter Heaters",
description: "Double the bonus from Heated Cutters"
},
style: { color: colorText },
style() {
return this.bought.value ? "" : { color: colorText };
},
visibility: () => showIf(unlockBonfire.bought.value)
}));
const dedicatedPlanters = createUpgrade(() => ({
@ -412,7 +423,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Dedicated Planter Heaters",
description: "Double the bonus from Heated Planters"
},
style: { color: colorText },
style() {
return this.bought.value ? "" : { color: colorText };
},
visibility: () => showIf(unlockBonfire.bought.value)
}));
const betterFertilizer: Upgrade<BetterFertilizerUpgOptions> = createUpgrade(() => ({
@ -435,7 +448,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
{formatWhole(1e5)} {ash.displayName}
</>
)),
style: { color: colorText },
style() {
return this.bought.value ? "" : { color: colorText };
},
visibility: () => showIf(unlockBonfire.bought.value)
}));
@ -446,7 +461,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Efficient Fires",
description: "Move the fires underground to keep the coal from turning to ash"
},
style: { color: colorText },
style() {
return this.bought.value ? "" : { color: colorText };
},
visibility: () => showIf(unlockBonfire.bought.value)
}));
const row2upgrades = [dedicatedCutters, dedicatedPlanters, betterFertilizer, unlockKiln];
@ -458,7 +475,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Efficient Crucibles",
description: "Double auto smelting speed and triple metal gain from auto smelting"
},
style: { color: colorText },
style() {
return this.bought.value ? "" : { color: colorText };
},
visibility: () => showIf(oil.depthMilestones[4].earned.value)
}));
const arsonistAssistance = createUpgrade(() => ({
@ -468,7 +487,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Arsonist Assistance",
description: "Every elf at or above level 5 doubles ash gain"
},
style: { color: colorText },
style() {
return this.bought.value ? "" : { color: colorText };
},
visibility: () =>
showIf(management.elfTraining.coalDrillElfTraining.milestones[3].earned.value)
}));
@ -479,7 +500,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Refined Coal",
description: "Refineries boost coal gain"
},
style: { color: colorText },
style() {
return this.bought.value ? "" : { color: colorText };
},
visibility: () =>
showIf(management.elfTraining.coalDrillElfTraining.milestones[3].earned.value)
}));
@ -490,7 +513,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Colored Fire",
description: "Green dye also affects small fire synergy"
},
style: { color: colorText },
style() {
return this.bought.value ? "" : { color: colorText };
},
visibility: () =>
showIf(management.elfTraining.coalDrillElfTraining.milestones[3].earned.value)
}));

View file

@ -2430,6 +2430,7 @@ const factory = createLayer(id, () => {
width: 600,
height: 25,
fillStyle: `animation: 15s factory-bar linear infinite`,
textStyle: `color: var(--feature-foreground)`,
progress: () =>
main.day.value === day
? Decimal.div(toys.clothes.value, toyGoal)

View file

@ -626,7 +626,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
description: "Increase drill power by +4% per Coal Drill owned.",
effectDisplay: jsx(() => <>x{format(row1UpgradeEffects[0].value)}</>)
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: metal.metal,
@ -636,7 +638,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
description: "Increase drill power by +4% per Metal Drill owned.",
effectDisplay: jsx(() => <>x{format(row1UpgradeEffects[1].value)}</>)
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: coal.coal,
@ -646,7 +650,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
description: "Increase drill power by +6% per OoM of coal owned.",
effectDisplay: jsx(() => <>x{format(row1UpgradeEffects[2].value)}</>)
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: metal.metal,
@ -656,7 +662,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
description: "Increase drill power by +10% per OoM of metal ingot owned.",
effectDisplay: jsx(() => <>x{format(row1UpgradeEffects[3].value)}</>)
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -668,7 +676,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
<>+{format(Decimal.mul(row1UpgradeEffects[4].value, 100))}%</>
))
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
}))
];
const row1UpgradeEffects: ComputedRef<DecimalSource>[] = [
@ -707,7 +717,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Oil the Oil Pump",
description: "Double oil gain."
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -717,7 +729,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
description:
"Double ore mining speed and square the coal drill amount in its effect."
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -726,7 +740,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Blaster Burner",
description: "The Oil Burner can now increase your auto smelting multi."
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -735,7 +751,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
title: "Oil Integration",
description: "Reduce Oil Pump's coal consumption multipler from 5 to 4"
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -749,7 +767,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
</>
))
},
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
}))
];
const row3Upgrades = [
@ -762,7 +782,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
visibility: () =>
showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -773,7 +795,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
visibility: () =>
showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -789,7 +813,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
visibility: () =>
showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -800,7 +826,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
visibility: () =>
showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
})),
createUpgrade(() => ({
resource: noPersist(oil),
@ -811,7 +839,9 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
visibility: () =>
showIf(management.elfTraining.oilElfTraining.milestones[4].earned.value),
style: { color: colorText }
style() {
return this.bought.value ? "" : { color: colorText };
}
}))
];
const coalConsumption = createSequentialModifier(() => [

225
src/data/layers/sleigh.tsx Normal file
View file

@ -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<DecimalSource> | Resource<DecimalSource>[],
cost: DecimalSource,
label: string
) {
const affordable = (isArray(res) ? res : [res]).every(res => Decimal.gte(res.value, cost));
return (
<span class={affordable ? "" : "unaffordable"}>
{format(cost)} {label}
</span>
);
}
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(() => (
<>
<b style="font-size: x-large">Fix 1% of the sleigh</b>
<br />
<br />
<span style="font-size: large">
Cost: {displayCost(trees.logs, sleighCost.value.wood, "logs")},
{displayCost(metal.metal, sleighCost.value.metal, "metal")},
{displayCost(plastic.plastic, sleighCost.value.plastic, "plastic")}
</span>
</>
)),
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(() => (
<>
<div>
{main.day.value === day
? `Fix the sleigh to complete the day`
: `${name} Complete!`}
</div>
{render(dayProgress)}
<Spacer />
<div>
<span>The sleigh is </span>
<h2 style={`color: ${color}; text-shadow: 0 0 10px ${color}`}>
{formatWhole(sleighProgress.value.value)}
</h2>
% fixed
</div>
{Decimal.lt(sleighProgress.value.value, 100) ||
management.elfTraining.expandersElfTraining.milestones[2].earned.value ? (
<Spacer />
) : null}
{render(sleigh)}
<Spacer />
{milestonesDisplay()}
</>
)),
minimizedDisplay: jsx(() => (
<div>
{name}{" "}
<span class="desc">
{formatWhole(sleighProgress.value.value)}% sleigh
</span>
</div>
)),
};
});
export default layer;

View file

@ -30,6 +30,7 @@ import {
import { noPersist, persistent } from "game/persistence";
import Decimal, { DecimalSource, formatWhole } from "util/bignum";
import { Direction, WithRequired } from "util/common";
import { loadingSave } from "util/save";
import { render } from "util/vue";
import { computed, ref, unref, watchEffect } from "vue";
import elves from "./elves";
@ -144,7 +145,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
}));
watchEffect(() => {
if (Decimal.lt(computedMaxFoundation.value, foundationProgress.value)) {
if (
!loadingSave.value &&
Decimal.lt(computedMaxFoundation.value, foundationProgress.value)
) {
foundationProgress.value = Decimal.min(0, computedMaxFoundation.value);
}
});

View file

@ -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
];
/**