From c7c6b6959019f1de331b151df9fc0e735cbc0e5c Mon Sep 17 00:00:00 2001
From: PrathamX595 <pratham.seth.cer23@itbhu.ac.in>
Date: Sun, 2 Jun 2024 20:54:35 +0530
Subject: [PATCH] frontend: added error page

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

Fixes: #21
---
 backend/src/types.d.ts       |  4 ++++
 frontend/src/pages/Error.tsx | 15 +++++++++++----
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/backend/src/types.d.ts b/backend/src/types.d.ts
index 4f21a45..0ac9c89 100644
--- a/backend/src/types.d.ts
+++ b/backend/src/types.d.ts
@@ -27,6 +27,10 @@ type EventResult = {
     message: string;
 };
 
+declare global {
+    type GameEngine = import('./engine').GameEngine;
+}
+
 type GameEventType = 'DRAW_CARD' | 'THROW_CARD';
 
 type GameEvent =
diff --git a/frontend/src/pages/Error.tsx b/frontend/src/pages/Error.tsx
index 7a93fd7..607e46e 100644
--- a/frontend/src/pages/Error.tsx
+++ b/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>       
+        </> 
     );
 }