JSFiddle - React, Tailwind, and code Playground

by Svetlana Kovba

HTML

<script src="http://premium-api.com/jscourse/rb_plain.js"></script>
<div>
    Turn: <span id="whoseTurn"></span>
    Game score: <span id="score"></span>
</div>

CSS

span#whoseTurn {
    width: 100px;
    display: inline-block;
}

JavaScript

// global namespace
var Reversi = Reversi || {
    EMPTY_TYPE: 'e',
    BLACK_TYPE: 'b',
    WHITE_TYPE: 'w',
    BOARD_SIZE: 8
};

Reversi.Game = {
    blackPlayer: "John",
    whitePlayer: "James",
    isMoveBlack: true,
    start: function() {
        // catch user moves
        Reversi.Board.cbClick = this.moveCallback;
        // draw board start position
        Reversi.Board.init();
        Reversi.Board.drawBoard();
        Reversi.Board.drawAllDisks();
        this.updateIndicators();
    },
    getIndexesColRow: function(index) {
        return {
            iCol: index % Reversi.BOARD_SIZE,
            iRow: Math.floor(index / Reversi.BOARD_SIZE)
        }
    },
    findDiskToFlip: function(moveIndex, type) {
        var flipDisks = [];
        var startPosition = this.getIndexesColRow(moveIndex);
        // find to left, to right, to top, to bottom, to left-top, to right-top, to left-bottom and to right-bottom
        for (var h=-1; h<=1; h++) {
            for (var v=-1; v<=1; v++) {
                if ( h == 0 && v == 0 ) {
                    continue;
                }
                var iCol = startPosition.iCol;
                var iRow = startPosition.iRow;
                //console.log(startPosition);
                var tryNext = true;
                var lineFlips = [];
                while ( tryNext ) {
                    iCol += h;
                    iRow += v;
                    // check limits
                    if ( iCol < 0 || iCol > Reversi.BOARD_SIZE - 1
                        || iRow < 0 || iRow > Reversi.BOARD_SIZE - 1 ) {
                        break;
                    }
                    var index = iRow * Reversi.BOARD_SIZE + iCol;
                    var cell = Reversi.Board.getCell(index);
                    if ( cell.isOpposite(type) ) {
                        lineFlips.push(cell);
                    } else {
                        if ( !cell.isEmpty() && lineFlips.length > 0 ) {
                           ...