▸ VISITOR AT ENTRANCE
⏱️ {currentVisitor.patience}s patience
{currentVisitor.name}
Background: {currentVisitor.background.name}
{/* Personality badge */}
{currentVisitor.personality?.icon}
{currentVisitor.personality?.name}
"{currentVisitor.backstory}"
{/* Condition bars */}
🍖 {Math.floor(currentVisitor.hunger)}%
💧 {Math.floor(currentVisitor.thirst)}%
😊 {Math.floor(currentVisitor.mood)}%
{currentVisitor.isThreat
? '⚠ THE MUSIC REVEALS DARKNESS...'
: '✓ THEY SEEM GENUINE.'}
)}
{/* Inner Circle Advice */}
{innerCircle.length > 0 && (
INNER CIRCLE SAYS:
{getInnerCircleAdvice(currentVisitor.id).map((advice, i) => ({advice.advisor}: {advice.text}
))}
INTERROGATION - Speaking as {texIdentity === 'tex' ? 'TEX SANTOS' : 'WALTER BANKS'}
{texIdentity === 'tex' ? '(Friendly)' : '(Formal)'}
{/* Conversation History */}
{visitorDialogue.length > 0 && (
{visitorDialogue.map((entry, i) => (
))}
)}
{/* Question Options */}
{texIdentity === 'tex' ? 'Tex' : 'Banks'}: {entry.question}
{currentVisitor.name.split(' ')[0]}: {entry.response}
{visitorQuestions.filter(q => !visitorDialogue.find(d => d.id === q.id)).slice(0, 4).map(q => (
))}
{visitorDialogue.length >= visitorQuestions.length && (
No more questions to ask.
)}
🚪 WAITING IN LINE ({visitorQueue.length})
{visitorQueue.slice(0, 6).map((v, i) => (
{v.patience}s
+{visitorQueue.length - 6}
)}
{/* Inner Circle */}
{/* Quick Stats */}
)}
{selectedTab === 'monitor' && (
INNER CIRCLE ({innerCircle.length}/3)
{[0, 1, 2].map(i => {
const member = bunkerMembers.find(m => m.id === innerCircle[i]);
return (
member && setSelectedMember(member)}
>
{member ? (
<>
);
})}
{/* Call Meeting Button */}
TOTAL WORKERS
{bunkerMembers.filter(m => m.job).length}
UNEMPLOYED
{bunkerMembers.filter(m => !m.job).length}
SCAVENGERS
{bunkerMembers.filter(m => m.job === 'scavenger').length}
SECURITY
{bunkerMembers.filter(m => m.job === 'security').length}
{/* TV Monitor */}
)}
{selectedTab === 'jobs' && (
{/* Screen */}
{/* Camera selection */}
{/* Scanline effect */}
{/* Feed content */}
{/* TV controls */}
{/* Header */}
◉ REC
{cameraFeeds.find(f => f.id === activeCameraFeed)?.name.toUpperCase()}
CAM-{cameraFeeds.findIndex(f => f.id === activeCameraFeed) + 1}
{/* Feed scene */}
{/* Workers in this area */}
{(() => {
const feed = cameraFeeds.find(f => f.id === activeCameraFeed);
const workers = feed?.jobFilter
? bunkerMembers.filter(m => m.job === feed.jobFilter)
: activeCameraFeed === 'quarters'
? bunkerMembers.filter(m => !m.job)
: activeCameraFeed === 'entrance'
? []
: bunkerMembers.slice(0, 4);
if (activeCameraFeed === 'entrance') {
return (
);
}
if (activeCameraFeed === 'wasteland') {
const scavengers = bunkerMembers.filter(m => m.job === 'scavenger');
const region = scavengingRegions.find(r => r.id === scavengingRegion);
return (
);
}
return (
);
})()}
{/* Footer */}
🚪
{visitorQueue.length > 0 ? (
<>
VISITORS DETECTED: {visitorQueue.length + (currentVisitor ? 1 : 0)}
{visitorQueue.slice(0, 4).map((v, i) => (
))}
) : (
{v.personality.icon}
{v.name.split(' ')[0]}
⏱ {v.patience}s
NO ACTIVITY DETECTED
)}
🏚️ ☢️ 🌵
LOCATION: {region?.name.toUpperCase()}
0.3 ? '#ff4444' : '#ffff00', marginBottom: '15px' }}>
DANGER LEVEL: {Math.round((region?.danger || 0) * 100)}%
{scavengersDeployed ? (
<>
◉ LIVE FEED - {deployedScavengers.length} SCAVENGER(S) ACTIVE
{bunkerMembers.filter(m => deployedScavengers.includes(m.id)).map((s, i) => (
))}
{['🚶', '🔍', '📦', '🏃'][Math.floor(gameTime / 2 + i) % 4]}
{s.name.split(' ')[0]}
Skill: {s.skills.scavenging.toFixed(1)}
ETA: {Math.max(0, scavengerReturnTime - gameTime)}s
) : scavengers.length > 0 ? (
<>
⏸ STANDBY - {scavengers.length} SCAVENGER(S) READY
{scavengers.map((s, i) => (
))}
🧍
{s.name.split(' ')[0]}
Skill: {s.skills.scavenging.toFixed(1)}
Deploy from left panel
) : (
NO SIGNAL - NO SCAVENGERS ASSIGNED
)}
{feed?.icon}
{workers.length > 0 ? (
<>
PERSONNEL: {workers.length}
{workers.slice(0, 6).map((w, i) => {
const moodInfo = getMoodConsequence(w.mood, w.personality);
const activity = w.job ? jobDefinitions[w.job]?.name : 'Idle';
return (
);
})}
) : (
{w.personality.icon}
{w.name.split(' ')[0]}
{moodInfo.level.toUpperCase()}
{activity}
AREA EMPTY
)}
DAY {day}
{cameraFeeds.find(f => f.id === activeCameraFeed)?.desc}
{String(Math.floor(gameTime / 60)).padStart(2, '0')}:{String(gameTime % 60).padStart(2, '0')}
BUNKER SURVEILLANCE SYSTEM v2.1
{cameraFeeds.map(feed => {
const isActive = activeCameraFeed === feed.id;
const workers = feed.jobFilter
? bunkerMembers.filter(m => m.job === feed.jobFilter)
: feed.id === 'quarters'
? bunkerMembers.filter(m => !m.job)
: feed.id === 'entrance'
? visitorQueue
: [];
return (
);
})}
{Object.entries(jobDefinitions).map(([jobId, job]) => (
{renderJobSlots(jobId)}
))}
{bunkerMembers.map(member => {
const isDying = member.health < 30 || member.hunger < 20 || member.thirst < 20;
return (
)}
{/* BUNKER TAB - Upgrades & Status */}
{selectedTab === 'bunker' && (
setSelectedMember(member)}
style={{
padding: '12px',
background: isDying ? 'rgba(80, 30, 30, 0.5)' : 'rgba(30, 25, 20, 0.5)',
border: `1px solid ${isDying ? '#aa4444' : member.isInnerCircle ? '#c4a35a' : '#3a3530'}`,
cursor: 'pointer',
display: 'flex',
gap: '10px',
alignItems: 'center'
}}
>
);
})}
{bunkerMembers.length === 0 && (
{member.name}
{member.job ? jobDefinitions[member.job].icon : '❓'} {member.job ? jobDefinitions[member.job].name : 'No Job'}
{/* Mini status bars */}
❤️{Math.floor(member.health)} 🍖{Math.floor(member.hunger)} 💧{Math.floor(member.thirst)}
No one in the bunker yet. Admit survivors to build your community.
)}
{/* Bunker Status */}
{/* Active Countdowns */}
{(rescueCountdown || pendingAttack || urgentEvents.length > 0) && (
)}
{/* Bunker Upgrades */}
)}
)}
{/* RELATIONS TAB */}
{selectedTab === 'relations' && (
)}
{/* Confessions Section */}
{Object.keys(confessionsRevealed).length > 0 && (
)}
{/* Voice Transmissions */}
{voiceMessages.length > 0 && (
)}
)}
{/* DIPLOMACY TAB */}
{selectedTab === 'diplomacy' && (
) : (
);
})()}
{selectedTab === 'craft' && (
)}
{/* Travel Event Modal */}
{travelEvent && (
)}
{/* Clearing Reward Modal */}
{showClearReward && (
)}
);
}
SANITY LEVEL
50 ? '#aa88cc' : '#cc6688' }}>{Math.floor(sanityLevel)}%
50 ? '#aa88cc' : '#cc6688' }} />
STRUCTURE
50 ? '#aaaaaa' : '#cc8888' }}>{Math.floor(bunkerIntegrity)}%
50 ? '#888888' : '#cc6666' }} />
KARMA
= 0 ? '#88cc88' : '#cc8888' }}>{karmaScore > 0 ? '+' : ''}{karmaScore}
{karmaScore > 50 ? 'Saint' : karmaScore > 20 ? 'Good' : karmaScore > -20 ? 'Neutral' : karmaScore > -50 ? 'Questionable' : 'Ruthless'}
STORY PHASE
{storyPhase}/5
{storyPhase === 0 ? 'Beginning' : storyPhase === 1 ? 'Discovery' : storyPhase === 2 ? 'Secrets' : storyPhase === 3 ? 'Choices' : storyPhase === 4 ? 'Endgame' : 'Finale'}
⏰ ACTIVE COUNTDOWNS
{rescueCountdown && (
🚁 RESCUE ARRIVING:
{rescueCountdown} days
)}
{pendingAttack && (
⚔️ {pendingAttack.faction.toUpperCase()} ATTACK:
{pendingAttack.days} days
)}
{urgentEvents.map((event, i) => (
⚠️ {event.title}:
{event.daysLeft} days left
))}
🏗️ BUNKER UPGRADES
{bunkerUpgrades.map(upgrade => {
const isBuilt = bunkerRooms[upgrade.id];
const canAfford = resources.food >= upgrade.cost.food && resources.water >= upgrade.cost.water;
return (
);
})}
{/* Surveillance List */}
{watchList.length > 0 && (
{upgrade.icon}
{upgrade.name}
{isBuilt ? '✓ BUILT' : `Cost: ${upgrade.cost.food}🍖 ${upgrade.cost.water}💧`}
{upgrade.desc}
{!isBuilt && ( )}👁️ UNDER SURVEILLANCE
{watchList.map(id => {
const member = bunkerMembers.find(m => m.id === id);
if (!member) return null;
return (
setSelectedMember(member)}
style={{
padding: '10px',
background: 'rgba(80, 80, 120, 0.2)',
border: '1px solid #5a5a8a',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
gap: '10px'
}}
>
);
})}
{member.name}
{member.isThreat ? '⚠️ Suspicious' : '✓ Clean so far'}
{/* Romances */}
{romances.length > 0 && (
)}
{/* Rivalries */}
{rivalries.length > 0 && (
)}
{/* Converted Members */}
{convertedMembers.length > 0 && (
)}
{/* Missing Members */}
{missingMembers.length > 0 && (
)}
{/* All Relationships Matrix */}
) : (
)}
)}
{/* RADIO TAB */}
{selectedTab === 'radio' && (
💕 ROMANCES
{romances.map((romance, i) => {
const p1 = bunkerMembers.find(m => m.id === romance.person1);
const p2 = bunkerMembers.find(m => m.id === romance.person2);
if (!p1 || !p2) return null;
return (
{p1.name.split(' ')[0]}
❤️
{p2.name.split(' ')[0]}
⚔️ RIVALRIES
{rivalries.map((rivalry, i) => {
const p1 = bunkerMembers.find(m => m.id === rivalry.person1);
const p2 = bunkerMembers.find(m => m.id === rivalry.person2);
if (!p1 || !p2) return null;
return (
{p1.name.split(' ')[0]}
⚔️
{p2.name.split(' ')[0]}
Intensity: {rivalry.intensity}
👁️ CONVERTED (COMPROMISED)
{convertedMembers.map(id => {
const member = bunkerMembers.find(m => m.id === id);
if (!member) return null;
return (
setSelectedMember(member)}
style={{
padding: '10px',
background: 'rgba(100, 50, 100, 0.3)',
border: '1px solid #6a3a6a',
cursor: 'pointer'
}}
>
);
})}
{member.name.split(' ')[0]}
❓ MISSING
{missingMembers.map((member, i) => (
{member.name.split(' ')[0]}
Day {member.day}
📊 RELATIONSHIP MATRIX
{bunkerMembers.length > 1 ? (
{bunkerMembers.slice(0, 10).map(member => (
))}
{bunkerMembers.length > 10 && (
{member.name.split(' ')[0]}
{bunkerMembers.slice(0, 10).map(other => {
if (member.id === other.id) return (
-
);
const relKey = `${Math.min(member.id, other.id)}_${Math.max(member.id, other.id)}`;
const rel = relationships[relKey] || 0;
const color = rel > 50 ? '#88cc88' : rel > 20 ? '#aacc88' : rel > -20 ? '#888888' : rel > -50 ? '#ccaa88' : '#cc8888';
return (
{rel > 50 ? '💕' : rel > 20 ? '😊' : rel > -20 ? '😐' : rel > -50 ? '😠' : '💢'}
);
})}
Showing first 10 members. Total: {bunkerMembers.length}
)}Need at least 2 bunker members to track relationships.
)} {/* No relationships yet message */} {romances.length === 0 && rivalries.length === 0 && convertedMembers.length === 0 && missingMembers.length === 0 && (🤝
No significant relationships yet.
Relationships develop over time as people interact.
{/* Radio Unit Display */}
{/* Broadcasting */}
{isBroadcasting && (
) : (
)}
{/* MAP TAB */}
{/* MORALE EVENTS TAB */}
{selectedTab === 'morale' && (
{/* Radio Header */}
{/* Display Screen */}
{/* Known Stations */}
BUNKER RADIO SYSTEM
{radioOn ? (
<>
{/* Frequency Display */}
{/* Controls */}
{radioFrequency.toFixed(1)} FM
{/* Station Name */}
{getCurrentStation()?.name || '-- NO SIGNAL --'}
{/* Scrolling Message */}
{radioMessage || '...scanning...'}
{/* Signal Strength */}
{[1,2,3,4,5].map(i => (
))}
) : (
-- RADIO OFF --
)}
{/* Power Button */}
{/* Frequency Dial */}
{
setRadioFrequency(parseFloat(e.target.value));
if (radioOn) {
const msg = getRadioMessage();
setRadioMessage(msg.text);
if (msg.type === 'static') playRadioStatic();
if (msg.type === 'music') playRadioMusic();
}
}}
disabled={!radioOn}
style={{ width: '100%', cursor: radioOn ? 'pointer' : 'not-allowed' }}
/>
{/* Scan Button */}
87
FM
108
📻 KNOWN FREQUENCIES
{radioStations.map(station => (
))}
📡 BROADCAST (Requires Radio Booster)
{bunkerRooms.lab || discoveredLocations.includes('radio_boost') ? (Broadcast to attract survivors or send messages to factions.
Broadcasting... (resets at end of day)
)}Build a Research Lab or find Radio Components to enable broadcasting.
)}🎉 MORALE EVENTS
Organize events to boost bunker morale. Each has a cooldown period.
{moraleEventOptions.map(event => {
const onCooldown = moraleEventCooldowns[event.id] > 0;
const canAfford = (!event.cost.food || resources.food >= event.cost.food) && (!event.cost.power || resources.power >= event.cost.power);
const needsDeaths = event.requiresDeaths && memorialWall.length === 0;
const disabled = onCooldown || !canAfford || needsDeaths;
return (
);
})}
{/* Found Notes Section */}
{discoveredNotes.length > 0 && (
{event.name}
{event.desc}
{event.cost.food ? `🍖 -${event.cost.food} ` : ''}
{event.cost.power ? `⚡ -${event.cost.power} ` : ''}
{!event.cost.food && !event.cost.power ? 'Free! ' : ''}
→ 😊 +{event.boost}
{onCooldown ? (
Cooldown: {moraleEventCooldowns[event.id]} day(s)
) : (
)}
📜 FOUND NOTES ({discoveredNotes.length}/{foundNotes.length})
{discoveredNotes.map(noteId => {
const note = foundNotes.find(n => n.id === noteId);
return note ? (
) : null;
})}
🤫 CONFESSIONS HEARD
{Object.entries(confessionsRevealed).map(([memberId, confId]) => {
const member = bunkerMembers.find(m => m.id === parseInt(memberId)) || memorialWall.find(m => m.name);
const conf = memberConfessions.find(c => c.id === confId);
return conf ? (
{member?.name || 'Unknown'}
— {conf.mood}
) : null;
})}
📻 THE VOICE — TRANSMISSIONS
{voiceMessages.map((msg, i) => (
Day {msg.day} — Stage {msg.stage}
))}
"{msg.text}"
🏠 DIPLOMACY
{!rivalBunker.discovered ? (📡
No other bunkers detected yet.
Keep your radio active to discover nearby settlements.
{/* Rival Bunker Info */}
{/* Attitude Bar */}
{/* Actions */}
)}
)}
)}
{selectedTab === 'map' && (() => {
const selLoc = selectedLocation ? mapLocations.find(l => l.id === selectedLocation) : null;
const isOnSite = scoutingTeam && scoutingTeam.status === 'on_site' && scoutingTeam.locationId === selectedLocation;
const isTraveling = scoutingTeam && scoutingTeam.status === 'traveling';
const totalRooms = mapLocations.reduce((sum, l) => sum + l.rooms.length, 0);
const searchedRooms = Object.values(locationLootCollected).reduce((sum, loc) => sum + Object.keys(loc).length, 0);
return (
🏠 {rivalBunkerData.name}
60 ? '#88cc88' : rivalBunker.attitude < 30 ? '#cc8888' : '#cccc88', fontSize: '12px' }}> {rivalBunker.alliance ? '🤝 ALLIED' : rivalBunker.attitude > 60 ? '😊 Friendly' : rivalBunker.attitude < 30 ? '😠 Hostile' : '😐 Neutral'}Leader: {rivalBunkerData.leader}
Population: ~{rivalBunker.population}
Traits: {rivalBunkerData.traits.join(', ')}
Attitude: {Math.floor(rivalBunker.attitude)}%
60 ? '#4a8a4a' : rivalBunker.attitude < 30 ? '#8a4a4a' : '#8a8a4a', transition: 'width 0.3s' }} />
AVAILABLE ACTIONS
{rivalActions.map(action => {
const canDo = rivalBunker.attitude >= action.attitudeReq || action.attitudeReq < 0;
const canAfford = (!action.cost.food || resources.food >= action.cost.food) && (!action.cost.water || resources.water >= action.cost.water);
const disabled = !canDo || !canAfford;
const isHostile = action.attitudeChange < -20;
return (
);
})}
{/* Trade History */}
{rivalBunker.tradeHistory.length > 0 && (
{action.name}
{action.desc}
{action.cost.food || action.cost.water ? (
Cost: {action.cost.food ? `🍖${action.cost.food} ` : ''}{action.cost.water ? `💧${action.cost.water}` : ''}
) : null}
{!canDo && action.attitudeReq > 0 && (
Requires {action.attitudeReq}% attitude
)}
RECENT INTERACTIONS
{rivalBunker.tradeHistory.slice(-5).reverse().map((trade, i) => (
Day {trade.day}: {rivalActions.find(a => a.id === trade.action)?.name || trade.action}
))}
🗺️ WASTELAND MAP
Locations: {Object.keys(exploredMap).length}/{mapLocations.length} | Rooms: {searchedRooms}/{totalRooms}
{scoutingTeam &&
🚶 Team: {scoutingTeam.status === 'traveling' ? 'En route' : 'On site'}
}
{/* LEFT - Map */}
{/* RIGHT - Details */}
{[80, 160, 240].map(r => (
))}
🏠
{scoutingTeam && (() => {
const destLoc = mapLocations.find(l => l.id === scoutingTeam.locationId);
if (!destLoc) return null;
return (
);
})()}
{mapLocations.map(loc => {
const isExplored = !!exploredMap[loc.id];
const roomsSearched = locationLootCollected[loc.id] ? Object.keys(locationLootCollected[loc.id]).length : 0;
const allSearched = roomsSearched === loc.rooms.length;
const hasTeam = scoutingTeam && scoutingTeam.locationId === loc.id;
const isSelected = selectedLocation === loc.id;
return (
{ if (isExplored) setSelectedLocation(loc.id); }}
style={{
position: 'absolute', left: loc.x + '%', top: loc.y + '%', transform: 'translate(-50%, -50%)',
width: isSelected ? '34px' : '26px', height: isSelected ? '34px' : '26px',
background: !isExplored ? '#1a1815' : allSearched ? '#2a3a2a' : '#2a2520',
border: `2px solid ${isSelected ? '#c4a35a' : allSearched ? '#88cc88' : isExplored ? '#6a6050' : '#3a3530'}`,
borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
fontSize: isSelected ? '14px' : '11px', cursor: isExplored ? 'pointer' : 'default',
opacity: isExplored ? 1 : 0.4, zIndex: isSelected ? 20 : 10,
transition: 'all 0.15s', boxShadow: isSelected ? '0 0 12px rgba(196,163,90,0.3)' : 'none'
}}
title={isExplored ? `${loc.name} (${roomsSearched}/${loc.rooms.length} rooms)` : '???'}
>
{isExplored ? getLocIcon(loc.type) : '?'}
{hasTeam && }
{allSearched &&
)}
);
})}
{outposts[loc.id] ? '🏗️' : '✓'}
}
{isExplored && !allSearched && roomsSearched > 0 && (
{explorationLog.slice(-8).reverse().map((entry, i) => (
Day {entry.day}: {entry.location} - {entry.room} ({entry.result})
{entry.loot && [{entry.loot}]}
{entry.member && [Lost: {entry.member}]}
))}
{!selLoc && !isTraveling && (
)}
{isTraveling && !selLoc && (
)}
{selLoc && exploredMap[selLoc.id] && (
{isOnSite && (
{!searched && (
);
})}
{locationLootCollected[selLoc.id] && Object.keys(locationLootCollected[selLoc.id]).length === selLoc.rooms.length && (
)}
SELECT A DISCOVERED LOCATION OR SEND SCOUTS
{mapLocations.filter(l => !exploredMap[l.id]).map(loc => (
))}
{scoutingTeam &&
⚠️ Team already deployed
}
🚶
Team en route
{scoutingTeam.memberNames.join(', ')}
Destination: {mapLocations.find(l => l.id === scoutingTeam.locationId)?.name || '???'}
Arriving: Day {scoutingTeam.returnDay} ({scoutingTeam.returnDay - day} day(s) remaining)
Destination: {mapLocations.find(l => l.id === scoutingTeam.locationId)?.name || '???'}
Arriving: Day {scoutingTeam.returnDay} ({scoutingTeam.returnDay - day} day(s) remaining)
{getLocIcon(selLoc.type)}
{selLoc.name}
Danger: {'█'.repeat(Math.ceil(selLoc.danger * 5))}{'░'.repeat(5 - Math.ceil(selLoc.danger * 5))}
{selLoc.desc}
✅ Team on site: {scoutingTeam.memberNames.join(', ')}
)}
{!scoutingTeam && (
)}
ROOMS — {locationLootCollected[selLoc.id] ? Object.keys(locationLootCollected[selLoc.id]).length : 0}/{selLoc.rooms.length} searched
{selLoc.rooms.map(room => {
const searched = !!locationLootCollected[selLoc.id]?.[room.id];
const loot = locationLootCollected[selLoc.id]?.[room.id];
return (
{searched ? '✓ ' : ''}{room.name}
{Math.round(room.danger * 100)}% danger
{!searched && isOnSite && (
)}
{room.flavor}
)}
{searched && loot && (
Found: {Object.entries(loot).filter(([k,v]) => v > 0).map(([k,v]) => `${v} ${k}`).join(', ') || 'nothing'}
)}
{!searched && (
Expected: {Object.keys(room.loot).join(', ')}
)}
{clearedLocations.includes(selLoc.id) && clearingRewards[selLoc.id] && (
)}
{outposts[selLoc.id] ? (
) : (
)}
)}
⭐ {clearingRewards[selLoc.id].name}
{clearingRewards[selLoc.id].desc}
🏗️ {outposts[selLoc.id].name}
{outposts[selLoc.id].desc}
Producing daily: {Object.entries(outposts[selLoc.id].dailyYield).map(([k,v]) => `+${v} ${k}`).join(', ')}
BUILD OUTPOST
{outpostTypes.filter(o => o.type === 'any' || o.type === selLoc.type).map(opt => (
))}
{/* Inventory */}
{/* Recipes */}
)}
)}
{/* RIGHT SIDEBAR - Daily Log */}
{/* Location Event Modal */}
{locationEvent && (
📦 INVENTORY
{Object.entries(inventory).map(([item, count]) => (
))}
{item === 'scrap' ? '🔩' :
item === 'chemicals' ? '🧪' :
item === 'electronics' ? '💾' :
item === 'cloth' ? '🧵' :
item === 'herbs' ? '🌿' : '📦'}
{item}
0 ? '#c4a35a' : '#4a4540' }}>{count}
🔨 CRAFTING RECIPES
{craftingRecipes.map(recipe => {
const canCraft = Object.entries(recipe.materials).every(([mat, needed]) => inventory[mat] >= needed);
return (
);
})}
{/* Crafting Queue */}
{craftingQueue.length > 0 && (
{recipe.icon}
{recipe.name}
Time: {recipe.time} day(s)
Materials: {Object.entries(recipe.materials).map(([mat, n]) => (
= n ? '#88cc88' : '#cc8888',
marginLeft: '5px'
}}>
{n} {mat}
))}
⏳ IN PROGRESS
{craftingQueue.map((item, i) => (
{item.icon}
))}
{item.name}
{item.daysLeft} day(s) left
EXPLORATION EVENT
{locationEvent.title}
{locationEvent.text}
{locationEvent.choices.map((choice, i) => ( ))}EN ROUTE
{travelEvent.title}
{travelEvent.text}
{travelEvent.choices.map((choice, i) => ( ))}LOCATION FULLY CLEARED
⭐
{showClearReward.name}
{showClearReward.desc}