JSFiddle - React, Tailwind, and code Playground

by Renato Nogueira Lourenço

HTML

<div class="campos">
  <div class="campoLeft">
    <div class="campo">X inicial: <input type="text" id="x1" /></div>
    <div class="campo">Y inicial: <input type="text" id="y1" /></div>
  </div>

  <div class="campoRight">
    <div class="campo">X final: <input type="text" id="x2" /></div>
    <div class="campo">Y final: <input type="text" id="y2" /></div>
  </div>
</div>

<div class="campo"><button id="btnCalcular">Calcular</button></div>

<div class="programa">
  <span id="txtConsole"></span>
</div>

CSS

/*** Normalize elements ***/
body {
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: #FFF;
  font-family: 'Roboto';
  color: #5B00BB;
  text-align: center;
}

a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-weight: 100;
  font-size: 32pt;
  text-align: center;
}

h2 {
  font-weight: 100;
  font-size: 24pt;
  text-align: center;
}

*:focus {
  outline:none;
}

.clearfix {
  overflow: auto;
  clear: both;
}

button {
  padding: 10px;
  width: 200px;
  color: #5B00BB;
  font-size: 12pt;
  border-radius: 40px;
  border: 1px solid #5B00BB;
  background-color: #FFF;
  cursor: pointer;
}

input[type="text"] {
  height: 35px;
  border: 1px solid #5B00BB;
}
/*** End of Normalize elements ***/

/*** Header styles ***/
header {
  background: linear-gradient(to bottom right, #5B00BB, #b400c1);
  width: 100%;
  height: 450px;
  color: #FFF;
}

header > h1 {
  margin-top: 170px;
}

span#created_by {
  float: right;
  margin: 20px;
  font-size: 10pt;
}

.small_header {
  height: 60px;
}

.small_title {
  margin: 0 0 0 10px;
  text-align: left;
  font-size: 28pt;
  line-height: 60px;
  vertical-align: middle;
}

header p {
  font-weight: 100;
  text-align: center;
}

header > p > a {
  font-weight: 400;
}
/*** End of Header styles ***/

.campos {
  display: inline-block;
  margin-top: 20px;
}

.campoLeft {
  float: left;
  margin-right: 20px;
}

.campoRight {
  float: left;
}

.campo {
  margin: 5px;
}

div.body {
  display: inline-block;
}

TypeScript

//Adicionando o evento onclick no botão, para chamar a função calcular
document.getElementById("btnCalcular").onclick = calcular;

//Função calcular()
//Pega os valores dos campos de texto da tela e cria a instância da 
//Classe principal "AStar". Essa classe é instanciada e em seguida chamamos a função getPath, que é quem calcula o caminho.
function calcular() {
  let txtConsole = document.getElementById("txtConsole");
  txtConsole.innerHTML = "Calculando...";

  let _x1 = document.getElementById("x1") as HTMLInputElement;
  let x1 = parseInt(_x1.value);
  let _y1 = document.getElementById("y1") as HTMLInputElement;
  let y1 = parseInt(_y1.value);
  let _x2 = document.getElementById("x2") as HTMLInputElement;
  let x2 = parseInt(_x2.value);
  let _y2 = document.getElementById("y2") as HTMLInputElement;
  let y2 = parseInt(_y2.value);

  let n1 = new Node(new Position(x1, y1), 10, 0, 0, 0, null);
  let n2 = new Node(new Position(x2, y2), 10, 0, 0, 0, null);

  let aStar = new AStar();
  let path = aStar.getPath(n1, n2);

  txtConsole.innerHTML = "";
  for (let i = 0; i < path.length; i++) {
    txtConsole.innerHTML += "Passo " + i + ": x = " + path[i].position.x + ", y = " + path[i].position.y + "<br/>";
  }
}

/**** Classe Position ****/
// Classe auxiliar, que armazena a posição de um determinado nó */
class Position {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

/**** Classe Node ****/
// Classe auxiliar que representa um nó */
class Node {
  //Posição do nó
  public position: Position;
  
  //Custo para ir para aquele nó
  public cost: number;
  
  //Custo agregado desde o início do caminho até o nó em questão
  public g: number;
  
  //Valor estimado para chegar ao nó destino
  public h: number;
  
  //Somatória do quanto já andamos e o quanto falta andar (G + H)
  public f: number;
  
  //Nó pai do nó atual. Se este nó é o B e viemos de A então A é parent de B.
  public parentNode: Node;

 ...