connect FE submit resign to BE game service

packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js

@@ -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>

packages/play-node-go/src/io.js

@@ -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;
 };
 

packages/play-node-go/src/pages/Game/Game.js

@@ -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 &&

packages/play-node-go/src/reducers/games/reducer.games.js

@@ -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': 
+    case "JOIN_REQUEST": {
-      const games = formatGames(action);;
-      return {...state, games};
-    
-    case 'JOIN_REQUEST': 
       if (!Object.entries(state.user).length) {
         const errAction = {
-          type: 'ERR',
+          type: "ERR",
-          message: 'JOIN_GAME_ERROR',
+          message: "JOIN_GAME_ERROR",
-          body: {joinGameError: 'user not logged in'}
+          body: { joinGameError: "user not logged in" },
-        }
+        };
-        return stateReducer(state, errAction)
+        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': 
+    case "GAME_RESIGN": {
-      return {...state, active: action.body};
+      const { gameRecord, pass, turn, winner, playerState } = action.body.meta;
-      
+      return {
-    default: 
+        ...state,
+        meta: { gameRecord, pass, turn, winner, playerState },
+      };
+    }
+
+    case "SET_ACTIVE": {
+      return { ...state, active: action.body };
+    }
+
+    default: {
       return state;
+    }
   }
-}
+};
 
 function parseRank(rank) {
-  switch(rank[0]) {
+  switch (rank[0]) {
-    case 'D':
+    case "D":
-      return `${rank.slice(1)}${rank[0].toLowerCase()}`
+      return `${rank.slice(1)}${rank[0].toLowerCase()}`;
-      case 'K':
+    case "K":
-      return `${rank.slice(1)}${rank[0].toLowerCase()}`
+      return `${rank.slice(1)}${rank[0].toLowerCase()}`;
-    case 'U':
+    case "U":
-      return '?'
+      return "?";
-    default: 
+    default:
-      return '?'
+      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;
-}
+}

packages/play-node-go/src/reducers/socket/reducer.socket.js

@@ -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;
+}

packages/server/services/gameServices.js

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

packages/server/socket.js

@@ -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);
+        }
+      });
     });
   });
 });