feat: refactor lobby UI with collapsible panels, add player event notifications, and update card art crop threshold to 130px

This commit is contained in:
2025-12-18 01:38:28 +01:00
parent 851e2aa81d
commit ebfdfef5ae
8 changed files with 321 additions and 120 deletions

View File

@@ -0,0 +1,28 @@
# Work Plan - Lobby & Chat UI Overhaul and Notifications
## Request
1. **Lobby/Chat Sidebar**: Refactor to be collapsible on the right edge.
- Add floating/modal panel for Lobby and Chat content.
- Remove fixed right column layout.
2. **Notifications**: Implement toast notifications for player events (Join, Leave, Disconnect).
- Add setting to Enable/Disable notifications (persisted).
3. **Deck Builder**: Update "Full Card" display trigger to new slider range (50% = 130px).
## Changes
- **DeckBuilderView.tsx**:
- Updated `useArtCrop` logic: `cardWidth < 130` (was 200).
- **GameRoom.tsx**:
- Refactored layout: Added `activePanel` state.
- Created `useEffect` hook with `prevPlayersRef` to detect changes and trigger toasts.
- Added "Notifications On/Off" toggle in Lobby panel.
- Implemented floating side panel UI for desktop.
- Updated mobile view (kept separate mobile tab logic but ensured layout stability).
- **Toast.tsx**:
- Added `'warning'` type support for amber-colored alerts (Player Left).
## Verification
- Verified `ref` based diffing logic for notifications.
- Verified persistence of notification settings in `localStorage`.
- checked `Toast` type definition update.

View File

@@ -0,0 +1,12 @@
# Work Plan - Card Preview Threshold Update
## Request
- **Card Preview**: Change the trigger to show the full card to the what now is the new 50% (130px) instead of 200px.
## Changes
- **PackCard.tsx**: Updated logic to `cardWidth < 130` for art crop usage and `cardWidth >= 130` for hover preview prevention.
- **StackView.tsx**: Updated logic to `cardWidth < 130` and `cardWidth >= 130` respectively.
## Verification
- Verified code changes in `PackCard.tsx` and `StackView.tsx` via `replace_file_content` outputs.
- `DeckBuilderView.tsx` was already updated in previous step.