From 68a28c693d3d427f5239438321508c9a47344320 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sat, 5 Sep 2020 17:14:13 -0500
Subject: [PATCH] beginnings of simple Character page (list button links, base
 page with card)

---
 client/src/components/Character.vue     | 18 ++++++++++++++++++
 client/src/components/CharacterList.vue |  1 +
 client/src/router.js                    |  9 +++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 client/src/components/Character.vue

diff --git a/client/src/components/Character.vue b/client/src/components/Character.vue
new file mode 100644
index 0000000..8368511
--- /dev/null
+++ b/client/src/components/Character.vue
@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <b-card>
+            <h4>{{ this.$route.params.character }}</h4>
+        </b-card>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.card-body h4 {
+    text-transform: capitalize;
+}
+</style>
+
+<script>
+export default {
+};
+</script>
diff --git a/client/src/components/CharacterList.vue b/client/src/components/CharacterList.vue
index d6860a6..a3e945f 100644
--- a/client/src/components/CharacterList.vue
+++ b/client/src/components/CharacterList.vue
@@ -3,6 +3,7 @@
         <b-button squared class="mx-2 my-1 character-button" size="sm"
                   v-for="character in characters" :key="character.name" :id="`character-${character.id}`"
                   :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
+                  :to="`/character/${character.id}`"
         >
             {{ character.name }}
             <b-badge class="ml-1">{{ character.appearances}}</b-badge>
diff --git a/client/src/router.js b/client/src/router.js
index bdabe84..b87439a 100644
--- a/client/src/router.js
+++ b/client/src/router.js
@@ -3,6 +3,7 @@ import Router from 'vue-router';
 import Home from './components/Home.vue';
 import Episode from './components/Episode.vue';
 import SearchResults from './components/SearchResults.vue';
+import Character from './components/Character.vue';
 
 Vue.use(Router);
 
@@ -15,6 +16,11 @@ export default new Router({
       name: 'Home',
       component: Home,
     },
+    {
+      path: '/character/:character',
+      name: 'Character',
+      component: Character,
+    },
     {
       path: '/:season/:episode',
       name: 'Episode',
@@ -25,6 +31,9 @@ export default new Router({
       name: 'SearchResults',
       component: SearchResults,
     },
+    {
+      path: '*',
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     // https://router.vuejs.org/guide/advanced/scroll-behavior.html