Do another refactoring of frontend

frontend/main.js

@@ -9,20 +9,15 @@ function get_json(url) {
 
 class Backend {
   constructor() {
-    this.config = this.getConfig();
-  }
-  getConfig() {
-    return new Configuration(
-      get_json("http://localhost:3000/get_state/").map((p) => {
-        let piece = new Piece();
-        Object.assign(piece, p);
-        return piece;
-      })
+    this.config = new Configuration(
+      new Map(Object.entries(get_json("http://localhost:3000/get_state/")))
     );
   }
+  getConfig() {
+    return this.config;
+  }
   makeMove(move) {
-    this.config = this.config.makeMove(move);
-    return this.config.clone();
+    this.config.makeMove(move);
   }
   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.undraw();
-    }
-    this.configVis = new visuals.ConfigVis(config.pieces);
+    this.configVis.configuration = config;
     this.configVis.draw(this.canvas);
   }
   showAvailableMoves(canMoveTo) {}
@@ -85,46 +77,35 @@ class Move {
 }
 
 class Piece {
-  constructor(who, color, position) {
-    this.who = who;
+  constructor(piece_type, color) {
+    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) {
-    this.pieces = pieces;
-  }
-  clone() {
-    let pieces = [];
-    for (let piece of this.pieces) {
-      pieces.push(piece.clone());
-    }
-    return new Configuration(pieces);
+  constructor(board) {
+    this.board = new Map(board);
   }
   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.pieces.filter((piece) => piece.position !== position)
-    );
+    this.board.delete(position);
   }
   makeMove(move) {
-    const pieceToMove = this.getAt(move.from);
-    if (pieceToMove === null) return this;
-    else
-      return new Configuration([
-        ...this.dropAt(move.from).dropAt(move.to).pieces,
-        pieceToMove.moveTo(move.to),
-      ]);
+    const piece = this.getAt(move.from);
+    if (piece === null) return;
+    else {
+      this.setAt(move.to, piece);
+      this.dropAt(move.from);
+    }
   }
 }