Add otherSubtitle

This commit is contained in:
thepaperpilot 2023-05-14 12:29:52 -05:00
parent 8595905204
commit 586e124adc
3 changed files with 22 additions and 9 deletions

View file

@ -54,7 +54,6 @@ import {
import { GenericPlane, createPlane } from "./planes"; import { GenericPlane, createPlane } from "./planes";
import { main } from "./projEntry"; import { main } from "./projEntry";
import { exponentialFormat } from "util/bignum"; import { exponentialFormat } from "util/bignum";
import { ModalData } from "./help";
export const mine = { export const mine = {
shape: Shape.Diamond, shape: Shape.Diamond,
@ -265,12 +264,10 @@ const romanNumerals = [
export const resource = { export const resource = {
shape: Shape.Circle, shape: Shape.Circle,
size: 50, size: 50,
title: node => title: node => camelToTitle((node.state as unknown as ResourceState).type),
camelToTitle((node.state as unknown as ResourceState).type) +
" (" +
romanNumerals[resourceNames.indexOf((node.state as unknown as ResourceState).type)] +
")",
subtitle: node => formatWhole((node.state as unknown as ResourceState).amount), subtitle: node => formatWhole((node.state as unknown as ResourceState).amount),
otherSubtitle: node =>
romanNumerals[resourceNames.indexOf((node.state as unknown as ResourceState).type)],
progress: node => getResourceLevelProgress((node.state as unknown as ResourceState).type), progress: node => getResourceLevelProgress((node.state as unknown as ResourceState).type),
// Make clicking resources a no-op so they can't be selected // Make clicking resources a no-op so they can't be selected
// eslint-disable-next-line @typescript-eslint/no-empty-function // eslint-disable-next-line @typescript-eslint/no-empty-function
@ -665,7 +662,7 @@ export const influence = {
: Shape.Circle, : Shape.Circle,
size: 50, size: 50,
title: node => influences[(node.state as unknown as InfluenceState).type].display, title: node => influences[(node.state as unknown as InfluenceState).type].display,
subtitle: node => { otherSubtitle: node => {
const cost = influences[(node.state as unknown as InfluenceState).type].cost; const cost = influences[(node.state as unknown as InfluenceState).type].cost;
if (Decimal.lt(cost, 1e3)) { if (Decimal.lt(cost, 1e3)) {
return `${formatWhole(cost)}x cost`; return `${formatWhole(cost)}x cost`;

View file

@ -111,10 +111,19 @@
/> />
</g> </g>
<text :fill="titleColor" class="node-title" :y="subtitle ? 10 : 0">{{ title }}</text> <text :fill="titleColor" class="node-title" :y="otherSubtitle && !subtitle ? -10 : 0">{{
<text v-if="subtitle" :fill="titleColor" class="node-subtitle" y="-15">{{ title
}}</text>
<text v-if="subtitle" :fill="titleColor" class="node-subtitle" y="-25">{{
subtitle subtitle
}}</text> }}</text>
<text
v-if="otherSubtitle"
:fill="titleColor"
class="node-subtitle"
:y="subtitle ? 25 : 15"
>{{ otherSubtitle }}</text
>
</g> </g>
<transition name="fade" appear> <transition name="fade" appear>
@ -212,6 +221,9 @@ const position = computed(() => {
const shape = computed(() => getNodeProperty(props.nodeType.value.shape, unref(props.node))); const shape = computed(() => getNodeProperty(props.nodeType.value.shape, unref(props.node)));
const title = computed(() => getNodeProperty(props.nodeType.value.title, unref(props.node))); const title = computed(() => getNodeProperty(props.nodeType.value.title, unref(props.node)));
const subtitle = computed(() => getNodeProperty(props.nodeType.value.subtitle, unref(props.node))); const subtitle = computed(() => getNodeProperty(props.nodeType.value.subtitle, unref(props.node)));
const otherSubtitle = computed(() =>
getNodeProperty(props.nodeType.value.otherSubtitle, unref(props.node))
);
const label = computed( const label = computed(
() => () =>
(props.isSelected.value (props.isSelected.value

View file

@ -92,6 +92,8 @@ export interface NodeTypeOptions {
title: NodeComputable<string>; title: NodeComputable<string>;
/** The subtitle to display for the node. */ /** The subtitle to display for the node. */
subtitle?: NodeComputable<string>; subtitle?: NodeComputable<string>;
/** The other subtitle to display for the node. */
otherSubtitle?: NodeComputable<string>;
/** An optional label for the node. */ /** An optional label for the node. */
label?: NodeComputable<NodeLabel | null>; label?: NodeComputable<NodeLabel | null>;
/** The size of the node - diameter for circles, width and height for squares. */ /** The size of the node - diameter for circles, width and height for squares. */
@ -144,6 +146,7 @@ export type NodeType<T extends NodeTypeOptions> = Replace<
{ {
title: GetComputableType<T["title"]>; title: GetComputableType<T["title"]>;
subtitle: GetComputableType<T["subtitle"]>; subtitle: GetComputableType<T["subtitle"]>;
otherSubtitle: GetComputableType<T["otherSubtitle"]>;
label: GetComputableType<T["label"]>; label: GetComputableType<T["label"]>;
size: GetComputableTypeWithDefault<T["size"], 50>; size: GetComputableTypeWithDefault<T["size"], 50>;
style: GetComputableType<T["style"]>; style: GetComputableType<T["style"]>;
@ -424,6 +427,7 @@ export function createBoard<T extends BoardOptions>(
processComputable(nodeType as NodeTypeOptions, "title"); processComputable(nodeType as NodeTypeOptions, "title");
processComputable(nodeType as NodeTypeOptions, "subtitle"); processComputable(nodeType as NodeTypeOptions, "subtitle");
processComputable(nodeType as NodeTypeOptions, "otherSubtitle");
processComputable(nodeType as NodeTypeOptions, "label"); processComputable(nodeType as NodeTypeOptions, "label");
processComputable(nodeType as NodeTypeOptions, "size"); processComputable(nodeType as NodeTypeOptions, "size");
setDefault(nodeType, "size", 50); setDefault(nodeType, "size", 50);