diff --git a/__mocks__/handlers/matchHandlers.ts b/__mocks__/handlers/matchHandlers.ts index 2b2de93..60b01d2 100644 --- a/__mocks__/handlers/matchHandlers.ts +++ b/__mocks__/handlers/matchHandlers.ts @@ -4,9 +4,10 @@ import { rest } from 'msw'; const players: GetMatchPlayerScoreInfos = { requestMatchPlayerId: 3, - currentMatchRound: 1, - totalMatchRound: 3, - matchPlayerScoreInfos: [ + matchRound: 1, + matchCurrentSet: 1, + matchSetCount: 3, + matchPlayerInfos: [ { matchPlayerId: 1, participantId: 1, diff --git a/src/components/RoundCheckIn/CallAdminChat.tsx b/src/components/RoundCheckIn/CallAdminChat.tsx index 5854285..b8c3245 100644 --- a/src/components/RoundCheckIn/CallAdminChat.tsx +++ b/src/components/RoundCheckIn/CallAdminChat.tsx @@ -44,7 +44,7 @@ const CallAdminChat = ({ )?.participantId; const newMessage = { - channelId: channelLink, + channelLink, content: inputMessage, matchId, participantId: requestUserParticipantId, @@ -70,6 +70,12 @@ const CallAdminChat = ({ return user.gameId; }; + const findRequestUser = (playerParticipantId: number): number => { + const user = players.find((player) => player.participantId === playerParticipantId); + if (!user) return -1; + return user.matchPlayerId; + }; + useEffect(() => { if (!client) return; const subscription = client.subscribe(`/match/${matchId}/chat`, (data) => { @@ -97,18 +103,26 @@ const CallAdminChat = ({ chats.map((message, idx) => ( - - 프로필사진 - - - {findUserName(message.participantId)} - {message.content} - + {requestUser === findRequestUser(message.participantId) ? ( + + {message.content} + + ) : ( + <> + + 프로필사진 + + + {findUserName(message.participantId)} + {message.content} + + + )} ))} @@ -169,6 +183,7 @@ const ImageWrapper = styled.div` const ContentWrapper = styled.div` margin-left: 0.5rem; + max-width: 70%; `; const ContentName = styled.div` @@ -184,6 +199,17 @@ const ContentText = styled.div` font-size: 1.3rem; `; +const MyContentText = styled.div` + padding: 0.5rem; + border: 1px solid black; + background: yellow; + border-radius: 1rem 0 1rem 1rem; + display: flex; + align-items: center; + font-size: 1.3rem; + margin-right: 1rem; +`; + const ChattingInfo = styled.div` min-height: 5rem; display: flex; @@ -193,6 +219,13 @@ const ChattingInfo = styled.div` const ChattingContent = styled.div` display: flex; + width: 100%; +`; + +const MyChattingContent = styled.div` + width: 100%; + display: flex; + justify-content: flex-end; `; const InputChat = styled.input` diff --git a/src/components/RoundCheckIn/CheckInPage.tsx b/src/components/RoundCheckIn/CheckInPage.tsx index cc37f99..deb4394 100644 --- a/src/components/RoundCheckIn/CheckInPage.tsx +++ b/src/components/RoundCheckIn/CheckInPage.tsx @@ -3,6 +3,7 @@ import { MatchMessages, MatchPlayerScoreInfos } from '@components/RoundCheckIn'; import CallAdminChat from '@components/RoundCheckIn/CallAdminChat'; import styled from '@emotion/styled'; import { Client } from '@stomp/stompjs'; +import { ChangeEventHandler, MouseEventHandler, useEffect, useState } from 'react'; interface CheckInPageProps { ParticipantCheckin: () => void; @@ -11,6 +12,8 @@ interface CheckInPageProps { players: MatchPlayerScoreInfos[]; matchMessage: MatchMessages[]; requestUser: number; + checkInUser: number[]; + currentMatchRound: number; } const CheckInPage = ({ @@ -20,18 +23,83 @@ const CheckInPage = ({ players, matchMessage, requestUser, + checkInUser, + currentMatchRound, }: CheckInPageProps) => { + const [ready, setReady] = useState(false); + const [isSendingRanking, setIsSendingRanking] = useState(false); + const [rank, setRank] = useState(''); + + const handleRankingChange: ChangeEventHandler = (e) => { + if (!e.target) return; + setRank(e.target.value); + }; + + const onClickRankingButton: MouseEventHandler = () => { + if (rank === '') { + alert('결과를 입력해주세요'); + return; + } + + if (!confirm(`게임 결과 ${rank}등이 맞나요?`)) return; + + if (rank === '1' || rank === '2') { + if (!client || currentMatchRound === -1) { + alert('서버에 에러가 발생했습니다. 새로고침 후 입력 부탁드립니다'); + return; + } + + client.publish({ + destination: `/app/match/${matchId}/${currentMatchRound}/score-update`, + }); + } + setIsSendingRanking(true); + }; + + useEffect(() => { + const findUser = checkInUser.find((user) => requestUser === user); + if (findUser === undefined) { + setReady(false); + return; + } + + setReady(true); + }, [checkInUser]); + return ( 남은시간 - 04:59 + - - + {players.length !== 0 && players.length <= checkInUser.length ? ( + <> + + + {players.map((player, idx) => ( + + ))} + + + 전송 + + + ) : ( + <> + + + + )} + (props.disabled ? '#ced4da' : '#637083')}; border: none; border-radius: 0.5rem; @@ -90,3 +159,22 @@ const Button = styled.button` `; const ChattingWrapper = styled.div``; + +const RankingSelect = styled.select` + height: 5rem; + width: ${(props) => (props.disabled ? '100%' : '70%')}; +`; + +const RankingSubmitButton = styled.button` + width: 26%; + height: 5rem; + color: white; + background: #637083; + border: none; + border-radius: 0.5rem; + display: ${(props) => (props.disabled ? 'none' : 'block')}; + + &: hover { + cursor: pointer; + } +`; diff --git a/src/components/RoundCheckIn/index.tsx b/src/components/RoundCheckIn/index.tsx index 776713e..5920c25 100644 --- a/src/components/RoundCheckIn/index.tsx +++ b/src/components/RoundCheckIn/index.tsx @@ -7,6 +7,7 @@ import { connectToStomp } from '@config/stomp'; import { Client, StompSubscription } from '@stomp/stompjs'; import authAPI from '@apis/authAPI'; import { useRouter } from 'next/router'; +import { css } from '@emotion/react'; export interface MatchPlayerScoreInfos { matchPlayerId: number; @@ -31,8 +32,9 @@ export interface MatchMessages { export interface GetMatchPlayerScoreInfos { requestMatchPlayerId: number; - currentMatchRound: number; - totalMatchRound: number; + matchRound: number; + matchCurrentSet: number; + matchSetCount: number; matchPlayerInfos: MatchPlayerScoreInfos[]; matchMessage: MatchMessages[]; } @@ -73,21 +75,54 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => { const tmpClient = connectToStomp(); tmpClient.activate(); - let subscription: StompSubscription; + let checkInSubscription: StompSubscription; + tmpClient.onConnect = () => { setClient(tmpClient); - subscription = tmpClient.subscribe(`/match/${matchId}`, (data) => { - setCheckInUser((prevUsers) => [...prevUsers, Number(JSON.parse(data.body).matchPlayerId)]); + checkInSubscription = tmpClient.subscribe(`/match/${matchId}`, (data) => { + const readyUserPlayerId = Number(JSON.parse(data.body).matchPlayerId); + if (checkInUser.includes(readyUserPlayerId)) return; + setCheckInUser((prevUsers) => [...prevUsers, readyUserPlayerId]); }); }; return () => { if (!client) return; - if (subscription) subscription.unsubscribe(); + if (checkInSubscription) checkInSubscription.unsubscribe(); + client.deactivate(); }; }, []); + useEffect(() => { + if (!matchPlayers || !client) return; + + const nextRoundSubscription = client.subscribe( + `/match/${matchId}/${matchPlayers.matchCurrentSet}`, + (data) => { + alert('다음 라운드가 진행됩니다'); + const responseData = JSON.parse(data.body); + if (!matchPlayers) return; + setMatchPlayers((prevMatchPlayer) => { + if (!prevMatchPlayer) return; + return { + ...prevMatchPlayer, + matchRound: responseData.matchRound, + matchCurrentSet: responseData.matchCurrentSet, + matchSetCount: responseData.matchSetCount, + matchPlayerInfos: responseData.matchPlayerInfoList, + }; + }); + setCheckInUser([]); + }, + ); + + return () => { + if (!client) return; + if (nextRoundSubscription) nextRoundSubscription.unsubscribe(); + }; + }, [matchPlayers, client]); + const participantCheckin = () => { if (!client || !matchPlayers) return; @@ -101,8 +136,23 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => { - {matchPlayers ? matchPlayers.currentMatchRound : 0} of{' '} - {matchPlayers ? matchPlayers.totalMatchRound : 0} +
+ {matchPlayers ? matchPlayers.matchRound : 0} ROUND{' '} +
+
+ {matchPlayers ? matchPlayers.matchCurrentSet : 0} of{' '} + {matchPlayers ? matchPlayers.matchSetCount : 0} +
@@ -128,6 +178,8 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => { players={matchPlayers ? matchPlayers.matchPlayerInfos : []} matchMessage={matchPlayers ? matchPlayers.matchMessage : []} requestUser={matchPlayers ? matchPlayers.requestMatchPlayerId : -1} + checkInUser={checkInUser} + currentMatchRound={matchPlayers ? matchPlayers.matchCurrentSet : -1} />