Merge branch 'develop' into feat/roomInfo-start

client/public/userColors.ts

@@ -0,0 +1,10 @@
+export const userColors = [
+ 'text-cyan',
+ 'text-purple',
+ 'text-green',
+ 'text-rose',
+ 'text-blue',
+ 'text-orange',
+ 'text-red',
+ 'text-gold',
+];

client/src/apis/scores.ts

@@ -0,0 +1,15 @@
+import { Score } from '../types/Score';
+import { apiClient } from './apiClient';
+
+export async function getScores(roomCode: string): Promise<Score[]> {
+ try {
+ const { data } = await apiClient.get('/submission', {
+ params: {
+ roomCode,
+ },
+ });
+ return data;
+ } catch (error) {
+ throw new Error('getScores error');
+ }
+}

client/src/components/Lobby/ThemeSettingModal.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-icons/fa6';
 import { RxExit } from 'react-icons/rx';
 import { ProblemType } from '../../types/ProblemType';
-import { getProblemButtonColor } from '../../util/getProblemButtonColor';
+import { getProblemButtonColor } from '../../utils/getProblemButtonColor';
 import Message from '../Room/Message';
 import { MessageInterface, ChatEvent } from '../../types/Message';
 import { useTheme } from '../../hooks/useTheme';
@@ -228,11 +228,7 @@ export default function ThemeSettingModal({
  <div className="mx-2 flex-1 overflow-auto px-2 py-2">
  <ul className="flex flex-col gap-y-1.5">
  {messages.map((message, index) => (
- <Message
- key={index}
- message={message}
- user={user?.username}
- />
+ <Message key={index} message={message} />
  ))}
  </ul>
  </div>

client/src/components/Room/Chat.tsx

@@ -12,7 +12,6 @@ import {
 import { useRoom } from '../../hooks/useRoom';
 import { useEffect } from 'react';
 
-// TODO: userColor -> 서버에서 설정
 export default function Chat() {
  const { user } = useAuthContext();
  const {
@@ -65,7 +64,6 @@ export default function Chat() {
  username: user?.username || 'Anonymous',
  body: inputText,
  chatEvent: ChatEvent.Message,
- color: 'text-purple', // TODO: 클라에서 랜덤 설정
  };
 
  socket?.emit('chat-message', newChatMessage);
@@ -119,7 +117,7 @@ export default function Chat() {
  <div className="mx-2 flex-1 overflow-y-auto px-2 py-2">
  <ul ref={messagesRef} className="flex flex-col gap-y-1.5">
  {messages.map((message, index) => (
- <Message key={index} message={message} user={user?.username} />
+ <Message key={index} message={message} />
  ))}
  </ul>
  </div>

client/src/components/Room/Message.tsx

@@ -1,111 +1,112 @@
+import { useRoom } from '../../hooks/useRoom';
+import { userColors } from '../../../public/userColors';
+import { hash } from '../../utils/hash';
 import { ChatEvent, MessageInterface } from '../../types/Message';
 import MessageBody from './MessageBody';
 
-// This just needs to be here so that these colors get bundled in the final distribution.
-// The userColor is actually assigned on the server.
-// const colorChoices = [
-// 'text-red-400',
-// 'text-orange-400',
-// 'text-amber-400',
-// 'text-yellow-400',
-// 'text-green-400',
-// 'text-emerald-400',
-// 'text-teal-400',
-// 'text-cyan-400',
-// 'text-sky-400',
-// 'text-blue-400',
-// 'text-indigo-400',
-// 'text-violet-400',
-// 'text-purple-400',
-// 'text-fuchsia-400',
-// 'text-pink-400',
-// 'text-rose-400',
-// ];
+export default function Message({ message }: { message: MessageInterface }) {
+ const { roomCode } = useRoom();
+ const generateRandomColor = (username: string) => {
+ const idx = Math.abs(hash(username + roomCode) % userColors.length);
+ return userColors[idx];
+ };
 
-export default function Message({
- message,
- user,
-}: {
- message: MessageInterface;
- user: string | undefined;
-}) {
  switch (message.chatEvent) {
+ // 유저의 채팅 메세지
  case ChatEvent.Message:
- return user === message.username ? (
- <li className="flex flex-row items-start justify-end gap-x-1">
- <span>
- <span className="chat-message text-text_default">
- <MessageBody message={message.body} />
- </span>
- </span>
- </li>
- ) : (
- <li className="flex flex-row items-start gap-x-1">
- <span className={`${message.color} font-bold`}>
+ return (
+ <li className="flex flex-row items-start gap-x-1 py-1">
+ <span
+ className={`${generateRandomColor(message.username)} font-bold`}>
  {message.username}
  </span>
- <span>:&nbsp;</span>
+ <span className="text-text_default">:&nbsp;</span>
  <span className="chat-message text-text_default">
  <MessageBody message={message.body} />
  </span>
  </li>
  );
+ // 유저가 방에 들어왔을 때 메세지
+ // 유저가 방에서 나갔을 때 메세지
  case ChatEvent.Join:
  case ChatEvent.Leave:
  return (
- <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md px-2 py-1.5 dark:bg-[hsl(0,0%,20%)]">
+ <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md py-1">
  <span>
- <span>
+ <span className="m1-1 font-bold text-accent">system&nbsp;</span>
+ <span className="text-text_default">
+ :&nbsp;
  {`👋`}
  &nbsp;
  </span>
- <span className={`${message.color} ml-1 font-bold`}>
- {`${message.username}`}&nbsp;&nbsp;
+ <span
+ className={`${generateRandomColor(
+ message.username,
+ )} ml-1 font-bold`}>
+ {`${message.username}`}
  </span>
- <span className="chat-message">{`${message.body}`}</span>
+ <span className="chat-message text-text_default">{`${message.body}`}</span>
  </span>
  </li>
  );
+ // 유저가 문제를 제출했을 때 메세지
  case ChatEvent.Submit:
  return (
  <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md px-2 py-1.5 dark:bg-[hsl(0,0%,20%)]">
  <span>
- <span>
+ <span className="m1-1 font-bold text-accent">system&nbsp;</span>
+ <span className="text-text_default">
+ :&nbsp
  {`🤞`}
  &nbsp;
  </span>
- <span className={`${message.color} ml-1 font-bold`}>
- {`${message.username}`}&nbsp;&nbsp;
+ <span
+ className={`${generateRandomColor(
+ message.username,
+ )} ml-1 font-bold`}>
+ {`${message.username}`}
  </span>
  <span className="chat-message">{`${message.body}`}</span>
  </span>
  </li>
  );
+ // 유저가 문제를 맞췄을 때 메세지
  case ChatEvent.Accepted:
  return (
  <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md px-2 py-1.5 dark:bg-[hsl(0,0%,20%)]">
  <span>
- <span>
+ <span className="m1-1 font-bold text-accent">system&nbsp;</span>
+ <span className="text-text_default">
+ :&nbsp;
  {`💯`}
  &nbsp;
  </span>
- <span className={`${message.color} ml-1 font-bold`}>
- {`${message.username}`}&nbsp;&nbsp;
+ <span
+ className={`${generateRandomColor(
+ message.username,
+ )} ml-1 font-bold`}>
+ {`${message.username}`}
  </span>
  <span className="chat-message">{`${message.body}`}</span>
  </span>
  </li>
  );
- case ChatEvent.Complete:
+ // 유저가 문제를 틀렸을 때 메세지
+ case ChatEvent.Wrong:
  return (
  <li className="bg-lc-fg-message-light flex flex-row items-start gap-x-1 rounded-md px-2 py-1.5 dark:bg-[hsl(0,0%,20%)]">
  <span>
- <span>
- {`🎉`}
+ <span className="m1-1 font-bold text-accent">system&nbsp;</span>
+ <span className="text-text_default">
+ :&nbsp;
+ {`👎`}
  &nbsp;
  </span>
- <span className={`${message.color} ml-1 font-bold`}>
- {`${message.username}`}&nbsp;&nbsp;
+ <span
+ className={`${generateRandomColor(
+ message.username,
+ )} ml-1 font-bold`}>
+ {`${message.username}`}
  </span>
  <span className="chat-message">{`${message.body}`}</span>
  </span>

client/src/components/Room/ProblemLists.tsx

@@ -1,6 +1,6 @@
 import { ProblemType } from '../../types/ProblemType';
-import { getProblemButtonColor } from '../../util/getProblemButtonColor';
-import { goSolveProblem } from '../../util/goSolveProblem';
+import { getProblemButtonColor } from '../../utils/getProblemButtonColor';
+import { goSolveProblem } from '../../utils/goSolveProblem';
 
 export default function ProblemLists({
  problems,

client/src/components/Room/RoomSettingModal/ProblemList.tsx

@@ -2,8 +2,8 @@ import { Dispatch, SetStateAction } from 'react';
 
 import { ProblemType } from '../../../types/ProblemType';
 import { FaXmark } from 'react-icons/fa6';
-import { getProblemButtonColor } from '../../../util/getProblemButtonColor';
-import { goSolveProblem } from '../../../util/goSolveProblem';
+import { getProblemButtonColor } from '../../../utils/getProblemButtonColor';
+import { goSolveProblem } from '../../../utils/goSolveProblem';
 
 interface ProblemListProps {
  problemList: ProblemType[];

client/src/components/Room/ScoreBoardModal/Players.tsx

@@ -1,17 +1,26 @@
-import { PlayerScore } from '../../../types/ScoreType';
-import Result from './Result';
+import { RxBorderSolid, RxCheck, RxCross1 } from 'react-icons/rx';
+import { Score, Status } from '../../../types/Score';
 
 interface PlayersProps {
- playerScore: PlayerScore;
+ playerName: string;
+ results: Score[];
 }
 
-export default function Players({ playerScore }: PlayersProps) {
+export default function Players({ playerName, results }: PlayersProps) {
  return (
  <li className="flex flex-row bg-bg px-5 py-2.5 text-text_default odd:bg-bg_secondary">
- <div>{playerScore.name}</div>
+ <div>{playerName}</div>
  <div className="flex w-full flex-row gap-1">
- {playerScore.results.map((result, index) => (
- <Result key={index} result={result} />
+ {results.map((result) => (
+ <div className="flex flex-1 flex-row items-center justify-around">
+ {result.status === Status.ACCEPTED ? (
+ <RxCheck className="text-green" strokeWidth={2} size={20} />
+ ) : result.status === Status.WRONG ? (
+ <RxCross1 className="text-red" strokeWidth={2} size={16} />
+ ) : (
+ <RxBorderSolid />
+ )}
+ </div>
  ))}
  </div>
  </li>

client/src/components/Room/ScoreBoardModal/ScoreBoard.tsx

@@ -1,15 +1,41 @@
-import { Score } from '../../../types/ScoreType';
+import { useRoom } from '../../../hooks/useRoom';
+import { Score } from '../../../types/Score';
 import Players from './Players';
 
 interface ScoreBoardProps {
- scores: Score;
+ scores: Score[];
 }
 
 export default function ScoreBoard({ scores }: ScoreBoardProps) {
+ const { participantNames, problems } = useRoom().roomInfo;
+
+
+ const playerNames: string[] = participantNames;
+ const problemIds: number[] = problems.map((problem) => problem.bojProblemId);
+
+ const playerScores: Array<{ playerName: string; results: Score[] }> =
+ playerNames.map((playerName) => {
+ const results: Score[] = problemIds.map((problemId) => {
+ const score = scores.find(
+ (score) =>
+ score.username === playerName && score.bojProblemId === problemId,
+ );
+ return score
+ ? score
+ : { username: playerName, bojProblemId: problemId, status: 'WAITING' };
+ });
+ return { playerName: playerName, results: results };
+ });
+
+
  return (
  <ul className="my-5 flex w-full flex-col overflow-auto text-sm font-medium text-text_default">
- {scores.players.map((playerScore, index) => (
- <Players key={index} playerScore={playerScore} />
+ {playerScores.map((playerScore, index) => (
+ <Players
+ key={index}
+ playerName={playerScore.playerName}
+ results={playerScore.results}
+ />
  ))}
  </ul>
  );