Refactor move handling in frontend

Make the move handlers better encapsulated and abstract away the click.

Issue #3

frontend/main.js

@@ -16,8 +16,8 @@ class Backend {
   getConfig() {
     return this.config;
   }
-  makeMove(move) {
+  makeMove(source, target) {
-    this.config.makeMove(move);
+    this.config.makeMove(source, target);
   }
   getAvailableMoves(position) {
     position;
@@ -40,34 +40,32 @@ class Chess {
     this.configVis.configuration = config;
     this.configVis.draw(this.canvas);
   }
-  showAvailableMoves(canMoveTo) {
+  initializeMove(source) {
-    canMoveTo;
+    if (source === null) return;
+    let validMoves = this.backend.getAvailableMoves(source);
+    if (validMoves === null) return;
+    this.moveSource = source;
+  }
+  finalizeMove(target) {
+    if (target !== null) {
+      this.backend.makeMove(this.moveSource, target);
+    }
+    this.syncBackend();
+    this.moveSource = null;
   }
   click(ev) {
-    if (this.moveSource === null) {
+    let rc = this.canvas.screenCoordsToRowCol(ev.clientX, ev.clientY);
-      this._firstClick(ev);
+    let position;
+    if (rc === null) {
+      position = null;
     } else {
-      this._secondClick(ev);
+      position = visuals.rowColToBoardIndex(...rc);
     }
-  }
+    if (this.moveSource === null) {
-  _firstClick(ev) {
+      this.initializeMove(position);
-    let rcA = this.canvas.screenCoordsToRowCol(ev.clientX, ev.clientY);
+    } else {
-    if (rcA === null) return;
+      this.finalizeMove(position);
-    let positionA = visuals.rowColToBoardIndex(...rcA);
-    this.showAvailableMoves(this.backend.getAvailableMoves(positionA));
-    this.moveSource = positionA;
-  }
-  _secondClick(ev) {
-    let rcB = this.canvas.screenCoordsToRowCol(ev.clientX, ev.clientY);
-    if (rcB !== null) {
-      let move = {
-        from: this.moveSource,
-        to: visuals.rowColToBoardIndex(...rcB),
-      };
-      this.backend.makeMove(move);
-      this.syncBackend();
     }
-    this.moveSource = null;
   }
 }
 
@@ -87,12 +85,12 @@ class Configuration {
   dropAt(position) {
     this.board.delete(position);
   }
-  makeMove(move) {
+  makeMove(source, target) {
-    const piece = this.getAt(move.from);
+    const piece = this.getAt(source);
     if (piece === null) return;
     else {
-      this.setAt(move.to, piece);
+      this.setAt(target, piece);
-      this.dropAt(move.from);
+      this.dropAt(source);
     }
   }
 }