From 6e51df363bc039654fb590623606032e162f605d Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 27 Aug 2021 13:21:08 +0200
Subject: [PATCH] Added increment buttons to all attributes with a value

---
 app/imports/ui/components/IncrementMenu.vue   | 13 ++---
 .../ui/properties/viewers/AttributeViewer.vue | 51 ++++++++++++++-----
 .../ui/properties/viewers/ItemViewer.vue      |  2 +-
 3 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/app/imports/ui/components/IncrementMenu.vue b/app/imports/ui/components/IncrementMenu.vue
index b8f0ccb3..6a2b954c 100644
--- a/app/imports/ui/components/IncrementMenu.vue
+++ b/app/imports/ui/components/IncrementMenu.vue
@@ -79,17 +79,18 @@
 		},
 		data() {
 			return {
-				editValue: 0,
+				editValue: this.value,
 				operation: 'set',
 				hover: false,
 			};
 		},
     watch: {
-      open(newValue){
-        if (newValue){
-          this.resetData();
-        }
-      }
+      open: {
+        immediate: true,
+        handler(isOpen) {
+          if (isOpen) this.resetData();
+        },
+      },
     },
 		methods: {
       resetData(){
diff --git a/app/imports/ui/properties/viewers/AttributeViewer.vue b/app/imports/ui/properties/viewers/AttributeViewer.vue
index c0d35062..7119d389 100644
--- a/app/imports/ui/properties/viewers/AttributeViewer.vue
+++ b/app/imports/ui/properties/viewers/AttributeViewer.vue
@@ -4,19 +4,32 @@
       column
       align-center
     >
-      <div
-        v-if="model.value !== undefined"
-        class="text-h4"
-      >
+      <v-layout v-if="model.value !== undefined">
         <div
-          v-if="model.damage !== undefined"
+          class="text-h4 mr-3"
         >
-          {{ model.value - model.damage }} / {{ model.value }}
+          <div
+            v-if="model.damage !== undefined"
+          >
+            {{ model.value - model.damage }} / {{ model.value }}
+          </div>
+          <div v-else>
+            {{ model.value }}
+          </div>
         </div>
-        <div v-else>
-          {{ model.value }}
-        </div>
-      </div>
+
+        <increment-button
+          v-if="context.creatureId"
+          icon
+          large
+          outlined
+          color="primary"
+          :value="model.value - (model.damage || 0)"
+          @change="damageProperty"
+        >
+          <v-icon>$vuetify.icons.abacus</v-icon>
+        </increment-button>
+      </v-layout>
       <div
         v-if="model.modifier !== undefined"
         class="text-h6"
@@ -68,15 +81,18 @@
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 	import AttributeEffect from '/imports/ui/properties/components/attributes/AttributeEffect.vue';
   import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
+  import damageProperty from '/imports/api/creature/creatureProperties/methods/damageProperty.js';
+  import IncrementButton from '/imports/ui/components/IncrementButton.vue';
 
 	export default {
+		components: {
+			AttributeEffect,
+      IncrementButton,
+		},
+		mixins: [propertyViewerMixin],
     inject: {
       context: { default: {} }
     },
-		components: {
-			AttributeEffect,
-		},
-		mixins: [propertyViewerMixin],
 		computed: {
 			reset(){
 				let reset = this.model.reset
@@ -96,6 +112,13 @@
           elementId: `${id}`,
           data: {_id: id},
         });
+      },
+      damageProperty({type, value}) {
+        damageProperty.call({
+          _id: this.model._id,
+          operation: type,
+          value: value
+        });
       },
 		},
     meteor: {
diff --git a/app/imports/ui/properties/viewers/ItemViewer.vue b/app/imports/ui/properties/viewers/ItemViewer.vue
index 32beb2bf..90af478d 100644
--- a/app/imports/ui/properties/viewers/ItemViewer.vue
+++ b/app/imports/ui/properties/viewers/ItemViewer.vue
@@ -5,7 +5,7 @@
       v-if="model.quantity > 1 || model.showIncrement"
       class="layout justify-center align-center wrap"
     >
-      <div class="text-h4">
+      <div class="text-h4 mr-3">
         {{ model.quantity }}
       </div>
       <increment-button