Refactor with some OOP

frontend/main.js

@@ -38,45 +38,83 @@ function drawChessBoard(canvas) {
   }
 }
 
-function drawPiece(canvas, piece, field) {
+function computeScreenCoords(position, canvas) {
   let canvasRect = canvas.getBoundingClientRect();
-  let rc = boardIndexToRowCol(field);
-
-  let im = new Image(BOX_SIDE, BOX_SIDE);
-  im.src = `./icons/${piece}.svg`;
-  im.onload = () => {
+  let rc = boardIndexToRowCol(position);
   let topPx = canvasRect.top + INDEX_MARGIN + rc[0]*BOX_SIDE + window.pageYOffset;
   let leftPx = canvasRect.left + INDEX_MARGIN + rc[1]*BOX_SIDE + window.pageXOffset;
+  return [topPx, leftPx]
+}
+
+
+class Piece {
+  constructor(who, color, position) {
+    this.who = who;
+    this.color = color;
+    this.position = position;
+    this._im = null;
+  }
+  icon() {
+    return `./icons/${this.who}_${this.color}.svg`
+  }
+  draw(canvas) {
+    let [topPx, leftPx] = computeScreenCoords(this.position, canvas);
+    if (this._im === null) {
+      let im = new Image(BOX_SIDE, BOX_SIDE);
+      im.src = this.icon();
+      im.onload = () => {
         im.style.position = 'absolute';
         im.style.top = `${topPx}px`;
         im.style.left = `${leftPx}px`;
       };
       document.body.appendChild(im);
+      this._im = im;
+    }
+    else {
+      this._im.style.top = `${topPx}px`;
+      this._im.style.left = `${leftPx}px`;
+    }
+  }
 }
 
-function _setupBoard(canvas) {
-  drawPiece(_canvas, 'rook_black', 'a8');
-  drawPiece(_canvas, 'rook_black', 'h8');
-  drawPiece(_canvas, 'knight_black', 'b8');
-  drawPiece(_canvas, 'knight_black', 'g8');
-  drawPiece(_canvas, 'bishop_black', 'c8');
-  drawPiece(_canvas, 'bishop_black', 'f8');
-  drawPiece(_canvas, 'queen_black', 'd8');
-  drawPiece(_canvas, 'king_black', 'e8');
-
-  for (let colLetter of INDEX_LETTERS) {
-    drawPiece(canvas, 'pawn_black', `${colLetter}7`);
-    drawPiece(canvas, 'pawn_white', `${colLetter}2`);
+class Configuration {
+  constructor(pieces) {
+    this.pieces = pieces
+  }
+  draw(canvas) {
+    for (let piece of this.pieces) {
+      piece.draw(canvas);
+    }
+  }
 }
 
-  drawPiece(_canvas, 'rook_white', 'a1');
-  drawPiece(_canvas, 'rook_white', 'h1');
-  drawPiece(_canvas, 'knight_white', 'b1');
-  drawPiece(_canvas, 'knight_white', 'g1');
-  drawPiece(_canvas, 'bishop_white', 'c1');
-  drawPiece(_canvas, 'bishop_white', 'f1');
-  drawPiece(_canvas, 'queen_white', 'd1');
-  drawPiece(_canvas, 'king_white', 'e1');
+function setupBoard() {
+  let pawns = [];
+  for (let x of INDEX_LETTERS) {
+    pawns.push(new Piece('pawn', 'black', `${x}7`),
+               new Piece('pawn', 'white', `${x}2`));
+  }
+  return new Configuration([
+    new Piece('rook', 'black', 'a8'),
+    new Piece('rook', 'black', 'h8'),
+    new Piece('knight', 'black', 'b8'),
+    new Piece('knight', 'black', 'g8'),
+    new Piece('bishop', 'black', 'c8'),
+    new Piece('bishop', 'black', 'f8'),
+    new Piece('queen', 'black', 'd8'),
+    new Piece('king', 'black', 'e8'),
+
+    ...pawns,
+
+    new Piece('rook', 'white', 'a1'),
+    new Piece('rook', 'white', 'h1'),
+    new Piece('knight', 'white', 'b1'),
+    new Piece('knight', 'white', 'g1'),
+    new Piece('bishop', 'white', 'c1'),
+    new Piece('bishop', 'white', 'f1'),
+    new Piece('queen', 'white', 'd1'),
+    new Piece('king', 'white', 'e1'),
+  ])
 }
 
 function boardIndexToRowCol(boardIndex) {
@@ -87,6 +125,11 @@ function boardIndexToRowCol(boardIndex) {
   return [row, col];
 }
 
-var _canvas = createCanvas();
-drawChessBoard(_canvas);
-_setupBoard(_canvas);
+function demo() {
+  let canvas = createCanvas();
+  drawChessBoard(canvas);
+  let config = setupBoard();
+  config.draw(canvas);
+}
+
+demo();