Merge branch 'develop' of https://github.com/pepero-1/liar-game into …

…feature/#1

src/App.tsx

@@ -3,6 +3,7 @@ import AdminMain from "./pages/Main/user";
 import Login from "./pages/Login";
 import Example from "./pages/Example";
 import Game from "./pages/Game";
+import Keyword from "./components/Game/Keyword";
 import GameLists from "./components/Main/GameLists";
 
 const App = () => {
@@ -13,6 +14,7 @@ const App = () => {
         <Route path="/main" element={<AdminMain />} />
         <Route path="/game" element={<Game />} />
         <Route path="/example" element={<Example />} />
+        <Route path="/keyword" element={<Keyword />} />
         <Route path="/gameLists" element={<GameLists />} />
       </Routes>
     </>

src/components/Game/Keyword/index.tsx

@@ -1,5 +1,134 @@
-const Keyword = () => {
-  return <div>Keyword</div>;
+import {
+  Button,
+  Center,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import data from "../../../data/category.json";
+
+interface Categories {
+  category: string;
+  keyword: string[];
+}
+[];
+
+const Keyword = ({ status, updateStatus }: any) => {
+  const categories = data.CategoryList;
+  const [category, setCategory] = useState<Categories | null>(null);
+  const [keyword, setKeyword] = useState("");
+  const users = data.users;
+
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  // 모달 자동 닫기
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (isOpen) {
+      timer = setTimeout(() => {
+        onClose();
+      }, 3000);
+    }
+    return () => clearTimeout(timer);
+  }, [isOpen, onClose]);
+
+  // 랜덤 숫자 계산
+  const getRandNum = (length: number): number => {
+    const randNum = Math.floor(Math.random() * length);
+
+    return randNum;
+  };
+
+  // 게임 시작
+  const handleStart = async () => {
+    await updateStatus("게임중");
+
+    const selectedCategory = categories[getRandNum(categories.length)];
+    const ranKeyword =
+      selectedCategory.keyword[getRandNum(selectedCategory.keyword.length)];
+    const ranLiar = users.name[getRandNum(users.name.length)];
+
+    setCategory(selectedCategory);
+    setKeyword(ranKeyword);
+
+    window.localStorage.setItem("category", selectedCategory.category);
+    window.localStorage.setItem("keyword", ranKeyword);
+    if (ranLiar === "연수") {
+      window.localStorage.setItem("liar", "true");
+    } else {
+      window.localStorage.setItem("liar", "false");
+    }
+    onOpen();
+  };
+
+  // status 변화에 따라 localStorage에 저장
+  useEffect(() => {
+    if (status === "게임중") {
+      const currentCategory = window.localStorage.getItem("category") ?? "";
+      const currentKeyword = window.localStorage.getItem("keyword") ?? "";
+
+      setCategory({ category: currentCategory, keyword: [currentKeyword] });
+      setKeyword(currentKeyword);
+    }
+  }, [status]);
+
+  // 게임 종료
+  const hadleEnd = async () => {
+    await updateStatus("대기중");
+
+    window.localStorage.setItem("category", "");
+    window.localStorage.setItem("keyword", "");
+    window.localStorage.setItem("liar", "false");
+    setCategory(null);
+    setKeyword("");
+  };
+
+  return (
+    <>
+      {status === "대기중" ? (
+        <Button onClick={handleStart}>게임시작</Button>
+      ) : (
+        <Button onClick={hadleEnd}>게임 종료</Button>
+      )}
+      <Modal isOpen={isOpen} onClose={onClose} closeOnEsc={true}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalBody>
+            <Center
+              fontWeight="bold"
+              h="100%"
+              fontSize="1.2rem"
+              pt="20"
+              pb="20"
+            >
+              <Flex
+                direction="column"
+                alignContent="center"
+                justifyContent="center"
+              >
+                <Center>주제는 {category?.category} 입니다.</Center>
+                {window.localStorage.getItem("liar") === "true" ? (
+                  <>
+                    <Center>당신은 Liar 입니다.</Center>
+                    <Center>키워드를 추리하세요.</Center>
+                  </>
+                ) : (
+                  <Center>키워드는 {keyword} 입니다.</Center>
+                )}
+              </Flex>
+            </Center>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
 };
 
 export default Keyword;

src/data/category.json

@@ -0,0 +1,35 @@
+{
+  "CategoryList": [
+    {
+      "category": "영화",
+      "keyword": ["어벤져스", "해리포터", "부산행", "범죄도시", "인터스텔라"]
+    },
+    {
+      "category": "직업",
+      "keyword": [
+        "교사",
+        "판사",
+        "소방관",
+        "의사",
+        "개발자",
+        "변호사",
+        "연구원"
+      ]
+    },
+    {
+      "category": "스포츠",
+      "keyword": ["펜싱", "탁구", "축구", "야구", "수영", "배드민턴"]
+    },
+    {
+      "category": "음식",
+      "keyword": ["떡볶이", "짜장면", "치킨", "피자", "딸기", "햄버거"]
+    },
+    {
+      "category": "사물",
+      "keyword": ["가위", "분필", "종이컵", "양말", "마우스", "거울"]
+    }
+  ],
+  "users": {
+    "name": ["용훈", "수연", "혜민", "정아", "연수"]
+  }
+}

src/pages/Game/index.tsx

@@ -1,5 +1,7 @@
 import { Button, Card, Center, Grid, GridItem, Text } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 import GameChat from "../../components/Game/GameChat";
+import Keyword from "../../components/Game/Keyword";
 import useFireFetch from "../../hooks/useFireFetch";
 
 interface ProfileCardProps {
@@ -16,16 +18,51 @@ const ProfileCard: React.FC<ProfileCardProps> = ({ userId }) => {
   );
 };
 
+interface Categories {
+  category: string;
+  keyword: string[];
+}
+[];
+
 const Game = () => {
   const queryString = window.location.search;
   const searchParams = new URLSearchParams(queryString);
   const gameId = searchParams.get("gameId");
 
   const fireFetch = useFireFetch();
-
   const gameData = fireFetch.useGetSome("game", "id", gameId as string);
+  const [status, setStatus] = useState("");
+
+  const [category, setCategory] = useState<Categories | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  useEffect(() => {
+    if (gameData.data && gameData.data.length > 0) {
+      setStatus(gameData.data[0].status);
+    }
+  }, [gameData.data]);
+
+  useEffect(() => {
+    if (status === "게임중") {
+      const currentCategory = window.localStorage.getItem("category") ?? "";
+      const currentKeyword = window.localStorage.getItem("keyword") ?? "";
+
+      setCategory({ category: currentCategory, keyword: [currentKeyword] });
+      setKeyword(currentKeyword);
+    }
+  }, [status]);
+
+  // status 업데이트 함수
+  const updateStatus = (newStatus: string) => {
+    setStatus(newStatus);
+    if (gameId) {
+      fireFetch.updateData("game", gameId, { status: newStatus });
+    }
+  };
 
   console.log(gameData.data);
+  console.log(category, keyword);
+
   if (gameData.data.length === 0) {
     return <p>Loading...</p>;
   }
@@ -50,11 +87,32 @@ const Game = () => {
         <GridItem>
           <Card h="100%" justifyContent="center">
             <Center fontWeight="bold">
-              주제는 “동물” 입니다. 당신이 라이어입니다.
-            </Center>{" "}
+              {status === "게임중" ? (
+                <>
+                  <p>
+                    주제는 {window.localStorage.getItem("category")} 입니다.
+                    &nbsp;
+                  </p>
+
+                  {window.localStorage.getItem("liar") === "true" ? (
+                    <p>당신은 Liar 입니다. </p>
+                  ) : (
+                    <p>
+                      키워드는 {window.localStorage.getItem("keyword")} 입니다.
+                    </p>
+                  )}
+                </>
+              ) : (
+                <p>게임을 시작해주세요.</p>
+              )}
+            </Center>
           </Card>
         </GridItem>
-        <GridItem></GridItem>
+        <GridItem>
+          <Button w="200px" mr="20px">
+            <Keyword status={status} updateStatus={updateStatus} />
+          </Button>
+        </GridItem>
         <GridItem>
           <ProfileCard userId={gameData.data[0].host}></ProfileCard>
           <ProfileCard userId={gameData.data[0].users[0]}></ProfileCard>