Do another refactoring of frontend

adapter/adapter.py

@@ -22,11 +22,10 @@ engine = subprocess.Popen(
 
 
 def make_piece(piece_str):
-    piece_type, color, file, rank = piece_str
+    piece_type, color = piece_str
     return {
-        "who": dict(PIECE_TYPE)[piece_type],
+        "piece_type": dict(PIECE_TYPE)[piece_type],
         "color": dict(COLOR)[color],
-        "position": f"{file}{rank}",
     }
 
 
@@ -35,10 +34,10 @@ def get_state():
     engine.stdin.write(b"get_state\n")
     engine.stdin.flush()
     position_str = engine.stdout.readline().decode("ascii").strip()
-    position = [
+    position = {
-        make_piece(position_str[i : i + 4])
+        position_str[i + 2 : i + 4]: make_piece(position_str[i : i + 2])
         for i in range(0, len(position_str), 4)
-    ]
+    }
     return flask.jsonify(position)
 
 

frontend/jsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
         "checkJs": true,
-        "target": "es6"
+        "target": "es2017"
     }
 }

frontend/main.js

@@ -9,20 +9,15 @@ function get_json(url) {
 
 class Backend {
   constructor() {
-    this.config = this.getConfig();
+    this.config = new Configuration(
-  }
+      new Map(Object.entries(get_json("http://localhost:3000/get_state/")))
-  getConfig() {
-    return new Configuration(
-      get_json("http://localhost:3000/get_state/").map((p) => {
-        let piece = new Piece();
-        Object.assign(piece, p);
-        return piece;
-      })
     );
   }
+  getConfig() {
+    return this.config;
+  }
   makeMove(move) {
-    this.config = this.config.makeMove(move);
+    this.config.makeMove(move);
-    return this.config.clone();
   }
   getAvailableMoves(position) {
     return [];
@@ -32,19 +27,16 @@ class Backend {
 class Chess {
   constructor() {
     this.backend = new Backend();
-    this.configVis = null;
     this.canvas = new visuals.Canvas();
+    this.configVis = new visuals.ConfigVis(this.backend.getConfig());
+    this.configVis.draw(this.canvas);
     this.moveSource = null;
     this.canMoveTo = [];
-    this.syncBackend();
     document.onclick = (ev) => this.click(ev);
   }
   syncBackend() {
     let config = this.backend.getConfig();
-    if (this.configVis !== null) {
+    this.configVis.configuration = config;
-      this.configVis.undraw();
-    }
-    this.configVis = new visuals.ConfigVis(config.pieces);
     this.configVis.draw(this.canvas);
   }
   showAvailableMoves(canMoveTo) {}
@@ -85,46 +77,35 @@ class Move {
 }
 
 class Piece {
-  constructor(who, color, position) {
+  constructor(piece_type, color) {
-    this.who = who;
+    this.piece_type = piece_type;
     this.color = color;
-    this.position = position;
-  }
-  clone() {
-    return new Piece(this.who, this.color, this.position);
-  }
-  moveTo(position) {
-    return new Piece(this.who, this.color, position);
   }
 }
 
 class Configuration {
-  constructor(pieces) {
+  constructor(board) {
-    this.pieces = pieces;
+    this.board = new Map(board);
-  }
-  clone() {
-    let pieces = [];
-    for (let piece of this.pieces) {
-      pieces.push(piece.clone());
-    }
-    return new Configuration(pieces);
   }
   getAt(position) {
-    return this.pieces.find((piece) => piece.position === position) || null;
+    if (!this.board.has(position)) {
+      return null;
+    }
+    return this.board.get(position);
+  }
+  setAt(position, piece) {
+    this.board.set(position, piece);
   }
   dropAt(position) {
-    return new Configuration(
+    this.board.delete(position);
-      this.pieces.filter((piece) => piece.position !== position)
-    );
   }
   makeMove(move) {
-    const pieceToMove = this.getAt(move.from);
+    const piece = this.getAt(move.from);
-    if (pieceToMove === null) return this;
+    if (piece === null) return;
-    else
+    else {
-      return new Configuration([
+      this.setAt(move.to, piece);
-        ...this.dropAt(move.from).dropAt(move.to).pieces,
+      this.dropAt(move.from);
-        pieceToMove.moveTo(move.to),
+    }
-      ]);
   }
 }
 

frontend/visuals.js

@@ -78,15 +78,17 @@ export function rowColToBoardIndex(row, col) {
   return `${colLetter}${rowDigit}`;
 }
 
-export class PieceVis {
+class PieceVis {
   constructor(piece) {
-    this.icon = `./icons/${piece.who}_${piece.color}.svg`;
+    this.piece = piece;
-    this.position = piece.position;
     this.im = null;
   }
-  draw(canvas) {
+  get ["icon"]() {
+    return `./icons/${this.piece.piece_type}_${this.piece.color}.svg`;
+  }
+  draw(canvas, position) {
     let [topPx, leftPx] = canvas.rowColToScreenCoords(
-      ...boardIndexToRowCol(this.position),
+      ...boardIndexToRowCol(position),
       canvas
     );
     if (this.im === null) {
@@ -118,15 +120,30 @@ export class ConfigVis {
     this.piecesVis = new Map();
   }
   draw(canvas) {
-    for (const piece of this.configuration) {
+    for (let [position, piece] of this.configuration.board) {
-      let pieceVis = new PieceVis(piece);
+      if (this.piecesVis.has(position)) {
-      pieceVis.draw(canvas);
+        if (this.piecesVis.get(position).piece == piece) {
-      this.piecesVis.set(piece.position, pieceVis);
+          continue;
+        }
+      }
+      let pv = this.piecesVis.get(position);
+      if (pv !== undefined) {
+        pv.undraw();
+      }
+      pv = new PieceVis(piece);
+      pv.draw(canvas, position);
+      this.piecesVis.set(position, pv);
+    }
+    for (let [position, pv] of this.piecesVis) {
+      if (!this.configuration.board.has(position)) {
+        pv.undraw();
+        this.piecesVis.delete(position);
+      }
     }
   }
   undraw() {
-    for (let [position, pieceVis] of this.piecesVis) {
+    for (let [position, pv] of this.piecesVis) {
-      pieceVis.undraw();
+      pv.undraw();
     }
     this.piecesVis.clear();
   }