JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>22 хода</title>
<style>
h1 { 
  text-align: center; 
}
#main {
  width: 400px;
  margin: auto;
}
#msg {
  float: right; 
  text-align: right;
  background: #333;
  color: #fff;
}
</style>
<script>
window.onload = function() {

  var gBoard   = 400;      // Ширина и высота поля
  var gR       = 26;       // Радиус поля под фишкой
  var gRP      = 17;       // Радиус фишек
  var gSCircle = 2;        // Толщина линии в окружностях
  var gRDot    = 4;        // Радиус точки
  var gField   = '#fff';   // Цвет заливки поля под фишкой
  var gBlack   = '#000';   // Цвет чёрных фишек
  var gWhite   = '#ccc';   // Цвет светлых фишек
  var gDot     = '#666';   // Цвет точек
  var gLine    = '#ccc';   // Цвет линий между полями
  var gSel     = '#f00';   // Цвет линии при выделении фишки
  var gSLine   = 1;        // Толщина линии между полей
  var gGrid    = (gBoard - 2*gR)/4;  // Шаг сетки 
  
  // Начальная позиция фишек
  // 0 - нет фишки, 1 - чёрная, 2 - светлая, 3 - точка
  var boardInit = [[0,0,1,2,2], [0,0,2,1,1], [1,2,3,2,3], [1,2,1,0,0], [1,2,2,0,0]];
  var boardCur  = [[0,0,1,2,2], [0,0,2,1,1], [1,2,3,2,3], [1,2,1,0,0], [1,2,2,0,0]];

  // Конечная позиция для победы
  var boardOver = [[0,0,1,1,1], [0,0,1,1,1], [2,2,3,1,3], [2,2,2,0,0], [2,2,2,0,0]];
  var moveCount;  // Количество ходов
  var isSelect;   // Фишка не выбрана
  var g;          // Холст
  
  var canvas = document.getElementById('game');
  if (canvas.getContext) {
    g = canvas.getContext('2d');
    newGame();
    window.onclick = clickOnBoard;
  }
  

  // Новая игра
  function newGame() {
    moveCount = 0;
    isSelect = 0;
    drawBoard(boardInit); // Рисуем доску
    // Восстанавливаем положение фишек
    for (i=0;i<5;i++) 
      for (j=0;j<5;j++) 
        boardCur[i][j] = boardInit[i][j];
    
    document.getElementById("move").innerHTML = moveCount;
  }
  
  // Игра завершена
  function gameOver(win) {
    if (win)...