feat:ranking-UI (#283)

client/src/apis/scoreBoard.ts

@@ -0,0 +1,24 @@
+import { apiClient } from './apiClient';
+import { ScoreBoardInformation } from '../types/ScoreBoardInformation';
+
+export async function getScoreBoardInformation(
+  roomCode: string,
+): Promise<ScoreBoardInformation> {
+  try {
+    const { data: submissionData } = await apiClient.get('/submission', {
+      params: {
+        roomCode,
+      },
+    });
+
+    const { data: rankingData } = await apiClient.get('/submission/ranking', {
+      params: {
+        roomCode,
+      },
+    });
+
+    return { submissions: submissionData, rankings: rankingData };
+  } catch (error) {
+    throw new Error('getScores error');
+  }
+}

client/src/pages/Room/ScoreBoard/Players.tsx

@@ -1,22 +1,33 @@
 import { RxBorderSolid, RxCheck, RxCross1 } from 'react-icons/rx';
-import { Score, Status } from '../../../types/Score';
+import { Submission, Status } from '../../../types/Submission';
 
 interface PlayersProps {
   index: number;
   playerName: string;
-  results: Score[];
+  results: Submission[];
 }
 
 export default function Players({ index, playerName, results }: PlayersProps) {
+  const getOrdinal = (n: number) => {
+    if (n === 1) return '1st';
+    else if (n === 2) return '2nd';
+    else if (n === 3) return '3rd';
+    else return n + 'th';
+  };
 
   return (
     <li
       className="flex flex-row bg-bg px-5 py-2.5 text-text_default odd:bg-bg_secondary"
       key={index}>
-      <div>{playerName}</div>
+      <div className="flex w-16 justify-center pr-4 text-base font-bold">
+        {getOrdinal(index + 1)}
+      </div>
+      <div className="flex items-center pr-2">{playerName}</div>
       <ol className="flex w-full flex-row gap-1">
-        {results.map((result,index) => (
-          <li className="flex flex-1 flex-row items-center justify-around" key={index}>
+        {results.map((result, index) => (
+          <li
+            className="flex flex-1 flex-row items-center justify-around"
+            key={index}>
             {result.status === Status.ACCEPTED ? (
               <RxCheck className="text-green" strokeWidth={2} size={20} />
             ) : result.status === Status.WRONG ? (

client/src/pages/Room/ScoreBoard/ScoreBoard.tsx

@@ -1,36 +1,53 @@
 import { useRoom } from '../../../hooks/useRoom';
-import { Score } from '../../../types/Score';
+import { ScoreBoardInformation } from '../../../types/ScoreBoardInformation';
+import { Submission } from '../../../types/Submission';
 import Players from './Players';
 
 interface ScoreBoardProps {
-  scores: Score[];
+  scores: ScoreBoardInformation;
+}
+
+interface PlayerScore {
+  playerName: string;
+  results: Submission[];
 }
 
 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 };
+  const playerScores: PlayerScore[] = playerNames.map((playerName) => {
+    const results: Submission[] = problemIds.map((problemId) => {
+      const submissions = scores.submissions.find(
+        (score) =>
+          score.username === playerName && score.bojProblemId === problemId,
+      );
+      return (
+        submissions || {
+          username: playerName,
+          bojProblemId: problemId,
+          status: 'WAITING',
+        }
+      );
     });
+    return { playerName, results };
+  });
 
+  const sortedPlayerScores: PlayerScore[] = scores.rankings
+    .map((ranking) =>
+      playerScores.find(
+        (playerScore) => playerScore.playerName === ranking.username,
+      ),
+    )
+    .filter(
+      (playerScore): playerScore is PlayerScore => playerScore !== undefined,
+    );
 
   return (
     <ul className="my-5 flex w-full flex-col overflow-auto text-sm font-medium text-text_default">
-      {playerScores.map((playerScore, index) => (
+      {sortedPlayerScores.map((playerScore, index) => (
         <Players
           key={index}
           index={index}

client/src/pages/Room/ScoreBoard/ScoreBoardButton.tsx

@@ -1,19 +1,19 @@
 import { FaChartSimple } from 'react-icons/fa6';
 import ScoreBoardModal from './ScoreBoardModal';
 import { useRef, useState } from 'react';
-import { getScores } from '../../../apis/scores';
+import { getScoreBoardInformation } from '../../../apis/scoreBoard';
 import { useRoom } from '../../../hooks/useRoom';
-import { Score } from '../../../types/Score';
+import { ScoreBoardInformation } from '../../../types/ScoreBoardInformation';
 
 export default function ScoreboardButton() {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [scores, setScores] = useState<Score[]>([]);
+  const [scores, setScores] = useState<ScoreBoardInformation>({submissions: [], rankings: []});
   const modalOverlayRef = useRef<HTMLDivElement>(null);
   const { roomCode, roomInfo } = useRoom();
 
   const openModal = async () => {
     try {
-      const res = await getScores(roomCode);
+      const res : ScoreBoardInformation = await getScoreBoardInformation(roomCode);
       setScores(res);
     } catch (e) {
       console.log(e);

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

@@ -2,16 +2,15 @@ import ScoreBoard from './ScoreBoard';
 import { FaChartSimple, FaXmark } from 'react-icons/fa6';
 import { RefObject } from 'react';
 import { useTheme } from '../../../hooks/useTheme';
-import { Score } from '../../../types/Score';
+import { ScoreBoardInformation } from '../../../types/ScoreBoardInformation';
 
 interface ModalProps {
-  scores: Score[];
+  scores: ScoreBoardInformation;
   modalOverlayRef: RefObject<HTMLDivElement>;
   closeModal: () => void;
   modalOutsideClick: (arg: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-
 const iconStyle = {
   fontSize: '1.5rem',
 };
@@ -44,7 +43,7 @@ export default function ScoreBoardModal({
           </div>
           <div className="text-xs text-text_default">3 online</div>
         </div>
-        <ScoreBoard scores ={scores}/>
+        <ScoreBoard scores={scores} />
       </div>
     </div>
   );

client/src/types/Ranking.ts

@@ -1,6 +1,5 @@
 export interface Ranking {
-  id: number;
   username: string;
   numberOfProblemsSolved: number;
-  mostRecentCorrectSubmissionTime: string | null; // is nullable?
+  mostRecentCorrectSubmissionTime: string | null;
 }

client/src/types/ScoreBoardInformation.ts

@@ -0,0 +1,7 @@
+import { Submission } from './Submission';
+import { Ranking } from './Ranking';
+
+export interface ScoreBoardInformation {
+  submissions: Submission[];
+  rankings: Ranking[];
+}

client/src/types/Submission.ts

@@ -0,0 +1,13 @@
+export interface Submission {
+  username: string;
+  bojProblemId: number;
+  status: Status;
+}
+
+export const Status = {
+  ACCEPTED: 'ACCEPTED',
+  WRONG: 'WRONG',
+  WAITING: 'WAITING',
+} as const;
+
+type Status = (typeof Status)[keyof typeof Status];