From ee78aa2aa5af43aafe2ce051e03cf6902a926d15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B2=9C=EC=A7=80=EC=9C=A4?= <70828192+cheonjiyun@users.noreply.github.com> Date: Sat, 7 Dec 2024 00:38:43 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A7=88=ED=94=BC=EC=95=84=20=EC=8A=A4?= =?UTF-8?q?=ED=82=AC=EC=9D=84=20=EC=9B=B9=EC=86=8C=EC=BC=93=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/axios/http.ts | 2 +- src/components/job/MafiaNight.tsx | 51 ++++++++++++++-------- src/pages/Game.tsx | 70 +++++++++++++++++++++++++------ src/pages/Night.tsx | 12 +++++- src/pages/Result.tsx | 6 +-- src/type/index.ts | 7 ++++ 6 files changed, 112 insertions(+), 36 deletions(-) diff --git a/src/axios/http.ts b/src/axios/http.ts index 3369643..698f64a 100644 --- a/src/axios/http.ts +++ b/src/axios/http.ts @@ -62,7 +62,7 @@ export const existGame = () => { }; export const getChats = () => { - return http.get(`/v2/chat`); + return http.get(`/chat`); }; export const postChats = (payload: ChatRequest) => { diff --git a/src/components/job/MafiaNight.tsx b/src/components/job/MafiaNight.tsx index 796293d..203c1ee 100644 --- a/src/components/job/MafiaNight.tsx +++ b/src/components/job/MafiaNight.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import { useEffect, useState } from 'react'; -import { postSkill, useMafiaVoteResultQuery } from '../../axios/http'; +// import { postSkill, useMafiaVoteResultQuery } from '../../axios/http'; import { middle } from '../../pages/Night'; import { VariablesCSS } from '../../styles/VariablesCSS'; import { Player } from '../../type'; @@ -13,32 +13,47 @@ import PlayerNight from '../player/PlayerNight'; interface PropsType { isAlive: boolean; players: Player[]; + publishSkill: (name: string) => void; + mafiaSkillPlayer: string | null; } -export const MafiaNight = (props: PropsType) => { - const { players, isAlive } = props; +export const MafiaNight = ({ isAlive, players, publishSkill, mafiaSkillPlayer }: PropsType) => { + const mafiaVoteResult = mafiaSkillPlayer; - const { mafiaVoteResult } = useMafiaVoteResultQuery(); - let nowVoteResult = mafiaVoteResult.target === '' ? 0 : -1; + let nowVoteResult = mafiaSkillPlayer === '' ? 0 : -1; + + // 이름 -> index로 변경 players.forEach((player, i) => { - if (player.name === mafiaVoteResult.target) { + if (player.name === mafiaVoteResult) { nowVoteResult = i + 1; } }); + const [check, setCheck] = useState(-1); - useEffect(() => { - (async () => { - if (check === -1) { + + const findTargetName = (): string => { + let targetName = ''; + players.forEach((player, i) => { + if (check === i + 1) { + targetName = player.name; return; } - let targetName = ''; - players.forEach((player, i) => { - if (check === i + 1) { - targetName = player.name; - return; - } - }); - await postSkill({ target: targetName }); - })(); + }); + return targetName; + }; + + const skill = async () => { + if (check === -1) { + return; + } + const targetName = findTargetName(); + publishSkill(targetName); + }; + + useEffect(() => { + // (async () => { + + // })(); + skill(); }, [check, players]); return ( diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx index 31a18b6..71d4466 100644 --- a/src/pages/Game.tsx +++ b/src/pages/Game.tsx @@ -6,7 +6,7 @@ import { useRecoilState, useSetRecoilState } from 'recoil'; import { getChats, getGamesInfo, getMyJob } from '../axios/http'; import { BASE_URL } from '../axios/instances'; import { gameRound, myJobState, roomInfoState } from '../recoil/roominfo/atom'; -import { ChatArray, ChatResponse, GameStatus, WaitingRoomInfo } from '../type'; +import { ChatArray, ChatResponse, GameStatus, SkillResponse, WaitingRoomInfo } from '../type'; import Day from './Day'; import Night from './Night'; import Result from './Result'; @@ -18,6 +18,8 @@ export default function Game() { const socketClientState = useRef(null); const [chatSubscribeId, setChatSubscribeId] = useState(null); + const [skillSubscribeId, setSkillSubscribeId] = useState(null); + const [mafiaSkillPlayer, setMafiaSkillPlayer] = useState(null); const [roomsInfoState, setRoomsInfoState] = useRecoilState(roomInfoState); // 방 정보 const [waitingRoomInfoState, setWaitingRoomInfoState] = useState({ totalPlayers: 1, @@ -82,7 +84,17 @@ export default function Game() { socketClientState.current = socket; }; - // 채팅구독 + const disConnect = () => { + socketClientState.current?.deactivate(); + }; + + // 웹소켓 연결 + useEffect(() => { + connect(); + return () => disConnect(); + }, []); + + // 채팅구독함수 const subscribeChat = () => { if (!socketClientState.current?.connected) return; const chatSubscribeId = socketClientState.current.subscribe(`/sub/chat/${auth}`, response => { @@ -111,12 +123,9 @@ export default function Game() { }); }; - const disConnect = () => { - socketClientState.current?.deactivate(); - }; - - // 채팅구독 + // 채팅구독하기 useEffect(() => { + unsubscribeChat(); if (gamesStatus.statusType !== 'DAY') return; // 본래 채팅불러오기 @@ -129,11 +138,42 @@ export default function Game() { return () => unsubscribeChat(); }, [gamesStatus.statusType, finishSocketConneted]); - // 웹소켓 연결 + // ====== + // 밤 직업구독 함수 + const subscribeSkill = async () => { + if (!socketClientState.current?.connected) return; + + const mafiaSubscribeId = socketClientState.current.subscribe(`/sub/mafia/${auth}`, response => { + const msg: SkillResponse = JSON.parse(response.body); + setMafiaSkillPlayer(msg.content); + }); + + setSkillSubscribeId(mafiaSubscribeId); + }; + + // 밤 직업 구독끊기 + const unsubscribeSkill = () => { + if (!socketClientState.current?.connected) return; + skillSubscribeId?.unsubscribe(); + }; + + // 밤 스킬 + const publishSkill = (name: string) => { + if (!socketClientState.current?.connected) return; + + socketClientState.current.publish({ + destination: `/pub/skill/${auth}`, + body: JSON.stringify({ target: name }), + }); + }; + useEffect(() => { - connect(); - return () => disConnect(); - }, []); + unsubscribeSkill(); + if (gamesStatus.statusType !== 'NIGHT') return; + + subscribeSkill(); + return () => unsubscribeSkill(); + }, [gamesStatus.statusType, finishSocketConneted]); // 방 정보 저장 (방 상태가 바뀔때만 작동?) useEffect(() => { @@ -156,6 +196,8 @@ export default function Game() { // 내 직업 if (gamesStatus.statusType !== 'WAIT' && !myJobRecoilState) { const myJobResponse = await getMyJob(); + console.log(myJobResponse); + setMyJobRecoilState(myJobResponse.job); } })(); @@ -186,7 +228,11 @@ export default function Game() { /> )} {(gamesStatus.statusType === 'NIGHT_INTRO' || gamesStatus.statusType === 'NIGHT') && ( - + )} {gamesStatus.statusType === 'END' && } diff --git a/src/pages/Night.tsx b/src/pages/Night.tsx index 7cd6b74..7aa2c68 100644 --- a/src/pages/Night.tsx +++ b/src/pages/Night.tsx @@ -16,9 +16,11 @@ import { Status } from '../type'; type PropsType = { statusType: Status; + publishSkill: (name: string) => void; + mafiaSkillPlayer: string | null; }; -export default function Night({ statusType }: PropsType) { +export default function Night({ statusType, publishSkill, mafiaSkillPlayer }: PropsType) { const [roomInfo] = useRecoilState(roomInfoState); const [myJob] = useRecoilState(myJobState); @@ -37,9 +39,15 @@ export default function Night({ statusType }: PropsType) { ) : (
+ {myJob} <> {'MAFIA' === myJob && ( - + )} {'CITIZEN' === myJob && ( diff --git a/src/pages/Result.tsx b/src/pages/Result.tsx index d85c811..4965741 100644 --- a/src/pages/Result.tsx +++ b/src/pages/Result.tsx @@ -69,9 +69,9 @@ export default function Result() { )} diff --git a/src/type/index.ts b/src/type/index.ts index 554d781..72c6f15 100644 --- a/src/type/index.ts +++ b/src/type/index.ts @@ -39,6 +39,13 @@ export interface ChatRequest { content: string; } +export interface SkillResponse { + name: string; + content: string; + messageType: string; + timeStamp: Date; +} + export interface RoomResponse { code: string; }