thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Added diamond shaped nodes

Browse source
This commit is contained in:
thepaperpilot 2021-08-20 23:21:13 -05:00
parent 0ced1d7cd7
commit b43f3003b5
5 changed files with 124 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/components/board/BoardNode.vue
View file

@ -7,6 +7,7 @@
@mouseleave="mouseLeave"
@mousedown="e => $emit('startDragging', e, node.id)"
>
<g v-if="shape === Shape.Circle">
<circle
v-if="canAccept"
:r="size + 8"
@ -19,7 +20,7 @@
<circle
v-if="progressDisplay === ProgressDisplay.Fill"
:r="size * progress"
:r="Math.max(size * progress - 2, 0)"
:fill="progressColor"
/>
<circle
@ -29,9 +30,56 @@
fill="transparent"
:stroke-dasharray="(size + 4.5) * 2 * Math.PI"
:stroke-width="5"
:stroke-dashoffset="(size + 4.5) * 2 * Math.PI - progress * (size + 4.5) * 2 * Math.PI"
:stroke-dashoffset="
(size + 4.5) * 2 * Math.PI - progress * (size + 4.5) * 2 * Math.PI
"
:stroke="progressColor"
/>
</g>
<g v-else-if="shape === Shape.Diamond" transform="rotate(45, 0, 0)">
<rect
v-if="canAccept"
:width="size + 16"
:height="size + 16"
:transform="`translate(${-(size + 16) / 2}, ${-(size + 16) / 2})`"
:fill="backgroundColor"
:stroke="receivingNode ? '#0F0' : '#0F03'"
:stroke-width="2"
/>
<rect
:width="size"
:height="size"
:transform="`translate(${-size / 2}, ${-size / 2})`"
:fill="fillColor"
:stroke="outlineColor"
:stroke-width="4"
/>
<rect
v-if="progressDisplay === ProgressDisplay.Fill"
:width="Math.max(size * progress - 2, 0)"
:height="Math.max(size * progress - 2, 0)"
:transform="
`translate(${-Math.max(size * progress - 2, 0) / 2}, ${-Math.max(
size * progress - 2,
0
) / 2})`
"
:fill="progressColor"
/>
<rect
v-else
:width="size + 9"
:height="size + 9"
:transform="`translate(${-(size + 9) / 2}, ${-(size + 9) / 2})`"
fill="transparent"
:stroke-dasharray="(size + 9) * 4"
:stroke-width="5"
:stroke-dashoffset="(size + 9) * 4 - progress * (size + 9) * 4"
:stroke="progressColor"
/>
</g>
<text :fill="titleColor" class="node-title">{{ title }}</text>
</g>
@ -39,7 +87,7 @@
<script lang="ts">
import themes from "@/data/themes";
import { ProgressDisplay } from "@/game/enums";
import { ProgressDisplay, Shape } from "@/game/enums";
import player from "@/game/player";
import { BoardNode, NodeType } from "@/typings/features/board";
import { getNodeTypeProperty } from "@/util/features";
@ -52,6 +100,7 @@ export default defineComponent({
data() {
return {
ProgressDisplay,
Shape,
lastMousePosition: { x: 0, y: 0 },
hovering: false
};
@ -90,6 +139,9 @@ export default defineComponent({
}
: this.node.position;
},
shape(): Shape {
return getNodeTypeProperty(this.nodeType, this.node, "shape");
},
size(): number {
let size: number = getNodeTypeProperty(this.nodeType, this.node, "size");
if (this.receivingNode) {

39
src/data/layers/main.ts
View file

@ -1,6 +1,8 @@
import { ProgressDisplay, Shape } from "@/game/enums";
import player from "@/game/player";
import Decimal, { DecimalSource } from "@/lib/break_eternity";
import { RawLayer } from "@/typings/layer";
import { camelToTitle } from "@/util/common";
import themes from "../themes";
type ResourceNodeData = {
@ -14,6 +16,10 @@ type ItemNodeData = {
amount: DecimalSource;
};
type ActionNodeData = {
actionType: string;
};
export default {
id: "main",
display: `
@ -21,7 +27,15 @@ export default {
<div v-else-if="player.devSpeed && player.devSpeed !== 1">Dev Speed: {{ format(player.devSpeed) }}x</div>
<div>TODO: Board</div>
<Board id="main" />
`,
startData() {
return {
openNode: null
} as {
openNode: string | null;
};
},
minimizable: false,
componentStyles: {
board: {
@ -52,6 +66,13 @@ export default {
itemType: "speed",
amount: new Decimal(5 * 60 * 60)
}
},
{
position: { x: -150, y: 150 },
type: "action",
data: {
actionType: "browse"
}
}
];
},
@ -92,6 +113,24 @@ export default {
return (node.data as ItemNodeData).itemType;
},
draggable: true
},
action: {
title(node) {
return camelToTitle((node.data as ActionNodeData).actionType);
},
tooltip(node) {
switch ((node.data as ActionNodeData).actionType) {
default:
return camelToTitle((node.data as ActionNodeData).actionType);
case "browse":
return "Browse the internet";
}
},
draggable: false,
shape: Shape.Diamond,
size: 100,
progressColor: "#0FF3",
progressDisplay: ProgressDisplay.Outline
}
}
}

5
src/game/enums.ts
View file

@ -33,3 +33,8 @@ export enum ProgressDisplay {
Outline = "Outline",
Fill = "Fill"
}
export enum Shape {
Circle = "Circle",
Diamond = "Triangle"
}

3
src/game/layers.ts
View file

@ -34,7 +34,7 @@ import { createGridProxy, createLayerProxy } from "@/util/proxies";
import { applyPlayerData } from "@/util/save";
import clone from "lodash.clonedeep";
import { isRef } from "vue";
import { ProgressDisplay } from "./enums";
import { ProgressDisplay, Shape } from "./enums";
import { default as playerProxy } from "./player";
export const layers: Record<string, Readonly<Layer>> = {};
@ -438,6 +438,7 @@ export function addLayer(layer: RawLayer, player?: Partial<PlayerData>): void {
layer.boards.data[id].types[nodeType].type = nodeType;
setDefault(layer.boards.data[id].types[nodeType], "size", 50);
setDefault(layer.boards.data[id].types[nodeType], "draggable", false);
setDefault(layer.boards.data[id].types[nodeType], "shape", Shape.Circle);
setDefault(layer.boards.data[id].types[nodeType], "canAccept", false);
setDefault(
layer.boards.data[id].types[nodeType],

2
src/typings/features/board.d.ts vendored
View file

@ -1,3 +1,4 @@
import { Shape } from "@/game/enums";
import { DecimalSource } from "@/lib/break_eternity";
import { State } from "../state";
import { Feature, RawFeature } from "./feature";
@ -35,6 +36,7 @@ export interface NodeType extends Feature {
title: string | ((node: BoardNode) => string);
size: number | ((node: BoardNode) => number);
draggable: boolean | ((node: BoardNode) => boolean);
shape: Shape | ((node: BoardNode) => Shape);
canAccept: boolean | ((node: BoardNode, otherNode: BoardNode) => boolean);
progress?: number | ((node: BoardNode) => number);
progressDisplay: ProgressDisplay | ((node: BoardNode) => ProgressDisplay);