stub socket connection to game id namespace

This commit is contained in:
Sorrel Bri 2020-01-24 15:50:47 -08:00 committed by sorrelbri
parent 026af700df
commit a4a9a72ece
8 changed files with 145 additions and 9 deletions

View file

@ -64,7 +64,7 @@ function App() {
<MainWrapper page="room" state={state} dispatch={dispatch}/> <MainWrapper page="room" state={state} dispatch={dispatch}/>
</Route> </Route>
<Route path="/games"> <Route path="/games/:id">
<MainWrapper page="game" state={state} dispatch={dispatch}/> <MainWrapper page="game" state={state} dispatch={dispatch}/>
</Route> </Route>

View file

@ -1,12 +1,74 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import socketIOClient from 'socket.io-client';
import config from '../../config';
import gamesServices from '../../services/api/gamesServices';
import './Game.scss'; import './Game.scss';
import Development from '../../components/Display/Development/Development'; import Development from '../../components/Display/Development/Development';
const Game = () => { const Game = (props) => {
const { state, dispatch } = props;
const gameId = parseInt(useParams().id) || 0;
const [ socket, setSocket ] = useState(false)
const fetchGameAPI = async () => {
console.log(gameId)
const response = await gamesServices.getGameService(gameId);
console.log(response)
if (response) {
const action = {
type: 'GAMES',
message: 'SET_ACTIVE',
body: response
}
return dispatch(action);
}
}
useEffect(() => {
fetchGameAPI();
}, [])
// ! [start] gameSocket
const roomSocketConnect = (roomSocket) => {
roomSocket.on('connect', socket => {
roomSocket.emit('joined game', gameId)
roomSocket.on('success', () => setSocket(true))
});
roomSocket.on('connect_error', err => {
setSocket(false)
console.log(err);
});
roomSocket.on('error', err => {
setSocket(false)
console.log(err);
});
}
useEffect(() => {
if (!state.active) return;
const roomSocket = socketIOClient(`${config.socketAddress}/${state.active.game.room}`)
roomSocketConnect(roomSocket);
}, [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]
return ( return (
<div className="Game" data-testid="Game"> <div className="Game" data-testid="Game">
<p>Game</p> <p>Game</p>
<span className="Room__connection">{socket ? '✓' : ' ⃠'}</span>
<Development /> <Development />
</div> </div>
); );

View file

@ -1,9 +1,14 @@
import React from 'react'; import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import Game from './Game'; import Game from './Game';
test('renders Game without crashing', () => { test('renders Game without crashing', () => {
const { getByTestId } = render(<Game />); const { getByTestId } = render(
<Router>
<Game />
</Router>
);
const GameDiv = getByTestId('Game'); const GameDiv = getByTestId('Game');
expect(GameDiv).toBeInTheDocument(); expect(GameDiv).toBeInTheDocument();
}); });

View file

@ -14,7 +14,7 @@ const Room = (props) => {
const state = props.state; const state = props.state;
const dispatch = props.dispatch; const dispatch = props.dispatch;
const roomId = parseInt(useParams().id) || 0; const roomId = parseInt(useParams().id) || 0;
const [ socketData, setSocketData ] = useState(false); const [ socket, setSocket ] = useState(false);
const fetchRoomAPI = async () => { const fetchRoomAPI = async () => {
const response = await roomsServices.getRoomService(roomId); const response = await roomsServices.getRoomService(roomId);
@ -39,17 +39,20 @@ const Room = (props) => {
roomSocket.emit('connect'); roomSocket.emit('connect');
// ! dispatch data // ! dispatch data
roomSocket.on('connect', socket => { roomSocket.on('connect', socket => {
setSocketData(true) setSocket(true)
}); });
roomSocket.on('join_game_request', data => { roomSocket.on('join_game_request', data => {
// !
console.log(data) console.log(data)
}) })
roomSocket.on('connect_error', err => { roomSocket.on('connect_error', err => {
setSocketData(false) setSocket(false)
// !
console.log(err); console.log(err);
}); });
roomSocket.on('error', err => { roomSocket.on('error', err => {
setSocketData(false) setSocket(false)
// !
console.log(err); console.log(err);
}); });
} }
@ -103,7 +106,7 @@ const Room = (props) => {
<div className="Room" data-testid="Room"> <div className="Room" data-testid="Room">
<div className="Room__heading"> <div className="Room__heading">
<h2>{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2> <h2>{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
<span className="Room__connection">{socketData ? '✓' : ' ⃠'}</span> <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span>
{state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>} {state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
</div> </div>

View file

@ -21,6 +21,8 @@ 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 'SET_ACTIVE':
return {...state, active: action.body};
default: default:
return state; return state;

View file

@ -9,6 +9,38 @@ const gamesData = [
} }
]; ];
const activeGameData = {
game: {
id: 1,
application: "node-go",
application_version: "0.1.0",
board_size: 19,
komi: 6.5,
handicap: 0,
open: false,
win_type: null,
player_black: "user-one",
player_black_rank: "UR",
player_white: "user-two",
player_white_rank: "UR",
black_captures: null,
white_captures: null,
score: null,
description: null,
event: null,
round: null,
name: null,
room: 1,
main_time: "untimed",
time_period: 1,
period_length: 0,
overtime: "untimed",
overtime_period: 0,
overtime_length: 0
},
record: []
}
it('default returns state unaltered', () => { it('default returns state unaltered', () => {
const state = initState(); const state = initState();
const action = {type: 'GAMES', message: '', body: gamesData}; const action = {type: 'GAMES', message: '', body: gamesData};
@ -19,4 +51,10 @@ it('set games returns state with games', () => {
const state = initState(); const state = initState();
const action = {type: 'GAMES', message: 'SET_GAMES', body: gamesData}; const action = {type: 'GAMES', message: 'SET_GAMES', body: gamesData};
expect(stateReducer(state, action)).toEqual({...state, games: gamesData}); expect(stateReducer(state, action)).toEqual({...state, games: gamesData});
})
it('active game returns state with active game details', () => {
const state = initState();
const action = {type: 'GAMES', message: 'SET_ACTIVE', body: activeGameData};
expect(stateReducer(state, action)).toEqual({...state, active: activeGameData});
}) })

View file

@ -0,0 +1,24 @@
import config from '../../config';
const apiAddress = config.apiAddress;
const gamesAddress = `${apiAddress}/games`
var headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Sec-Fetch-Site', 'cross-site')
const getGameService = async (gameIndex) => {
const response = await fetch(`${gamesAddress}/${gameIndex}`,
{method: 'GET', credentials: 'include', headers: headers}
)
.then(res => res.text())
.then(text => JSON.parse(text))
.catch(err => err);
return response;
}
export default {
getGameService
}

View file

@ -25,6 +25,7 @@ const getRoomService = async (roomIndex) => {
) )
.then(res => res.text()) .then(res => res.text())
.then(text => JSON.parse(text)) .then(text => JSON.parse(text))
.then(obj => { .then(obj => {
obj.games = obj.roomGames.map(game => { obj.games = obj.roomGames.map(game => {
delete Object.assign(game, {boardSize: game.board_size }).board_size; delete Object.assign(game, {boardSize: game.board_size }).board_size;
@ -33,6 +34,7 @@ const getRoomService = async (roomIndex) => {
delete Object.assign(game, {playerWhite: game.player_white }).player_white; delete Object.assign(game, {playerWhite: game.player_white }).player_white;
delete Object.assign(game, {playerWhiteRank: game.player_white_rank }).player_white_rank; delete Object.assign(game, {playerWhiteRank: game.player_white_rank }).player_white_rank;
delete Object.assign(game, {winType: game.win_type }).win_type; delete Object.assign(game, {winType: game.win_type }).win_type;
return game; return game;
}) })
return obj; return obj;