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;
}
.transp {
  -moz-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  -webkit-transition: opacity 1s ease-in;
}

</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 = 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 move = 0; // Количество ходов
  var isSelect = 0; // Фишка не выбрана
  var cell = {x:0,y:0}; // Координаты выбранной фишки
  var cell2 = Array; // Координаты пустого поля для хода
  
  var canvas = document.getElementById('game');
  if (canvas.getContext) {
    var game = canvas.getContext('2d');
    drawBoard(game, boardInit);
    window.onclick = clickOnBoard;

  }

  // Рисование поля
  function drawBoard(g, pos) {
  
    g.clearRect(0, 0, gBoard, gBoard); // Очищаем всё
    g.fillStyle = gField;

    for (i=0;i<3;i++) {
      // Рисуем горизонтальные линии
      g.strokeStyle = gLine;
     ...