Page 404

webapp/src/App.js

@@ -9,6 +9,7 @@ import Settings from './pages/Settings/Settings'
 import Login from './pages/Login/Login'
 import Logout from './pages/Logout/Logout'
 import Register from './pages/Register/Register'
+import PageNotFound from './pages/PageNotFound/PageNotFound';
 
 import { ProtectedRoute } from './components/ProtectedRoute'
 
@@ -19,6 +20,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 
+
 function App() {
 
   //State for the volume
@@ -39,6 +41,7 @@ function App() {
             <Route path="/login" element={<Login />}></Route>
             <Route path="/register" element={<Register />}></Route>
             <Route path="/logout" element={<Logout />} />
+
             <Route
               path="game"
               element={
@@ -58,6 +61,7 @@ function App() {
             <Route path="leaderboard" element={<Leaderboard />}></Route>
             <Route path="settings" element={<Settings volume={volume} handleVolumeChange={handleVolumeChange} />}></Route>
           </Route>
+          <Route path="*" element={<PageNotFound />}></Route>
         </Routes>
       </AuthProvider>
     </SettingsProvider>

webapp/src/pages/AppLayout.js

@@ -1,32 +1,63 @@
-import { Outlet } from 'react-router-dom'
+import {Outlet} from 'react-router-dom'
 import Header from '../components/Header/Header'
 import Nav from '../components/Nav/Nav'
-import { useTheme } from '../hooks/useTheme'
-import { useToggle } from '../hooks/useToggle'
-
-const AppLayout = ({ volume }) => {
-  //State for opening and closing the navigation
-  const [nav, toggleNav] = useToggle(false)
-  //State for the theme
-  const { theme, changeThemeHandler } = useTheme()
-
-  return (
-    <div className={theme}>
-
-      <Header
-        onToggleNav={toggleNav}
-        onChangeTheme={changeThemeHandler}
-        theme={theme}
-        volume={volume}
-      />
-
-      <Nav openNav={nav} onToggleNav={toggleNav} />
-
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  )
+import {useTheme} from '../hooks/useTheme'
+import {useToggle} from '../hooks/useToggle'
+import './animation.css'
+import Lottie from 'react-lottie'
+import darkAnimationData from '../assets/catanimation/sleeping_cat.json';
+import lightAnimationData from '../assets/catanimation/asleep_cat.json';
+
+
+
+
+const AppLayout = ({volume}) => {
+    const darkOptions = {
+        loop: true,
+        autoplay: true,
+        animationData: darkAnimationData,
+        rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice'
+        }
+    };
+
+    const lightOptions = {
+        loop: true,
+        autoplay: true,
+        animationData: lightAnimationData,
+        rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice'
+        }
+    };
+    //State for opening and closing the navigation
+    const [nav, toggleNav] = useToggle(false);
+    //State for the theme
+    const {theme, changeThemeHandler} = useTheme();
+
+    return (
+        <div className={theme}>
+
+
+            <Header
+                onToggleNav={toggleNav}
+                onChangeTheme={changeThemeHandler}
+                theme={theme}
+                volume={volume}
+            />
+            <Nav openNav={nav} onToggleNav={toggleNav}/>
+            <main>
+                <Outlet/>
+                {theme === "dark" && (
+                    <Lottie options={darkOptions} height={180} width={280} style={{ position: 'absolute', bottom: 20, right: 80 }} />
+                )}
+                {theme === "light" && (
+                    <Lottie options={lightOptions} height={200} width={400} style={{ position: 'absolute', bottom: 12, right: 40 }} />
+                )}
+
+            </main>
+
+        </div>
+    )
 }
 
-export default AppLayout
+export default AppLayout

webapp/src/pages/PageNotFound/PageNotFound.css

@@ -0,0 +1,23 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.content {
+    text-align: center;
+    color: white;
+}
+
+.animation {
+    margin-top: 60px;
+}
+
+h1 {
+    font-size: 3em;
+}
+
+p {
+    font-size: 1.5em;
+}

webapp/src/pages/PageNotFound/PageNotFound.js

@@ -0,0 +1,30 @@
+// NotFoundPage.js
+import React from 'react';
+import Lottie from 'react-lottie';
+import errorAnimationData from './error.json';
+import './PageNotFound.css';
+
+const PageNotFound = () => {
+    const defaultOptions = {
+        loop: true,
+        autoplay: true,
+        animationData: errorAnimationData,
+        rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice'
+        }
+    };
+
+    return (
+        <div className="container">
+            <div className="content">
+                <h1>Oops...</h1>
+                <p>It seems you've reached a page that's lost in cyberspace</p>
+                <div className="animation">
+                <Lottie options={defaultOptions} height={455} width={674} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PageNotFound;