JSFiddle - React, Tailwind, and code Playground

by lmcdevloper

HTML

<div id="app">
  <div class="info">
    <div><span class="label">Time:</span><span class="value">{{ time }} </span></div>
    <div><span class="label">Turns:</span><span class="value">{{ turns }} </span></div>
  </div>
  <div class="cards">
    <div class="card" v-for="card in cards" :class="{ flipped: card.flipped, found: card.found }" @click="flipCard(card)">
      <div class="back"></div>
      <div class="front" :style="{ backgroundImage: 'url(' + card.image + ')' }"></div>
    </div>
  </div>
  <div class="splash" v-if="showSplash">
    <div class="overlay"></div>
    <div class="content">
      <div class="title">You won!</div>
      <div class="score">Score: {{ score }}</div>
      <button class="newGame" @click="resetGame()">New game</button>
    </div>
  </div>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Work+Sans:400,300,700|Play:400,700|Maven+Pro:400,500,700,900&amp;subset=latin,latin-ext);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
 
html {
  background-color: #292C33;
  color: White;
  font-size: 16px;
  font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
#app {
  margin: 2em;
}
 
.info {
  text-align: center;
  padding-bottom: 1em;
  border-bottom: 1px solid #555;
}
.info > div {
  display: inline-block;
  width: 200px;
}
.info > div .label {
  margin-right: 5px;
}
.info > div .value {
  font-weight: bold;
}
 
.cards .card {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 225px;
  margin: 1em 2em;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.cards .card .front, .cards .card .back {
  border-radius: 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: White;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.cards .card .back {
  background-image:...

JavaScript

let CardTypes = [
  { name: "pato", image: "https://www.dibujofacildecolorear.com/wp-content/uploads/2020/07/pato-de-pocoyo-para-colorear-912x1024.jpg" },
  { name: "eli", image: "https://www.dibujofacildecolorear.com/wp-content/uploads/2020/07/eli-pocoy%C3%B3-para-colorear-912x1024.jpg" },
  { name: "lula", image: "https://www.dibujofacildecolorear.com/wp-content/uploads/2020/07/pajaroto-pocoy%C3%B3-para-colorear-912x1024.jpg" },
  { name: "pocoyo", image: "https://www.dibujofacildecolorear.com/wp-content/uploads/2020/07/Pocoy%C3%B3-para-colorear-1-912x1024.jpg" },
  { name: "valentina", image: "https://www.dibujofacildecolorear.com/wp-content/uploads/2020/07/Valentina-pocoy%C3%B3-para-colorear-912x1024.jpg" },
  { name: "pulpo", image: "https://www.dibujofacildecolorear.com/wp-content/uploads/2020/07/pulpo-de-pocoyo-para-colorear-912x1024.jpg" },
  { name: "nina", image: "https://www.dibujofacildecolorear.com/wp-content/uploads/2020/07/Nina-de-pocoyo-para-colorear-912x1024.jpg" },
  { name: "todos", image: "https://www.dibujofacildecolorear.com/wp-content/uploads/2020/07/dibujo-de-pocoyo-y-sus-amigos-para-colorear-912x1024.jpg" }
];

let shuffleCards = () => {
  let cards = [].concat(_.cloneDeep(CardTypes), _.cloneDeep(CardTypes));
  return _.shuffle(cards);
}

let shuffleCard = () => {	
	let c = CardTypes;
  return _.shuffle(c);
 }
 
new Vue({
  el: "#app",
  
  data: {
    showSplash: false,
    cards: [],
    started: false,
    startTime: 0,
    turns: 0,
    cardsshow: 4,
    flipBackTimer: null,
    timer: null,
    time: "--:--",
    score: 0
  },
  
  methods: {
    resetGame() {
      this.showSplash = false;
      CardTypes = shuffleCard();
      CardTypes = CardTypes.splice(0,this.cardsshow);
      let cards = shuffleCards()	
      console.warn(cards)
      this.turns = 0;
      this.score = 0;
      this.started = false;
      this.startTime = 0;
      
      _.each(cards, (card) => {
        card.flipped = false;
        card.found = false;
     ...