From 1847525e625f2a8a656bf64c2422981773009776 Mon Sep 17 00:00:00 2001 From: Stefan Zermatten Date: Mon, 4 Sep 2023 14:02:45 +0200 Subject: [PATCH] iteration on tabletop UI --- .../components/attributes/HealthBar.vue | 41 +++------ .../attributes/HealthBarProgress.vue | 69 ++++++++++++++ .../client/ui/tabletop/TabletopComponent.vue | 1 - .../ui/tabletop/TabletopCreatureCard.vue | 87 ++++++++++++++---- .../SelectedCreatureBar.vue | 64 ++++++++++++- app/public/images/ui/missing-portrait.png | Bin 0 -> 16008 bytes 6 files changed, 213 insertions(+), 49 deletions(-) create mode 100644 app/imports/client/ui/properties/components/attributes/HealthBarProgress.vue create mode 100644 app/public/images/ui/missing-portrait.png diff --git a/app/imports/client/ui/properties/components/attributes/HealthBar.vue b/app/imports/client/ui/properties/components/attributes/HealthBar.vue index 8a8732ff..4cffed5c 100644 --- a/app/imports/client/ui/properties/components/attributes/HealthBar.vue +++ b/app/imports/client/ui/properties/components/attributes/HealthBar.vue @@ -19,34 +19,18 @@ -
-
-
- {{ model.value }} / {{ model.total }} -
+ > + {{ model.value }} / {{ model.total }}
-
+ import IncrementMenu from '/imports/client/ui/components/IncrementMenu.vue'; import isDarkColor from '/imports/client/ui/utility/isDarkColor.js'; +import HealthBarProgress from '/imports/client/ui/properties/components/attributes/HealthBarProgress.vue'; import chroma from 'chroma-js'; export default { components: { - IncrementMenu + IncrementMenu, + HealthBarProgress, }, inject: { theme: { diff --git a/app/imports/client/ui/properties/components/attributes/HealthBarProgress.vue b/app/imports/client/ui/properties/components/attributes/HealthBarProgress.vue new file mode 100644 index 00000000..734c0adb --- /dev/null +++ b/app/imports/client/ui/properties/components/attributes/HealthBarProgress.vue @@ -0,0 +1,69 @@ + + + \ No newline at end of file diff --git a/app/imports/client/ui/tabletop/TabletopComponent.vue b/app/imports/client/ui/tabletop/TabletopComponent.vue index 6483901c..3887cd58 100644 --- a/app/imports/client/ui/tabletop/TabletopComponent.vue +++ b/app/imports/client/ui/tabletop/TabletopComponent.vue @@ -80,7 +80,6 @@ bottom:0; right: 0; overflow-x: auto; - overflow-y: hidden; " > diff --git a/app/imports/client/ui/tabletop/TabletopCreatureCard.vue b/app/imports/client/ui/tabletop/TabletopCreatureCard.vue index 76e5c3d7..43c55444 100644 --- a/app/imports/client/ui/tabletop/TabletopCreatureCard.vue +++ b/app/imports/client/ui/tabletop/TabletopCreatureCard.vue @@ -1,6 +1,6 @@