JSFiddle - React, Tailwind, and code Playground

by RichardAD

HTML

<head>
  <title>Solitaire</title>
</head>
<body>
</body>

CSS

.♥, .♦ { color: red; }

JavaScript

var edeck = document.body.appendChild (
  document.createElement('div')
);
edeck.id = 'deck';

var index, pile;
var efpiles = new Array(4);
for (index = 0; index < efpiles.length; index++)
{
  pile = document.createElement('div');
  pile.id = 'fpile' + index;
  document.body.appendChild (efpiles[index] = pile);
}

index = -1;
var etpiles = new Array(7);
for (index = 0; index < etpiles.length; index++) {
  pile = document.createElement('div');
  pile.id = 'tpile' + index;
  document.body.appendChild (etpiles[index] = pile);
}

var elog = document.body.appendChild (
  document.createElement('div')
);
elog.id = 'log';


class Card {
	constructor (face, suit) {
  	this.face = face;
    this.suit = suit;
    this.state = 'down';
  }
  
  render () {
    if (this.state == 'up') {
      return '<span class="' + this.suit + '">' + this.face + this.suit + '</span>';
    }
    else {
      return '&#9634;';
    }
  }
}

var faces = ['A',2,3,4,5,6,7,8,9,10,'J','Q','K'];
var suits = ['♥','♠','♦','♣'];

var cards = new Array(52);

index = -1;
for (let suit of suits) {
	for (let face of faces) {
    cards[++index] = new Card(face, suit);
  }
}

//elog.innerHTML += index;

var deck = new Array(52);
for (index = 0; index < 52; index++) {
  deck[index] = index;
}
for (index = 0; index < 52; index++) {
  var rindex = Math.floor(Math.random() * 52);
  var hold = deck[index];
  deck[index] = deck[rindex];
  deck[rindex] = hold;
}

//elog.innerHTML += index;

var i, j;
var tpiles = new Array(7);

for (index = 0; index < tpiles.length; index++) {
 tpiles[index] = new Array(0);
}

for (i = 0; i < 7; i++) {

// log.innerHTML += '<p>' + deck.length + '</p>';    

  for (j = i; j < 7; j++) {

elog.innerHTML += '<p>' + i + ',' + j + '</p>';

    tpiles[j].push(deck.shift());
elog.innerHTML += tpiles[j].length;
  }
}
/*


var d = document.getElementById('deck');
var comma = '';
var list = '';
for (index = 0; index < 52; index++) {
  list += comma + cards[deck[index]].render();
  comma =...