From 941a5c072a28ef1442919d3ee2106240db78334e Mon Sep 17 00:00:00 2001
From: Pavel Lutskov <pavel.lutskov@gmail.com>
Date: Mon, 13 Dec 2021 19:38:54 +0100
Subject: [PATCH] Refactor square drawing

Make square drawing modular and a member function of Canvas.

Issue #3
---
 frontend/visuals.js | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/visuals.js b/frontend/visuals.js
index 3742fce..2ec0309 100644
--- a/frontend/visuals.js
+++ b/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)
-          ctx.fillRect(
-            c * BOX_SIDE + INDEX_MARGIN,
-            r * BOX_SIDE + INDEX_MARGIN,
-            BOX_SIDE,
-            BOX_SIDE
-          );
+        this.drawSquareColor(this.decideColor(r, c), r, c);
       }
     }
 
     // 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