Refactoring and Board class

Author: beldur

flow-typed/go-lib.js

@@ -12,4 +12,6 @@ declare module 'go-lib' {
     coordinate: Coordinate,
     color: Color,
   }
+
+  declare type BoardStatus = Color | 'EMPTY'
 }

src/board.js

@@ -0,0 +1,35 @@
+// @flow
+
+import type { BoardStatus } from 'go-lib'
+import * as util from './util'
+import { EMPTY } from './constants'
+
+type BoardData = Array<BoardStatus>
+
+class Board {
+  data: BoardData = []
+  boardSize: number
+
+  constructor(boardSize: number) {
+    this.boardSize = boardSize
+    this.data = util.range(boardSize * boardSize).map(() => EMPTY)
+  }
+
+  clear() {
+    this.data = this.data.map(() => EMPTY)
+  }
+
+  setStatus(x: number, y: number, status: BoardStatus) {
+    const boardIndex = this.boardSize * x + y
+
+    this.data = this.data.map((value, i) => (i === boardIndex ? status : value))
+  }
+
+  getStatus(x: number, y: number): BoardStatus {
+    const boardIndex = this.boardSize * x + y
+
+    return this.data[boardIndex]
+  }
+}
+
+export default Board

src/board.test.js

@@ -0,0 +1,21 @@
+import Board from './board'
+import * as util from './util'
+import { EMPTY, WHITE } from './constants'
+
+describe('Board', () => {
+  it('should clear the board', () => {
+    const expected = util.range(9 * 9).map(() => EMPTY)
+    const board = new Board(9)
+    board.clear()
+
+    expect(board.data).toEqual(expected)
+  })
+
+  it('should set und get a boardstatus correctly', () => {
+    const board = new Board(9)
+    board.setStatus(3, 3, WHITE)
+
+    expect(board.getStatus(3, 3)).toBe(WHITE)
+    expect(board.getStatus(3, 4)).toBe(EMPTY)
+  })
+})

src/components/util/board-drawer.js

@@ -1,6 +1,7 @@
 // @flow
 
 import type { Move, Coordinate } from 'go-lib'
+import { BLACK } from '../../constants'
 
 const LINE_WIDTH_FACTOR = 20
 const FONT_SIZE_FACTOR = 2.5
@@ -84,17 +85,19 @@ class BoardDrawer {
     ctx.lineWidth = lineWidth * 2
 
     moves.forEach((move, index) => {
+      const moveX = move.coordinate.x + 1
+      const moveY = move.coordinate.y + 1
       const isLastMove = index === moves.length - 1
-      const fillStyle = move.color === 'B'
+      const fillStyle = move.color === BLACK
         ? colorBlack(opacity)
         : colorWhite(opacity)
 
       // Draw stone
       ctx.fillStyle = fillStyle
       ctx.beginPath()
       ctx.arc(
-        move.coordinate.x * boxSize,
-        move.coordinate.y * boxSize,
+        moveX * boxSize,
+        moveY * boxSize,
         boxSize / 2 - lineWidth,
         0,
         2 * Math.PI,
@@ -106,20 +109,14 @@ class BoardDrawer {
 
       // Mark last move
       if (isLastMove && !isHover) {
-        const strokeStyle = move.color === 'B'
+        const strokeStyle = move.color === BLACK
           ? colorWhite(opacity)
           : colorBlack(opacity)
 
         ctx.beginPath()
         ctx.strokeStyle = strokeStyle
         ctx.lineWidth = lineWidth
-        ctx.arc(
-          move.coordinate.x * boxSize,
-          move.coordinate.y * boxSize,
-          boxSize / 3.5,
-          0,
-          2 * Math.PI,
-        )
+        ctx.arc(moveX * boxSize, moveY * boxSize, boxSize / 3.5, 0, 2 * Math.PI)
         ctx.stroke()
       }
     })
@@ -196,8 +193,8 @@ class BoardDrawer {
 
   // calculateCoordinateFromMousePosition convert's a canvas mouse position to a board coordinate
   calculateCoordinateFromMousePosition(mousePosition: Coordinate): Coordinate {
-    const x = Math.round(mousePosition.x / this.boxSize)
-    const y = Math.round(mousePosition.y / this.boxSize)
+    const x = Math.round(mousePosition.x / this.boxSize) - 1
+    const y = Math.round(mousePosition.y / this.boxSize) - 1
 
     return { x, y }
   }

src/components/util/board-drawer.test.js

@@ -77,6 +77,6 @@ describe('BoardDrawer', () => {
       mousePosition,
     )
 
-    expect(coordinate).toEqual({ x: 10, y: 10 })
+    expect(coordinate).toEqual({ x: 9, y: 9 })
   })
 })

src/components/util/canvas.js

@@ -2,6 +2,7 @@
 
 import type { Coordinate } from 'go-lib'
 
+// calculateCanvasPosition takes clientX/Y and returns the relative clientX/Y of the canvas
 export const calculateCanvasPosition = (
   canvas: HTMLCanvasElement,
   x: number,

src/constants.js

@@ -0,0 +1,11 @@
+// @flow
+
+import type { BoardStatus } from 'go-lib'
+
+export const PASS = 'PASS'
+
+export const WHITE: BoardStatus = 'W'
+
+export const BLACK: BoardStatus = 'B'
+
+export const EMPTY: BoardStatus = 'EMPTY'

src/index.js

@@ -1,5 +1,7 @@
 // @flow
 
 import * as components from './components'
+import Board from './board'
+import Zobrist from './zobrist'
 
-export { components }
+export { components, Board, Zobrist }

src/types.js

@@ -1,3 +1,3 @@
 // @flow
 
-export type { Coordinate, Move } from 'go-lib'
+export type { Coordinate, Move, BoardStatus } from 'go-lib'