Logic puzzle simplifier

Heavy work-in-progress.

by Frungi

HTML

<pre id="output" style="font-family:serif"></pre>

CSS

table {border-collapse: collapse}
pre {white-space: pre-wrap; word-wrap: break-word}
td{padding:0;border:1px solid;}

.innergrid {border-style:hidden;}
.innergrid td {border: 1px solid darkgrey;height:4px;width:4px;}

JavaScript

var nameList = `

`;
var cluesStr = `

`;

const comparators = "spicier|before|after|above|below|earlier|later|younger|older|bigger|longer|shorter|short|farther|taller|larger|smaller|more|less|fewer|deeper|higher|lower|heavier|lighter|quieter|louder|closer|farther|older|newer|behind|ahead";

if (nameList.length == 2 || cluesStr.length == 2) {
document.getElementById('output').innerHTML = `For use with Puzzle Baron’s Logic Puzzles. Copy the headings across the top and down the side of the first grid, paste it into the blank line in <code>nameList</code>; and copy the list of clues into <code>cluesStr</code>. The result will be super terse clues based on grid position, such as “13 not 04.”

The first digit identifies the category as shown below. The second digit tells you which column or row in that set.
<table>
	<tr>
  	<th/>
  	<th>0</th>
    <th>3</th>
    <th>2</th>
  </tr>
  <tr>
  	<th>1</th>
    <td><table class="innergrid"><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr></table></td>
    <td><table class="innergrid"><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr></table></td>
    <td><table class="innergrid"><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr><tr><td/><td/><td/><td/><td/><td/><td/></tr></table></td>
  </tr>
  <tr>
 ...