complete design overhaul
This commit is contained in:
lila
parent
d033a08d87
commit
0a0bafa0ec
14 changed files with 505 additions and 160 deletions
|
|
@ -16,7 +16,7 @@ const LoginPage = () => {
|
|||
<div className="flex flex-col items-center justify-center gap-4 p-8">
|
||||
<h1 className="text-2xl font-bold">sign in to lila</h1>
|
||||
<button
|
||||
className="w-64 rounded bg-gray-800 px-4 py-2 text-white hover:bg-gray-700"
|
||||
className="w-64 rounded-2xl bg-(--color-text) px-4 py-3 text-white font-bold hover:opacity-90 shadow-sm hover:shadow-md transition-all"
|
||||
onClick={() => {
|
||||
void signIn
|
||||
.social({ provider: "github", callbackURL: window.location.origin })
|
||||
|
|
@ -28,7 +28,7 @@ const LoginPage = () => {
|
|||
Continue with GitHub
|
||||
</button>
|
||||
<button
|
||||
className="w-64 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500"
|
||||
className="w-64 rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-bold hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all"
|
||||
onClick={() => {
|
||||
void signIn
|
||||
.social({ provider: "google", callbackURL: window.location.origin })
|
||||
|
|
|
|||
|
|
@ -112,9 +112,9 @@ function GamePage() {
|
|||
// Phase: playing
|
||||
return (
|
||||
<div className="min-h-screen bg-linear-to-b from-purple-100 to-pink-50 flex items-center justify-center p-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md flex flex-col gap-6">
|
||||
<div className="w-full max-w-md rounded-3xl border border-(--color-primary-light) bg-white/50 dark:bg-black/10 backdrop-blur shadow-sm p-8 flex flex-col gap-6">
|
||||
{/* Progress */}
|
||||
<p className="text-sm text-gray-500 text-center">
|
||||
<p className="text-xs font-bold tracking-widest uppercase text-(--color-text-muted) text-center">
|
||||
Question {currentQuestion.questionNumber} of{" "}
|
||||
{currentQuestion.totalQuestions}
|
||||
</p>
|
||||
|
|
@ -150,7 +150,7 @@ function GamePage() {
|
|||
{/* Round results */}
|
||||
{answerResult && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="text-sm font-semibold text-gray-700">
|
||||
<h3 className="text-sm font-black text-(--color-text)">
|
||||
Round results
|
||||
</h3>
|
||||
{answerResult.players.map((player) => {
|
||||
|
|
@ -160,9 +160,9 @@ function GamePage() {
|
|||
return (
|
||||
<div
|
||||
key={player.userId}
|
||||
className="flex items-center justify-between text-sm"
|
||||
className="flex items-center justify-between text-sm text-(--color-text)"
|
||||
>
|
||||
<span className="text-gray-700">{player.user.name}</span>
|
||||
<span className="font-semibold">{player.user.name}</span>
|
||||
<span
|
||||
className={
|
||||
result?.isCorrect
|
||||
|
|
@ -176,7 +176,9 @@ function GamePage() {
|
|||
? "✓ Correct"
|
||||
: "✗ Wrong"}
|
||||
</span>
|
||||
<span className="text-gray-500">{player.score} pts</span>
|
||||
<span className="text-(--color-text-muted)">
|
||||
{player.score} pts
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -76,8 +76,8 @@ function MultiplayerPage() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-linear-to-b from-purple-100 to-pink-50 flex items-center justify-center p-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md flex flex-col gap-6">
|
||||
<h1 className="text-2xl font-bold text-center text-purple-800">
|
||||
<div className="w-full max-w-md rounded-3xl border border-(--color-primary-light) bg-white/50 dark:bg-black/10 backdrop-blur shadow-sm p-8 flex flex-col gap-6">
|
||||
<h1 className="text-2xl font-black tracking-tight text-center text-(--color-text)">
|
||||
Multiplayer
|
||||
</h1>
|
||||
|
||||
|
|
@ -85,14 +85,14 @@ function MultiplayerPage() {
|
|||
|
||||
{/* Create lobby */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-lg font-semibold text-gray-700">
|
||||
<h2 className="text-lg font-bold text-(--color-text)">
|
||||
Create a lobby
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500">
|
||||
<p className="text-sm text-(--color-text-muted)">
|
||||
Start a new game and invite friends with a code.
|
||||
</p>
|
||||
<button
|
||||
className="rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-500 disabled:opacity-50"
|
||||
className="rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-black hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all disabled:opacity-50"
|
||||
onClick={() => {
|
||||
void handleCreate().catch((err) => {
|
||||
console.error("Create lobby error:", err);
|
||||
|
|
@ -104,16 +104,16 @@ function MultiplayerPage() {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200" />
|
||||
<div className="border-t border-(--color-primary-light) opacity-60" />
|
||||
|
||||
{/* Join lobby */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-lg font-semibold text-gray-700">Join a lobby</h2>
|
||||
<p className="text-sm text-gray-500">
|
||||
<h2 className="text-lg font-bold text-(--color-text)">Join a lobby</h2>
|
||||
<p className="text-sm text-(--color-text-muted)">
|
||||
Enter the code shared by your host.
|
||||
</p>
|
||||
<input
|
||||
className="rounded border border-gray-300 px-3 py-2 text-sm uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
className="rounded-2xl border border-(--color-primary-light) bg-white/30 dark:bg-black/10 px-4 py-3 text-sm uppercase tracking-widest text-(--color-text) placeholder:text-(--color-text-muted) focus:outline-none focus:ring-2 focus:ring-(--color-primary)"
|
||||
placeholder="Enter code (e.g. WOLF42)"
|
||||
value={joinCode}
|
||||
onChange={(e) => setJoinCode(e.target.value)}
|
||||
|
|
@ -128,7 +128,7 @@ function MultiplayerPage() {
|
|||
disabled={isCreating || isJoining}
|
||||
/>
|
||||
<button
|
||||
className="rounded bg-gray-800 px-4 py-2 text-white hover:bg-gray-700 disabled:opacity-50"
|
||||
className="rounded-2xl bg-(--color-surface) border border-(--color-primary-light) px-4 py-3 text-(--color-text) font-black hover:bg-white/30 dark:hover:bg-black/10 shadow-sm hover:shadow-md transition-all disabled:opacity-50"
|
||||
onClick={() => {
|
||||
void handleJoin().catch((err) => {
|
||||
console.error("Join lobby error:", err);
|
||||
|
|
|
|||
|
|
@ -88,12 +88,14 @@ function LobbyPage() {
|
|||
|
||||
return (
|
||||
<div className="min-h-screen bg-linear-to-b from-purple-100 to-pink-50 flex items-center justify-center p-6">
|
||||
<div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md flex flex-col gap-6">
|
||||
<div className="w-full max-w-md rounded-3xl border border-(--color-primary-light) bg-white/50 dark:bg-black/10 backdrop-blur shadow-sm p-8 flex flex-col gap-6">
|
||||
{/* Lobby code */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<p className="text-sm text-gray-500">Lobby code</p>
|
||||
<p className="text-xs font-bold tracking-widest uppercase text-(--color-text-muted)">
|
||||
Lobby code
|
||||
</p>
|
||||
<button
|
||||
className="text-4xl font-bold tracking-widest text-purple-800 hover:text-purple-600 cursor-pointer"
|
||||
className="text-4xl font-black tracking-widest text-(--color-text) hover:text-(--color-primary) cursor-pointer"
|
||||
onClick={() => {
|
||||
void navigator.clipboard.writeText(code);
|
||||
}}
|
||||
|
|
@ -101,21 +103,21 @@ function LobbyPage() {
|
|||
>
|
||||
{code}
|
||||
</button>
|
||||
<p className="text-xs text-gray-400">Click to copy</p>
|
||||
<p className="text-xs text-(--color-text-muted)">Click to copy</p>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200" />
|
||||
<div className="border-t border-(--color-primary-light) opacity-60" />
|
||||
|
||||
{/* Player list */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-lg font-semibold text-gray-700">
|
||||
<h2 className="text-lg font-black text-(--color-text)">
|
||||
Players ({lobby.players.length})
|
||||
</h2>
|
||||
<ul className="flex flex-col gap-1">
|
||||
{lobby.players.map((player) => (
|
||||
<li
|
||||
key={player.userId}
|
||||
className="flex items-center gap-2 text-sm text-gray-700"
|
||||
className="flex items-center gap-2 text-sm text-(--color-text)"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-green-400" />
|
||||
{player.user.name}
|
||||
|
|
@ -135,7 +137,7 @@ function LobbyPage() {
|
|||
{/* Start button — host only */}
|
||||
{isHost && (
|
||||
<button
|
||||
className="rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-500 disabled:opacity-50"
|
||||
className="rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-black hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all disabled:opacity-50"
|
||||
onClick={handleStart}
|
||||
disabled={!canStart}
|
||||
>
|
||||
|
|
@ -149,7 +151,7 @@ function LobbyPage() {
|
|||
|
||||
{/* Non-host waiting message */}
|
||||
{!isHost && (
|
||||
<p className="text-sm text-gray-500 text-center">
|
||||
<p className="text-sm text-(--color-text-muted) text-center">
|
||||
Waiting for host to start the game...
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue