mirror of
https://github.com/thepaperpilot/Advent-Incremental.git
synced 2025-02-16 09:31:43 +00:00
Basic tree layer
This commit is contained in:
parent
345ad8dfac
commit
de603a47b4
4 changed files with 145 additions and 81 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="layer-container" :style="{ '--layer-color': unref(color) }">
|
||||
<button v-if="showGoBack" class="goBack" @click="goBack">←</button>
|
||||
<button v-if="showGoBack" class="goBack" @click="goBack">❌</button>
|
||||
<button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false">
|
||||
<div>{{ unref(name) }}</div>
|
||||
</button>
|
||||
|
|
@ -201,8 +201,8 @@ export default defineComponent({
|
|||
|
||||
.goBack {
|
||||
position: sticky;
|
||||
top: 6px;
|
||||
left: 20px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
line-height: 30px;
|
||||
margin-top: -50px;
|
||||
margin-left: -35px;
|
||||
|
|
@ -211,7 +211,7 @@ export default defineComponent({
|
|||
box-shadow: var(--background) 0 2px 3px 5px;
|
||||
border-radius: 50%;
|
||||
color: var(--foreground);
|
||||
font-size: 40px;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
z-index: 7;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
/**
|
||||
* @module
|
||||
* @hidden
|
||||
*/
|
||||
import { main } from "data/projEntry";
|
||||
import { createCumulativeConversion, createPolynomialScaling } from "features/conversion";
|
||||
import { jsx } from "features/feature";
|
||||
import { createHotkey } from "features/hotkey";
|
||||
import { createReset } from "features/reset";
|
||||
import MainDisplay from "features/resources/MainDisplay.vue";
|
||||
import { createResource } from "features/resources/resource";
|
||||
import { addTooltip } from "features/tooltips/tooltip";
|
||||
import { createResourceTooltip } from "features/trees/tree";
|
||||
import { BaseLayer, createLayer } from "game/layers";
|
||||
import type { DecimalSource } from "util/bignum";
|
||||
import { render } from "util/vue";
|
||||
import { createLayerTreeNode, createResetButton } from "../common";
|
||||
|
||||
const id = "p";
|
||||
const layer = createLayer(id, function (this: BaseLayer) {
|
||||
const name = "Prestige";
|
||||
const color = "#4BDC13";
|
||||
const points = createResource<DecimalSource>(0, "prestige points");
|
||||
|
||||
const conversion = createCumulativeConversion(() => ({
|
||||
scaling: createPolynomialScaling(10, 0.5),
|
||||
baseResource: main.points,
|
||||
gainResource: points,
|
||||
roundUpCost: true
|
||||
}));
|
||||
|
||||
const reset = createReset(() => ({
|
||||
thingsToReset: (): Record<string, unknown>[] => [layer]
|
||||
}));
|
||||
|
||||
const treeNode = createLayerTreeNode(() => ({
|
||||
layerID: id,
|
||||
color,
|
||||
reset
|
||||
}));
|
||||
addTooltip(treeNode, {
|
||||
display: createResourceTooltip(points),
|
||||
pinnable: true
|
||||
});
|
||||
|
||||
const resetButton = createResetButton(() => ({
|
||||
conversion,
|
||||
tree: main.tree,
|
||||
treeNode
|
||||
}));
|
||||
|
||||
const hotkey = createHotkey(() => ({
|
||||
description: "Reset for prestige points",
|
||||
key: "p",
|
||||
onPress: resetButton.onClick
|
||||
}));
|
||||
|
||||
return {
|
||||
name,
|
||||
color,
|
||||
points,
|
||||
display: jsx(() => (
|
||||
<>
|
||||
<MainDisplay resource={points} color={color} />
|
||||
{render(resetButton)}
|
||||
</>
|
||||
)),
|
||||
treeNode,
|
||||
hotkey
|
||||
};
|
||||
});
|
||||
|
||||
export default layer;
|
||||
132
src/data/layers/trees.tsx
Normal file
132
src/data/layers/trees.tsx
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
/**
|
||||
* @module
|
||||
* @hidden
|
||||
*/
|
||||
import Spacer from "components/layout/Spacer.vue";
|
||||
import { createClickable } from "features/clickables/clickable";
|
||||
import { jsx } from "features/feature";
|
||||
import MainDisplay from "features/resources/MainDisplay.vue";
|
||||
import { createResource } from "features/resources/resource";
|
||||
import Resource from "features/resources/Resource.vue";
|
||||
import { addTooltip } from "features/tooltips/tooltip";
|
||||
import Tooltip from "features/tooltips/Tooltip.vue";
|
||||
import { BaseLayer, createLayer } from "game/layers";
|
||||
import { createModifierSection, createSequentialModifier } from "game/modifiers";
|
||||
import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
|
||||
import { renderRow } from "util/vue";
|
||||
import { computed } from "vue";
|
||||
|
||||
const id = "trees";
|
||||
const layer = createLayer(id, function (this: BaseLayer) {
|
||||
const name = "Trees";
|
||||
const color = "#4BDC13";
|
||||
|
||||
const logs = createResource<DecimalSource>(0, "logs");
|
||||
const trees = createResource<DecimalSource>(1e6, "trees");
|
||||
const saplings = createResource<DecimalSource>(0, "saplings");
|
||||
|
||||
const manualCuttingAmount = createSequentialModifier(() => []);
|
||||
const manualComputedCuttingAmount = computed(() => manualCuttingAmount.apply(1));
|
||||
const manualCuttingAmountDisplay = createModifierSection("Modifiers", "", manualCuttingAmount);
|
||||
|
||||
const autoCuttingAmount = createSequentialModifier(() => []);
|
||||
const autoComputedCuttingAmount = computed(() => autoCuttingAmount.apply(0));
|
||||
const autoCuttingAmountDisplay = createModifierSection("Modifiers", "", autoCuttingAmount);
|
||||
|
||||
const manualPlantingAmount = createSequentialModifier(() => []);
|
||||
const manualComputedPlantingAmount = computed(() => manualPlantingAmount.apply(1));
|
||||
const manualPlantingAmountDisplay = createModifierSection(
|
||||
"Modifiers",
|
||||
"",
|
||||
manualPlantingAmount
|
||||
);
|
||||
|
||||
const autoPlantingAmount = createSequentialModifier(() => []);
|
||||
const autoComputedPlantingAmount = computed(() => autoPlantingAmount.apply(0));
|
||||
const autoPlantingAmountDisplay = createModifierSection("Modifiers", "", autoPlantingAmount);
|
||||
|
||||
const cutTree = createClickable(() => ({
|
||||
display: {
|
||||
title: "Cut trees",
|
||||
description: jsx(() => (
|
||||
<>
|
||||
Cut down up to {formatWhole(manualComputedCuttingAmount.value)} tree
|
||||
{Decimal.eq(manualComputedCuttingAmount.value, 1) ? "" : "s"} at once!
|
||||
</>
|
||||
))
|
||||
},
|
||||
style: {
|
||||
minHeight: "80px"
|
||||
},
|
||||
canClick: () => Decimal.gt(trees.value, 0),
|
||||
onClick() {
|
||||
trees.value = Decimal.sub(trees.value, 1);
|
||||
logs.value = Decimal.add(logs.value, 1);
|
||||
saplings.value = Decimal.add(saplings.value, 1);
|
||||
}
|
||||
}));
|
||||
addTooltip(cutTree, {
|
||||
display: jsx(() => manualCuttingAmountDisplay)
|
||||
});
|
||||
|
||||
const plantTree = createClickable(() => ({
|
||||
display: {
|
||||
title: "Plant trees",
|
||||
description: jsx(() => (
|
||||
<>
|
||||
Plant up to {formatWhole(manualComputedPlantingAmount.value)} tree
|
||||
{Decimal.eq(manualComputedPlantingAmount.value, 1) ? "" : "s"} at once!
|
||||
</>
|
||||
))
|
||||
},
|
||||
style: {
|
||||
minHeight: "80px"
|
||||
},
|
||||
canClick: () => Decimal.gt(saplings.value, 0),
|
||||
onClick() {
|
||||
trees.value = Decimal.add(trees.value, 1);
|
||||
saplings.value = Decimal.sub(saplings.value, 1);
|
||||
}
|
||||
}));
|
||||
addTooltip(cutTree, {
|
||||
display: jsx(() => manualPlantingAmountDisplay)
|
||||
});
|
||||
|
||||
return {
|
||||
name,
|
||||
color,
|
||||
logs,
|
||||
trees,
|
||||
saplings,
|
||||
cutTree,
|
||||
plantTree,
|
||||
display: jsx(() => (
|
||||
<>
|
||||
<MainDisplay resource={logs} color={color} style="margin-bottom: 0" />
|
||||
<MainDisplay resource={saplings} color="green" style="margin-bottom: 0" />
|
||||
<MainDisplay resource={trees} color="green" style="margin-bottom: 0" />
|
||||
<br />
|
||||
{Decimal.gt(autoComputedCuttingAmount.value, 0) ? (
|
||||
<>
|
||||
<Tooltip display={jsx(() => autoCuttingAmountDisplay)}>
|
||||
You cut down {format(autoComputedCuttingAmount.value)} trees/s
|
||||
</Tooltip>
|
||||
<br />
|
||||
</>
|
||||
) : null}
|
||||
{Decimal.gt(autoComputedPlantingAmount.value, 0) ? (
|
||||
<>
|
||||
<Tooltip display={jsx(() => autoPlantingAmountDisplay)}>
|
||||
You plant {format(autoComputedPlantingAmount.value)} trees/s
|
||||
</Tooltip>
|
||||
<br />
|
||||
</>
|
||||
) : null}
|
||||
<Spacer />
|
||||
{renderRow(cutTree, plantTree)}
|
||||
</>
|
||||
))
|
||||
};
|
||||
});
|
||||
|
||||
export default layer;
|
||||
|
|
@ -11,7 +11,7 @@ import { format, formatTime } from "util/bignum";
|
|||
import { render, renderRow, VueFeature } from "util/vue";
|
||||
import { computed, ref } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import prestige from "./layers/prestige";
|
||||
import trees from "./layers/trees";
|
||||
import { createLazyProxy } from "util/proxies";
|
||||
import { Computable, convertComputable, ProcessedComputable } from "util/computed";
|
||||
import Modal from "components/Modal.vue";
|
||||
|
|
@ -67,7 +67,12 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
openLore.value = day;
|
||||
},
|
||||
onOpenLayer() {
|
||||
player.tabs.splice(1, 1, layer ?? "p");
|
||||
if (player.tabs.includes(layer ?? "trees")) {
|
||||
const index = player.tabs.lastIndexOf(layer ?? "trees");
|
||||
player.tabs.splice(index, 1);
|
||||
} else {
|
||||
player.tabs.push(layer ?? "trees");
|
||||
}
|
||||
},
|
||||
onUnlockLayer() {
|
||||
opened.value = true;
|
||||
|
|
@ -111,7 +116,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
modelValue={openLore.value !== -1}
|
||||
onUpdate:modelValue={() => (openLore.value = -1)}
|
||||
v-slots={{
|
||||
header: () => <h2>{layers[days[openLore.value - 1]?.layer ?? "p"]?.name}</h2>,
|
||||
header: () => <h2>{layers[days[openLore.value - 1]?.layer ?? "trees"]?.name}</h2>,
|
||||
body: () => days[openLore.value - 1]?.story ?? ""
|
||||
}}
|
||||
/>
|
||||
|
|
@ -159,7 +164,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
export const getInitialLayers = (
|
||||
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
|
||||
player: Partial<PlayerData>
|
||||
): Array<GenericLayer> => [main, prestige];
|
||||
): Array<GenericLayer> => [main, trees];
|
||||
|
||||
/**
|
||||
* A computed ref whose value is true whenever the game is over.
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue