File size: 5,798 Bytes
811126d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
ArrowRight,
Shuffle,
RefreshCcw,
Copy,
LogIn,
UserPlus,
} from "lucide-react";
import { toast } from "@/hooks/use-toast";
import Link from "next/link";
import "./styles/background-pattern.css";
import Image from "next/image";
import notmeLogo from "./notme.png";
const avatars = [
"/avatar1.png",
"/avatar2.png",
"/avatar3.png",
"/avatar4.png",
"/avatar5.png",
];
export default function HomePage() {
const [username, setUsername] = useState("");
const [avatarIndex, setAvatarIndex] = useState(0);
const [isUsernameValid, setIsUsernameValid] = useState(false);
const generateRandomUsername = () => {
const adjectives = ["Cool", "Super", "Mega", "Ultra", "Hyper"];
const nouns = ["Gamer", "Player", "Hero", "Champion", "Warrior"];
const randomAdjective =
adjectives[Math.floor(Math.random() * adjectives.length)];
const randomNoun = nouns[Math.floor(Math.random() * nouns.length)];
const randomNumber = Math.floor(Math.random() * 1000);
const newUsername = `${randomAdjective}${randomNoun}${randomNumber}`;
setUsername(newUsername);
setIsUsernameValid(true);
};
const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newUsername = e.target.value;
setUsername(newUsername);
setIsUsernameValid(newUsername.trim().length > 0);
};
const changeAvatar = () => {
setAvatarIndex((prevIndex) => (prevIndex + 1) % avatars.length);
};
const copyInviteLink = () => {
navigator.clipboard.writeText("https://yourgame.com/invite/123456");
toast({
title: "Invitation link copied!",
description: "The invitation link has been copied to your clipboard.",
});
};
return (
<div className="min-h-screen relative overflow-hidden">
<div className="background-pattern" />
<div className="background-overlay" />
<div className="background-vignette" />
<div className="relative z-10">
<div className="absolute top-4 left-4 space-x-2">
<Button
variant="secondary"
size="sm"
className="bg-white text-orange-600 hover:bg-orange-100"
>
<UserPlus className="mr-2 h-4 w-4" />
Sign Up
</Button>
<Button
variant="secondary"
size="sm"
className="bg-white text-orange-600 hover:bg-orange-100"
>
<LogIn className="mr-2 h-4 w-4" />
Login
</Button>
</div>
<div className="flex items-center justify-center min-h-screen p-4">
<div className="bg-white bg-opacity-90 backdrop-blur-sm rounded-lg shadow-xl w-full max-w-md p-8 space-y-4">
<div className="flex flex-col items-center space-y-2">
<Image
src={notmeLogo}
alt="NotMe Logo"
width={200}
height={200}
priority
className="w-48 h-48"
/>
</div>
<div className="flex flex-col items-center space-y-6">
<Avatar className="w-40 h-40 border-4 border-orange-400">
<AvatarImage src={avatars[avatarIndex]} alt="Avatar" />
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Button
onClick={changeAvatar}
variant="outline"
className="border-orange-400 text-orange-600 hover:bg-orange-100"
>
<RefreshCcw className="mr-2 h-5 w-5" />
Change Avatar
</Button>
</div>
<div className="space-y-4">
<label
htmlFor="username"
className="text-lg font-grobold font-normal text-orange-600"
>
Choose your username
</label>
<div className="flex space-x-2">
<Input
id="username"
value={username}
onChange={handleUsernameChange}
placeholder="Enter your username"
className="flex-grow bg-orange-50 text-orange-800 placeholder-orange-300 border-orange-200 focus:border-orange-400 focus:ring-orange-400"
/>
<Button
onClick={generateRandomUsername}
variant="outline"
className="border-orange-400 text-orange-600 hover:bg-orange-100"
>
<Shuffle className="h-5 w-5" />
</Button>
</div>
</div>
<div className="flex flex-col space-y-4">
<Link href="/create-group" className="flex-grow">
<Button
className={`w-full bg-orange-500 hover:bg-orange-600 text-white text-lg py-6 font-grobold font-normal ${
!isUsernameValid ? "opacity-50 cursor-not-allowed" : ""
}`}
disabled={!isUsernameValid}
>
Create Game
<ArrowRight className="ml-2 h-6 w-6" />
</Button>
</Link>
<Link href="/join" className="flex-grow">
<Button className="w-full bg-green-600 hover:bg-green-700 text-white text-lg py-6 font-grobold font-normal">
Join Game
<ArrowRight className="ml-2 h-6 w-6" />
</Button>
</Link>
</div>
</div>
</div>
</div>
</div>
);
}
|