Skip to content

Commit 804c947

Browse files
beldurbeldur
committed
Refactoring and board click event
1 parent 538ad3b commit 804c947

19 files changed

+237
-149
lines changed

‎.babelrc

+6
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
}
1010
],
1111
"react"
12+
],
13+
"plugins": [
14+
"transform-class-properties"
1215
]
1316
},
1417
"es": {
@@ -21,6 +24,9 @@
2124
}
2225
],
2326
"react"
27+
],
28+
"plugins": [
29+
"transform-class-properties"
2430
]
2531
}
2632
}

‎.flowconfig

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
[ignore]
2+
.*\.test\.js
23

34
[include]
45

‎README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ $ yarn add go-lib
1919
```js
2020
import React from 'react'
2121
import ReactDOM from 'react-dom'
22-
import { Board } from 'go-lib'
22+
import { Board } from 'go-lib/components'
2323

24-
const moves = [
25-
{ pos: [16, 4], color: 'B' },
26-
{ pos: [4, 16], color: 'W' },
24+
const stones = [
25+
{ coordinate: { x: 16, y: 4 }, color: 'B' },
26+
{ coordinate: { x: 4, y: 16 }, color: 'W' },
2727
]
2828

29-
ReactDOM.render(<Board size={19} moves={moves} />, document.body)
29+
ReactDOM.render(<Board size={19} positions={stones} />, document.body)
3030
```

‎components/package.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "go-lib/components",
3+
"private": true,
4+
"main": "../lib/components.js",
5+
"module": "../es/components.js",
6+
"jsnext:main": "../es/components.js"
7+
}

‎example/index.html

+39-44
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,42 @@
1-
21
<html>
32

4-
<head>
5-
<script src="https://unpkg.com/react@15/dist/react.js"></script>
6-
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
7-
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
8-
9-
<script src="go-lib.js"></script>
10-
</head>
11-
<body>
12-
<div id="board-wrapper" style="width: 500px; height: 500px;" onclick="handleOnClick()"></div>
13-
14-
<script>
15-
let pos = 0
16-
const moves = [
17-
{ pos: [16, 4], color: 'B' },
18-
{ pos: [4, 16], color: 'W' },
19-
{ pos: [16, 17], color: 'B' },
20-
{ pos: [4, 4], color: 'W' },
21-
{ pos: [17, 11], color: 'B' },
22-
{ pos: [13, 16], color: 'W' },
23-
{ pos: [16, 15], color: 'B' },
24-
{ pos: [10, 16], color: 'W' },
25-
{ pos: [3, 14], color: 'B' },
26-
{ pos: [3, 12], color: 'W' },
27-
]
28-
29-
const render = () => {
30-
const board = React.createElement(GoLib.Board, {
31-
width: 500,
32-
height: 500,
33-
size: 19,
34-
moves: moves.slice(0, pos),
35-
})
36-
ReactDOM.render(board, document.getElementById('board-wrapper'))
37-
}
38-
39-
const handleOnClick = () => {
40-
pos = pos === moves.length - 1 ? pos : pos + 1
41-
render()
42-
}
43-
44-
render()
45-
</script>
46-
</body>
3+
<head>
4+
<script src="https://unpkg.com/react@15/dist/react.js"></script>
5+
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
6+
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
7+
8+
<script src="go-lib.js"></script>
9+
</head>
10+
11+
<body>
12+
<div id="board-wrapper" style="width: 500px; height: 500px;"></div>
13+
14+
<script>
15+
let color = 'B'
16+
const stones = []
17+
18+
const render = () => {
19+
const board = React.createElement(GoLib.components.Board, {
20+
width: 500,
21+
height: 500,
22+
size: 19,
23+
positions: stones,
24+
onPositionClick: handleBoardPositionClick,
25+
})
26+
27+
ReactDOM.render(board, document.getElementById('board-wrapper'))
28+
}
29+
30+
const handleBoardPositionClick = (coordinate) => {
31+
stones.push({ color, coordinate })
32+
33+
color = color === 'B' ? 'W' : 'B'
34+
35+
render()
36+
}
37+
38+
render()
39+
</script>
40+
</body>
41+
4742
</html>

‎flow-typed/go-lib.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
// @flow
22

33
declare module 'go-lib' {
4-
declare type Point = {
4+
declare type Coordinate = {
55
x: number,
66
y: number,
77
}
88

9+
declare type Color = 'W' | 'B'
10+
911
declare type Move = {
10-
pos: Point,
11-
color: 'W' | 'B',
12+
coordinate: Coordinate,
13+
color: Color,
1214
}
1315
}

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "go-lib",
3-
"version": "0.1.6",
3+
"version": "0.2.6",
44
"description": "A React Component that renders a GO Board",
55
"author": "Alexander Lücking <[email protected]>",
66
"browser": "dist/go-lib.js",
@@ -9,6 +9,7 @@
99
"jsnext:main": "es/index.js",
1010
"license": "MIT",
1111
"files": [
12+
"components",
1213
"dist",
1314
"lib",
1415
"es",
@@ -40,6 +41,7 @@
4041
"devDependencies": {
4142
"babel-cli": "^6.23.0",
4243
"babel-plugin-external-helpers": "^6.22.0",
44+
"babel-plugin-transform-class-properties": "^6.24.1",
4345
"babel-preset-env": "^1.1.11",
4446
"babel-preset-react": "^6.23.0",
4547
"cross-env": "^4.0.0",

‎src/board.js

-77
This file was deleted.

‎src/components.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// @flow
2+
3+
import Board from './components/board'
4+
5+
export { Board }

‎src/components/board.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// @flow
2+
3+
import type { Move, Coordinate } from 'go-lib'
4+
import React from 'react'
5+
import BoardDrawer from './util/board-drawer'
6+
import * as canvas from './util/canvas'
7+
import * as rules from '../rules'
8+
9+
type BoardDefaultProps = {
10+
size: number,
11+
positions: Array<Move>,
12+
onPositionClick: (coordinate: Coordinate) => void,
13+
}
14+
15+
type BoardProps = BoardDefaultProps & {
16+
width: number,
17+
height: number,
18+
}
19+
20+
// Board draw's a Go Board
21+
class Board extends React.PureComponent<BoardDefaultProps, BoardProps, any> {
22+
static defaultProps = {
23+
size: 19,
24+
positions: [],
25+
onPositionClick: () => {},
26+
}
27+
28+
canvas: HTMLCanvasElement
29+
context: CanvasRenderingContext2D
30+
drawer: BoardDrawer
31+
32+
constructor(props: BoardProps) {
33+
super(props)
34+
35+
const { size, width, height } = props
36+
37+
this.drawer = new BoardDrawer(size, width, height)
38+
}
39+
40+
componentDidMount() {
41+
const { positions, width, height } = this.props
42+
const context = this.canvas.getContext('2d')
43+
44+
this.canvas.width = width
45+
this.canvas.height = height
46+
47+
if (context) {
48+
this.context = context
49+
this.drawer.draw(this.context, positions)
50+
}
51+
}
52+
53+
componentWillReceiveProps(nextProps: BoardProps) {
54+
const { positions } = nextProps
55+
56+
if (this.context) {
57+
this.drawer.draw(this.context, positions)
58+
}
59+
}
60+
61+
handleBoardClick = (e: MouseEvent) => {
62+
const mousePosition = canvas.calculateMousePosition(this.canvas, e)
63+
const boardCoordinate = this.drawer.calculateCoordinateFromMousePosition(
64+
mousePosition,
65+
)
66+
67+
if (rules.isCoordinateOnBoard(boardCoordinate, this.drawer.boardSize)) {
68+
this.props.onPositionClick(boardCoordinate)
69+
}
70+
}
71+
72+
render() {
73+
return (
74+
<canvas ref={c => (this.canvas = c)} onClick={this.handleBoardClick} />
75+
)
76+
}
77+
}
78+
79+
export default Board

‎src/board.test.js ‎src/components/board.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { shallow, render, mount } from 'enzyme'
33
import Board from './board.js'
4-
import { newCanvas2dContextMock } from './board-drawer.test.js'
4+
import { newCanvas2dContextMock } from './util/board-drawer.test.js'
55

66
describe('Board', () => {
77
it('should instantiate without errors', () => {

0 commit comments

Comments
 (0)