From e357b291455af2dd99f2987ecb264ada5ab54ff4 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Wed, 30 Jan 2019 16:38:47 +0200
Subject: [PATCH] Added labels to healthBars and improved attribute dialog
 opening

---
 .../api/creature/creatureComputation.js       |   1 +
 app/imports/ui/character/StatsTab.vue         |  26 +++-
 app/imports/ui/components/AttributeDialog.vue |  24 ++-
 app/imports/ui/components/HealthBar.Story.vue |  23 ++-
 app/imports/ui/components/HealthBar.vue       | 140 +++++++++++-------
 app/imports/ui/components/HealthBarCard.vue   |  20 +--
 .../ui/components/HealthBarCardContainer.vue  |   8 +
 app/imports/ui/components/HitDiceListTile.vue |   2 +-
 8 files changed, 165 insertions(+), 79 deletions(-)

diff --git a/app/imports/api/creature/creatureComputation.js b/app/imports/api/creature/creatureComputation.js
index b93b4eed..5d24400f 100644
--- a/app/imports/api/creature/creatureComputation.js
+++ b/app/imports/api/creature/creatureComputation.js
@@ -92,6 +92,7 @@ function writeCreature(char) {
   writeAttributes(char);
   writeSkills(char);
   writeDamageMultipliers(char);
+  // TODO write effect results to effect.result
   Creatures.update(char.id, {$set: {level: char.level}});
 };
 
diff --git a/app/imports/ui/character/StatsTab.vue b/app/imports/ui/character/StatsTab.vue
index dbbad957..0f014a6d 100644
--- a/app/imports/ui/character/StatsTab.vue
+++ b/app/imports/ui/character/StatsTab.vue
@@ -16,24 +16,26 @@
 								v-bind="ability"
 								:key="ability._id"
 								:id="`${_uid}-${ability._id}`"
-								@click="clickAbility({elementId: `${_uid}-${ability._id}`, abilityId: ability._id})"
+								@click="clickAttribute({elementId: `${_uid}-${ability._id}`, _id: ability._id})"
 							/>
 						</template>
 					</v-list>
 				</v-card>
 			</div>
 
-			<div v-for="stat in stats" class="stat">
+			<div v-for="stat in stats" class="stat" :key="stat._id">
 				<attribute-card
-					:name="stat.name"
-					:value="stat.value"
+					v-bind="stat"
+					:id="`${_uid}-${stat._id}`"
+					@click="clickAttribute({elementId: `${_uid}-${stat._id}`, _id: stat._id})"
 				/>
 			</div>
 
 			<div v-for="modifier in modifiers" class="modifier">
 				<attribute-card modifier
-					:name="modifier.name"
-					:value="modifier.value"
+					v-bind="modifier"
+					:id="`${_uid}-${modifier._id}`"
+					@click="clickAttribute({elementId: `${_uid}-${modifier._id}`, _id: modifier._id})"
 				/>
 			</div>
 
@@ -45,6 +47,9 @@
 							<v-divider v-if="index !== 0"/>
 							<hit-dice-list-tile
 								v-bind="hitDie"
+								:key="hitDie._id"
+								:id="`${_uid}-${hitDie._id}`"
+								@click="clickAttribute({elementId: `${_uid}-${hitDie._id}`, _id: hitDie._id})"
 							/>
 						</template>
 					</v-list>
@@ -59,6 +64,8 @@
 							v-for="save in savingThrows"
 							v-bind="save"
 							:key="save._id"
+							:id="`${_uid}-${save._id}`"
+							@click="clickSkill({elementId: `${_uid}-${save._id}`, _id: save._id})"
 						/>
 					</v-list>
 				</v-card>
@@ -72,6 +79,8 @@
 							v-for="skill in skills"
 							v-bind="skill"
 							:key="skill._id"
+							:id="`${_uid}-${skill._id}`"
+							@click="clickSkill({elementId: `${_uid}-${skill._id}`, _id: skill._id})"
 						/>
 					</v-list>
 				</v-card>
@@ -134,6 +143,7 @@
 					});
 					let conMod = con && con.mod;
 					return {
+						_id: hd._id,
 						dice,
 						conMod,
 						key: hd._id,
@@ -160,11 +170,11 @@
 			},
 		},
 		methods: {
-			clickAbility({elementId, abilityId}){
+			clickAttribute({elementId, _id}){
 				this.$store.commit("pushDialogStack", {
 					component: "attribute-dialog-container",
 					elementId,
-					data: {_id: abilityId},
+					data: {_id},
 				});
 			},
 		},
diff --git a/app/imports/ui/components/AttributeDialog.vue b/app/imports/ui/components/AttributeDialog.vue
index cfa1ca3f..2f8c01ce 100644
--- a/app/imports/ui/components/AttributeDialog.vue
+++ b/app/imports/ui/components/AttributeDialog.vue
@@ -3,14 +3,23 @@
     <div slot="toolbar">
       {{name}}
     </div>
-    <v-layout align-center column>
-			<div class="display-3 mod" v-if="typeof mod === 'number'">
+    <v-layout align-center column v-if="type === 'ability'">
+			<div class="display-3 mod">
 				{{numberToSignedString(mod)}}
 			</div>
-			<div class="display-1 value">
+			<div class="display-1 ability-value">
 				{{value}}
 			</div>
 		</v-layout>
+		<div class="display-3 attribute-value" v-else-if="type === 'healthBar'">
+			{{value+adjustment}} / {{value}}
+		</div>
+		<div class="display-3 attribute-value" v-else-if="type === 'modifier'">
+			{{numberToSignedString(value)}}
+		</div>
+		<div class="display-3 attribute-value" v-else>
+			{{value}}
+		</div>
 		<div v-if="effects && effects.length">
 			<h6 class="title">Effects</h6>
 			<attribute-effect-list :effects="effects" @click="clickedEffect"/>
@@ -27,8 +36,10 @@
 	export default {
 		props: {
 			name: String,
+			type: String,
 			value: Number,
 			mod: Number,
+			adjustment: Number,
 			effects: Array,
 		},
 		methods: {
@@ -45,13 +56,16 @@
 </script>
 
 <style lang="css" scoped>
-	.value {
+	.ability-value {
 		font-weight: 600;
 		font-size: 24px !important;
 		color: rgba(0, 0, 0, 0.54);
 	}
-	.mod, .value {
+	.mod, .ability-value {
 		text-align: center;
 		width: 100%;
 	}
+	.attribute-value {
+		text-align: center;
+	}
 </style>
diff --git a/app/imports/ui/components/HealthBar.Story.vue b/app/imports/ui/components/HealthBar.Story.vue
index 693deb5f..00a15d12 100644
--- a/app/imports/ui/components/HealthBar.Story.vue
+++ b/app/imports/ui/components/HealthBar.Story.vue
@@ -1,9 +1,28 @@
 <template lang="html">
-	<health-bar
+	<div class="pa-1">
+		<health-bar
 		:value="value"
 		:max-value="maxValue"
+		name="Hit Points"
 		@change="healthBarChanged"
-	/>
+		/>
+		<health-bar
+		:value="50"
+		:max-value="100"
+		name="Temporary Hit Points"
+		/>
+		<health-bar
+		:value="70"
+		:max-value="100"
+		name="Some other bar"
+		@change="healthBarChanged"
+		/>
+		<health-bar
+		:value="90"
+		:max-value="100"
+		name="Cow"
+		/>
+	</div>
 </template>
 
 <script>
diff --git a/app/imports/ui/components/HealthBar.vue b/app/imports/ui/components/HealthBar.vue
index c936654c..d09f9e92 100644
--- a/app/imports/ui/components/HealthBar.vue
+++ b/app/imports/ui/components/HealthBar.vue
@@ -1,60 +1,64 @@
 <template>
-	<div style="height: 48px;">
-		<v-layout column align-center @click="edit" style="height: 100%; cursor: pointer;">
-			<v-progress-linear :value="(value / maxValue) * 100" height="20" color="green lighten-1">
-			</v-progress-linear>
-			<span class="value"
-				style="margin-top: -35px; z-index: 1; font-size: 16px; font-weight: 600;"
-			>
-				{{value}} / {{maxValue}}
-			</span>
-		</v-layout>
+	<v-layout row wrap align-center justify-center style="min-height: 48px;" :class="{hover}" class="my-3 white" :id="`${_uid}-${_id}`">
+		<div class="subheading text-truncate pa-2 name" @mouseover="hover = true" @mouseleave="hover = false" @click="$emit('click', {elementId: `${_uid}-${_id}`})">
+			{{name}}
+		</div>
+		<v-flex style="height: 20px; flex-basis: 300px; flex-grow: 100;">
+			<v-layout column align-center @click="edit" style="cursor: pointer;" class="bar">
+				<v-progress-linear :value="(value / maxValue) * 100" height="20" color="green lighten-1" class="ma-0">
+				</v-progress-linear>
+				<span class="value"
+					style="margin-top: -20px; z-index: 1; font-size: 16px; font-weight: 600; height: 20px;"
+				>
+					{{value}} / {{maxValue}}
+				</span>
+			</v-layout>
+			<transition name="transition">
+				<v-toolbar
+					v-if="editing"
+					justify-center
+					height="48"
+					flat
+					class="transparent toolbar"
+				>
+					<v-spacer/>
+					<v-btn-toggle
+						v-model="operation"
+						@click="$refs.editInput.focus()"
+						class="mr-2"
+					>
+						<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>add</v-icon></v-btn>
+						<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>remove</v-icon></v-btn>
+					</v-btn-toggle>
+					<v-text-field solo hide-details
+						type="number"
+						v-if="editing"
+						ref="editInput"
+						style="max-width: 120px;"
+						min="0"
+						:value="editValue"
+						:prefix="operation === 0 ? '+' : operation === 1 ? '-' : null"
+						@focus="$event.target.select()"
+						@keyup.enter="commitEdit"
+						@keypress.43="operation === 0 ? operation = null : operation = 0"
+						@keypress.45="operation === 1 ? operation = null : operation = 1"
+						@keypress="rejectNonNumbers($event)"
+						>
+					</v-text-field>
+					<v-btn small fab @click="commitEdit" class="white">
+						<v-icon>done</v-icon>
+					</v-btn>
+					<v-btn small fab @click="cancelEdit" class="mx-0 white">
+						<v-icon>close</v-icon>
+					</v-btn>
+					<v-spacer/>
+				</v-toolbar>
+			</transition>
+		</v-flex>
 		<transition name="background-transition">
 			<div v-if="editing" class="page-tint" @click="cancelEdit" />
 		</transition>
-		<transition name="transition">
-			<v-toolbar
-				v-if="editing"
-				justify-center
-				height="48"
-				flat
-				class="transparent"
-				style="margin-top: -46px; z-index: 4;"
-			>
-				<v-spacer/>
-				<v-btn-toggle
-					v-model="operation"
-					@click="$refs.editInput.focus()"
-					class="mr-2"
-				>
-					<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>add</v-icon></v-btn>
-					<v-btn @click="$refs.editInput.focus()" class="white"><v-icon>remove</v-icon></v-btn>
-				</v-btn-toggle>
-				<v-text-field solo hide-details
-					type="number"
-					v-if="editing"
-					ref="editInput"
-					style="max-width: 120px;"
-					min="0"
-					:value="editValue"
-					:prefix="operation === 0 ? '+' : operation === 1 ? '-' : null"
-					@focus="$event.target.select()"
-					@keyup.enter="commitEdit"
-					@keypress.43="operation === 0 ? operation = null : operation = 0"
-					@keypress.45="operation === 1 ? operation = null : operation = 1"
-					@keypress="rejectNonNumbers($event)"
-				>
-				</v-text-field>
-				<v-btn small fab @click="commitEdit" class="white">
-					<v-icon>done</v-icon>
-				</v-btn>
-				<v-btn small fab @click="cancelEdit" class="ml-0 white">
-					<v-icon>close</v-icon>
-				</v-btn>
-				<v-spacer/>
-			</v-toolbar>
-		</transition>
-	</div>
+	</v-layout>
 </template>
 
 <script>
@@ -63,10 +67,13 @@
 			editing: false,
 			editValue: 0,
 			operation: null,
+			hover: false,
 		}},
 		props: {
 			value: Number,
 			maxValue: Number,
+			name: String,
+			_id: String,
 		},
 		methods: {
 			edit(){
@@ -103,6 +110,33 @@
 </script>
 
 <style scoped>
+	.name {
+		text-align: center;
+		cursor: pointer;
+		min-width: 150px;
+		flex-basis: 150px;
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+	.name:hover {
+		font-weight: 500;
+	}
+	.bar {
+		transition: box-shadow 0.2s;
+	}
+	.bar:hover {
+		box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important
+	}
+	.toolbar {
+		margin-left: -50%;
+		margin-right: -50%;
+    width: 200%;
+		margin-top: -34px !important;
+		z-index: 4;
+	}
+	.hover {
+		background: rgba(0,0,0,.04);
+	}
 	.background-transition-enter-active, .background-transition-leave-active{
 		 transition: all .2s;
 	 }
diff --git a/app/imports/ui/components/HealthBarCard.vue b/app/imports/ui/components/HealthBarCard.vue
index 26b297c9..52336152 100644
--- a/app/imports/ui/components/HealthBarCard.vue
+++ b/app/imports/ui/components/HealthBarCard.vue
@@ -1,14 +1,14 @@
 <template lang="html">
-	<v-card>
-		<v-card-text>
-			<health-bar
-				v-for="attribute in attributes"
-				:key="attribute._id"
-				:value="attribute.value + (attribute.adjustment || 0)"
-				:maxValue="attribute.value"
-				@change="e => $emit('change', {_id: attribute._id, change: e})"
-			/>
-		</v-card-text>
+	<v-card class="pa-2">
+		<health-bar
+			v-for="attribute in attributes"
+			:key="attribute._id"
+			:value="attribute.value + (attribute.adjustment || 0)"
+			:maxValue="attribute.value"
+			:name="attribute.name"
+			@change="e => $emit('change', {_id: attribute._id, change: e})"
+			@click="e => $emit('click', {_id: attribute._id, elementId: e.elementId})"
+		/>
 	</v-card>
 </template>
 
diff --git a/app/imports/ui/components/HealthBarCardContainer.vue b/app/imports/ui/components/HealthBarCardContainer.vue
index a6425ba1..4ab184cf 100644
--- a/app/imports/ui/components/HealthBarCardContainer.vue
+++ b/app/imports/ui/components/HealthBarCardContainer.vue
@@ -2,6 +2,7 @@
   <health-bar-card
 		:attributes="attributes"
 		@change="healthBarChanged"
+		@click="healthBarClicked"
 	/>
 </template>
 
@@ -29,6 +30,13 @@
 			},
 		},
 		methods: {
+			healthBarClicked({_id, elementId}){
+				this.$store.commit("pushDialogStack", {
+					component: "attribute-dialog-container",
+					elementId,
+					data: {_id},
+				});
+			},
 			healthBarChanged({_id, change}){
 				adjustAttribute.call({
 					_id,
diff --git a/app/imports/ui/components/HitDiceListTile.vue b/app/imports/ui/components/HitDiceListTile.vue
index ce1134fb..70d8f726 100644
--- a/app/imports/ui/components/HitDiceListTile.vue
+++ b/app/imports/ui/components/HitDiceListTile.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-	<v-list-tile class="hit-dice-list-tile" :class="{hover}">
+	<v-list-tile class="hit-dice-list-tile white" :class="{hover}">
 
 		<v-list-tile-action class="mr-4">