JSFiddle - React, Tailwind, and code Playground

by fainz777

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Плитки Майя</title>
    <style type="text/css">
        canvas {
            position: absolute;
        }
        
        #maya_bg {
            border: 2px solid #000;
        }
        
        #maya_board, #maya_game {
            top: 75px;
            left: 25px;
        }
    </style>
</head>
<body>
    <div style="position: relative; height: 500px;">
        <canvas id="maya_bg" width="650" height="500"></canvas>
        <canvas id="maya_settings" width="650" height="500"></canvas>
        <canvas id="maya_board" width="350" height="500"></canvas>
        <canvas id="maya_game" width="350" height="500"></canvas>
    </div>
</body>
<script type="text/javascript" src="maya2.js"></script>
</html>

JavaScript

/* Мини-функция, возвращающая элемент по его id */
function $id(id) {
    return document.querySelector(id);
}

/* Копирование простого двумероного массива */
function copyArray(array) {
    var newArray = [],
    max = array.length;
    for (var i = 0; i < max; i++) {
        newArray[i] = [];
        for (var j = 0; j < array[i].length; j++) {
             newArray[i][j] = array[i][j];
        } 
    }
    return newArray;
}

/* Параметры игры и игрового поля */
var gameSettings = {
    /* 
        Настройки игры:
        
        bgColor - цвет фона
        boardColor - цвет доски
        bgChip1 - цвет фишки 1
        bgChip2 - цвет фишки 2
        bgChip3 - цвет фишки 3
        gameType - вид игры
    */
};

/* Объект игры */
var Maya = {
    n: 50, // размер ячейки
        
    games: {
        /* Виды игр, положение фишек и вид доски
        
            startPosition - начальное положение фишек
            currentPosition - положение фишек во время игры
            endPosition - выигрышная позиция
            
            0 - пустая ячейка
            1 - белая фишка
            2 - серая фишка
            3 - черная фишка
            
            drowBoard - функция рисования доски
        */
        classic: {
            startPosition: [
                [ ,  ,  , 1,  ,  ,  ,],
                [ ,  , 0, 1, 0,  ,  ,],
                [ ,  ,  , 1,  ,  ,  ,],
                [2, 2, 2, 3, 2, 2, 2 ],
                [ ,  ,  , 1,  ,  ,  ,],
                [ ,  , 0, 1, 0,  ,  ,],
                [ ,  ,  , 1,  ,  ,  ,]
            ],
            
            currentPosition: [
                [ ,  ,  , 1,  ,  ,  ,],
                [ ,  , 0, 1, 0,  ,  ,],
                [ ,  ,  , 1,  ,  ,  ,],
                [2, 2, 2, 3, 2, 2, 2 ],
                [ ,  ,  , 1,  ,  ,  ,],
                [ ,  , 0, 1, 0,  ,  ,],
                [ ,  ,  , 1,  ,  ,  ,]
            ],
            
            endPosition: [
                [ ,  ,  , 2,  ,  ,  ,],
               ...