JSFiddle - React, Tailwind, and code Playground

by Elena Lembersky

HTML

<div id="player1"></div>
<div id="ball"></div>
<div id="player2"></div>

CSS

div{
  width: 80px;
  height: 80px;
  float: left;
}
#player1{
  background-color: green;
}
#player2{
  background-color: red;
  margin-left: 280px;
}
#ball{
  background-color: yellow;
  border: 1px solid black;
  border-radius: 80px;
  position: relative;
}

JavaScript

var ball = (function(){
  var deferred = $.Deferred();
  return {
    roll: function(){  	
      $("#ball").animate({"left":"280px"},2000,ball.endRoll);
      return deferred.promise();
    },
    endRoll: function(){
      $("#ball").animate({"left":"270px"},500);
      deferred.resolve();
    }  
  }  
}())

var player1 = {
  pass: function(){
  	return ball.roll();
  }
}

var player2 = {
  move: function(){
  	$("#player2").animate({"margin-left":"290px"},400);
  },
  takePass: function(game){
  	game.done(player2.move);    
  }
}

function startGame(){
	var game = player1.pass();
	player2.takePass(game);
}

$(function(){
	$("#player1").click(startGame);
});

var d = $.Deferred();
d.pipe(function(e){
	console.log(e);
  return e+1;
}).done(function(e){
	console.log(e);  
}).fail(function(e){
	console.log("fail"+e);
});

d.resolve(1);
d.reject(1);