Make characters clickable

package.json

@@ -10,6 +10,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "lodash": "^4.17.10",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"
   },

src/pages/Onboarding.vue

@@ -8,7 +8,7 @@
         <h1>Welcome</h1>
         <p>Lorem ipsum dolor sit amet, 
           consectetur adipiscing</p>
-        <ComponentButton @click="$router.push('/select-character')">Get Started</ComponentButton>
+        <ComponentButton @click="navigateToSelectCharacter">Get Started</ComponentButton>
       </div>
       <router-link to="/login" class="login">Log In</router-link>
     </div>
@@ -21,6 +21,11 @@ import ComponentButton from '@/components/Button'
 export default {
   components: {
     ComponentButton
+  },
+  methods: {
+    navigateToSelectCharacter () {
+      this.$router.push('/select-character')
+    }
   }
 }
 </script>

src/pages/SelectCharacter.vue

@@ -1,22 +1,24 @@
 <template>
   <NavigationLayout>
     <h1>Select A Character</h1>
-    <div class="characters-grid">
-      <div class="character-card-wrapper">
-        <CharacterCard
-          :selected="selectedCharacterType === 'girl'"
-          @click="setSelectedCaharacterType('girl')"
-          :src="require('@/assets/characters/character-girl-1.png')"
-          text="Girl"
-        />
-      </div>
-      <div class="character-card-wrapper">
-        <CharacterCard
-          :selected="selectedCharacterType === 'boy'"
-          @click="setSelectedCaharacterType('boy')"
-          :src="require('@/assets/characters/character-boy-1.png')"
-          text="Boy"
-        />
+    <div>
+      <div
+        v-for="(row, index) in rows"
+        :key="index"
+        class="characters-row"
+      >
+        <div
+          v-for="card in row"
+          :key="card.value"
+          class="character-card-wrapper"
+        >
+          <CharacterCard
+            :selected="isCardSelected(card.value)"
+            @click="selectCard(card.value)"
+            :src="card.src"
+            :text="card.text"
+          />
+        </div>
       </div>
     </div>
     <div class="continue-button">
@@ -26,38 +28,132 @@
 </template>
 
 <script>
+import { isFinite, inRange, chunk } from 'lodash'
 import NavigationLayout from '@/layouts/NavigationLayout'
 
 import CharacterCard from '@/components/cards/CharacterCard'
 import ComponentButton from '@/components/Button'
 
 export default {
+  beforeRouteEnter (to, from, next) {
+    const { step } = to.query
+    if (!isFinite(step) || step !== 1) {
+      return next({ path: to.path, query: { step: 1 } })
+    }
+    next()
+  },
   data () {
     return {
-      selectedCharacterType: null
+      value: {
+        gender: null,
+        character: null
+      },
+      cards: {
+        gender: [
+          {
+            value: 'girl',
+            src: require('@/assets/characters/character-girl-1.png'),
+            text: "Girl"
+          }, {
+            value: 'boy',
+            src: require('@/assets/characters/character-boy-1.png'),
+            text: "Boy"
+          }
+        ],
+        boys: [
+          {
+            value: '1',
+            src: require('@/assets/characters/character-boy-1.png'),
+          },
+          {
+            value: '2',
+            src: require('@/assets/characters/character-boy-2.png'),
+          },
+          {
+            value: '3',
+            src: require('@/assets/characters/character-boy-3.png'),
+          },
+          {
+            value: '4',
+            src: require('@/assets/characters/character-boy-4.png'),
+          },
+        ],
+        girls: [
+          {
+            value: '1',
+            src: require('@/assets/characters/character-girl-1.png'),
+          },
+          {
+            value: '2',
+            src: require('@/assets/characters/character-girl-2.png'),
+          },
+          {
+            value: '3',
+            src: require('@/assets/characters/character-girl-3.png'),
+          },
+          {
+            value: '4',
+            src: require('@/assets/characters/character-girl-4.png'),
+          },
+        ]
+      }
     }
   },
   components: {
     NavigationLayout,
     CharacterCard,
     ComponentButton
   },
+  computed: {
+    step () {
+      return Number(this.$route.query.step)
+    },
+    rows () {
+      let res = []
+      if (this.step === 1) {
+        res = this.cards.gender
+      } else if (this.step === 2 && this.value.gender === 'boy') {
+        res = this.cards.boys
+      } else if (this.step === 2 && this.value.gender === 'girl') {
+        res = this.cards.girls
+      }
+      return chunk(res, 2)
+    }
+  },
   methods: {
-    setSelectedCaharacterType (value) {
-      this.selectedCharacterType = value
+    isCardSelected (value) {
+      if (this.step === 1) {
+        return this.value.gender === value
+      } else if (this.step === 2) {
+        return this.value.character === value
+      }
+    },
+    selectCard (value) {
+      if (this.step === 1) {
+        this.value.gender = value
+      } else if (this.step === 2) {
+        return this.value.character = value
+      }
     },
     nextStep() {
-      if (this.selectedCharacterType) {
-        this.$router.push('select-character-person')
+      if (this.value.gender) {
+        const { currentRoute } = this.$router
+        if (this.step === 1) {
+          this.step = 2
+          this.$router.push({ path: currentRoute.path, query: { step: 2 } })
+        } else {
+          this.$router.push('/select-age')
+        }
       }
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-  .characters-grid {
+  .characters-row {
     display: flex;
+    margin-bottom: 15px;
   }
 
   .character-card-wrapper {
@@ -68,6 +164,6 @@ export default {
   }
 
   .continue-button {
-    margin-top: 180px;
+    margin-top: 100px;
   }
 </style>

yarn.lock

@@ -3421,7 +3421,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.4:
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.10, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.4:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"