chromatic-lattice/src/components/features/Upgrade.vue
2022-01-13 22:25:47 -06:00

72 lines
2.4 KiB
Vue

<template>
<button
v-if="visibility !== Visibility.None"
v-show="visibility === Visibility.Visible"
:style="style"
@click="purchase"
:class="{
feature: true,
upgrade: true,
can: canPurchase && !bought,
locked: !canPurchase && !bought,
bought,
...classes
}"
:disabled="!canPurchase && !bought"
>
<component v-if="component" :is="component" />
<MarkNode :mark="mark" />
<LinkNode :id="id" />
</button>
</template>
<script setup lang="tsx">
import { FeatureComponent, Visibility } from "@/features/feature";
import { displayResource } from "@/features/resource";
import { GenericUpgrade } from "@/features/upgrade";
import { coerceComponent, isCoercableComponent } from "@/util/vue";
import { computed, toRefs, unref } from "vue";
import LinkNode from "../system/LinkNode.vue";
import MarkNode from "./MarkNode.vue";
const props = toRefs(defineProps<FeatureComponent<GenericUpgrade>>());
const component = computed(() => {
const display = unref(props.display);
if (display == null) {
return null;
}
if (isCoercableComponent(display)) {
return coerceComponent(display);
}
return (
<span>
<div v-if={display.title}>
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
<component v-is={coerceComponent(display.title!, "h2")} />
</div>
<component v-is={coerceComponent(display.description, "div")} />
<div v-if={display.effectDisplay}>
<br />
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
Currently: <component v-is={coerceComponent(display.effectDisplay!)} />
</div>
<template v-if={unref(props.resource) != null && unref(props.cost) != null}>
<br />
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
Cost: {displayResource(unref(props.resource)!, unref(props.cost))}{" "}
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
{unref(props.resource)!.displayName}
</template>
</span>
);
});
</script>
<style scoped>
.upgrade {
min-height: 120px;
width: 120px;
font-size: 10px;
}
</style>