game creation UI
This commit is contained in:
parent
916e73c9cd
commit
0e1ce871d8
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
27
src/data/games.ts
Normal file
27
src/data/games.ts
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user