stub render board state from make_move
This commit is contained in:
parent
279f27349f
commit
ddc7ac8548
10 changed files with 80 additions and 9 deletions
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -38,3 +38,33 @@ 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);
|
||||||
|
}
|
|
@ -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;
|
||||||
|
|
|
@ -41,7 +41,6 @@ const Game = (props) => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
roomSocketConnect();
|
roomSocketConnect();
|
||||||
}, [state.active] )
|
}, [state.active] )
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="Game"
|
className="Game"
|
||||||
|
@ -64,6 +63,7 @@ const Game = (props) => {
|
||||||
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>
|
||||||
|
|
|
@ -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};
|
||||||
|
|
||||||
|
|
|
@ -18,6 +18,8 @@ export const initState = (): state => {
|
||||||
record: []
|
record: []
|
||||||
},
|
},
|
||||||
|
|
||||||
|
board: {},
|
||||||
|
|
||||||
connect: { location: '', type: '' },
|
connect: { location: '', type: '' },
|
||||||
|
|
||||||
currentRoom: {
|
currentRoom: {
|
||||||
|
|
|
@ -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] );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
Loading…
Reference in a new issue