Frontend: added error page

an error page was added which will be rendered whenever an unknown route will be accessed

Fixes: shivansh-bhatnagar18#21

backend/uno-game-engine/types.d.ts → backend/src/types.d.ts

@@ -13,3 +13,8 @@ type UNOCard = {
     value: CardValue;
     id: undefined;
 };
+
+type Player = {
+    id: string;
+    cards: UNOCard[];
+};

backend/uno-game-engine/engine.js → backend/uno-game-engine/engine.ts

@@ -1,7 +1,17 @@
 import { getShuffledCardDeck } from './deck';
 
 const NUM_CARDS_PER_PLAYER = 7;
+
 export class GameEngine {
+    cardDeck: UNOCard[];
+    thrownCards: UNOCard[];
+    players: Player[];
+    currentPlayerIndex: number;
+    lastThrownCard: UNOCard | null;
+    currentColor: number;
+    direction: number;
+    status: 'READY' | 'STARTED';
+
     constructor() {
         this.cardDeck = getShuffledCardDeck();
         this.thrownCards = [];
@@ -18,12 +28,12 @@ export class GameEngine {
             throw new Error('Not enough cards to distribute');
         }
 
-        this.players = this.players.map((player) => {
+        this.players = this.players.map((player: Player) => {
             player.cards = this.cardDeck.splice(0, NUM_CARDS_PER_PLAYER);
             return player;
         });
     }
-    addPlayer(player) {
+    addPlayer(player: Player) {
         this.players.push(player);
     }
     startGame() {
@@ -36,10 +46,10 @@ export class GameEngine {
         this.currentPlayerIndex =
             (this.currentPlayerIndex + this.direction) % this.players.length;
     }
-    drawCardFromDeck(player) {
+    drawCardFromDeck(player: Player) {
         //todo: Handle the case when the deck is empty and we have to move the thrown cards back to the deck
         this.players
-            .find((p) => p.id === player.id)
+            .find((p: Player) => p.id === player.id)
             .cards.push(this.cardDeck.pop());
     }
 }

frontend/src/pages/Error.tsx

@@ -2,10 +2,17 @@ import { Link } from 'react-router-dom';
 
 function Error() {
     return (
-        <div>
-            This page does not exist!
-            <Link to="home">Go back to homepage</Link>
-        </div>
+        <>
+                <div className='w-screen bg-red-500 border-solid border-y-4 border-t-white border-b-white py-2'>
+                    <div className='flex justify-center items-center'>
+                        <h1 className='text-9xl font-mono font-extrabold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] '>404</h1>
+                    </div>
+                    <div className='w-screen flex justify-center text-2xl '>Oops! Looks like there's an error</div>
+                    <div className='w-screen flex justify-center'>
+                        <Link to="" className='text-xl text-red-500 h-max w-max bg-slate-50 p-4 border-solid border-black border-4 rounded-full hover:bg-slate-400 hover:text-purple-50 mt-3 hover:shadow-lg transform hover:scale-102 transition duration-200'>Back to Home</Link>
+                    </div>
+                </div>       
+        </> 
     );
 }