Compare commits
7 commits
c866805c80
...
0a0bafa0ec
| Author | SHA1 | Date | |
|---|---|---|---|
|
0a0bafa0ec | ||
|
|
d033a08d87 | ||
|
|
ef5c49f7cf | ||
|
|
4f514a4e99 | ||
|
|
767970b6e6 | ||
|
|
6c4ef371c1 | ||
|
|
6dbc16f23d |
25 changed files with 969 additions and 152 deletions
169
README.md
169
README.md
|
|
@ -1 +1,170 @@
|
|||
# lila
|
||||
|
||||
**Learn words. Beat friends.**
|
||||
|
||||
lila is a vocabulary trainer built around a Duolingo-style quiz loop: a word appears in one language, you pick the correct translation from four choices. It supports singleplayer and real-time multiplayer, and is designed to work across multiple language pairs without schema changes.
|
||||
|
||||
Live at [lilastudy.com](https://lilastudy.com).
|
||||
|
||||
---
|
||||
|
||||
## Stack
|
||||
|
||||
| Layer | Technology |
|
||||
|---|---|
|
||||
| Monorepo | pnpm workspaces |
|
||||
| Frontend | React 18, Vite, TypeScript |
|
||||
| Routing | TanStack Router |
|
||||
| Server state | TanStack Query |
|
||||
| Styling | Tailwind CSS |
|
||||
| Backend | Node.js, Express, TypeScript |
|
||||
| Database | PostgreSQL + Drizzle ORM |
|
||||
| Validation | Zod (shared schemas) |
|
||||
| Auth | Better Auth (Google + GitHub) |
|
||||
| Realtime | WebSockets (`ws` library) |
|
||||
| Testing | Vitest, supertest |
|
||||
| Deployment | Docker Compose, Caddy, Hetzner VPS |
|
||||
| CI/CD | Forgejo Actions |
|
||||
|
||||
---
|
||||
|
||||
## Repository Structure
|
||||
|
||||
```
|
||||
lila/
|
||||
├── apps/
|
||||
│ ├── api/ — Express backend
|
||||
│ └── web/ — React frontend
|
||||
├── packages/
|
||||
│ ├── shared/ — Zod schemas and types shared between frontend and backend
|
||||
│ └── db/ — Drizzle schema, migrations, models, seeding scripts
|
||||
├── scripts/ — Python scripts for vocabulary data extraction
|
||||
└── documentation/ — Project docs
|
||||
```
|
||||
|
||||
`packages/shared` is the contract between frontend and backend. All request/response shapes are defined there as Zod schemas and never duplicated.
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
|
||||
Requests flow through a strict layered architecture:
|
||||
|
||||
```
|
||||
HTTP Request → Router → Controller → Service → Model → Database
|
||||
```
|
||||
|
||||
Each layer only talks to the layer directly below it. Controllers handle HTTP only. Services contain business logic only. Models contain database queries only. All database code lives in `packages/db` — the API never imports Drizzle directly for queries.
|
||||
|
||||
---
|
||||
|
||||
## Data Model
|
||||
|
||||
Words are modelled as language-neutral concepts (`terms`) with per-language `translations`. Adding a new language requires no schema changes — only new rows. CEFR levels (A1–C2) are stored per translation for difficulty filtering.
|
||||
|
||||
Core tables: `terms`, `translations`, `term_glosses`, `decks`, `deck_terms`
|
||||
Auth tables (managed by Better Auth): `user`, `session`, `account`, `verification`
|
||||
|
||||
Vocabulary data is sourced from WordNet and the Open Multilingual Wordnet (OMW).
|
||||
|
||||
---
|
||||
|
||||
## API
|
||||
|
||||
```
|
||||
POST /api/v1/game/start — start a quiz session (auth required)
|
||||
POST /api/v1/game/answer — submit an answer (auth required)
|
||||
GET /api/v1/health — health check (public)
|
||||
ALL /api/auth/* — Better Auth handlers (public)
|
||||
```
|
||||
|
||||
The correct answer is never sent to the frontend — all evaluation happens server-side.
|
||||
|
||||
---
|
||||
|
||||
## Multiplayer
|
||||
|
||||
Rooms are created via REST, then managed over WebSockets. Messages are typed via a Zod discriminated union. The host starts the game; all players answer simultaneously with a 15-second server-enforced timer. Room state is held in-memory (Valkey deferred).
|
||||
|
||||
---
|
||||
|
||||
## Infrastructure
|
||||
|
||||
```
|
||||
Internet → Caddy (HTTPS)
|
||||
├── lilastudy.com → web (nginx, static files)
|
||||
├── api.lilastudy.com → api (Express)
|
||||
└── git.lilastudy.com → Forgejo (git + registry)
|
||||
```
|
||||
|
||||
Deployed on a Hetzner VPS (Debian 13, ARM64). Images are built cross-compiled for ARM64 and pushed to the Forgejo container registry. CI/CD runs via Forgejo Actions on push to `main`. Daily database backups are synced to the dev laptop via rsync.
|
||||
|
||||
See `documentation/deployment.md` for the full infrastructure setup.
|
||||
|
||||
---
|
||||
|
||||
## Local Development
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js 20+
|
||||
- pnpm 9+
|
||||
- Docker + Docker Compose
|
||||
|
||||
### Setup
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Create your local env file (used by docker compose + the API)
|
||||
cp .env.example .env
|
||||
|
||||
# Start local services (PostgreSQL, Valkey)
|
||||
docker compose up -d
|
||||
|
||||
# Build shared packages
|
||||
pnpm --filter @lila/shared build
|
||||
pnpm --filter @lila/db build
|
||||
|
||||
# Run migrations and seed data
|
||||
pnpm --filter @lila/db migrate
|
||||
pnpm --filter @lila/db seed
|
||||
|
||||
# Start dev servers
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
The API runs on `http://localhost:3000` and the frontend on `http://localhost:5173`.
|
||||
|
||||
---
|
||||
|
||||
## Testing
|
||||
|
||||
```bash
|
||||
# All tests
|
||||
pnpm test
|
||||
|
||||
# API only
|
||||
pnpm --filter api test
|
||||
|
||||
# Frontend only
|
||||
pnpm --filter web test
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Roadmap
|
||||
|
||||
| Phase | Description | Status |
|
||||
|---|---|---|
|
||||
| 0 | Foundation — monorepo, tooling, dev environment | ✅ |
|
||||
| 1 | Vocabulary data pipeline + REST API | ✅ |
|
||||
| 2 | Singleplayer quiz UI | ✅ |
|
||||
| 3 | Auth (Google + GitHub) | ✅ |
|
||||
| 4 | Multiplayer lobby (WebSockets) | ✅ |
|
||||
| 5 | Multiplayer game (real-time, server timer) | ✅ |
|
||||
| 6 | Production deployment + CI/CD | ✅ |
|
||||
| 7 | Hardening (rate limiting, error boundaries, monitoring, accessibility) | 🔄 |
|
||||
|
||||
See `documentation/roadmap.md` for task-level detail.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
68
apps/web/src/components/landing/FeatureCards.tsx
Normal file
68
apps/web/src/components/landing/FeatureCards.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
const features = [
|
||||
{
|
||||
emoji: "📱",
|
||||
title: "Mobile-first",
|
||||
description: "Designed for your thumb. Play on the go, anytime.",
|
||||
},
|
||||
{
|
||||
emoji: "🌍",
|
||||
title: "5 languages",
|
||||
description:
|
||||
"English, Italian, German, French, Spanish — with more on the way.",
|
||||
},
|
||||
{
|
||||
emoji: "⚔️",
|
||||
title: "Real-time multiplayer",
|
||||
description: "Create a room, share the code, and race to the best score.",
|
||||
},
|
||||
];
|
||||
|
||||
const FeatureCards = () => {
|
||||
return (
|
||||
<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="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{features.map(({ emoji, title, description }) => (
|
||||
<div
|
||||
key={title}
|
||||
className="group relative overflow-hidden rounded-2xl border border-(--color-primary-light) bg-(--color-bg) 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.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>
|
||||
</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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FeatureCards;
|
||||
139
apps/web/src/components/landing/Hero.tsx
Normal file
139
apps/web/src/components/landing/Hero.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import { Link } from "@tanstack/react-router";
|
||||
import { useSession } from "../../lib/auth-client";
|
||||
|
||||
const Hero = () => {
|
||||
const { data: session } = useSession();
|
||||
|
||||
return (
|
||||
<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-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">
|
||||
together
|
||||
</span>
|
||||
.
|
||||
</h1>
|
||||
|
||||
<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 md:justify-start">
|
||||
{["🇬🇧", "🇮🇹", "🇩🇪", "🇫🇷", "🇪🇸"].map((flag) => (
|
||||
<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-8 flex gap-3 flex-wrap justify-center md:justify-start">
|
||||
{session ? (
|
||||
<>
|
||||
<Link
|
||||
to="/play"
|
||||
className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
|
||||
>
|
||||
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-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
|
||||
>
|
||||
Get started
|
||||
</Link>
|
||||
<Link
|
||||
to="/login"
|
||||
className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
|
||||
>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
77
apps/web/src/components/landing/HowItWorks.tsx
Normal file
77
apps/web/src/components/landing/HowItWorks.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
title: "See a word",
|
||||
description:
|
||||
"A word appears in your target language, ready to challenge you.",
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "Pick the translation",
|
||||
description:
|
||||
"Choose from four options. Only one is correct — trust your gut.",
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "Track your score",
|
||||
description: "See how you did and challenge a friend to beat it.",
|
||||
},
|
||||
];
|
||||
|
||||
const HowItWorks = () => {
|
||||
return (
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default HowItWorks;
|
||||
|
|
@ -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" });
|
||||
}}
|
||||
|
|
|
|||
40
apps/web/src/components/navbar/NavAuth.tsx
Normal file
40
apps/web/src/components/navbar/NavAuth.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { Link, useNavigate } from "@tanstack/react-router";
|
||||
import { useSession, signOut } from "../../lib/auth-client";
|
||||
|
||||
const NavAuth = () => {
|
||||
const { data: session } = useSession();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSignOut = () => {
|
||||
void signOut()
|
||||
.then(() => void navigate({ to: "/" }))
|
||||
.catch((err) => console.error("Sign out error:", err));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ml-auto">
|
||||
{session ? (
|
||||
<button
|
||||
onClick={handleSignOut}
|
||||
className="text-sm text-(--color-text-muted) transition-colors duration-200
|
||||
hover:text-(--color-primary)"
|
||||
>
|
||||
Sign out{" "}
|
||||
<span className="text-(--color-accent)">{session.user.name}</span>
|
||||
</button>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-sm font-medium px-4 py-1.5 rounded-full
|
||||
text-white bg-(--color-primary)
|
||||
hover:bg-(--color-primary-dark)
|
||||
transition-colors duration-200"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavAuth;
|
||||
18
apps/web/src/components/navbar/NavBar.tsx
Normal file
18
apps/web/src/components/navbar/NavBar.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import NavAuth from "./NavAuth";
|
||||
import NavLinks from "./NavLinks";
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full bg-(--color-surface) border-b border-(--color-primary-light)">
|
||||
<div className="max-w-5xl mx-auto px-6 h-14 flex items-center gap-8">
|
||||
<span className="text-sm font-bold tracking-tight text-(--color-primary)">
|
||||
lila
|
||||
</span>
|
||||
<NavLinks />
|
||||
<NavAuth />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
26
apps/web/src/components/navbar/NavLink.tsx
Normal file
26
apps/web/src/components/navbar/NavLink.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { Link } from "@tanstack/react-router";
|
||||
|
||||
type NavLinkProps = { to: string; children: React.ReactNode };
|
||||
|
||||
const NavLink = ({ to, children }: NavLinkProps) => {
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
className="relative text-sm font-medium text-(--color-text-muted) transition-colors duration-200
|
||||
hover:text-(--color-primary)
|
||||
[&.active]:text-(--color-primary)
|
||||
[&.active]:after:absolute
|
||||
[&.active]:after:-bottom-1
|
||||
[&.active]:after:left-0
|
||||
[&.active]:after:w-full
|
||||
[&.active]:after:h-0.5
|
||||
[&.active]:after:bg-(--color-accent)
|
||||
[&.active]:after:rounded-full
|
||||
[&.active]:after:content-['']"
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavLink;
|
||||
21
apps/web/src/components/navbar/NavLinks.tsx
Normal file
21
apps/web/src/components/navbar/NavLinks.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import NavLink from "./NavLink";
|
||||
|
||||
const links = [
|
||||
{ to: "/", label: "Home" },
|
||||
{ to: "/play", label: "Play" },
|
||||
{ to: "/multiplayer", label: "Multiplayer" },
|
||||
];
|
||||
|
||||
const NavLinks = () => {
|
||||
return (
|
||||
<nav className="flex items-center gap-6">
|
||||
{links.map(({ to, label }) => (
|
||||
<NavLink key={to} to={to}>
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavLinks;
|
||||
17
apps/web/src/components/navbar/NavLogin.tsx
Normal file
17
apps/web/src/components/navbar/NavLogin.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { Link } from "@tanstack/react-router";
|
||||
|
||||
const NavLogin = () => {
|
||||
return (
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-sm font-medium px-4 py-1.5 rounded-full
|
||||
text-white bg-(--color-primary)
|
||||
hover:bg-(--color-primary-dark)
|
||||
transition-colors duration-200"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavLogin;
|
||||
26
apps/web/src/components/navbar/NavLogout.tsx
Normal file
26
apps/web/src/components/navbar/NavLogout.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { signOut } from "../../lib/auth-client";
|
||||
|
||||
type NavLogoutProps = { name: string };
|
||||
|
||||
const NavLogout = ({ name }: NavLogoutProps) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogout = () => {
|
||||
void signOut()
|
||||
.then(() => void navigate({ to: "/" }))
|
||||
.catch((err) => console.error("logout error:", err));
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-sm text-(--color-text-muted) transition-colors duration-200
|
||||
hover:text-(--color-primary)"
|
||||
>
|
||||
logout <span className="text-(--color-accent)">{name}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavLogout;
|
||||
103
apps/web/src/components/ui/ConfettiBurst.tsx
Normal file
103
apps/web/src/components/ui/ConfettiBurst.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -1 +1,90 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--color-primary: #7c3aed;
|
||||
--color-primary-light: #a78bfa;
|
||||
--color-primary-dark: #5b21b6;
|
||||
--color-accent: #ec4899;
|
||||
--color-accent-light: #f9a8d4;
|
||||
--color-accent-dark: #be185d;
|
||||
--color-bg: #fafafa;
|
||||
--color-surface: #f5f3ff;
|
||||
--color-text: #1f1f2e;
|
||||
--color-text-muted: #6b7280;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-bg: #0f0e17;
|
||||
--color-surface: #1a1730;
|
||||
--color-text: #fffffe;
|
||||
--color-text-muted: #a7a9be;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +1,14 @@
|
|||
import {
|
||||
createRootRoute,
|
||||
Link,
|
||||
Outlet,
|
||||
useNavigate,
|
||||
} from "@tanstack/react-router";
|
||||
import { createRootRoute, Outlet } from "@tanstack/react-router";
|
||||
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
|
||||
import { useSession, signOut } from "../lib/auth-client";
|
||||
import Navbar from "../components/navbar/NavBar";
|
||||
|
||||
const RootLayout = () => {
|
||||
const { data: session } = useSession();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="p-2 flex gap-2 items-center">
|
||||
<Link to="/" className="[&.active]:font-bold">
|
||||
Home
|
||||
</Link>
|
||||
<Link to="/play" className="[&.active]:font-bold">
|
||||
Play
|
||||
</Link>
|
||||
<Link to="/multiplayer" className="[&.active]:font-bold">
|
||||
Multiplayer
|
||||
</Link>
|
||||
<div className="ml-auto">
|
||||
{session ? (
|
||||
<button
|
||||
className="text-sm text-gray-600 hover:text-gray-900"
|
||||
onClick={() => {
|
||||
void signOut()
|
||||
.then(() => {
|
||||
void navigate({ to: "/" });
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Sign out error:", err);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Sign out ({session.user.name})
|
||||
</button>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-sm text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<Navbar />
|
||||
<main className="max-w-5xl mx-auto px-6 py-8">
|
||||
<Outlet />
|
||||
</main>
|
||||
<TanStackRouterDevtools />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import Hero from "../components/landing/Hero";
|
||||
import HowItWorks from "../components/landing/HowItWorks";
|
||||
import FeatureCards from "../components/landing/FeatureCards";
|
||||
|
||||
export const Route = createFileRoute("/")({ component: Index });
|
||||
|
||||
function Index() {
|
||||
return (
|
||||
<div className="p-2 text-3xl text-amber-400">
|
||||
<h3>Welcome Home!</h3>
|
||||
<div className="flex flex-col">
|
||||
<Hero />
|
||||
<HowItWorks />
|
||||
<FeatureCards />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Each phase produces a working increment. Nothing is built speculatively.
|
|||
- [x] Configure Drizzle ORM + connection to local PostgreSQL
|
||||
- [x] Write first migration (empty — validates the pipeline works)
|
||||
- [x] `docker-compose.yml` for local dev: `api`, `web`, `postgres`, `valkey`
|
||||
- [x] `.env.example` files for `apps/api` and `apps/web`
|
||||
- [x] Root `.env.example` for local dev (`docker-compose.yml` + API)
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
## 1. Project Overview
|
||||
|
||||
A vocabulary trainer for English–Italian words. The quiz format is Duolingo-style: one word is shown as a prompt, and the user picks the correct translation from four choices (1 correct + 3 distractors of the same part-of-speech). The long-term vision is a multiplayer competitive game, but the MVP is a polished singleplayer experience.
|
||||
A vocabulary trainer for English–Italian words. The quiz format is Duolingo-style: one word is shown as a prompt, and the user picks the correct translation from four choices (1 correct + 3 distractors of the same part-of-speech). The app supports both singleplayer and real-time multiplayer game modes.
|
||||
|
||||
**The core learning loop:**
|
||||
Show word → pick answer → see result → next word → final score
|
||||
|
|
@ -29,13 +29,13 @@ The vocabulary data comes from WordNet + the Open Multilingual Wordnet (OMW). A
|
|||
- Multiplayer mode: create a room, share a code, 2–4 players answer simultaneously in real time, live scores, winner screen
|
||||
- 1000+ English–Italian nouns seeded from WordNet
|
||||
|
||||
This is the full vision. The MVP deliberately ignores most of it.
|
||||
This is the full vision. The current implementation already covers most of it; remaining items are captured in the roadmap and the Post-MVP ladder below.
|
||||
|
||||
---
|
||||
|
||||
## 3. MVP Scope
|
||||
|
||||
**Goal:** A working, presentable singleplayer quiz that can be shown to real people.
|
||||
**Goal:** A working, presentable vocabulary trainer that can be shown to real people (singleplayer and multiplayer), with a production deployment.
|
||||
|
||||
### What is IN the MVP
|
||||
|
||||
|
|
@ -45,16 +45,14 @@ This is the full vision. The MVP deliberately ignores most of it.
|
|||
- Clean, mobile-friendly UI (Tailwind + shadcn/ui)
|
||||
- Global error handler with typed error classes
|
||||
- Unit + integration tests for the API
|
||||
- Local dev only (no deployment for MVP)
|
||||
- Authentication via Better Auth (Google + GitHub)
|
||||
- Multiplayer lobby + game over WebSockets
|
||||
- Production deployment (Docker Compose + Caddy + Hetzner) and CI/CD (Forgejo Actions)
|
||||
|
||||
### What is CUT from the MVP
|
||||
|
||||
| Feature | Why cut |
|
||||
| ------------------------------- | -------------------------------------- |
|
||||
| Authentication (Better Auth) | No user accounts needed for a demo |
|
||||
| Multiplayer (WebSockets, rooms) | Core quiz works without it |
|
||||
| Valkey / Redis cache | Only needed for multiplayer room state |
|
||||
| Deployment to Hetzner | Ship to people locally first |
|
||||
| User stats / profiles | Needs auth |
|
||||
|
||||
These are not deleted from the plan — they are deferred. The architecture is already designed to support them. See Section 11 (Post-MVP Ladder).
|
||||
|
|
@ -81,14 +79,14 @@ The monorepo structure and tooling are already set up. This is the full stack.
|
|||
| Deployment | Docker Compose, Caddy, Hetzner | ✅ |
|
||||
| CI/CD | Forgejo Actions | ✅ |
|
||||
| Realtime | WebSockets (`ws` library) | ✅ |
|
||||
| Cache | Valkey | ❌ post-MVP |
|
||||
| Cache | Valkey | ⚠️ optional (used locally; production/state hardening) |
|
||||
|
||||
---
|
||||
|
||||
## 5. Repository Structure
|
||||
|
||||
```text
|
||||
vocab-trainer/
|
||||
lila/
|
||||
├── .forgejo/
|
||||
│ └── workflows/
|
||||
│ └── deploy.yml — CI/CD pipeline (build, push, deploy)
|
||||
|
|
@ -154,7 +152,6 @@ vocab-trainer/
|
|||
├── scripts/ — Python extraction/comparison/merge scripts
|
||||
├── documentation/ — project docs
|
||||
├── docker-compose.yml — local dev stack
|
||||
├── docker-compose.prod.yml — production config reference
|
||||
├── Caddyfile — reverse proxy routing
|
||||
└── pnpm-workspace.yaml
|
||||
```
|
||||
|
|
@ -311,12 +308,20 @@ After completing a task: share the code, ask what to refactor and why. The LLM s
|
|||
|
||||
All are new tables referencing existing `terms` rows via FK. No existing schema changes required.
|
||||
|
||||
### Multiplayer Architecture (deferred)
|
||||
### Multiplayer Architecture (current + deferred)
|
||||
|
||||
- WebSocket protocol: `ws` library, Zod discriminated union for message types
|
||||
- Room model: human-readable codes (e.g. `WOLF-42`), not matchmaking queue
|
||||
- Game mechanic: simultaneous answers, 15-second server timer, all players see same question
|
||||
- Valkey for ephemeral room state, PostgreSQL for durable records
|
||||
**Implemented now:**
|
||||
|
||||
- WebSocket protocol uses the `ws` library with a Zod discriminated union for message types (defined in `packages/shared`)
|
||||
- Room model uses human-readable codes (no matchmaking queue)
|
||||
- Lobby flow (create/join/leave) is real-time over WS, backed by PostgreSQL for durable membership/state
|
||||
- Multiplayer game flow is real-time: host starts, all players see the same question, answers are collected simultaneously, with a server-enforced 15s timer and live scoring
|
||||
- WebSocket connections are authenticated (Better Auth session validation on upgrade)
|
||||
|
||||
**Deferred / hardening:**
|
||||
|
||||
- Valkey-backed ephemeral state (room/game/session store) where in-memory state becomes a bottleneck
|
||||
- Graceful reconnect/resume flows and more robust failure handling (tracked in Phase 7)
|
||||
|
||||
### Infrastructure (current)
|
||||
|
||||
|
|
@ -331,7 +336,7 @@ See `deployment.md` for full infrastructure documentation.
|
|||
|
||||
---
|
||||
|
||||
## 12. Definition of Done (MVP)
|
||||
## 12. Definition of Done (Current Baseline)
|
||||
|
||||
- [x] API returns quiz terms with correct distractors
|
||||
- [x] User can complete a quiz without errors
|
||||
|
|
@ -340,6 +345,9 @@ See `deployment.md` for full infrastructure documentation.
|
|||
- [x] No hardcoded data — everything comes from the database
|
||||
- [x] Global error handler with typed error classes
|
||||
- [x] Unit + integration tests for API
|
||||
- [x] Auth works end-to-end (Google + GitHub via Better Auth)
|
||||
- [x] Multiplayer works end-to-end (lobby + real-time game over WebSockets)
|
||||
- [x] Production deployment is live behind HTTPS (Caddy) with CI/CD deploys via Forgejo Actions
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue