Merge pull request #4 from ItaloMedici/3-hide-player-choice-on-choice-event

3 hide player choice on choice event

Author: ItaloMedici

context/board.tsx

@@ -13,6 +13,7 @@ import { useRouter } from "next/navigation";
 import {
   ReactNode,
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useRef,
@@ -40,6 +41,8 @@ export const useBoard = () => {
   return useContext(BoardContext);
 };
 
+const TIMEOUT = 60 * 1000;
+
 export const BoardProvider = ({
   roomId,
   children,
@@ -76,7 +79,7 @@ export const BoardProvider = ({
     joinBoard();
   }, []);
 
-  const leaveBoard = async () => {
+  const leaveBoard = useCallback(async () => {
     if (!selfRef.current?.boardId) return;
 
     await http.post("/leave-board", {
@@ -88,7 +91,27 @@ export const BoardProvider = ({
     setSelf({} as Player);
     setOthers([]);
     selfRef.current = undefined;
-  };
+  }, [roomId]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (!isConnected || !self?.id) {
+        toast("Você foi desconectado da sala 💩");
+        leaveBoard();
+        router.push("/");
+      }
+    }, TIMEOUT);
+
+    if (isConnected && self?.id) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isConnected, leaveBoard, router, self?.id]);
 
   useEffect(() => {
     return () => {
@@ -148,7 +171,15 @@ export const BoardProvider = ({
 
     socket.on(revealCardsEventKey, (message) => {
       console.log(`[${revealCardsEventKey}] for ${self.name}:`, message);
+
+      if (!message?.players?.length) return;
+
+      const players = message.players as Array<Player>;
+
+      const _others = players.filter((_player) => _player.id !== self.id);
+
       setRevealCards(message.reveal);
+      setOthers(_others);
     });
 
     const resetBoardEventKey = resetBoardKey(self.boardId);

pages/api/make-choice.ts

@@ -30,7 +30,10 @@ const makeChoiceHandler = async (
     const eventKey = playerChoiceKey(updatedPlayer.boardId);
 
     const message = {
-      player: updatedPlayer,
+      player: {
+        ...updatedPlayer,
+        choice: "hidden",
+      },
     };
 
     res.socket?.server?.io?.emit(eventKey, message);

pages/api/reveal-cards.ts

@@ -1,8 +1,12 @@
 import { ResponseWithSocket } from "@/types/response-with-socket";
 import { revealCardsKey } from "@/use-cases/event-keys/board";
+import { getPlayersByBoardId } from "@/use-cases/player/get-players-by-board-id";
 import { NextApiRequest } from "next";
 
-const revealCardsHandler = (req: NextApiRequest, res: ResponseWithSocket) => {
+const revealCardsHandler = async (
+  req: NextApiRequest,
+  res: ResponseWithSocket
+) => {
   if (req.method !== "POST") {
     res.status(405).json({ message: "Method Not Allowed" });
     return;
@@ -16,9 +20,11 @@ const revealCardsHandler = (req: NextApiRequest, res: ResponseWithSocket) => {
       return;
     }
 
+    const players = await getPlayersByBoardId({ boardId });
+
     const eventKey = revealCardsKey(boardId);
 
-    const message = { reveal };
+    const message = { reveal, players };
 
     res.socket?.server?.io?.emit(eventKey, message);
 

use-cases/event-keys/board.ts

@@ -5,5 +5,5 @@ const createBoardEventKey = (event: string) => {
 export const joinBoardKey = createBoardEventKey("join");
 export const leaveBoardKey = createBoardEventKey("leave");
 export const playerChoiceKey = createBoardEventKey("choice");
-export const revealCardsKey = createBoardEventKey("choice");
+export const revealCardsKey = createBoardEventKey("reveal");
 export const resetBoardKey = createBoardEventKey("reset");