forgejo-lila/lila
1
0
Fork 0
Code Issues 50 Pull requests Projects 1 Releases Packages Wiki Activity Actions

complete design overhaul

Browse source
This commit is contained in:
lila 2026-04-19 19:25:55 +02:00
parent d033a08d87
commit 0a0bafa0ec
14 changed files with 505 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

28
apps/web/src/components/game/GameSetup.tsx
View file

@ -35,16 +35,18 @@ const SettingGroup = ({
onSelect,
}: SettingGroupProps) => (
<div className="w-full">
<p className="text-sm font-medium text-purple-400 mb-2">{label}</p>
<p className="text-xs font-bold tracking-widest uppercase text-(--color-primary) mb-2">
{label}
</p>
<div className="flex gap-2 flex-wrap">
{options.map((option) => (
<button
key={option}
onClick={() => onSelect(option)}
className={`py-2 px-5 rounded-xl font-semibold text-sm border-b-4 transition-all duration-200 cursor-pointer ${
className={`py-2 px-5 rounded-xl font-semibold text-sm border transition-all duration-200 cursor-pointer ${
selected === option
? "bg-purple-600 text-white border-purple-800"
: "bg-white text-purple-900 border-purple-200 hover:bg-purple-50 hover:border-purple-300"
? "bg-(--color-primary) text-white border-(--color-primary-dark) shadow-sm"
: "bg-white text-(--color-primary-dark) border-(--color-primary-light) hover:bg-(--color-surface) hover:-translate-y-0.5 active:translate-y-0"
}`}
>
{LABELS[option] ?? option}
@ -91,12 +93,18 @@ export const GameSetup = ({ onStart }: GameSetupProps) => {
return (
<div className="flex flex-col items-center gap-6 w-full max-w-md mx-auto">
<div className="bg-white rounded-3xl shadow-lg p-8 w-full text-center">
<h1 className="text-3xl font-bold text-purple-900 mb-1">lila</h1>
<p className="text-sm text-gray-400">Set up your quiz</p>
<div className="relative overflow-hidden w-full rounded-3xl border border-(--color-primary-light) bg-white dark:bg-black/10 shadow-sm p-8 text-center">
<div className="absolute -top-16 -left-20 h-40 w-40 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
<div className="absolute -bottom-20 -right-20 h-44 w-44 rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl" />
<h1 className="relative text-3xl font-black tracking-tight text-(--color-text) mb-1">
lila
</h1>
<p className="relative text-sm text-(--color-text-muted)">
Set up your quiz
</p>
</div>
<div className="bg-white rounded-3xl shadow-lg p-6 w-full flex flex-col gap-5">
<div className="w-full rounded-3xl border border-(--color-primary-light) bg-white dark:bg-black/10 shadow-sm p-6 flex flex-col gap-5">
<SettingGroup
label="I speak"
options={SUPPORTED_LANGUAGE_CODES}
@ -131,9 +139,9 @@ export const GameSetup = ({ onStart }: GameSetupProps) => {
<button
onClick={handleStart}
className="w-full py-4 rounded-2xl text-xl font-bold bg-linear-to-r from-pink-400 to-purple-500 text-white border-b-4 border-purple-700 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
className="w-full py-4 rounded-2xl text-xl font-black bg-linear-to-r from-pink-400 to-purple-500 text-white shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
>
Start Quiz
Start
</button>
</div>
);

29
apps/web/src/components/game/OptionButton.tsx
View file

@ -6,26 +6,39 @@ type OptionButtonProps = {
export const OptionButton = ({ text, state, onSelect }: OptionButtonProps) => {
const base =
"w-full py-3 px-6 rounded-2xl text-lg font-semibold transition-all duration-200 border-b-4 cursor-pointer";
"group relative w-full overflow-hidden py-3 px-6 rounded-2xl text-lg font-semibold transition-all duration-200 border cursor-pointer text-left";
const styles = {
idle: "bg-white text-purple-900 border-purple-200 hover:bg-purple-50 hover:border-purple-300 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2",
idle: "bg-white text-(--color-primary-dark) border-(--color-primary-light) hover:bg-(--color-surface) hover:-translate-y-0.5 active:translate-y-0",
selected:
"bg-purple-100 text-purple-900 border-purple-400 ring-2 ring-purple-400",
disabled: "bg-gray-100 text-gray-400 border-gray-200 cursor-default",
correct: "bg-emerald-400 text-white border-emerald-600 scale-[1.02]",
wrong: "bg-pink-400 text-white border-pink-600",
"bg-(--color-surface) text-(--color-primary-dark) border-(--color-primary) ring-2 ring-(--color-primary)",
disabled:
"bg-(--color-surface) text-(--color-primary-light) border-(--color-primary-light) cursor-default",
correct:
"bg-emerald-400/90 text-white border-emerald-600 ring-2 ring-emerald-300 scale-[1.01]",
wrong: "bg-pink-500/90 text-white border-pink-700 ring-2 ring-pink-300",
};
const motion =
state === "correct" ? "lila-pop" : state === "wrong" ? "lila-shake" : "";
return (
<button
className={`${base} ${styles[state]}`}
className={`${base} ${styles[state]} ${motion}`}
onClick={onSelect}
disabled={
state === "disabled" || state === "correct" || state === "wrong"
}
>
{text}
<span className="absolute inset-0 -z-10 opacity-0 group-hover:opacity-100 transition-opacity">
<span className="absolute -top-10 -right-12 h-24 w-24 rounded-full bg-(--color-primary) opacity-[0.10] blur-2xl" />
<span className="absolute -bottom-10 -left-12 h-24 w-24 rounded-full bg-(--color-accent) opacity-[0.10] blur-2xl" />
</span>
<span className="flex items-center justify-between gap-3">
<span className="truncate">{text}</span>
{state === "correct" && <span aria-hidden>✓</span>}
{state === "wrong" && <span aria-hidden>✕</span>}
</span>
</button>
);
};

32
apps/web/src/components/game/QuestionCard.tsx
View file

@ -48,22 +48,31 @@ export const QuestionCard = ({
return (
<div className="flex flex-col items-center gap-6 w-full max-w-md mx-auto">
<div className="flex items-center gap-2 text-sm font-medium text-purple-400">
<span>
{questionNumber} / {totalQuestions}
</span>
<div className="w-full flex items-center justify-between">
<div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
Round {questionNumber}/{totalQuestions}
</div>
<div className="text-xs font-semibold text-(--color-text-muted)">
{currentResult ? "Checked" : selectedOptionId !== null ? "Ready" : "Pick one"}
</div>
</div>
<div className="bg-white rounded-3xl shadow-lg p-8 w-full text-center">
<h2 className="text-3xl font-bold text-purple-900 mb-2">
<div className="relative w-full overflow-hidden rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/10 backdrop-blur shadow-sm p-8 text-center">
<div className="absolute -top-16 -left-20 h-40 w-40 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
<div className="absolute -bottom-20 -right-20 h-44 w-44 rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl" />
<h2 className="relative text-3xl font-black tracking-tight text-(--color-text) mb-2">
{question.prompt}
</h2>
{question.gloss && (
<p className="text-sm text-gray-400 italic">{question.gloss}</p>
<p className="relative text-sm text-(--color-text-muted) italic">
{question.gloss}
</p>
)}
</div>
<div className="flex flex-col gap-3 w-full">
<div className="w-full rounded-3xl border border-(--color-primary-light) bg-white/55 dark:bg-black/10 backdrop-blur shadow-sm p-4">
<div className="flex flex-col gap-3">
{question.options.map((option) => (
<OptionButton
key={option.optionId}
@ -73,20 +82,21 @@ export const QuestionCard = ({
/>
))}
</div>
</div>
{!currentResult && selectedOptionId !== null && (
<button
onClick={handleSubmit}
className="w-full py-3 rounded-2xl text-lg font-bold bg-linear-to-r from-pink-400 to-purple-500 text-white border-b-4 border-purple-700 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
className="w-full py-3 rounded-2xl text-lg font-bold bg-linear-to-r from-pink-400 to-purple-500 text-white shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
>
Submit
Lock it in
</button>
)}
{currentResult && (
<button
onClick={handleNext}
className="w-full py-3 rounded-2xl text-lg font-bold bg-purple-600 text-white border-b-4 border-purple-800 hover:bg-purple-500 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
className="w-full py-3 rounded-2xl text-lg font-bold bg-(--color-primary) text-white shadow-sm hover:shadow-md hover:bg-(--color-primary-dark) hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
>
{questionNumber === totalQuestions ? "See Results" : "Next"}
</button>

31
apps/web/src/components/game/ScoreScreen.tsx
View file

@ -1,4 +1,5 @@
import type { AnswerResult } from "@lila/shared";
import { ConfettiBurst } from "../ui/ConfettiBurst";
type ScoreScreenProps = { results: AnswerResult[]; onPlayAgain: () => void };
@ -17,30 +18,38 @@ export const ScoreScreen = ({ results, onPlayAgain }: ScoreScreenProps) => {
return (
<div className="flex flex-col items-center gap-8 w-full max-w-md mx-auto">
<div className="bg-white rounded-3xl shadow-lg p-10 w-full text-center">
<p className="text-lg font-medium text-purple-400 mb-2">Your Score</p>
<h2 className="text-6xl font-bold text-purple-900 mb-1">
<div className="relative overflow-hidden w-full rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/10 backdrop-blur shadow-sm p-10 text-center">
{percentage === 100 && <ConfettiBurst />}
<div className="absolute -top-20 -left-24 h-56 w-56 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
<div className="absolute -bottom-24 -right-20 h-64 w-64 rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl" />
<p className="relative inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary) mb-3">
Results
</p>
<h2 className="relative text-6xl font-black tracking-tight text-(--color-text) mb-1">
{score}/{total}
</h2>
<p className="text-2xl mb-6">{getMessage()}</p>
<p className="relative text-2xl mb-6">{getMessage()}</p>
<div className="w-full bg-purple-100 rounded-full h-4 mb-2">
<div className="relative w-full bg-(--color-surface) border border-(--color-primary-light) rounded-full h-4 mb-2 overflow-hidden">
<div
className="bg-linear-to-r from-pink-400 to-purple-500 h-4 rounded-full transition-all duration-700"
style={{ width: `${percentage}%` }}
/>
</div>
<p className="text-sm text-gray-400">{percentage}% correct</p>
<p className="relative text-sm text-(--color-text-muted)">
{percentage}% correct
</p>
</div>
<div className="flex flex-col gap-2 w-full">
{results.map((result, index) => (
<div
key={result.questionId}
className={`flex items-center gap-3 py-2 px-4 rounded-xl text-sm ${
className={`flex items-center gap-3 py-2 px-4 rounded-xl text-sm border ${
result.isCorrect
? "bg-emerald-50 text-emerald-700"
: "bg-pink-50 text-pink-700"
? "bg-emerald-50/60 text-emerald-700 border-emerald-200"
: "bg-pink-50/60 text-pink-700 border-pink-200"
}`}
>
<span className="font-bold">{index + 1}.</span>
@ -51,9 +60,9 @@ export const ScoreScreen = ({ results, onPlayAgain }: ScoreScreenProps) => {
<button
onClick={onPlayAgain}
className="py-3 px-10 rounded-2xl text-lg font-bold bg-purple-600 text-white border-b-4 border-purple-800 hover:bg-purple-500 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
className="w-full py-3 px-10 rounded-2xl text-lg font-black bg-(--color-primary) text-white shadow-sm hover:shadow-md hover:bg-(--color-primary-dark) hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
>
Play Again
Play again
</button>
</div>
);

39
apps/web/src/components/landing/FeatureCards.tsx
View file

@ -12,29 +12,52 @@ const features = [
},
{
emoji: "⚔️",
title: "Multiplayer coming",
description: "Challenge friends and see who has the bigger vocabulary.",
title: "Real-time multiplayer",
description: "Create a room, share the code, and race to the best score.",
},
];
const FeatureCards = () => {
return (
<section className="py-16">
<h2 className="text-center text-3xl font-black tracking-tight text-(--color-text) mb-12">
<section className="py-14">
<div className="text-center">
<div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
Tiny rounds · big dopamine
</div>
<h2 className="text-3xl font-black tracking-tight text-(--color-text)">
Why lila
</h2>
<p className="mt-3 text-(--color-text-muted) max-w-2xl mx-auto">
Built to be fast to start, satisfying to finish, and fun to repeat.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
{features.map(({ emoji, title, description }) => (
<div
key={title}
className="flex flex-col gap-3 p-6 rounded-2xl border border-(--color-primary-light)"
className="group relative overflow-hidden rounded-2xl border border-(--color-primary-light) bg-(--color-bg) p-6 shadow-sm hover:shadow-lg transition-shadow"
>
<span className="text-3xl">{emoji}</span>
<div className="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-(--color-primary) opacity-[0.08] blur-2xl transition-transform duration-300 group-hover:translate-x-2 group-hover:-translate-y-2" />
<div className="flex items-center gap-4">
<div className="relative h-12 w-12 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) grid place-items-center text-2xl">
<span aria-hidden>{emoji}</span>
</div>
<h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
<p className="text-sm text-(--color-text-muted) leading-relaxed">
</div>
<p className="mt-3 text-sm text-(--color-text-muted) leading-relaxed">
{description}
</p>
<div className="mt-5 flex flex-wrap gap-2">
<span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
<span className="h-1.5 w-1.5 rounded-full bg-(--color-accent)" />
Instant feedback
</span>
<span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
<span className="h-1.5 w-1.5 rounded-full bg-(--color-primary)" />
Type-safe API
</span>
</div>
</div>
))}
</div>

113
apps/web/src/components/landing/Hero.tsx
View file

@ -5,58 +5,133 @@ const Hero = () => {
const { data: session } = useSession();
return (
<section className="relative flex flex-col items-center text-center pt-20 pb-16">
<div className="-rotate-1 mb-2">
<span className="text-sm font-semibold tracking-widest uppercase text-(--color-accent)">
Vocabulary trainer
<section className="relative pt-10 md:pt-16 pb-10 md:pb-14">
<div className="absolute inset-0 -z-10">
<div className="absolute -top-24 left-1/2 h-72 w-[46rem] -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
<div className="absolute -top-10 left-1/2 h-72 w-[46rem] -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
</div>
<div className="grid items-center gap-10 md:grid-cols-2">
<div className="text-center md:text-left">
<div className="-rotate-1 mb-3">
<span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) px-4 py-1 text-xs font-semibold tracking-widest uppercase text-(--color-accent) border border-(--color-primary-light)">
Duolingo-style drills · real-time multiplayer
</span>
</div>
<h1 className="text-6xl font-black tracking-tight text-(--color-text) leading-tight">
Meet{" "}
<h1 className="text-5xl md:text-6xl font-black tracking-tight text-(--color-text) leading-[1.05]">
Learn vocabulary fast,{" "}
<span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
lila
together
</span>
.
</h1>
<p className="mt-6 text-xl font-medium text-(--color-text-muted) max-w-sm">
Learn words.{" "}
<span className="text-(--color-accent) font-bold">Beat friends.</span>
<p className="mt-5 text-lg md:text-xl font-medium text-(--color-text-muted) max-w-xl mx-auto md:mx-0">
A word appears. You pick the translation. You score points.
Then you queue up a room and{" "}
<span className="text-(--color-accent) font-bold">beat friends</span>{" "}
in real time.
</p>
<div className="mt-4 flex gap-2 flex-wrap justify-center">
<div className="mt-4 flex gap-2 flex-wrap justify-center md:justify-start">
{["🇬🇧", "🇮🇹", "🇩🇪", "🇫🇷", "🇪🇸"].map((flag) => (
<span key={flag} className="text-2xl">
<span key={flag} className="text-2xl" aria-hidden>
{flag}
</span>
))}
<span className="sr-only">
Supported languages: English, Italian, German, French, Spanish
</span>
</div>
<div className="mt-10 flex gap-4">
<div className="mt-8 flex gap-3 flex-wrap justify-center md:justify-start">
{session ? (
<>
<Link
to="/play"
className="px-8 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
>
Start playing →
Play solo
</Link>
<Link
to="/multiplayer"
className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
>
Play with friends
</Link>
</>
) : (
<>
<Link
to="/login"
className="px-8 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
>
Get started →
Get started
</Link>
<Link
to="/login"
className="px-8 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
>
Login
Log in
</Link>
</>
)}
</div>
</div>
<div className="relative">
<div className="rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/20 backdrop-blur p-3 shadow-sm">
<div className="rounded-2xl bg-(--color-bg) border border-(--color-primary-light) overflow-hidden">
<div className="flex items-center justify-between px-4 py-3 bg-(--color-surface) border-b border-(--color-primary-light)">
<div className="flex items-center gap-2">
<div className="h-2.5 w-2.5 rounded-full bg-(--color-accent)" />
<div className="h-2.5 w-2.5 rounded-full bg-(--color-primary-light)" />
<div className="h-2.5 w-2.5 rounded-full bg-(--color-text-muted) opacity-40" />
</div>
<span className="text-xs font-semibold text-(--color-text-muted)">
Live preview
</span>
</div>
<div className="p-5 md:p-6">
<p className="text-xs font-semibold tracking-widest uppercase text-(--color-text-muted)">
Translate
</p>
<div className="mt-2 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) px-4 py-5">
<div className="text-3xl font-black text-(--color-text)">
finestra
</div>
<div className="mt-1 text-sm text-(--color-text-muted)">
(noun) · A2
</div>
</div>
<div className="mt-4 grid grid-cols-2 gap-3">
{["window", "forest", "river", "kitchen"].map((opt) => (
<div
key={opt}
className="rounded-xl border border-(--color-primary-light) bg-white/30 dark:bg-black/10 px-4 py-3 text-sm font-semibold text-(--color-text) hover:bg-(--color-surface)"
>
{opt}
</div>
))}
</div>
<div className="mt-5 flex items-center justify-between">
<div className="text-xs text-(--color-text-muted)">
Round 2/10
</div>
<div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-semibold text-(--color-text-muted)">
<span className="h-2 w-2 rounded-full bg-(--color-accent)" />
Multiplayer room
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};

59
apps/web/src/components/landing/HowItWorks.tsx
View file

@ -20,26 +20,55 @@ const steps = [
const HowItWorks = () => {
return (
<section className="py-16">
<h2 className="text-center text-3xl font-black tracking-tight text-(--color-text) mb-12">
<section className="py-14">
<div className="relative -mx-6 px-6 py-12 rounded-3xl bg-(--color-surface) border border-(--color-primary-light) overflow-hidden">
<div className="absolute -top-20 -left-24 h-56 w-56 rounded-full bg-(--color-accent) opacity-[0.12] blur-3xl" />
<div className="absolute -bottom-24 -right-20 h-64 w-64 rounded-full bg-(--color-primary) opacity-[0.14] blur-3xl" />
<div className="text-center">
<div className="inline-flex items-center gap-2 rounded-full bg-(--color-bg) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-accent)">
Quick · satisfying · replayable
</div>
<h2 className="mt-3 text-3xl font-black tracking-tight text-(--color-text)">
How it works
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{steps.map(({ number, title, description }) => (
<div
key={number}
className="flex flex-col gap-3 p-6 rounded-2xl bg-(--color-surface) border border-(--color-primary-light)"
>
<span className="text-4xl font-black text-(--color-primary-light)">
{number}
</span>
<h3 className="text-lg font-bold text-(--color-text)">{title}</h3>
<p className="text-sm text-(--color-text-muted) leading-relaxed">
{description}
<p className="mt-3 text-(--color-text-muted) max-w-2xl mx-auto">
Short rounds, instant feedback, and just enough pressure to make the
words stick.
</p>
</div>
<ol className="relative mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
{steps.map(({ number, title, description }) => (
<li
key={number}
className="group relative overflow-hidden rounded-2xl bg-(--color-bg) border border-(--color-primary-light) p-6 shadow-sm hover:shadow-lg transition-shadow"
>
<div className="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-(--color-primary) opacity-[0.10] blur-2xl transition-transform duration-300 group-hover:translate-x-2 group-hover:-translate-y-2" />
<div className="absolute -bottom-24 -left-24 h-48 w-48 rounded-full bg-(--color-accent) opacity-[0.08] blur-2xl transition-transform duration-300 group-hover:-translate-x-2 group-hover:translate-y-2" />
<div className="relative flex items-start gap-4">
<div className="shrink-0">
<div className="h-12 w-12 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) grid place-items-center">
<span className="text-sm font-black tracking-widest text-(--color-primary)">
{number}
</span>
</div>
</div>
<div>
<h3 className="text-lg font-bold text-(--color-text)">
{title}
</h3>
<p className="mt-2 text-sm text-(--color-text-muted) leading-relaxed">
{description}
</p>
<div className="mt-4 inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-bold text-(--color-primary-dark)">
<span className="h-1.5 w-1.5 rounded-full bg-(--color-accent)" />
Under 30 seconds
</div>
</div>
</div>
</li>
))}
</ol>
</div>
</section>
);

43
apps/web/src/components/multiplayer/MultiplayerScoreScreen.tsx
View file

@ -1,5 +1,6 @@
import { useNavigate } from "@tanstack/react-router";
import type { LobbyPlayer } from "@lila/shared";
import { ConfettiBurst } from "../ui/ConfettiBurst";
type MultiplayerScoreScreenProps = {
players: LobbyPlayer[];
@ -26,19 +27,27 @@ export const MultiplayerScoreScreen = ({
.join(" and ");
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="min-h-screen relative flex items-center justify-center p-6">
<div className="absolute inset-0 -z-10 bg-linear-to-b from-purple-100 to-pink-50" />
<div className="absolute -top-24 left-1/2 -translate-x-1/2 h-72 w-[46rem] rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl -z-10" />
<div className="absolute -top-8 left-1/2 -translate-x-1/2 h-72 w-[46rem] rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl -z-10" />
<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">
{isWinner && !isTie && <ConfettiBurst />}
{/* Result header */}
<div className="text-center flex flex-col gap-1">
<h1 className="text-2xl font-bold text-purple-800">
<div className="inline-flex mx-auto items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
Multiplayer
</div>
<h1 className="mt-2 text-2xl font-black tracking-tight text-(--color-text)">
{isTie ? "It's a tie!" : isWinner ? "You win! 🎉" : "Game over"}
</h1>
<p className="text-sm text-gray-500">
<p className="text-sm text-(--color-text-muted)">
{isTie ? `${winnerNames} tied` : `${winnerNames} wins!`}
</p>
</div>
<div className="border-t border-gray-200" />
<div className="border-t border-(--color-primary-light) opacity-60" />
{/* Score list */}
<div className="flex flex-col gap-2">
@ -48,35 +57,35 @@ export const MultiplayerScoreScreen = ({
return (
<div
key={player.userId}
className={`flex items-center justify-between rounded-lg px-4 py-3 ${
className={`flex items-center justify-between rounded-2xl px-4 py-3 border ${
isCurrentUser
? "bg-purple-50 border border-purple-200"
: "bg-gray-50"
? "bg-(--color-surface) border-(--color-primary-light)"
: "bg-white/30 dark:bg-black/10 border-(--color-primary-light)"
}`}
>
<div className="flex items-center gap-3">
<span className="text-sm font-medium text-gray-400 w-4">
<span className="text-sm font-bold text-(--color-text-muted) w-4">
{index + 1}.
</span>
<span
className={`text-sm font-medium ${
isCurrentUser ? "text-purple-800" : "text-gray-700"
className={`text-sm font-semibold ${
isCurrentUser ? "text-(--color-text)" : "text-(--color-text)"
}`}
>
{player.user.name}
{isCurrentUser && (
<span className="text-xs text-purple-400 ml-1">
<span className="text-xs text-(--color-primary) ml-1">
(you)
</span>
)}
</span>
{isPlayerWinner && (
<span className="text-xs text-yellow-500 font-medium">
<span className="text-xs font-medium" aria-label="Winner">
👑
</span>
)}
</div>
<span className="text-sm font-bold text-gray-700">
<span className="text-sm font-black text-(--color-text)">
{player.score} pts
</span>
</div>
@ -84,12 +93,12 @@ export const MultiplayerScoreScreen = ({
})}
</div>
<div className="border-t border-gray-200" />
<div className="border-t border-(--color-primary-light) opacity-60" />
{/* Actions */}
<div className="flex flex-col gap-3">
<button
className="rounded bg-purple-600 px-4 py-2 text-white hover:bg-purple-500"
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"
onClick={() => {
void navigate({
to: "/multiplayer/lobby/$code",
@ -100,7 +109,7 @@ export const MultiplayerScoreScreen = ({
Play Again
</button>
<button
className="rounded bg-gray-100 px-4 py-2 text-gray-700 hover:bg-gray-200"
className="rounded-2xl bg-white/30 dark:bg-black/10 border border-(--color-primary-light) px-4 py-3 text-(--color-text) font-bold hover:bg-(--color-surface) transition-colors"
onClick={() => {
void navigate({ to: "/multiplayer" });
}}

103
apps/web/src/components/ui/ConfettiBurst.tsx Normal file
View file

@ -0,0 +1,103 @@
import { useEffect, useMemo, useState, useId } from "react";
type ConfettiBurstProps = {
className?: string;
colors?: string[];
count?: number;
};
type Piece = {
id: number;
style: React.CSSProperties & ConfettiVars;
};
type ConfettiVars = {
["--x0"]: string;
["--y0"]: string;
["--x1"]: string;
["--y1"]: string;
};
const hashStringToUint32 = (value: string) => {
// FNV-1a 32-bit
let hash = 2166136261;
for (let i = 0; i < value.length; i++) {
hash ^= value.charCodeAt(i);
hash = Math.imul(hash, 16777619);
}
return hash >>> 0;
};
const mulberry32 = (seed: number) => {
return () => {
let t = (seed += 0x6d2b79f5);
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
};
export const ConfettiBurst = ({
className,
colors = [
"var(--color-primary)",
"var(--color-accent)",
"var(--color-primary-light)",
"var(--color-accent-light)",
],
count = 18,
}: ConfettiBurstProps) => {
const [visible, setVisible] = useState(true);
const instanceId = useId();
useEffect(() => {
const t = window.setTimeout(() => setVisible(false), 1100);
return () => window.clearTimeout(t);
}, []);
const pieces = useMemo<Piece[]>(() => {
const seed = hashStringToUint32(`${instanceId}:${count}:${colors.join(",")}`);
const rand = mulberry32(seed);
const rnd = (min: number, max: number) => min + rand() * (max - min);
return Array.from({ length: count }).map((_, i) => {
const x0 = rnd(-6, 6);
const y0 = rnd(-6, 6);
const x1 = rnd(-160, 160);
const y1 = rnd(60, 220);
const delay = rnd(0, 120);
const rotate = rnd(0, 360);
const color = colors[i % colors.length];
return {
id: i,
style: {
left: "50%",
top: "0%",
backgroundColor: color,
transform: `translate(${x0}px, ${y0}px) rotate(${rotate}deg)`,
animationDelay: `${delay}ms`,
// consumed by keyframes
["--x0"]: `${x0}px`,
["--y0"]: `${y0}px`,
["--x1"]: `${x1}px`,
["--y1"]: `${y1}px`,
},
};
});
}, [colors, count, instanceId]);
if (!visible) return null;
return (
<div
className={`pointer-events-none absolute inset-0 overflow-visible ${className ?? ""}`}
aria-hidden
>
{pieces.map((p) => (
<span key={p.id} className="lila-confetti-piece" style={p.style} />
))}
</div>
);
};

62
apps/web/src/index.css
View file

@ -26,3 +26,65 @@
color: var(--color-text);
}
}
@keyframes lila-pop {
0% {
transform: scale(1);
}
40% {
transform: scale(1.03);
}
100% {
transform: scale(1);
}
}
@keyframes lila-shake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-3px);
}
40% {
transform: translateX(3px);
}
60% {
transform: translateX(-2px);
}
80% {
transform: translateX(2px);
}
}
@keyframes lila-confetti {
0% {
transform: translate(var(--x0), var(--y0)) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
100% {
transform: translate(var(--x1), var(--y1)) rotate(540deg);
opacity: 0;
}
}
.lila-pop {
animation: lila-pop 220ms ease-out;
}
.lila-shake {
animation: lila-shake 260ms ease-in-out;
}
.lila-confetti-piece {
position: absolute;
width: 8px;
height: 12px;
border-radius: 3px;
animation: lila-confetti 900ms ease-out forwards;
will-change: transform, opacity;
}

4
apps/web/src/routes/login.tsx
View file

@ -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 })

14
apps/web/src/routes/multiplayer/game.$code.tsx
View file

@ -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>
);
})}

20
apps/web/src/routes/multiplayer/index.tsx
View file

@ -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);

20
apps/web/src/routes/multiplayer/lobby.$code.tsx
View file

@ -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>
)}