diff --git a/packages/server/play-node-go/src/components/GameUI/Board/Board.js b/packages/server/play-node-go/src/components/GameUI/Board/Board.js index dade349..d3599e5 100644 --- a/packages/server/play-node-go/src/components/GameUI/Board/Board.js +++ b/packages/server/play-node-go/src/components/GameUI/Board/Board.js @@ -11,11 +11,13 @@ const Board = (props) => { while (i < boardSize * boardSize) { const posX = Math.floor(i/boardSize) + 1; const posY = i % boardSize + 1; + console.log(board[`${posX}-${posY}`]) boardPoints.push( { - const { posX, posY, user, game, record, dispatch } = props; + const { posX, posY, user, game, record, dispatch, pointData } = props; const turn = game.turn > 0 ? 'black' : 'white'; + + const stone = () => { + if (pointData === 1) return 'black' + if (pointData === -1) return 'white' + return 'none' + } + + const dot = () => { + if (pointData === 'l') return game.turn; + } + const xFlag = () => { if ( posX === 1 ) return `board__point--top` if ( posX === game.boardSize ) return `board__point--bottom` @@ -26,7 +37,6 @@ const Point = (props) => { move: { player: turn, pos: { x: posX, y: posY } } } } - console.log(action) dispatch(action); } @@ -35,6 +45,11 @@ const Point = (props) => { className={`board__point ${xFlag()} ${yFlag()}`} onClick={e => clickHandle(e)} > +
+
+
); diff --git a/packages/server/play-node-go/src/components/GameUI/Point/Point.scss b/packages/server/play-node-go/src/components/GameUI/Point/Point.scss index 02ba919..ceaa175 100644 --- a/packages/server/play-node-go/src/components/GameUI/Point/Point.scss +++ b/packages/server/play-node-go/src/components/GameUI/Point/Point.scss @@ -37,4 +37,34 @@ div.board__point--bottom.board__point--left { div.board__point--bottom.board__point--right { background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); +} + +div.board__point__stone { + width: 85%; + height: 85%; + border-radius: 50%; + margin: auto; + vertical-align: middle; + display: flex; + flex-direction: column; + justify-content: center; +} + +div.board__point div.board__point__stone div.board__point__dot { + width: 35%; + height: 35%; + border-radius: 50%; + margin: auto; + vertical-align: middle; +} + +div.board__point__stone[data-stone="white"] { + background: radial-gradient(farthest-side at 55% 40%, white 0%, rgb(200,200,200) 65%, rgb(100,100,100) 90%, rgb(68, 50, 0) 100%); + box-shadow: -.25vmin .5vmin .5vmin rgba(145, 92, 23, 0.5); +} + +div.board__point__stone[data-stone="black"] { + background-color: black; + background: radial-gradient(farthest-side at 55% 40%, rgb(220,220,220) 0%, rgb(60,60,60) 45%, rgb(15,15,15) 90%, rgb(5, 5, 0) 100%); + box-shadow: -.25vmin .5vmin .5vmin rgba(145, 92, 23, 0.75); } \ No newline at end of file diff --git a/packages/server/play-node-go/src/io.js b/packages/server/play-node-go/src/io.js index 223386b..0797ecd 100644 --- a/packages/server/play-node-go/src/io.js +++ b/packages/server/play-node-go/src/io.js @@ -26,6 +26,13 @@ const launch = (nsp, dispatch) => { socket.on('game_connected', (data) => { console.log(data) console.log('game_connected received') + dispatch({ type: 'GAMES', message: 'UPDATE_BOARD', body: data }) + }) + + socket.on('update_board', (data) => { + console.log(data) + console.log('update_board received') + dispatch({ type: 'GAMES', message: 'UPDATE_BOARD', body: data.board }) }) return socket; diff --git a/packages/server/play-node-go/src/pages/Game/Game.js b/packages/server/play-node-go/src/pages/Game/Game.js index 8ae4227..bf03342 100644 --- a/packages/server/play-node-go/src/pages/Game/Game.js +++ b/packages/server/play-node-go/src/pages/Game/Game.js @@ -41,7 +41,6 @@ const Game = (props) => { useEffect(() => { roomSocketConnect(); }, [state.active] ) - return (
{ dispatch={dispatch} game={state.active.game} record={state.active.record} - user={state.user} + user={state.user} + board={state.board} />

Player Area

diff --git a/packages/server/play-node-go/src/reducers/games/reducer.games.js b/packages/server/play-node-go/src/reducers/games/reducer.games.js index 0a281f2..41cea6b 100644 --- a/packages/server/play-node-go/src/reducers/games/reducer.games.js +++ b/packages/server/play-node-go/src/reducers/games/reducer.games.js @@ -21,6 +21,10 @@ export const gamesReducer = (state: state, action: action):state => { const id = action.body; return {...state, joinGame: id}; + case 'UPDATE_BOARD': + console.log(action.body) + return {...state, board: action.body}; + case 'SET_ACTIVE': return {...state, active: action.body}; diff --git a/packages/server/play-node-go/src/reducers/init/reducer.init.js b/packages/server/play-node-go/src/reducers/init/reducer.init.js index 51cd2ac..e97b7a9 100644 --- a/packages/server/play-node-go/src/reducers/init/reducer.init.js +++ b/packages/server/play-node-go/src/reducers/init/reducer.init.js @@ -17,6 +17,8 @@ export const initState = (): state => { }, record: [] }, + + board: {}, connect: { location: '', type: '' }, diff --git a/packages/server/server/services/Game.js b/packages/server/server/services/Game.js index c0f7650..3de7a1a 100644 --- a/packages/server/server/services/Game.js +++ b/packages/server/server/services/Game.js @@ -99,7 +99,6 @@ class Game { } findPointFromIdx = (arr) => { - console.log(this.boardState) return this.boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] ); } diff --git a/packages/server/server/socket.js b/packages/server/server/socket.js index ee574ab..1a6c4e6 100644 --- a/packages/server/server/socket.js +++ b/packages/server/server/socket.js @@ -27,10 +27,22 @@ io.on('connection', socket=> { }); }); socket.on('make_move', data => { + const { user, move, board, game, room } = data; - console.log(move) - console.log(data) - gameServices.makeMove(1, move) + const gameNsp = `game-${data.game.id}`; + + try { + const updatedBoard = gameServices.makeMove(1, move); + socket.join(gameNsp, () => { + io.of(room).to(gameNsp).emit('update_board', updatedBoard) + }); + } + catch (err) { + socket.join(gameNsp, () => { + io.of(room).to(gameNsp).emit('error', err) + }); + + } }) }); }) diff --git a/packages/server/server/test/gameServices.spec.js b/packages/server/server/test/gameServices.spec.js index 8578ca3..9f146cb 100644 --- a/packages/server/server/test/gameServices.spec.js +++ b/packages/server/server/test/gameServices.spec.js @@ -55,7 +55,7 @@ const fourHandicapBoard = { const moveOneMeta = { gameRecord: [ - {player: 'white', pos: { X:6, Y:3 }} + {player: 'white', pos: { x:6, y:3 }} ], pass: 0, playerState: {