Refactor square drawing

Make square drawing modular and a member function of Canvas.

Issue #3

adapter/adapter.py

@@ -29,19 +29,24 @@ def make_piece(piece_str):
     }
 
 
-@app.route("/get_state/")
+def ask_engine(command):
-def get_state():
+    engine.stdin.write(f"{command}\n".encode("ascii"))
-    engine.stdin.write(b"get_state\n")
     engine.stdin.flush()
     reply = engine.stdout.readline().decode("ascii").strip()
-    status, position_str = reply.split(",")
+    status, result = reply.split(",")
     if status != "ok":
         flask.abort(400)
-    position = {
+    return result
-        position_str[i + 2 : i + 4]: make_piece(position_str[i : i + 2])
+
-        for i in range(0, len(position_str), 4)
+
+@app.route("/get_state/")
+def get_state():
+    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(position)
+    return flask.jsonify(state)
 
 
 if __name__ == "__main__":

frontend/visuals.js

@@ -5,39 +5,47 @@ const INDEX_LETTERS = "abcdefgh";
 export class Canvas {
   constructor() {
     this._canvas = document.createElement("canvas");
+    this._ctx = this._canvas.getContext("2d");
     let boardSide = BOX_SIDE * 8 + INDEX_MARGIN;
     this._canvas.width = boardSide;
     this._canvas.height = boardSide;
     document.body.appendChild(this._canvas);
     this.drawChessBoard();
   }
+  decideColor(r, c) {
+    if ((r + c) % 2) return "#c0c0c0";
+    else return "#ffffff";
+  }
+  drawSquareColor(color, r, c) {
+    const crtStyle = this._ctx.fillStyle;
+    this._ctx.fillStyle = color;
+    this._ctx.fillRect(
+      c * BOX_SIDE + INDEX_MARGIN,
+      r * BOX_SIDE + INDEX_MARGIN,
+      BOX_SIDE,
+      BOX_SIDE
+    );
+    this._ctx.fillStyle = crtStyle;
+  }
   drawChessBoard() {
     // Draw squares
-    let ctx = this._canvas.getContext("2d");
-    ctx.fillStyle = "#c0c0c0";
     for (let r = 0; r < 8; r++) {
       for (let c = 0; c < 8; c++) {
-        if ((r + c) % 2)
+        this.drawSquareColor(this.decideColor(r, c), r, c);
-          ctx.fillRect(
-            c * BOX_SIDE + INDEX_MARGIN,
-            r * BOX_SIDE + INDEX_MARGIN,
-            BOX_SIDE,
-            BOX_SIDE
-          );
       }
     }
 
     // Draw letters
-    ctx.fillStyle = "black";
+    this._ctx.fillStyle = "black";
     let fontsize = INDEX_MARGIN / 2;
-    ctx.font = `${fontsize}px Monospace`;
+    this._ctx.font = `${fontsize}px Monospace`;
     for (let idx = 0; idx < 8; idx++) {
-      ctx.fillText(
+      this._ctx.fillText(
         INDEX_LETTERS[idx],
         BOX_SIDE * idx + BOX_SIDE / 2 + INDEX_MARGIN - fontsize / 4,
         INDEX_MARGIN / 2
       );
-      ctx.fillText(
+      this._ctx.fillText(
         (8 - idx).toString(),
         INDEX_MARGIN / 2 - fontsize / 4,
         BOX_SIDE * idx + BOX_SIDE / 2 + INDEX_MARGIN + fontsize / 4