patch useContext dependencies in Game component
This commit is contained in:
parent
97242a2235
commit
77ced54c6f
3 changed files with 75 additions and 77 deletions
|
@ -1,43 +1,48 @@
|
|||
import socketIOClient from 'socket.io-client';
|
||||
import config from './config';
|
||||
import socketIOClient from "socket.io-client";
|
||||
import config from "./config";
|
||||
|
||||
const launch = (nsp, dispatch) => {
|
||||
const socket = socketIOClient(`${config.socketAddress}/${nsp}`);
|
||||
|
||||
socket.on('connected', () => {
|
||||
dispatch({ type:'SOCKET', message:'CONNECTED', body:{nsp: socket.nsp} });
|
||||
socket.on("connected", () => {
|
||||
dispatch({
|
||||
type: "SOCKET",
|
||||
message: "CONNECTED",
|
||||
body: { nsp: socket.nsp },
|
||||
});
|
||||
socket.on('connect_error', err => {
|
||||
dispatch({ type: 'ERR', message:'SOCKET_ERROR', body: { socketError: err }});
|
||||
});
|
||||
socket.on('error', err => {
|
||||
dispatch({ type: 'ERR', message:'SOCKET_ERROR', body: { socketError: err } });
|
||||
socket.on("connect_error", (err) => {
|
||||
dispatch({
|
||||
type: "ERR",
|
||||
message: "SOCKET_ERROR",
|
||||
body: { socketError: err },
|
||||
});
|
||||
});
|
||||
socket.on("error", (err) => {
|
||||
dispatch({
|
||||
type: "ERR",
|
||||
message: "SOCKET_ERROR",
|
||||
body: { socketError: err },
|
||||
});
|
||||
});
|
||||
|
||||
socket.on('room_connected', (data) => {
|
||||
dispatch({ type: 'ROOMS', message: 'CONNECT_ROOM', body: data });
|
||||
socket.on("room_connected", (data) => {
|
||||
dispatch({ type: "ROOMS", message: "CONNECT_ROOM", body: data });
|
||||
});
|
||||
|
||||
socket.on('new_user', (data) => {
|
||||
console.log('new_user received')
|
||||
dispatch({ type: 'ROOMS', message: 'NEW_USER', body: data })
|
||||
})
|
||||
socket.on("new_user", (data) => {
|
||||
dispatch({ type: "ROOMS", message: "NEW_USER", body: data });
|
||||
});
|
||||
|
||||
socket.on('game_connected', (data) => {
|
||||
console.log(data)
|
||||
console.log('game_connected received')
|
||||
dispatch({ type: 'GAMES', message: 'UPDATE_BOARD', body: data })
|
||||
})
|
||||
socket.on("game_connected", (data) => {
|
||||
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 })
|
||||
})
|
||||
socket.on("update_board", (data) => {
|
||||
dispatch({ type: "GAMES", message: "UPDATE_BOARD", body: data });
|
||||
});
|
||||
|
||||
return socket;
|
||||
}
|
||||
};
|
||||
|
||||
export {
|
||||
launch
|
||||
}
|
||||
export { launch };
|
||||
|
|
|
@ -11,6 +11,8 @@ const Game = (props) => {
|
|||
const gameId = parseInt(useParams().id) || 0;
|
||||
const [playerBlackMeta, setPlayerBlackMeta] = useState({});
|
||||
const [playerWhiteMeta, setPlayerWhiteMeta] = useState({});
|
||||
const playerState = state?.meta?.playerState;
|
||||
const game = state.active?.game;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchGameAPI = async () => {
|
||||
|
@ -42,14 +44,9 @@ const Game = (props) => {
|
|||
}, [state.active.game, dispatch, state.user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!state.meta) return;
|
||||
const {
|
||||
playerBlack,
|
||||
playerBlackRank,
|
||||
playerWhite,
|
||||
playerWhiteRank,
|
||||
} = state.active.game;
|
||||
const { bCaptures, wCaptures } = state.meta.playerState;
|
||||
if (!game || !playerState) return;
|
||||
const { playerBlack, playerBlackRank, playerWhite, playerWhiteRank } = game;
|
||||
const { bCaptures, wCaptures } = playerState;
|
||||
setPlayerBlackMeta({
|
||||
player: playerBlack,
|
||||
rank: playerBlackRank,
|
||||
|
@ -62,7 +59,7 @@ const Game = (props) => {
|
|||
captures: wCaptures,
|
||||
stones: "white",
|
||||
});
|
||||
}, [state?.meta?.playerState, state.active?.game]);
|
||||
}, [playerState, game]);
|
||||
|
||||
return (
|
||||
<div className="Game" data-testid="Game">
|
||||
|
|
|
@ -1,69 +1,65 @@
|
|||
import { stateReducer } from '../reducer';
|
||||
const io = require('../../io');
|
||||
import { stateReducer } from "../reducer";
|
||||
const io = require("../../io");
|
||||
|
||||
export const socketReducer = (state, action) => {
|
||||
switch(action.message) {
|
||||
switch (action.message) {
|
||||
case "CONNECTED":
|
||||
return { ...state, connect: { type: "home", location: action.body.nsp } };
|
||||
|
||||
case 'CONNECTED':
|
||||
console.log(action.body.nsp)
|
||||
return {...state, connect: { type: 'home', location: action.body.nsp } }
|
||||
|
||||
case 'LAUNCH': {
|
||||
const {nsp, dispatch} = action.body;
|
||||
case "LAUNCH": {
|
||||
const { nsp, dispatch } = action.body;
|
||||
const launchedSocket = io.launch(nsp, dispatch);
|
||||
return {...state, socket: launchedSocket};
|
||||
return { ...state, socket: launchedSocket };
|
||||
}
|
||||
|
||||
case 'CONNECT_ROOM': {
|
||||
const {user, room, dispatch} = action.body;
|
||||
case "CONNECT_ROOM": {
|
||||
const { user, room, dispatch } = action.body;
|
||||
let priorSocket = state.socket;
|
||||
if (!priorSocket.nsp) {
|
||||
priorSocket = io.launch('', dispatch)
|
||||
priorSocket = io.launch("", dispatch);
|
||||
}
|
||||
if (priorSocket.nsp !== `/${room}`) {
|
||||
priorSocket.emit('connect_room', {user, room});
|
||||
priorSocket.emit("connect_room", { user, room });
|
||||
priorSocket.close();
|
||||
}
|
||||
const socket = io.launch(room, dispatch);
|
||||
return {...state, socket}
|
||||
return { ...state, socket };
|
||||
}
|
||||
|
||||
case 'CONNECT_GAME': {
|
||||
case "CONNECT_GAME": {
|
||||
return connectGame(state, action);
|
||||
}
|
||||
|
||||
case 'MAKE_MOVE': {
|
||||
case "MAKE_MOVE": {
|
||||
return makeMove(state, action);
|
||||
}
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function connectGame (state, action) {
|
||||
function connectGame(state, action) {
|
||||
const { user, game, dispatch } = action.body;
|
||||
const priorSocket = state.socket;
|
||||
let updatedState;
|
||||
if ( !priorSocket.nsp || priorSocket.nsp !== `/${game.room}` ) {
|
||||
if (!priorSocket.nsp || priorSocket.nsp !== `/${game.room}`) {
|
||||
const connectRoomAction = {
|
||||
type: 'SOCKET',
|
||||
message: 'CONNECT_ROOM',
|
||||
body: { user, room: game.room, dispatch}
|
||||
}
|
||||
type: "SOCKET",
|
||||
message: "CONNECT_ROOM",
|
||||
body: { user, room: game.room, dispatch },
|
||||
};
|
||||
updatedState = stateReducer(state, connectRoomAction);
|
||||
|
||||
}
|
||||
if (!updatedState) updatedState = {...state};
|
||||
if (!updatedState) updatedState = { ...state };
|
||||
const socket = updatedState.socket;
|
||||
socket.emit('connect_game', {user, game});
|
||||
return {...updatedState};
|
||||
socket.emit("connect_game", { user, game });
|
||||
return { ...updatedState };
|
||||
}
|
||||
|
||||
function makeMove (state, action) {
|
||||
function makeMove(state, action) {
|
||||
// const { user, game, room, board, move } = action.body;
|
||||
const socket = state.socket;
|
||||
console.log(action)
|
||||
socket.emit('make_move', {...action.body});
|
||||
socket.emit("make_move", { ...action.body });
|
||||
return state;
|
||||
}
|
Loading…
Reference in a new issue