stub render board state from make_move

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(
         <Point 
           key={`${posX}-${posY}`} 
           posX={posX}
           posY={posY}
+          pointData={board[`${posX}-${posY}`]}
           // point={board[posX][posY]}
           dispatch={dispatch}
           {...props}

play-node-go/src/components/GameUI/Point/Point.js

@@ -2,8 +2,19 @@ import React from 'react';
 import './Point.scss';
 
 const Point = (props) => {
-  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)}
     >
+      <div className="board__point__stone" 
+        data-stone={stone()}
+      >
+        <div className="board__point__dot" data-dot={dot()}></div>
+      </div>
 
     </div>
   );

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);
 }

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;

play-node-go/src/pages/Game/Game.js

@@ -41,7 +41,6 @@ const Game = (props) => {
   useEffect(() => {
     roomSocketConnect();
   }, [state.active] )
-
   return (  
     <div 
       className="Game" 
@@ -63,7 +62,8 @@ const Game = (props) => {
           dispatch={dispatch}
           game={state.active.game} 
           record={state.active.record}
-          user={state.user} 
+          user={state.user}
+          board={state.board}
         />
         <p>Player Area</p>
         <ul><li>Captures</li><li>? Kifu</li><li>Bowl</li></ul>

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};
       

play-node-go/src/reducers/init/reducer.init.js

@@ -17,6 +17,8 @@ export const initState = (): state => {
       },
       record: []
     },
+
+    board: {},
     
     connect: { location: '', type: '' },
     

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] );
   }
 

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)
+          });
+
+        }
       })
     });
   })

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: {