JSFiddle - React, Tailwind, and code Playground

by Pavel Chekov

HTML

<body>
  <span style='font-weight:bold' id='hovered_cell'></span>
  <br/>
  <div style='float:left' id='board'></div>
  <div style='margin-left:32px;float:left'>
    set piece:
    <br/>
    <input type="radio" id="bishop" name="piece" value="b" onclick="set_piece_type(this.value);" />
    <label for="bishop">Bishop</label>
    <span id="bishop_pos"></span>
    <br/>

    <input type='radio' id="target" name="piece" value="t" onclick="set_piece_type(this.value);" />
    <label for="target">Target</label>
    <span id="target_pos"></span>
    <br/>

    <input type='radio' id="obstacle" name="piece" value="o" onclick="set_piece_type(this.value);" />
    <label for="obstacle">Obstacle</label>

  </div>
  <div style='clear:both'></div>
  <br/>
  <br/>
  <button onclick="find_path();">Find shortest path</button>
  <button onclick="reset_all();">Reset</button>
  <br/>
  <br/>
  <textarea id="result"></textarea>
</body>

CSS

html,
body {
  background: white;
  width: 100%;
  height: 100%;
  font-family: Helvetica, Verdana, Tahoma, Arial;
}

body {
  padding: 10px;
}

table tr td {
  width: 24px;
  height: 24px;
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
  font-weight: normal;
  text-align: center;
}

button {
  font-size: 105%;
  border: 1px solid #555;
  background: #ccc;
  padding: 8px;
}

.odd {
  background: #ccc;
}

.field {
  background: #555;
  color: white;
  font-size: 80%;
  font-weight: normal;
}

.piece_b {
  font-weight: bold;
  background: #c5d8b1;
}

.piece_b:before {
  content: "B"
}

.piece_o {
  background: #37a7fc;
}

.piece_t {
  font-weight: bold;
  background: #ffb2a3;
}

.piece_t:before {
  content: "T"
}

.bordered {
  /*  border: 2px solid; */
  background-color: #f79071;
}

#board {
  border-left: 1px solid #555;
  border-top: 1px solid #555;
  display: table-cell;
}

table tr td:hover {
  border-color: red;
}

input[type="radio"] {
  margin-left: 16px;
}

textarea {
  border: none;
  background: white;
  width: 100%;
  height:64px;
}

JavaScript

var current_piece = null;

  var bishop_pos = null;
  var target_pos = null;

  var alpha = ["A", "B", "C", "D", "E", "F", "G", "H"];
  var board_proto = [
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, "b", 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, "t", 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0]
  ];

  var board = [
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0]
  ];

  /**************************************
    HTML rendering visualization functions
  ***************************************/
  function reset_all() {
    for (var y = 0; y < 8; y++) {
      for (var x = 0; x < 8; x++) {
        board[y][x] = board_proto[y][x];
      }
    }
    bishop_pos = null;
    target_pos = null;
    document.getElementById("result").value = "";
    render_board();
  }

  function update_bishop_and_target_pos() {
    document.getElementById("bishop_pos").innerText = "(" + human_pos(bishop_pos) + ")";
    document.getElementById("target_pos").innerText = "(" + human_pos(target_pos) + ")";
  }

  function cell_hover(x, y) {
    document.getElementById('hovered_cell').innerText = pos2alpha(x, 7 - y);
  }

  function cell_hover_out() {
    document.getElementById('hovered_cell').innerText = '';
  }

  function render_board() {
    var html = "<table cellpadding='0' cellspacing='0' border='0'>";
    var cnt = 0;
    for (var y = 0; y < 8; y++) {
      html += "<tr><td class='field'>" + (8 - y) + "</td>";
      for (var x = 0; x < 8; x++) {
        var piece = board[y][x];
        var cl = cnt++ % 2 == 0 ? "odd" : "";
        html += "<td onmouseout='cell_hover_out();' onmouseover='cell_hover(" + x + "," + y + ");' id='row_" + x + "_" + (7 - y) + "' class='" + cl + " piece_" + piece + "'...