JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

CSS

table, th, td {
    border: 3px solid #ccc;
    border-collapse:collapse
}
svg {
    display: block;
}
td {
    box-sizing: border-box;
    width: 33px;
    height: 33px;
    padding: 0px;
}
.arrow_to_place_container {
    display: inline-block;
    border: 3px solid #aaa;
}
.win_position {
    background-color: blue;
}
.player_1 {
    background-color: green;
}
.player_2 {
    background-color: purple;
}
.player_3 {
    background-color: yellow;
}

JavaScript

var UP = 0;
var RIGHT = 45;
var LEFT = 315;
function print(stuff) {
    console.log(stuff);
}
//arrow should technically be a part of Display, but it's just too cumbersome to put in with the rest of the code.
function arrow(direction) {
    return "<span class='" + direction + "'><svg 'version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30' height='30' viewBox='0 0 32 32' ><g transform='rotate(" + direction + " 15 15)'>	<path d='M27.414 12.586l-10-10c-0.781-0.781-2.047-0.781-2.828 0l-10 10c-0.781 0.781-0.781 2.047 0 2.828 0.781 0.781 2.047 0.781 2.828 0l6.586-6.586v19.172c0 1.105 0.895 2 2 2s2-0.895 2-2v-19.172l6.586 6.586c0.39 0.39 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586c0.781-0.781 0.781-2.047 0-2.828z' fill='#000000' / ></g></svg></span>";
}

function Cell(row, column) {
    this.row = row;
    this.column = column;
}

function Board(rowCount, columnCount) {
    //Directions
    var directions = {};
    directions[UP]    = { columnDelta :  0, next : LEFT };
    directions[LEFT]  = { columnDelta : -1, next : RIGHT};
    directions[RIGHT] = { columnDelta : +1, next : UP   };  
    //Board
    this.board = [];
    this.rowCount = rowCount;
    this.columnCount = columnCount;
    this.target = new Cell( 0 , Math.floor((Math.random() * columnCount)));
    this.direction = UP;
    for (var row_index = 0; row_index < rowCount; row_index++) {
        var row = [];
        for (var column_index = 0; column_index < columnCount; column_index++) {
            row.push(new Cell(row_index, column_index));
        }
        this.board.push(row);
    }
    this.getCell = function (row, column) {
        return this.board[row][column];
    };
    this.getTarget = function () {
        return this.target;
    };
    this.onTarget = function (row, column) {
        return row == this.target.row && column == this.target.column;
    };
    this.get_direction = function () {
        return this.direction;
    };
   ...