JSFiddle - React, Tailwind, and code Playground

by jaygiri

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-cotroller="DeckCtrl">
    <ul>
    <li ng-repeat="card in deck.cards">
      {{card.type}} {{card.number}}
    </li>
  </ul>
  </div>

JavaScript

/*
 * Card
 * - Diamonds ♦, Hearts ♥, Clubs ♣ or Spades ♠
 * - Ace, 2 to 10, Jack, Queen and King
 * - Two states: facing up/down
 * 
 * fn faceUp()
 * fn faceDown()
 * UI: http://imgur.com/a/qW2Bl
 */ 
 
/*
 * Deck
 * - 13 x 4 cards
 *
 * fn deal()
 * fn shuffle()
 */
function Suit(type, symbol, color) {
	return {type: type, symbol: symbol, color: color};
}

function Card(number, suit) {
	this.number = number;
  this.suit = suit;
  this.visible = false;
	return this;
}
Card.prototype.faceUp = function(){
	this.visible = true;
}
Card.prototype.faceDown = function(){
	this.visible = false;
}
Card.suites = [
	new Suit("diamonds", "♦", "red"),
  new Suit("hearts", "♥", "red"),
  new Suit("clubs", "♣", "black"),
  new Suit("spades", "♠", "black")
]; //Diamonds, Hearts, Clubs or Spades

function Deck() {
  this.cards = [];
  var init = function(){
    this.cards = [];
    for(var i = 0, l = Card.suites.length; i < l; i++){
      for(var j = 1; j <= 13; j++) {
        this.cards.push(new Card(j, Card.suites[i].type));
      }
    }
	}
  init();
  return this;
}

var app = angular.module('myApp', []);
app.controller('DeckCtrl', function($scope){
  $scope.deck = new Deck();
  console.log($scope.deck.cards);
});