Do another refactoring of frontend

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.position = piece.position;
+    this.piece = piece;
     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) {
-      let pieceVis = new PieceVis(piece);
-      pieceVis.draw(canvas);
-      this.piecesVis.set(piece.position, pieceVis);
+    for (let [position, piece] of this.configuration.board) {
+      if (this.piecesVis.has(position)) {
+        if (this.piecesVis.get(position).piece == piece) {
+          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) {
-      pieceVis.undraw();
+    for (let [position, pv] of this.piecesVis) {
+      pv.undraw();
     }
     this.piecesVis.clear();
   }