game creation UI

src/components/Header.tsx

@@ -101,9 +101,8 @@ export default function Header() {
         {/* Mobile-only view (Logo & Login) */}
         <div className="flex md:hidden items-center gap-4">
           {/* Hamburger Button */}
-          <button className="px-4 py-2 bg-[rgb(248,144,22)] text-white rounded-lg transition-colors duration-300 hover:bg-white hover:text-[rgb(248,144,22)]">
-            Login
-          </button>
+          <PrivyButton></PrivyButton>
+          
           <button
             onClick={toggleDrawer}
             className="text-white"

src/components/Home.tsx

@@ -3,14 +3,43 @@
 import { useState } from "react";
 import Image from "next/image";
 import OpenGames from "./OpenGames";
+import { Game, games } from "../data/games";
 
 export default function HeroSection() {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isGameModalOpen, setIsGameModalOpen] = useState(false);
+  const [selectedGame, setSelectedGame] = useState<Game | null>(null);
+  const [selectedPrice, setSelectedPrice] = useState<number | null>(null);
+  const [isSignedIn, setIsSignedIn] = useState(false); // Replace with actual authentication logic
+  const [authMessage, setAuthMessage] = useState(""); // Message for sign-in prompt
+
+  const prices = [0.2, 0.5, 0.8];
+
+  const handleGameSelect = (game: Game) => setSelectedGame(game);
+  const handlePriceSelect = (price: number) => setSelectedPrice(price);
+
+  const handleCreateGame = () => {
+    if (!isSignedIn) {
+      setAuthMessage("Please sign in first.");
+      return;
+    }
+    if (selectedGame && selectedPrice !== null) {
+      console.log(`Creating game: ${selectedGame.name} with price ${selectedPrice} SOL`);
+      setIsGameModalOpen(false);
+    } else {
+      console.log("Please select a game and a price.");
+    }
+  };
+
+  const closeModals = () => {
+    setIsModalOpen(false);
+    setIsGameModalOpen(false);
+    setAuthMessage(""); // Clear message when modal is closed
+  };
 
   return (
     <>
       <section className="flex flex-col items-center text-center py-16">
-        {/* Centered Image */}
         <Image
           src="/duelfiassets/Playing on Arcade Machine no BG.png"
           alt="DuelFi Hero"
@@ -19,14 +48,21 @@ export default function HeroSection() {
           className="mb-6"
         />
 
-        {/* Big Text */}
         <h1 className="text-4xl font-bold text-white">
           Instant <span className="text-[rgb(248,144,22)]">Duels</span>, Instant{" "}
           <span className="text-[rgb(248,144,22)]">Wins</span>
         </h1>
 
-        {/* Create a Game Button */}
-        <button className="mt-12 px-12 py-4 bg-[rgb(248,144,22)] hover:bg-white text-black text-sm font-semibold rounded-xl flex items-center gap-2 transition duration-300 hover:scale-110">
+        <button
+          className="mt-12 px-12 py-4 bg-[rgb(248,144,22)] hover:bg-white text-black text-sm font-semibold rounded-xl flex items-center gap-2 transition duration-300 hover:scale-110"
+          onClick={() => {
+            if (!isSignedIn) {
+              setAuthMessage("Please sign in first.");
+            } else {
+              setIsGameModalOpen(true);
+            }
+          }}
+        >
           Create a Game
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -43,7 +79,6 @@ export default function HeroSection() {
           </svg>
         </button>
 
-        {/* How it Works */}
         <p
           className="mt-4 text-gray-400 cursor-pointer hover:underline font-mono"
           onClick={() => setIsModalOpen(true)}
@@ -54,43 +89,109 @@ export default function HeroSection() {
         <OpenGames />
       </section>
 
-      {/* Modal */}
-      {isModalOpen && (
-        <div className="fixed inset-0 bg-black/70 flex justify-center items-start pt-10 z-50">
+      {/* Authentication Prompt */}
+      {authMessage && (
+        <div className="fixed inset-0 bg-black/70 flex justify-center items-center z-50" onClick={closeModals}>
+          <div
+            className="bg-[rgb(30,30,30)] text-white w-full max-w-sm p-6 rounded-2xl shadow-lg"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <p className="text-center text-lg">{authMessage}</p>
+            <button
+              className="mt-4 w-full bg-[rgb(248,144,22)] text-black font-semibold py-2 rounded-xl transition hover:bg-white hover:scale-105"
+              onClick={closeModals}
+            >
+              Okay
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Game Modal */}
+      {isGameModalOpen && (
+        <div className="fixed inset-0 bg-black/70 flex justify-center items-start pt-10 z-50" onClick={closeModals}>
           <div
             className="bg-[rgb(30,30,30)] text-white w-full max-w-lg p-6 rounded-2xl shadow-lg transform transition-transform duration-300 animate-slide-down"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="text-xl font-bold mb-4">Create Game</h2>
+
+            {/* Game Selection */}
+            <div className="grid grid-cols-3 gap-4 mb-6">
+              {games.map((game) => (
+                <div
+                  key={game.id}
+                  className={`p-4 cursor-pointer rounded-xl border-2 transform transition-transform duration-500
+                  ${selectedGame?.id === game.id ? "scale-110 border-orange-500" : "scale-100 border-transparent"}
+                  hover:scale-105 hover:translate-y-[-5px] hover:border-orange-500`}
+                  onClick={() => handleGameSelect(game)}
+                >
+                  <Image
+                    src={game.thumbnail}
+                    alt={game.name}
+                    width={100}
+                    height={100}
+                    className="mb-2 rounded-md"
+                  />
+                  <h3 className="text-center text-sm">{game.name}</h3>
+                </div>
+              ))}
+            </div>
+
+            {/* Price Selection */}
+            <div className="mb-6 space-y-2">
+              {prices.map((price) => (
+                <p
+                  key={price}
+                  className={`flex items-center gap-2 text-gray-400 font-mono cursor-pointer transition-transform duration-500
+                  ${selectedPrice === price ? "text-white translate-x-2" : ""}`}
+                  onClick={() => handlePriceSelect(price)}
+                >
+                  <Image
+                    src="/duelfiassets/solana logo.png"
+                    alt="SOL"
+                    width={16}
+                    height={16}
+                    className="inline"
+                  />
+                  {price} SOL
+                </p>
+              ))}
+            </div>
+
+            <button
+              className="mt-6 w-full bg-[rgb(248,144,22)] text-black font-semibold py-2 rounded-xl transition hover:bg-white hover:scale-105"
+              onClick={handleCreateGame}
+            >
+              Create Game
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* How it Works Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black/70 flex justify-center items-start pt-10 z-50" onClick={closeModals}>
+          <div
+            className="bg-[rgb(30,30,30)] text-white w-full max-w-lg p-6 rounded-2xl shadow-lg transform transition-transform duration-300 animate-slide-down"
+            onClick={(e) => e.stopPropagation()}
           >
             <h2 className="text-xl font-bold mb-4">How It Works</h2>
 
-            {/* Steps */}
             <div className="space-y-4">
-              <div>
-                <h3 className="text-[rgb(248,144,22)] font-bold text-lg">1. Connect Your Wallet</h3>
-                <p className="text-xs text-gray-400 font-mono">
-                  Start by linking your wallet securely.
-                </p>
-              </div>
-              <div>
-                <h3 className="text-[rgb(248,144,22)] font-bold text-lg">2. Create or Join Game</h3>
-                <p className="text-xs text-gray-400 font-mono">
-                  Pick a game and set a wager, or join an existing match.
-                </p>
-              </div>
-              <div>
-                <h3 className="text-[rgb(248,144,22)] font-bold text-lg">3. Place Your Bet</h3>
-                <p className="text-xs text-gray-400 font-mono">
-                  Confirm your wager and get ready to play.
-                </p>
-              </div>
-              <div>
-                <h3 className="text-[rgb(248,144,22)] font-bold text-lg">4. Claim Your Winnings</h3>
-                <p className="text-xs text-gray-400 font-mono">
-                  Win the game and collect your rewards instantly!
-                </p>
-              </div>
+              {[
+                { step: "Connect Your Wallet", desc: "Start by linking your wallet securely." },
+                { step: "Create or Join Game", desc: "Pick a game and set a wager, or join an existing match." },
+                { step: "Place Your Bet", desc: "Confirm your wager and get ready to play." },
+                { step: "Claim Your Winnings", desc: "Win the game and collect your rewards instantly!" },
+              ].map(({ step, desc }, index) => (
+                <div key={index}>
+                  <h3 className="text-[rgb(248,144,22)] font-bold text-lg">{index + 1}. {step}</h3>
+                  <p className="text-xs text-gray-400 font-mono">{desc}</p>
+                </div>
+              ))}
             </div>
 
-            {/* Okay Button */}
             <button
               className="mt-6 w-full bg-[rgb(248,144,22)] text-black font-semibold py-2 rounded-xl transition hover:bg-white hover:scale-105"
               onClick={() => setIsModalOpen(false)}
@@ -100,23 +201,6 @@ export default function HeroSection() {
           </div>
         </div>
       )}
-
-      {/* Animation */}
-      <style jsx>{`
-        @keyframes slide-down {
-          from {
-            transform: translateY(-100%);
-            opacity: 0;
-          }
-          to {
-            transform: translateY(0);
-            opacity: 1;
-          }
-        }
-        .animate-slide-down {
-          animation: slide-down 0.3s ease-out;
-        }
-      `}</style>
     </>
   );
 }

src/components/OpenGames.tsx

@@ -1,28 +1,6 @@
 "use client";
-
 import Image from "next/image";
-
-const games = [
-  {
-    id: 1,
-    name: "Block Drop",
-    entryFee: "0.1 SOL",
-    thumbnail: "/duelfiassets/Block Drop Illustration.jpeg",
-  },
-  {
-    id: 2,
-    name: "Venom Trails",
-    entryFee: "0.02 ETH",
-    thumbnail: "/duelfiassets/Venom Trail Game Cover Illustration.png",
-  },
-  {
-    id: 3,
-    name: "Wall Smash",
-    entryFee: "0.05 ETH",
-    thumbnail: "/duelfiassets/Wall Smash Game Cover Illustration.png",
-  },
-];
-
+import {games} from "../data/games";
 export default function OpenGames() {
   return (
     <section className="py-16 px-6">

src/components/PrivyButton.tsx

@@ -11,8 +11,7 @@ export default function PrivyButton() {
   const { wallets } = useSolanaWallets();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [solWallet, setSolWallet] = useState("");
-  const [solBalance, setSolBalance] = useState("--"); // Placeholder
-  const [tokenBalance] = useState("--"); // Placeholder
+  const [solBalance, setSolBalance] = useState("--"); 
   const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -89,7 +88,7 @@ export default function PrivyButton() {
       ) : (
         <button
           onClick={customLogin}
-          className="bg-[rgb(248,144,22)] hover:bg-[rgb(248,200,100)] text-white px-6 py-3 rounded-md transition duration-300 hover:scale-105"
+          className="bg-[rgb(248,144,22)] hover:bg-[rgb(248,200,100)] text-black font-bold px-6 py-3 rounded-md transition duration-300 hover:scale-105"
         >
           Sign In
         </button>
@@ -124,12 +123,6 @@ export default function PrivyButton() {
               <p className="text-sm">{solBalance} SOL</p>
             </div>
 
-            {/* Token Balance */}
-            <div className="mb-4">
-              <p className="text-gray-400 text-xs font-mono">Token Balance</p>
-              <p className="text-sm">{tokenBalance}</p>
-            </div>
-
             {/* Socials */}
             {(user?.discord?.username || user?.email?.address) && (
               <div className="mb-4">

src/data/games.ts

@@ -0,0 +1,27 @@
+export const games = [
+  {
+    id: 1,
+    name: "Block Drop",
+    entryFee: "0.1 SOL",
+    thumbnail: "/duelfiassets/Block Drop Illustration.jpeg",
+  },
+  {
+    id: 2,
+    name: "Venom Trails",
+    entryFee: "0.02 ETH",
+    thumbnail: "/duelfiassets/Venom Trail Game Cover Illustration.png",
+  },
+  {
+    id: 3,
+    name: "Wall Smash",
+    entryFee: "0.05 ETH",
+    thumbnail: "/duelfiassets/Wall Smash Game Cover Illustration.png",
+  },
+];
+
+export interface Game {
+    id: number;
+    name: string;
+    entryFee: string;
+    thumbnail: string;
+  }