Added ability score list tiles

app/imports/ui/components/AbilityListTile.Story.vue

@@ -0,0 +1,58 @@
+<template lang="html">
+	<v-list>
+		<template v-for="(ability, index) in abilities">
+			<v-divider v-if="index !== 0"/>
+			<ability-list-tile
+				:key="ability.name"
+				v-bind="ability"
+				@click="click"
+			/>
+		</template>
+	</v-list>
+</template>
+
+<script>
+	import AbilityListTile from '/imports/ui/components/AbilityListTile.vue';
+	export default {
+		data(){ return{
+			abilities: [
+				{
+					name: "Strength",
+					score: 8,
+					modifier: -1,
+				}, {
+					name: "Dexterity",
+					score: 18,
+					modifier: 4,
+				}, {
+					name: "Constitution",
+					score: 12,
+					modifier: 1,
+				}, {
+					name: "Intelligence",
+					score: 20,
+					modifier: 5,
+				}, {
+					name: "Wisdom",
+					score: 6,
+					modifier: -2,
+				}, {
+					name: "Charisma",
+					score: 28,
+					modifier: 9,
+				},
+			]
+		}},
+		components: {
+			AbilityListTile,
+		},
+		methods: {
+			click(e){
+				console.log(e)
+			},
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/AbilityListTile.vue

@@ -0,0 +1,60 @@
+<template lang="html">
+	<v-list-tile class="ability-list-tile"  v-on="hasClickListener ? {click} : {}">
+
+		<v-list-tile-action class="mr-4">
+			<div class="display-1 modifier">
+				{{numberToSignedString(modifier)}}
+			</div>
+			<div class="title score">
+				{{score}}
+			</div>
+		</v-list-tile-action>
+
+	  <v-list-tile-content>
+			<v-list-tile-title>
+				{{name}}
+			</v-list-tile-title>
+	  </v-list-tile-content>
+
+	</v-list-tile>
+</template>
+
+<script>
+import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+export default {
+	props: {
+		score: Number,
+		modifier: Number,
+		name: String,
+	},
+	methods: {
+		numberToSignedString,
+		click(e){
+			this.$emit('click', e);
+		},
+	},
+	computed: {
+		hasClickListener(){
+    	return this.$listeners && this.$listeners.click
+		},
+	}
+}
+</script>
+
+<style lang="css" scoped>
+	.ability-list-tile >>> .v-list__tile {
+		height: 88px;
+	}
+	.ability-list-tile >>> .v-list__tile__action--stack {
+		justify-content: center;
+	}
+	.score {
+		font-weight: 600;
+		font-size: 24px !important;
+		color: rgba(0, 0, 0, 0.54);
+	}
+	.modifier, .score {
+		text-align: center;
+		width: 100%;
+	}
+</style>

app/imports/ui/components/SkillListTile.Story.vue

@@ -4,10 +4,7 @@
 			v-for="skill in skills"
 			:key="skill.name"
 			v-bind="skill"
-		/>
+			@click="click"
-		<skill-list-tile
-			v-bind="skills[0]"
-			@click="e => log(e)"
 		/>
 	</v-list>
 </template>
@@ -49,7 +46,7 @@
 			SkillListTile,
 		},
 		methods: {
-			log(){
+			click(){
 				console.log(...arguments);
 			},
 		},

app/imports/ui/components/SkillListTile.vue

@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+
 export default {
 	props: {
 		proficiency: Number,
@@ -50,12 +52,8 @@ export default {
 			let mod = this.modifier;
 			if (this.fail){
 				return 'fail';
-			} else if (mod === 0){
-				return '+0';
-			} else if (mod > 0 && typeof mod === 'number'){
-				return `+${mod}`
 			} else {
-				return mod;
+				return numberToSignedString(mod);
 			}
 		},
 		hasClickListener(){

app/imports/ui/pages/StoryBook.vue

@@ -33,11 +33,13 @@
 	import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
 	import HealthBar from '/imports/ui/components/HealthBar.Story.vue';
 	import SkillListTile from '/imports/ui/components/SkillListTile.Story.vue';
+	import AbilityListTile from '/imports/ui/components/AbilityListTile.Story.vue';
 	export default {
 		components: {
 			ToolbarLayout,
 			HealthBar,
 			SkillListTile,
+			AbilityListTile,
 		},
 	}
 </script>

app/imports/ui/utility/numberToSignedString.js

@@ -0,0 +1,10 @@
+export default function numberToSignedString(number){
+  if (typeof number !== 'number') return number;
+  if (number === 0){
+    return '+0';
+  } else if (number > 0){
+    return `+${number}`;
+  } else {
+    return `${number}`;
+  }
+};