Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/#165: 게임 결과 입력하는 칸 추가 및 자동으로 다음 라운드 페이지가 보이도록 추가 #168

Merged
merged 10 commits into from
Oct 10, 2023
Merged

Feat/#165: 게임 결과 입력하는 칸 추가 및 자동으로 다음 라운드 페이지가 보이도록 추가 #168

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e8bcdf1
Fix: 잘못된 변수명 수정
pp449 Oct 9, 2023
6201566
Feat: 내가 보낸 채팅은 오른쪽에 말풍선이 위치하도록 추가
pp449 Oct 9, 2023
4184d00
Feat: 모두 체크인 완료 시 등수를 입력하는 select box 가 보이도록 추가
pp449 Oct 9, 2023
2a71f43
Fix: 체크인 페이지에 필요한 데이터 props 로 전송 및 체크인 중복 불가능하게 수정
pp449 Oct 9, 2023
9ebdff9
Test: 서버에서 반환하는 데이터 변수 추가 및 변수명 일부 변경
pp449 Oct 9, 2023
eca65d2
Feat: 등수 전송 후 추가로 전송할 수 없도록 disabled 추가
pp449 Oct 9, 2023
73409f1
Feat: 현재 라운드 정보 추가 및 소켓으로 받아온 데이터로 현재 화면 재구성하도록 추가
pp449 Oct 9, 2023
a8b98b7
Merge branch 'dev' of https://github.com/TheUpperPart/leaguehub-front…
pp449 Oct 10, 2023
7b36f85
Feat: 라운드 변경을 소켓으로 받아 다음 라운드 페이지로 이동하도록 추가
pp449 Oct 10, 2023
2cf43ca
Fix: 다음 라운드 시작 시 준비 버튼이 비활성화 되어있는 문제 해결
pp449 Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 49 additions & 8 deletions src/components/RoundCheckIn/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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[];
}
Expand Down Expand Up @@ -73,19 +75,43 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => {
const tmpClient = connectToStomp();
tmpClient.activate();

let subscription: StompSubscription;
let checkInSubscription: StompSubscription;
let nextRoundSubscription: StompSubscription;

tmpClient.onConnect = () => {
setClient(tmpClient);
subscription = tmpClient.subscribe(`/match/${matchId}`, (data) => {
checkInSubscription = tmpClient.subscribe(`/match/${matchId}`, (data) => {
const readyUserPlayerId = Number(JSON.parse(data.body).matchPlayerId);
if (checkInUser.includes(readyUserPlayerId)) return;
setCheckInUser((prevUsers) => [...prevUsers, readyUserPlayerId]);
});

if (!matchPlayers) return;
nextRoundSubscription = tmpClient.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 (subscription) subscription.unsubscribe();
if (checkInSubscription) checkInSubscription.unsubscribe();
if (nextRoundSubscription) nextRoundSubscription.unsubscribe();
client.deactivate();
};
}, []);
Expand All @@ -103,8 +129,23 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => {
<Container>
<ContainerHeader>
<RoundInfo>
{matchPlayers ? matchPlayers.currentMatchRound : 0} of{' '}
{matchPlayers ? matchPlayers.totalMatchRound : 0}
<div
css={css`
font-size: 1.5em;
display: inline-block;
`}
>
{matchPlayers ? matchPlayers.matchRound : 0} ROUND{' '}
</div>
<div
css={css`
display: inline-block;
padding-left: 3rem;
`}
>
{matchPlayers ? matchPlayers.matchCurrentSet : 0} of{' '}
Comment on lines +145 to +153
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{' '} 이 부분 나중에 삭제하시면 좋을 것 같아요

{matchPlayers ? matchPlayers.matchSetCount : 0}
</div>
</RoundInfo>
<FlexWrapper>
<CheckInfo>
Expand All @@ -131,7 +172,7 @@ const RoundCheckIn = ({ channelLink, matchId }: RoundCheckInProps) => {
matchMessage={matchPlayers ? matchPlayers.matchMessage : []}
requestUser={matchPlayers ? matchPlayers.requestMatchPlayerId : -1}
checkInUser={checkInUser}
currentMatchRound={matchPlayers ? matchPlayers.currentMatchRound : -1}
currentMatchRound={matchPlayers ? matchPlayers.matchCurrentSet : -1}
/>
</FlexWrapper>
</Container>
Expand Down