Add basic autoplay features to frontend

Rudimentary play for white against engine is now possible.

frontend/main.js

@@ -25,6 +25,9 @@ class Backend {
   makeMove(source, target) {
     return post_json("http://localhost:3000/make_move/", [source, target]);
   }
+  chooseMove(color) {
+    return post_json("http://localhost:3000/choose_move/", color);
+  }
   getAvailableMoves(position) {
     return post_json("http://localhost:3000/get_moves/", position);
   }
@@ -34,6 +37,16 @@ class Chess {
   constructor() {
     this.backend = new Backend();
     this.canvas = new visuals.Canvas();
+    this.button = document.createElement("button");
+    this.autoplay = false;
+    this.button.innerHTML = "Autoplay Off";
+    this.button.onclick = () => {
+      this.autoplay = !this.autoplay;
+      this.button.innerHTML = ["Autoplay Off", "Autoplay On"][
+        Number(this.autoplay)
+      ];
+    };
+    document.body.appendChild(this.button);
     this.configVis = new visuals.ConfigVis(this.backend.getConfig());
     this.configVis.draw(this.canvas);
     this.activeSquares = new visuals.ActiveSquares();
@@ -46,6 +59,12 @@ class Chess {
     this.configVis.configuration = config;
     this.configVis.draw(this.canvas);
   }
+  chooseMove() {
+    let move = this.backend.chooseMove("black");
+    if (move === null) return;
+    this.backend.makeMove(...move);
+    this.updateState();
+  }
   initializeMove(source) {
     if (source === null) return;
     let validMoves = this.backend.getAvailableMoves(source);
@@ -55,13 +74,19 @@ class Chess {
     this.moveSource = source;
   }
   finalizeMove(target) {
+    let success;
     if (target !== null) {
-      this.backend.makeMove(this.moveSource, target);
+      success = this.backend.makeMove(this.moveSource, target) !== null;
+    } else {
+      success = false;
     }
     this.activeSquares.unselectSquare(this.canvas);
     this.activeSquares.unsetMoveSquares(this.canvas);
     this.updateState();
     this.moveSource = null;
+    if (this.autoplay && success) {
+      this.chooseMove();
+    }
   }
   click(ev) {
     let rc = this.canvas.screenCoordsToRowCol(ev.clientX, ev.clientY);