From 4a0adb7984706feab0af77a3e6c465a6b53438d9 Mon Sep 17 00:00:00 2001
From: Joe Wroten <joe.wroten@q2ebanking.com>
Date: Thu, 18 May 2017 23:41:15 -0500
Subject: [PATCH] Basic spell page

---
 src/components/Spell.vue     | 73 ++++++++++++++++++++++++++++++++++++
 src/components/Spellitem.vue |  7 +---
 src/utils.js                 |  1 +
 3 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Spell.vue
 create mode 100644 src/utils.js

diff --git a/src/components/Spell.vue b/src/components/Spell.vue
new file mode 100644
index 0000000..bf64b68
--- /dev/null
+++ b/src/components/Spell.vue
@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <h1>
+      {{spell.name}}
+      <span class="label circular bg-primary text-white">
+        {{level}}
+      </span>
+    </h1>
+    <ol class="list no-border">
+      <li class="item">
+        <i class="item-primary">accessibility</i>
+        <div class="item-content">
+          {{classes}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">group_work</i>
+        <div class="item-content">
+          {{spell.components.raw}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">school</i>
+        <div class="item-content">
+          {{spell.school}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">hourglass_full</i>
+        <div class="item-content">
+          {{spell.duration}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">av_timer</i>
+        <div class="item-content">
+          {{spell.casting_time}}
+        </div>
+      </li>
+      <li class="item">
+        <i class="item-primary">short_text</i>
+        <div class="item-content">
+          {{spell.description}}
+        </div>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+import { state } from '../store'
+import { capitalize } from '../utils'
+
+export default {
+  data () {
+    return { state }
+  },
+  computed: {
+    spell () {
+      return this.state.spells.data.find(spell => spell.name === this.$route.params.name)
+    },
+    level () {
+      return this.spell.level.toLowerCase() === 'cantrip' ? 'C' : this.spell.level
+    },
+    classes () {
+      return this.spell.classes.map(cla => capitalize(cla)).join(', ')
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/Spellitem.vue b/src/components/Spellitem.vue
index 5184d6f..f6b4270 100644
--- a/src/components/Spellitem.vue
+++ b/src/components/Spellitem.vue
@@ -33,8 +33,7 @@
 
 <script>
 import { state, dispatch } from '../store'
-
-let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+import { capitalize } from '../utils'
 
 export default {
   computed: {
@@ -52,9 +51,7 @@ export default {
     }
   },
   data () {
-    return {
-      state
-    }
+    return { state }
   },
   props: [
     'spell'
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..ac476cf
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1 @@
+export let capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)