stub render board state from make_move
This commit is contained in:
Sorrel Bri
sorrelbri
parent
9b82236283
commit
72a533a285
10 changed files with 80 additions and 9 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ export const initState = (): state => {
|
|||
},
|
||||
record: []
|
||||
},
|
||||
|
||||
board: {},
|
||||
|
||||
connect: { location: '', type: '' },
|
||||
|
||||
|
|
|
|||
|
|
@ -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] );
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
});
|
||||
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue