Skip to content

Commit 2bd2e6a

Browse files
2YH022YH02
committed
Merge branch 'develop' of https://github.com/pepero-1/liar-game into feature/#1 
2 parents 7bed52a + d0f1a96 commit 2bd2e6a

4 files changed

Lines changed: 230 additions & 6 deletions

File tree

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import AdminMain from "./pages/Main/user";
33
import Login from "./pages/Login";
44
import Example from "./pages/Example";
55
import Game from "./pages/Game";
6+
import Keyword from "./components/Game/Keyword";
67
import GameLists from "./components/Main/GameLists";
78

89
const App = () => {
@@ -13,6 +14,7 @@ const App = () => {
1314
<Route path="/main" element={<AdminMain />} />
1415
<Route path="/game" element={<Game />} />
1516
<Route path="/example" element={<Example />} />
17+
<Route path="/keyword" element={<Keyword />} />
1618
<Route path="/gameLists" element={<GameLists />} />
1719
</Routes>
1820
</>

‎src/components/Game/Keyword/index.tsx‎

Lines changed: 131 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,134 @@
1-
const Keyword = () => {
2-
return <div>Keyword</div>;
1+
import {
2+
Button,
3+
Center,
4+
Flex,
5+
Modal,
6+
ModalBody,
7+
ModalCloseButton,
8+
ModalContent,
9+
ModalOverlay,
10+
useDisclosure,
11+
} from "@chakra-ui/react";
12+
import { useEffect, useState } from "react";
13+
import data from "../../../data/category.json";
14+
15+
interface Categories {
16+
category: string;
17+
keyword: string[];
18+
}
19+
[];
20+
21+
const Keyword = ({ status, updateStatus }: any) => {
22+
const categories = data.CategoryList;
23+
const [category, setCategory] = useState<Categories | null>(null);
24+
const [keyword, setKeyword] = useState("");
25+
const users = data.users;
26+
27+
const { isOpen, onClose, onOpen } = useDisclosure();
28+
29+
// 모달 자동 닫기
30+
useEffect(() => {
31+
let timer: NodeJS.Timeout;
32+
33+
if (isOpen) {
34+
timer = setTimeout(() => {
35+
onClose();
36+
}, 3000);
37+
}
38+
return () => clearTimeout(timer);
39+
}, [isOpen, onClose]);
40+
41+
// 랜덤 숫자 계산
42+
const getRandNum = (length: number): number => {
43+
const randNum = Math.floor(Math.random() * length);
44+
45+
return randNum;
46+
};
47+
48+
// 게임 시작
49+
const handleStart = async () => {
50+
await updateStatus("게임중");
51+
52+
const selectedCategory = categories[getRandNum(categories.length)];
53+
const ranKeyword =
54+
selectedCategory.keyword[getRandNum(selectedCategory.keyword.length)];
55+
const ranLiar = users.name[getRandNum(users.name.length)];
56+
57+
setCategory(selectedCategory);
58+
setKeyword(ranKeyword);
59+
60+
window.localStorage.setItem("category", selectedCategory.category);
61+
window.localStorage.setItem("keyword", ranKeyword);
62+
if (ranLiar === "연수") {
63+
window.localStorage.setItem("liar", "true");
64+
} else {
65+
window.localStorage.setItem("liar", "false");
66+
}
67+
onOpen();
68+
};
69+
70+
// status 변화에 따라 localStorage에 저장
71+
useEffect(() => {
72+
if (status === "게임중") {
73+
const currentCategory = window.localStorage.getItem("category") ?? "";
74+
const currentKeyword = window.localStorage.getItem("keyword") ?? "";
75+
76+
setCategory({ category: currentCategory, keyword: [currentKeyword] });
77+
setKeyword(currentKeyword);
78+
}
79+
}, [status]);
80+
81+
// 게임 종료
82+
const hadleEnd = async () => {
83+
await updateStatus("대기중");
84+
85+
window.localStorage.setItem("category", "");
86+
window.localStorage.setItem("keyword", "");
87+
window.localStorage.setItem("liar", "false");
88+
setCategory(null);
89+
setKeyword("");
90+
};
91+
92+
return (
93+
<>
94+
{status === "대기중" ? (
95+
<Button onClick={handleStart}>게임시작</Button>
96+
) : (
97+
<Button onClick={hadleEnd}>게임 종료</Button>
98+
)}
99+
<Modal isOpen={isOpen} onClose={onClose} closeOnEsc={true}>
100+
<ModalOverlay />
101+
<ModalContent>
102+
<ModalCloseButton />
103+
<ModalBody>
104+
<Center
105+
fontWeight="bold"
106+
h="100%"
107+
fontSize="1.2rem"
108+
pt="20"
109+
pb="20"
110+
>
111+
<Flex
112+
direction="column"
113+
alignContent="center"
114+
justifyContent="center"
115+
>
116+
<Center>주제는 {category?.category} 입니다.</Center>
117+
{window.localStorage.getItem("liar") === "true" ? (
118+
<>
119+
<Center>당신은 Liar 입니다.</Center>
120+
<Center>키워드를 추리하세요.</Center>
121+
</>
122+
) : (
123+
<Center>키워드는 {keyword} 입니다.</Center>
124+
)}
125+
</Flex>
126+
</Center>
127+
</ModalBody>
128+
</ModalContent>
129+
</Modal>
130+
</>
131+
);
3132
};
4133

5134
export default Keyword;

‎src/data/category.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"CategoryList": [
3+
{
4+
"category": "영화",
5+
"keyword": ["어벤져스", "해리포터", "부산행", "범죄도시", "인터스텔라"]
6+
},
7+
{
8+
"category": "직업",
9+
"keyword": [
10+
"교사",
11+
"판사",
12+
"소방관",
13+
"의사",
14+
"개발자",
15+
"변호사",
16+
"연구원"
17+
]
18+
},
19+
{
20+
"category": "스포츠",
21+
"keyword": ["펜싱", "탁구", "축구", "야구", "수영", "배드민턴"]
22+
},
23+
{
24+
"category": "음식",
25+
"keyword": ["떡볶이", "짜장면", "치킨", "피자", "딸기", "햄버거"]
26+
},
27+
{
28+
"category": "사물",
29+
"keyword": ["가위", "분필", "종이컵", "양말", "마우스", "거울"]
30+
}
31+
],
32+
"users": {
33+
"name": ["용훈", "수연", "혜민", "정아", "연수"]
34+
}
35+
}

‎src/pages/Game/index.tsx‎

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Button, Card, Center, Grid, GridItem, Text } from "@chakra-ui/react";
2+
import { useEffect, useState } from "react";
23
import GameChat from "../../components/Game/GameChat";
4+
import Keyword from "../../components/Game/Keyword";
35
import useFireFetch from "../../hooks/useFireFetch";
46

57
interface ProfileCardProps {
@@ -16,16 +18,51 @@ const ProfileCard: React.FC<ProfileCardProps> = ({ userId }) => {
1618
);
1719
};
1820

21+
interface Categories {
22+
category: string;
23+
keyword: string[];
24+
}
25+
[];
26+
1927
const Game = () => {
2028
const queryString = window.location.search;
2129
const searchParams = new URLSearchParams(queryString);
2230
const gameId = searchParams.get("gameId");
2331

2432
const fireFetch = useFireFetch();
25-
2633
const gameData = fireFetch.useGetSome("game", "id", gameId as string);
34+
const [status, setStatus] = useState("");
35+
36+
const [category, setCategory] = useState<Categories | null>(null);
37+
const [keyword, setKeyword] = useState("");
38+
39+
useEffect(() => {
40+
if (gameData.data && gameData.data.length > 0) {
41+
setStatus(gameData.data[0].status);
42+
}
43+
}, [gameData.data]);
44+
45+
useEffect(() => {
46+
if (status === "게임중") {
47+
const currentCategory = window.localStorage.getItem("category") ?? "";
48+
const currentKeyword = window.localStorage.getItem("keyword") ?? "";
49+
50+
setCategory({ category: currentCategory, keyword: [currentKeyword] });
51+
setKeyword(currentKeyword);
52+
}
53+
}, [status]);
54+
55+
// status 업데이트 함수
56+
const updateStatus = (newStatus: string) => {
57+
setStatus(newStatus);
58+
if (gameId) {
59+
fireFetch.updateData("game", gameId, { status: newStatus });
60+
}
61+
};
2762

2863
console.log(gameData.data);
64+
console.log(category, keyword);
65+
2966
if (gameData.data.length === 0) {
3067
return <p>Loading...</p>;
3168
}
@@ -50,11 +87,32 @@ const Game = () => {
5087
<GridItem>
5188
<Card h="100%" justifyContent="center">
5289
<Center fontWeight="bold">
53-
주제는 “동물” 입니다. 당신이 라이어입니다.
54-
</Center>{" "}
90+
{status === "게임중" ? (
91+
<>
92+
<p>
93+
주제는 {window.localStorage.getItem("category")} 입니다.
94+
&nbsp;
95+
</p>
96+
97+
{window.localStorage.getItem("liar") === "true" ? (
98+
<p>당신은 Liar 입니다. </p>
99+
) : (
100+
<p>
101+
키워드는 {window.localStorage.getItem("keyword")} 입니다.
102+
</p>
103+
)}
104+
</>
105+
) : (
106+
<p>게임을 시작해주세요.</p>
107+
)}
108+
</Center>
55109
</Card>
56110
</GridItem>
57-
<GridItem></GridItem>
111+
<GridItem>
112+
<Button w="200px" mr="20px">
113+
<Keyword status={status} updateStatus={updateStatus} />
114+
</Button>
115+
</GridItem>
58116
<GridItem>
59117
<ProfileCard userId={gameData.data[0].host}></ProfileCard>
60118
<ProfileCard userId={gameData.data[0].users[0]}></ProfileCard>

0 commit comments

Comments
 (0)