connect FE submit resign to BE game service

This commit is contained in:
sorrelbri 2020-06-07 13:47:09 -07:00
parent 77ced54c6f
commit 17b2e2c31f
7 changed files with 108 additions and 39 deletions

View file

@ -1,7 +1,7 @@
import React from "react";
import "./PlayerArea.scss";
const PlayerArea = ({ playerMeta, turn }) => {
const PlayerArea = ({ handleResignClick, playerMeta, turn }) => {
const { stones, player, rank, captures } = playerMeta;
const isTurn =
(stones === "black" && turn === 1) || (stones === "white" && turn === -1);
@ -28,6 +28,7 @@ const PlayerArea = ({ playerMeta, turn }) => {
>
<p
className={`player-container__resign-message player-container__resign-message--${stones}`}
{...(isTurn ? { onClick: () => handleResignClick(stones) } : null)}
>
Resign?
</p>

View file

@ -42,6 +42,10 @@ const launch = (nsp, dispatch) => {
dispatch({ type: "GAMES", message: "UPDATE_BOARD", body: data });
});
socket.on("game_resign", (data) => {
dispatch({ type: "GAMES", message: "GAME_RESIGN", body: data });
});
return socket;
};

View file

@ -61,17 +61,39 @@ const Game = (props) => {
});
}, [playerState, game]);
const handleResignClick = (player) => {
const action = {
type: "SOCKET",
message: "RESIGN",
body: { game, player },
};
dispatch(action);
};
return (
<div className="Game" data-testid="Game">
<div className="Game__meta-container">
<span className="Game__socket-flag">{state.socket ? "✓" : " ⃠"}</span>
<Logo />
{state?.meta?.winner ? (
<p>
{`winner: ${
state.meta.winner === 1
? playerBlackMeta?.player
: playerWhiteMeta?.player
}
`}
</p>
) : (
<></>
)}
<p>Timer</p>
<p>? Game Tree</p>
</div>
<div className="Game__board-container">
<PlayerArea
handleResignClick={handleResignClick}
playerMeta={
state.user &&
playerBlackMeta.playerBlack &&
@ -90,6 +112,7 @@ const Game = (props) => {
board={state.board}
/>
<PlayerArea
handleResignClick={handleResignClick}
playerMeta={
state.user &&
playerBlackMeta.playerWhite &&

View file

@ -1,62 +1,77 @@
import { stateReducer } from '../reducer';
import { stateReducer } from "../reducer";
export const gamesReducer = (state, action) => {
switch(action.message) {
switch (action.message) {
case "SET_GAMES": {
const games = formatGames(action);
return { ...state, games };
}
case 'SET_GAMES':
const games = formatGames(action);;
return {...state, games};
case 'JOIN_REQUEST':
case "JOIN_REQUEST": {
if (!Object.entries(state.user).length) {
const errAction = {
type: 'ERR',
message: 'JOIN_GAME_ERROR',
body: {joinGameError: 'user not logged in'}
}
return stateReducer(state, errAction)
type: "ERR",
message: "JOIN_GAME_ERROR",
body: { joinGameError: "user not logged in" },
};
return stateReducer(state, errAction);
}
const id = action.body;
return {...state, joinGame: id};
return { ...state, joinGame: id };
}
case 'UPDATE_BOARD':
case "UPDATE_BOARD": {
const { gameRecord, pass, turn, winner, playerState } = action.body.meta;
return {...state, board: action.body.board, meta: {gameRecord, pass, turn, winner, playerState } };
return {
...state,
board: action.body.board,
meta: { gameRecord, pass, turn, winner, playerState },
};
}
case 'SET_ACTIVE':
return {...state, active: action.body};
default:
case "GAME_RESIGN": {
const { gameRecord, pass, turn, winner, playerState } = action.body.meta;
return {
...state,
meta: { gameRecord, pass, turn, winner, playerState },
};
}
case "SET_ACTIVE": {
return { ...state, active: action.body };
}
default: {
return state;
}
}
}
};
function parseRank(rank) {
switch(rank[0]) {
case 'D':
return `${rank.slice(1)}${rank[0].toLowerCase()}`
case 'K':
return `${rank.slice(1)}${rank[0].toLowerCase()}`
case 'U':
return '?'
default:
return '?'
switch (rank[0]) {
case "D":
return `${rank.slice(1)}${rank[0].toLowerCase()}`;
case "K":
return `${rank.slice(1)}${rank[0].toLowerCase()}`;
case "U":
return "?";
default:
return "?";
}
}
function formatGames(action) {
const games = [...action.body].map(game => {
const games = [...action.body].map((game) => {
if (game.playerBlackRank) {
game.playerBlackRank = parseRank(game.playerBlackRank)
game.playerBlackRank = parseRank(game.playerBlackRank);
}
if (game.playerWhiteRank) {
game.playerWhiteRank = parseRank(game.playerWhiteRank)
game.playerWhiteRank = parseRank(game.playerWhiteRank);
}
return game;
})
});
return games;
}
}

View file

@ -34,6 +34,10 @@ export const socketReducer = (state, action) => {
return makeMove(state, action);
}
case "RESIGN": {
return resign(state, action);
}
default:
return state;
}
@ -58,8 +62,13 @@ function connectGame(state, action) {
}
function makeMove(state, action) {
// const { user, game, room, board, move } = action.body;
const socket = state.socket;
socket.emit("make_move", { ...action.body });
return state;
}
function resign(state, action) {
const socket = state.socket;
socket.emit("resign", { ...action.body });
return state;
}

View file

@ -70,6 +70,10 @@ const GameService = (moveQueries) => {
getAllGames: () => {
return gamesInProgress;
},
resign: ({ id, player }) => {
return gamesInProgress[id].submitResign(player).getMeta();
},
};
};

View file

@ -21,8 +21,6 @@ io.on("connection", async (socket) => {
const game = `game-${data.game.id}`;
socket.join(game, async () => {
const gameRecord = await moveQueries.findGameRecord(data.game.id);
console.log("gameRecord from db");
console.log(gameRecord);
await gameServices.initGame({ id: data.game.id, gameRecord });
const { board, ...meta } = await gameServices.getDataForUI(
data.game.id
@ -52,6 +50,21 @@ io.on("connection", async (socket) => {
});
}
});
socket.on("resign", async ({ game, player }) => {
const { id, room } = game;
const gameNsp = `game-${id}`;
try {
const meta = await gameServices.resign({
id,
player,
});
socket.join(gameNsp, () => {
io.of(room).to(gameNsp).emit("game_resign", meta);
});
} catch (e) {
console.log(e);
}
});
});
});
});