412 lines
13 KiB
Markdown
412 lines
13 KiB
Markdown
# Game.tsx Refactoring - Implementation Guide
|
|
|
|
## Current Status
|
|
|
|
The 3,315-line `Game.tsx` file has been partially refactored into a modular structure.
|
|
|
|
## Completed Work
|
|
|
|
### ✅ Created Structure
|
|
```
|
|
src/components/game/
|
|
├── types.ts # All TypeScript interfaces
|
|
├── hooks/
|
|
│ └── useGameEngine.ts # Core state management hook
|
|
└── MovementControls.tsx # Movement/compass component
|
|
```
|
|
|
|
### ✅ types.ts
|
|
Contains all game-related interfaces:
|
|
- `PlayerState` - Player location, health, stamina, inventory
|
|
- `DirectionDetail` - Movement directions with costs
|
|
- `Location` - Current location data
|
|
- `Profile` - Character stats and attributes
|
|
- `CombatLogEntry` - Combat message format
|
|
- `LocationMessage` - Location event messages
|
|
- `Equipment` - Equipment slots
|
|
- `CombatState` - Combat status (PvE and PvP)
|
|
- `WorkbenchTab` - Crafting menu tabs
|
|
- `MobileMenuState` - Mobile UI state
|
|
|
|
### ✅ useGameEngine.ts
|
|
Core state management hook that exports:
|
|
|
|
**State Object:**
|
|
- All game state (player, location, profile, combat, etc.)
|
|
- UI state (menus, mobile, filters, etc.)
|
|
- Cooldowns and timers
|
|
|
|
**Actions Object:**
|
|
- Data fetching functions
|
|
- Movement handlers
|
|
- Item handlers (pickup, use, equip, drop)
|
|
- Crafting/workbench handlers
|
|
- Combat handlers (PvE and PvP)
|
|
- Interaction handlers
|
|
- UI state setters
|
|
|
|
**Usage Pattern:**
|
|
```tsx
|
|
const [state, actions] = useGameEngine(token, handleWebSocketMessage)
|
|
|
|
// Access state
|
|
state.playerState
|
|
state.location
|
|
state.combatState
|
|
|
|
// Call actions
|
|
actions.handleMove('north')
|
|
actions.handlePickup(itemId)
|
|
actions.fetchGameData()
|
|
```
|
|
|
|
### ✅ MovementControls.tsx
|
|
Extracted movement UI component:
|
|
- Compass grid (8 directions)
|
|
- Special movement buttons (up/down/enter/exit)
|
|
- Stamina cost display
|
|
- Cooldown indicators
|
|
- Direction availability logic
|
|
|
|
## Next Steps to Complete Refactoring
|
|
|
|
### 1. Create Remaining Components
|
|
|
|
**CombatView.tsx** - Extract combat UI (approx. 400-500 lines)
|
|
```tsx
|
|
interface CombatViewProps {
|
|
combatState: CombatState
|
|
combatLog: CombatLogEntry[]
|
|
profile: Profile
|
|
equipment: Equipment
|
|
onCombatAction: (action: string) => void
|
|
onFlee: () => void
|
|
onPvPAction: (action: string, targetId: number) => void
|
|
onPvPAcknowledge: () => void
|
|
}
|
|
```
|
|
|
|
**LocationView.tsx** - Extract location display (approx. 800-1000 lines)
|
|
```tsx
|
|
interface LocationViewProps {
|
|
location: Location
|
|
profile: Profile
|
|
locationMessages: LocationMessage[]
|
|
interactableCooldowns: Record<string, number>
|
|
onPickup: (itemId: number, quantity?: number) => void
|
|
onInteract: (interactableId: string, actionId: string) => void
|
|
onInitiateCombat: (enemyId: number) => void
|
|
onLootCorpse: (corpseId: string) => void
|
|
onViewCorpseDetails: (corpseId: string) => void
|
|
}
|
|
```
|
|
|
|
**PlayerSidebar.tsx** - Extract inventory/equipment UI (approx. 600-800 lines)
|
|
```tsx
|
|
interface PlayerSidebarProps {
|
|
profile: Profile
|
|
playerState: PlayerState
|
|
equipment: Equipment
|
|
collapsedCategories: Set<string>
|
|
onUseItem: (itemId: string) => void
|
|
onEquipItem: (inventoryId: number) => void
|
|
onUnequipItem: (slot: string) => void
|
|
onDropItem: (itemId: string, quantity?: number) => void
|
|
onSpendPoint: (stat: string) => void
|
|
toggleCategory: (category: string) => void
|
|
}
|
|
```
|
|
|
|
**Workbench.tsx** - Extract crafting/repair UI (approx. 400-500 lines)
|
|
```tsx
|
|
interface WorkbenchProps {
|
|
showCraftingMenu: boolean
|
|
showRepairMenu: boolean
|
|
workbenchTab: WorkbenchTab
|
|
craftableItems: any[]
|
|
repairableItems: any[]
|
|
uncraftableItems: any[]
|
|
craftFilter: string
|
|
repairFilter: string
|
|
uncraftFilter: string
|
|
onClose: () => void
|
|
onCraft: (itemId: string) => void
|
|
onRepair: (uniqueItemId: number, inventoryId?: number) => void
|
|
onUncraft: (uniqueItemId: number, inventoryId: number) => void
|
|
onSwitchTab: (tab: WorkbenchTab) => void
|
|
setCraftFilter: (filter: string) => void
|
|
setRepairFilter: (filter: string) => void
|
|
setUncraftFilter: (filter: string) => void
|
|
}
|
|
```
|
|
|
|
### 2. Update Game.tsx
|
|
|
|
Refactored Game.tsx should become a simple orchestrator:
|
|
|
|
```tsx
|
|
import { useGameWebSocket } from '../hooks/useGameWebSocket'
|
|
import { useGameEngine } from './game/hooks/useGameEngine'
|
|
import GameHeader from './GameHeader'
|
|
import MovementControls from './game/MovementControls'
|
|
import CombatView from './game/CombatView'
|
|
import LocationView from './game/LocationView'
|
|
import PlayerSidebar from './game/PlayerSidebar'
|
|
import Workbench from './game/Workbench'
|
|
import './Game.css'
|
|
|
|
function Game() {
|
|
const token = localStorage.getItem('token')
|
|
|
|
// WebSocket handler
|
|
const handleWebSocketMessage = async (message: any) => {
|
|
// WebSocket message handling logic
|
|
}
|
|
|
|
// Use WebSocket hook
|
|
useGameWebSocket(token, handleWebSocketMessage)
|
|
|
|
// Use game engine hook
|
|
const [state, actions] = useGameEngine(token, handleWebSocketMessage)
|
|
|
|
// Loading/error states
|
|
if (state.loading) {
|
|
return <div className="loading">Loading game...</div>
|
|
}
|
|
|
|
if (!state.playerState || !state.location) {
|
|
return <div className="error">Failed to load game state</div>
|
|
}
|
|
|
|
return (
|
|
<div className="game-container">
|
|
{/* Death Overlay */}
|
|
{state.profile?.is_dead && (
|
|
<div className="death-overlay">
|
|
<div className="death-modal">
|
|
<h1>💀 You Have Died</h1>
|
|
<p>Your character has been defeated in combat.</p>
|
|
<button onClick={() => window.location.href = '/characters'}>
|
|
Return to Character Selection
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<GameHeader className={state.mobileHeaderOpen ? 'open' : ''} />
|
|
|
|
<main className="game-main">
|
|
<div className="explore-tab-desktop">
|
|
{/* Left Sidebar */}
|
|
<div className={`left-sidebar mobile-menu-panel ${state.mobileMenuOpen === 'left' ? 'open' : ''}`}>
|
|
<MovementControls
|
|
location={state.location}
|
|
profile={state.profile}
|
|
combatState={state.combatState}
|
|
movementCooldown={state.movementCooldown}
|
|
onMove={actions.handleMove}
|
|
/>
|
|
|
|
<LocationView
|
|
location={state.location}
|
|
profile={state.profile}
|
|
locationMessages={state.locationMessages}
|
|
interactableCooldowns={state.interactableCooldowns}
|
|
onPickup={actions.handlePickup}
|
|
onInteract={actions.handleInteract}
|
|
onInitiateCombat={actions.handleInitiateCombat}
|
|
onLootCorpse={actions.handleLootCorpse}
|
|
onViewCorpseDetails={actions.handleViewCorpseDetails}
|
|
/>
|
|
</div>
|
|
|
|
{/* Center - Combat or Location */}
|
|
<div className="center-panel mobile-menu-panel">
|
|
{state.combatState ? (
|
|
<CombatView
|
|
combatState={state.combatState}
|
|
combatLog={state.combatLog}
|
|
profile={state.profile}
|
|
equipment={state.equipment}
|
|
onCombatAction={actions.handleCombatAction}
|
|
onFlee={actions.handleFlee}
|
|
onPvPAction={actions.handlePvPAction}
|
|
onPvPAcknowledge={actions.handlePvPAcknowledge}
|
|
/>
|
|
) : (
|
|
<div className="location-display">
|
|
{/* Location image and description */}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right Sidebar */}
|
|
<div className={`right-sidebar mobile-menu-panel ${state.mobileMenuOpen === 'right' ? 'open' : ''}`}>
|
|
<PlayerSidebar
|
|
profile={state.profile}
|
|
playerState={state.playerState}
|
|
equipment={state.equipment}
|
|
collapsedCategories={state.collapsedCategories}
|
|
onUseItem={actions.handleUseItem}
|
|
onEquipItem={actions.handleEquipItem}
|
|
onUnequipItem={actions.handleUnequipItem}
|
|
onDropItem={actions.handleDropItem}
|
|
onSpendPoint={actions.handleSpendPoint}
|
|
toggleCategory={actions.toggleCategoryCollapse}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
<div className="mobile-menu-buttons">
|
|
<button onClick={() => actions.setMobileMenuOpen(state.mobileMenuOpen === 'left' ? 'none' : 'left')}>
|
|
<span>🧭</span>
|
|
</button>
|
|
<button onClick={() => actions.setMobileMenuOpen(state.mobileMenuOpen === 'bottom' ? 'none' : 'bottom')} disabled={!!state.combatState}>
|
|
<span>📍</span>
|
|
</button>
|
|
<button onClick={() => actions.setMobileMenuOpen(state.mobileMenuOpen === 'right' ? 'none' : 'right')}>
|
|
<span>🎒</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Workbench Modal */}
|
|
{(state.showCraftingMenu || state.showRepairMenu) && (
|
|
<Workbench
|
|
showCraftingMenu={state.showCraftingMenu}
|
|
showRepairMenu={state.showRepairMenu}
|
|
workbenchTab={state.workbenchTab}
|
|
craftableItems={state.craftableItems}
|
|
repairableItems={state.repairableItems}
|
|
uncraftableItems={state.uncraftableItems}
|
|
craftFilter={state.craftFilter}
|
|
repairFilter={state.repairFilter}
|
|
uncraftFilter={state.uncraftFilter}
|
|
onClose={actions.handleCloseCrafting}
|
|
onCraft={actions.handleCraft}
|
|
onRepair={actions.handleRepairFromMenu}
|
|
onUncraft={actions.handleUncraft}
|
|
onSwitchTab={actions.handleSwitchWorkbenchTab}
|
|
setCraftFilter={actions.setCraftFilter}
|
|
setRepairFilter={actions.setRepairFilter}
|
|
setUncraftFilter={actions.setUncraftFilter}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Game
|
|
```
|
|
|
|
### 3. Implementation Strategy
|
|
|
|
**Phase 1: Extract Combat (Highest Priority)**
|
|
- Combat is self-contained and frequently used
|
|
- ~400-500 lines reduction
|
|
- Create `CombatView.tsx` with all combat UI logic
|
|
|
|
**Phase 2: Extract Location View**
|
|
- Second largest section (~800-1000 lines)
|
|
- Create `LocationView.tsx` with NPCs, items, interactables, corpses, other players
|
|
|
|
**Phase 3: Extract Player Sidebar**
|
|
- Inventory, equipment, stats display
|
|
- ~600-800 lines
|
|
- Create `PlayerSidebar.tsx`
|
|
|
|
**Phase 4: Extract Workbench**
|
|
- Crafting, repair, salvage UI
|
|
- ~400-500 lines
|
|
- Create `Workbench.tsx`
|
|
|
|
**Phase 5: Final Integration**
|
|
- Update Game.tsx to use all components
|
|
- Test thoroughly
|
|
- Fix any integration issues
|
|
|
|
### 4. Benefits After Completion
|
|
|
|
**Before:**
|
|
- 1 file: 3,315 lines
|
|
- Hard to navigate
|
|
- Difficult to test individual features
|
|
- Merge conflicts likely
|
|
|
|
**After:**
|
|
- Main file: ~200-300 lines (orchestration)
|
|
- useGameEngine: ~600-800 lines (logic)
|
|
- 5 component files: ~400-1000 lines each
|
|
- Clear separation of concerns
|
|
- Easy to test components individually
|
|
- Parallel development possible
|
|
|
|
### 5. Testing Checklist
|
|
|
|
After refactoring, verify:
|
|
- ✅ Movement works (compass, special directions)
|
|
- ✅ Combat starts and ends correctly
|
|
- ✅ Inventory management (use, equip, drop)
|
|
- ✅ Crafting/repair/salvage
|
|
- ✅ Interactables and cooldowns
|
|
- ✅ Corpse looting
|
|
- ✅ PvP combat
|
|
- ✅ WebSocket updates
|
|
- ✅ Mobile responsive menus
|
|
- ✅ Death overlay
|
|
- ✅ Stat point spending
|
|
|
|
## Implementation Notes
|
|
|
|
**useGameEngine Hook Pattern:**
|
|
- Separates state management from UI
|
|
- Provides clean API for actions
|
|
- Can be tested independently
|
|
- Reduces prop drilling
|
|
|
|
**Component Props Pattern:**
|
|
- Each component receives only what it needs
|
|
- Clear interfaces defined
|
|
- Easy to understand dependencies
|
|
- Facilitates unit testing
|
|
|
|
**File Organization:**
|
|
- `types.ts` - Single source of truth for interfaces
|
|
- `hooks/` - Reusable logic hooks
|
|
- Component files - UI-only, minimal logic
|
|
- `Game.tsx` - Orchestration and layout only
|
|
|
|
## Current File Sizes
|
|
|
|
```
|
|
Original:
|
|
└── Game.tsx (3,315 lines)
|
|
|
|
Refactored:
|
|
├── types.ts (89 lines)
|
|
├── hooks/useGameEngine.ts (~600 lines, with placeholders)
|
|
├── MovementControls.tsx (168 lines)
|
|
└── Game.tsx (pending refactor)
|
|
|
|
To Create:
|
|
├── CombatView.tsx (~400-500 lines)
|
|
├── LocationView.tsx (~800-1000 lines)
|
|
├── PlayerSidebar.tsx (~600-800 lines)
|
|
└── Workbench.tsx (~400-500 lines)
|
|
```
|
|
|
|
## Next Immediate Steps
|
|
|
|
1. Complete all handler implementations in `useGameEngine.ts` (currently placeholders)
|
|
2. Extract combat UI to `CombatView.tsx`
|
|
3. Extract location UI to `LocationView.tsx`
|
|
4. Extract inventory UI to `PlayerSidebar.tsx`
|
|
5. Extract crafting UI to `Workbench.tsx`
|
|
6. Refactor main `Game.tsx` to use all components
|
|
7. Test thoroughly
|
|
|
|
---
|
|
|
|
**Note:** The refactoring foundation is complete. The remaining work is to extract the JSX sections from the original Game.tsx into the respective component files, following the interfaces defined above.
|