Merge pull request #50 from pepero-1/feature/#3

Feature/#3 게임 시작 구현
KDT1-FE · Nov 15, 2023 · a726866 · a726866
2 parents 748d3a8 + 44ce258
commit a726866
Show file tree

Hide file tree

Showing 5 changed files with 254 additions and 234 deletions.
diff --git a/src/components/Game/GameChat/index.tsx b/src/components/Game/GameChat/index.tsx
@@ -20,6 +20,13 @@ interface Message {
 interface GameChatProps {
   socket: Socket;
   gameData: any;
+  onGameInfoReceived: (gameInfo: {
+    category: string;
+    keyword: string;
+    liar: string;
+    users: string[];
+    status: string;
+  }) => void;
 }
 
 interface UserResponse {
@@ -28,7 +35,11 @@ interface UserResponse {
   leaver?: string;
 }
 
-const GameChat: React.FC<GameChatProps> = ({ socket, gameData }) => {
+const GameChat: React.FC<GameChatProps> = ({
+  socket,
+  gameData,
+  onGameInfoReceived,
+}) => {
   console.log("GameChat/ gameData:", gameData);
 
   const [message, setMessage] = useState<Message>({
@@ -58,16 +69,16 @@ const GameChat: React.FC<GameChatProps> = ({ socket, gameData }) => {
 
   useEffect(() => {
     socket.on("message-to-client", (messageObject: any) => {
+      // 게임 시작 메시지
       if (messageObject.text.split("~")[1] === "!@##") {
         const gameInfo = JSON.parse(messageObject.text.split("~")[0]);
-        console.log("parseData:", gameInfo);
-        window.localStorage.setItem(
-          "shuffledUsers",
-          JSON.stringify(gameInfo.users),
-        );
-        window.localStorage.setItem("category", gameInfo.category);
-        window.localStorage.setItem("keyword", gameInfo.keyword);
-        window.localStorage.setItem("liar", gameInfo.liar);
+        onGameInfoReceived(gameInfo);
+        return;
+      }
+      // 게임 종료 메시지
+      if (messageObject.text.split("~")[1] === "##@!") {
+        const gameInfo = JSON.parse(messageObject.text.split("~")[0]);
+        onGameInfoReceived(gameInfo);
         return;
       }
       // 메시지 데이터, 작성 유저 상태 저장

diff --git a/src/components/Game/GameStart/index.tsx b/src/components/Game/GameStart/index.tsx
@@ -1,6 +1,6 @@
 import {
   Button,
-  useDisclosure,
+  // useDisclosure,
   // Modal,
   // ModalOverlay,
   // ModalContent,
@@ -9,7 +9,7 @@ import {
   // Center,
   // Flex,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+// import { useEffect, useState } from "react";
 import data from "../../../data/category.json";
 import { useRecoilValue } from "recoil";
 import { userState } from "../../../recoil/atoms/userState";
@@ -20,15 +20,8 @@ interface GameStartProps {
   status: string;
   users: string[];
   host: string;
-  updateStatus: (newStatus: string) => void;
 }
 
-// interface Categories {
-//   category: string;
-//   keyword: string[];
-// }
-// [];
-
 interface UserWithSort {
   value: string;
   sort: number;
@@ -39,35 +32,31 @@ const GameStart: React.FC<GameStartProps> = ({
   status,
   users,
   host,
-  updateStatus,
 }) => {
   const user = useRecoilValue(userState);
 
   const categories = data.CategoryList;
-  const { isOpen, onClose, onOpen } = useDisclosure();
-  // const [category, setCategory] = useState<Categories | null>(null);
-  // const [keyword, setKeyword] = useState("");
-  // const [liar, setLiar] = useState("");
-  const [showStartModal, setShowStartModal] = useState(false);
-
-  useEffect(() => {
-    if (showStartModal) {
-      onOpen();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showStartModal]);
-
-  // 모달 자동 닫기 로직
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-
-    if (isOpen) {
-      timer = setTimeout(() => {
-        onClose();
-      }, 2500);
-    }
-    return () => clearTimeout(timer);
-  }, [isOpen, onClose]);
+  // const { isOpen, onClose, onOpen } = useDisclosure();
+  // const [showStartModal, setShowStartModal] = useState(false);
+
+  // useEffect(() => {
+  //   if (showStartModal) {
+  //     onOpen();
+  //   }
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [showStartModal]);
+
+  // // 모달 자동 닫기 로직
+  // useEffect(() => {
+  //   let timer: NodeJS.Timeout;
+
+  //   if (isOpen) {
+  //     timer = setTimeout(() => {
+  //       onClose();
+  //     }, 2500);
+  //   }
+  //   return () => clearTimeout(timer);
+  // }, [isOpen, onClose]);
 
   // 랜덤 숫자 계산 함수
   const getRandNum = (length: number): number => {
@@ -76,15 +65,13 @@ const GameStart: React.FC<GameStartProps> = ({
 
   // 게임 시작 함수
   const handleStart = async () => {
-    updateStatus("게임중");
-
     const selectedCategory = categories[getRandNum(categories.length)];
     const ranKeyword =
       selectedCategory.keyword[getRandNum(selectedCategory.keyword.length)];
     const ranLiar = users[getRandNum(users.length)];
 
     // 유저 순서 랜덤으로 섞기
-    const shuffledUsers: string[] = users
+    const newUsers: string[] = users
       .map(
         (userId: string): UserWithSort => ({
           value: userId, // 실제 유저 ID
@@ -99,28 +86,29 @@ const GameStart: React.FC<GameStartProps> = ({
       category: selectedCategory.category,
       keyword: ranKeyword,
       liar: ranLiar,
-      users: shuffledUsers,
+      users: newUsers,
+      status: "게임중",
     });
 
     // 모든 클라이언트에게 게임 정보를 포함하는 이벤트 전송
     socket.emit("message-to-server", gameInfo + "~!@##");
 
-    // setCategory(selectedCategory);
-    // setKeyword(ranKeyword);
-    // setLiar(ranLiar);
-    setShowStartModal(true);
+    // setShowStartModal(true);
   };
 
   // 게임 종료
   const hadleEnd = () => {
-    updateStatus("대기중");
-
-    window.localStorage.setItem("category", "");
-    window.localStorage.setItem("keyword", "");
-    window.localStorage.setItem("liar", "false");
-    // setCategory(null);
-    // setKeyword("");
-    setShowStartModal(false);
+    const gameInfo = JSON.stringify({
+      category: "",
+      keyword: "",
+      liar: "",
+      users: users,
+      status: "대기중",
+    });
+
+    socket.emit("message-to-server", gameInfo + "~##@!");
+
+    // setShowStartModal(false);
   };
 
   return (