profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 6 Projects 2 Releases Packages Wiki Activity Actions

Make layers lazy instantiate

Browse source
This commit is contained in:
thepaperpilot 2022-01-27 22:47:26 -06:00
parent 90e49e196f
commit 067ba6ce90
8 changed files with 929 additions and 909 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/data/common.tsx
View file

@ -118,6 +118,7 @@ export type LayerTreeNode<T extends LayerTreeNodeOptions> = Replace<
append: ProcessedComputable<boolean>;
}
>;
export type GenericLayerTreeNode = LayerTreeNode<LayerTreeNodeOptions>;
export function createLayerTreeNode<T extends LayerTreeNodeOptions>(options: T): LayerTreeNode<T> {
processComputable(options as T, "append");

16
src/data/layers/aca/a.tsx
View file

@ -1,5 +1,5 @@
import Tooltip from "@/components/system/Tooltip.vue";
import { points as mainPoints } from "@/data/mod";
import { main } from "@/data/mod";
import { createAchievement } from "@/features/achievement";
import { createGrid } from "@/features/grid";
import { createResource } from "@/features/resource";
@ -8,14 +8,15 @@ import { createLayer } from "@/game/layers";
import { DecimalSource } from "@/lib/break_eternity";
import Decimal from "@/util/bignum";
import { render, renderRow } from "@/util/vue";
import { points as fPoints } from "./f";
import f from "./f";
const layer = createLayer(() => {
const id = "a";
const color = "yellow";
const name = "Achievements";
const points = createResource<DecimalSource>(0, "achievement power");
export const treeNode = createTreeNode({
const treeNode = createTreeNode({
tooltip: "Achievements",
onClick() {
// TODO open this layer as a modal
@ -48,7 +49,7 @@ const ach3 = createAchievement({
tooltip:
"Get a farm point.\n\nReward: The dinosaur is now your friend (you can max Farm Points).",
shouldEarn: function () {
return Decimal.gte(fPoints.value, 1);
return Decimal.gte(f.value.points.value, 1);
},
onComplete() {
console.log("Bork bork bork!");
@ -86,8 +87,8 @@ const grid = createGrid({
getDisplay(id) {
return String(id);
},
getCanClick() {
return Decimal.eq(mainPoints.value, 10);
getCanClick(): boolean {
return Decimal.eq(main.value.points.value, 10);
},
onClick(id, state) {
this.cells[id].state = Number(state) + 1;
@ -101,7 +102,7 @@ const display = (
</template>
);
const layer = createLayer({
return {
id,
color,
name,
@ -110,6 +111,7 @@ const layer = createLayer({
grid,
treeNode,
display
};
});
export default layer;

85
src/data/layers/aca/c.tsx
View file

@ -9,13 +9,13 @@ import Spacer from "@/components/system/Spacer.vue";
import Sticky from "@/components/system/Sticky.vue";
import VerticalRule from "@/components/system/VerticalRule.vue";
import { createLayerTreeNode, createResetButton } from "@/data/common";
import { points as mainPoints, tree as mainTree } from "@/data/mod";
import { main } from "@/data/mod";
import { createBar, Direction } from "@/features/bar";
import { createBuyable } from "@/features/buyable";
import { createChallenge } from "@/features/challenge";
import { createClickable } from "@/features/clickable";
import { createCumulativeConversion, createExponentialScaling } from "@/features/conversion";
import { persistent, showIf } from "@/features/feature";
import { CoercableComponent, persistent, showIf } from "@/features/feature";
import { createHotkey } from "@/features/hotkey";
import { createInfobox } from "@/features/infobox";
import { createMilestone } from "@/features/milestone";
@ -23,17 +23,16 @@ import { createReset } from "@/features/reset";
import { addSoftcap, createResource, displayResource, trackBest } from "@/features/resource";
import { createTab } from "@/features/tab";
import { createTabButton, createTabFamily } from "@/features/tabFamily";
import { createTree, createTreeNode } from "@/features/tree";
import { createTree, createTreeNode, GenericTreeNode, TreeBranch } from "@/features/tree";
import { createUpgrade } from "@/features/upgrade";
import { createLayer, getLayer } from "@/game/layers";
import { DecimalSource } from "@/lib/break_eternity";
import Decimal, { format, formatWhole } from "@/util/bignum";
import { render, renderCol, renderRow } from "@/util/vue";
import { computed } from "vue";
import { boop, tab as fTab, treeNode as fNode } from "./f";
const c = getLayer("c");
import { computed, Ref } from "vue";
import f from "./f";
const layer = createLayer(() => {
const id = "c";
const color = "#4BDC13";
const name = "Candies";
@ -41,7 +40,7 @@ const points = addSoftcap(createResource<DecimalSource>(0, "lollipops"), 1e100,
const best = trackBest(points);
const beep = persistent<boolean>(false);
const thingy = persistent<string>("pointy");
export const otherThingy = persistent<number>(10);
const otherThingy = persistent<number>(10);
const spentOnBuyables = persistent(new Decimal(10));
const waffleBoost = computed(() => Decimal.pow(points.value, 0.2));
@ -77,7 +76,7 @@ const lollipopMilestone4 = createMilestone({
return (
<div style="display: flex; justify-content: center">
<Toggle title="beep" v-model={beep} />
<Toggle title="boop" v-model={boop} />
<Toggle title="boop" v-model={f.value.boop as Ref<boolean>} />
</div>
);
}
@ -108,7 +107,7 @@ const funChallenge = createChallenge({
return showIf(Decimal.gt(best.value, 0));
},
goal: 20,
resource: () => mainPoints,
resource: main.value.points,
onComplete() {
console.log("hiii");
},
@ -124,13 +123,13 @@ const funChallenge = createChallenge({
});
const funEffect = computed(() => Decimal.add(points.value, 1).tetrate(0.02));
export const generatorUpgrade = createUpgrade({
const generatorUpgrade = createUpgrade({
title: "Generator of Genericness",
display: "Gain 1 point every second",
cost: 1,
resource: points
});
export const lollipopMultiplierUpgrade = createUpgrade({
const lollipopMultiplierUpgrade = createUpgrade({
display: () =>
`Point generation is faster based on your unspent Lollipops<br>Currently: ${format(
lollipopMultiplierEffect.value
@ -139,22 +138,23 @@ export const lollipopMultiplierUpgrade = createUpgrade({
resource: points,
visibility: () => showIf(generatorUpgrade.bought.value)
});
export const lollipopMultiplierEffect = computed(() => {
const lollipopMultiplierEffect = computed(() => {
let ret = Decimal.add(points.value, 1).pow(0.5);
if (ret.gte("1e20000000")) ret = ret.sqrt().times("1e10000000");
return ret;
});
export const unlockIlluminatiUpgrade = createUpgrade({
const unlockIlluminatiUpgrade = createUpgrade({
visibility() {
return showIf(lollipopMultiplierUpgrade.bought.value);
},
canPurchase() {
return Decimal.lt(mainPoints.value, 7);
return Decimal.lt(main.value.points.value, 7);
},
onPurchase() {
mainPoints.value = Decimal.add(mainPoints.value, 7);
main.value.points.value = Decimal.add(main.value.points.value, 7);
},
display: "Only buyable with less than 7 points, and gives you 7 more. Unlocks a secret subtab.",
display:
"Only buyable with less than 7 points, and gives you 7 more. Unlocks a secret subtab.",
style() {
if (this.bought) {
return { backgroundColor: "#1111dd" };
@ -216,7 +216,7 @@ const respecBuyables = createClickable({
}
points.value = Decimal.add(points.value, spentOnBuyables.value);
mainTree.reset(treeNode);
main.value.tree.reset(treeNode);
}
});
const sellExhancer = createClickable({
@ -249,10 +249,10 @@ const longBoi = createBar({
width: 300,
height: 30,
progress() {
return Decimal.add(mainPoints.value, 1).log(10).div(10).toNumber();
return Decimal.add(main.value.points.value, 1).log(10).div(10).toNumber();
},
display() {
return format(mainPoints.value) + " / 1e10 points";
return format(main.value.points.value) + " / 1e10 points";
}
});
const tallBoi = createBar({
@ -264,10 +264,10 @@ const tallBoi = createBar({
width: 50,
height: 200,
progress() {
return Decimal.div(mainPoints.value, 100);
return Decimal.div(main.value.points.value, 100);
},
display() {
return formatWhole(Decimal.div(mainPoints.value, 1).min(100)) + "%";
return formatWhole(Decimal.div(main.value.points.value, 1).min(100)) + "%";
}
});
const flatBoi = createBar({
@ -284,13 +284,13 @@ const flatBoi = createBar({
const conversion = createCumulativeConversion({
scaling: createExponentialScaling(10, 5, 0.5),
baseResource: mainPoints,
baseResource: main.value.points,
gainResource: points,
roundUpCost: true
});
const reset = createReset({
thingsToReset: () => [c()]
thingsToReset: () => [getLayer("c")]
});
const hotkeys = [
@ -312,7 +312,7 @@ const hotkeys = [
})
];
export const treeNode = createLayerTreeNode({
const treeNode = createLayerTreeNode({
layerID: id,
color,
reset,
@ -320,7 +320,9 @@ export const treeNode = createLayerTreeNode({
tooltip() {
let tooltip = displayResource(points);
if (Decimal.gt(exhancers.amount.value, 0)) {
tooltip += `<br><i><br><br><br>${formatWhole(exhancers.amount.value)} Exhancers</i>`;
tooltip += `<br><i><br><br><br>${formatWhole(
exhancers.amount.value
)} Exhancers</i>`;
}
return tooltip;
},
@ -332,7 +334,7 @@ export const treeNode = createLayerTreeNode({
const resetButton = createResetButton({
conversion,
tree: mainTree,
tree: main.value.tree,
treeNode,
style: {
color: "#AA66AA"
@ -340,7 +342,7 @@ const resetButton = createResetButton({
resetDescription: "Melt your points into "
});
export const g = createTreeNode({
const g = createTreeNode({
display: "TH",
color: "#6d3678",
canClick() {
@ -358,29 +360,30 @@ export const g = createTreeNode({
return "";
}
});
export const h = createTreeNode({
const h = createTreeNode({
id: "h",
tooltip() {
return `Restore your points to ${format(otherThingy.value)}`;
},
canClick() {
return Decimal.lt(mainPoints.value, otherThingy.value);
return Decimal.lt(main.value.points.value, otherThingy.value);
},
onClick() {
mainPoints.value = otherThingy.value;
main.value.points.value = otherThingy.value;
}
});
export const spook = createTreeNode({});
const spook = createTreeNode({});
const tree = createTree({
nodes() {
nodes(): GenericTreeNode[][] {
return [
[fNode, treeNode],
[f.value.treeNode, treeNode],
[g, spook, h]
];
},
branches: () => [
branches(): TreeBranch[] {
return [
{
startNode: fNode,
startNode: f.value.treeNode,
endNode: treeNode,
style: {
strokeWidth: "25px",
@ -390,7 +393,8 @@ const tree = createTree({
},
{ startNode: treeNode, endNode: g },
{ startNode: g, endNode: h }
]
];
}
});
const illuminatiTabs = createTabFamily({
@ -405,7 +409,7 @@ const illuminatiTabs = createTabFamily({
display: "first"
}),
second: createTabButton({
tab: () => fTab,
tab: f.value.display as CoercableComponent,
display: "second"
})
},
@ -442,7 +446,7 @@ const tabs = createTabFamily({
<div>Name your points!</div>
<Text v-model={thingy} />
<Sticky style="color: red; font-size: 32px; font-family: Comic Sans MS;">
I have {displayResource(mainPoints)}!
I have {displayResource(main.value.points)}!
</Sticky>
<hr />
{renderCol(lollipopMilestones)}
@ -555,7 +559,7 @@ const tabs = createTabFamily({
}
});
const layer = createLayer({
return {
id,
color,
name,
@ -600,6 +604,7 @@ const layer = createLayer({
resetButton,
minWidth: 800,
display: render(tabs)
};
});
export default layer;

38
src/data/layers/aca/f.tsx
View file

@ -1,6 +1,6 @@
import MainDisplay from "@/components/features/MainDisplay.vue";
import { createLayerTreeNode, createResetButton } from "@/data/common";
import { points as mainPoints, tree as mainTree } from "@/data/mod";
import { main } from "@/data/mod";
import { createClickable } from "@/features/clickable";
import { createExponentialScaling, createIndependentConversion } from "@/features/conversion";
import { persistent } from "@/features/feature";
@ -10,15 +10,14 @@ import { createResource, displayResource } from "@/features/resource";
import { createLayer, getLayer } from "@/game/layers";
import Decimal, { DecimalSource, formatWhole } from "@/util/bignum";
import { render } from "@/util/vue";
import { otherThingy } from "./c";
const f = getLayer("f");
import c from "./c";
const layer = createLayer(() => {
const id = "f";
const color = "#FE0102";
const name = "Farms";
export const points = createResource<DecimalSource>(0, "farm points");
export const boop = persistent<boolean>(false);
const points = createResource<DecimalSource>(0, "farm points");
const boop = persistent<boolean>(false);
const coolInfo = createInfobox({
title: "Lore",
@ -90,17 +89,17 @@ const resetClickable = createClickable({
});
const reset = createReset({
thingsToReset: () => [f()]
thingsToReset: () => [getLayer("f")]
});
const conversion = createIndependentConversion({
scaling: createExponentialScaling(10, 3, 0.5),
baseResource: mainPoints,
baseResource: main.value.points,
gainResource: points,
modifyGainAmount: gain => Decimal.times(gain, otherThingy.value)
modifyGainAmount: gain => Decimal.times(gain, c.value.otherThingy.value)
});
export const treeNode = createLayerTreeNode({
const treeNode = createLayerTreeNode({
layerID: id,
color,
reset,
@ -109,33 +108,33 @@ export const treeNode = createLayerTreeNode({
return `${displayResource(points)} ${points.displayName}`;
}
return `This weird farmer dinosaur will only see you if you have at least 10 points. You only have ${displayResource(
mainPoints
main.value.points
)}`;
},
canClick() {
return Decimal.gte(mainPoints.value, 10);
return Decimal.gte(main.value.points.value, 10);
}
});
const resetButton = createResetButton({
conversion,
tree: mainTree,
tree: main.value.tree,
treeNode,
display() {
if (this.conversion.buyMax) {
return (
<span>
Hi! I'm a <u>weird dinosaur</u> and I'll give you{" "}
<b>{formatWhole(this.conversion.currentGain.value)}</b> Farm Points in exchange
for all of your points and lollipops! (You'll get another one at{" "}
<b>{formatWhole(this.conversion.currentGain.value)}</b> Farm Points in
exchange for all of your points and lollipops! (You'll get another one at{" "}
{formatWhole(this.conversion.nextAt.value)} points)
</span>
);
} else {
return (
<span>
Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for
all of your points and lollipops! (At least{" "}
Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange
for all of your points and lollipops! (At least{" "}
{formatWhole(this.conversion.nextAt.value)} points)
</span>
);
@ -143,7 +142,7 @@ const resetButton = createResetButton({
}
});
export const tab = (): JSX.Element => (
const tab = (): JSX.Element => (
<template>
{render(coolInfo)}
<MainDisplay resource={points} color={color} />
@ -158,7 +157,7 @@ export const tab = (): JSX.Element => (
</template>
);
const layer = createLayer({
return {
id,
color,
name,
@ -173,6 +172,7 @@ const layer = createLayer({
treeNode,
resetButton,
display: tab
};
});
export default layer;

36
src/data/mod.tsx
View file

@ -10,23 +10,21 @@ import Decimal, { format, formatSmall, formatTime } from "@/util/bignum";
import { render } from "@/util/vue";
import { computed, ref } from "vue";
import a from "./layers/aca/a";
import c, {
generatorUpgrade,
lollipopMultiplierEffect,
lollipopMultiplierUpgrade
} from "./layers/aca/c";
import c from "./layers/aca/c";
import f from "./layers/aca/f";
export const points = createResource<DecimalSource>(0);
export const main = createLayer(() => {
const points = createResource<DecimalSource>(0);
const best = trackBest(points);
const total = trackTotal(points);
const oomps = trackOOMPS(points);
const showModal = ref(false);
const pointGain = computed(() => {
if (!generatorUpgrade.bought) return new Decimal(0);
if (!c.value.generatorUpgrade.bought) return new Decimal(0);
let gain = new Decimal(3.19);
if (lollipopMultiplierUpgrade.bought) gain = gain.times(lollipopMultiplierEffect.value);
if (c.value.lollipopMultiplierUpgrade.bought)
gain = gain.times(c.value.lollipopMultiplierEffect.value);
return gain;
});
globalBus.on("update", diff => {
@ -34,26 +32,27 @@ globalBus.on("update", diff => {
});
// Note: Casting as generic tree to avoid recursive type definitions
export const tree = createTree({
nodes: () => [[c.treeNode], [f.treeNode, c.spook]],
leftSideNodes: [a.treeNode, c.h],
const tree = createTree({
nodes: [[c.value.treeNode], [f.value.treeNode, c.value.spook]],
leftSideNodes: [a.value.treeNode, c.value.h],
branches: [
{
startNode: f.treeNode,
endNode: c.treeNode,
startNode: f.value.treeNode,
endNode: c.value.treeNode,
stroke: "blue",
"stroke-width": "25px",
style: {
filter: "blur(5px)"
}
},
{ startNode: c.treeNode, endNode: c.g }
{ startNode: c.value.treeNode, endNode: c.value.g }
]
}) as GenericTree;
// Note: layers don't _need_ a reference to everything, but I'd recommend it over trying to remember
// what does and doesn't need to be included. Officially all you need are anything with persistency
export const main = createLayer({
// Note: layers don't _need_ a reference to everything,
// but I'd recommend it over trying to remember what does and doesn't need to be included.
// Officially all you need are anything with persistency or that you want to access elsewhere
return {
id: "main",
name: "Tree",
links: tree.links,
@ -95,12 +94,13 @@ export const main = createLayer({
total,
oomps,
tree
};
});
export const getInitialLayers = (
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
player: Partial<PlayerData>
): Array<GenericLayer> => [main, f, c, a];
): Array<GenericLayer> => [main.value, f.value, c.value, a.value];
export const hasWon = computed(() => {
return false;

2
src/features/buyable.tsx
View file

@ -37,7 +37,7 @@ type BuyableDisplay =
export interface BuyableOptions {
visibility?: Computable<Visibility>;
cost?: Computable<DecimalSource>;
resource?: Computable<Resource>;
resource?: Resource;
canPurchase?: Computable<boolean>;
purchaseLimit?: Computable<DecimalSource>;
classes?: Computable<Record<string, boolean>>;

6
src/features/challenge.ts
View file

@ -34,7 +34,7 @@ export interface ChallengeOptions {
canComplete?: Computable<boolean | DecimalSource>;
completionLimit?: Computable<DecimalSource>;
mark?: Computable<boolean | string>;
resource?: Computable<Resource>;
resource?: Resource;
goal?: Computable<DecimalSource>;
classes?: Computable<Record<string, boolean>>;
style?: Computable<StyleValue>;
@ -72,7 +72,6 @@ export type Challenge<T extends ChallengeOptions> = Replace<
canComplete: GetComputableTypeWithDefault<T["canComplete"], Ref<boolean>>;
completionLimit: GetComputableTypeWithDefault<T["completionLimit"], 1>;
mark: GetComputableTypeWithDefault<T["mark"], Ref<boolean>>;
resource: GetComputableType<T["resource"]>;
goal: GetComputableType<T["goal"]>;
classes: GetComputableType<T["classes"]>;
style: GetComputableType<T["style"]>;
@ -160,7 +159,7 @@ export function createChallenge<T extends ChallengeOptions>(
if (!proxy.active.value || proxy.resource == null || proxy.goal == null) {
return false;
}
return Decimal.gte(unref<Resource>(proxy.resource).value, unref(proxy.goal));
return Decimal.gte(proxy.resource.value, unref(proxy.goal));
});
}
if (challenge.mark == null) {
@ -174,7 +173,6 @@ export function createChallenge<T extends ChallengeOptions>(
processComputable(challenge as T, "completionLimit");
setDefault(challenge, "completionLimit", 1);
processComputable(challenge as T, "mark");
processComputable(challenge as T, "resource");
processComputable(challenge as T, "goal");
processComputable(challenge as T, "classes");
processComputable(challenge as T, "style");

52
src/game/layers.ts
View file

@ -17,6 +17,7 @@ import {
} from "@/util/computed";
import { createProxy } from "@/util/proxies";
import { createNanoEvents, Emitter } from "nanoevents";
import { customRef, Ref } from "vue";
import { globalBus } from "./events";
import player from "./player";
@ -81,27 +82,40 @@ export type GenericLayer = Replace<
}
>;
export function createLayer<T extends LayerOptions>(options: T): Layer<T> {
const layer: T & Partial<BaseLayer> = options;
export function createLayer<T extends LayerOptions>(optionsFunc: () => T): Ref<Layer<T>> {
let layer: Layer<T> | null = null;
const emitter = (layer.emitter = createNanoEvents<LayerEvents>());
layer.on = emitter.on.bind(emitter);
layer.emit = emitter.emit.bind(emitter);
return customRef(track => {
return {
get() {
if (layer == undefined) {
const partialLayer = optionsFunc() as T & Partial<BaseLayer>;
const emitter = (partialLayer.emitter = createNanoEvents<LayerEvents>());
partialLayer.on = emitter.on.bind(emitter);
partialLayer.emit = emitter.emit.bind(emitter);
layer.minimized = persistent(false);
partialLayer.minimized = persistent(false);
processComputable(layer as T, "color");
processComputable(layer as T, "display");
processComputable(layer as T, "name");
setDefault(layer, "name", options.id);
processComputable(layer as T, "minWidth");
setDefault(layer, "minWidth", 600);
processComputable(layer as T, "minimizable");
setDefault(layer, "minimizable", true);
processComputable(layer as T, "links");
processComputable(partialLayer as T, "color");
processComputable(partialLayer as T, "display");
processComputable(partialLayer as T, "name");
setDefault(partialLayer, "name", partialLayer.id);
processComputable(partialLayer as T, "minWidth");
setDefault(partialLayer, "minWidth", 600);
processComputable(partialLayer as T, "minimizable");
setDefault(partialLayer, "minimizable", true);
processComputable(partialLayer as T, "links");
const proxy = createProxy(layer as unknown as Layer<T>);
return proxy;
layer = createProxy(partialLayer as unknown as Layer<T>);
}
track();
return layer;
},
set() {
console.error("Layers are read-only!");
}
};
});
}
export function addLayer(
@ -127,8 +141,8 @@ export function addLayer(
globalBus.emit("addLayer", layer, player.layers[layer.id]);
}
export function getLayer<T extends GenericLayer>(layerID: string): () => T {
return () => layers[layerID] as T;
export function getLayer<T extends GenericLayer>(layerID: string): T {
return layers[layerID] as T;
}
export function removeLayer(layer: GenericLayer): void {