frontend: added error page

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

Fixes: #21

CONTRIBUTING.md

@@ -74,6 +74,16 @@ Given that you have already forked the repository and set it up locally:
 - Addressing reviews on existing PRs is more important than creating new PRs. Please be responsive to the feedback and make the necessary updates.
 - Create a new branch for each issue you are working on. This will help you keep your changes isolated and make it easier to manage multiple PRs. The branch should be created from upstream/master, and only after fetching the latest changes from the main branch from upstream first.
 
+## How to make a good Pull Request
+- Make sure your PR is solving only one issue. If you are solving multiple issues, create separate PRs for each issue.
+- Make sure your PR is up-to-date with the main branch. If there are any conflicts, resolve them before opening the PR.
+- See [code review](#code-review) section for more details on how to address review comments.
+- Write a coherent pull request description linking to the issue you are solving and the approach and notable decisions you made while solving the issue.
+- The Pull Request should pass all the checks before it can be merged. The checks include:
+  - ESLint checks (There should be no eslint errors at least in the files you have modified.)
+  - Prettier checks
+  - Unit tests 
+
 ## Common Git Operations you may need to perform
 
 During contribution, you will often need to rewrite commit history or sync your branch with the main branch. 
@@ -157,7 +167,7 @@ This will open VSCode whenever you run a command that requires a text editor, li
 
 All contributions go through a code review process to ensure the quality and maintainability of the codebase. During the review, maintainers may provide feedback or request changes to your code. Please be responsive to the feedback and make the necessary updates. There may be multiple rounds of review before your changes are approved.
 
-When you open a pull request, you can request a review from the maintainers. You can also request a review after making changes in resopnse to feedback. The requested reviewer may then review the PR themselves or delegate to another maintainer.
+When you open a pull request, you can request a review from the maintainers. You can also request a review after making changes in response to feedback. The requested reviewer may then review the PR themselves or delegate it to another maintainer. When requesting a review, make sure that your PR doesn't have merge conflicts. If it does, resolve the conflicts before requesting a review.
 
 Your PR will be merged only after the maintainers approve it. Different areas of codebase are handled by different maintainers.
 

backend/.prettierrc

@@ -2,5 +2,6 @@
     "singleQuote": true,
     "trailingComma": "es5",
     "tabWidth": 4,
-    "semi": true
+    "semi": true,
+    "endOfLine": "lf"
 }

backend/eventRecipients.ts

@@ -0,0 +1,18 @@
+// this module is responsible for handling the clients currently connected to the server.
+// It stores the clients in a Map object, where the key is the client's user_id and the value is the client's http response object.
+
+import { Response } from 'express';
+
+const clients = new Map<string, Response>();
+
+export function addClient(userId: string, res: Response) {
+    clients.set(userId, res);
+}
+
+export function removeClient(userId: string) {
+    clients.delete(userId);
+}
+
+export function getClient(userId: string) {
+    return clients.get(userId);
+}

backend/routes/gameRoutes.js

@@ -0,0 +1,10 @@
+import express from 'express';
+import { addClient } from '../eventRecipients';
+const router = express.Router();
+
+router.get('/events', (req, res) => {
+    addClient('user_id', res);
+});
+
+// the post handler should retrieve the game the user is currently in, and update the game state.
+// The request body contains the event data, as described in ARCHITECTURE.md

backend/src/types.d.ts

@@ -1,3 +1,6 @@
+// We declare those types which are used throughout the application here.
+// For types that are used only in one file, we can declare them in that file itself.
+
 type CardType = 'number' | 'special' | 'wild';
 
 type CardColor = 'red' | 'blue' | 'green' | 'yellow';
@@ -18,3 +21,31 @@ type Player = {
     id: string;
     cards: UNOCard[];
 };
+
+type EventResult = {
+    type: 'SUCCESS' | 'ERROR';
+    message: string;
+};
+
+declare global {
+    type GameEngine = import('./engine').GameEngine;
+}
+
+type GameEventType = 'DRAW_CARD' | 'THROW_CARD';
+
+type GameEvent =
+    | {
+          type: 'DRAW_CARD';
+          playerId: string;
+          data: {
+              card: UNOCard;
+          };
+      }
+    | {
+          type: 'THROW_CARD';
+          playerId: string;
+          data: {
+              card: UNOCard;
+          };
+      };
+//todo: Add more events

backend/uno-game-engine/engine.ts

@@ -1,4 +1,5 @@
 import { getShuffledCardDeck } from './deck';
+import { handleEvent } from './gameEvents';
 
 const NUM_CARDS_PER_PLAYER = 7;
 
@@ -52,4 +53,8 @@ export class GameEngine {
             .find((p: Player) => p.id === player.id)
             .cards.push(this.cardDeck.pop());
     }
+    dispatchEvent(event: GameEvent) {
+        // handle different types of events based on event.type
+        handleEvent(this, event);
+    }
 }

backend/uno-game-engine/gameEvents.ts

@@ -0,0 +1,22 @@
+// this module houses the handlers for various game events.
+
+import { type GameEngine } from './engine';
+
+type GameEventHandler = (game: GameEngine, event: GameEvent) => EventResult;
+
+const map = new Map<GameEventType, GameEventHandler>();
+
+export function registerEventHandler(
+    eventType: GameEventType,
+    handler: GameEventHandler
+) {
+    map.set(eventType, handler);
+}
+
+export function handleEvent(game: GameEngine, event: GameEvent): EventResult {
+    const handler = map.get(event.type);
+    if (!handler) {
+        return { type: 'ERROR', message: 'Invalid event type' };
+    }
+    return handler(game, event);
+}

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>       
+        </> 
     );
 }