stub render board state from make_move

This commit is contained in:
Sorrel Bri 2020-01-31 22:22:43 -08:00 committed by sorrelbri
parent 9b82236283
commit 72a533a285
10 changed files with 80 additions and 9 deletions

View file

@ -11,11 +11,13 @@ const Board = (props) => {
while (i < boardSize * boardSize) { while (i < boardSize * boardSize) {
const posX = Math.floor(i/boardSize) + 1; const posX = Math.floor(i/boardSize) + 1;
const posY = i % boardSize + 1; const posY = i % boardSize + 1;
console.log(board[`${posX}-${posY}`])
boardPoints.push( boardPoints.push(
<Point <Point
key={`${posX}-${posY}`} key={`${posX}-${posY}`}
posX={posX} posX={posX}
posY={posY} posY={posY}
pointData={board[`${posX}-${posY}`]}
// point={board[posX][posY]} // point={board[posX][posY]}
dispatch={dispatch} dispatch={dispatch}
{...props} {...props}

View file

@ -2,8 +2,19 @@ import React from 'react';
import './Point.scss'; import './Point.scss';
const Point = (props) => { 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 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 = () => { const xFlag = () => {
if ( posX === 1 ) return `board__point--top` if ( posX === 1 ) return `board__point--top`
if ( posX === game.boardSize ) return `board__point--bottom` if ( posX === game.boardSize ) return `board__point--bottom`
@ -26,7 +37,6 @@ const Point = (props) => {
move: { player: turn, pos: { x: posX, y: posY } } move: { player: turn, pos: { x: posX, y: posY } }
} }
} }
console.log(action)
dispatch(action); dispatch(action);
} }
@ -35,6 +45,11 @@ const Point = (props) => {
className={`board__point ${xFlag()} ${yFlag()}`} className={`board__point ${xFlag()} ${yFlag()}`}
onClick={e => clickHandle(e)} onClick={e => clickHandle(e)}
> >
<div className="board__point__stone"
data-stone={stone()}
>
<div className="board__point__dot" data-dot={dot()}></div>
</div>
</div> </div>
); );

View file

@ -37,4 +37,34 @@ div.board__point--bottom.board__point--left {
div.board__point--bottom.board__point--right { 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%); 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);
} }

View file

@ -26,6 +26,13 @@ const launch = (nsp, dispatch) => {
socket.on('game_connected', (data) => { socket.on('game_connected', (data) => {
console.log(data) console.log(data)
console.log('game_connected received') 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; return socket;

View file

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

View file

@ -21,6 +21,10 @@ export const gamesReducer = (state: state, action: action):state => {
const id = action.body; const id = action.body;
return {...state, joinGame: id}; return {...state, joinGame: id};
case 'UPDATE_BOARD':
console.log(action.body)
return {...state, board: action.body};
case 'SET_ACTIVE': case 'SET_ACTIVE':
return {...state, active: action.body}; return {...state, active: action.body};

View file

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

View file

@ -99,7 +99,6 @@ class Game {
} }
findPointFromIdx = (arr) => { findPointFromIdx = (arr) => {
console.log(this.boardState)
return this.boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] ); return this.boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
} }

View file

@ -27,10 +27,22 @@ io.on('connection', socket=> {
}); });
}); });
socket.on('make_move', data => { socket.on('make_move', data => {
const { user, move, board, game, room } = data; const { user, move, board, game, room } = data;
console.log(move) const gameNsp = `game-${data.game.id}`;
console.log(data)
gameServices.makeMove(1, move) 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)
});
}
}) })
}); });
}) })

View file

@ -55,7 +55,7 @@ const fourHandicapBoard = {
const moveOneMeta = { const moveOneMeta = {
gameRecord: [ gameRecord: [
{player: 'white', pos: { X:6, Y:3 }} {player: 'white', pos: { x:6, y:3 }}
], ],
pass: 0, pass: 0,
playerState: { playerState: {