Merge pull request #66 from ClaudioMartinH/64-create-main-page

64 create main page

client/src/Routes/routes.tsx

@@ -1,5 +1,6 @@
+import MainPage from '../screen/MainPage';
 import App from '../App';
-import LoginPage from "../components/LoginPage";
+import LoginPage from "../screen/LoginPage";
 
 import { createBrowserRouter } from "react-router-dom";
 
@@ -14,6 +15,11 @@ export const router = createBrowserRouter([
         element: <LoginPage />,
         errorElement: <div>THIS PAGE DOES NOT EXIST</div>,
       },
+      {
+        path: "play",
+        element: <MainPage />,
+        errorElement: <div>THIS PAGE DOES NOT EXIST</div>,
+      },
     ],
   },
 ]);

client/src/components/Dice.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { GiInvertedDice1, GiInvertedDice2, GiInvertedDice3, GiInvertedDice4, GiInvertedDice5, GiInvertedDice6 } from 'react-icons/gi';
+
+interface DiceProps {
+    face: 1 | 2 | 3 | 4 | 5 | 6;
+    rolling: boolean
+}
+
+const Dice: React.FC<DiceProps> = ({ face, rolling }) => {
+    const diceComponents: Record<number, JSX.Element> = {
+        1: <GiInvertedDice1 className={`text-white text-9xl ${rolling && "animate-wobble"}`} />,
+        2: <GiInvertedDice2 className={`text-white text-9xl ${rolling && "animate-wobble"}`} />,
+        3: <GiInvertedDice3 className={`text-white text-9xl ${rolling && "animate-wobble"}`} />,
+        4: <GiInvertedDice4 className={`text-white text-9xl ${rolling && "animate-wobble"}`} />,
+        5: <GiInvertedDice5 className={`text-white text-9xl ${rolling && "animate-wobble"}`} />,
+        6: <GiInvertedDice6 className={`text-white text-9xl ${rolling && "animate-wobble"}`} />
+    };
+
+    return (
+        <div>
+            {diceComponents[face]}
+        </div>
+    );
+};
+
+export default Dice;

client/src/components/RollDice.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import Dice from "./Dice";
+
+const RollDice = () => {
+    const [state, setState] = useState({
+        dice1: 1 as 1 | 2 | 3 | 4 | 5 | 6,
+        dice2: 1 as 1 | 2 | 3 | 4 | 5 | 6,
+        rolling: false,
+        result: "",
+        totalScore: 0,
+        rollCount: 0
+    });
+
+    const { dice1, dice2, rolling, result, totalScore, rollCount } = state
+
+    const roll = () => {
+        const newDice1 = Math.floor(Math.random() * 6) + 1 as 1 | 2 | 3 | 4 | 5 | 6;
+        const newDice2 = Math.floor(Math.random() * 6) + 1 as 1 | 2 | 3 | 4 | 5 | 6;
+        const score = newDice1 + newDice2;
+        const result = score > 7 ? "You Win!" : "You Loose!"
+        const newScore = score > 7 ? totalScore + 1 : totalScore
+        const newCount = rollCount + 1
+        setState({
+            dice1: newDice1,
+            dice2: newDice2,
+            rolling: true,
+            result: result,
+            totalScore: newScore,
+            rollCount: newCount
+        });
+
+        setTimeout(() => {
+            setState((prevState) => ({...prevState, rolling: false}))
+        }, 1000);
+    }
+
+    return (
+        <>
+            <div>
+                <div className="flex justify-center space-x-6 my-4">
+                    <Dice face={dice1} rolling={rolling} />
+                    <Dice face={dice2} rolling={rolling} />
+                </div>
+                <button onClick={roll} disabled={rolling} className="py-3 px-6 m-2 rounded-md bg-gradient-to-r from-cyan-500 to-blue-500 text-white text-lg font-semibold hover:opacity-85">
+                    {rolling ? "Rolling..." : "Roll Dice"}
+                </button>
+                <p className="text-white text-2xl">{result}</p>
+                <p className="text-white text-2xl">Total Score: {totalScore} / {rollCount}</p>
+            </div>
+        </>
+    );
+}
+
+export default RollDice;

client/src/components/LoginPage.tsx → client/src/screen/LoginPage.tsx

@@ -1,34 +1,35 @@
 import dice from '../assets/dice.jpg'
 import { FaUser,FaLock } from "react-icons/fa";
-
+import { useNavigate } from "react-router-dom";
 // import React, { useState } from "react";
-// import { Link } from "react-router-dom";
+
 
 const LoginPage: React.FC = () => {
-//   const [username, setUsername] = useState("");
-//   const [password, setPassword] = useState("");
+  const navigate = useNavigate();
+  // const [username, setUsername] = useState("");
+  // const [password, setPassword] = useState("");
 
-//   const handleLogin = (e: React.FormEvent) => {
-//     e.preventDefault();
-//     // Handle login logic here
-//     console.log("Username:", username);
-//     console.log("Password:", password);
-//   };
+  const handleLogin = (e: React.FormEvent) => {
+
+    e.preventDefault();
+    // Handle login logic here
+    // console.log("Username:", username);
+    // console.log("Password:", password);
+    navigate("/play");
+  };
 
   return (
-    <section className='flex justify-center items-center min-h-full bg-slate-800' style={{ backgroundImage: `url(${dice})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
-
-
-      <div className='m-4 p-10 rounded-xl bg-white/30'>
+    <section className='flex justify-center items-center min-h-full bg-black' style={{ backgroundImage: `url(${dice})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+      <div className='m-4 p-10 rounded-xl border border-white backdrop-blur-lg shadow-md shadow-slate-500'>
         <form action=''>
           <h1 className='text-white text-5xl font-semibold my-4'>Login</h1>
           <div className='relative'>
-            <input className='rounded-md p-3 my-3' type='text' placeholder='Username' required />
-            <FaUser className='text-black absolute right-4 top-1/2 -translate-y-2/4'/>
+            <input className='rounded-md p-3 my-3 border border-white bg-transparent text-white' type='text' placeholder='Username' required />
+            <FaUser className='text-white absolute right-4 top-1/2 -translate-y-2/4'/>
           </div>
           <div className='relative'>
-            <input className='rounded-md p-3 my-3' type='password' placeholder='Password' required />
-            <FaLock className='text-black absolute right-4 top-1/2 -translate-y-2/4'/>
+            <input className='rounded-md p-3 my-3 border border-white bg-transparent text-white' type='password' placeholder='Password' required />
+            <FaLock className='text-white absolute right-4 top-1/2 -translate-y-2/4'/>
           </div>
           <div className='flex justify-between'>
             <div className='flex items-center justify-evenly'>
@@ -37,9 +38,9 @@ const LoginPage: React.FC = () => {
             </div>
             <a href='#' className='text-white underline underline-offset-2 hover:text-slate-300'>Forgot password?</a>
           </div>
-          <button type='submit' className='py-3 px-6 m-2 rounded-md bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-semibold hover:opacity-85'>Login</button>
+          <button type='submit' className='py-3 px-6 m-2 rounded-md bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-semibold hover:opacity-85' onClick={handleLogin}>Login</button>
           <div>
-            <p className='text-white'>Don't have an account? <a href="#" className='underline underline-offset-2 hover:text-slate-300'>Register</a></p>
+            <p className='text-white'>Don't have an account? <a href="#" className='underline underline-offset-2 hover:text-slate-300 font-semibold'>Register</a></p>
           </div>
         </form>
       </div>

client/src/screen/MainPage.tsx

@@ -0,0 +1,16 @@
+import dice from '../assets/dice.jpg'
+import RollDice from '../components/RollDice';
+
+
+const MainPage: React.FC = () => {
+
+  return (
+    <section className='flex justify-center items-center min-h-full p-20 bg-slate-800' style={{ backgroundImage: `url(${dice})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
+        <div className='p-20 min-w-full rounded-xl border border-slate-500 backdrop-blur-lg shadow-md shadow-slate-600'>
+            <RollDice />
+        </div>
+    </section>
+  );
+};
+
+export default MainPage;

client/tailwind.config.js

@@ -1,11 +1,28 @@
+import { transform } from 'typescript';
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        wobble: 'wobble 1s ease-in-out'
+      },
+      keyframes: {
+        wobble: {
+          '0%': { transform: 'translate3d(0,0,0)' },
+          '15%': { transform: 'translate3d(-25%,0,0) rotate3d(0,0,1, -5deg)' },
+          '30%': { transform: 'translate3d(20%,0,0) rotate3d(0,0,1, 3deg)' },
+          '45%': { transform: 'translate3d(-15%,0,0) rotate3d(0,0,1, -3deg)' },
+          '60%': { transform: 'translate3d(10%,0,0) rotate3d(0,0,1, 2deg)' },
+          '75%': { transform: 'translate3d(-5%,0,0) rotate3d(0,0,1, -1deg)' },
+          '100%': { transform: 'translate3d(0,0,0)' },
+        }
+      }
+    },
   },
   plugins: [],
 }