Merge pull request #41 from thutasann/feat/type-race

feat: scoreboard

README.md

@@ -16,7 +16,7 @@ This is the Chat + Game Application crafted with MERN Stack & Socket.
 - 🚀 Real-Time Typing
 - 🚀 Canvas Drawing (MultiPlayer)
 - 🚀 TIC-TAC-TOE Game (One vs One)
-- 🚀 Type Race Game (MultiPlayer) [Beta]
+- 🚀 Type Race Game (MultiPlayer)
 
 ## Onboarding and Games Screen
 

frontend/src/components/type-race/counter.tsx

@@ -26,8 +26,8 @@ const Counter: React.FC<ICounter> = ({ socket }) => {
 	return (
 		<div
 			className={`w-[300px] text-center text-white ${
-				msg && countDown ? 'block' : 'hidden'
-			} rounded-md py-5 px-7 bg-gradient-to-tr from-teal-400 to-teal-600 shadow-sm `}
+				msg && countDown ? 'block py-5' : 'hidden py-0'
+			} rounded-md px-7 bg-gradient-to-tr from-teal-400 to-teal-600 shadow-sm `}
 		>
 			<div className="flex items-center justify-center gap-2">
 				{msg === 'Starting Game in...' ? <Spinner /> : null}

frontend/src/components/type-race/progress.tsx

@@ -0,0 +1,65 @@
+import { Progress } from '@chakra-ui/react';
+import React from 'react';
+import { PlayerProps } from '../../types';
+import { Alert, AlertIcon, AlertTitle, useToast } from '@chakra-ui/react';
+
+interface IProgress {
+	players: PlayerProps[];
+	player: PlayerProps;
+	wordsLength: number;
+}
+
+function calPercentage(player: PlayerProps, wordsLength: number): number {
+	if (player.currentWordIndex !== 0) {
+		return Number(((player.currentWordIndex! / wordsLength) * 100).toFixed(2));
+	}
+	return 0;
+}
+
+const CustomProgress: React.FC<IProgress> = ({
+	players,
+	player,
+	wordsLength,
+}) => {
+	const percentage = calPercentage(player, wordsLength);
+	console.log('players', players);
+
+	return (
+		<div className="w-[90%] mt-[50px] border-t pt-[50px]">
+			<h2 className="text-center mb-7 text-2xl font-[600]">Progresses</h2>
+			<div className="flex items-center justify-between font-[500]">
+				<h5>
+					{player.nickName} <span className="font-[600]">(You)</span>
+				</h5>
+				<span>{percentage} %</span>
+			</div>
+			<Progress
+				value={percentage}
+				rounded="md"
+				colorScheme="teal"
+			/>
+
+			{/* Oponents */}
+			<div className="mt-7">
+				{players?.map((playerObj) => {
+					const percentage = calPercentage(playerObj, wordsLength);
+					return playerObj._id !== player._id ? (
+						<div key={playerObj._id}>
+							<div className="flex items-center justify-between font-[500]">
+								<h5>{playerObj.nickName}</h5>
+								<span>{percentage} %</span>
+							</div>
+							<Progress
+								value={percentage}
+								rounded="md"
+								colorScheme="teal"
+							/>
+						</div>
+					) : null;
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default CustomProgress;

frontend/src/components/type-race/score-board.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+	Table,
+	Thead,
+	Tbody,
+	Tfoot,
+	Tr,
+	Th,
+	Td,
+	TableCaption,
+	TableContainer,
+} from '@chakra-ui/react';
+
+import { PlayerProps } from '../../types';
+
+interface IScoreBoard {
+	players: PlayerProps[];
+}
+
+function getScoreBoard(players: PlayerProps[]): PlayerProps[] {
+	const scoreboard = players.filter((player) => player.WPM !== -1);
+	return scoreboard.sort((a, b) =>
+		a.WPM > b.WPM ? -1 : b.WPM > a.WPM ? 1 : 0,
+	);
+}
+
+const ScoreBoard: React.FC<IScoreBoard> = ({ players }) => {
+	const scoreBoard = getScoreBoard(players);
+
+	if (scoreBoard.length === 0) {
+		return null;
+	}
+
+	return (
+		<div className="my-[50px] w-[90%]">
+			<h2 className="text-center mb-3 text-2xl font-[600]">Scoreboard</h2>
+			<div>
+				<TableContainer
+					border="1px solid lightGray"
+					rounded="md"
+					p={5}
+				>
+					<Table variant="striped">
+						<Thead>
+							<Tr>
+								<Th>Player</Th>
+								<Th>Words Per Minutes (WPM)</Th>
+							</Tr>
+						</Thead>
+						<Tbody>
+							{scoreBoard?.map((player) => (
+								<Tr key={player._id}>
+									<Td>{player.nickName}</Td>
+									<Td>{player.WPM}</Td>
+								</Tr>
+							))}
+						</Tbody>
+					</Table>
+				</TableContainer>
+			</div>
+		</div>
+	);
+};
+
+export default ScoreBoard;

frontend/src/components/type-race/type-race-input.tsx

@@ -46,7 +46,7 @@ const TypeRaceInput: React.FC<InputProps> = ({
 	return (
 		<div className="w-[350px] md:w-[750px]">
 			<input
-				className={`input mt-5 w-full ${
+				className={`input read-only:rounded-md mt-5 w-full ${
 					isOpen || isOver ? 'cursor-not-allowed' : 'cursor-auto'
 				}`}
 				placeholder="Enter Words"

frontend/src/miscellaneous/spinner.tsx

@@ -7,7 +7,7 @@ const Spinner = () => {
 			role="status"
 		>
 			<svg
-				className="h-6 w-6 animate-spin stroke-gray-500"
+				className="h-6 w-6 animate-spin stroke-white"
 				viewBox="0 0 256 256"
 			>
 				<line

frontend/src/pages/type-race-page.tsx

@@ -1,9 +1,11 @@
 import { useToast } from '@chakra-ui/react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Socket } from 'socket.io-client';
 import Counter from '../components/type-race/counter';
 import DisplayWords from '../components/type-race/display-words';
+import CustomProgress from '../components/type-race/progress';
+import ScoreBoard from '../components/type-race/score-board';
 import StartBtn from '../components/type-race/start-btn';
 import TypeRaceHeader from '../components/type-race/type-race-header';
 import TypeRaceInput from '../components/type-race/type-race-input';
@@ -51,6 +53,7 @@ const TypeRacePage: React.FC<ITypeRacePage> = ({ socket }) => {
 					gameId={params.gameId!}
 					onClick={HanldeCopy}
 				/>
+
 				<Counter socket={socket} />
 
 				{player ? (
@@ -73,6 +76,15 @@ const TypeRacePage: React.FC<ITypeRacePage> = ({ socket }) => {
 					gameId={_id}
 					socket={socket}
 				/>
+				{player ? (
+					<CustomProgress
+						players={players}
+						player={player}
+						wordsLength={words.length}
+					/>
+				) : null}
+
+				{players ? <ScoreBoard players={players} /> : null}
 			</div>
 		</div>
 	);

frontend/src/types/index.ts

@@ -191,7 +191,7 @@ export type PlayerProps = {
 	currentWordIndex?: number;
 	socketId: string;
 	isPartyLeader: boolean;
-	WPM?: number;
+	WPM: number;
 	nickName: string;
 };