Make layers lazy instantiate
This commit is contained in:
parent
90e49e196f
commit
067ba6ce90
8 changed files with 929 additions and 909 deletions
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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,21 +8,22 @@ 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 id = "a";
|
||||
const color = "yellow";
|
||||
const name = "Achievements";
|
||||
const points = createResource<DecimalSource>(0, "achievement power");
|
||||
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
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const ach1 = createAchievement({
|
||||
const ach1 = createAchievement({
|
||||
image: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
|
||||
display: "Get me!",
|
||||
tooltip() {
|
||||
|
|
@ -32,8 +33,8 @@ const ach1 = createAchievement({
|
|||
return "How did this happen?";
|
||||
},
|
||||
shouldEarn: true
|
||||
});
|
||||
const ach2 = createAchievement({
|
||||
});
|
||||
const ach2 = createAchievement({
|
||||
display: "Impossible!",
|
||||
tooltip() {
|
||||
if (this.earned.value) {
|
||||
|
|
@ -42,21 +43,21 @@ const ach2 = createAchievement({
|
|||
return "Mwahahaha!";
|
||||
},
|
||||
style: { color: "#04e050" }
|
||||
});
|
||||
const ach3 = createAchievement({
|
||||
});
|
||||
const ach3 = createAchievement({
|
||||
display: "EIEIO",
|
||||
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!");
|
||||
}
|
||||
});
|
||||
const achievements = [ach1, ach2, ach3];
|
||||
});
|
||||
const achievements = [ach1, ach2, ach3];
|
||||
|
||||
const grid = createGrid({
|
||||
const grid = createGrid({
|
||||
rows: 2,
|
||||
cols: 2,
|
||||
getStartState(id) {
|
||||
|
|
@ -86,22 +87,22 @@ 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;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const display = (
|
||||
const display = (
|
||||
<template>
|
||||
{renderRow(achievements)}
|
||||
{render(grid)}
|
||||
</template>
|
||||
);
|
||||
);
|
||||
|
||||
const layer = createLayer({
|
||||
return {
|
||||
id,
|
||||
color,
|
||||
name,
|
||||
|
|
@ -110,6 +111,7 @@ const layer = createLayer({
|
|||
grid,
|
||||
treeNode,
|
||||
display
|
||||
};
|
||||
});
|
||||
|
||||
export default layer;
|
||||
|
|
|
|||
|
|
@ -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,38 +23,37 @@ 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";
|
||||
import { computed, Ref } from "vue";
|
||||
import f from "./f";
|
||||
|
||||
const c = getLayer("c");
|
||||
const layer = createLayer(() => {
|
||||
const id = "c";
|
||||
const color = "#4BDC13";
|
||||
const name = "Candies";
|
||||
const points = addSoftcap(createResource<DecimalSource>(0, "lollipops"), 1e100, 0.5);
|
||||
const best = trackBest(points);
|
||||
const beep = persistent<boolean>(false);
|
||||
const thingy = persistent<string>("pointy");
|
||||
const otherThingy = persistent<number>(10);
|
||||
const spentOnBuyables = persistent(new Decimal(10));
|
||||
|
||||
const id = "c";
|
||||
const color = "#4BDC13";
|
||||
const name = "Candies";
|
||||
const points = addSoftcap(createResource<DecimalSource>(0, "lollipops"), 1e100, 0.5);
|
||||
const best = trackBest(points);
|
||||
const beep = persistent<boolean>(false);
|
||||
const thingy = persistent<string>("pointy");
|
||||
export const otherThingy = persistent<number>(10);
|
||||
const spentOnBuyables = persistent(new Decimal(10));
|
||||
const waffleBoost = computed(() => Decimal.pow(points.value, 0.2));
|
||||
const icecreamCap = computed(() => Decimal.times(points.value, 10));
|
||||
|
||||
const waffleBoost = computed(() => Decimal.pow(points.value, 0.2));
|
||||
const icecreamCap = computed(() => Decimal.times(points.value, 10));
|
||||
|
||||
const coolInfo = createInfobox({
|
||||
const coolInfo = createInfobox({
|
||||
title: "Lore",
|
||||
titleStyle: { color: "#FE0000" },
|
||||
display: "DEEP LORE!",
|
||||
bodyStyle: { backgroundColor: "#0000EE" }
|
||||
});
|
||||
});
|
||||
|
||||
const lollipopMilestone3 = createMilestone({
|
||||
const lollipopMilestone3 = createMilestone({
|
||||
shouldEarn() {
|
||||
return Decimal.gte(best.value, 3);
|
||||
},
|
||||
|
|
@ -62,8 +61,8 @@ const lollipopMilestone3 = createMilestone({
|
|||
requirement: "3 Lollipops",
|
||||
effectDisplay: "Unlock the next milestone"
|
||||
}
|
||||
});
|
||||
const lollipopMilestone4 = createMilestone({
|
||||
});
|
||||
const lollipopMilestone4 = createMilestone({
|
||||
visibility() {
|
||||
return showIf(lollipopMilestone3.earned.value);
|
||||
},
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -88,10 +87,10 @@ const lollipopMilestone4 = createMilestone({
|
|||
}
|
||||
return {};
|
||||
}
|
||||
});
|
||||
const lollipopMilestones = [lollipopMilestone3, lollipopMilestone4];
|
||||
});
|
||||
const lollipopMilestones = [lollipopMilestone3, lollipopMilestone4];
|
||||
|
||||
const funChallenge = createChallenge({
|
||||
const funChallenge = createChallenge({
|
||||
title: "Fun",
|
||||
completionLimit: 3,
|
||||
display: {
|
||||
|
|
@ -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");
|
||||
},
|
||||
|
|
@ -121,16 +120,16 @@ const funChallenge = createChallenge({
|
|||
style: {
|
||||
height: "200px"
|
||||
}
|
||||
});
|
||||
const funEffect = computed(() => Decimal.add(points.value, 1).tetrate(0.02));
|
||||
});
|
||||
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
|
||||
|
|
@ -138,23 +137,24 @@ export const lollipopMultiplierUpgrade = createUpgrade({
|
|||
cost: 1,
|
||||
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" };
|
||||
|
|
@ -164,10 +164,10 @@ export const unlockIlluminatiUpgrade = createUpgrade({
|
|||
}
|
||||
return {};
|
||||
}
|
||||
});
|
||||
const upgrades = [generatorUpgrade, lollipopMultiplierUpgrade, unlockIlluminatiUpgrade];
|
||||
});
|
||||
const upgrades = [generatorUpgrade, lollipopMultiplierUpgrade, unlockIlluminatiUpgrade];
|
||||
|
||||
const exhancers = createBuyable({
|
||||
const exhancers = createBuyable({
|
||||
resource: points,
|
||||
cost() {
|
||||
let x = new Decimal(this.amount.value);
|
||||
|
|
@ -190,21 +190,21 @@ const exhancers = createBuyable({
|
|||
},
|
||||
style: { height: "222px" },
|
||||
purchaseLimit: 4
|
||||
});
|
||||
const exhancersFirstEffect = computed(() => {
|
||||
});
|
||||
const exhancersFirstEffect = computed(() => {
|
||||
if (Decimal.gte(exhancers.amount.value, 0)) {
|
||||
return Decimal.pow(25, Decimal.pow(exhancers.amount.value, 1.1));
|
||||
}
|
||||
return Decimal.pow(1 / 25, Decimal.times(exhancers.amount.value, -1).pow(1.1));
|
||||
});
|
||||
const exhancersSecondEffect = computed(() => {
|
||||
});
|
||||
const exhancersSecondEffect = computed(() => {
|
||||
if (Decimal.gte(exhancers.amount.value, 0)) {
|
||||
return Decimal.pow(25, Decimal.pow(exhancers.amount.value, 1.1));
|
||||
}
|
||||
return Decimal.pow(1 / 25, Decimal.times(exhancers.amount.value, -1).pow(1.1));
|
||||
});
|
||||
const confirmRespec = persistent<boolean>(false);
|
||||
const respecBuyables = createClickable({
|
||||
});
|
||||
const confirmRespec = persistent<boolean>(false);
|
||||
const respecBuyables = createClickable({
|
||||
small: true,
|
||||
display: "Respec Thingies",
|
||||
onClick() {
|
||||
|
|
@ -216,10 +216,10 @@ const respecBuyables = createClickable({
|
|||
}
|
||||
|
||||
points.value = Decimal.add(points.value, spentOnBuyables.value);
|
||||
mainTree.reset(treeNode);
|
||||
main.value.tree.reset(treeNode);
|
||||
}
|
||||
});
|
||||
const sellExhancer = createClickable({
|
||||
});
|
||||
const sellExhancer = createClickable({
|
||||
small: true,
|
||||
display: "Sell One",
|
||||
onClick() {
|
||||
|
|
@ -229,8 +229,8 @@ const sellExhancer = createClickable({
|
|||
exhancers.amount.value = Decimal.sub(exhancers.amount.value, 1);
|
||||
points.value = Decimal.add(points.value, exhancers.cost.value);
|
||||
}
|
||||
});
|
||||
const buyablesDisplay = (
|
||||
});
|
||||
const buyablesDisplay = (
|
||||
<Column>
|
||||
<Row>
|
||||
<Toggle title="Confirm" v-model={confirmRespec} />
|
||||
|
|
@ -239,9 +239,9 @@ const buyablesDisplay = (
|
|||
{render(exhancers)}
|
||||
{render(sellExhancer)}
|
||||
</Column>
|
||||
);
|
||||
);
|
||||
|
||||
const longBoi = createBar({
|
||||
const longBoi = createBar({
|
||||
fillStyle: { backgroundColor: "#FFFFFF" },
|
||||
baseStyle: { backgroundColor: "#696969" },
|
||||
textStyle: { color: "#04e050" },
|
||||
|
|
@ -249,13 +249,13 @@ 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({
|
||||
});
|
||||
const tallBoi = createBar({
|
||||
fillStyle: { backgroundColor: "#4BEC13" },
|
||||
baseStyle: { backgroundColor: "#000000" },
|
||||
textStyle: { textShadow: "0px 0px 2px #000000" },
|
||||
|
|
@ -264,13 +264,13 @@ 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({
|
||||
});
|
||||
const flatBoi = createBar({
|
||||
fillStyle: { backgroundColor: "#FE0102" },
|
||||
baseStyle: { backgroundColor: "#222222" },
|
||||
textStyle: { textShadow: "0px 0px 2px #000000" },
|
||||
|
|
@ -280,20 +280,20 @@ const flatBoi = createBar({
|
|||
progress() {
|
||||
return Decimal.div(points.value, 50);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const conversion = createCumulativeConversion({
|
||||
const conversion = createCumulativeConversion({
|
||||
scaling: createExponentialScaling(10, 5, 0.5),
|
||||
baseResource: mainPoints,
|
||||
baseResource: main.value.points,
|
||||
gainResource: points,
|
||||
roundUpCost: true
|
||||
});
|
||||
});
|
||||
|
||||
const reset = createReset({
|
||||
thingsToReset: () => [c()]
|
||||
});
|
||||
const reset = createReset({
|
||||
thingsToReset: () => [getLayer("c")]
|
||||
});
|
||||
|
||||
const hotkeys = [
|
||||
const hotkeys = [
|
||||
createHotkey({
|
||||
key: "c",
|
||||
description: "reset for lollipops or whatever",
|
||||
|
|
@ -310,9 +310,9 @@ const hotkeys = [
|
|||
respecBuyables.onClick();
|
||||
}
|
||||
})
|
||||
];
|
||||
];
|
||||
|
||||
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;
|
||||
},
|
||||
|
|
@ -328,19 +330,19 @@ export const treeNode = createLayerTreeNode({
|
|||
color: "#3325CC",
|
||||
textDecoration: "underline"
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const resetButton = createResetButton({
|
||||
const resetButton = createResetButton({
|
||||
conversion,
|
||||
tree: mainTree,
|
||||
tree: main.value.tree,
|
||||
treeNode,
|
||||
style: {
|
||||
color: "#AA66AA"
|
||||
},
|
||||
resetDescription: "Melt your points into "
|
||||
});
|
||||
});
|
||||
|
||||
export const g = createTreeNode({
|
||||
const g = createTreeNode({
|
||||
display: "TH",
|
||||
color: "#6d3678",
|
||||
canClick() {
|
||||
|
|
@ -357,30 +359,31 @@ 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 tree = createTree({
|
||||
nodes() {
|
||||
});
|
||||
const spook = createTreeNode({});
|
||||
const tree = createTree({
|
||||
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,10 +393,11 @@ const tree = createTree({
|
|||
},
|
||||
{ startNode: treeNode, endNode: g },
|
||||
{ startNode: g, endNode: h }
|
||||
]
|
||||
});
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
const illuminatiTabs = createTabFamily({
|
||||
const illuminatiTabs = createTabFamily({
|
||||
tabs: {
|
||||
first: createTabButton({
|
||||
tab: (
|
||||
|
|
@ -405,7 +409,7 @@ const illuminatiTabs = createTabFamily({
|
|||
display: "first"
|
||||
}),
|
||||
second: createTabButton({
|
||||
tab: () => fTab,
|
||||
tab: f.value.display as CoercableComponent,
|
||||
display: "second"
|
||||
})
|
||||
},
|
||||
|
|
@ -417,9 +421,9 @@ const illuminatiTabs = createTabFamily({
|
|||
border: "solid white",
|
||||
margin: "auto"
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const tabs = createTabFamily({
|
||||
const tabs = createTabFamily({
|
||||
tabs: {
|
||||
mainTab: createTabButton({
|
||||
tab: createTab({
|
||||
|
|
@ -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)}
|
||||
|
|
@ -553,9 +557,9 @@ const tabs = createTabFamily({
|
|||
display: "illuminati"
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const layer = createLayer({
|
||||
return {
|
||||
id,
|
||||
color,
|
||||
name,
|
||||
|
|
@ -600,6 +604,7 @@ const layer = createLayer({
|
|||
resetButton,
|
||||
minWidth: 800,
|
||||
display: render(tabs)
|
||||
};
|
||||
});
|
||||
|
||||
export default layer;
|
||||
|
|
|
|||
|
|
@ -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,25 +10,24 @@ 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";
|
||||
import c from "./c";
|
||||
|
||||
const f = getLayer("f");
|
||||
const layer = createLayer(() => {
|
||||
const id = "f";
|
||||
const color = "#FE0102";
|
||||
const name = "Farms";
|
||||
const points = createResource<DecimalSource>(0, "farm points");
|
||||
const boop = persistent<boolean>(false);
|
||||
|
||||
const id = "f";
|
||||
const color = "#FE0102";
|
||||
const name = "Farms";
|
||||
export const points = createResource<DecimalSource>(0, "farm points");
|
||||
export const boop = persistent<boolean>(false);
|
||||
|
||||
const coolInfo = createInfobox({
|
||||
const coolInfo = createInfobox({
|
||||
title: "Lore",
|
||||
titleStyle: { color: "#FE0000" },
|
||||
display: "DEEP LORE!",
|
||||
bodyStyle: { backgroundColor: "#0000EE" }
|
||||
});
|
||||
});
|
||||
|
||||
const clickableState = persistent<string>("Start");
|
||||
const clickable = createClickable({
|
||||
const clickableState = persistent<string>("Start");
|
||||
const clickable = createClickable({
|
||||
display: {
|
||||
title: "Clicky clicky!",
|
||||
description() {
|
||||
|
|
@ -76,9 +75,9 @@ const clickable = createClickable({
|
|||
return {};
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const resetClickable = createClickable({
|
||||
const resetClickable = createClickable({
|
||||
onClick() {
|
||||
if (clickableState.value == "Borkened...") {
|
||||
clickableState.value = "Start";
|
||||
|
|
@ -87,20 +86,20 @@ const resetClickable = createClickable({
|
|||
display() {
|
||||
return clickableState.value == "Borkened..." ? "Fix the clickable!" : "Does nothing";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const reset = createReset({
|
||||
thingsToReset: () => [f()]
|
||||
});
|
||||
const reset = createReset({
|
||||
thingsToReset: () => [getLayer("f")]
|
||||
});
|
||||
|
||||
const conversion = createIndependentConversion({
|
||||
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,41 +108,41 @@ 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({
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
export const tab = (): JSX.Element => (
|
||||
const tab = (): JSX.Element => (
|
||||
<template>
|
||||
{render(coolInfo)}
|
||||
<MainDisplay resource={points} color={color} />
|
||||
|
|
@ -156,9 +155,9 @@ export const tab = (): JSX.Element => (
|
|||
</div>
|
||||
{render(clickable)}
|
||||
</template>
|
||||
);
|
||||
);
|
||||
|
||||
const layer = createLayer({
|
||||
return {
|
||||
id,
|
||||
color,
|
||||
name,
|
||||
|
|
@ -173,6 +172,7 @@ const layer = createLayer({
|
|||
treeNode,
|
||||
resetButton,
|
||||
display: tab
|
||||
};
|
||||
});
|
||||
|
||||
export default layer;
|
||||
|
|
|
|||
|
|
@ -10,50 +10,49 @@ 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);
|
||||
const best = trackBest(points);
|
||||
const total = trackTotal(points);
|
||||
const oomps = trackOOMPS(points);
|
||||
const showModal = ref(false);
|
||||
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);
|
||||
const pointGain = computed(() => {
|
||||
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 => {
|
||||
});
|
||||
globalBus.on("update", diff => {
|
||||
points.value = Decimal.add(points.value, Decimal.times(pointGain.value, 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],
|
||||
// Note: Casting as generic tree to avoid recursive type definitions
|
||||
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;
|
||||
}) 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;
|
||||
|
|
|
|||
|
|
@ -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>>;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue