UPDATE: Enhance game on NotFoundPage;

REFACTOR: Add comments; PATCH: Removal unnecessary files; REFACTOR: Rename of component folder to match case of other folders;
2025-02-23 20:47:04 +00:00
parent 634c02a9bc
commit 5c81f58e66
5 changed files with 70 additions and 105 deletions
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/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) && (
            <>
--- a/frontend/src/components/Settings/QuickSettings.tsx
+++ b/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 BrightnessControl from "../functionality/BrightnessControl";
+import Screenshot from "../Functionality/Screenshot"
+import BrightnessControl from "../Functionality/BrightnessControl";

 const QuickSettings: React.FC = () => {
  const { theme } = useTheme();
--- a/frontend/src/pages/NotFoundPage.tsx
+++ b/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 starSize = 20;
+  const [stars, setStars] = useState<{ x: number; y: number, xChange: number, yChange: number }[]>([]);
+  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),
-          y: -starSize,
+          x: score > 20000 ? (window.innerWidth + starSize) : Math.random() * (window.innerWidth - 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,
-          y: star.y + 5,
+          x: star.x - star.xChange,
+          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;
--- a/package-lock.json
+++ b/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"
-      }
-    }
-  }
-}
--- a/package.json
+++ b/package.json
@@ -1,7 +0,0 @@
-{
-  "dependencies": {
-    "html2canvas": "^1.4.1",
-    "react": "^19.0.0",
-    "use-react-screenshot": "^4.0.0"
-  }
-}