Added resource cards

app/imports/api/creature/properties/Attributes.js

@@ -209,13 +209,17 @@ const adjustAttribute = new ValidatedMethod({
 				if (adjustment > 0) adjustment = 0;
 				Attributes.update(_id, {$set: {adjustment}});
 			} else if (typeof increment === 'number'){
-				let remaining = currentAttribute.value + currentAttribute.adjustment;
+				let remaining = currentAttribute.value + (currentAttribute.adjustment || 0);
 				let adj = currentAttribute.adjustment;
 				// Can't decrease adjustment below remaining value
 				if (-increment > remaining) increment = -remaining;
 				// Can't increase adjustment above zero
 				if (increment > -adj) increment = -adj;
-				Attributes.update(_id, {$inc: {adjustment: increment}});
+				if (typeof currentAttribute.adjustment === 'number'){
+					Attributes.update(_id, {$inc: {adjustment: increment}});
+				} else {
+					Attributes.update(_id, {$set: {adjustment: increment}});
+				}
 			}
 		}
   },

app/imports/ui/StoryBook.vue

@@ -51,6 +51,7 @@
 	import HealthBar from '/imports/ui/components/attributes/HealthBar.Story.vue';
 	import HitDiceListTile from '/imports/ui/components/attributes/HitDiceListTile.Story.vue';
 	import IconSearch from '/imports/ui/components/IconSearch.Story.vue';
+	import ResourceCard from '/imports/ui/components/attributes/ResourceCard.Story.vue';
 	import SkillListTile from '/imports/ui/components/skills/SkillListTile.Story.vue';
 	import SmartInput from '/imports/ui/components/global/SmartInput.Story.vue';
 	import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
@@ -69,6 +70,7 @@
 			HealthBar,
 			HitDiceListTile,
 			IconSearch,
+			ResourceCard,
 			SkillListTile,
 			SmartInput,
 			ToolbarLayout,

app/imports/ui/character/StatsTab.vue

@@ -50,7 +50,7 @@
 								:data-id="hitDie._id"
 								:key="hitDice._id"
 								@click="clickAttribute({_id: hitDie._id})"
-								@change="e => hitDiceChange(hitDie._id, e)"
+								@change="e => incrementChange(hitDie._id, e)"
 							/>
 						</template>
 					</v-list>
@@ -87,6 +87,19 @@
 				</v-card>
 			</div>
 
+			<div
+				v-for="resource in resources"
+				:key="resource._id"
+				class="resource"
+			>
+				<resource-card
+					v-bind="resource"
+					:data-id="resource._id"
+					@click="clickAttribute({_id: resource._id})"
+					@change="e => incrementChange(resource._id, e)"
+				/>
+			</div>
+
 		</column-layout>
 
 		<v-btn fixed fab bottom right
@@ -109,6 +122,7 @@
 	import HealthBarCardContainer from '/imports/ui/components/attributes/HealthBarCardContainer.vue';
 	import HitDiceListTile from '/imports/ui/components/attributes/HitDiceListTile.vue';
 	import SkillListTile from '/imports/ui/components/skills/SkillListTile.vue';
+	import ResourceCard from '/imports/ui/components/attributes/ResourceCard.vue';
 
 	import { adjustAttribute, insertAttribute } from '/imports/api/creature/properties/Attributes.js';
 
@@ -127,6 +141,7 @@
 			HealthBarCardContainer,
 			HitDiceListTile,
 			SkillListTile,
+			ResourceCard,
 		},
 		meteor: {
 			abilities(){
@@ -138,6 +153,15 @@
 			modifiers(){
 				return getAttributeOfType(this.charId, 'modifier');
 			},
+			resources(){
+				return Attributes.find({
+					charId: this.charId,
+					type: 'resource',
+					value: {$ne: 0},
+				}, {
+					sort: {order: 1}
+				});
+			},
 			hitDice(){
 				return Attributes.find({
 					charId: this.charId,
@@ -195,7 +219,7 @@
 					data: {_id},
 				});
 			},
-			hitDiceChange(_id, {type, value}){
+			incrementChange(_id, {type, value}){
 				if (type === 'increment'){
 					adjustAttribute.call({_id, increment: value});
 				}

app/imports/ui/components/attributes/HitDiceListTile.vue

@@ -60,11 +60,6 @@ export default {
 			this.$emit('change', {type: 'increment', value})
 		},
 	},
-	computed: {
-		hasClickListener(){
-    	return this.$listeners && this.$listeners.click
-		},
-	},
 };
 </script>
 
@@ -82,7 +77,7 @@ export default {
 		height: 100%;
 	}
 	.buttons > .v-btn {
-		margin: -2px;
+		margin: 0;
 	}
 	.hit-dice-list-tile.hover {
 		background: #f5f5f5 !important;

app/imports/ui/components/attributes/ResourceCard.Story.vue

@@ -0,0 +1,47 @@
+<template lang="html">
+	<column-layout>
+		<div>
+			<resource-card
+				data-id="abc123"
+				name="Sorcery points"
+				color="#f44336"
+				:value="8"
+				:adjustment="-2"
+			/>
+		</div>
+		<div>
+			<resource-card
+				data-id="abc123"
+				name="Psionic point like things"
+				color="#f44336"
+				:value="34"
+				:adjustment="-12"
+			/>
+		</div>
+		<div>
+			<resource-card
+				data-id="abc123"
+				name="Rages"
+				color="#f44336"
+				:value="1"
+				:adjustment="0"
+			/>
+		</div>
+	</column-layout>
+</template>
+
+<script>
+	import ResourceCard from '/imports/ui/components/attributes/ResourceCard.vue';
+	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
+
+	export default {
+		dontWrap: true,
+		components: {
+			ColumnLayout,
+			ResourceCard,
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/attributes/ResourceCard.vue

@@ -0,0 +1,75 @@
+<template lang="html">
+	<v-card>
+		<div class="layout row align-center" :class="{hover}">
+			<div class="buttons layout column justify-center">
+				<v-btn icon flat :disabled="currentValue >= value" @click="increment(1)">
+					<v-icon>arrow_drop_up</v-icon>
+				</v-btn>
+				<v-btn icon flat :disabled="currentValue <= 0" @click="increment(-1)">
+					<v-icon>arrow_drop_down</v-icon>
+				</v-btn>
+			</div>
+			<div class="layout row value" style="align-items: baseline;">
+				<div class="display-1">{{currentValue}}</div>
+				<div class="title ml-2 max-value">/{{value}}</div>
+			</div>
+			<v-card-text
+				class="content text-truncate"
+				@click="click"
+				@mouseover="hover = true"
+				@mouseleave="hover = false"
+			>
+				{{name}}
+			</v-card-text>
+		</div>
+	</v-card>
+</template>
+
+<script>
+	export default {
+		data(){ return{
+			hover: false,
+		}},
+		props: {
+			_id: String,
+			name: String,
+			color: String,
+			value: Number,
+			adjustment: Number,
+		},
+		computed: {
+			currentValue(){
+				return this.value + (this.adjustment || 0);
+			},
+		},
+		methods: {
+			click(e){
+				this.$emit('click', e);
+			},
+			increment(value){
+				this.$emit('change', {type: 'increment', value})
+			},
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+	.buttons {
+		height: 100%;
+	}
+	.buttons, .value {
+		flex-shrink: 0;
+	}
+	.buttons > .v-btn {
+		margin: 0;
+	}
+	.content {
+		cursor: pointer;
+	}
+	.max-value {
+		color: rgba(0,0,0,.54);
+	}
+	.theme--dark .max-value {
+		color: rgba(255, 255, 255, 0.54);
+	}
+</style>