Fix flickering on board redraw

Turns out == operator can't be used to compare two JS objects. Implement
a custom method for determining piece equality.

adapter/adapter.py

@@ -39,14 +39,17 @@ def ask_engine(command):
     return result
 
 
-@app.route("/get_state/")
+def parse_state(state_str):
-def get_state():
+    return {
-    state_str = ask_engine("get_state")
-    state = {
         state_str[i + 2 : i + 4]: make_piece(state_str[i : i + 2])
         for i in range(0, len(state_str), 4)
     }
-    return flask.jsonify(state)
+
+
+@app.route("/get_state/")
+def get_state():
+    state_str = ask_engine("get_state")
+    return flask.jsonify(parse_state(state_str))
 
 
 @app.route("/get_moves/", methods=["POST"])
@@ -57,5 +60,12 @@ def get_moves():
     return flask.jsonify(moves)
 
 
+@app.route("/make_move/", methods=["POST"])
+def make_move():
+    source, target = flask.request.json
+    state_str = ask_engine(f"make_move,{source},{target}")
+    return flask.jsonify(parse_state(state_str))
+
+
 if __name__ == "__main__":
     app.run(debug=True, host="127.0.0.1", port=3000)

frontend/main.js

@@ -17,16 +17,13 @@ function post_json(url, json) {
 }
 
 class Backend {
-  constructor() {
+  getConfig() {
-    this.config = new Configuration(
+    return new Map(
-      new Map(Object.entries(get_json("http://localhost:3000/get_state/")))
+      Object.entries(get_json("http://localhost:3000/get_state/"))
     );
   }
-  getConfig() {
-    return this.config;
-  }
   makeMove(source, target) {
-    this.config.makeMove(source, target);
+    return post_json("http://localhost:3000/make_move/", [source, target]);
   }
   getAvailableMoves(position) {
     return post_json("http://localhost:3000/get_moves/", position);
@@ -44,7 +41,7 @@ class Chess {
     this.canMoveTo = [];
     document.onclick = (ev) => this.click(ev);
   }
-  syncBackend() {
+  updateState() {
     let config = this.backend.getConfig();
     this.configVis.configuration = config;
     this.configVis.draw(this.canvas);
@@ -63,7 +60,7 @@ class Chess {
     }
     this.activeSquares.unselectSquare(this.canvas);
     this.activeSquares.unsetMoveSquares(this.canvas);
-    this.syncBackend();
+    this.updateState();
     this.moveSource = null;
   }
   click(ev) {
@@ -82,30 +79,4 @@ class Chess {
   }
 }
 
-class Configuration {
-  constructor(board) {
-    this.board = new Map(board);
-  }
-  getAt(position) {
-    if (!this.board.has(position)) {
-      return null;
-    }
-    return this.board.get(position);
-  }
-  setAt(position, piece) {
-    this.board.set(position, piece);
-  }
-  dropAt(position) {
-    this.board.delete(position);
-  }
-  makeMove(source, target) {
-    const piece = this.getAt(source);
-    if (piece === null) return;
-    else {
-      this.setAt(target, piece);
-      this.dropAt(source);
-    }
-  }
-}
-
 new Chess();

frontend/visuals.js

@@ -154,15 +154,21 @@ class PieceVis {
   }
 }
 
+function pieceEqual(pieceA, pieceB) {
+  return (
+    pieceA.color === pieceB.color && pieceA.piece_type === pieceB.piece_type
+  );
+}
+
 export class ConfigVis {
   constructor(configuration) {
     this.configuration = configuration;
     this.piecesVis = new Map();
   }
   draw(canvas) {
-    for (let [position, piece] of this.configuration.board) {
+    for (let [position, piece] of this.configuration) {
       if (this.piecesVis.has(position)) {
-        if (this.piecesVis.get(position).piece == piece) {
+        if (pieceEqual(this.piecesVis.get(position).piece, piece)) {
           continue;
         }
       }
@@ -175,7 +181,7 @@ export class ConfigVis {
       this.piecesVis.set(position, pv);
     }
     for (let [position, pv] of this.piecesVis) {
-      if (!this.configuration.board.has(position)) {
+      if (!this.configuration.has(position)) {
         pv.undraw();
         this.piecesVis.delete(position);
       }