458 lines
19 KiB
TypeScript
458 lines
19 KiB
TypeScript
|
||
import type { Location, PlayerState, CombatState, Profile, WorkbenchTab } from './types'
|
||
import { useTranslation } from 'react-i18next'
|
||
import Workbench from './Workbench'
|
||
import { getAssetPath } from '../../utils/assetPath'
|
||
import { getTranslatedText } from '../../utils/i18nUtils'
|
||
|
||
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) {
|
||
useTranslation()
|
||
return (
|
||
<div className="location-view">
|
||
<div className="location-info">
|
||
<h2 className="centered-heading">
|
||
{getTranslatedText(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={getAssetPath(location.image_url)}
|
||
alt={getTranslatedText(location.name)}
|
||
className="location-image"
|
||
onError={(e: any) => (e.currentTarget.style.display = 'none')}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="location-description-box">
|
||
<p className="location-description">{getTranslatedText(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={getAssetPath(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={getAssetPath(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
|