Merge branch 'develop' into feat/roomInfo-start

boostcampwm2023 · Dec 12, 2023 · 159fc0f · 159fc0f
2 parents a6baf91 + b3a475e
commit 159fc0f
Show file tree

Hide file tree

Showing 20 changed files with 179 additions and 155 deletions.
diff --git a/client/public/mocks/Scores.json b/client/public/mocks/Scores.json
diff --git a/client/public/userColors.ts b/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',
+];
diff --git a/client/src/apis/scores.ts b/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');
+  }
+}
diff --git a/client/src/components/Lobby/ThemeSettingModal.tsx b/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>

diff --git a/client/src/components/Room/Chat.tsx b/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>

diff --git a/client/src/components/Room/Message.tsx b/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>

diff --git a/client/src/components/Room/ProblemLists.tsx b/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,

diff --git a/client/src/components/Room/RoomSettingModal/ProblemList.tsx b/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[];

diff --git a/client/src/components/Room/ScoreBoardModal/Players.tsx b/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>

diff --git a/client/src/components/Room/ScoreBoardModal/Result.tsx b/client/src/components/Room/ScoreBoardModal/Result.tsx
diff --git a/client/src/components/Room/ScoreBoardModal/ScoreBoard.tsx b/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>
   );