stub socket connection to game id namespace
This commit is contained in:
parent
026af700df
commit
a4a9a72ece
8 changed files with 145 additions and 9 deletions
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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();
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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});
|
||||||
})
|
})
|
|
@ -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
|
||||||
|
}
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue