adds utility function for buyables

This commit is contained in:
circle-gon 2022-12-09 02:27:27 +00:00
parent 93716fa4ff
commit c80dcffaee
3 changed files with 175 additions and 419 deletions

View file

@ -1,9 +1,16 @@
import Collapsible from "components/layout/Collapsible.vue";
import { createBar } from "features/bars/bar";
import { GenericBuyable } from "features/buyable";
import type { Clickable, ClickableOptions, GenericClickable } from "features/clickables/clickable";
import { createClickable } from "features/clickables/clickable";
import type { GenericConversion } from "features/conversion";
import type { CoercableComponent, JSXFunction, OptionsFunc, Replace } from "features/feature";
import type {
CoercableComponent,
JSXFunction,
OptionsFunc,
Replace,
StyleValue
} from "features/feature";
import { jsx, setDefault } from "features/feature";
import { GenericMilestone } from "features/milestones/milestone";
import { displayResource, Resource, trackTotal } from "features/resources/resource";
@ -481,3 +488,57 @@ export function setUpDailyProgressTracker(options: {
trackerDisplay
};
}
export function changeActiveBuyables(options: {
style?: StyleValue;
active: Persistent<DecimalSource>;
buyable: GenericBuyable;
}) {
const style = options.style ?? { minHeight: "20px", width: "40px", color: "var(--foreground)" };
const min = createClickable(() => ({
display: "0",
style,
canClick() {
return Decimal.gt(options.active.value, 0);
},
onClick() {
options.active.value = 0;
}
}));
const remove = createClickable(() => ({
display: "-",
style,
canClick() {
return Decimal.gt(options.active.value, 0);
},
onClick() {
options.active.value = Decimal.sub(options.active.value, 1);
}
}));
const add = createClickable(() => ({
display: "+",
style,
canClick() {
return Decimal.lt(options.active.value, options.buyable.amount.value);
},
onClick() {
options.active.value = Decimal.add(options.active.value, 1);
}
}));
const max = createClickable(() => ({
display: "Max",
style,
canClick() {
return Decimal.lt(options.active.value, options.buyable.amount.value);
},
onClick() {
options.active.value = options.buyable.amount.value;
}
}));
return {
min,
remove,
add,
max
};
}

View file

@ -7,10 +7,13 @@ import Modal from "components/Modal.vue";
import MainDisplay from "features/resources/MainDisplay.vue";
import Row from "components/layout/Row.vue";
import Column from "components/layout/Column.vue";
import { createCollapsibleModifierSections, setUpDailyProgressTracker } from "data/common";
import {
createCollapsibleModifierSections,
setUpDailyProgressTracker,
changeActiveBuyables
} from "data/common";
import { main } from "data/projEntry";
import { createBuyable, GenericBuyable } from "features/buyable";
import { createClickable } from "features/clickables/clickable";
import { jsx, JSXFunction, showIf, StyleValue, Visibility } from "features/feature";
import { createResource, Resource } from "features/resources/resource";
import { globalBus } from "game/events";
@ -27,12 +30,11 @@ import {
createSequentialModifier,
Modifier
} from "game/modifiers";
import { createUpgrade, Upgrade, UpgradeOptions } from "features/upgrades/upgrade";
import { createUpgrade, Upgrade } from "features/upgrades/upgrade";
import elves from "./elves";
import paper from "./paper";
import boxes from "./boxes";
import metal from "./metal";
import { cloneWithoutLoc } from "@babel/types";
import cloth from "./cloth";
import { WithRequired } from "util/common";
import oil from "./oil";
@ -115,48 +117,18 @@ const layer = createLayer(id, function (this: BaseLayer) {
width: "160px"
}
})) as GenericBuyable & { resource: Resource };
const minFire = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeFires.value, 0);
},
onClick() {
activeFires.value = 0;
}
}));
const removeFire = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeFires.value, 0);
},
onClick() {
activeFires.value = Decimal.sub(activeFires.value, 1);
}
}));
const addFire = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeFires.value, buildFire.amount.value);
},
onClick() {
activeFires.value = Decimal.add(activeFires.value, 1);
}
}));
const maxFire = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeFires.value, buildFire.amount.value);
},
onClick() {
activeFires.value = buildFire.amount.value;
}
}));
const {
min: minFire,
max: maxFire,
add: addFire,
remove: removeFire
} = changeActiveBuyables({
active: activeFires,
buyable: buildFire
});
const fireResource = createResource(buildFire.amount, "small fires");
const activeBonfires = persistent<DecimalSource>(0);
const bonfireLogs = computed(() => Decimal.times(activeBonfires.value, 10000));
const bonfireCoal = computed(() => Decimal.times(activeBonfires.value, 10));
@ -192,47 +164,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
visibility: () => showIf(unlockBonfire.bought.value)
})) as GenericBuyable & { resource: Resource };
const minBonfire = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeBonfires.value, 0);
},
onClick() {
activeBonfires.value = 0;
}
}));
const removeBonfire = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeBonfires.value, 0);
},
onClick() {
activeBonfires.value = Decimal.sub(activeBonfires.value, 1);
}
}));
const addBonfire = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeBonfires.value, buildBonfire.amount.value);
},
onClick() {
activeBonfires.value = Decimal.add(activeBonfires.value, 1);
}
}));
const maxBonfire = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeBonfires.value, buildBonfire.amount.value);
},
onClick() {
activeBonfires.value = buildBonfire.amount.value;
}
}));
const {
min: minBonfire,
max: maxBonfire,
add: addBonfire,
remove: removeBonfire
} = changeActiveBuyables({
buyable: buildBonfire,
active: activeBonfires
});
const activeKilns = persistent<DecimalSource>(0);
const kilnLogs = computed(() => Decimal.times(activeKilns.value, 1e6));
const kilnCoal = computed(() => Decimal.times(activeKilns.value, 1e4));
@ -271,49 +211,22 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
visibility: () => showIf(unlockKiln.bought.value)
})) as GenericBuyable & { resource: Resource };
const minKiln = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeKilns.value, 0);
},
onClick() {
activeKilns.value = 0;
}
}));
const removeKiln = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeKilns.value, 0);
},
onClick() {
activeKilns.value = Decimal.sub(activeKilns.value, 1);
}
}));
const addKiln = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeKilns.value, buildKiln.amount.value);
},
onClick() {
activeKilns.value = Decimal.add(activeKilns.value, 1);
}
}));
const maxKiln = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeKilns.value, buildKiln.amount.value);
},
onClick() {
activeKilns.value = buildKiln.amount.value;
}
}));
const {
min: minKiln,
max: maxKiln,
add: addKiln,
remove: removeKiln
} = changeActiveBuyables({
buyable: buildKiln,
active: activeKilns
});
const activeDrills = persistent<DecimalSource>(0);
const drillCoal = computed(() => Decimal.times(Decimal.pow(activeDrills.value, oil.row2Upgrades[1].bought.value ? 2 : 1), 5e7).times(metal.efficientDrill.bought.value ? 2 : 1));
const drillCoal = computed(() =>
Decimal.times(
Decimal.pow(activeDrills.value, oil.row2Upgrades[1].bought.value ? 2 : 1),
5e7
).times(metal.efficientDrill.bought.value ? 2 : 1)
);
const buildDrill = createBuyable(() => ({
resource: metal.metal,
cost() {
@ -346,46 +259,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
},
visibility: () => showIf(metal.coalDrill.bought.value)
})) as GenericBuyable & { resource: Resource };
const minDrill = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeDrills.value, 0);
},
onClick() {
activeDrills.value = 0;
}
}));
const removeDrill = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeDrills.value, 0);
},
onClick() {
activeDrills.value = Decimal.sub(activeDrills.value, 1);
}
}));
const addDrill = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeDrills.value, buildDrill.amount.value);
},
onClick() {
activeDrills.value = Decimal.add(activeDrills.value, 1);
}
}));
const maxDrill = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeDrills.value, buildDrill.amount.value);
},
onClick() {
activeDrills.value = buildDrill.amount.value;
}
}));
const {
max: maxDrill,
min: minDrill,
add: addDrill,
remove: removeDrill
} = changeActiveBuyables({
buyable: buildDrill,
active: activeDrills
});
const warmerCutters = createUpgrade(() => ({
resource: noPersist(coal),
@ -483,7 +365,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
visibility: () => showIf(unlockBonfire.bought.value)
}));
const row2upgrades = [dedicatedCutters, dedicatedPlanters, betterFertilizer, unlockKiln];
const efficientSmelther: Upgrade<EfficientSmeltherUpgOptions> = createUpgrade(() => ({
resource: noPersist(coal),
cost: 1e19,
@ -693,13 +575,13 @@ const layer = createLayer(id, function (this: BaseLayer) {
createMultiplicativeModifier(() => ({
multiplier: () => Decimal.mul(oil.depth.value, 0.25).add(1),
description: "5m Well Depth",
enabled: oil.depthMilestones[0].earned,
enabled: oil.depthMilestones[0].earned
})),
createMultiplicativeModifier(() => ({
multiplier: oil.extractorCoal,
description: "Heavy Extractor",
enabled: () => Decimal.gt(oil.activeExtractor.value, 0)
})),
}))
]) as WithRequired<Modifier, "description" | "revert">;
const computedCoalGain = computed(() => coalGain.apply(0));

View file

@ -6,20 +6,19 @@ import MainDisplay from "features/resources/MainDisplay.vue";
import Sqrt from "components/math/Sqrt.vue";
import {
colorText,
createCollapsibleModifierSections,
createCollapsibleMilestones,
setUpDailyProgressTracker
setUpDailyProgressTracker,
changeActiveBuyables
} from "data/common";
import { jsx, showIf } from "features/feature";
import { createResource, Resource, trackBest } from "features/resources/resource";
import { createResource, Resource } from "features/resources/resource";
import { BaseLayer, createLayer } from "game/layers";
import Decimal, { DecimalSource } from "lib/break_eternity";
import { render, renderRow } from "util/vue";
import { computed, ComputedRef, ref, unref } from "vue";
import { noPersist, persistent } from "game/persistence";
import { createBuyable, GenericBuyable } from "features/buyable";
import { createClickable } from "features/clickables/clickable";
import { format, formatWhole } from "util/break_eternity";
import metal from "./metal";
import {
@ -31,7 +30,7 @@ import { main } from "data/projEntry";
import { globalBus } from "game/events";
import coal from "./coal";
import { createUpgrade, GenericUpgrade } from "features/upgrades/upgrade";
import { createMilestone, GenericMilestone, Milestone } from "features/milestones/milestone";
import { createMilestone, GenericMilestone } from "features/milestones/milestone";
import { formatGain } from "util/bignum";
const id = "oil";
@ -117,47 +116,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
width: "160px"
}
})) as GenericBuyable & { resource: Resource };
const minHeavy = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeHeavy.value, 0);
},
onClick() {
activeHeavy.value = 0;
}
}));
const removeHeavy = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeHeavy.value, 0);
},
onClick() {
activeHeavy.value = Decimal.sub(activeHeavy.value, 1);
}
}));
const addHeavy = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeHeavy.value, buildHeavy.amount.value);
},
onClick() {
activeHeavy.value = Decimal.add(activeHeavy.value, 1);
}
}));
const maxHeavy = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeHeavy.value, buildHeavy.amount.value);
},
onClick() {
activeHeavy.value = buildHeavy.amount.value;
}
}));
const {
min: minHeavy,
max: maxHeavy,
add: addHeavy,
remove: removeHeavy
} = changeActiveBuyables({
buyable: buildHeavy,
active: activeHeavy
});
const activeHeavy2 = persistent<DecimalSource>(0);
const heavy2Power = computed(() => Decimal.add(activeHeavy2.value, Math.E).ln());
const buildHeavy2 = createBuyable(() => ({
@ -192,46 +159,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
width: "160px"
}
})) as GenericBuyable & { resource: Resource };
const minHeavy2 = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeHeavy2.value, 0);
},
onClick() {
activeHeavy2.value = 0;
}
}));
const removeHeavy2 = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeHeavy2.value, 0);
},
onClick() {
activeHeavy2.value = Decimal.sub(activeHeavy2.value, 1);
}
}));
const addHeavy2 = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeHeavy2.value, buildHeavy2.amount.value);
},
onClick() {
activeHeavy2.value = Decimal.add(activeHeavy2.value, 1);
}
}));
const maxHeavy2 = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeHeavy2.value, buildHeavy2.amount.value);
},
onClick() {
activeHeavy2.value = buildHeavy2.amount.value;
}
}));
const {
min: minHeavy2,
max: maxHeavy2,
add: addHeavy2,
remove: removeHeavy2
} = changeActiveBuyables({
buyable: buildHeavy2,
active: activeHeavy2
});
const activeExtractor = persistent<DecimalSource>(0);
const extractorPower = computed(() => Decimal.pow(1 / 3, activeExtractor.value));
@ -270,46 +206,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
width: "160px"
}
})) as GenericBuyable & { resource: Resource };
const minExtractor = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeExtractor.value, 0);
},
onClick() {
activeExtractor.value = 0;
}
}));
const removeExtractor = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeExtractor.value, 0);
},
onClick() {
activeExtractor.value = Decimal.sub(activeExtractor.value, 1);
}
}));
const addExtractor = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeExtractor.value, buildExtractor.amount.value);
},
onClick() {
activeExtractor.value = Decimal.add(activeExtractor.value, 1);
}
}));
const maxExtractor = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeExtractor.value, buildExtractor.amount.value);
},
onClick() {
activeExtractor.value = buildExtractor.amount.value;
}
}));
const {
min: minExtractor,
max: maxExtractor,
add: addExtractor,
remove: removeExtractor
} = changeActiveBuyables({
buyable: buildExtractor,
active: activeExtractor
});
const activePump = persistent<DecimalSource>(0);
const pumpCoal = computed(() =>
@ -358,46 +263,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
width: "160px"
}
})) as GenericBuyable & { resource: Resource };
const minPump = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activePump.value, 0);
},
onClick() {
activePump.value = 0;
}
}));
const removePump = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activePump.value, 0);
},
onClick() {
activePump.value = Decimal.sub(activePump.value, 1);
}
}));
const addPump = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activePump.value, buildPump.amount.value);
},
onClick() {
activePump.value = Decimal.add(activePump.value, 1);
}
}));
const maxPump = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activePump.value, buildPump.amount.value);
},
onClick() {
activePump.value = buildPump.amount.value;
}
}));
const {
max: maxPump,
min: minPump,
add: addPump,
remove: removePump
} = changeActiveBuyables({
buyable: buildPump,
active: activePump
});
const activeBurner = persistent<DecimalSource>(0);
const burnerOil = computed(() => Decimal.pow(activeBurner.value, 2));
@ -442,46 +316,15 @@ const layer = createLayer(id, function (this: BaseLayer) {
width: "160px"
}
})) as GenericBuyable & { resource: Resource };
const minBurner = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeBurner.value, 0);
},
onClick() {
activeBurner.value = 0;
}
}));
const removeBurner = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeBurner.value, 0);
},
onClick() {
activeBurner.value = Decimal.sub(activeBurner.value, 1);
}
}));
const addBurner = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeBurner.value, buildBurner.amount.value);
},
onClick() {
activeBurner.value = Decimal.add(activeBurner.value, 1);
}
}));
const maxBurner = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeBurner.value, buildBurner.amount.value);
},
onClick() {
activeBurner.value = buildBurner.amount.value;
}
}));
const {
max: maxBurner,
min: minBurner,
add: addBurner,
remove: removeBurner
} = changeActiveBuyables({
buyable: buildBurner,
active: activeBurner
});
const activeSmelter = persistent<DecimalSource>(0);
const smelterOil = computed(() => Decimal.pow(activeSmelter.value, 2).mul(100));
@ -520,46 +363,16 @@ const layer = createLayer(id, function (this: BaseLayer) {
width: "160px"
}
})) as GenericBuyable & { resource: Resource };
const minSmelter = createClickable(() => ({
display: "0",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeSmelter.value, 0);
},
onClick() {
activeSmelter.value = 0;
}
}));
const removeSmelter = createClickable(() => ({
display: "-",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.gt(activeSmelter.value, 0);
},
onClick() {
activeSmelter.value = Decimal.sub(activeSmelter.value, 1);
}
}));
const addSmelter = createClickable(() => ({
display: "+",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeSmelter.value, buildSmelter.amount.value);
},
onClick() {
activeSmelter.value = Decimal.add(activeSmelter.value, 1);
}
}));
const maxSmelter = createClickable(() => ({
display: "Max",
style: { minHeight: "20px", width: "40px", color: colorText },
canClick() {
return Decimal.lt(activeSmelter.value, buildSmelter.amount.value);
},
onClick() {
activeSmelter.value = buildSmelter.amount.value;
}
}));
const {
max: maxSmelter,
min: minSmelter,
add: addSmelter,
remove: removeSmelter
} = changeActiveBuyables({
buyable: buildSmelter,
active: activeSmelter
});
// --------------------------------------------------------------------------- Milestones
@ -668,7 +481,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
createCollapsibleMilestones(oilMilestones);
// --------------------------------------------------------------------------- Upgrades
const row1Upgrades: GenericUpgrade[] = [
createUpgrade(() => ({
resource: coal.coal,