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

feat(web): rework multiplayer UI to be presentable #11

New issue
Open
opened 2026-04-19 07:12:05 +00:00 by forgejo-lila · 0 comments
forgejo-lila commented 2026-04-19 07:12:05 +00:00
Owner
Copy link

Background

The current multiplayer UI was built for functionality, not polish. It uses
minimal Tailwind classes, basic layouts, and no visual hierarchy. Before
the multiplayer slice can be considered production-ready, the UI needs a
full visual pass.

Scope

Multiplayer landing page (/multiplayer)

  • Better visual separation between "Create" and "Join" sections.
  • Lobby code input — larger, more prominent, better keyboard UX.
  • Loading states with spinners, not just text changes.

Lobby waiting room (/multiplayer/lobby/$code)

  • Lobby code display — more prominent, better copy-to-clipboard feedback
    (e.g. "Copied!" toast on click).
  • Player list — avatars (initials or placeholder), better spacing,
    animated entry when a player joins.
  • "Waiting for players..." state — more engaging, maybe a pulsing indicator.
  • "Start Game" button — more prominent for the host.
  • Mobile layout — player list and code should stack cleanly on small screens.

Game view (/multiplayer/game/$code)

  • Question card — reuse and adapt single-player QuestionCard styling.
  • Round results panel — cleaner layout, clearer correct/wrong indicators.
  • Score display — persistent score bar showing all players' scores.
  • Transition between rounds — smooth, not abrupt.

Score screen (MultiplayerScoreScreen)

  • Winner announcement — more celebratory (confetti? animation?).
  • Score list — podium-style (1st/2nd/3rd) rather than flat list.
  • "Play Again" / "Leave" buttons — clearer visual hierarchy.

Design constraints

  • Stay within Tailwind's core utility classes (no custom CSS unless necessary).
  • Match the existing single-player aesthetic (purple gradient, white cards,
    rounded corners).
  • Mobile-first — all screens must work on small viewports.
  • No external UI component libraries unless already in the project.

Acceptance criteria

  • All multiplayer screens pass a basic visual review.
  • Lobby code has copy feedback.
  • Player list animates on join.
  • Round results are clearly readable.
  • Score screen feels celebratory.
  • All screens work on mobile (tested at 375px width).

Related

  • apps/web/src/routes/multiplayer/index.tsx
  • apps/web/src/routes/multiplayer/lobby.$code.tsx
  • apps/web/src/routes/multiplayer/game.$code.tsx
  • apps/web/src/components/multiplayer/MultiplayerScoreScreen.tsx
## Background The current multiplayer UI was built for functionality, not polish. It uses minimal Tailwind classes, basic layouts, and no visual hierarchy. Before the multiplayer slice can be considered production-ready, the UI needs a full visual pass. ## Scope ### Multiplayer landing page (`/multiplayer`) - Better visual separation between "Create" and "Join" sections. - Lobby code input — larger, more prominent, better keyboard UX. - Loading states with spinners, not just text changes. ### Lobby waiting room (`/multiplayer/lobby/$code`) - Lobby code display — more prominent, better copy-to-clipboard feedback (e.g. "Copied!" toast on click). - Player list — avatars (initials or placeholder), better spacing, animated entry when a player joins. - "Waiting for players..." state — more engaging, maybe a pulsing indicator. - "Start Game" button — more prominent for the host. - Mobile layout — player list and code should stack cleanly on small screens. ### Game view (`/multiplayer/game/$code`) - Question card — reuse and adapt single-player `QuestionCard` styling. - Round results panel — cleaner layout, clearer correct/wrong indicators. - Score display — persistent score bar showing all players' scores. - Transition between rounds — smooth, not abrupt. ### Score screen (`MultiplayerScoreScreen`) - Winner announcement — more celebratory (confetti? animation?). - Score list — podium-style (1st/2nd/3rd) rather than flat list. - "Play Again" / "Leave" buttons — clearer visual hierarchy. ## Design constraints - Stay within Tailwind's core utility classes (no custom CSS unless necessary). - Match the existing single-player aesthetic (purple gradient, white cards, rounded corners). - Mobile-first — all screens must work on small viewports. - No external UI component libraries unless already in the project. ## Acceptance criteria - [ ] All multiplayer screens pass a basic visual review. - [ ] Lobby code has copy feedback. - [ ] Player list animates on join. - [ ] Round results are clearly readable. - [ ] Score screen feels celebratory. - [ ] All screens work on mobile (tested at 375px width). ## Related - `apps/web/src/routes/multiplayer/index.tsx` - `apps/web/src/routes/multiplayer/lobby.$code.tsx` - `apps/web/src/routes/multiplayer/game.$code.tsx` - `apps/web/src/components/multiplayer/MultiplayerScoreScreen.tsx`
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
feat/adding-spanish
feat/data-feeding
feat/landing-page
feat/navbar
dev
feat/multiplayer-mode
No results found.
Labels
Clear labels   
debt

Technical cleanup, refactoring

  
feature

   
feature

New user-facing functionality

  
infra

Infrastructure, deployment, DevOps

  
multiplayer

   
multiplayer

Multiplayer lobby and game features

  
security

Security improvements

  
ux

User experience, accessibility, polish

No labels
debt
feature
feature
infra
multiplayer
multiplayer
security
ux
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: forgejo-lila/lila#11
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?