JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<div id="authorize-button" style="background:greenyellow">
  To log in, just click anywhere in the green box.<br>
  You need to log in with your Google Account to be able to save your own strategies.<br>
  You need to log in because the strategies are saved in a Google Spreadsheet and the only way to access the spreadsheet is to be authorized with a Google Account.<br>
  The only thing I need authorization for is to get access to Google Spreadsheets, even though I'm only changing a spreadsheet of my own.<br>
  Since this isn't a registered app, Google will warn you that this might not be a trusted app. I, however, don't use any information whatsoever about your Google Account.
</div>
<div id="signout-button" style="background:orangered">
You're logged in. Click here to sign out. (pretty useless but just because why not...)
</div>
<table>
  <tr>
    <td>Username:</td>
    <td><input type="text" id="inUserName"/></td>
    <td>(Optional) Used if you upload your strategy</td>
  </tr>
  <tr>
    <td>Rows:</td>
    <td><input type="number" id="inRows" value="12"/></td>
    <td>The number of patches in the vertical direction</td>
  </tr>
  <tr>
    <td>Columns:</td>
    <td><input type="number" id="inCols" value="12"/></td>
    <td>The number of patches in the horizontal direction</td>
  </tr>
  <tr>
    <td>Strategy:</td>
    <td><input type="text" id="inStrategy"/></td>
    <td>(Optional) A strategy will tell you which patch to click next</td>
  </tr>
  <tr>
    <td>
      <button onclick="getStrategies()">
        Get Strategies
      </button>
    </td>
    <td colspan="2">
      <div id="strategyZone">
      
      </div>
    </td>
  </tr>
</table>

<div class="divBtn" id="divMakeField" onclick="init();">Make<br>Field</div>
<div class="divBtn" id="divMakeStrategy" onclick="makeStrategy()">Make<br>Strategy</div>
<div class="divBtn" id="divUploadStrategy">Upload<br>Strategy</div><br><br>
<div id="field"></div><br>
<div id="btns" style="visibility: hidden">
  <button...

CSS

html, body, button, input {
  font-family: Verdana,sans-serif;
}

table, tr, td {
  padding: 3px;
}

.divBtn {
  display: inline-block;
  padding-top: 70px;
  line-height: 25px;
  width: 120px;
  text-align:center;
  background-size:100%;
  color: #ffff00;
  font-weight: bold;
  font-family: Verdana,sans-serif;
}
#divMakeField {
  background-image: url("https://staticpokeheroes.com/img/tall_grass/2.png");
}
#divMakeStrategy {
  background-image: url("https://staticpokeheroes.com/img/tall_grass/1.png");
}
#divUploadStrategy {
  background-image: url("https://staticpokeheroes.com/img/tall_grass/3.png");
}

JavaScript

let buttons = [];
let clickedObj;
let bc = [];
let buttonsLeft = [];
let strategy;
let rows;
let cols;
let bMakeStrategy = false;
let bTestStrategy = false;
let path = [];
let tries = [];
let er = 0;
let ec = 0;
let count = 0;
let depth = 1;
let maxDepth = 0;

function init() {
	bMakeStrategy = false;
  bTestStrategy = false;
	rows = $("#inRows").val();
  cols = $("#inCols").val();
	let strStrat = $("#inStrategy").val();
	if (strStrat.length > 0) {
  	let strMax = (Math.max(rows, cols) - 1);
    let strOver = Math.max(rows, cols);
		if (strStrat.search(strMax) >= 0 && strStrat.search(strOver) == -1) {
  		strategy = (new Function("return " + strStrat + ";")());
    } else {
    	alert("strategy invalid");
    }
  }
  makeField();
  if (strategy) {
    setNext(strategy[0]);
  }
}

function makeField() {
  $("#field").html("");
  buttons = [];
  bc = [];
  for (let r = 0; r < rows; r++) {
  	let row = $("<div></div>");
    buttons.push([]);
    bc.push([]);
  	for (let c = 0; c < cols; c++) {
    	let btn = $("<img src='https://staticpokeheroes.com/img/sitewide/navigation/icons/tallgrass.png' onclick='clickBtn(this)' r='" + r + "' c='" + c + "' hue='0'/>");
      buttons[r].push(btn);
      bc[r].push(0);
    	row.append(btn);
    }
    $("#field").append(row);
  }
}

function clickBtn(obj) {
	if (clickedObj != null) {
  	$(clickedObj).css("filter", "hue-rotate(" + $(clickedObj).attr("hue") + "rad)");
    if (bMakeStrategy) {
    	if (clickedObj == obj) {
      	addStrat();
      }
    }
  }
	clickedObj = obj;
  $(obj).css("filter", "hue-rotate(2rad)");
  if (!bMakeStrategy && !bTestStrategy) {
  	$("#btns").css("visibility", "visible");
  }
}

function addStrat() {
	count = 0;
	let r = parseInt($(clickedObj).attr("r"));
  let c = parseInt($(clickedObj).attr("c"));
  addToStrategy(r, c);
  clickedObj = null;
}

function clickClose() {
	buttonsLeft = [];
	let r = parseInt($(clickedObj).attr("r"));
  let c = parseInt($(clickedObj).attr("c"));
  setClose(r, c, 0);
 ...