Commit
This commit is contained in:
Joan
327
pwa/src/components/game/PlayerSidebar.tsx
Normal file
327
pwa/src/components/game/PlayerSidebar.tsx
Normal file
@@ -0,0 +1,327 @@
|
||||
import { useState } from 'react'
|
||||
import type { PlayerState, Profile, Equipment } from './types'
|
||||
import InventoryModal from './InventoryModal'
|
||||
|
||||
interface PlayerSidebarProps {
|
||||
playerState: PlayerState
|
||||
profile: Profile | null
|
||||
equipment: Equipment
|
||||
inventoryFilter: string
|
||||
inventoryCategoryFilter: string
|
||||
mobileMenuOpen: string
|
||||
onSetInventoryFilter: (filter: string) => void
|
||||
onSetInventoryCategoryFilter: (category: string) => void
|
||||
onUseItem: (itemId: number, invId: number) => void
|
||||
onEquipItem: (invId: number) => void
|
||||
onUnequipItem: (slot: string) => void
|
||||
onDropItem: (itemId: number, invId: number, quantity: number) => void
|
||||
onSpendPoint: (stat: string) => void
|
||||
}
|
||||
|
||||
function PlayerSidebar({
|
||||
playerState,
|
||||
profile,
|
||||
equipment,
|
||||
inventoryFilter,
|
||||
inventoryCategoryFilter,
|
||||
mobileMenuOpen,
|
||||
onSetInventoryFilter,
|
||||
onSetInventoryCategoryFilter,
|
||||
onUseItem,
|
||||
onEquipItem,
|
||||
onUnequipItem,
|
||||
onDropItem,
|
||||
onSpendPoint
|
||||
}: PlayerSidebarProps) {
|
||||
const [showInventory, setShowInventory] = useState(false)
|
||||
|
||||
|
||||
|
||||
const renderEquipmentSlot = (slot: string, item: any, emoji: string, label: string) => (
|
||||
<div className={`equipment-slot ${item ? 'filled' : 'empty'}`}>
|
||||
{item ? (
|
||||
<>
|
||||
<button className="equipment-unequip-btn" onClick={() => onUnequipItem(slot)} title="Unequip">✕</button>
|
||||
<div className="equipment-item-content">
|
||||
{item.image_path ? (
|
||||
<img
|
||||
src={item.image_path}
|
||||
alt={item.name}
|
||||
className="equipment-emoji"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).style.display = 'none';
|
||||
const icon = (e.target as HTMLImageElement).nextElementSibling;
|
||||
if (icon) icon.classList.remove('hidden');
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<span className={`equipment-emoji ${item.image_path ? 'hidden' : ''}`}>{item.emoji}</span>
|
||||
<span className={`equipment-name ${item.tier ? `tier-${item.tier}` : ''}`}>{item.name}</span>
|
||||
{item.durability && item.durability !== null && (
|
||||
<span className="equipment-durability">{item.durability}/{item.max_durability}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="equipment-tooltip">
|
||||
{item.description && <div className="item-tooltip-desc">{item.description}</div>}
|
||||
{/* Use unique_stats if available, otherwise fall back to base stats */}
|
||||
{(item.unique_stats || item.stats) && Object.keys(item.unique_stats || item.stats).length > 0 && (
|
||||
<>
|
||||
{(item.unique_stats?.armor || item.stats?.armor) && (
|
||||
<div className="item-tooltip-stat">
|
||||
🛡️ Armor: +{item.unique_stats?.armor || item.stats?.armor}
|
||||
</div>
|
||||
)}
|
||||
{(item.unique_stats?.hp_max || item.stats?.hp_max) && (
|
||||
<div className="item-tooltip-stat">
|
||||
❤️ Max HP: +{item.unique_stats?.hp_max || item.stats?.hp_max}
|
||||
</div>
|
||||
)}
|
||||
{(item.unique_stats?.stamina_max || item.stats?.stamina_max) && (
|
||||
<div className="item-tooltip-stat">
|
||||
⚡ Max Stamina: +{item.unique_stats?.stamina_max || item.stats?.stamina_max}
|
||||
</div>
|
||||
)}
|
||||
{(item.unique_stats?.damage_min !== undefined || item.stats?.damage_min !== undefined) &&
|
||||
(item.unique_stats?.damage_max !== undefined || item.stats?.damage_max !== undefined) && (
|
||||
<div className="item-tooltip-stat">
|
||||
⚔️ Damage: {item.unique_stats?.damage_min || item.stats?.damage_min}-{item.unique_stats?.damage_max || item.stats?.damage_max}
|
||||
</div>
|
||||
)}
|
||||
{(item.unique_stats?.weight_capacity || item.stats?.weight_capacity) && (
|
||||
<div className="item-tooltip-stat">
|
||||
⚖️ Weight: +{item.unique_stats?.weight_capacity || item.stats?.weight_capacity}kg
|
||||
</div>
|
||||
)}
|
||||
{(item.unique_stats?.volume_capacity || item.stats?.volume_capacity) && (
|
||||
<div className="item-tooltip-stat">
|
||||
📦 Volume: +{item.unique_stats?.volume_capacity || item.stats?.volume_capacity}L
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{item.durability !== undefined && item.durability !== null && (
|
||||
<div className="item-tooltip-stat">
|
||||
🔧 Durability: {item.durability}/{item.max_durability}
|
||||
</div>
|
||||
)}
|
||||
{item.tier !== undefined && item.tier !== null && item.tier > 0 && (
|
||||
<div className="item-tooltip-stat">
|
||||
⭐ Tier: {item.tier}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="equipment-emoji">{emoji}</span>
|
||||
<span className="equipment-slot-label">{label}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={`right-sidebar mobile-menu-panel ${mobileMenuOpen === 'right' ? 'open' : ''}`}>
|
||||
{/* Profile Stats */}
|
||||
<div className="profile-sidebar">
|
||||
<h3>👤 Character</h3>
|
||||
|
||||
<div className="sidebar-stat-bars">
|
||||
<div className="sidebar-stat-bar">
|
||||
<div className="sidebar-stat-header">
|
||||
<span className="sidebar-stat-label">❤️ HP</span>
|
||||
<span className="sidebar-stat-numbers">{playerState.health}/{playerState.max_health}</span>
|
||||
</div>
|
||||
<div className="sidebar-progress-bar">
|
||||
<div
|
||||
className="sidebar-progress-fill health"
|
||||
style={{ width: `${(playerState.health / playerState.max_health) * 100}%` }}
|
||||
></div>
|
||||
<span className="progress-percentage">{Math.round((playerState.health / playerState.max_health) * 100)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-stat-bar">
|
||||
<div className="sidebar-stat-header">
|
||||
<span className="sidebar-stat-label">⚡ Stamina</span>
|
||||
<span className="sidebar-stat-numbers">{playerState.stamina}/{playerState.max_stamina}</span>
|
||||
</div>
|
||||
<div className="sidebar-progress-bar">
|
||||
<div
|
||||
className="sidebar-progress-fill stamina"
|
||||
style={{ width: `${(playerState.stamina / playerState.max_stamina) * 100}%` }}
|
||||
></div>
|
||||
<span className="progress-percentage">{Math.round((playerState.stamina / playerState.max_stamina) * 100)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{profile && (
|
||||
<div className="sidebar-stats">
|
||||
<div className="sidebar-stat-row">
|
||||
<span className="sidebar-label">Level:</span>
|
||||
<span className="sidebar-value">{profile.level}</span>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-stat-bar">
|
||||
<div className="sidebar-stat-header">
|
||||
<span className="sidebar-stat-label">⭐ XP</span>
|
||||
<span className="sidebar-stat-numbers">{profile.xp} / {(profile.level * 100)}</span>
|
||||
</div>
|
||||
<div className="sidebar-progress-bar">
|
||||
<div
|
||||
className="sidebar-progress-fill xp"
|
||||
style={{ width: `${(profile.xp / (profile.level * 100)) * 100}%` }}
|
||||
></div>
|
||||
<span className="progress-percentage">{Math.round((profile.xp / (profile.level * 100)) * 100)}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{profile.unspent_points > 0 && (
|
||||
<div className="sidebar-stat-row highlight">
|
||||
<span className="sidebar-label">⭐ Unspent:</span>
|
||||
<span className="sidebar-value">{profile.unspent_points}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="sidebar-divider"></div>
|
||||
|
||||
{/* Compact 2x2 Stats Grid */}
|
||||
<div className="stats-grid">
|
||||
<div className="sidebar-stat-row compact">
|
||||
<span className="sidebar-label">💪 STR:</span>
|
||||
<span className="sidebar-value">{profile.strength}</span>
|
||||
{profile.unspent_points > 0 && (
|
||||
<button className="stat-plus-btn" onClick={() => onSpendPoint('strength')}>+</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="sidebar-stat-row compact">
|
||||
<span className="sidebar-label">🏃 AGI:</span>
|
||||
<span className="sidebar-value">{profile.agility}</span>
|
||||
{profile.unspent_points > 0 && (
|
||||
<button className="stat-plus-btn" onClick={() => onSpendPoint('agility')}>+</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="sidebar-stat-row compact">
|
||||
<span className="sidebar-label">🛡️ END:</span>
|
||||
<span className="sidebar-value">{profile.endurance}</span>
|
||||
{profile.unspent_points > 0 && (
|
||||
<button className="stat-plus-btn" onClick={() => onSpendPoint('endurance')}>+</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="sidebar-stat-row compact">
|
||||
<span className="sidebar-label">🧠 INT:</span>
|
||||
<span className="sidebar-value">{profile.intellect}</span>
|
||||
{profile.unspent_points > 0 && (
|
||||
<button className="stat-plus-btn" onClick={() => onSpendPoint('intellect')}>+</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-divider"></div>
|
||||
|
||||
{/* Inventory Capacity - matching HP/Stamina/XP style */}
|
||||
<div className="sidebar-stat-bar">
|
||||
<div className="sidebar-stat-header">
|
||||
<span className="sidebar-stat-label">⚖️ Weight</span>
|
||||
<span className="sidebar-stat-numbers">{(profile.current_weight || 0).toFixed(1)}/{profile.max_weight || 0}kg</span>
|
||||
</div>
|
||||
<div className="sidebar-progress-bar">
|
||||
<div
|
||||
className="sidebar-progress-fill weight"
|
||||
style={{ width: `${Math.min(100, ((profile.current_weight || 0) / (profile.max_weight || 1)) * 100)}%` }}
|
||||
></div>
|
||||
<span className="progress-percentage">{Math.round(Math.min(100, ((profile.current_weight || 0) / (profile.max_weight || 1)) * 100))}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-stat-bar">
|
||||
<div className="sidebar-stat-header">
|
||||
<span className="sidebar-stat-label">📦 Volume</span>
|
||||
<span className="sidebar-stat-numbers">{(profile.current_volume || 0).toFixed(1)}/{profile.max_volume || 0}L</span>
|
||||
</div>
|
||||
<div className="sidebar-progress-bar">
|
||||
<div
|
||||
className="sidebar-progress-fill volume"
|
||||
style={{ width: `${Math.min(100, ((profile.current_volume || 0) / (profile.max_volume || 1)) * 100)}%` }}
|
||||
></div>
|
||||
<span className="progress-percentage">{Math.round(Math.min(100, ((profile.current_volume || 0) / (profile.max_volume || 1)) * 100))}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="open-inventory-btn"
|
||||
onClick={() => setShowInventory(true)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '1rem',
|
||||
marginTop: '1rem',
|
||||
backgroundColor: '#2c3e50',
|
||||
border: '1px solid #34495e',
|
||||
borderRadius: '8px',
|
||||
color: '#ecf0f1',
|
||||
fontSize: '1.1rem',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.5rem',
|
||||
transition: 'all 0.2s'
|
||||
}}
|
||||
>
|
||||
🎒 Open Inventory
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Equipment Display - Proper Grid Layout */}
|
||||
<div className="equipment-sidebar">
|
||||
<h3>⚔️ Equipment</h3>
|
||||
<div className="equipment-grid">
|
||||
{/* Row 1: Head */}
|
||||
<div className="equipment-row">
|
||||
{renderEquipmentSlot('head', equipment.head, '🪖', 'Head')}
|
||||
</div>
|
||||
|
||||
{/* Row 2: Weapon, Torso, Backpack */}
|
||||
<div className="equipment-row three-cols">
|
||||
{renderEquipmentSlot('weapon', equipment.weapon, '⚔️', 'Weapon')}
|
||||
{renderEquipmentSlot('torso', equipment.torso, '👕', 'Torso')}
|
||||
{renderEquipmentSlot('backpack', equipment.backpack, '🎒', 'Backpack')}
|
||||
</div>
|
||||
|
||||
{/* Row 3: Legs & Feet */}
|
||||
<div className="equipment-row two-cols">
|
||||
{renderEquipmentSlot('legs', equipment.legs, '👖', 'Legs')}
|
||||
{renderEquipmentSlot('feet', equipment.feet, '👟', 'Feet')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Inventory Modal */}
|
||||
{showInventory && profile && (
|
||||
<InventoryModal
|
||||
playerState={playerState}
|
||||
profile={profile}
|
||||
equipment={equipment}
|
||||
inventoryFilter={inventoryFilter}
|
||||
inventoryCategoryFilter={inventoryCategoryFilter}
|
||||
onClose={() => setShowInventory(false)}
|
||||
onSetInventoryFilter={onSetInventoryFilter}
|
||||
onSetInventoryCategoryFilter={onSetInventoryCategoryFilter}
|
||||
onUseItem={onUseItem}
|
||||
onEquipItem={onEquipItem}
|
||||
onUnequipItem={onUnequipItem}
|
||||
onDropItem={onDropItem}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PlayerSidebar
|
||||
Reference in New Issue
Block a user