Front page update

src/components/Home.vue

@@ -13,8 +13,12 @@
           <div class="slogan"><p class="text-center">Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p></div>
           <br>
           <div class="row column text-center">
+<<<<<<< HEAD
             <button class="hollow button">PLAY NOW</button>
             <p>Skip game, Maybe next time</p>
+=======
+            <button class="hollow button" @click="play">PLAY NOW</button>
+>>>>>>> 9900326fe2ab7bef4076d5909998bc66fffabbae
           </div>
           
         </div>
@@ -112,6 +116,7 @@
             <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
           </div>
         </div>
+<<<<<<< HEAD
 
       </div>
     </div>
@@ -144,6 +149,9 @@
       </div>
     </footer>
  -->
+=======
+        <mps-game v-if="playing"></mps-game>
+>>>>>>> 9900326fe2ab7bef4076d5909998bc66fffabbae
   </div>
 </template>
 
@@ -281,12 +289,14 @@
 </style>
 
 <script>
+import MpsGame from './MpsGame';
 
 export default {
   name: 'hello',
   data() {
     return {
       msg: 'Vue + Foundation',
+      playing: false,
     };
   },
   mounted() {
@@ -294,6 +304,14 @@ export default {
     // document.getElementById('first_window').style.height = height;
     // console.log(height);
   },
+  methods: {
+    play() {
+      this.playing = true;
+    },
+  },
+  components: {
+    MpsGame,
+  },
 };
 </script>
 

src/components/MpsGame.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="game">
-		<div class="modal-overlay">
+    <div class="" style="height: 500px;">
       <div class="modal">
         <h2 class="winner">Well Done!</h2>
         <button @click="restart" class="restart">Play Again?</button>
@@ -9,17 +9,27 @@
           <li></li>
         </ul>
       </div>
+      <div v-for="(card, index) in shuffledCards" :id="index" class="card" :data-id="card.id" @click="flip(index)">
+        <div class="inside">
+          <div class="front">
+            <img :src="card.img" :alt="card.name" />
+          </div>
+          <div class="back">
+            <img src="http://i.imgur.com/diex0Zl.png" alt="Codepen" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 export default {
+  /* eslint-disable */
   name: 'game',
   mounted() {
-
+    this.shuffleCards();
   },
   created() {
-
   },
   data() {
     return {
@@ -29,40 +39,99 @@
       overlay: '',
       // restartButton:'',
       cardsArray: '',
-	      shuffleCards: '',
+      shuffledCards: [],
-	      card: [
+      paused: false,
+      guess: null,
+      cards: [
         {
           name: 'mpsOne',
-	      		img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
+          img: 'http://lorempixel.com/400/200/sports',
           id: 1,
         },
         {
           name: 'mpsTwo',
-	      		img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
+          img: 'http://lorempixel.com/400/200/city',
           id: 2,
         },
         {
           name: 'mpsThree',
-	      		img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
+          img: 'http://lorempixel.com/400/200/people',
           id: 3,
         },
         {
           name: 'mpsFour',
-	      		img: 'https://cdn.dribbble.com/users/139604/screenshots/3505913/a-behind-the-scenes-project-walkthrough_1x.jpg',
+          img: 'http://lorempixel.com/400/200/transport',
           id: 4,
         },
       ],
     };
   },
+  methods: {
+    restart() {
+      this.shuffleCards();
+    },
+    shuffleCards() {
+      this.shuffledCards = this.shuffle(this.cards.concat(this.cards));
+    },
+    shuffle(array) {
+      let counter = array.length;
+      let temp;
+      let index;
+      const localArray = array;
+      // While there are elements in the array
+      while (counter > 0) {
+        // Pick a random index
+        index = Math.floor(Math.random() * counter);
+        // Decrease counter by 1
+        counter -= 1;
+        // And swap the last element with it
+        temp = localArray[counter];
+        localArray[counter] = array[index];
+        localArray[index] = temp;
+      }
+      return localArray;
+    },
+    flip(cardId) {
+      const $card = $('#'+ cardId); // eslint-disable-line
+      if (!this.paused && !$card.find('.inside').hasClass('matched') && !$card.find('.inside').hasClass('picked')) {
+        $card.find('.inside').addClass('picked');
+        if (!this.guess) {
+          this.guess = $($card).attr('data-id');
+        } else if (this.guess === $($card).attr('data-id') && !$($card).hasClass('picked')) {
+          $('.picked').addClass('matched');
+          this.guess = null;
+        } else {
+          this.guess = null;
+          this.paused = true;
+          setTimeout(() => {
+            $('.picked').removeClass('picked');
+            this.paused = false;
+          }, 600);
+        }
+        if ($('.matched').length === $('.card').length) {
+          this.win();
+        }
+      }
+    },
+    win() {
+      this.paused = true;
+			setTimeout(function(){
+				alert('SSSSSS');
+			}, 1000);
+    },
+  },
   destroyed() {
-	    this.accordion.destroy();
+    // this.accordion.destroy();
   },
 };
 </script>
 <style lang='scss' scoped>
 @import url(http://weloveiconfonts.com/api/?family=brandico);
 
+
+
 /* brandico */
+
 [class*="brandico-"]:before {
   font-family: 'brandico', sans-serif;
 }
@@ -71,7 +140,8 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -112,7 +182,7 @@ body {
 
 .card {
   float: left;
-  width: 16.66666%;
+  width: 25%;
   height: 25%;
   padding: 5px;
   text-align: center;
@@ -135,7 +205,8 @@ body {
     transition: .4s ease-in-out;
     background: white;
 
-		&.picked, &.matched {
+    &.picked,
+    &.matched {
       transform: rotateY(180deg);
     }
     &.matched {
@@ -144,7 +215,8 @@ body {
     }
   }
 
-  .front, .back {
+  .front,
+  .back {
     border: 1px solid black;
     backface-visibility: hidden;
     position: absolute;