diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md index 05e0fd6..d1972a0 100644 --- a/docs/development/CENTRAL.md +++ b/docs/development/CENTRAL.md @@ -71,3 +71,5 @@ - [Enhanced Toast Visibility](./devlog/2025-12-17-023000_enhanced_toast_visibility.md): Completed. Updated toasts to be top-center, animated, and highly visible with premium styling. - [Unified Toast Design](./devlog/2025-12-17-023500_unified_toast_design.md): Completed. Refined toast aesthetics to match the global dark/slate theme with subtle colored accents. - [Animated Copy Button](./devlog/2025-12-17-024000_animated_copy_button.md): Completed. Replaced copy toast with an in-place animated tick button for immediate feedback. +- [Play Online Logic](./devlog/2025-12-17-031500_play_online_logic.md): Completed. Implemented strict pack limits (min 12 for 4 players) and visual feedback for the online lobby button. +- [Lobby Rules Tooltip](./devlog/2025-12-17-032000_lobby_rules_tooltip.md): Completed. Added dynamic rules explanation and supported player indicators to the lobby creation screen. diff --git a/docs/development/devlog/2025-12-17-031500_play_online_logic.md b/docs/development/devlog/2025-12-17-031500_play_online_logic.md new file mode 100644 index 0000000..c333a32 --- /dev/null +++ b/docs/development/devlog/2025-12-17-031500_play_online_logic.md @@ -0,0 +1,19 @@ + +### Play Online Logic Implementation + +**Status**: Completed +**Date**: 2025-12-17 + +**Description** +Implemented pack count validation logic for "Play Online" to strictly enforce draft player limits. + +**Changes** +1. **Rule Enforcement**: + - **< 12 packs**: Button visual disabled (slate color), shows error toast explaining rules if clicked. + - **12-17 packs**: Allows entry, shows toast "Enough for 4 players only" (Info). + - **18-23 packs**: Allows entry, shows toast "Enough for 4 or 6 players" (Info). + - **24+ packs**: Allows entry, shows toast "Enough for 8 players!" (Success). +2. **UI Feedback**: Updated button class logic to visually reflect availability based on pack count. + +**Effect** +Prevents users from starting unplayable drafts and informs them of the capacity their current pool supports. diff --git a/docs/development/devlog/2025-12-17-032000_lobby_rules_tooltip.md b/docs/development/devlog/2025-12-17-032000_lobby_rules_tooltip.md new file mode 100644 index 0000000..1f855ea --- /dev/null +++ b/docs/development/devlog/2025-12-17-032000_lobby_rules_tooltip.md @@ -0,0 +1,16 @@ + +### Lobby Rules Tooltip + +**Status**: Completed +**Date**: 2025-12-17 + +**Description** +Added a dynamic tooltip and status indicator to the Online Lobby to explain draft capacity rules based on pack count. + +**Changes** +1. **Info Icon**: Added an `AlertCircle` icon with a hoverable tooltip explaining the pack requirements (3 packs/player). +2. **Dynamic Rules**: The list of rules highlights the currently applicable tier based on pack count (e.g., turning green for "12-17 Packs" if 15 packs are available). +3. **Status Line**: A summary line explicitly states "Supported Players: [Status]" under the pack count. + +**Effect** +Users can now clearly see why they might need more packs before creating a room, and what player counts are supported with their current pool. diff --git a/src/client/src/modules/cube/CubeManager.tsx b/src/client/src/modules/cube/CubeManager.tsx index dd43d79..97328d4 100644 --- a/src/client/src/modules/cube/CubeManager.tsx +++ b/src/client/src/modules/cube/CubeManager.tsx @@ -10,8 +10,10 @@ interface CubeManagerProps { onGoToLobby: () => void; } +import { useToast } from '../../components/Toast'; + export const CubeManager: React.FC = ({ packs, setPacks, onGoToLobby }) => { - // --- Services --- + const { showToast } = useToast(); // --- Services --- // Memoize services to persist cache across renders const generatorService = React.useMemo(() => new PackGeneratorService(), []); @@ -136,6 +138,32 @@ export const CubeManager: React.FC = ({ packs, setPacks, onGoT }, []); // --- Handlers --- + const handlePlayOnline = () => { + const totalPacks = packs.length; + + // Rules: + // < 12: No draft + // 12 <= p < 18: 4 players + // 18 <= p < 24: 4 or 6 players + // >= 24: 4, 6 or 8 players + + if (totalPacks < 12) { + showToast('Need at least 12 packs for a 4-player draft (3 packs/player).', 'error'); + return; + } + + if (totalPacks >= 12 && totalPacks < 18) { + showToast('Enough packs for 4 players only.', 'info'); + } else if (totalPacks >= 18 && totalPacks < 24) { + showToast('Enough packs for 4 or 6 players.', 'info'); + } else { + showToast('Enough packs for 8 players!', 'success'); + } + + // Proceed to lobby + onGoToLobby(); + }; + const handleFileUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (!file) return; @@ -649,8 +677,12 @@ export const CubeManager: React.FC = ({ packs, setPacks, onGoT {packs.length > 0 && ( <> diff --git a/src/client/src/modules/lobby/LobbyManager.tsx b/src/client/src/modules/lobby/LobbyManager.tsx index 34beafb..26464eb 100644 --- a/src/client/src/modules/lobby/LobbyManager.tsx +++ b/src/client/src/modules/lobby/LobbyManager.tsx @@ -234,8 +234,41 @@ export const LobbyManager: React.FC = ({ generatedPacks }) =>
{/* Create Room */}
-

Create Room

-

Start a new draft with your {generatedPacks.length} generated packs.

+
+

Create Room

+
+ +
+ Draft Rules (3 packs/player) +
    +
  • + • < 12 Packs: Not enough for draft +
    • +
  • = 12 && generatedPacks.length < 18) ? 'text-emerald-400 font-bold' : 'text-slate-500'}> + • 12-17 Packs: 4 Players +
    • +
  • = 18 && generatedPacks.length < 24) ? 'text-emerald-400 font-bold' : 'text-slate-500'}> + • 18-23 Packs: 4 or 6 Players +
    • +
  • = 24 ? 'text-emerald-400 font-bold' : 'text-slate-500'}> + • 24+ Packs: 4, 6 or 8 Players +
    • +
+
+
+
+ +
+ Start a new draft with your {generatedPacks.length} generated packs. +
+ Supported Players: {' '} + {generatedPacks.length < 12 && None (Generate more packs)} + {generatedPacks.length >= 12 && generatedPacks.length < 18 && 4 Only} + {generatedPacks.length >= 18 && generatedPacks.length < 24 && 4 or 6} + {generatedPacks.length >= 24 && 4, 6 or 8} +
+
+