JSFiddle - React, Tailwind, and code Playground

by Will McKinley

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<div class="gameboard"></div>

CSS

body { text-align: center; }
.square { 
  height: 60px; 
  width: 60px; 
  font-size: 2em;
}
.disabled { background-color: #d3d3d3; }
.player { margin: 15px; }
.symbol { 
  margin-left: 10px; 
  font-size: 1.5em;
  font-weight: bold;
}
.win { background-color: #23B7E5; }
.winner { 
  margin-bottom: 20px;
  padding: 0 20px;
}

JavaScript

var game = function( options ){
      options = options || [];
      var target = options.target || '.gameboard',
        size = options.size || [ 3, 3 ],
        players = options.players || 2,
        toWin = options.toWin || 3,
        symbols = [ 'o', 'x', '+', '!' ],
        current,
        grid,
        setup = function ( ) {
          $(target).empty();
          current = 0;
          grid = [];
          _.each(_.range(size[0]), function(r) {
            var row = $('<div>')
              .addClass('row');
            grid.push([]),
            _.each(_.range(size[1]), function(c) {
              grid[r].push(undefined),
              row.append( 
                $('<button>')
                  .addClass('square open')
                  .attr('data-pos',r + ',' + c)
                  .html('&nbsp;')
              );
            })
            $(target).append(row );
          });
            $(target).append(
              $('<div>')
                .addClass('player')
                .append(
                  $('<span>')
                    .html('Player')
                )
                .append(
                  $('<span>')
                    .addClass('symbol')
                    .html(symbols[0])
                )
            );
          $('.square').click( function(){ 
            if (!($(this).hasClass('disabled'))) makeMove(this) 
          });
        },
        makeMove = function (btn) {
          var btn = $(btn)
            .addClass('disabled')
            .html(symbols[current]),
            pos = btn.attr('data-pos').split(',');
          grid[pos[0]][pos[1]] = current;
          checkBoard();
        },
        checkBoard = function () {
          var winners = [];
          checkArray()
          winners = checkArray(grid,winners); // check rows
          winners = checkArray(_.zip.apply(_, grid) ,winners,'vert'); // check columns
          var diag = [],
              diagReverse = [],
              i = 0,
              di = 0,
...