Cards

by black strings

HTML

<div id="uiContainer">
  
</div>
<div id="playerContainer">

</div>

CSS

.card { 
 border: thin solid grey; 
 margin:5px; padding:5px; width:40px;
 display:inline-block;
 -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */    
  cursor: pointer;
}
.card img {
  width:45%;
}
.show{ background-color: #fffff1; }
.hide { background-color: grey; }
.player {display:inline-block; margin-left:15px;}
.playerHand { background-color: white; border:thin solid grey; display:inline-block;}
.playerInfo { background-color: white; padding: 3px;}
#uiContainer { background-color: white;}
.btn {
  width: 100px;
  height:50px;
}

JavaScript

var Card = (function(){
	function Card(value, kind){
  	this.faceValue = value;
    this.faceKind = kind;
    this.avatar;
    this.isFaceUp = true;
    this._createDom();
  }
  Card.prototype.setAvatar = function(avatarImage){
  	this.avatar = avatarImage;
    this.dom.appendChild(this.avatar);
  }
  Card.prototype.hide = function(){
  	this.dom.innerHTML = '.';
    this.dom.className = 'card hide';
    this.isFaceUp = false;
  }
  Card.prototype.show = function(){
  	this.dom.innerHTML = this.faceValue;
    this.dom.appendChild( this.avatar);
    this.dom.className = 'card show';
    this.isFaceUp = true;
  }
  Card.prototype.getDom = function(){
  	return this.dom;
  }
  Card.prototype._createDom = function(){
  	this.dom = document.createElement('div');
    this.dom.innerHTML = this.faceValue;
    this.dom.className = 'card';
    var self = this;
    
    this.dom.addEventListener('click', function(){
    	if(self.isFaceUp){
      	self.hide();
        self.isFaceUp = false;
      }else{
      	self.show();
        self.isFaceUp = true;
      };
    });
  }
  return Card;
}());

/////////////////////////////// PLAYER
var Player = (function(){
	function Player(name){
  	this.name = name;
  	this.cards = [];
    this.dom = this.createDom('player');
    this.handDom = this.createDom('playerHand');
    this.infoDom = this.createDom('playerInfo');
    this.infoDom.innerHTML = this.name;
    this.finalizeDoms();
  }
  Player.prototype.addCard = function(card){
  	this.cards.push(card);
    this.handDom.appendChild(card.getDom());
  }
  Player.prototype.addCards = function(cards){
    var self = this;
    cards.forEach(function(card){
    	self.addCard(card);
    });
  }
  Player.prototype.flipCards = function(){
  	this.cards.forEach(function(c){
    	c.show();
    })
  }
  Player.prototype.discardCards = function(){
  	this.handDom.innerHTML = "";
  	this.cards = [];
  }
  Player.prototype.createDom = function(className){
  	var dom =...