JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<div id="container">
  <div id="bunny" class="animal"></div>
  <div id="items">
    <div id="pancakes" class="item"></div>
    <div id="milkshake" class="item"></div>
  </div>
  <div id="kitty" class="animal"></div>
</div>

<div id="scoreboard">
  <div id="pancakes_score" class="score">0</div>
  <div id="milkshake_score" class="score">0</div>
</div>

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  -webkit-user-select: none;
  user-select: none;
}


html,
body {
  background-color: #20262E;
  height: 100%;
}

#container {
  border: 1px solid white;
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding: 10px;
  width: 600px;

  .animal,
  #items {
    border: 1px solid gainsboro;
    height: 100px;
    position: relative;
    width: 100px;
  }
}
  
#pancakes {
  background-color: brown;
}
#milkshake {
  background-color: white;
}

.item {
  bottom: 0;
  height: 90px;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.25s;
  width: 90px;
  z-index: -1;
}

.visible {
  opacity: 1;
  z-index: 1;
}
.item-left {
  transform: translate3d(-240px, 0, 0);
  transition: transform 1s;
}
.item-right {
  transform: translate3d(240px, 0, 0);
  transition: transform 1s;
}

#scoreboard {
  border: 1px solid white;
  color: white;
  display: flex;
  font-size: 40px;
  justify-content: space-between;
  margin: auto;
  padding: 10px;
  width: 600px;
  
  .score {
    text-align: center;
    width: 30px;
  }
  
  .not-doing-good {
    color: red;
  }
}

JavaScript

console.clear();

var $bunny = document.querySelector('#bunny');
var $kitty = document.querySelector('#kitty');
var $pancakes = document.querySelector('#pancakes');
var $milkshake = document.querySelector('#milkshake');
var $items = document.querySelectorAll('.item');
var $pancakesScore = document.querySelector('#pancakes_score');
var $milkshakeScore = document.querySelector('#milkshake_score');

var mouseDownX = 0;
var mouseUpX = 0;
var direction;
var $currentItem;
var pancakesScore = 0;
var milkshakeScore = 0;

var swipe = new Event('swipe');
var score = new Event('score');

var whichItem = function () {
	var item = Math.floor(Math.random() * 2);
  $currentItem = $items[item];
  return item;
};

var whichDirection = function (e) {
	e.stopPropagation();
  e.type === 'mousedown' || (mouseDownX = e.clientX);
  e.type === 'mouseup' || (mouseUpX = e.clientX);
  
  if (e.type === 'mouseup') {
    direction = mouseDownX < mouseUpX ? 'left' : 'right';
    document.body.dispatchEvent(swipe);
    mouseDownX = 0;
    mouseUpX = 0;
  }
};

var swipeItem = function (e) {
  direction === 'left' ? $currentItem.classList.add('item-left') : $currentItem.classList.add('item-right');
};

var updateScore = function () {
	$pancakesScore.innerText = pancakesScore;
  $milkshakeScore.innerText = milkshakeScore;
  
  pancakesScore < 0 ? $pancakesScore.classList.add('not-doing-good') : $pancakesScore.classList.remove('not-doing-good');
  milkshakeScore < 0 ? $milkshakeScore.classList.add('not-doing-good') : $milkshakeScore.classList.remove('not-doing-good');
};

var itemTransitionStart = function (e) {
	if (e.propertyName === 'transform') {
  	
  }
};
var itemTransitionEnd = function (e) {
	if (e.propertyName === 'transform') {
    
    if ($currentItem === $pancakes && direction === 'left' || $currentItem === $milkshake && direction === 'right') {
      $currentItem === $pancakes ? pancakesScore++ : milkshakeScore++;
    } else {
      $currentItem === $pancakes ? pancakesScore-- :...