JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<main>
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front"></div>
      <div class="flip-card-back"></div>
    </div>
  </div>
</main>

SCSS

HTML {
  background: black;
}

MAIN {
  overflow: hidden;
  width: 400px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.flip-card {
  background-color: red;
  position: relative;
  width: 10%;
  perspective: 100px;
  float: left;
  z-index: 0;
  
  &:before {
    display: block;
    content: '';
    padding-top: 100%;
  }
  
  &.active {
    
    .flip-card-inner {
      transform: rotateY(180deg);
    }
    
  }
  
  .flip-card-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1s;
    transform-style: preserve-3d;
    
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .flip-card-front {
      background-color: white;
    }

    .flip-card-back {
      background-color: black;
      transform: rotateY(180deg);
    }
    
  }

}

JavaScript

jQuery.fn.outerHTML = function(s) {
  return s ?
    this.before(s).remove() :
    jQuery('<p>').append(this.eq(0).clone()).html();
}

$(document).ready(function() {

  let clock = function(timer) {
    
    let time = new Date(timer);
    let hours = time.getHours() - 1;
    let minutes = time.getMinutes();
    let seconds = time.getSeconds();
    let milliseconds = time.getMilliseconds();
    let formatted = hours + 'h ' +
        minutes + 'm ' +
        seconds + 's ' +
        milliseconds + 'ms';
            
     return formatted;
     
  }

  if (confirm('Start game!') === true) {

    let completed = false;
    let timer = 0;
    let seconds = new Date().getTime();
    let last = seconds;
    let interval = setInterval(function() {
      let now = new Date().getTime();
      if (completed === true) {
        console.log('Interval stopped!');
        clearInterval(interval);
        return;
      }
      last = now;
      timer = now - seconds;
    }, 333);

    console.log('Interval started!');

    let squares = 100;

    let order = 0;

    let flipcard = $('.flip-card').outerHTML();

    for (let count = 0; count < (squares - 1); count++) {

      $(flipcard).appendTo('MAIN');

    }

    $(this).on('mouseenter', '.flip-card', function() {

      if (!$(this).hasClass('active')) {

        order++;

        $(this).css('z-index', order).addClass('active');
        
        let timestamp = clock(timer);
        
        console.log(timestamp);

        //console.log(order);

        if (order === squares) {

          completed = true;

          alert(timestamp);

        }

      }

    });

  } else {

    console.log('You canceled!');

  }

});