JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<button id="button-new-game" data-bind="click: newGame" >New Game</button>
<button id="button-mulligan" data-bind="click: mulligan" >Mulligan</button>
<button id="button-draw" data-bind="click: draw" >Draw a Card</button>

<hr/>
<!-- This is the old, working version -->
<div id="hand" data-bind="foreach: hand">
    <div class="cardInHand">
        <img height="150" data-bind="attr: { src: imageUrl, alt: name }" />
    </div>
</div>

<hr/>
<!-- This is the new, non-working version -->
<div id="hand2" data-bind="foreach: hand2">
    <div class="cardInHand">
        <img height="150" data-bind="attr: { src: imageUrl, alt: name }" />
    </div>
</div>

JavaScript

var imageUrlTemplate = "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=XXX&type=card";

// need some local player cards to show ...
var localPlayer = function () {
    var self = this;
    
    // old working version
        self.deck = [
            { id: 1, name: "Plains", multiverseId: 73963, imageUrl: imageUrlTemplate.replace('XXX', '73963') },
            { id: 4, name: "Forest", multiverseId: 73946, imageUrl: imageUrlTemplate.replace('XXX', '73946') },
            { id: 7, name: "Serra Angel", multiverseId: 370602, imageUrl: imageUrlTemplate.replace('XXX', '370602') },
            { id: 9, name: "Holy Strength", multiverseId: 205226, imageUrl: imageUrlTemplate.replace('XXX', '205226') },
            { id: 10, name: "Llanowar Elves", multiverseId: 221892, imageUrl: imageUrlTemplate.replace('XXX', '221892') },
            { id: 10, name: "Hopeful Eidolon", multiverseId: 373616, imageUrl: imageUrlTemplate.replace('XXX', '373616') },
            { id: 10, name: "Skylasher", multiverseId: 369083, imageUrl: imageUrlTemplate.replace('XXX', '369083') }
        ];
        
        self.deck2 = [
            new card(1, "Plains", 207937),
            new card(2, "Plains", 249732),
            new card(3, "Plains", 269637),
            new card(4, "Forest", 376343),
            new card(5, "Forest", 174928),
            new card(6, "Voice of Resurgence", 368951),
            new card(7, "Unflinching Courage", 369074),
            new card(8, "Kalonian Hydra", 370766),
            new card(9, "Elspeth, Sun's Champion", 373649),
            new card(10, "Centaur Battlemaster", 373594),
            new card(11, "Hopeful Eidolon", 373616),
            new card(12, "Skylasher", 369083),
            new card(13, "Giant Growth", 289213),
            new card(14, "Bow of Nylea", 373603)
        ];
        
        self.library = ko.observableArray();
        self.library2 = ko.observableArray();
        self.hand = ko.observableArray();
        self.hand2 =...