From 27dce5f7a3056ec1c08ae02bf267835189d3536d Mon Sep 17 00:00:00 2001
From: Pavel Lutskov <pavel.lutskov@gmail.com>
Date: Mon, 13 Dec 2021 20:46:53 +0100
Subject: [PATCH] Implement move squares highlighting

Issue #3
---
 frontend/main.js    | 14 ++++++++++++--
 frontend/visuals.js | 15 +++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/frontend/main.js b/frontend/main.js
index 085f8eb..ccd2c21 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -7,6 +7,15 @@ function get_json(url) {
   return JSON.parse(request.responseText);
 }
 
+function post_json(url, json) {
+  var request = new XMLHttpRequest();
+  request.open("post", url, false);
+  request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+  request.send(JSON.stringify(json));
+  if (request.status != 200) return null;
+  return JSON.parse(request.responseText);
+}
+
 class Backend {
   constructor() {
     this.config = new Configuration(
@@ -20,8 +29,7 @@ class Backend {
     this.config.makeMove(source, target);
   }
   getAvailableMoves(position) {
-    position;
-    return [];
+    return post_json("http://localhost:3000/get_moves/", position);
   }
 }
 
@@ -46,6 +54,7 @@ class Chess {
     let validMoves = this.backend.getAvailableMoves(source);
     if (validMoves === null) return;
     this.activeSquares.selectSquare(this.canvas, source);
+    this.activeSquares.setMoveSquares(this.canvas, validMoves);
     this.moveSource = source;
   }
   finalizeMove(target) {
@@ -53,6 +62,7 @@ class Chess {
       this.backend.makeMove(this.moveSource, target);
     }
     this.activeSquares.unselectSquare(this.canvas);
+    this.activeSquares.unsetMoveSquares(this.canvas);
     this.syncBackend();
     this.moveSource = null;
   }
diff --git a/frontend/visuals.js b/frontend/visuals.js
index 3064cff..ee86dcd 100644
--- a/frontend/visuals.js
+++ b/frontend/visuals.js
@@ -89,12 +89,27 @@ export function rowColToBoardIndex(row, col) {
 export class ActiveSquares {
   constructor() {
     this.selectedSquare = null;
+    this.moveSquares = [];
   }
   selectSquare(canvas, position) {
     let [r, c] = boardIndexToRowCol(position);
     canvas.drawSquareColor("#c0c0ff", r, c);
     this.selectedSquare = position;
   }
+  setMoveSquares(canvas, moveSquares) {
+    moveSquares.forEach((position) => {
+      let [r, c] = boardIndexToRowCol(position);
+      canvas.drawSquareColor("#ffffc0", r, c);
+      this.moveSquares.push(position);
+    });
+  }
+  unsetMoveSquares(canvas) {
+    this.moveSquares.forEach((position) => {
+      let [r, c] = boardIndexToRowCol(position);
+      canvas.drawSquareColor(canvas.decideColor(r, c), r, c);
+    });
+    this.moveSquares = [];
+  }
   unselectSquare(canvas) {
     if (this.selectedSquare === null) return;
     let [r, c] = boardIndexToRowCol(this.selectedSquare);