Cards Shuffle

by marakoss

CSS

body {
  background: #fff;
  counter-reset: round -1;
  padding: 10px;
}

.round {
  width: 780px;
  display: flex;
  counter-reset: card -1;
  position: relative;
}

.round:before {
  counter-increment: round;
  content: "r" counter(round) ":";
  font-size: 10px;
  width: 20px;
}

.card {
  width: 15px;
  height: 15px;
  font-size: 10px;
  margin: auto;
}

.pick {
  font-size: 12px;
  font-weight: bold;
  background: black;
  color: white;
}

.H {
  background: #fcc;
}

.K {
  background: #cFc;
}

.L {
  background: #ccF;
}

.C {
  background: #ccc;
}

.H,
.K {
  color: red;
}

.L,
.C {
  color: black;
}

.K,
.C {
  opacity: 0.6;
}

.round:nth-child(1) .card:before {
  counter-increment: card;
  content: "r" counter(card) ":";
  font-size: 20px;
  position: absolute;
  top: 20px;
  width: 20px;
  height: 20px;
  display: block;
  z-index: 20;
}

.round:nth-child(54) .card {
  font-weight: bold;
  border-bottom: 3px solid black;
}

JavaScript

// Make cards combinations
function combine(numbers, types) {
  var cards = [];
  for (var type_index in types) {
    for (var number_index in numbers) {
      cards.push({
        n: numbers[number_index],
        t: types[type_index]
      });
    }
  }
  return cards;
}

// Render cards
function render(c) {
  var round = document.createElement('div');
  round.classList.add('round');
  for (var card_index in c) {
    var item = document.createElement('div');
    item.innerText = c[card_index].n;
    item.classList.add('card');
    item.classList.add('N' + c[card_index].n);
    item.classList.add(c[card_index].t);
    if (c[card_index].o) {
      item.classList.add('pick');
    }
    round.appendChild(item);

  }
  document.body.appendChild(round);
}

// Random number witing range
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// Shuffle cards
function shuffleSingleTime(c) {
  var pick = getRandomInt(0, c.length);
  return c.slice(pick).concat(c.slice(0, pick)).slice();
}

// Pick within the percentage of the begining og the card pack
function getPick(length, max) {
  if (!max) {
    max = 1; // float
  }

  return getRandomInt(0, Math.floor((length * max)));
}

// Shuffle cards
function shuffle(c) {
  var max = 1;
  var pick = getPick(c.length, max);
  var restshuffled;
  var rest = c.slice(0, pick);
  if (rest.length > 0) {
    restshuffled = shuffle(rest);
  } else {
    restshuffled = rest;
  }

  var echo = c.slice(pick).concat(restshuffled).slice();

  return echo;
}

// The code

var numbers = [
    'A', '2', '3', '4', '5', '6', '7', '8', '9', 'T', 'J', 'Q', 'K'
  ],
  types = [
    'L', 'C', 'H', 'K'
  ],
  cards = combine(numbers, types);

// The code

// Render unshufled cards
render(cards);

// Shuffle cards in a steps
for (var i = 0; i < 100; i++) {
  cards = shuffle(cards, i);
  render(cards);
}