GO FISH GAME

From 2/21/17 "Basic JavaScript Games - Tues Meetup!"

by lasha

HTML

<h3>Remaining Cards</h3>
<div class="remaining-cards"></div>

<h5 class="turn">Player 1 Hand:</h5>
<div class="player player-1"></div>
<div class="player-1-pool"></div>

<h5>Player 2 Hand:</h5>
<div class="player player-2"></div>
<div class="player-2-pool"></div>

CSS

.turn {
  color: red;
}

JavaScript

function Card(value, name, suit){
	this.value = value;
	this.name = name;
	this.suit = suit;
}
function Deck(){
	this.names = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
	this.suits = ['Hearts','Diamonds','Spades','Clubs'];
	var cards = [];
    
  for( var s = 0; s < this.suits.length; s++ ) {
      for( var n = 0; n < this.names.length; n++ ) {
          cards.push( new Card( n+1, this.names[n], this.suits[s] ) );
      }
  }

  return cards;
}

var myDeck = new Deck();
var turn = 1;
var $remaining = $('.remaining-cards')
var $player1 = $('.player-1');
var $player2 = $('.player-2');
var player1 = [];
var player2 = [];

function play(config){
	myDeck = myDeck.sort(function() { return 0.5 - Math.random() })
  console.log(myDeck);
  
  for(var i = 0; i <= 6; i++){
  	player1.push(myDeck.pop());
    player2.push(myDeck.pop());
  }
  
  renderHand(player1, $player1);
  renderHand(player2, $player2);
  renderRemaining(myDeck, $remaining);
  
  addEventHandlers();
}

function addEventHandlers(){
	$('.player').on('click', 'span', function(e){
  	var $this = $(this);
    var requestRank = $this.text().charAt(0);
    var spliced;
    
    if(turn === 1){
    	var player2cards = player2.filter(function(card){
      	return card.name.charAt(0) === requestRank;
      });
      if(player2cards.length > 0){
      	player2cards.map(function(card, i){
        	if(player2.indexOf(card) > -1){
          	var startIndex = player2.indexOf(card);
          	spliced = player2.splice(startIndex, 1);
            player1.push(spliced[0]); // [0] to access spliced's props
          }
        });
      } else {
      	// if players 2 doesn't have requested rank, draw card
      	player1.push(myDeck.pop());
      }
      
      //console.log(player1);
      renderHand(player1, $player1);
  		renderHand(player2, $player2);
      renderRemaining(myDeck, $remaining);
    }
    if(turn === 2){}
  });
}

function renderHand(playerHand, $player){
	var markup = "";
 ...