thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-22 08:31:31 +00:00
Code Issues Releases Activity Actions

Improved how MainDisplay displayed effect strings

Browse source
This commit is contained in:
thepaperpilot 2022-07-07 10:40:33 -05:00
parent 7345471e8a
commit 78ac7957dd
1 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/features/resources/MainDisplay.vue
View file

@ -1,11 +1,18 @@
<template> <template>
<Sticky> <Sticky>
<div class="main-display"> <div
<span v-if="showPrefix">You have </span> class="main-display-container"
<ResourceVue :resource="resource" :color="color || 'white'" /> :style="{ height: `${(effectRef?.$el.clientHeight ?? 0) + 50}px` }"
{{ resource.displayName >
}}<!-- remove whitespace --> <div class="main-display">
<span v-if="effectComponent">, <component :is="effectComponent" /></span> <span v-if="showPrefix">You have </span>
<ResourceVue :resource="resource" :color="color || 'white'" />
{{ resource.displayName
}}<!-- remove whitespace -->
<span v-if="effectComponent"
>, <component :is="effectComponent" ref="effectRef"
/></span>
</div>
</div> </div>
</Sticky> </Sticky>
</template> </template>
@ -17,7 +24,7 @@ import type { Resource } from "features/resources/resource";
import ResourceVue from "features/resources/Resource.vue"; import ResourceVue from "features/resources/Resource.vue";
import Decimal from "util/bignum"; import Decimal from "util/bignum";
import { computeOptionalComponent } from "util/vue"; import { computeOptionalComponent } from "util/vue";
import type { Ref, StyleValue } from "vue"; import { ComponentPublicInstance, ref, Ref, StyleValue } from "vue";
import { computed, toRefs } from "vue"; import { computed, toRefs } from "vue";
const _props = defineProps<{ const _props = defineProps<{
@ -29,6 +36,8 @@ const _props = defineProps<{
}>(); }>();
const props = toRefs(_props); const props = toRefs(_props);
const effectRef = ref<ComponentPublicInstance | null>(null);
const effectComponent = computeOptionalComponent( const effectComponent = computeOptionalComponent(
props.effectDisplay as Ref<CoercableComponent | undefined> props.effectDisplay as Ref<CoercableComponent | undefined>
); );
@ -39,9 +48,9 @@ const showPrefix = computed(() => {
</script> </script>
<style> <style>
.main-display { .main-display-container {
height: 50px; vertical-align: middle;
line-height: 50px;
margin-bottom: 20px; margin-bottom: 20px;
display: flex;
} }
</style> </style>