From 152337e211b4687a0fa09c2f687f30e773ee0971 Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Thu, 23 Jul 2020 20:19:28 -0400 Subject: [PATCH] Improve statblock layout; adjust boss stats --- src/components/Statblock.vue | 40 ++++++++++++++++++++++------------- src/game/creatures/kenzie.ts | 4 ++-- src/game/creatures/withers.ts | 16 +++++++++++--- 3 files changed, 40 insertions(+), 20 deletions(-) diff --git a/src/components/Statblock.vue b/src/components/Statblock.vue index 5ea2315..a454f1b 100644 --- a/src/components/Statblock.vue +++ b/src/components/Statblock.vue @@ -27,7 +27,7 @@
-
{{subject.stats[stat].toFixed(0)}}
+
{{subject.stats[stat].toFixed(0)}}
{{ stat }}
{{ statDescs[stat] }}
@@ -37,7 +37,7 @@
-
{{subject.voreStats[stat].toFixed(0)}}
+
{{subject.voreStats[stat].toFixed(0)}}
{{ stat }}
{{ voreStatDescs[stat] }}
@@ -47,7 +47,7 @@
Status: {{subject.status}}
- +
@@ -142,28 +142,36 @@ a { .stat-line { width: 100%; display: flex; - justify-content: space-around; + justify-content: space-evenly; flex-wrap: wrap; } .stat-entry { position: relative; font-size: 10pt; - padding-top: 4pt; - padding-bottom: 4pt; + padding-top: 2pt; + padding-bottom: 2pt; display: flex; flex-direction: column; justify-content: space-evenly; user-select: none; } +.stat-value { + padding-top: 4pt; + padding-bottom: 4pt; +} + .healthbar { + display: flex; + align-items: center; + justify-content: space-between; --color: green; --fullness: 100%; position: relative; width: 90%; margin: 0% 5% 0%; - height: 10pt; + height: 14pt; border-radius: 2pt; border-width: 2pt; border-color: gray; @@ -172,21 +180,19 @@ a { } .stat-entry .healthbar i { - position: relative; - font-size: 8pt; - transform: translate(0%, 15%); - float: left; + flex: 0 1; + flex-basis: 14pt; + font-size: 14pt; } .healthbar .healthbar-value { - position: relative; - margin-right: 40%; + flex: 1 0; + font-size: 12pt; color: #bbb; - float: right; } .stat-entry i { - transform: translate(0, -40%) scale(1.6); + font-size: 150%; } .stat-entry.low { color: yellow; @@ -214,6 +220,10 @@ a { .statblock[data-active] .vore-stats { display: flex; } + +.statblock[data-active] .if-not-selected { + display: none; +}