setup day 13 progress bar (+ formatted management)

This commit is contained in:
thepaperpilot 2022-12-12 16:24:21 -06:00
parent 6d268f95fb
commit f38f61905d

View file

@ -1,50 +1,48 @@
import Spacer from "components/layout/Spacer.vue";
import Sqrt from "components/math/Sqrt.vue";
import Fraction from "components/math/Fraction.vue";
import Sqrt from "components/math/Sqrt.vue";
import Modal from "components/Modal.vue";
import { createCollapsibleMilestones, createCollapsibleModifierSections } from "data/common";
import { main } from "data/projEntry";
import { createBar, GenericBar } from "features/bars/bar";
import { createBuyable } from "features/buyable";
import { createClickable, GenericClickable } from "features/clickables/clickable";
import { jsx, JSXFunction, showIf } from "features/feature";
import { createMilestone, GenericMilestone } from "features/milestones/milestone";
import { createUpgrade } from "features/upgrades/upgrade";
import { globalBus } from "game/events";
import { createLayer } from "game/layers";
import { createMultiplicativeModifier, createSequentialModifier, Modifier } from "game/modifiers";
import { Persistent, persistent } from "game/persistence";
import Decimal, { DecimalSource, format, formatTime, formatWhole } from "util/bignum";
import { Direction } from "util/common";
import { render, renderCol, renderGrid, renderRow } from "util/vue";
import { render, renderCol, renderGrid } from "util/vue";
import { computed, ComputedRef, ref, Ref } from "vue";
import { createTabFamily } from "features/tabs/tabFamily";
import { createTab } from "features/tabs/tab";
import elves from "./elves";
import trees from "./trees";
import { globalBus } from "game/events";
import { createMultiplicativeModifier, createSequentialModifier, Modifier } from "game/modifiers";
import Modal from "components/Modal.vue";
import { createBuyable, GenericBuyable } from "features/buyable";
import { createUpgrade } from "features/upgrades/upgrade";
import coal from "./coal";
import paper from "./paper";
import boxes from "./boxes";
import metal from "./metal";
import cloth from "./cloth";
import plastic from "./plastic";
import coal from "./coal";
import dyes from "./dyes";
import elves from "./elves";
import metal from "./metal";
import paper from "./paper";
import plastic from "./plastic";
import trees from "./trees";
const id = "management";
const day = 12;
const advancedDay = 13;
interface ElfTrainingClickable extends GenericClickable {
name: string,
state: Persistent<boolean>,
displayMilestone: JSXFunction,
level: ComputedRef<number>,
exp: Persistent<DecimalSource>,
milestones: GenericMilestone[],
timeForExp: ComputedRef<DecimalSource>,
amountOfTimesDone: Ref<number>,
elfXPGainComputed: ComputedRef<DecimalSource>,
elfXPGain: Modifier,
name: string;
state: Persistent<boolean>;
displayMilestone: JSXFunction;
level: ComputedRef<number>;
exp: Persistent<DecimalSource>;
milestones: GenericMilestone[];
timeForExp: ComputedRef<DecimalSource>;
amountOfTimesDone: Ref<number>;
elfXPGainComputed: ComputedRef<DecimalSource>;
elfXPGain: Modifier;
}
const layer = createLayer(id, () => {
@ -59,7 +57,13 @@ const layer = createLayer(id, () => {
height: 25,
fillStyle: `backgroundColor: ${color}`,
progress: () =>
main.day.value === day ? Object.values(elfTraining).reduce((acc, curr) => acc + curr.level.value / 3, 0) / Object.keys(elves).length : 1,
main.day.value === day
? day12Elves.reduce((acc, curr) => acc + Math.min(1, curr.level.value / 3), 0) /
day12Elves.length
: main.day.value === advancedDay
? day13Elves.reduce((acc, curr) => acc + Math.min(1, curr.level.value / 5), 0) /
day13Elves.length
: 1,
display: jsx(() =>
main.day.value === day ? (
<>
@ -80,7 +84,6 @@ const layer = createLayer(id, () => {
return elfLevel;
});
// ------------------------------------------------------------------------------- Upgrades
const teaching = createUpgrade(() => ({
@ -141,17 +144,24 @@ const layer = createLayer(id, () => {
height: 12,
style: () => ({
"margin-top": "8px",
"box-shadow": focusTargets.value[elf.name]
"box-shadow": focusTargets.value[elf.name]
? "0 0 12px " + (currentShown.value == elf.name ? "black" : "white")
: "",
: ""
}),
baseStyle: "margin-top: 0",
fillStyle: "margin-top: 0; transition-duration: 0s",
borderStyle: () => Decimal.gte(level.value, schools.amount.value) ? "border-color: red" : "",
borderStyle: () =>
Decimal.gte(level.value, schools.amount.value) ? "border-color: red" : "",
progress: () => Decimal.div(expToNextLevel.value, expRequiredForNextLevel.value),
display: jsx(() => Decimal.gte(level.value, schools.amount.value)
? <>Limit reached</>
: <>{format(expToNextLevel.value)}/{format(expRequiredForNextLevel.value)} XP</>)
display: jsx(() =>
Decimal.gte(level.value, schools.amount.value) ? (
<>Limit reached</>
) : (
<>
{format(expToNextLevel.value)}/{format(expRequiredForNextLevel.value)} XP
</>
)
)
}));
const { collapseMilestones: state, display: displayMilestone } =
createCollapsibleMilestones(milestones as Record<number, GenericMilestone>);
@ -173,10 +183,9 @@ const layer = createLayer(id, () => {
title: elf.name,
description: jsx(() => (
<>
{elf.name} is currently at level {formatWhole(level.value)}, and
achieved a total of {format(exp.value)} XP.
They buy buyables {formatWhole(elf.computedAutoBuyCooldown.value)} times per
second, gaining{" "}
{elf.name} is currently at level {formatWhole(level.value)}, and achieved a
total of {format(exp.value)} XP. They buy buyables{" "}
{formatWhole(elf.computedAutoBuyCooldown.value)} times per second, gaining{" "}
{Decimal.gte(level.value, schools.amount.value)
? 0
: format(
@ -192,7 +201,7 @@ const layer = createLayer(id, () => {
},
style: () => ({
width: "190px",
background: currentShown.value == elf.name ? "var(--foreground)" : "",
background: currentShown.value == elf.name ? "var(--foreground)" : ""
}),
onClick() {
currentShown.value = elf.name;
@ -220,7 +229,12 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Holly Level 1",
effectDisplay: jsx(() => <>Multiply log gain by <sup>3</sup><Sqrt>Cutter amount</Sqrt>.</>)
effectDisplay: jsx(() => (
<>
Multiply log gain by <sup>3</sup>
<Sqrt>Cutter amount</Sqrt>.
</>
))
},
shouldEarn: () => cutterElfTraining.level.value >= 1
})),
@ -235,7 +249,12 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Holly Level 3",
effectDisplay: jsx(() => <>Multiply all cloth actions' effectiveness by <sup>3</sup><Sqrt>Cutter amount</Sqrt>.</>)
effectDisplay: jsx(() => (
<>
Multiply all cloth actions' effectiveness by <sup>3</sup>
<Sqrt>Cutter amount</Sqrt>.
</>
))
},
visibility: () => showIf(cutterElfMilestones[1].earned.value),
shouldEarn: () => cutterElfTraining.level.value >= 3
@ -276,7 +295,14 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Ivy Level 3",
effectDisplay: jsx(() => <>Planting speed is multiplied by 2<sup>(log<sub>10</sub>(logs)<sup>0.2</sup>)</sup></>)
effectDisplay: jsx(() => (
<>
Planting speed is multiplied by 2
<sup>
(log<sub>10</sub>(logs)<sup>0.2</sup>)
</sup>
</>
))
},
visibility: () => showIf(planterElfMilestones[1].earned.value),
shouldEarn: () => planterElfTraining.level.value >= 3
@ -317,7 +343,8 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Hope Level 3",
effectDisplay: "The workshop can be expanded past 100%, but costs scale faster. It also buys max now."
effectDisplay:
"The workshop can be expanded past 100%, but costs scale faster. It also buys max now."
},
visibility: () => showIf(expanderElfMilestones[1].earned.value),
shouldEarn: () => expandersElfTraining.level.value >= 3
@ -418,7 +445,11 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Mary Level 5",
effectDisplay: jsx(() => <>Auto smelting speed is multiplied by <Sqrt>total XP/1000</Sqrt>.</>)
effectDisplay: jsx(() => (
<>
Auto smelting speed is multiplied by <Sqrt>total XP/1000</Sqrt>.
</>
))
},
visibility: () =>
showIf(heatedPlanterElfMilestones[3].earned.value && main.day.value >= 13),
@ -429,7 +460,11 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Noel Level 1",
effectDisplay: jsx(() => <>Log gain is multiplied by <Sqrt>total elf levels</Sqrt>.</>)
effectDisplay: jsx(() => (
<>
Log gain is multiplied by <Sqrt>total elf levels</Sqrt>.
</>
))
},
shouldEarn: () => heatedPlanterElfTraining.level.value >= 1
})),
@ -452,7 +487,11 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Noel Level 4",
effectDisplay: jsx(() => <>Reduce oil refinery cost by (Plastic amount)<sup>2</sup></>)
effectDisplay: jsx(() => (
<>
Reduce oil refinery cost by (Plastic amount)<sup>2</sup>
</>
))
},
visibility: () =>
showIf(fertilizerElfMilestones[2].earned.value && main.day.value >= 13),
@ -620,7 +659,11 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Star Level 4",
effectDisplay: jsx(() => <>Multiply XP requirements by 0.95<sup>(total books)</sup></>)
effectDisplay: jsx(() => (
<>
Multiply XP requirements by 0.95<sup>(total books)</sup>
</>
))
},
visibility: () => showIf(paperElfMilestones[2].earned.value && main.day.value >= 13),
shouldEarn: () => paperElfTraining.level.value >= 4
@ -638,7 +681,11 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Bell Level 1",
effectDisplay: jsx(() => <>Every box buyable adds <Sqrt>level</Sqrt> levels to same-row box buyables.</>)
effectDisplay: jsx(() => (
<>
Every box buyable adds <Sqrt>level</Sqrt> levels to same-row box buyables.
</>
))
},
shouldEarn: () => boxElfTraining.level.value >= 1
})),
@ -686,7 +733,11 @@ const layer = createLayer(id, () => {
createMilestone(() => ({
display: {
requirement: "Gingersnap Level 2",
effectDisplay: jsx(() => <>Multiply all cloth actions' effectiveness by log<sub>10</sub>(dye sum + 10)</>)
effectDisplay: jsx(() => (
<>
Multiply all cloth actions' effectiveness by log<sub>10</sub>(dye sum + 10)
</>
))
},
visibility: () => showIf(clothElfMilestones[0].earned.value),
shouldEarn: () => clothElfTraining.level.value >= 2
@ -699,26 +750,39 @@ const layer = createLayer(id, () => {
visibility: () => showIf(clothElfMilestones[1].earned.value),
shouldEarn: () => clothElfTraining.level.value >= 3,
onComplete() {
(["red", "yellow", "blue", "orange", "green", "purple"] as const).forEach(dyeColor => {
dyes.dyes[dyeColor].amount.value = 0;
dyes.dyes[dyeColor].buyable.amount.value = 0;
});
(["red", "yellow", "blue", "orange", "green", "purple"] as const).forEach(
dyeColor => {
dyes.dyes[dyeColor].amount.value = 0;
dyes.dyes[dyeColor].buyable.amount.value = 0;
}
);
}
})),
createMilestone(() => ({
display: {
requirement: "Gingersnap Level 4",
effectDisplay: jsx(() => <>Multiply ALL dye gain by{" "}
<Fraction><div><Sqrt>classrooms</Sqrt></div><div>2</div></Fraction>+1,
but reset all dyes.</>)
effectDisplay: jsx(() => (
<>
Multiply ALL dye gain by{" "}
<Fraction>
<div>
<Sqrt>classrooms</Sqrt>
</div>
<div>2</div>
</Fraction>
+1, but reset all dyes.
</>
))
},
visibility: () => showIf(clothElfMilestones[2].earned.value && main.day.value >= 13),
shouldEarn: () => clothElfTraining.level.value >= 4,
onComplete() {
(["red", "yellow", "blue", "orange", "green", "purple"] as const).forEach(dyeColor => {
dyes.dyes[dyeColor].amount.value = 0;
dyes.dyes[dyeColor].buyable.amount.value = 0;
});
(["red", "yellow", "blue", "orange", "green", "purple"] as const).forEach(
dyeColor => {
dyes.dyes[dyeColor].amount.value = 0;
dyes.dyes[dyeColor].buyable.amount.value = 0;
}
);
}
})),
createMilestone(() => ({
@ -798,6 +862,34 @@ const layer = createLayer(id, () => {
boxElfTraining,
clothElfTraining
} as Record<string, ElfTrainingClickable>;
const day12Elves = [
cutterElfTraining,
planterElfTraining,
expandersElfTraining,
heatedCutterElfTraining,
heatedPlanterElfTraining,
fertilizerElfTraining,
smallfireElfTraining,
bonfireElfTraining,
kilnElfTraining,
paperElfTraining,
boxElfTraining,
clothElfTraining
];
const day13Elves = [
cutterElfTraining,
planterElfTraining,
expandersElfTraining,
heatedCutterElfTraining,
heatedPlanterElfTraining,
fertilizerElfTraining,
smallfireElfTraining,
bonfireElfTraining,
kilnElfTraining,
paperElfTraining,
boxElfTraining,
clothElfTraining
];
// ------------------------------------------------------------------------------- Update
@ -817,13 +909,16 @@ const layer = createLayer(id, () => {
if (focusRolling.value > 0) {
focusRolling.value += diff;
focusMulti.value = Decimal.pow(focusMaxMulti.value, 1 - Math.abs(Math.sin((focusRolling.value - 1) * 3)));
focusMulti.value = Decimal.pow(
focusMaxMulti.value,
1 - Math.abs(Math.sin((focusRolling.value - 1) * 3))
);
rerollFocusTargets(12, 3);
} else {
focusRolling.value = Math.min(focusRolling.value + diff, 0);
}
});
// ------------------------------------------------------------------------------- Focus
const focusMulti = persistent<DecimalSource>(1);
@ -831,7 +926,7 @@ const layer = createLayer(id, () => {
const focusRolling = persistent<number>(0);
const focusMaxMulti = computed<DecimalSource>(() => 10);
const focusMeter = createBar(() => ({
direction: Direction.Right,
width: 566,
@ -839,23 +934,32 @@ const layer = createLayer(id, () => {
style: `border-radius: 4px 4px 0 0`,
borderStyle: `border-radius: 4px 4px 0 0`,
fillStyle: `background: ${color}; transition: none`,
progress: () => Decimal.sub(focusMulti.value, 1).div(Decimal.sub(focusMaxMulti.value, 1)).toNumber(),
progress: () =>
Decimal.sub(focusMulti.value, 1).div(Decimal.sub(focusMaxMulti.value, 1)).toNumber(),
display: jsx(() => <>{format(focusMulti.value)}x</>)
})) as GenericBar;
const focusButton = createClickable(() => ({
display: {
title: "Focus",
description: jsx(() => (
<>
{focusRolling.value <= 0
? <>Motivate elves to focus, multiplying 3 random elves' XP gain by up to {format(focusMaxMulti.value)}x</>
: "Click to stop the focus bar"
}
{focusRolling.value < 0
? <><br/>Reroll cooldown: {formatTime(-focusRolling.value)}</>
: ""
}
{focusRolling.value <= 0 ? (
<>
Motivate elves to focus, multiplying 3 random elves' XP gain by up to{" "}
{format(focusMaxMulti.value)}x
</>
) : (
"Click to stop the focus bar"
)}
{focusRolling.value < 0 ? (
<>
<br />
Reroll cooldown: {formatTime(-focusRolling.value)}
</>
) : (
""
)}
</>
))
},
@ -884,7 +988,7 @@ const layer = createLayer(id, () => {
}
}
}
// ------------------------------------------------------------------------------- Schools
const schoolCost = computed(() => {
@ -909,9 +1013,9 @@ const layer = createLayer(id, () => {
You gotta start somewhere, right? Each school increases the maximum level for
elves by 1, up to 5.
</div>
<div>You have {formatWhole(schools.amount.value)} schools,
which are currently letting elves learn up to level{" "}
{formatWhole(schools.amount.value)}.
<div>
You have {formatWhole(schools.amount.value)} schools, which are currently
letting elves learn up to level {formatWhole(schools.amount.value)}.
</div>
<div>
Costs {format(schoolCost.value.wood)} logs, {format(schoolCost.value.coal)}{" "}
@ -978,8 +1082,9 @@ const layer = createLayer(id, () => {
Hopefully it makes the school a bit less boring. Multiplies elves' XP gain by{" "}
<Sqrt>Classrooms + 1</Sqrt>.
</div>
<div>You have {formatWhole(schools.amount.value)} classrooms,
which are currently multiplying elves' XP gain by {format(classroomEffect.value)}
<div>
You have {formatWhole(schools.amount.value)} classrooms, which are currently
multiplying elves' XP gain by {format(classroomEffect.value)}
</div>
<div>
Costs {format(classroomCost.value.wood)} logs,{" "}
@ -1113,7 +1218,6 @@ const layer = createLayer(id, () => {
/>
));
// ------------------------------------------------------------------------------- Return
return {
@ -1138,7 +1242,12 @@ const layer = createLayer(id, () => {
display: jsx(() => (
<>
{main.day.value === day ? `Get all elves to level 3.` : main.day.value === advancedDay && main.days[advancedDay - 1].opened.value ? `Get all elves to level 5.` : `${name} Complete!`} -
{main.day.value === day
? `Get all elves to level 3.`
: main.day.value === advancedDay && main.days[advancedDay - 1].opened.value
? `Get all elves to level 5.`
: `${name} Complete!`}{" "}
-
<button
class="button"
style="display: inline-block;"
@ -1148,16 +1257,16 @@ const layer = createLayer(id, () => {
</button>
{render(modifiersModal)}
{render(dayProgress)}
<br/>
{renderCol(schools, classrooms)}{" "}
{renderGrid([teaching, classroomUpgrade])}
{
Decimal.gt(schools.amount.value, 0) ? <>
<br/>
<br />
{renderCol(schools, classrooms)} {renderGrid([teaching, classroomUpgrade])}
{Decimal.gt(schools.amount.value, 0) ? (
<>
<br />
Click on an elf to see their milestones.
<br/><br/>
<br />
<br />
{render(focusButton)}
<br/>
<br />
{renderGrid(
[focusMeter],
treeElfTraining,
@ -1167,8 +1276,10 @@ const layer = createLayer(id, () => {
)}
<Spacer />
{currentElfDisplay()}
</> : ""
}
</>
) : (
""
)}
</>
))
};