JSFiddle - React, Tailwind, and code Playground

by Slavik_ok

HTML

<div id="field">

</div>

CSS

#field {
    /*text-align: center;*/
    border: 1px solid black;
    display: inline-block;
}

.cell {
    width: 50px;
    height: 50px;
    display: inline-block;
}

.row:nth-child(odd) .cell:nth-child(odd),
.row:nth-child(even) .cell:nth-child(even) {
    background-color: #000;
}

.row {
    display: block;
    height: 50px;
    
}

JavaScript

$(function() {
    for (var i=0; i<8; i++) {
        var $row=$("<div class='row'></div>");
        for (var j=0; j<8; j++)
            $row.append("<div class='cell'></div>");
        $("#field").append($row);
    }
});

function getVar(str) { 
    return sessionStorage.getItem(str); 
} 
  
function setVar(str, value) { 
    sessionStorage.setItem(str, value); 
} 
  
function isset(str) { 
    return (getVar(str) !== null); 
} 

//engine 
var FIELD = []; 
var LENGTH = 8; 
var CURRENT = 1; 
var CLICKED = 'undefined'; 
var NOFIRST = false; 
var DAMAGE = 25; 
var POINTS = []; 
PLAYER1 = 'player 1'; 
PLAYER2 = 'player 2'; 
  
//get variables from settings 
LENGTH = (isset('length')) ? Number(getVar('length')) : LENGTH; 
DAMAGE = (isset('damage')) ? Number(getVar('damage')) : DAMAGE; 
HP = (isset('hp')) ? Number(getVar('hp')) : HP; 
POINTS_LIMIT = (isset('points_limit')) ? Number(getVar('points_limit')) : POINTS_LIMIT; 
PLAYER1 = (isset('player1')) ? getVar('player1') : PLAYER1; 
PLAYER2 = (isset('player2')) ? getVar('player2') : PLAYER2; 

function startNewGame() {     
    //pustoj massiv 
    for (var i = 0; i < LENGTH; i++) { 
        FIELD[i] = []; 
        for (var j = 0; j < LENGTH; j++) 
            FIELD[i][j] = false; 
    } 
    var cell = {}; 
    //zapolnjaem peshkami 
    for (var j = 0; j < 3; j++) 
        for (var i = 0; i < LENGTH; i++) { 
            FIELD[i][j] = FIELD[i][LENGTH - 1 - j] = 
                { 
                    player: 1, 
                    hits: 0, 
                    direction: 'up', 
                    toeat: false, 
                    hp: HP, 
                }; 
  
            if ((i + j) % 2 == 0) { 
                FIELD[i][j].player = 1; 
                FIELD[i][j].direction = 'up'; 
            } 
            else FIELD[i][j] = false; 
  
            if ((LENGTH - 1 - j + i) % 2 == 0) { 
                FIELD[i][LENGTH - 1 - j].player = 2; 
                FIELD[i][LENGTH - 1 - j].direction = 'down'; 
            }...