Deck of Cards

by onejdc

HTML

<fieldset>
  <legend>Welcome</legend>
  <h1>
  Homegrown Poker
  </h1>
  <button>
  Add a Player
  </button>
</fieldset>
<fieldset>
  <legend>Board</legend>
  <div id="deck" class="deck background"></div>
  <div id="board"></div>
  
</fieldset> 
  
<fieldset id='player-hands'>
  <legend>Player Hands</legend>
  <div id="player1" class='player-hand'>
  </div>
  <div id="player2" class='player-hand'>
  </div>
  <div id="player3" class='player-hand'>
  </div>
  <div id="player4" class='player-hand'>
  </div>
</fieldset>

CSS

#deck { cursor: pointer;}
.card {
  width: 60px;
  border: 1px solid #000;
  border-radius: 10px 10px;
  height: 86px;
  float:left;
  margin: 5px;
}
.card.card-color-RED {
  color: red;
}
.card.card-color-BLACK {
  color: black;
}

.suit {
  width: 20px;
  height: 20px;
  font-size: 40px;
  
}
.suit::before {
  position:relative;
  top:-10px;
}
.suit-CLUBS::before {
  content: '♣';
  
}
.suit-HEARTS::before {
  content: '♥';
}
.suit-DIAMONDS::before {
  content: '♦';
}
.suit-SPADES::before {
  content: '♠';
}



div.suit:last-child {
  float:right;
  bottom: 20px;
  position: relative;
  right: 0px;
  transform: rotate(-180deg);
}
.rank { 
  width: 80%;
  height: 80%;
 /*  background-color: blue; */
  margin: auto;
  font-size: 2.5em;
  text-align: center;
}

.deck.background {
  background-color: #e5e5f7;
  opacity: 0.8;
  background-image:  linear-gradient(135deg, #444cf7 25%, transparent 25%), linear-gradient(225deg, #444cf7 25%, transparent 25%), linear-gradient(45deg, #444cf7 25%, transparent 25%), linear-gradient(315deg, #444cf7 25%, #e5e5f7 25%);
  background-position:  10px 0, 10px 0, 0 0, 0 0;
  background-size: 10px 10px;
  background-repeat: repeat;
  width: 120px;
  height: 175px;
  position:relative;
  float:left;
  
    border: 1px solid #000;
  border-radius: 10px 10px;
  margin: 5px;

}

#player-hands {
  
  display:flex;align-items:stretch;
}
.player-hand { position: relative; flex:1;}
.player-name {

  text-align:center;
}

JavaScript

const ranks = ["A",2,3,4,5,6,7,8,9,10,"J","Q","K"];
const suits = ["CLUBS","DIAMONDS","HEARTS","SPADES"];

class Deck {

	constructor(name) {
  	this.name = name;
    this.cards = [];
    self = this;
  }
  
  build() {
  	ranks.forEach(function (r,rank_index) {
    	suits.forEach(function (s, suit_index) {
        self.cards.push(new Card(r,s));
      })
    })
  }
  
  shuffle(type='random',times=1) {
  
  	if (type === 'random') {
      // Durstenfeld shuffle, optimized for es6
      for (let i = this.cards.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]];
      }
    }
    
    if (type === 'faro') {};
  	
  }
  
  draw(from = 'top') {
  	
    if (from === 'bottom') {
    	return this.cards.shift();
    }
    
    return this.cards.pop();
    
    
  }

}

class Card {

	front(){}
  back(){}
  suit(){}
  rank(){}
  color() {}
  
  constructor(rank,suit) {
    this.rank = rank;
    this.suit = suit;
    this.color = (suit === 'SPADES' || suit === 'CLUBS') ? 'BLACK' : 'RED';
  }
  
  drawFront(){}
  
  drawBack(){}

}

class Player {



	constructor(name, div)
  { 
  	this.name = name;
    this.hand = [];
    this.hud = document.querySelector(div);
    
    self = this;
  }
  setNameInHUD()
  {
  	let n = document.createElement('div');
    n.classList.add('player-name');
    n.append(this.name);
    this.hud.appendChild(n);
  }
 
  draw(deck)
  {
  	this.hand.push(deck.draw());
    this.updateHandDisplay();
  }
  updateHandDisplay() {
  	this.hud.innerHTML = '';
    self = this;
    this.hand.forEach( function (card, idx) {
    	
    	self.hud.appendChild(generateCardUI(card));
    });
    this.setNameInHUD();
  }
}

class Board extends Player{
	setNameInHUD(){};
  
  constructor(name, div) {
 		 super(name, div);
     self = this;
  }
  
}

function generateCardUI(card) {
  let c = document.createElement('div');
  let r = document.createElement('div');
 ...