JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Pathfinder Puzzle Game</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="generatePuzzle()">
	<div class="container">
		<h1>Pathfinder Puzzle Game</h1>
		<div class="board">
			<table id="grid">
			</table>
			<div id="regions"></div>
		</div>
		<button id="check-btn" onclick="checkSolution()">Check</button>
		<button id="newgame-btn" onclick="generatePuzzle()">New Game</button>
		<p id="message"></p>
	</div>

	<script src="script.js"></script>
</body>
</html>

CSS

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}

.container {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}

h1 {
	font-size: 3em;
	margin-bottom: 0;
}

.board {
	display: inline-block;
	margin-top: 20px;
	text-align: center;
}

#grid {
	border-collapse: collapse;
	margin: 0 auto;
}

#grid td {
	height: 50px;
	width: 50px;
	border: 1px solid black;
	text-align: center;
	font-size: 1.5em;
	cursor: pointer;
}

#grid td.selected {
	background-color: #c7e8f3;
}

#regions {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.region {
	height: 50px;
	width: 50px;
	margin: 5px;
	border: 1px solid black;
	background-color: #c7e8f3;
}

button {
	display: inline-block;
	margin: 10px;
	padding: 10px 20px;
	font-size: 1.2em;
	background-color: #c7e8f3;
	border: none;
	cursor: pointer;
}

button:hover {
	background-color: #a3d3e3;
}

#message {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 10px;
}

JavaScript

// Generate the puzzle board and regions
function generatePuzzle() {
  let size = 5; // Change this to adjust the size of the grid
  let board = new Array(size);
  for (let i = 0; i < size; i++) {
    board[i] = new Array(size);
    for (let j = 0; j < size; j++) {
      board[i][j] = 0;
    }
  }
  let regions = generateRegions(size);

  // Generate a path that connects all of the regions
  let path = generatePath(regions, size);

  // Fill in the grid with the numbers from the path
  let index = 0;
  for (let i = 0; i < size; i++) {
    for (let j = 0; j < size; j++) {
      if (path[i][j] !== 0) {
        board[i][j] = path[i][j];
      } else {
        board[i][j] = "";
      }
    }
  }

  // Display the board and regions on the page
  let grid = document.getElementById("grid");
  let regionsDiv = document.getElementById("regions");
  grid.innerHTML = "";
  regionsDiv.innerHTML = "";
  for (let i = 0; i < size; i++) {
    let row = document.createElement("tr");
    for (let j = 0; j < size; j++) {
      let cell = document.createElement("td");
      cell.setAttribute("onclick", "selectCell(this)");
      cell.setAttribute("data-row", i);
      cell.setAttribute("data-col", j);
      cell.innerHTML = board[i][j];
      row.appendChild(cell);
    }
    grid.appendChild(row);
  }
  for (let i = 0; i < regions.length; i++) {
    let regionDiv = document.createElement("div");
    regionDiv.setAttribute("class", "region");
    regionDiv.innerHTML = regions[i].value;
    regionsDiv.appendChild(regionDiv);
  }

  // Clear any selected cells and messages
  let selected = document.querySelectorAll(".selected");
  for (let i = 0; i < selected.length; i++) {
    selected[i].classList.remove("selected");
  }
  let message = document.getElementById("message");
  message.innerHTML = "";
}

// Select a cell on the grid
function selectCell(cell) {
  let selected = document.querySelectorAll(".selected");
  for (let i = 0; i < selected.length; i++) {
   ...