JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<script src="https://deck-of-cards.js.org/dist/deck.min.js"></script>
<link rel="stylesheet" href="https://deck-of-cards.js.org/example.css">

<div id="container"></div>

JavaScript

var $container = document.getElementById('container')

// create Deck
var deck = Deck()

// add to DOM
deck.mount($container);


deck.queue(function (next) {
  deck.cards.forEach(function (card, i) {
    setTimeout(function () {
      card.setSide('back')
    }, i * 7.5)
  })
  next()
});
deck.shuffle();

function moveAi(card, i)
{
	console.log('moveAi', card, i);
  card.setSide('front');
  card.animateTo({
    delay: 0*1000,
    duration: 500,
    ease: 'quartOut',
    
    x: 1.0 * i / 10.0 * window.innerWidth,
    y: - window.innerHeight / 4.0,
    });
}
function moveUser(card, i)
{
	console.log('moveUser', card, i);
  card.setSide('front');
  // explode
  card.animateTo({
    delay: 0*1000, // wait 1 second + i * 2 ms
    duration: 500,
    ease: 'quartOut',

    x: 1.0 * i / 10.0 * window.innerWidth,
    y: window.innerHeight / 4.0,
  });
}
function play(userCards, aiCards)
{
  var card;
  var cardNo = 0;
  
  card = deck.cards[cardNo++];
  card.rank = aiCards[0];
  card.suit = 1;
  card.i = card.suit * 13 + card.rank - 1;
  setTimeout(function(){
		moveAi(card, 0);
  }, 1000);

	for(let i=0; i<userCards.length; i++){
  	(function(i){
  		var card = deck.cards[cardNo++];
      card.rank = userCards[i];
      //card.suit = 1;
      card.i = card.suit * 13 + card.rank - 1;
      setTimeout(function(){
        moveUser(card, i);
	    }, 2000 + i*500);
    })(i);
  }
	for(let i=1; i<aiCards.length; i++){
  	(function(i){
  		var card = deck.cards[cardNo++];
      card.rank = aiCards[i];
      //card.suit = 1;
      card.i = card.suit * 13 + card.rank - 1;

			setTimeout(function(){
        moveAi(card, i);
	    }, 2000 + (userCards.length+i)*500);
    })(i);
  }

}

//var json = '[{"result":"CONTINUE","userInput":"10\n10 8\n","state":{"userCards":[10,8],"aiCards":[10]},"player":"ai","turn":0},{"stdout":"HIT\n","player":"user","turn":1},{"result":"WA","userInput":"10\n10 8...