step 3

index.html

@@ -21,6 +21,7 @@
     <script src="src/store/index.js"></script>
 
     <script src="src/components/app.js"></script>
+    <script src="src/components/tile.js"></script>
 
     <script src="src/main.js"></script>
   </body>

src/components/app.js

@@ -1,13 +1,7 @@
 ((() => {
   const html = `
-    <div class="wrapper">
-      <div v-for="(tile, index) in tiles" 
-        v-bind:key="tile.id" 
-        v-bind:class="{black_active: !tile.showFace }"
-        class="box"
-         @click="handleClick(tile)">
-          {{tile.id}}
-      </div>
+    <div>
+      <tile :tiles="tiles" :matchingOptions="matchingOptions"></tile>
     </div>
   `
 
@@ -17,25 +11,22 @@
     data() {
       return {
         tiles: [],
+        matchingOptions: [
+          {name: "Rails", pairs: 2},
+          {name: "PHP", pairs: 2},
+          {name: "Node", pairs: 2},
+          {name: "React", pairs: 2},
+          {name: "GoLang", pairs: 2},
+          {name: "Lisp", pairs: 2},
+          {name: "Perl", pairs: 2},
+          {name: "Java", pairs: 2},
+          {name: "C++", pairs: 2},
+          {name: "C", pairs: 2},
+          {name: "Ruby", pairs: 2},
+          {name: "Python", pairs: 2},
+        ],
       }
     },
 
-    mounted() {
-      this.populateBoard()
-    },
-
-
-    methods: {
-      populateBoard() {
-        for(let i = 0; i <= 23; i++) {
-          this.tiles.push({id: i, showFace: false})
-        }
-      },
-
-      handleClick(tile) {
-        tile.showFace = true
-      }
-    }
-
   })
 }))()

src/components/tile.js

@@ -0,0 +1,59 @@
+((() => {
+  const html = `
+    <div class="wrapper">
+      <div v-for="(tile, index) in tiles" 
+        v-bind:key="tile.id" 
+        v-bind:class="{black_active: !tile.showFace }"
+        class="box"
+         @click="handleClick(tile)">
+          {{tile.id}}
+      </div>
+    </div>
+  `
+
+  Vue.component("tile", {
+    template: html,
+
+    data() {
+      return {
+
+      }
+    },
+
+    mounted() {
+      this.populateBoard()
+    },
+
+    props: {
+      tiles: {
+        type: Array,
+        required: true
+      },
+
+      matchingOptions: {
+        type: Array,
+        required: true
+      },
+    },
+
+    methods: {
+      populateBoard() {
+
+        for(let i = 0; i <= ((this.matchingOptions.length*2)-1); i++) {
+          this.tiles.push({id: i, showFace: false, matched: false })
+        }
+
+        return this.tiles
+      },
+
+      handleClick(tile) {
+        tile.showFace = true
+
+        setTimeout(function() {
+          tile.showFace = false
+        }, 2000)
+      }
+    }
+
+  })
+}))()