From fabf377f724268ab40c29280f84f6e73727c524a Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 17 Jan 2019 15:01:45 +0200
Subject: [PATCH] Added Skill list tiles

---
 .../ui/components/SkillListTile.Story.vue     | 60 ++++++++++++++
 app/imports/ui/components/SkillListTile.vue   | 82 +++++++++++++++++++
 2 files changed, 142 insertions(+)
 create mode 100644 app/imports/ui/components/SkillListTile.Story.vue
 create mode 100644 app/imports/ui/components/SkillListTile.vue

diff --git a/app/imports/ui/components/SkillListTile.Story.vue b/app/imports/ui/components/SkillListTile.Story.vue
new file mode 100644
index 00000000..73b96e65
--- /dev/null
+++ b/app/imports/ui/components/SkillListTile.Story.vue
@@ -0,0 +1,60 @@
+<template lang="html">
+	<v-list>
+		<skill-list-tile
+			v-for="skill in skills"
+			:key="skill.name"
+			v-bind="skill"
+		/>
+		<skill-list-tile
+			v-bind="skills[0]"
+			@click="e => log(e)"
+		/>
+	</v-list>
+</template>
+
+<script>
+	import SkillListTile from '/imports/ui/components/SkillListTile.vue';
+	export default {
+		data(){return {
+			skills: [
+				{
+					name: 'Animal Handling',
+					proficiency: 1,
+					modifier: 4,
+				}, {
+					name: 'Deception',
+					proficiency: 0,
+					modifier: -0,
+					advantage: true,
+					disadvantage: true,
+				}, {
+					name: 'Intimidation',
+					proficiency: 2,
+					modifier: 6,
+					advantage: true,
+				}, {
+					name: 'Insight',
+					proficiency: 0.5,
+					modifier: -2,
+					disadvantage: true,
+				}, {
+					name: 'History',
+					conditionalBenefit: "Some cool benefit",
+					fail: true,
+					disadvantage: true,
+				}
+			]
+		}},
+		components: {
+			SkillListTile,
+		},
+		methods: {
+			log(){
+				console.log(...arguments);
+			},
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/components/SkillListTile.vue b/app/imports/ui/components/SkillListTile.vue
new file mode 100644
index 00000000..36b938bd
--- /dev/null
+++ b/app/imports/ui/components/SkillListTile.vue
@@ -0,0 +1,82 @@
+<template lang="html">
+  <v-list-tile class="skill-list-tile" height="32px" v-on="hasClickListener ? {click} : {}">
+  	<v-list-tile-action class="prof-icon">
+  		<v-icon>
+  			{{icon}}
+  		</v-icon>
+  	</v-list-tile-action>
+		<v-list-tile-content>
+			<v-list-tile-title>
+				<span class="prof-mod">
+					{{displayedModifier}}
+				</span>
+				{{name}}
+				<template v-if="conditionalBenefit">*</template>
+				<v-icon size="20px" v-if="advantage && !disadvantage">arrow_upward</v-icon>
+				<v-icon size="20px" v-if="!advantage && disadvantage">arrow_downward</v-icon>
+			</v-list-tile-title>
+		</v-list-tile-content>
+  </v-list-tile>
+</template>
+
+<script>
+export default {
+	props: {
+		proficiency: Number,
+		advantage: Boolean,
+		disadvantage: Boolean,
+		fail: Boolean,
+		modifier: Number,
+		name: String,
+		conditionalBenefit: String,
+	},
+	methods: {
+		click(e){
+			this.$emit('click', e);
+		},
+	},
+	computed: {
+		icon(){
+			if (this.proficiency == 0.5){
+				return 'brightness_2';
+			} else if (this.proficiency == 1) {
+				return 'radio_button_checked'
+			} else if (this.proficiency == 2){
+				return 'album'
+			} else {
+				return 'radio_button_unchecked';
+			}
+		},
+		displayedModifier(){
+			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;
+			}
+		},
+		hasClickListener(){
+    	return this.$listeners && this.$listeners.click
+		},
+	}
+}
+</script>
+
+<style lang="css" scoped>
+	.skill-list-tile >>> .v-list__tile {
+		height: 34px;
+		padding: 0;
+	}
+	.prof-icon {
+		min-width: 30px;
+	}
+	.prof-mod {
+		display: inline-block;
+		width: 45px;
+		text-align: center;
+	}
+</style>