Revert changes in /data. Check the board-example branch for them instead

This commit is contained in:
thepaperpilot 2024-03-10 09:27:31 -05:00
parent 0e7ca27e3b
commit 1b267edc32
2 changed files with 142 additions and 405 deletions

View file

@ -0,0 +1,73 @@
/**
* @module
* @hidden
*/
import { main } from "data/projEntry";
import { createCumulativeConversion } 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(() => ({
formula: x => x.div(10).sqrt(),
baseResource: main.points,
gainResource: points
}));
const reset = createReset(() => ({
thingsToReset: (): Record<string, unknown>[] => [layer]
}));
const treeNode = createLayerTreeNode(() => ({
layerID: id,
color,
reset
}));
const tooltip = 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,
tooltip,
display: jsx(() => (
<>
<MainDisplay resource={points} color={color} />
{render(resetButton)}
</>
)),
treeNode,
hotkey
};
});
export default layer;

View file

@ -1,428 +1,92 @@
import Board from "game/boards/Board.vue"; import Node from "components/Node.vue";
import CircleProgress from "game/boards/CircleProgress.vue"; import Spacer from "components/layout/Spacer.vue";
import SVGNode from "game/boards/SVGNode.vue";
import SquareProgress from "game/boards/SquareProgress.vue";
import {
NodePosition,
makeDraggable,
placeInAvailableSpace,
setupActions,
setupDraggableNode,
setupUniqueIds
} from "game/boards/board";
import { jsx } from "features/feature"; import { jsx } from "features/feature";
import { createResource } from "features/resources/resource"; import { createResource, trackBest, trackOOMPS, trackTotal } from "features/resources/resource";
import { createUpgrade } from "features/upgrades/upgrade"; import type { GenericTree } from "features/trees/tree";
import { branchedResetPropagation, createTree } from "features/trees/tree";
import { globalBus } from "game/events";
import type { BaseLayer, GenericLayer } from "game/layers"; import type { BaseLayer, GenericLayer } from "game/layers";
import { createLayer } from "game/layers"; import { createLayer } from "game/layers";
import { Persistent, persistent } from "game/persistence";
import type { Player } from "game/player"; import type { Player } from "game/player";
import { createCostRequirement } from "game/requirements"; import player from "game/player";
import type { DecimalSource } from "util/bignum";
import Decimal, { format, formatTime } from "util/bignum";
import { render } from "util/vue"; import { render } from "util/vue";
import { ComponentPublicInstance, computed, ref, watch } from "vue"; import { computed, toRaw } from "vue";
import { setupSelectable } from "./common"; import prestige from "./layers/prestige";
import "./common.css";
/** /**
* @hidden * @hidden
*/ */
export const main = createLayer("main", function (this: BaseLayer) { export const main = createLayer("main", function (this: BaseLayer) {
type ANode = NodePosition & { id: number; links: number[]; type: "anode"; z: number }; const points = createResource<DecimalSource>(10);
type BNode = NodePosition & { id: number; links: number[]; type: "bnode"; z: number }; const best = trackBest(points);
type CNode = typeof cNode & { position: Persistent<NodePosition> }; const total = trackTotal(points);
type NodeTypes = ANode | BNode;
const board = ref<ComponentPublicInstance<typeof Board>>(); const pointGain = computed(() => {
// eslint-disable-next-line prefer-const
const { select, deselect, selected } = setupSelectable<number>(); let gain = new Decimal(1);
const { return gain;
select: selectAction,
deselect: deselectAction,
selected: selectedAction
} = setupSelectable<number>();
watch(selected, selected => {
if (selected == null) {
deselectAction();
}
}); });
globalBus.on("update", diff => {
points.value = Decimal.add(points.value, Decimal.times(pointGain.value, diff));
});
const oomps = trackOOMPS(points, pointGain);
const { const tree = createTree(() => ({
startDrag, nodes: [[prestige.treeNode]],
endDrag, branches: [],
drag, onReset() {
nodeBeingDragged, points.value = toRaw(this.resettingNode.value) === toRaw(prestige.treeNode) ? 0 : 10;
hasDragged, best.value = points.value;
receivingNodes, total.value = points.value;
receivingNode,
dragDelta
} = setupDraggableNode<number | "cnode">({
board,
getPosition(id) {
return nodesById.value[id] ?? (cNode as CNode).position.value;
}, },
setPosition(id, position) { resetPropagation: branchedResetPropagation
const node = nodesById.value[id] ?? (cNode as CNode).position.value; })) as GenericTree;
node.x = position.x;
node.y = position.y;
}
});
// a nodes can be slotted into b nodes to draw a branch between them, with limited connections
// a nodes can be selected and have an action to spawn a b node, and vice versa
// Newly spawned nodes should find a safe spot to spawn, and display a link to their creator
// a nodes use all the stuff circles used to have, and b diamonds
// c node also exists but is a single Upgrade element that cannot be selected, but can be dragged
// d nodes are a performance test - 1000 simple nodes that have no interactions
// Make all nodes animate in (decorator? `fadeIn(feature)?)
const nodes = persistent<(ANode | BNode)[]>([
{ id: 0, x: 0, y: 0, z: 0, links: [], type: "anode" }
]);
const nodesById = computed<Record<string, NodeTypes>>(() =>
nodes.value.reduce((acc, curr) => ({ ...acc, [curr.id]: curr }), {})
);
function mouseDownNode(e: MouseEvent | TouchEvent, node: NodeTypes) {
const oldZ = node.z;
nodes.value.forEach(node => {
if (node.z > oldZ) {
node.z--;
}
});
node.z = nextId.value;
if (nodeBeingDragged.value == null) {
startDrag(e, node.id);
}
deselect();
}
function mouseUpNode(e: MouseEvent | TouchEvent, node: NodeTypes) {
if (!hasDragged.value) {
endDrag();
if (typeof node.id === "number") {
select(node.id);
}
e.stopPropagation();
}
}
function translate(node: NodePosition, isDragging: boolean) {
let x = node.x;
let y = node.y;
if (isDragging) {
x += dragDelta.value.x;
y += dragDelta.value.y;
}
return ` translate(${x}px,${y}px)`;
}
function rotate(rotation: number) {
return ` rotate(${rotation}deg) `;
}
function scale(nodeOrBool: NodeTypes | boolean) {
const isSelected =
typeof nodeOrBool === "boolean" ? nodeOrBool : selected.value === nodeOrBool.id;
return isSelected ? " scale(1.2)" : "";
}
function opacity(node: NodeTypes) {
const isDragging = selected.value !== node.id && nodeBeingDragged.value === node.id;
if (isDragging) {
return "; opacity: 0.5;";
}
return "";
}
function zIndex(node: NodeTypes) {
if (selected.value === node.id || nodeBeingDragged.value === node.id) {
return "; z-index: 100000000";
}
return "; z-index: " + node.z;
}
const renderANode = function (node: ANode) {
return (
<SVGNode
style={`transform: ${translate(node, nodeBeingDragged.value === node.id)}${opacity(
node
)}${zIndex(node)}`}
onMouseDown={e => mouseDownNode(e, node)}
onMouseUp={e => mouseUpNode(e, node)}
>
<g style={`transform: ${scale(node)}`}>
{receivingNodes.value.includes(node.id) && (
<circle
r="58"
fill="var(--background)"
stroke={receivingNode.value === node.id ? "#0F0" : "#0F03"}
stroke-width="2"
/>
)}
<CircleProgress r={54.5} progress={0.5} stroke="var(--accent2)" />
<circle
r="50"
fill="var(--raised-background)"
stroke="var(--outline)"
stroke-width="4"
/>
</g>
{selected.value === node.id && selectedAction.value === 0 && (
<text y="140" fill="var(--foreground)" class="node-text">
Spawn B Node
</text>
)}
<text fill="var(--foreground)" class="node-text">
A
</text>
</SVGNode>
);
};
const aActions = setupActions({
node: () => nodesById.value[selected.value ?? ""],
shouldShowActions: node => node.type === "anode",
actions(node) {
return [
p => (
<g
style={`transform: ${translate(p, selectedAction.value === 0)}${scale(
selectedAction.value === 0
)}`}
onClick={() => {
if (selectedAction.value === 0) {
spawnBNode(node as ANode);
} else {
selectAction(0);
}
}}
>
<circle fill="black" r="20"></circle>
<text fill="white" class="material-icons" x="-12" y="12">
add
</text>
</g>
)
];
},
distance: 100
});
const sqrtTwo = Math.sqrt(2);
const renderBNode = function (node: BNode) {
return (
<SVGNode
style={`transform: ${translate(node, nodeBeingDragged.value === node.id)}${opacity(
node
)}${zIndex(node)}`}
onMouseDown={e => mouseDownNode(e, node)}
onMouseUp={e => mouseUpNode(e, node)}
>
<g style={`transform: ${scale(node)}${rotate(45)}`}>
{receivingNodes.value.includes(node.id) && (
<rect
width={50 * sqrtTwo + 16}
height={50 * sqrtTwo + 16}
style={`translate(${(-50 * sqrtTwo + 16) / 2}, ${
(-50 * sqrtTwo + 16) / 2
})`}
fill="var(--background)"
stroke={receivingNode.value === node.id ? "#0F0" : "#0F03"}
stroke-width="2"
/>
)}
<SquareProgress
size={50 * sqrtTwo + 9}
progress={0.5}
stroke="var(--accent2)"
/>
<rect
width={50 * sqrtTwo}
height={50 * sqrtTwo}
style={`transform: translate(${(-50 * sqrtTwo) / 2}px, ${
(-50 * sqrtTwo) / 2
}px)`}
fill="var(--raised-background)"
stroke="var(--outline)"
stroke-width="4"
/>
</g>
{selected.value === node.id && selectedAction.value === 0 && (
<text y="140" fill="var(--foreground)" class="node-text">
Spawn A Node
</text>
)}
<text fill="var(--foreground)" class="node-text">
B
</text>
</SVGNode>
);
};
const bActions = setupActions({
node: () => nodesById.value[selected.value ?? ""],
shouldShowActions: node => node.type === "bnode",
actions(node) {
return [
p => (
<g
style={`transform: ${translate(p, selectedAction.value === 0)}${scale(
selectedAction.value === 0
)}`}
onClick={() => {
if (selectedAction.value === 0) {
spawnANode(node as BNode);
} else {
selectAction(0);
}
}}
>
<circle fill="white" r="20"></circle>
<text fill="black" class="material-icons" x="-12" y="12">
add
</text>
</g>
)
];
},
distance: 100
});
function spawnANode(parent: ANode | BNode) {
const node: ANode = {
x: parent.x,
y: parent.y,
z: nextId.value,
type: "anode",
links: [parent.id],
id: nextId.value
};
placeInAvailableSpace(node, nodes.value);
nodes.value.push(node);
}
function spawnBNode(parent: ANode | BNode) {
const node: BNode = {
x: parent.x,
y: parent.y,
z: nextId.value,
type: "bnode",
links: [parent.id],
id: nextId.value
};
placeInAvailableSpace(node, nodes.value);
nodes.value.push(node);
}
const points = createResource(10);
const cNode = createUpgrade(() => ({
display: "<h1>C</h1>",
// Purposefully not using noPersist
requirements: createCostRequirement(() => ({ cost: 10, resource: points })),
style: {
x: "100px",
y: "100px",
pointerEvents: "none"
}
}));
makeDraggable(cNode, {
id: "cnode",
endDrag,
startDrag,
hasDragged,
nodeBeingDragged,
dragDelta,
onMouseUp() {
if (!hasDragged.value) {
cNode.purchase();
}
}
});
const dNodesPerAxis = 50;
const dNodes = jsx(() => (
<>
{new Array(dNodesPerAxis * dNodesPerAxis).fill(0).map((_, i) => {
const x = (Math.floor(i / dNodesPerAxis) - dNodesPerAxis / 2) * 100;
const y = ((i % dNodesPerAxis) - dNodesPerAxis / 2) * 100;
return (
<path
fill="var(--bought)"
style={`transform: translate(${x}px, ${y}px) scale(0.05)`}
d="M62.43,122.88h-1.98c0-16.15-6.04-30.27-18.11-42.34C30.27,68.47,16.16,62.43,0,62.43v-1.98 c16.16,0,30.27-6.04,42.34-18.14C54.41,30.21,60.45,16.1,60.45,0h1.98c0,16.15,6.04,30.27,18.11,42.34 c12.07,12.07,26.18,18.11,42.34,18.11v1.98c-16.15,0-30.27,6.04-42.34,18.11C68.47,92.61,62.43,106.72,62.43,122.88L62.43,122.88z"
/>
);
})}
</>
));
const links = jsx(() => (
<>
{nodes.value
.reduce(
(acc, curr) => [
...acc,
...curr.links.map(l => ({ from: curr, to: nodesById.value[l] }))
],
[] as { from: NodeTypes; to: NodeTypes }[]
)
.map(link => (
<line
stroke="white"
stroke-width={4}
x1={
nodeBeingDragged.value === link.from.id
? dragDelta.value.x + link.from.x
: link.from.x
}
y1={
nodeBeingDragged.value === link.from.id
? dragDelta.value.y + link.from.y
: link.from.y
}
x2={
nodeBeingDragged.value === link.to.id
? dragDelta.value.x + link.to.x
: link.to.x
}
y2={
nodeBeingDragged.value === link.to.id
? dragDelta.value.y + link.to.y
: link.to.y
}
/>
))}
</>
));
const nextId = setupUniqueIds(() => nodes.value);
function renderNode(node: NodeTypes | typeof cNode) {
if (node.type === "anode") {
return renderANode(node);
} else if (node.type === "bnode") {
return renderBNode(node);
} else {
return render(node);
}
}
return { return {
name: "Tree", name: "Tree",
color: "var(--accent1)", links: tree.links,
display: jsx(() => ( display: jsx(() => (
<> <>
<Board {player.devSpeed === 0 ? (
onDrag={drag} <div>
onMouseDown={deselect} Game Paused
onMouseUp={endDrag} <Node id="paused" />
onMouseLeave={endDrag} </div>
ref={board} ) : null}
> {player.devSpeed != null && player.devSpeed !== 0 && player.devSpeed !== 1 ? (
<SVGNode> <div>
{dNodes()} Dev Speed: {format(player.devSpeed)}x
{links()} <Node id="devspeed" />
</SVGNode> </div>
{nodes.value.map(renderNode)} ) : null}
{render(cNode)} {player.offlineTime != null && player.offlineTime !== 0 ? (
<SVGNode> <div>
{aActions()} Offline Time: {formatTime(player.offlineTime)}
{bActions()} <Node id="offline" />
</SVGNode> </div>
</Board> ) : null}
<div>
{Decimal.lt(points.value, "1e1000") ? <span>You have </span> : null}
<h2>{format(points.value)}</h2>
{Decimal.lt(points.value, "1e1e6") ? <span> points</span> : null}
</div>
{Decimal.gt(pointGain.value, 0) ? (
<div>
({oomps.value})
<Node id="oomps" />
</div>
) : null}
<Spacer />
{render(tree)}
</> </>
)), )),
boardNodes: nodes, points,
cNode, best,
selected: persistent(selected) total,
oomps,
tree
}; };
}); });
@ -433,7 +97,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
export const getInitialLayers = ( export const getInitialLayers = (
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */ /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
player: Partial<Player> player: Partial<Player>
): Array<GenericLayer> => [main]; ): Array<GenericLayer> => [main, prestige];
/** /**
* A computed ref whose value is true whenever the game is over. * A computed ref whose value is true whenever the game is over.