UI fixed route added mobile responsive

frontend/package.json

@@ -13,6 +13,7 @@
     "axios": "^1.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
@@ -21,9 +22,12 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.tsx

@@ -1,19 +1,22 @@
-import './App.css'
+// import "./App.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { Simulation } from './components/Simulation';
-import { Game } from './components/Game';
+import { Simulation } from "./pages/Simulation";
+import { Game } from "./pages/Game";
+import { Footer, Navbar } from "./components";
+import { Home } from "./pages/Home";
 
 function App() {
   return (
-    <>
-     <BrowserRouter>
+    <BrowserRouter>
+      <Navbar />
       <Routes>
-        <Route path="simulation" element={<Simulation />} />
-        <Route path="game" element={<Game />} />
+        <Route path="/" element={<Home />} />
+        <Route path="/simulation" element={<Simulation />} />
+        <Route path="/game" element={<Game />} />
       </Routes>
+      <Footer />
     </BrowserRouter>
-    </>
-  )
+  );
 }
 
-export default App
+export default App;

frontend/src/components/Footer.tsx

@@ -0,0 +1,42 @@
+import { FaGithub, FaTwitter, FaYoutube } from "react-icons/fa";
+import { Link } from "react-router-dom";
+
+export const Footer = () => {
+  return (
+    <footer className="border-t border-gray-600 py-12 text-white">
+      <div className="w-[96%] max-w-screen-lg mx-auto flex flex-row justify-between">
+        <div className="flex items-center">
+          <Link
+            to="/"
+            className="flex items-center space-x-3 rtl:space-x-reverse"
+          >
+            {/* <img
+            src="https://res.cloudinary.com/dcugqfvvg/image/upload/v1713647295/standardboard.1d6f9426_asqzum.png"
+            className="h-8"
+            alt="plinkoo Logo"
+          /> */}
+            <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+              Plinkoo.100x
+            </span>
+          </Link>
+        </div>
+        <div>
+          <div className="space-y-2">
+            <h1 className="text-center text-lg">Follow On</h1>
+            <div className="flex items-center gap-3">
+              <a href="https://github.com/hkirat" target="_blank">
+                <FaGithub size={30} />
+              </a>
+              <a href="https://www.youtube.com/@harkirat1" target="_blank">
+                <FaYoutube size={30} />
+              </a>
+              <a href="https://twitter.com/kirat_tw" target="_blank">
+                <FaTwitter size={30} />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};

frontend/src/components/FoundIssue.tsx

@@ -0,0 +1,36 @@
+export const FoundIssue = () => {
+  return (
+    <div className="mb-24 lg:mb-32 mt-16 lg:mt-0 bg-[#262522] w-[96%] max-w-screen-lg mx-auto px-14 py-14 rounded-[36px]">
+      <div className="lg:grid grid-cols-[45%,1fr] gap-28">
+        <div className="rounded-xl">
+          <img
+            src="https://res.cloudinary.com/dcugqfvvg/image/upload/v1713657312/undraw_questions_re_1fy7_kqjpu3.svg"
+            alt="chess-board"
+          />
+        </div>
+        <div className="mt-16 lg:mt-0">
+          <h1 className="text-6xl text-white font-bold text-left mt-[-10px]">
+            Found an Issue!
+          </h1>
+          <p className="text-xl mt-6 text-white">
+            Please create an issue in our github website below. You are also
+            invited to contribute on the project.
+          </p>
+
+          <a
+            href="https://github.com/code100x/plinkoo/issues"
+            target="_blank"
+            className="mt-10 text-white rounded-2xl px-4 py-4 border border-slate-400 bg-transparent w-full text-2xl flex gap-10 items-center justify-center"
+          >
+            <img
+              className="w-16 h-16"
+              src="https://res.cloudinary.com/dcugqfvvg/image/upload/v1713657100/github-svgrepo-com_uosbko.svg"
+              alt="icon"
+            />
+            <p className="text-4xl">Github</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/Navbar.tsx

@@ -0,0 +1,71 @@
+import { RxHamburgerMenu } from "react-icons/rx";
+import { Button } from "./ui";
+import { Link, useNavigate } from "react-router-dom";
+import { useState } from "react";
+
+export const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const navigate = useNavigate();
+  return (
+    <nav className="bg-white z-50 border-gray-200 dark:bg-[#262522] borbder-b shadow-lg">
+      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+        <Link
+          to="/"
+          className="flex items-center space-x-3 rtl:space-x-reverse"
+        >
+          {/* <img
+            src="https://res.cloudinary.com/dcugqfvvg/image/upload/v1713647295/standardboard.1d6f9426_asqzum.png"
+            className="h-8"
+            alt="plinkoo Logo"
+          /> */}
+          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+            Plinkoo.100x
+          </span>
+        </Link>
+        <Button
+          data-collapse-toggle="navbar-default"
+          className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm  rounded-lg md:hidden focus:outline-none focus:ring-2 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 bg-transparent"
+          onClick={() => {
+            setIsMenuOpen(!isMenuOpen);
+          }}
+        >
+          <span className="sr-only">Open main menu</span>
+          <RxHamburgerMenu size={30} />
+        </Button>{" "}
+        <div
+          className={`w-full lg:hidden flex flex-col md:w-auto items-center ${
+            isMenuOpen ? "" : "hidden"
+          }`}
+          id="navbar-default"
+        >
+          <Button
+            className="bg-transparent mx-4 hover:bg-black w-[50%]"
+            onClick={() => navigate("/simulation")}
+          >
+            Simulation
+          </Button>
+          <Button
+            className="bg-transparent mx-4 hover:bg-black w-[50%]"
+            onClick={() => navigate("/game")}
+          >
+            Game
+          </Button>
+        </div>
+        <div className="hidden w-full md:block md:w-auto" id="navbar-default">
+          <Button
+            className="bg-transparent mx-4 hover:bg-black"
+            onClick={() => navigate("/simulation")}
+          >
+            Simulation
+          </Button>
+          <Button
+            className="bg-transparent mx-4 hover:bg-black"
+            onClick={() => navigate("/game")}
+          >
+            Game
+          </Button>
+        </div>
+      </div>
+    </nav>
+  );
+};

frontend/src/components/Quotes.tsx

@@ -0,0 +1,22 @@
+import { useNavigate } from "react-router-dom";
+import { Button } from "./ui/Button";
+
+export const Quotes = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="flex mx-16 flex-col justify-center pb-10 ">
+      <h1 className="text-6xl font-bold">Play Plinko, Earn More!</h1>
+      <h3 className="mt-4 text-xl mb-4">
+        Plinko lets players drop a ball from the top of our triangular pin
+        pyramid to find the winning route down to a corresponding multiplier.
+        Inspired by the Japanese mechanical game known as Pachinko, Plinko
+        provides players with the ability to customise your risk factor and
+        multipliers ensuring this Stake Original game is suited for everyone at
+        our online casino !
+      </h3>
+      <Button className="hover:bg-green-600" onClick={() => navigate("/game")}>
+        Play Plinko
+      </Button>
+    </div>
+  );
+};

frontend/src/components/Simulate.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef, useState } from "react";
+
+import { useNavigate } from "react-router-dom";
+import { BallManager } from "../game/classes/BallManager";
+import { pad } from "../game/padding";
+import { WIDTH } from "../game/constants";
+
+export const Simulate = () => {
+  const navigate = useNavigate();
+
+  const canvasRef = useRef<any>();
+  let [outputs, setOutputs] = useState<{ [key: number]: number[] }>({
+    0: [],
+    1: [],
+    2: [],
+    3: [],
+    4: [],
+    5: [],
+    6: [],
+    7: [],
+    8: [],
+    9: [],
+    10: [],
+    11: [],
+    12: [],
+    13: [],
+    14: [],
+    15: [],
+    16: [],
+    17: [],
+  });
+
+  async function simulate(ballManager: BallManager) {
+    let i = 0;
+    while (1) {
+      i++;
+      ballManager.addBall(pad(WIDTH / 2 + 20 * (Math.random() - 0.5)));
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    }
+  }
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      const ballManager = new BallManager(
+        canvasRef.current as unknown as HTMLCanvasElement,
+        (index: number, startX?: number) => {
+          setOutputs((outputs: any) => {
+            return {
+              ...outputs,
+              [index]: [...(outputs[index] as number[]), startX],
+            };
+          });
+        }
+      );
+      simulate(ballManager);
+
+      return () => {
+        ballManager.stop();
+      };
+    }
+  }, [canvasRef]);
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <canvas ref={canvasRef} width="800" height="800"></canvas>
+    </div>
+  );
+};

frontend/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Navbar";
+export * from "./Quotes";
+export * from "./Simulate";
+export * from "./Footer";
+export * from "./FoundIssue";

frontend/src/components/ui/Button.tsx

@@ -0,0 +1,18 @@
+export const Button = ({
+  onClick,
+  children,
+  className,
+}: {
+  onClick: () => void;
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-2 py-2 text-2xl bg-green-500  text-white font-bold rounded ${className}`}
+    >
+      {children}
+    </button>
+  );
+};

frontend/src/components/ui/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

frontend/src/game/constants.ts

@@ -10,4 +10,4 @@ export const horizontalFriction = 0.4;
 export const verticalFriction = 0.8;
 
 export const sinkWidth = 36;
-export const NUM_SINKS = 17
+export const NUM_SINKS = 17;

frontend/src/index.css

@@ -1,18 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #0e212e;
-
+  /* background-color: #213743; */
+  background-color: #302e2b;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-family: "Times New Roman", Times, serif;
 }
-
+/* 
 a {
   font-weight: 500;
   color: #646cff;
@@ -65,4 +70,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+} */