thepaperpilot
0afcd1cd3d
Oh man did this end up requiring a *ton* of other work as well. There's still a few typing issues I still can't quite work out, and others I'd like to improve when I have time. In fact, this version doesn't even really work, it has a stack overflow error caused by a tooltip for some reason have a tree inside it, which in turn has another tooltip, etc. There's also 17 errors that I *really* feel like shouldn't be there, but they are, and 113 warnings - mostly using ! to assert that things are non-null. Lots of work left to do, to sum up. The reason I'm committing this now is because I really need to get to work on my game jam, and since it won't use a tree or really many of TMT-X's features, I can get away with using a broken engine :)
53 lines
1.6 KiB
Vue
53 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<span v-if="showPrefix">You have </span>
|
|
<resource :amount="amount" :color="color" />
|
|
{{ resource
|
|
}}<!-- remove whitespace -->
|
|
<span v-if="effectDisplay">, <component :is="effectDisplay"/></span>
|
|
<br /><br />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { layers } from "@/game/layers";
|
|
import player from "@/game/player";
|
|
import { format, formatWhole } from "@/util/bignum";
|
|
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
|
|
import { Component, defineComponent } from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "main-display",
|
|
mixins: [InjectLayerMixin],
|
|
props: {
|
|
precision: Number
|
|
},
|
|
computed: {
|
|
style(): Partial<CSSStyleDeclaration> | undefined {
|
|
return layers[this.layer].componentStyles?.["main-display"];
|
|
},
|
|
resource(): string {
|
|
return layers[this.layer].resource;
|
|
},
|
|
effectDisplay(): Component | string | undefined {
|
|
return (
|
|
layers[this.layer].effectDisplay &&
|
|
coerceComponent(layers[this.layer].effectDisplay!)
|
|
);
|
|
},
|
|
showPrefix(): boolean {
|
|
return player.layers[this.layer].points.lt("1e1000");
|
|
},
|
|
color(): string {
|
|
return layers[this.layer].color;
|
|
},
|
|
amount(): string {
|
|
return this.precision == undefined
|
|
? formatWhole(player.layers[this.layer].points)
|
|
: format(player.layers[this.layer].points, this.precision);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|