From a4a9a72ecea84c452ef9160be0760d81125baa39 Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Fri, 24 Jan 2020 15:50:47 -0800 Subject: [PATCH] stub socket connection to game id namespace --- .../play-node-go/play-node-go/src/App.js | 2 +- .../play-node-go/src/pages/Game/Game.js | 66 ++++++++++++++++++- .../play-node-go/src/pages/Game/Game.test.js | 7 +- .../play-node-go/src/pages/Room/Room.js | 13 ++-- .../src/reducers/games/stateReducer.games.js | 2 + .../reducers/games/stateReducer.games.test.js | 38 +++++++++++ .../src/services/api/gamesServices.js | 24 +++++++ .../src/services/api/roomsServices.js | 2 + 8 files changed, 145 insertions(+), 9 deletions(-) create mode 100644 packages/server/packages/play-node-go/play-node-go/src/services/api/gamesServices.js diff --git a/packages/server/packages/play-node-go/play-node-go/src/App.js b/packages/server/packages/play-node-go/play-node-go/src/App.js index 1d2bf36..bf8fad1 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/App.js +++ b/packages/server/packages/play-node-go/play-node-go/src/App.js @@ -64,7 +64,7 @@ function App() { - + diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Game/Game.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Game/Game.js index 9198ba2..7a928e9 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/pages/Game/Game.js +++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Game/Game.js @@ -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 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 (

Game

+ {socket ? '✓' : ' ⃠'}
); diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Game/Game.test.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Game/Game.test.js index ec095ab..8e6644f 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/pages/Game/Game.test.js +++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Game/Game.test.js @@ -1,9 +1,14 @@ import React from 'react'; +import { BrowserRouter as Router } from 'react-router-dom' import { render } from '@testing-library/react'; import Game from './Game'; test('renders Game without crashing', () => { - const { getByTestId } = render(); + const { getByTestId } = render( + + + + ); const GameDiv = getByTestId('Game'); expect(GameDiv).toBeInTheDocument(); }); diff --git a/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js b/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js index 5ef0547..7c7b885 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js +++ b/packages/server/packages/play-node-go/play-node-go/src/pages/Room/Room.js @@ -14,7 +14,7 @@ const Room = (props) => { const state = props.state; const dispatch = props.dispatch; const roomId = parseInt(useParams().id) || 0; - const [ socketData, setSocketData ] = useState(false); + const [ socket, setSocket ] = useState(false); const fetchRoomAPI = async () => { const response = await roomsServices.getRoomService(roomId); @@ -39,17 +39,20 @@ const Room = (props) => { roomSocket.emit('connect'); // ! dispatch data roomSocket.on('connect', socket => { - setSocketData(true) + setSocket(true) }); roomSocket.on('join_game_request', data => { + // ! console.log(data) }) roomSocket.on('connect_error', err => { - setSocketData(false) + setSocket(false) + // ! console.log(err); }); roomSocket.on('error', err => { - setSocketData(false) + setSocket(false) + // ! console.log(err); }); } @@ -103,7 +106,7 @@ const Room = (props) => {

{state.currentRoom ? state.currentRoom.name : 'Loading'}

- {socketData ? '✓' : ' ⃠'} + {socket ? '✓' : ' ⃠'} {state.errors.joinGame ? : <>}
diff --git a/packages/server/packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.js b/packages/server/packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.js index 3427d4d..da7a4c4 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.js +++ b/packages/server/packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.js @@ -21,6 +21,8 @@ export const gamesReducer = (state: state, action: action):state => { const id = action.body; return {...state, joinGame: id}; + case 'SET_ACTIVE': + return {...state, active: action.body}; default: return state; diff --git a/packages/server/packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.test.js b/packages/server/packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.test.js index 5b7e966..4b27743 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.test.js +++ b/packages/server/packages/play-node-go/play-node-go/src/reducers/games/stateReducer.games.test.js @@ -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', () => { const state = initState(); const action = {type: 'GAMES', message: '', body: gamesData}; @@ -19,4 +51,10 @@ it('set games returns state with games', () => { const state = initState(); const action = {type: 'GAMES', message: 'SET_GAMES', body: 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}); }) \ No newline at end of file diff --git a/packages/server/packages/play-node-go/play-node-go/src/services/api/gamesServices.js b/packages/server/packages/play-node-go/play-node-go/src/services/api/gamesServices.js new file mode 100644 index 0000000..537ee81 --- /dev/null +++ b/packages/server/packages/play-node-go/play-node-go/src/services/api/gamesServices.js @@ -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 +} \ No newline at end of file diff --git a/packages/server/packages/play-node-go/play-node-go/src/services/api/roomsServices.js b/packages/server/packages/play-node-go/play-node-go/src/services/api/roomsServices.js index 89d78f6..12bbdb9 100644 --- a/packages/server/packages/play-node-go/play-node-go/src/services/api/roomsServices.js +++ b/packages/server/packages/play-node-go/play-node-go/src/services/api/roomsServices.js @@ -25,6 +25,7 @@ const getRoomService = async (roomIndex) => { ) .then(res => res.text()) .then(text => JSON.parse(text)) + .then(obj => { obj.games = obj.roomGames.map(game => { 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, {playerWhiteRank: game.player_white_rank }).player_white_rank; delete Object.assign(game, {winType: game.win_type }).win_type; + return game; }) return obj;