From e4b2992f969784cdafa4c5a48f62a90e78a33884 Mon Sep 17 00:00:00 2001
From: dhruvathakur <128789248+DhruvaPratapSingh@users.noreply.github.com>
Date: Wed, 22 Oct 2025 11:35:01 +0530
Subject: [PATCH 1/3] add racing game component and test

---
 src/app/components/game/Racing.jsx      | 69 +++++++++++++++++++++++++
 src/app/components/game/Racing.test.jsx |  7 +++
 src/app/components/page.jsx             | 21 ++++++++
 3 files changed, 97 insertions(+)
 create mode 100644 src/app/components/game/Racing.jsx
 create mode 100644 src/app/components/game/Racing.test.jsx

diff --git a/src/app/components/game/Racing.jsx b/src/app/components/game/Racing.jsx
new file mode 100644
index 0000000..5274aa2
--- /dev/null
+++ b/src/app/components/game/Racing.jsx
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+
+export default function Racing() {
+  const [car1, setCar1] = useState(0);
+  const [car2, setCar2] = useState(0);
+  const [winner, setWinner] = useState("");
+  const [running, setRunning] = useState(false);
+
+  useEffect(() => {
+    if (!running) return;
+
+    const race = setInterval(() => {
+      setCar1((prev) => Math.min(prev + Math.random() * 8, 300));
+      setCar2((prev) => Math.min(prev + Math.random() * 8, 300));
+    }, 100);
+
+    return () => clearInterval(race);
+  }, [running]);
+
+  useEffect(() => {
+    if (car1 >= 300 || car2 >= 300) {
+      setRunning(false);
+      if (car1 > car2) setWinner("🚗 Car 1 Wins!");
+      else if (car2 > car1) setWinner("🏎️ Car 2 Wins!");
+      else setWinner("🤝 It’s a Tie!");
+    }
+  }, [car1, car2]);
+
+  const startRace = () => {
+    setCar1(0);
+    setCar2(0);
+    setWinner("");
+    setRunning(true);
+  };
+
+  return (
+    <div className="ui-bg-gray-100 ui-p-6 ui-rounded-2xl ui-shadow-lg ui-space-y-6 ui-text-center ui-backdrop-blur-md">
+      <h2 className="ui-text-2xl ui-font-bold">🏁 Simple Racing Game</h2>
+
+      <div className="ui-relative ui-w-full ui-h-24 ui-bg-white/30 ui-rounded-lg ui-border ui-overflow-hidden ui-backdrop-blur-xl">
+        <div
+          className="ui-absolute ui-top-4 ui-h-4 ui-bg-gradient-to-r ui-from-blue-500 ui-to-cyan-400 ui-rounded-full ui-transition-all ui-duration-100"
+          style={{ left: `${car1}px`, width: "40px" }}
+        ></div>
+
+        <div
+          className="ui-absolute ui-top-12 ui-h-4 ui-bg-gradient-to-r ui-from-red-500 ui-to-pink-500 ui-rounded-full ui-transition-all ui-duration-100"
+          style={{ left: `${car2}px`, width: "40px" }}
+        ></div>
+      </div>
+
+      {winner && (
+        <p className="ui-text-lg ui-font-semibold ui-text-gray-800 ui-animate-bounce">
+          {winner}
+        </p>
+      )}
+
+      <button
+        onClick={startRace}
+        disabled={running}
+        className={`ui-bg-gradient-to-r ui-from-indigo-500 ui-to-purple-500 ui-text-white ui-font-semibold ui-px-6 ui-py-2 ui-rounded-lg ui-shadow-md ui-transition-all hover:ui-scale-105 ${
+          running ? "ui-opacity-60 ui-cursor-not-allowed" : ""
+        }`}
+      >
+        {running ? "Racing..." : "Start Race"}
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/components/game/Racing.test.jsx b/src/app/components/game/Racing.test.jsx
new file mode 100644
index 0000000..fe2ea98
--- /dev/null
+++ b/src/app/components/game/Racing.test.jsx
@@ -0,0 +1,7 @@
+import { render, screen } from "@testing-library/react";
+import Racing from "./racing";
+
+test("renders racing component", () => {
+  render(<Racing />);
+  expect(screen.getByText("🏁 Simple Racing Game")).toBeInTheDocument();
+});
diff --git a/src/app/components/page.jsx b/src/app/components/page.jsx
index 7a84fdf..b15a4a4 100644
--- a/src/app/components/page.jsx
+++ b/src/app/components/page.jsx
@@ -69,6 +69,8 @@ import ALertManager from "./alert/ALertManager";
 import Loader from "./loaders/Loader";
 // form Input
 
+// game 
+import Test from "./game/Racing"
 import { DatePicker } from "./FormInput/DatePicker";
 import { FileUpload } from "./FormInput/FileUpload";
 import { FormValidation } from "./FormInput/FormValidation";
@@ -739,6 +741,25 @@ export default function Page() {
             </div>
           </section>
         )}
+{/* Racing Section */}
+<div className="relative w-full py-16 px-6 flex flex-col items-center justify-center 
+  bg-gradient-to-r from-purple-500 via-pink-500 to-orange-400
+  rounded-3xl shadow-2xl overflow-hidden my-16">
+
+  {/* Glassy overlay */}
+  <div className="absolute inset-0 bg-white/10 backdrop-blur-lg rounded-3xl border border-white/20"></div>
+
+  {/* Content */}
+  <div className="relative z-10 w-full max-w-5xl mx-auto text-center space-y-8">
+    <h2 className="text-4xl font-extrabold text-white drop-shadow-lg">
+      🏁 Game Section
+    </h2>
+
+    <section className="max-w-5xl mx-auto px-4">
+      <Test />
+    </section>
+  </div>
+</div>
 
         {/* Cards Section */}
         {filteredComponents.cards && (

From 473587864b356ca9b02e0dbc5a9e5f59c36c7332 Mon Sep 17 00:00:00 2001
From: dhruvathakur <128789248+DhruvaPratapSingh@users.noreply.github.com>
Date: Wed, 22 Oct 2025 12:20:08 +0530
Subject: [PATCH 2/3] add racing game component and integrate into the main
 page

---
 src/app/components/game/Racing.jsx      | 69 -------------------
 src/app/components/game/Racing.test.jsx |  7 --
 src/app/components/page.jsx             |  6 +-
 src/app/game/Racing.jsx                 | 91 +++++++++++++++++++++++++
 src/app/game/page.jsx                   | 50 ++++++++++++++
 src/app/pages/Navbar.jsx                |  2 +
 6 files changed, 146 insertions(+), 79 deletions(-)
 delete mode 100644 src/app/components/game/Racing.jsx
 delete mode 100644 src/app/components/game/Racing.test.jsx
 create mode 100644 src/app/game/Racing.jsx
 create mode 100644 src/app/game/page.jsx

diff --git a/src/app/components/game/Racing.jsx b/src/app/components/game/Racing.jsx
deleted file mode 100644
index 5274aa2..0000000
--- a/src/app/components/game/Racing.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useEffect, useState } from "react";
-
-export default function Racing() {
-  const [car1, setCar1] = useState(0);
-  const [car2, setCar2] = useState(0);
-  const [winner, setWinner] = useState("");
-  const [running, setRunning] = useState(false);
-
-  useEffect(() => {
-    if (!running) return;
-
-    const race = setInterval(() => {
-      setCar1((prev) => Math.min(prev + Math.random() * 8, 300));
-      setCar2((prev) => Math.min(prev + Math.random() * 8, 300));
-    }, 100);
-
-    return () => clearInterval(race);
-  }, [running]);
-
-  useEffect(() => {
-    if (car1 >= 300 || car2 >= 300) {
-      setRunning(false);
-      if (car1 > car2) setWinner("🚗 Car 1 Wins!");
-      else if (car2 > car1) setWinner("🏎️ Car 2 Wins!");
-      else setWinner("🤝 It’s a Tie!");
-    }
-  }, [car1, car2]);
-
-  const startRace = () => {
-    setCar1(0);
-    setCar2(0);
-    setWinner("");
-    setRunning(true);
-  };
-
-  return (
-    <div className="ui-bg-gray-100 ui-p-6 ui-rounded-2xl ui-shadow-lg ui-space-y-6 ui-text-center ui-backdrop-blur-md">
-      <h2 className="ui-text-2xl ui-font-bold">🏁 Simple Racing Game</h2>
-
-      <div className="ui-relative ui-w-full ui-h-24 ui-bg-white/30 ui-rounded-lg ui-border ui-overflow-hidden ui-backdrop-blur-xl">
-        <div
-          className="ui-absolute ui-top-4 ui-h-4 ui-bg-gradient-to-r ui-from-blue-500 ui-to-cyan-400 ui-rounded-full ui-transition-all ui-duration-100"
-          style={{ left: `${car1}px`, width: "40px" }}
-        ></div>
-
-        <div
-          className="ui-absolute ui-top-12 ui-h-4 ui-bg-gradient-to-r ui-from-red-500 ui-to-pink-500 ui-rounded-full ui-transition-all ui-duration-100"
-          style={{ left: `${car2}px`, width: "40px" }}
-        ></div>
-      </div>
-
-      {winner && (
-        <p className="ui-text-lg ui-font-semibold ui-text-gray-800 ui-animate-bounce">
-          {winner}
-        </p>
-      )}
-
-      <button
-        onClick={startRace}
-        disabled={running}
-        className={`ui-bg-gradient-to-r ui-from-indigo-500 ui-to-purple-500 ui-text-white ui-font-semibold ui-px-6 ui-py-2 ui-rounded-lg ui-shadow-md ui-transition-all hover:ui-scale-105 ${
-          running ? "ui-opacity-60 ui-cursor-not-allowed" : ""
-        }`}
-      >
-        {running ? "Racing..." : "Start Race"}
-      </button>
-    </div>
-  );
-}
diff --git a/src/app/components/game/Racing.test.jsx b/src/app/components/game/Racing.test.jsx
deleted file mode 100644
index fe2ea98..0000000
--- a/src/app/components/game/Racing.test.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import Racing from "./racing";
-
-test("renders racing component", () => {
-  render(<Racing />);
-  expect(screen.getByText("🏁 Simple Racing Game")).toBeInTheDocument();
-});
diff --git a/src/app/components/page.jsx b/src/app/components/page.jsx
index b15a4a4..d4b7007 100644
--- a/src/app/components/page.jsx
+++ b/src/app/components/page.jsx
@@ -69,8 +69,8 @@ import ALertManager from "./alert/ALertManager";
 import Loader from "./loaders/Loader";
 // form Input
 
-// game 
-import Test from "./game/Racing"
+
+
 import { DatePicker } from "./FormInput/DatePicker";
 import { FileUpload } from "./FormInput/FileUpload";
 import { FormValidation } from "./FormInput/FormValidation";
@@ -756,7 +756,7 @@ export default function Page() {
     </h2>
 
     <section className="max-w-5xl mx-auto px-4">
-      <Test />
+      {/* <Test /> */}
     </section>
   </div>
 </div>
diff --git a/src/app/game/Racing.jsx b/src/app/game/Racing.jsx
new file mode 100644
index 0000000..174e7b6
--- /dev/null
+++ b/src/app/game/Racing.jsx
@@ -0,0 +1,91 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export default function Racing() {
+  const [car1, setCar1] = useState(0);
+  const [car2, setCar2] = useState(0);
+  const [winner, setWinner] = useState("");
+  const [running, setRunning] = useState(false);
+
+  const trackLength = 600; // total horizontal distance in px
+
+  // Race movement
+  useEffect(() => {
+    if (!running) return;
+
+    const race = setInterval(() => {
+      setCar1((prev) => Math.min(prev + Math.random() * 15, trackLength));
+      setCar2((prev) => Math.min(prev + Math.random() * 15, trackLength));
+    }, 100);
+
+    return () => clearInterval(race);
+  }, [running]);
+
+  // Check winner
+  useEffect(() => {
+    if (car1 >= trackLength || car2 >= trackLength) {
+      setRunning(false);
+      if (car1 > car2) setWinner("🚗 Car 1 Wins!");
+      else if (car2 > car1) setWinner("🏎️ Car 2 Wins!");
+      else setWinner("🤝 It’s a Tie!");
+    }
+  }, [car1, car2]);
+
+  const startRace = () => {
+    setCar1(0);
+    setCar2(0);
+    setWinner("");
+    setRunning(true);
+  };
+
+  return (
+    <div className="bg-gradient-to-br from-gray-50 dark:from-gray-900 via-gray-100 dark:via-gray-800 to-gray-200 dark:to-black py-12 rounded-3xl shadow-2xl text-center text-gray-900 dark:text-white space-y-10 backdrop-blur-xl">
+      <h2 className="text-4xl font-extrabold">🏁 Racing Track</h2>
+
+      {/* Track */}
+      <div className="relative w-[700px] h-48 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-gray-400 dark:to-gray-900 rounded-2xl border border-gray-400 dark:border-gray-600 overflow-hidden mx-auto">
+        {/* Road markings */}
+        <div className="absolute top-1/2 left-0 w-full h-[4px] bg-white/50 dark:bg-white/30 rounded-full"></div>
+
+        {/* Finish Line */}
+        <div className="absolute left-[20px] top-0 h-full w-[12px] bg-[repeating-linear-gradient(45deg,white,white_10px,black_10px,black_20px)] rounded-sm"></div>
+
+        {/* Car 1 */}
+        <div
+          className="absolute top-10 text-6xl transition-left duration-100 ease-linear"
+          style={{ left: `${trackLength - car1}px` }}
+        >
+          🚗
+        </div>
+
+        {/* Car 2 */}
+        <div
+          className="absolute top-28 text-6xl transition-left duration-100 ease-linear"
+          style={{ left: `${trackLength - car2}px` }}
+        >
+          🏎️
+        </div>
+      </div>
+
+      {/* Winner Display */}
+      {winner && <p className="text-2xl font-bold animate-bounce">{winner}</p>}
+
+      {/* Start Button */}
+      <button
+        onClick={startRace}
+        disabled={running}
+        className={`bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold px-8 py-3 rounded-xl shadow-md transition-all hover:scale-105 ${
+          running ? "opacity-50 cursor-not-allowed" : ""
+        }`}
+      >
+        {running ? "🏎️ Racing..." : "Start Race"}
+      </button>
+
+      <style jsx>{`
+        .transition-left {
+          transition: left 0.1s linear;
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/src/app/game/page.jsx b/src/app/game/page.jsx
new file mode 100644
index 0000000..847fa87
--- /dev/null
+++ b/src/app/game/page.jsx
@@ -0,0 +1,50 @@
+"use client";
+import { useState } from "react";
+import Racing from "./Racing"; // Import the Racing component
+
+export default function Page() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterType, setFilterType] = useState("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-800 transition-colors duration-500 font-sans">
+
+      {/* Hero Section */}
+      <section className="relative max-w-5xl mx-auto px-4 mt-12 mb-16">
+        <div className="backdrop-blur-md  dark:bg-gray-900/40 rounded-3xl shadow-2xl py-14 px-10 flex flex-col items-center gap-6 border border-gray-100 dark:border-gray-700 transition-all">
+          <h1 className="text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
+            React UI Playground
+          </h1>
+          <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 text-center max-w-3xl">
+            Beautiful, modern & responsive component demo – interact with components and explore smooth animations.
+          </p>
+          <button className="mt-4 bg-gradient-to-r from-purple-500 to-indigo-500 text-white px-6 py-3 rounded-xl shadow-lg hover:scale-105 transition-transform duration-300">
+            Explore Now
+          </button>
+        </div>
+      </section>
+
+      {/* Racing Game Section */}
+      <section className="max-w-5xl mx-auto px-4 mb-20">
+        <div className="bg-gradient-to-br from-indigo-200 via-purple-300 to-pink-400 dark:from-indigo-900 dark:via-purple-800 dark:to-black rounded-3xl shadow-2xl p-8 backdrop-blur-xl border border-white/20 dark:border-gray-700 transition-all">
+          <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">
+            🏁 Racing Game
+          </h2>
+          <Racing />
+        </div>
+      </section>
+
+      {/* Placeholder Section */}
+      <section className="max-w-5xl mx-auto px-4 mb-16">
+        <div className="bg-white/40 dark:bg-gray-900/40 backdrop-blur-xl rounded-2xl p-8 shadow-lg border border-gray-100 dark:border-gray-700 transition-all">
+          <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
+            More Components Coming Soon...
+          </h2>
+          <p className="text-gray-700 dark:text-gray-300">
+            Stay tuned for more interactive UI components, demos, and fun features.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/src/app/pages/Navbar.jsx b/src/app/pages/Navbar.jsx
index 751b0e3..6ad9083 100644
--- a/src/app/pages/Navbar.jsx
+++ b/src/app/pages/Navbar.jsx
@@ -12,8 +12,10 @@ const navLinks = [
   { href: "/contact", label: "Contact" },
   { href: "/components", label: "Components" },
   { href: "/playground", label: "🎮 Playground" },
+  { href: "/game", label: "🎮 Game" },
   { href: "/analytics", label: "Analytics" },
   { href: "/feedback", label: "Feedback" },
+  {href: "/racing", label: "🏁 Racing Game" },
 ];
 
 const Navbar = () => {

From 74d96150325f8b1e2beae37921e03cd0d62e90d3 Mon Sep 17 00:00:00 2001
From: dhruvathakur <128789248+DhruvaPratapSingh@users.noreply.github.com>
Date: Wed, 22 Oct 2025 12:26:18 +0530
Subject: [PATCH 3/3] refactor Racing component for responsive track length and
 UI adjustments

---
 src/app/game/Racing.jsx | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/app/game/Racing.jsx b/src/app/game/Racing.jsx
index 174e7b6..bdbbe2b 100644
--- a/src/app/game/Racing.jsx
+++ b/src/app/game/Racing.jsx
@@ -7,7 +7,21 @@ export default function Racing() {
   const [winner, setWinner] = useState("");
   const [running, setRunning] = useState(false);
 
-  const trackLength = 600; // total horizontal distance in px
+  const trackLengthDesktop = 600; // px for desktop
+  const trackLengthMobile = 300; // px for small screens
+
+  const [trackLength, setTrackLength] = useState(trackLengthDesktop);
+
+  // Update track length on resize
+  useEffect(() => {
+    const updateTrackLength = () => {
+      if (window.innerWidth < 768) setTrackLength(trackLengthMobile);
+      else setTrackLength(trackLengthDesktop);
+    };
+    updateTrackLength();
+    window.addEventListener("resize", updateTrackLength);
+    return () => window.removeEventListener("resize", updateTrackLength);
+  }, []);
 
   // Race movement
   useEffect(() => {
@@ -19,7 +33,7 @@ export default function Racing() {
     }, 100);
 
     return () => clearInterval(race);
-  }, [running]);
+  }, [running, trackLength]);
 
   // Check winner
   useEffect(() => {
@@ -29,7 +43,7 @@ export default function Racing() {
       else if (car2 > car1) setWinner("🏎️ Car 2 Wins!");
       else setWinner("🤝 It’s a Tie!");
     }
-  }, [car1, car2]);
+  }, [car1, car2, trackLength]);
 
   const startRace = () => {
     setCar1(0);
@@ -39,20 +53,20 @@ export default function Racing() {
   };
 
   return (
-    <div className="bg-gradient-to-br from-gray-50 dark:from-gray-900 via-gray-100 dark:via-gray-800 to-gray-200 dark:to-black py-12 rounded-3xl shadow-2xl text-center text-gray-900 dark:text-white space-y-10 backdrop-blur-xl">
-      <h2 className="text-4xl font-extrabold">🏁 Racing Track</h2>
+    <div className="bg-gradient-to-br from-gray-50 dark:from-gray-900 via-gray-100 dark:via-gray-800 to-gray-200 dark:to-black py-10 md:py-12 rounded-3xl shadow-2xl text-center text-gray-900 dark:text-white space-y-8 md:space-y-10 backdrop-blur-xl transition-all">
+      <h2 className="text-3xl md:text-4xl font-extrabold">🏁 Racing Track</h2>
 
       {/* Track */}
-      <div className="relative w-[700px] h-48 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-gray-400 dark:to-gray-900 rounded-2xl border border-gray-400 dark:border-gray-600 overflow-hidden mx-auto">
+      <div className="relative w-full max-w-[700px] h-48 md:h-56 bg-gradient-to-r from-gray-200 dark:from-gray-700 to-gray-400 dark:to-gray-900 rounded-2xl border border-gray-400 dark:border-gray-600 overflow-hidden mx-auto">
         {/* Road markings */}
         <div className="absolute top-1/2 left-0 w-full h-[4px] bg-white/50 dark:bg-white/30 rounded-full"></div>
 
         {/* Finish Line */}
-        <div className="absolute left-[20px] top-0 h-full w-[12px] bg-[repeating-linear-gradient(45deg,white,white_10px,black_10px,black_20px)] rounded-sm"></div>
+        <div className="absolute left-[2%] md:left-[20px] top-0 h-full w-[12px] bg-[repeating-linear-gradient(45deg,white,white_10px,black_10px,black_20px)] rounded-sm"></div>
 
         {/* Car 1 */}
         <div
-          className="absolute top-10 text-6xl transition-left duration-100 ease-linear"
+          className="absolute top-10 md:top-12 text-5xl md:text-6xl transition-left duration-100 ease-linear"
           style={{ left: `${trackLength - car1}px` }}
         >
           🚗
@@ -60,7 +74,7 @@ export default function Racing() {
 
         {/* Car 2 */}
         <div
-          className="absolute top-28 text-6xl transition-left duration-100 ease-linear"
+          className="absolute top-28 md:top-32 text-5xl md:text-6xl transition-left duration-100 ease-linear"
           style={{ left: `${trackLength - car2}px` }}
         >
           🏎️
@@ -68,13 +82,13 @@ export default function Racing() {
       </div>
 
       {/* Winner Display */}
-      {winner && <p className="text-2xl font-bold animate-bounce">{winner}</p>}
+      {winner && <p className="text-xl md:text-2xl font-bold animate-bounce">{winner}</p>}
 
       {/* Start Button */}
       <button
         onClick={startRace}
         disabled={running}
-        className={`bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold px-8 py-3 rounded-xl shadow-md transition-all hover:scale-105 ${
+        className={`bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold px-6 md:px-8 py-2 md:py-3 rounded-xl shadow-md transition-all hover:scale-105 ${
           running ? "opacity-50 cursor-not-allowed" : ""
         }`}
       >