stub game connection via socket room
This commit is contained in:
parent
e02746cb67
commit
5651e1fa4c
6 changed files with 89 additions and 39 deletions
|
@ -23,6 +23,11 @@ const launch = (nsp, dispatch) => {
|
||||||
dispatch({ type: 'ROOMS', message: 'NEW_USER', body: data })
|
dispatch({ type: 'ROOMS', message: 'NEW_USER', body: data })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
socket.on('game_connected', (data) => {
|
||||||
|
console.log(data)
|
||||||
|
console.log('game_connected received')
|
||||||
|
})
|
||||||
|
|
||||||
return socket;
|
return socket;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,12 +10,9 @@ import Development from '../../components/Display/Development/Development';
|
||||||
const Game = (props) => {
|
const Game = (props) => {
|
||||||
const { state, dispatch } = props;
|
const { state, dispatch } = props;
|
||||||
const gameId = parseInt(useParams().id) || 0;
|
const gameId = parseInt(useParams().id) || 0;
|
||||||
const [ socket, setSocket ] = useState(false)
|
|
||||||
|
|
||||||
const fetchGameAPI = async () => {
|
const fetchGameAPI = async () => {
|
||||||
console.log(gameId)
|
|
||||||
const response = await gamesServices.getGameService(gameId);
|
const response = await gamesServices.getGameService(gameId);
|
||||||
console.log(response)
|
|
||||||
if (response) {
|
if (response) {
|
||||||
const action = {
|
const action = {
|
||||||
type: 'GAMES',
|
type: 'GAMES',
|
||||||
|
@ -32,37 +29,21 @@ const Game = (props) => {
|
||||||
|
|
||||||
// ! [start] gameSocket
|
// ! [start] gameSocket
|
||||||
|
|
||||||
const roomSocketConnect = (roomSocket) => {
|
const roomSocketConnect = () => {
|
||||||
roomSocket.on('connect', socket => {
|
const game = state.active.game;
|
||||||
roomSocket.emit('joined game', gameId)
|
const user = state.user;
|
||||||
roomSocket.on('success', () => setSocket(true))
|
const action = {
|
||||||
});
|
type: 'SOCKET',
|
||||||
roomSocket.on('connect_error', err => {
|
message: 'CONNECT_GAME',
|
||||||
setSocket(false)
|
body: { game, user, dispatch }
|
||||||
console.log(err);
|
}
|
||||||
});
|
return dispatch(action);
|
||||||
roomSocket.on('error', err => {
|
|
||||||
setSocket(false)
|
|
||||||
console.log(err);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!state.active) return;
|
roomSocketConnect();
|
||||||
const roomSocket = socketIOClient(`${config.socketAddress}/${state.active.game.room}`)
|
|
||||||
roomSocketConnect(roomSocket);
|
|
||||||
}, [state.active] )
|
}, [state.active] )
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const data = {
|
|
||||||
user: state.user,
|
|
||||||
game: state.joinGame
|
|
||||||
};
|
|
||||||
console.log('emitting request')
|
|
||||||
console.log(data)
|
|
||||||
// socket.emit('join_game_request', data)
|
|
||||||
}, [state.joinGame])
|
|
||||||
|
|
||||||
// ! [end]
|
// ! [end]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -74,7 +55,7 @@ const Game = (props) => {
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className="Game__socket-flag"
|
className="Game__socket-flag"
|
||||||
>{socket ? '✓' : ' ⃠'}</span>
|
>{state.socket ? '✓' : ' ⃠'}</span>
|
||||||
|
|
||||||
<Development />
|
<Development />
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,7 @@ const state = initState();
|
||||||
test('renders Game without crashing', () => {
|
test('renders Game without crashing', () => {
|
||||||
const { getByTestId } = render(
|
const { getByTestId } = render(
|
||||||
<Router>
|
<Router>
|
||||||
<Game state={state} />
|
<Game state={state} dispatch={()=>{}}/>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
const GameDiv = getByTestId('Game');
|
const GameDiv = getByTestId('Game');
|
||||||
|
|
|
@ -5,22 +5,44 @@ const socket = require('../../io');
|
||||||
|
|
||||||
export const initState = (): state => {
|
export const initState = (): state => {
|
||||||
return {
|
return {
|
||||||
user: { username: '', email: '', id: 0 },
|
active: {
|
||||||
|
game: {
|
||||||
|
id: 0, room: 0,
|
||||||
|
mainTime: '', timePeriod: 0, periodLength: 0, overtime: '', overtimePeriod: 0, overtimeLength: 0,
|
||||||
|
application: '', applicationVersion: '', open: false, description: null,
|
||||||
|
event: null, round: null, name: null,
|
||||||
|
winType: null, capturesBlack: null, capturesWhite: null, score: null,
|
||||||
|
boardSize: 0, komi: 0.0, handicap: 0,
|
||||||
|
playerBlack: '', playerBlackRank: '', playerWhite: '', playerWhiteRank: '',
|
||||||
|
},
|
||||||
|
record: []
|
||||||
|
},
|
||||||
|
|
||||||
|
connect: { location: '', type: '' },
|
||||||
|
|
||||||
|
currentRoom: {
|
||||||
|
description: '', id: 0, language: '', name: ''
|
||||||
|
},
|
||||||
|
|
||||||
errors: {},
|
errors: {},
|
||||||
currentRoom: { description: '', id: 0, language: '', name: '' },
|
|
||||||
messages: [ {
|
|
||||||
admin: false, content: '', username: ''
|
|
||||||
} ],
|
|
||||||
games: [ {
|
games: [ {
|
||||||
boardSize: 0, handicap: 0, id: 0, komi: 0.0, open: false,
|
boardSize: 0, handicap: 0, id: 0, komi: 0.0, open: false,
|
||||||
playerBlack: '', playerBlackRank: '', playerWhite: '',
|
playerBlack: '', playerBlackRank: '', playerWhite: '',
|
||||||
playerWhiteRank: '', winType: null
|
playerWhiteRank: '', winType: null
|
||||||
} ],
|
} ],
|
||||||
|
|
||||||
joinGame: {},
|
joinGame: {},
|
||||||
|
|
||||||
|
messages: [ {
|
||||||
|
admin: false, content: '', username: ''
|
||||||
|
} ],
|
||||||
|
|
||||||
socket: {
|
socket: {
|
||||||
connected: false,
|
connected: false,
|
||||||
nsp: ''
|
nsp: ''
|
||||||
},
|
},
|
||||||
connect: { location: '', type: '' }
|
|
||||||
|
user: { username: '', email: '', id: 0 }
|
||||||
};
|
};
|
||||||
}
|
}
|
|
@ -30,7 +30,30 @@ export const socketReducer = (state: state, action: action):state => {
|
||||||
return {...state, socket}
|
return {...state, socket}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
case 'CONNECT_GAME': {
|
||||||
|
return connectGame(state, action);
|
||||||
|
}
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function connectGame (state, action) {
|
||||||
|
const { user, game, dispatch } = action.body;
|
||||||
|
const priorSocket = state.socket;
|
||||||
|
let updatedState;
|
||||||
|
if ( !priorSocket.nsp || priorSocket.nsp !== `/${game.room}` ) {
|
||||||
|
const connectRoomAction = {
|
||||||
|
type: 'SOCKET',
|
||||||
|
message: 'CONNECT_ROOM',
|
||||||
|
body: { user, room: game.room, dispatch}
|
||||||
|
}
|
||||||
|
updatedState = stateReducer(state, connectRoomAction);
|
||||||
|
|
||||||
|
}
|
||||||
|
if (!updatedState) updatedState = {...state};
|
||||||
|
const socket = updatedState.socket;
|
||||||
|
socket.emit('connect_game', {user, game});
|
||||||
|
return {...updatedState};
|
||||||
|
}
|
|
@ -14,6 +14,25 @@ const getGameService = async (gameIndex) => {
|
||||||
)
|
)
|
||||||
.then(res => res.text())
|
.then(res => res.text())
|
||||||
.then(text => JSON.parse(text))
|
.then(text => JSON.parse(text))
|
||||||
|
.then(obj => {
|
||||||
|
// Reformat from SQL coluumn name convention to JS
|
||||||
|
delete Object.assign(obj.game, {applicationVersion: obj.game.application_version }).application_version;
|
||||||
|
delete Object.assign(obj.game, {boardSize: obj.game.board_size }).board_size;
|
||||||
|
delete Object.assign(obj.game, {playerBlack: obj.game.player_black }).player_black;
|
||||||
|
delete Object.assign(obj.game, {playerBlackRank: obj.game.player_black_rank }).player_black_rank;
|
||||||
|
delete Object.assign(obj.game, {playerWhite: obj.game.player_white }).player_white;
|
||||||
|
delete Object.assign(obj.game, {playerWhiteRank: obj.game.player_white_rank }).player_white_rank;
|
||||||
|
delete Object.assign(obj.game, {capturesWhite: obj.game.captures_white }).captures_white;
|
||||||
|
delete Object.assign(obj.game, {capturesBlack: obj.game.captures_black }).captures_black;
|
||||||
|
delete Object.assign(obj.game, {mainTime: obj.game.main_time }).main_time;
|
||||||
|
delete Object.assign(obj.game, {timePeriod: obj.game.time_period }).time_period;
|
||||||
|
delete Object.assign(obj.game, {periodLength: obj.game.period_length }).period_length;
|
||||||
|
delete Object.assign(obj.game, {overtimePeriod: obj.game.overtime_period }).overtime_period;
|
||||||
|
delete Object.assign(obj.game, {overtimeLength: obj.game.overtime_length }).overtime_length;
|
||||||
|
delete Object.assign(obj.game, {winType: obj.game.win_type }).win_type;
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
})
|
||||||
.catch(err => err);
|
.catch(err => err);
|
||||||
|
|
||||||
return response;
|
return response;
|
||||||
|
|
Loading…
Reference in a new issue