JSFiddle - React, Tailwind, and code Playground

by mharen

HTML

<button id='run'>Run a game</button>
<label><input type='checkbox' id='all-win'/>Play out until everyone "wins"</label>
<div id='results'>
    <hr/>
    <h2>Results:</h2>
    <p>Moves per game (average: <span id='average'>0</span>)</p>
    <table>
        <tr><th>Daddy</th><th>Thing 1</th><th>Total</th></tr>
    </table>
</div>

CSS

#results { display:none; }

JavaScript

// for stats
var gamesPlayed = 0;
var totalMoves = 0;

// run this when the button is clicked
$('#run').click(function(){
    
    var options = { 
        // see if the option to run until everyone wins is checked
        doRunUntilEveryoneWins: $('#all-win').is(':checked')
    };

    // configure two players
    var players = [
        // ladies first
        { name: 'Thing 1', isLosingATurn: false, 
          position: -1, isWinner: false, moves: 0 },
        { name: 'Michael', isLosingATurn: false, 
          position: -1, isWinner: false, moves: 0 }
    ];

    // call "DoGame" to play an entire game, passing 
    // in the players array
    DoGame(options, players);
    
    // update stats
    gamesPlayed++;
    totalMoves += players[0].moves + players[1].moves;
    $('#average').text(Math.ceil(totalMoves/gamesPlayed));
    
    // append another row to the table
    $('#results').show()
        .find('table').append( 
            $('<tr/>').append( $('<td/>').text(players[0].moves) )
                      .append( $('<td/>').text(players[1].moves) )
                      .append( $('<td/>').text(players[0].moves 
                                               + players[1].moves) )
            );
});
    
function DoGame(options, players){
    // initialize the board
    var board = MakeBoard();

    // initialize the deck
    var cards = MakeDeck();

    // call "DoGameLoop" (pass in the board and deck) 
    // until it returns false, which indicates the game is over
    while(DoGameLoop(options, players, board, cards));
}

// return false when the game is over
function DoGameLoop(options, players, board, cards){
    
    // we will set this to true if someone is playing...
    var IsSomeoneStillPlaying = false; 
    
    // for each player: DoPlayerLoop
    for(var i = 0; i < players.length; ++i){
        var player = players[i];
        
        // skip this player if they've won already
        // or made 10000 moves (that would be too many)
       ...