| title | aliases | tags | created | updated | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Component Breakdown |
|
|
2024-12-28 |
2024-12-28 |
This document provides a comprehensive breakdown of the application's component structure, focusing on MVP features and implementation status. For implementation details, see:
- [[state-management|State Management]]
- [[api-integration|API Integration]]
- [[../core-systems/combat-system|Combat System]]
- [[../core-systems/journal-system|Journal System]]
- Main Functionality: Serves as the core of the Next.js application using the App Router
- Key Components:
- app/layout.tsx (Main layout component)
- app/page.tsx (Home page)
- app/character-creation/page.tsx
- app/game-session/page.tsx
- app/character-sheet/page.tsx
- Potential Challenges: Ensuring consistent state management across pages
- GameSession: Root component that orchestrates the game interface
- Two-column layout with main game area and side panel
- Handles initialization and loading states
- Distributes game state to child components
- Manages item acquisition and usage notifications
- MainGameArea: Primary game interaction space
- Displays narrative content
- Manages combat and input interfaces
- Handles state transitions between normal and combat modes
- SidePanel: Secondary information display
- Shows character status
- Displays inventory
- Shows journal entries
- GameplayControls: Manages user interaction methods
- Switches between combat and normal input modes
- Handles loading states during AI responses
- Displays suggested actions
- LoadingScreen: Simple loading state display
- Shown during initialization
- Accessible loading indicator
- AI Integration: Dynamic suggested actions generation
- Context-aware action suggestions
- Character-specific recommendations
- Fallback suggestion system
- Error handling with graceful degradation
- CombatSystem: Core combat interface
- Uses useCombatEngine hook for logic
- Manages turn-based combat flow using Character references
- Handles damage calculation based on Character attributes
- Maintains combat log
- BrawlingEngine: Core combat calculation engine
- Handles pure combat logic
- Manages damage calculations based on Character attributes
- Processes combat rules
- Provides testable interface
- Combat UI Components:
- CombatStatus: Health display for both combatants
- CombatControls: Turn and action management
- CombatLog: Scrollable combat history
- Current Status: Implemented with improved architecture with Character references
- Combat logic extracted to dedicated hook
- UI components focused on presentation
- Strength is derived from Character references, not duplicated in state
- Enhanced maintainability and testability
- CampaignStateManager: Core state provider
- Implements React Context for global state
- Handles localStorage persistence
- Provides custom hooks for state access
- Manages automated saving
- Custom Hooks:
- useGameInitialization
- useGameSession
- useCombatEngine
- useAIInteractions
- useCombatStateRestoration
- AIService: Core AI communication
- Handles Gemini API interactions
- Processes responses and updates state
- Manages error handling and retries
- useAIInteractions Hook: Enhanced state management
- Separated response processing logic
- Improved error handling
- Added last action tracking for retries
- Structured state updates
- Integration Features:
- Context management
- Response parsing
- Narrative generation
- Combat initiation
- Inventory updates
- Character Creation System:
- useCharacterCreation hook for centralized logic
- Separate form and summary components
- Multi-step, AI-guided creation flow
- Automatic progress saving
- Components:
- CharacterCreationForm: Handles step-by-step input
- CharacterSummary: Displays final character review
- Parent page component for orchestration
- Features:
- State management with automatic saving
- Progress restoration
- Validation and error handling
- AI integration for generation
- Comprehensive test coverage
- CharacterSheet Component:
- Displays character information
- Updates in real-time with state changes
- Main Features:
- Displays current inventory items
- Provides Use buttons for items
- Shows descriptions on hover
- Integrates with CampaignStateManager
- State Integration:
- Uses CampaignStateManager
- Handles quantity updates
- Maintains persistence
- Coordinates with narrative for item notifications
- JournalViewer Component:
- Displays chronological entries
- Shows narrative summaries
- Includes combat results
- Maintains formatting
- Implements virtualized scrolling for performance
- Handles different entry types with type safety
- Optimized for large journal lists
- Implementation Status: Complete with tests and performance optimization
- NarrativeDisplay:
- Main Features:
- Shows game text with consistent formatting
- Auto-scrolls for new content
- Handles error states
- Displays item notifications
- Streamlined content processing
- Memory-efficient item updates
- Optimized rendering performance
- Improved metadata cleaning
- Implementation Status: Complete with optimized content processing
- Main Features:
- InputManager:
- Processes player input
- Shows loading states
- Validates input
- StatusDisplayManager:
- Shows character info
- Displays location
- Provides save functionality
- Enhanced loading screen implementation
- Removed unused components
- Optimized component architecture
- Improved state management integration
- [[state-management|State Management Architecture]]
- [[api-integration|API Integration]]
- [[../core-systems/combat-system|Combat System]]
- [[../core-systems/journal-system|Journal System]]
- [[../wireframes/ui-wireframes|UI Wireframes]]
- [[../technical-guides/testing|Testing Guide]]
- [[../features/_current/narrative-formatting|Narrative Display]]