Commit
This commit is contained in:
Joan
453
pwa/src/components/game/LocationView.tsx
Normal file
453
pwa/src/components/game/LocationView.tsx
Normal file
@@ -0,0 +1,453 @@
|
||||
|
||||
import type { Location, PlayerState, CombatState, Profile, WorkbenchTab } from './types'
|
||||
import Workbench from './Workbench'
|
||||
|
||||
interface LocationViewProps {
|
||||
location: Location
|
||||
playerState: PlayerState | null
|
||||
combatState: CombatState | null
|
||||
message: string
|
||||
locationMessages: Array<{ time: string; message: string }>
|
||||
expandedCorpse: string | null
|
||||
corpseDetails: any
|
||||
mobileMenuOpen: string
|
||||
showCraftingMenu: boolean
|
||||
showRepairMenu: boolean
|
||||
workbenchTab: WorkbenchTab
|
||||
craftableItems: any[]
|
||||
repairableItems: any[]
|
||||
uncraftableItems: any[]
|
||||
craftFilter: string
|
||||
repairFilter: string
|
||||
uncraftFilter: string
|
||||
craftCategoryFilter: string
|
||||
profile: Profile | null
|
||||
onSetMessage: (msg: string) => void
|
||||
onInitiateCombat: (npcId: number) => void
|
||||
onInitiatePvP: (playerId: number) => void
|
||||
onPickup: (itemId: number, quantity: number) => void
|
||||
onLootCorpse: (corpseId: string) => void
|
||||
onLootCorpseItem: (corpseId: string, itemIndex: number | null) => void
|
||||
onSetExpandedCorpse: (corpseId: string | null) => void
|
||||
onOpenCrafting?: () => void
|
||||
onOpenRepair?: () => void
|
||||
onCloseCrafting: () => void
|
||||
onSwitchWorkbenchTab: (tab: WorkbenchTab) => void
|
||||
onSetCraftFilter: (filter: string) => void
|
||||
onSetRepairFilter: (filter: string) => void
|
||||
onSetUncraftFilter: (filter: string) => void
|
||||
onSetCraftCategoryFilter: (category: string) => void
|
||||
onCraft: (itemId: number) => void
|
||||
onRepair: (uniqueItemId: string, inventoryId: number) => void
|
||||
onUncraft: (uniqueItemId: string, inventoryId: number) => void
|
||||
}
|
||||
|
||||
function LocationView({
|
||||
location,
|
||||
message,
|
||||
locationMessages,
|
||||
expandedCorpse,
|
||||
corpseDetails,
|
||||
mobileMenuOpen,
|
||||
showCraftingMenu,
|
||||
showRepairMenu,
|
||||
workbenchTab,
|
||||
craftableItems,
|
||||
repairableItems,
|
||||
uncraftableItems,
|
||||
craftFilter,
|
||||
repairFilter,
|
||||
uncraftFilter,
|
||||
craftCategoryFilter,
|
||||
profile,
|
||||
onSetMessage,
|
||||
onInitiateCombat,
|
||||
onInitiatePvP,
|
||||
onPickup,
|
||||
onLootCorpse,
|
||||
onLootCorpseItem,
|
||||
onSetExpandedCorpse,
|
||||
onOpenCrafting,
|
||||
onOpenRepair,
|
||||
onCloseCrafting,
|
||||
onSwitchWorkbenchTab,
|
||||
onSetCraftFilter,
|
||||
onSetRepairFilter,
|
||||
onSetUncraftFilter,
|
||||
onSetCraftCategoryFilter,
|
||||
onCraft,
|
||||
onRepair,
|
||||
onUncraft
|
||||
}: LocationViewProps) {
|
||||
return (
|
||||
<div className="location-view">
|
||||
<div className="location-info">
|
||||
<h2 className="centered-heading">
|
||||
{location.name}
|
||||
{location.danger_level !== undefined && location.danger_level === 0 && (
|
||||
<span className="danger-badge danger-safe" title="Safe Zone">✓ Safe</span>
|
||||
)}
|
||||
{location.danger_level !== undefined && location.danger_level > 0 && (
|
||||
<span className={`danger-badge danger-${location.danger_level}`} title={`Danger Level: ${location.danger_level}`}>
|
||||
⚠️ {location.danger_level}
|
||||
</span>
|
||||
)}
|
||||
</h2>
|
||||
|
||||
{location.tags && location.tags.length > 0 && (
|
||||
<div className="location-tags">
|
||||
{location.tags.map((tag: string, i: number) => {
|
||||
const isClickable = tag === 'workbench' || tag === 'repair_station'
|
||||
const handleClick = () => {
|
||||
if (tag === 'workbench' && onOpenCrafting) onOpenCrafting()
|
||||
else if (tag === 'repair_station' && onOpenRepair) onOpenRepair()
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
key={i}
|
||||
className={`location-tag tag-${tag} ${isClickable ? 'clickable' : ''}`}
|
||||
title={isClickable ? `Click to ${tag === 'workbench' ? 'craft items' : 'repair items'}` : `This location has: ${tag}`}
|
||||
onClick={isClickable ? handleClick : undefined}
|
||||
style={isClickable ? { cursor: 'pointer' } : undefined}
|
||||
>
|
||||
{tag === 'workbench' && '🔧 Workbench'}
|
||||
{tag === 'repair_station' && '🛠️ Repair Station'}
|
||||
{tag === 'safe_zone' && '🛡️ Safe Zone'}
|
||||
{tag === 'shop' && '🏪 Shop'}
|
||||
{tag === 'shelter' && '🏠 Shelter'}
|
||||
{tag === 'medical' && '⚕️ Medical'}
|
||||
{tag === 'storage' && '📦 Storage'}
|
||||
{tag === 'water_source' && '💧 Water'}
|
||||
{tag === 'food_source' && '🍎 Food'}
|
||||
{tag !== 'workbench' && tag !== 'repair_station' && tag !== 'safe_zone' && tag !== 'shop' && tag !== 'shelter' && tag !== 'medical' && tag !== 'storage' && tag !== 'water_source' && tag !== 'food_source' && `🏷️ ${tag}`}
|
||||
</span>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{location.image_url && (
|
||||
<div className="location-image-container">
|
||||
<img
|
||||
src={location.image_url}
|
||||
alt={location.name}
|
||||
className="location-image"
|
||||
onError={(e: any) => (e.currentTarget.style.display = 'none')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="location-description-box">
|
||||
<p className="location-description">{location.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className="message-box" onClick={() => onSetMessage('')}>
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{locationMessages.length > 0 && (
|
||||
<div className="location-messages-log">
|
||||
<h4>📜 Recent Activity</h4>
|
||||
<div className="messages-scroll">
|
||||
{locationMessages.slice(-10).reverse().map((msg, idx) => (
|
||||
<div key={idx} className="location-message-item">
|
||||
<span className="message-time">{msg.time}</span>
|
||||
<span className="message-text">{msg.message}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`ground-entities mobile-menu-panel bottom ${mobileMenuOpen === 'bottom' ? 'open' : ''}`}>
|
||||
{/* Enemies */}
|
||||
{location.npcs.filter((npc: any) => npc.type === 'enemy').length > 0 && (
|
||||
<div className="entity-section enemies-section">
|
||||
<h3>⚔️ Enemies</h3>
|
||||
<div className="entity-list">
|
||||
{location.npcs.filter((npc: any) => npc.type === 'enemy').map((enemy: any, i: number) => (
|
||||
<div key={i} className="entity-card enemy-card">
|
||||
{enemy.id && (
|
||||
<div className="entity-image">
|
||||
<img
|
||||
src={enemy.image_path ? `/${enemy.image_path}` : `/images/npcs/${enemy.name.toLowerCase().replace(/ /g, '_')}.webp`}
|
||||
alt={enemy.name}
|
||||
onError={(e: any) => { e.currentTarget.style.display = 'none' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="entity-info">
|
||||
<div className="entity-name enemy-name">{enemy.name}</div>
|
||||
{enemy.level && <div className="entity-level">Lv. {enemy.level}</div>}
|
||||
</div>
|
||||
<button
|
||||
className="entity-action-btn combat-btn"
|
||||
onClick={() => onInitiateCombat(enemy.id)}
|
||||
>
|
||||
⚔️ Fight
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Corpses */}
|
||||
{location.corpses && location.corpses.length > 0 && (
|
||||
<div className="entity-section corpses-section">
|
||||
<h3>💀 Corpses</h3>
|
||||
<div className="entity-list">
|
||||
{location.corpses.map((corpse: any) => (
|
||||
<div key={corpse.id} className="corpse-container">
|
||||
<div className="entity-card corpse-card">
|
||||
<div className="entity-info">
|
||||
<div className="entity-name">{corpse.emoji} {corpse.name}</div>
|
||||
<div className="corpse-loot-count">{corpse.loot_count} item(s)</div>
|
||||
</div>
|
||||
<button
|
||||
className="entity-action-btn loot-btn"
|
||||
onClick={() => onLootCorpse(String(corpse.id))}
|
||||
disabled={corpse.loot_count === 0}
|
||||
>
|
||||
🔍 Examine
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{expandedCorpse === String(corpse.id) && corpseDetails && corpseDetails.loot_items && (
|
||||
<div className="corpse-details">
|
||||
<div className="corpse-details-header">
|
||||
<h4>Lootable Items:</h4>
|
||||
<button
|
||||
className="close-btn"
|
||||
onClick={() => {
|
||||
onSetExpandedCorpse(null)
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<div className="corpse-items-list">
|
||||
{corpseDetails.loot_items.map((item: any) => (
|
||||
<div key={item.index} className={`corpse-item ${!item.can_loot ? 'locked' : ''}`}>
|
||||
<div className="corpse-item-info">
|
||||
<div className="corpse-item-name">
|
||||
{item.emoji} {item.item_name}
|
||||
</div>
|
||||
<div className="corpse-item-qty">
|
||||
Qty: {item.quantity_min}{item.quantity_min !== item.quantity_max ? `-${item.quantity_max}` : ''}
|
||||
</div>
|
||||
{item.required_tool && (
|
||||
<div className={`corpse-item-tool ${item.has_tool ? 'has-tool' : 'needs-tool'}`}>
|
||||
🔧 {item.required_tool_name} {item.has_tool ? '✓' : '✗'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="corpse-item-loot-btn"
|
||||
onClick={() => onLootCorpseItem(String(corpse.id), item.index)}
|
||||
disabled={!item.can_loot}
|
||||
title={!item.can_loot ? `Requires ${item.required_tool_name}` : 'Loot this item'}
|
||||
>
|
||||
{item.can_loot ? '📦 Loot' : '🔒'}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
className="loot-all-btn"
|
||||
onClick={() => onLootCorpseItem(String(corpse.id), null)}
|
||||
>
|
||||
📦 Loot All Available
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Friendly NPCs */}
|
||||
{location.npcs.filter((npc: any) => npc.type !== 'enemy').length > 0 && (
|
||||
<div className="entity-section npcs-section">
|
||||
<h3>👥 NPCs</h3>
|
||||
<div className="entity-list">
|
||||
{location.npcs.filter((npc: any) => npc.type !== 'enemy').map((npc: any, i: number) => (
|
||||
<div key={i} className="entity-card npc-card">
|
||||
<span className="entity-icon">🧑</span>
|
||||
<div className="entity-info">
|
||||
<div className="entity-name">{npc.name}</div>
|
||||
{npc.level && <div className="entity-level">Lv. {npc.level}</div>}
|
||||
</div>
|
||||
<button className="entity-action-btn">Talk</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Items on Ground */}
|
||||
{location.items.length > 0 && (
|
||||
<div className="entity-section items-section">
|
||||
<h3>📦 Items on Ground</h3>
|
||||
<div className="entity-list">
|
||||
{location.items.map((item: any, i: number) => (
|
||||
<div key={i} className="entity-card item-card">
|
||||
{item.image_path ? (
|
||||
<img
|
||||
src={item.image_path}
|
||||
alt={item.name}
|
||||
className="entity-icon"
|
||||
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={`entity-icon ${item.image_path ? 'hidden' : ''}`}>{item.emoji || '📦'}</span>
|
||||
<div className="entity-info">
|
||||
<div className={`entity-name ${item.tier ? `tier-${item.tier}` : ''}`}>
|
||||
{item.name || 'Unknown Item'}
|
||||
</div>
|
||||
{item.quantity > 1 && <div className="entity-quantity">×{item.quantity}</div>}
|
||||
</div>
|
||||
<div className="item-info-btn-container">
|
||||
<button className="entity-action-btn info" title="Item Info">Info</button>
|
||||
<div className="item-info-tooltip">
|
||||
{item.description && <div className="item-tooltip-desc">{item.description}</div>}
|
||||
{item.weight !== undefined && item.weight > 0 && (
|
||||
<div className="item-tooltip-stat">
|
||||
⚖️ Weight: {item.weight}kg {item.quantity > 1 && `(Total: ${(item.weight * item.quantity).toFixed(2)}kg)`}
|
||||
</div>
|
||||
)}
|
||||
{item.volume !== undefined && item.volume > 0 && (
|
||||
<div className="item-tooltip-stat">
|
||||
📦 Volume: {item.volume}L {item.quantity > 1 && `(Total: ${(item.volume * item.quantity).toFixed(2)}L)`}
|
||||
</div>
|
||||
)}
|
||||
{item.hp_restore && item.hp_restore > 0 && (
|
||||
<div className="item-tooltip-stat">❤️ HP Restore: +{item.hp_restore}</div>
|
||||
)}
|
||||
{item.stamina_restore && item.stamina_restore > 0 && (
|
||||
<div className="item-tooltip-stat">⚡ Stamina Restore: +{item.stamina_restore}</div>
|
||||
)}
|
||||
{item.damage_min !== undefined && item.damage_max !== undefined && (item.damage_min > 0 || item.damage_max > 0) && (
|
||||
<div className="item-tooltip-stat">
|
||||
⚔️ Damage: {item.damage_min}-{item.damage_max}
|
||||
</div>
|
||||
)}
|
||||
{item.durability !== undefined && item.durability !== null && item.max_durability !== undefined && item.max_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>
|
||||
</div>
|
||||
{item.quantity === 1 ? (
|
||||
<button
|
||||
className="entity-action-btn pickup"
|
||||
onClick={() => onPickup(item.id, 1)}
|
||||
>
|
||||
Pick Up
|
||||
</button>
|
||||
) : (
|
||||
<div className="item-pickup-btn-container">
|
||||
<button className="entity-action-btn pickup">Pick Up ▼</button>
|
||||
<div className="item-pickup-menu">
|
||||
<button className="item-pickup-option" onClick={() => onPickup(item.id, 1)}>Pick Up 1</button>
|
||||
{item.quantity >= 5 && (
|
||||
<button className="item-pickup-option" onClick={() => onPickup(item.id, 5)}>Pick Up 5</button>
|
||||
)}
|
||||
{item.quantity >= 10 && (
|
||||
<button className="item-pickup-option" onClick={() => onPickup(item.id, 10)}>Pick Up 10</button>
|
||||
)}
|
||||
<button className="item-pickup-option" onClick={() => onPickup(item.id, item.quantity)}>
|
||||
Pick Up All ({item.quantity})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Other Players */}
|
||||
{location.other_players && location.other_players.length > 0 && (
|
||||
<div className="entity-section players-section">
|
||||
<h3>👥 Other Players</h3>
|
||||
<div className="entity-list">
|
||||
{location.other_players.map((player: any, i: number) => (
|
||||
<div key={i} className="entity-card player-card">
|
||||
<span className="entity-icon">🧍</span>
|
||||
<div className="entity-info">
|
||||
<div className="entity-name">{player.name || player.username}</div>
|
||||
<div className="entity-level">Lv. {player.level}</div>
|
||||
{player.level_diff !== undefined && (
|
||||
<div className="level-diff">
|
||||
{player.level_diff > 0 ? `+${player.level_diff}` : player.level_diff} levels
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{player.can_pvp && (
|
||||
<button
|
||||
className="pvp-btn"
|
||||
onClick={() => onInitiatePvP(player.id)}
|
||||
title={`Attack ${player.name || player.username}`}
|
||||
>
|
||||
⚔️ Attack
|
||||
</button>
|
||||
)}
|
||||
{!player.can_pvp && player.level_diff !== undefined && Math.abs(player.level_diff) > 3 && (
|
||||
<div className="pvp-disabled-reason">Level difference too high</div>
|
||||
)}
|
||||
{!player.can_pvp && location.danger_level !== undefined && location.danger_level < 3 && (
|
||||
<div className="pvp-disabled-reason">Area too safe for PvP</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(showCraftingMenu || showRepairMenu) && (
|
||||
<Workbench
|
||||
showCraftingMenu={showCraftingMenu}
|
||||
showRepairMenu={showRepairMenu}
|
||||
workbenchTab={workbenchTab}
|
||||
craftableItems={craftableItems}
|
||||
repairableItems={repairableItems}
|
||||
uncraftableItems={uncraftableItems}
|
||||
craftFilter={craftFilter}
|
||||
repairFilter={repairFilter}
|
||||
uncraftFilter={uncraftFilter}
|
||||
craftCategoryFilter={craftCategoryFilter}
|
||||
profile={profile}
|
||||
onCloseCrafting={onCloseCrafting}
|
||||
onSwitchTab={onSwitchWorkbenchTab}
|
||||
onSetCraftFilter={onSetCraftFilter}
|
||||
onSetRepairFilter={onSetRepairFilter}
|
||||
onSetUncraftFilter={onSetUncraftFilter}
|
||||
onSetCraftCategoryFilter={onSetCraftCategoryFilter}
|
||||
onCraft={onCraft}
|
||||
onRepair={onRepair}
|
||||
onUncraft={onUncraft}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LocationView
|
||||
Reference in New Issue
Block a user