JSFiddle - React, Tailwind, and code Playground

by djwelsh

HTML

<div id="xwdgrid">
</div>

CSS

#xwdgrid {
  display: grid;
  grid-template-columns: repeat(13, 32px);
  
}

.grid-item {
  position: relative;
}
.word-number {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 12px;
  margin-left: 2px;
  user-select: none;
}

input[type="text"] {
  margin: 0;
  padding: 0px;
  width: 32px;
  height: 32px;
  border: 1px solid black;
  line-height: 32px;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
}
input[type="text"]:focus {
  border: 1px solid black;
  outline: none;
  background-color: lavender;
}
input[type="text"].blackbox {
  background-color: black;
}
.selectedWord {
  background-color: beige;
}

JavaScript

const ROW_COUNT = 13;
const COLUMN_COUNT = 13;


window.onload = (event) => {

	let xwdgrid = document.getElementById('xwdgrid');
  
  let grid = GRIDS[Math.floor(Math.random() * GRIDS.length)];
  
  let words = {};
  
  let i = 0;
	
  for (let r = 0; r < grid.length; r++) {
  	let cols = grid[r].split('');
  	for (let c = 0; c < cols.length; c++) {
    	let inputDiv = document.createElement('div');
      	inputDiv.className = 'grid-item';
      
      
      let num = '';
      let upOne = r - 1;
      let leftOne = c - 1;
      let downOne = r + 1;
      let rightOne = c + 1;
      
      let upIsNull = false;
      let leftIsNull = false;
      let downIsOpen = false;
      let rightIsOpen = false;
      
      // If the square above is blocked or off the map
      if (!(grid[upOne])) {
      	upIsNull = true;
      }
      else {
      	if (grid[upOne][c] === '.') {
        	upIsNull = true;
        }
      }
      
      // If the square below is open
      if ((grid[downOne])) {
      	if (grid[downOne][c] === '?') {
        	downIsOpen = true;
        }
      }
      
      
      // If the square to the left is blocked or off the map
      if (!(grid[r][leftOne])) {
      	leftIsNull = true;
      }
      else {
      	if (grid[r][leftOne] === '.') {
        	leftIsNull  = true;
        }
      }
      
      // If the square to the right is open
      if ((grid[r][rightOne])) {
      	if (grid[r][rightOne] === '?') {
        	rightIsOpen  = true;
        }
      }
      
      if (
      	(leftIsNull && rightIsOpen && upIsNull) ||
      	(leftIsNull && rightIsOpen && !downIsOpen) ||
      	(leftIsNull && rightIsOpen && !upIsNull && downIsOpen) ||
      	(upIsNull && downIsOpen && leftIsNull) ||
      	(upIsNull && downIsOpen && !rightIsOpen)  ||
      	(upIsNull && downIsOpen && !leftIsNull && rightIsOpen) 
      ) {
      	let span = document.createElement('span');
          span.className = 'word-number';
          span.innerHTML = i;i++;
       ...