UPDATE: Enhance game on NotFoundPage;

REFACTOR: Add comments;
PATCH: Removal unnecessary files;
REFACTOR: Rename of component folder to match case of other folders;

frontend/src/components/Layout/ListRow.tsx

@@ -71,6 +71,7 @@ const ListRow = forwardRef<{ addMoreItems: (newItems: ListItemProps[]) => void }
             : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
         }`}
       >
+        {/* List Details */}
         <div
           className={`text-center ${
             variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
@@ -87,6 +88,7 @@ const ListRow = forwardRef<{ addMoreItems: (newItems: ListItemProps[]) => void }
           <p>{description}</p>
         </div>
 
+        {/* List Items */}
         <div className="relative overflow-hidden flex flex-grow items-center z-0">
           {!wrap && currentItems.length > (amountForScroll || 0) && (
             <>

frontend/src/components/Settings/QuickSettings.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import ThemeSetting from "./ThemeSetting";
 import { useTheme } from "../../context/ThemeContext";
 import { useQuickSettings } from "../../context/QuickSettingsContext";
-import Screenshot from "../functionality/Screenshot"
+import Screenshot from "../Functionality/Screenshot"
-import BrightnessControl from "../functionality/BrightnessControl";
+import BrightnessControl from "../Functionality/BrightnessControl";
 
 const QuickSettings: React.FC = () => {
   const { theme } = useTheme();

frontend/src/pages/NotFoundPage.tsx

@@ -4,15 +4,22 @@ import Button from "../components/Input/Button";
 import ChromeDinoGame from "react-chrome-dino";
 
 const NotFoundPage: React.FC = () => {
-  const [stars, setStars] = useState<{ x: number; y: number }[]>([]);
+  const [stars, setStars] = useState<{ x: number; y: number, xChange: number, yChange: number }[]>([]);
-  const starSize = 20;
+  const starSize = 30;
+
+  const [score, setScore] = useState(0);
+  const [isGameOver, setIsGameOver] = useState(false);
 
   useEffect(() => {
+    console.log("Game over state:", isGameOver);
+
     const loop = setInterval(() => {
       if (Math.random() < 0.1) {
         const newStar = {
-          x: Math.random() * (window.innerWidth - starSize),
+          x: score > 20000 ? (window.innerWidth + starSize) : Math.random() * (window.innerWidth - starSize),
-          y: -starSize,
+          y: score > 20000 ? Math.random() * (window.innerHeight - starSize) : -starSize,
+          xChange: score * .001,
+          yChange: 5,
         };
         setStars((prev) => [...prev, newStar]);
       }
@@ -30,17 +37,38 @@ const NotFoundPage: React.FC = () => {
         });
 
         return newStars.map((star) => ({
-          ...star,
+          x: star.x - star.xChange,
-          y: star.y + 5,
+          y: star.y + star.yChange,
+          xChange: score * .001,
+          yChange: star.yChange,
         }));
       });
+
+      if (isGameOver) {
+        setScore(score * 0.99);
+      }
     }, 10);
 
-    return () => clearInterval(loop);
+    return () => {
+      clearInterval(loop);
+    };
+  }, [isGameOver, score]);
+
+  useEffect(() => {
+    const gameMonitor = setInterval(() => {
+      // Access the Runner instance (which the code stores in Runner.instance_)
+      const runner = (window as any).Runner?.instance_;
+      setIsGameOver(runner?.crashed);
+      if (!runner?.crashed) setScore(runner?.distanceRan);
+    }, 500);
+
+    return () => {
+      clearInterval(gameMonitor);
+    };
   }, []);
 
   return (
-    <div className="h-screen w-screen bg-gray-900 text-white overflow-hidden relative">
+    <div className={`h-screen w-screen ${score > 25000 ? "bg-black" : score > 10000 ? "bg-[#0f0024]" : "bg-slate-900"} text-white overflow-hidden relative transition-colors duration-[5s]`}>
       <div>
         {stars.map((star, index) => (
           <div
@@ -53,11 +81,14 @@ const NotFoundPage: React.FC = () => {
         ))}
       </div>
       <div className="absolute flex justify-center items-center h-full z-0 inset-0 bg-[radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] bg-[length:50px_50px]">
-        <div className="w-full text-center animate-floating">
+        <div className={`${score > 30000 && "drop-shadow-[0_0_5px_rgb(220,20,60)]" } w-full text-center animate-floating transition-all duration-[5s]`}>
           <h1 className="text-6xl font-bold mb-4">404</h1>
           <p className="text-2xl mb-8">Page Not Found</p>
           <ChromeDinoGame />
-          <Button extraClasses="z-[100]" onClick={() => window.location.href = "/"}>
+          <Button
+            extraClasses="z-[100]"
+            onClick={() => (window.location.href = "/")}
+          >
             Go Home
           </Button>
         </div>
@@ -66,4 +97,29 @@ const NotFoundPage: React.FC = () => {
   );
 };
 
+/*
+Re: ChromeDinoGame
+The MIT License (MIT)
+
+Copyright (c) 2020 M. Hasbini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
 export default NotFoundPage;

package-lock.json

@@ -1,86 +0,0 @@
-{
-  "name": "cs3305-team11",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "html2canvas": "^1.4.1",
-        "react": "^19.0.0",
-        "use-react-screenshot": "^4.0.0"
-      }
-    },
-    "node_modules/base64-arraybuffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
-    "node_modules/css-line-break": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
-      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-      "license": "MIT",
-      "dependencies": {
-        "utrie": "^1.0.2"
-      }
-    },
-    "node_modules/html2canvas": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
-      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-      "license": "MIT",
-      "dependencies": {
-        "css-line-break": "^2.1.0",
-        "text-segmentation": "^1.0.3"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/react": {
-      "version": "19.0.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
-      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/text-segmentation": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
-      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-      "license": "MIT",
-      "dependencies": {
-        "utrie": "^1.0.2"
-      }
-    },
-    "node_modules/use-react-screenshot": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/use-react-screenshot/-/use-react-screenshot-4.0.0.tgz",
-      "integrity": "sha512-4UZIORp7iCklfNOS/dPJab9SPeGdS0nFyIi3qA1rfMyYf/em/KfodYhrOlSHAHWvfdeCrS67Jjk6H4M4oLYSWg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      },
-      "peerDependencies": {
-        "html2canvas": "^1.3.3",
-        "react": "^18.2.0"
-      }
-    },
-    "node_modules/utrie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
-      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-      "license": "MIT",
-      "dependencies": {
-        "base64-arraybuffer": "^1.0.2"
-      }
-    }
-  }
-}

package.json

@@ -1,7 +0,0 @@
-{
-  "dependencies": {
-    "html2canvas": "^1.4.1",
-    "react": "^19.0.0",
-    "use-react-screenshot": "^4.0.0"
-  }
-}