Compare commits
1 Commits
d8e74b00c3
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 virtheart
|
70e6b5808b |
+15
-3300
File diff suppressed because it is too large
Load Diff
@@ -99,28 +99,17 @@ export function CommandCenter({
|
|||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const secondaryOperations = [
|
const secondaryOperations = view.place.actions
|
||||||
...view.place.actions
|
.filter((action) => !action.disabledReason && action.id !== firstUtilityAction?.id)
|
||||||
.filter((action) => !action.disabledReason && action.id !== firstUtilityAction?.id)
|
.slice(0, 2)
|
||||||
.slice(0, 3)
|
.map((action) => ({
|
||||||
.map((action) => ({
|
id: action.id,
|
||||||
id: action.id,
|
icon: getOperationIcon(action.id),
|
||||||
icon: getOperationIcon(action.id),
|
title: action.name,
|
||||||
title: action.name,
|
detail: action.rewardHint,
|
||||||
detail: action.rewardHint,
|
time: `${action.timeCostMin} 分钟`,
|
||||||
time: `${action.timeCostMin} 分钟`,
|
onClick: () => onSendAction({ type: 'perform-action', actionId: action.id }),
|
||||||
onClick: () => onSendAction({ type: 'perform-action', actionId: action.id }),
|
}));
|
||||||
})),
|
|
||||||
];
|
|
||||||
|
|
||||||
while (secondaryOperations.length < 3) {
|
|
||||||
const fillers = [
|
|
||||||
{ id: 'inventory', icon: 'inventory' as const, title: '背包', detail: '打开野外背包终端', time: '0 分钟', onClick: () => onOpenPanel('inventory') },
|
|
||||||
{ id: 'craft', icon: 'crafting' as const, title: '制作', detail: '查看蓝图与材料缺口', time: '15 分钟', onClick: () => onOpenPanel('blueprints') },
|
|
||||||
{ id: 'logs', icon: 'signal' as const, title: '查看日志', detail: '检查最近的探索信号', time: '2 分钟', onClick: () => onOpenPanel('logs') },
|
|
||||||
];
|
|
||||||
secondaryOperations.push(fillers[secondaryOperations.length]);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="panel panel-command theater-panel hud-shell-panel">
|
<section className="panel panel-command theater-panel hud-shell-panel">
|
||||||
@@ -183,7 +172,7 @@ export function CommandCenter({
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div className="theater-secondary-column">
|
<div className="theater-secondary-column">
|
||||||
{secondaryOperations.slice(0, 3).map((operation) => (
|
{secondaryOperations.map((operation) => (
|
||||||
<button key={operation.id} className="theater-secondary-card" disabled={isWorking} onClick={operation.onClick} type="button">
|
<button key={operation.id} className="theater-secondary-card" disabled={isWorking} onClick={operation.onClick} type="button">
|
||||||
<HudIcon name={operation.icon} className="theater-action-icon" />
|
<HudIcon name={operation.icon} className="theater-action-icon" />
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -31,46 +31,31 @@ export function LoadoutPanel({
|
|||||||
<section className="panel panel-loadout equipment-terminal">
|
<section className="panel panel-loadout equipment-terminal">
|
||||||
<header className="equipment-terminal-head">
|
<header className="equipment-terminal-head">
|
||||||
<div className="equipment-terminal-title">
|
<div className="equipment-terminal-title">
|
||||||
<HudIcon name="inventory" className="section-glyph" />
|
<p className="eyebrow">装备</p>
|
||||||
<div>
|
<strong>{view.player.name}</strong>
|
||||||
<p className="eyebrow">装备</p>
|
|
||||||
<strong>{view.player.name}</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="equipment-terminal-badges">
|
|
||||||
<span className={`hud-chip ${view.player.storageAccessible ? 'safe' : 'muted'}`}>
|
|
||||||
{view.player.storageAccessible ? '仓储在线' : '野外行动'}
|
|
||||||
</span>
|
|
||||||
<span className="hud-chip muted">负载 {view.player.inventoryUsage}/{view.player.inventoryCapacity}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span className="hud-chip muted">负载 {view.player.inventoryUsage}/{view.player.inventoryCapacity}</span>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section className="equipment-grid-frame">
|
<section className="equipment-grid">
|
||||||
<div className="equipment-grid-head">
|
{equipmentEntries.map((entry) => (
|
||||||
<span>装备栏</span>
|
<article key={entry.id} className={`equipment-slot-card ${entry.isEquipped ? 'equipped' : ''}`}>
|
||||||
<p>右侧保留装备、警报与补给摘要</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="equipment-grid">
|
|
||||||
{equipmentEntries.map((entry) => (
|
|
||||||
<article key={entry.id} className={`equipment-slot-card ${entry.isEquipped ? 'equipped' : ''}`}>
|
|
||||||
<div className="equipment-slot-top">
|
|
||||||
<span>{entry.label}</span>
|
|
||||||
</div>
|
|
||||||
<AssetThumb src={entry.art} label={entry.title} className="equipment-slot-thumb" />
|
|
||||||
<div className="equipment-slot-copy">
|
|
||||||
<strong>{entry.title}</strong>
|
|
||||||
<small>{entry.subtitle}</small>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
<article className="equipment-slot-card placeholder">
|
|
||||||
<div className="equipment-slot-top">
|
<div className="equipment-slot-top">
|
||||||
<span>模组</span>
|
<span>{entry.label}</span>
|
||||||
|
</div>
|
||||||
|
<AssetThumb src={entry.art} label={entry.title} className="equipment-slot-thumb" />
|
||||||
|
<div className="equipment-slot-copy">
|
||||||
|
<strong>{entry.title}</strong>
|
||||||
|
<small>{entry.subtitle}</small>
|
||||||
</div>
|
</div>
|
||||||
<div className="equipment-slot-placeholder">+</div>
|
|
||||||
</article>
|
</article>
|
||||||
</div>
|
))}
|
||||||
|
<article className="equipment-slot-card placeholder">
|
||||||
|
<div className="equipment-slot-top">
|
||||||
|
<span>模组</span>
|
||||||
|
</div>
|
||||||
|
<div className="equipment-slot-placeholder">+</div>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="equipment-metrics-row">
|
<section className="equipment-metrics-row">
|
||||||
@@ -85,15 +70,11 @@ export function LoadoutPanel({
|
|||||||
<section className="warning-terminal">
|
<section className="warning-terminal">
|
||||||
<div className="warning-terminal-head">
|
<div className="warning-terminal-head">
|
||||||
<span>生存警报</span>
|
<span>生存警报</span>
|
||||||
<button className="warning-terminal-button" type="button">
|
|
||||||
详情
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="warning-terminal-list">
|
<div className="warning-terminal-list">
|
||||||
{statusEffects.slice(0, 4).map((effect) => (
|
{statusEffects.slice(0, 3).map((effect) => (
|
||||||
<article key={effect.id} className={`warning-meter tone-${effect.tone}`}>
|
<article key={effect.id} className={`warning-meter tone-${effect.tone}`}>
|
||||||
<div className="warning-meter-head">
|
<div className="warning-meter-head">
|
||||||
<HudIcon name="signal" className="warning-meter-icon" />
|
|
||||||
<span>{effect.label.split('·')[0].trim()}</span>
|
<span>{effect.label.split('·')[0].trim()}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="warning-meter-track">
|
<div className="warning-meter-track">
|
||||||
|
|||||||
@@ -39,28 +39,12 @@ export function RoutePanel({
|
|||||||
<p className="eyebrow">探索</p>
|
<p className="eyebrow">探索</p>
|
||||||
<h2>{currentPlace?.name ?? view.header.placeName}</h2>
|
<h2>{currentPlace?.name ?? view.header.placeName}</h2>
|
||||||
</div>
|
</div>
|
||||||
<span className={`hud-chip ${expedition.tone === 'good' ? 'safe' : expedition.tone}`}>{view.header.riskLabel}</span>
|
<div className="expedition-weather-meta">
|
||||||
|
<span>{atmosphere.weather}</span>
|
||||||
|
<span>{atmosphere.temperature}</span>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section className="expedition-location-card">
|
|
||||||
<p className="eyebrow">当前位置</p>
|
|
||||||
<strong>{view.header.placeName}</strong>
|
|
||||||
<div className="expedition-weather-block">
|
|
||||||
<div className="expedition-weather-main">
|
|
||||||
<HudIcon name="weather" className="expedition-weather-icon" />
|
|
||||||
<span>{atmosphere.weather}</span>
|
|
||||||
</div>
|
|
||||||
<div className="expedition-weather-meta">
|
|
||||||
<span>{atmosphere.temperature}</span>
|
|
||||||
<span>{atmosphere.wind}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="expedition-risk-line">
|
|
||||||
<span>风险等级</span>
|
|
||||||
<strong>{view.header.riskLabel}</strong>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="expedition-routes-card">
|
<section className="expedition-routes-card">
|
||||||
<div className="expedition-section-head">
|
<div className="expedition-section-head">
|
||||||
<span>路线</span>
|
<span>路线</span>
|
||||||
|
|||||||
@@ -1,310 +1,10 @@
|
|||||||
import type { GameAction, GameView } from '@tinywaste/game-core';
|
import type { GameAction, GameView } from '@tinywaste/game-core';
|
||||||
import { getActiveQuestCount, getLoadoutEntries, getSupplyCounts } from '../hudModel';
|
|
||||||
import type { OverlayPanel } from '../types';
|
import type { OverlayPanel } from '../types';
|
||||||
import { ModalShell } from '../../shared/components/ModalShell';
|
import { ModalShell } from '../../shared/components/ModalShell';
|
||||||
import { PanelHeader } from '../../shared/components/PanelHeader';
|
import { InventoryOverlay } from './overlays/InventoryOverlay';
|
||||||
import { InventoryCard } from './cards/InventoryCard';
|
import { MissionOverlay } from './overlays/MissionOverlay';
|
||||||
import { QuestCard } from './cards/QuestCard';
|
import { BlueprintOverlay } from './overlays/BlueprintOverlay';
|
||||||
import { RecipeCard } from './cards/RecipeCard';
|
import { LogOverlay } from './overlays/LogOverlay';
|
||||||
import { EmptyState } from './EmptyState';
|
|
||||||
|
|
||||||
function OverlayHeaderStats({ view }: { view: GameView }) {
|
|
||||||
const supplyCounts = getSupplyCounts(view);
|
|
||||||
const activeQuestCount = getActiveQuestCount(view);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="overlay-summary-grid">
|
|
||||||
<article className="overlay-summary-card">
|
|
||||||
<span>容量</span>
|
|
||||||
<strong>
|
|
||||||
{view.player.inventoryUsage}/{view.player.inventoryCapacity}
|
|
||||||
</strong>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-summary-card">
|
|
||||||
<span>水</span>
|
|
||||||
<strong>{supplyCounts.water}</strong>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-summary-card">
|
|
||||||
<span>食物</span>
|
|
||||||
<strong>{supplyCounts.food}</strong>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-summary-card">
|
|
||||||
<span>药品</span>
|
|
||||||
<strong>{supplyCounts.medicine}</strong>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-summary-card">
|
|
||||||
<span>任务</span>
|
|
||||||
<strong>{activeQuestCount}</strong>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-summary-card">
|
|
||||||
<span>仓储</span>
|
|
||||||
<strong>
|
|
||||||
{view.player.storageUsage}/{view.player.storageCapacity}
|
|
||||||
</strong>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function InventoryOverlay({
|
|
||||||
isWorking,
|
|
||||||
onSendAction,
|
|
||||||
view,
|
|
||||||
}: {
|
|
||||||
isWorking: boolean;
|
|
||||||
onSendAction: (action: GameAction) => void;
|
|
||||||
view: GameView;
|
|
||||||
}) {
|
|
||||||
const loadoutEntries = getLoadoutEntries(view);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="system-overlay">
|
|
||||||
<OverlayHeaderStats view={view} />
|
|
||||||
|
|
||||||
<div className="system-overlay-grid inventory-overlay-grid">
|
|
||||||
<div className="overlay-main-stack">
|
|
||||||
<section className="subpanel overlay-main-panel">
|
|
||||||
<PanelHeader title="Field Bag" subtitle="随身背包，服务当前决策与战斗" compact />
|
|
||||||
<div className="inventory-list overlay-list">
|
|
||||||
{view.player.inventory.map((item) => (
|
|
||||||
<InventoryCard
|
|
||||||
key={item.itemId}
|
|
||||||
busy={isWorking}
|
|
||||||
extraActions={
|
|
||||||
view.player.storageAccessible && !item.equipped
|
|
||||||
? [
|
|
||||||
{
|
|
||||||
label: '存入仓储',
|
|
||||||
onClick: () =>
|
|
||||||
onSendAction({ type: 'stash-item', itemId: item.itemId, count: item.count }),
|
|
||||||
tone: 'secondary',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
item={item}
|
|
||||||
onEquip={() => onSendAction({ type: 'equip-item', itemId: item.itemId })}
|
|
||||||
onUnequip={() => onSendAction({ type: 'unequip-item', slot: item.equipSlot! })}
|
|
||||||
onUse={() => onSendAction({ type: 'use-item', itemId: item.itemId })}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="subpanel overlay-main-panel">
|
|
||||||
<PanelHeader
|
|
||||||
title="Shelter Storage"
|
|
||||||
subtitle={
|
|
||||||
view.player.storageAccessible
|
|
||||||
? `避难所仓储 ${view.player.storageUsage}/${view.player.storageCapacity}`
|
|
||||||
: '当前不在避难所，仓储已锁定'
|
|
||||||
}
|
|
||||||
compact
|
|
||||||
/>
|
|
||||||
{view.player.storageAccessible ? (
|
|
||||||
view.player.storage.length ? (
|
|
||||||
<div className="inventory-list overlay-list">
|
|
||||||
{view.player.storage.map((item) => (
|
|
||||||
<InventoryCard
|
|
||||||
key={`storage-${item.itemId}`}
|
|
||||||
busy={isWorking}
|
|
||||||
extraActions={[
|
|
||||||
{
|
|
||||||
label: '取回背包',
|
|
||||||
onClick: () =>
|
|
||||||
onSendAction({ type: 'retrieve-item', itemId: item.itemId, count: item.count }),
|
|
||||||
tone: 'primary',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
footerText={`${item.type} · 体积 ${item.volume} · 避难所仓储`}
|
|
||||||
item={item}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<EmptyState text="仓储目前是空的。把低频物资和备用装备放回去，可以减轻出行背包压力。" />
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<EmptyState text="只有回到 Shelter-7 后，才能访问避难所仓储和长期积累的物资。" />
|
|
||||||
)}
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="overlay-side-stack">
|
|
||||||
<section className="subpanel overlay-side-panel">
|
|
||||||
<PanelHeader title="Loadout Snapshot" subtitle="当前装备位快照" compact />
|
|
||||||
<div className="overlay-loadout-stack">
|
|
||||||
{[...loadoutEntries.left, ...loadoutEntries.right].map((entry) => (
|
|
||||||
<article key={entry.id} className={`overlay-loadout-row ${entry.isEquipped ? 'equipped' : ''}`}>
|
|
||||||
<div>
|
|
||||||
<span>{entry.label}</span>
|
|
||||||
<strong>{entry.title}</strong>
|
|
||||||
</div>
|
|
||||||
<small>{entry.subtitle}</small>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="subpanel overlay-side-panel">
|
|
||||||
<PanelHeader title="Storage Rules" subtitle="随身背包与基地仓储的分层规则" compact />
|
|
||||||
<div className="overlay-note-stack">
|
|
||||||
<article className="overlay-note-card">
|
|
||||||
<strong>容量模型</strong>
|
|
||||||
<p>随身背包负责当前回合决策，避难所仓储负责长线囤积，二者都受体积上限约束。</p>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-note-card">
|
|
||||||
<strong>使用优先级</strong>
|
|
||||||
<p>饮水、药物和战斗工具留在身上；备用护甲、净水和材料可以先回收到仓储层。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function MissionOverlay({ isWorking, onSendAction, view }: { isWorking: boolean; onSendAction: (action: GameAction) => void; view: GameView }) {
|
|
||||||
return (
|
|
||||||
<div className="system-overlay">
|
|
||||||
<OverlayHeaderStats view={view} />
|
|
||||||
|
|
||||||
<div className="system-overlay-grid mission-overlay-grid">
|
|
||||||
<section className="subpanel overlay-main-panel">
|
|
||||||
<PanelHeader title="Mission Threads" subtitle="主线、支线和当前推进步骤" compact />
|
|
||||||
<div className="quest-list overlay-list">
|
|
||||||
{view.quests.length ? (
|
|
||||||
view.quests.map((quest) => <QuestCard key={quest.id} quest={quest} />)
|
|
||||||
) : (
|
|
||||||
<EmptyState text="当前没有任务线，继续探索可以触发新的委托。" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="overlay-side-stack">
|
|
||||||
<section className="subpanel overlay-side-panel">
|
|
||||||
<PanelHeader title="Recovery Actions" subtitle="以游戏面板方式触发休整" compact />
|
|
||||||
<div className="rest-actions">
|
|
||||||
{[30, 60, 120].map((minutes) => (
|
|
||||||
<button
|
|
||||||
key={minutes}
|
|
||||||
className="rest-button"
|
|
||||||
disabled={isWorking}
|
|
||||||
onClick={() => onSendAction({ type: 'rest', minutes })}
|
|
||||||
>
|
|
||||||
休息 {minutes} 分钟
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="subpanel overlay-side-panel">
|
|
||||||
<PanelHeader title="Mission Logic" subtitle="任务系统设计摘要" compact />
|
|
||||||
<div className="overlay-note-stack">
|
|
||||||
<article className="overlay-note-card">
|
|
||||||
<strong>生命周期</strong>
|
|
||||||
<p>任务分为 locked、active、completed，推进由服务端根据状态、地点、物品与标记自动结算。</p>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-note-card">
|
|
||||||
<strong>引导方式</strong>
|
|
||||||
<p>新手引导应尽量通过任务链驱动，而不是频繁弹出说明窗口。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function BlueprintOverlay({
|
|
||||||
isWorking,
|
|
||||||
onSendAction,
|
|
||||||
view,
|
|
||||||
}: {
|
|
||||||
isWorking: boolean;
|
|
||||||
onSendAction: (action: GameAction) => void;
|
|
||||||
view: GameView;
|
|
||||||
}) {
|
|
||||||
const craftableCount = view.recipes.filter((recipe) => recipe.craftable).length;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="system-overlay">
|
|
||||||
<OverlayHeaderStats view={view} />
|
|
||||||
|
|
||||||
<div className="system-overlay-grid blueprint-overlay-grid">
|
|
||||||
<section className="subpanel overlay-main-panel">
|
|
||||||
<PanelHeader title="Blueprint Stack" subtitle="制作配方、缺口与执行入口" compact />
|
|
||||||
<div className="recipe-list overlay-list">
|
|
||||||
{view.recipes.map((recipe) => (
|
|
||||||
<RecipeCard
|
|
||||||
key={recipe.id}
|
|
||||||
busy={isWorking}
|
|
||||||
onCraft={() => onSendAction({ type: 'craft', recipeId: recipe.id })}
|
|
||||||
recipe={recipe}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="overlay-side-stack">
|
|
||||||
<section className="subpanel overlay-side-panel">
|
|
||||||
<PanelHeader title="Crafting State" subtitle="当前蓝图执行态" compact />
|
|
||||||
<div className="overlay-note-stack">
|
|
||||||
<article className="overlay-note-card">
|
|
||||||
<strong>可制作</strong>
|
|
||||||
<p>当前有 {craftableCount} 条蓝图可以立即执行。</p>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-note-card">
|
|
||||||
<strong>系统定位</strong>
|
|
||||||
<p>蓝图栈属于中频决策，适合独立面板打开，而不是长期占用主 HUD 面积。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function LogOverlay({ view }: { view: GameView }) {
|
|
||||||
return (
|
|
||||||
<div className="system-overlay">
|
|
||||||
<OverlayHeaderStats view={view} />
|
|
||||||
|
|
||||||
<div className="system-overlay-grid log-overlay-grid">
|
|
||||||
<section className="subpanel overlay-main-panel">
|
|
||||||
<PanelHeader title="Sector Logs" subtitle="完整行动、事件、战斗与资源变化回放" compact />
|
|
||||||
<div className="log-list expanded overlay-list">
|
|
||||||
{view.logs.map((entry) => (
|
|
||||||
<article key={entry.id} className={`log-entry tone-${entry.tone}`}>
|
|
||||||
<span>{entry.minute}m</span>
|
|
||||||
<p>{entry.message}</p>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="overlay-side-stack">
|
|
||||||
<section className="subpanel overlay-side-panel">
|
|
||||||
<PanelHeader title="Log Policy" subtitle="日志系统设计摘要" compact />
|
|
||||||
<div className="overlay-note-stack">
|
|
||||||
<article className="overlay-note-card">
|
|
||||||
<strong>主屏只保留摘要</strong>
|
|
||||||
<p>常驻 HUD 只呈现决策必要信息，完整日志集中在独立面板中查看。</p>
|
|
||||||
</article>
|
|
||||||
<article className="overlay-note-card">
|
|
||||||
<strong>可追溯性</strong>
|
|
||||||
<p>所有时间推进、资源变化、战斗结果与事件分支都需要留下结构化日志。</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function SystemOverlay({
|
export function SystemOverlay({
|
||||||
isWorking,
|
isWorking,
|
||||||
|
|||||||
@@ -57,14 +57,10 @@ export function TopHud({
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div className="top-actions">
|
<div className="top-actions">
|
||||||
<span className="hud-chip safe">{view.header.riskLabel}</span>
|
|
||||||
<span className={`hud-chip ${alertToneClass}`}>
|
<span className={`hud-chip ${alertToneClass}`}>
|
||||||
{dominantAlert ? `${dominantAlert.label} ${dominantAlert.summary}` : '状态稳定'}
|
{dominantAlert ? `${dominantAlert.label} ${dominantAlert.summary}` : '状态稳定'}
|
||||||
</span>
|
</span>
|
||||||
<span className="hud-chip">账号 {accountName}</span>
|
{alertCount ? <span className="hud-chip accent">警报 {alertCount}</span> : null}
|
||||||
<span className={`hud-chip ${alertCount ? 'accent' : ''}`}>
|
|
||||||
{alertCount ? `警报 ${alertCount}` : '链路稳定'}
|
|
||||||
</span>
|
|
||||||
<button className="secondary-button top-action-button" onClick={onLogout} disabled={logoutPending}>
|
<button className="secondary-button top-action-button" onClick={onLogout} disabled={logoutPending}>
|
||||||
<HudIcon name="logout" className="top-action-icon" />
|
<HudIcon name="logout" className="top-action-icon" />
|
||||||
退出
|
退出
|
||||||
|
|||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import type { GameAction, GameView } from '@tinywaste/game-core';
|
||||||
|
import { PanelHeader } from '../../../shared/components/PanelHeader';
|
||||||
|
import { RecipeCard } from '../cards/RecipeCard';
|
||||||
|
import { OverlayHeaderStats } from './OverlayHeaderStats';
|
||||||
|
|
||||||
|
export function BlueprintOverlay({
|
||||||
|
isWorking,
|
||||||
|
onSendAction,
|
||||||
|
view,
|
||||||
|
}: {
|
||||||
|
isWorking: boolean;
|
||||||
|
onSendAction: (action: GameAction) => void;
|
||||||
|
view: GameView;
|
||||||
|
}) {
|
||||||
|
const craftableCount = view.recipes.filter((recipe) => recipe.craftable).length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="system-overlay">
|
||||||
|
<OverlayHeaderStats view={view} />
|
||||||
|
|
||||||
|
<div className="system-overlay-grid blueprint-overlay-grid">
|
||||||
|
<section className="subpanel overlay-main-panel">
|
||||||
|
<PanelHeader title="Blueprint Stack" subtitle="制作配方、缺口与执行入口" compact />
|
||||||
|
<div className="recipe-list overlay-list">
|
||||||
|
{view.recipes.map((recipe) => (
|
||||||
|
<RecipeCard
|
||||||
|
key={recipe.id}
|
||||||
|
busy={isWorking}
|
||||||
|
onCraft={() => onSendAction({ type: 'craft', recipeId: recipe.id })}
|
||||||
|
recipe={recipe}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="overlay-side-stack">
|
||||||
|
<section className="subpanel overlay-side-panel">
|
||||||
|
<PanelHeader title="Crafting State" subtitle="当前蓝图执行态" compact />
|
||||||
|
<div className="overlay-note-stack">
|
||||||
|
<article className="overlay-note-card">
|
||||||
|
<strong>可制作</strong>
|
||||||
|
<p>当前有 {craftableCount} 条蓝图可以立即执行。</p>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-note-card">
|
||||||
|
<strong>系统定位</strong>
|
||||||
|
<p>蓝图栈属于中频决策，适合独立面板打开，而不是长期占用主 HUD 面积。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,125 @@
|
|||||||
|
import type { GameAction, GameView } from '@tinywaste/game-core';
|
||||||
|
import { getLoadoutEntries } from '../../hudModel';
|
||||||
|
import { PanelHeader } from '../../../shared/components/PanelHeader';
|
||||||
|
import { InventoryCard } from '../cards/InventoryCard';
|
||||||
|
import { EmptyState } from '../EmptyState';
|
||||||
|
import { OverlayHeaderStats } from './OverlayHeaderStats';
|
||||||
|
|
||||||
|
export function InventoryOverlay({
|
||||||
|
isWorking,
|
||||||
|
onSendAction,
|
||||||
|
view,
|
||||||
|
}: {
|
||||||
|
isWorking: boolean;
|
||||||
|
onSendAction: (action: GameAction) => void;
|
||||||
|
view: GameView;
|
||||||
|
}) {
|
||||||
|
const loadoutEntries = getLoadoutEntries(view);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="system-overlay">
|
||||||
|
<OverlayHeaderStats view={view} />
|
||||||
|
|
||||||
|
<div className="system-overlay-grid inventory-overlay-grid">
|
||||||
|
<div className="overlay-main-stack">
|
||||||
|
<section className="subpanel overlay-main-panel">
|
||||||
|
<PanelHeader title="Field Bag" subtitle="随身背包，服务当前决策与战斗" compact />
|
||||||
|
<div className="inventory-list overlay-list">
|
||||||
|
{view.player.inventory.map((item) => (
|
||||||
|
<InventoryCard
|
||||||
|
key={item.itemId}
|
||||||
|
busy={isWorking}
|
||||||
|
extraActions={
|
||||||
|
view.player.storageAccessible && !item.equipped
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
label: '存入仓储',
|
||||||
|
onClick: () =>
|
||||||
|
onSendAction({ type: 'stash-item', itemId: item.itemId, count: item.count }),
|
||||||
|
tone: 'secondary',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
item={item}
|
||||||
|
onEquip={() => onSendAction({ type: 'equip-item', itemId: item.itemId })}
|
||||||
|
onUnequip={() => onSendAction({ type: 'unequip-item', slot: item.equipSlot! })}
|
||||||
|
onUse={() => onSendAction({ type: 'use-item', itemId: item.itemId })}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="subpanel overlay-main-panel">
|
||||||
|
<PanelHeader
|
||||||
|
title="Shelter Storage"
|
||||||
|
subtitle={
|
||||||
|
view.player.storageAccessible
|
||||||
|
? `避难所仓储 ${view.player.storageUsage}/${view.player.storageCapacity}`
|
||||||
|
: '当前不在避难所，仓储已锁定'
|
||||||
|
}
|
||||||
|
compact
|
||||||
|
/>
|
||||||
|
{view.player.storageAccessible ? (
|
||||||
|
view.player.storage.length ? (
|
||||||
|
<div className="inventory-list overlay-list">
|
||||||
|
{view.player.storage.map((item) => (
|
||||||
|
<InventoryCard
|
||||||
|
key={`storage-${item.itemId}`}
|
||||||
|
busy={isWorking}
|
||||||
|
extraActions={[
|
||||||
|
{
|
||||||
|
label: '取回背包',
|
||||||
|
onClick: () =>
|
||||||
|
onSendAction({ type: 'retrieve-item', itemId: item.itemId, count: item.count }),
|
||||||
|
tone: 'primary',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
footerText={`${item.type} · 体积 ${item.volume} · 避难所仓储`}
|
||||||
|
item={item}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<EmptyState text="仓储目前是空的。把低频物资和备用装备放回去，可以减轻出行背包压力。" />
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<EmptyState text="只有回到 Shelter-7 后，才能访问避难所仓储和长期积累的物资。" />
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="overlay-side-stack">
|
||||||
|
<section className="subpanel overlay-side-panel">
|
||||||
|
<PanelHeader title="Loadout Snapshot" subtitle="当前装备位快照" compact />
|
||||||
|
<div className="overlay-loadout-stack">
|
||||||
|
{[...loadoutEntries.left, ...loadoutEntries.right].map((entry) => (
|
||||||
|
<article key={entry.id} className={`overlay-loadout-row ${entry.isEquipped ? 'equipped' : ''}`}>
|
||||||
|
<div>
|
||||||
|
<span>{entry.label}</span>
|
||||||
|
<strong>{entry.title}</strong>
|
||||||
|
</div>
|
||||||
|
<small>{entry.subtitle}</small>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="subpanel overlay-side-panel">
|
||||||
|
<PanelHeader title="Storage Rules" subtitle="随身背包与基地仓储的分层规则" compact />
|
||||||
|
<div className="overlay-note-stack">
|
||||||
|
<article className="overlay-note-card">
|
||||||
|
<strong>容量模型</strong>
|
||||||
|
<p>随身背包负责当前回合决策，避难所仓储负责长线囤积，二者都受体积上限约束。</p>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-note-card">
|
||||||
|
<strong>使用优先级</strong>
|
||||||
|
<p>饮水、药物和战斗工具留在身上；备用护甲、净水和材料可以先回收到仓储层。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import type { GameView } from '@tinywaste/game-core';
|
||||||
|
import { PanelHeader } from '../../../shared/components/PanelHeader';
|
||||||
|
import { OverlayHeaderStats } from './OverlayHeaderStats';
|
||||||
|
|
||||||
|
export function LogOverlay({ view }: { view: GameView }) {
|
||||||
|
return (
|
||||||
|
<div className="system-overlay">
|
||||||
|
<OverlayHeaderStats view={view} />
|
||||||
|
|
||||||
|
<div className="system-overlay-grid log-overlay-grid">
|
||||||
|
<section className="subpanel overlay-main-panel">
|
||||||
|
<PanelHeader title="Sector Logs" subtitle="完整行动、事件、战斗与资源变化回放" compact />
|
||||||
|
<div className="log-list expanded overlay-list">
|
||||||
|
{view.logs.map((entry) => (
|
||||||
|
<article key={entry.id} className={`log-entry tone-${entry.tone}`}>
|
||||||
|
<span>{entry.minute}m</span>
|
||||||
|
<p>{entry.message}</p>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="overlay-side-stack">
|
||||||
|
<section className="subpanel overlay-side-panel">
|
||||||
|
<PanelHeader title="Log Policy" subtitle="日志系统设计摘要" compact />
|
||||||
|
<div className="overlay-note-stack">
|
||||||
|
<article className="overlay-note-card">
|
||||||
|
<strong>主屏只保留摘要</strong>
|
||||||
|
<p>常驻 HUD 只呈现决策必要信息，完整日志集中在独立面板中查看。</p>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-note-card">
|
||||||
|
<strong>可追溯性</strong>
|
||||||
|
<p>所有时间推进、资源变化、战斗结果与事件分支都需要留下结构化日志。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
import type { GameAction, GameView } from '@tinywaste/game-core';
|
||||||
|
import { PanelHeader } from '../../../shared/components/PanelHeader';
|
||||||
|
import { QuestCard } from '../cards/QuestCard';
|
||||||
|
import { EmptyState } from '../EmptyState';
|
||||||
|
import { OverlayHeaderStats } from './OverlayHeaderStats';
|
||||||
|
|
||||||
|
export function MissionOverlay({
|
||||||
|
isWorking,
|
||||||
|
onSendAction,
|
||||||
|
view,
|
||||||
|
}: {
|
||||||
|
isWorking: boolean;
|
||||||
|
onSendAction: (action: GameAction) => void;
|
||||||
|
view: GameView;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="system-overlay">
|
||||||
|
<OverlayHeaderStats view={view} />
|
||||||
|
|
||||||
|
<div className="system-overlay-grid mission-overlay-grid">
|
||||||
|
<section className="subpanel overlay-main-panel">
|
||||||
|
<PanelHeader title="Mission Threads" subtitle="主线、支线和当前推进步骤" compact />
|
||||||
|
<div className="quest-list overlay-list">
|
||||||
|
{view.quests.length ? (
|
||||||
|
view.quests.map((quest) => <QuestCard key={quest.id} quest={quest} />)
|
||||||
|
) : (
|
||||||
|
<EmptyState text="当前没有任务线，继续探索可以触发新的委托。" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="overlay-side-stack">
|
||||||
|
<section className="subpanel overlay-side-panel">
|
||||||
|
<PanelHeader title="Recovery Actions" subtitle="以游戏面板方式触发休整" compact />
|
||||||
|
<div className="rest-actions">
|
||||||
|
{[30, 60, 120].map((minutes) => (
|
||||||
|
<button
|
||||||
|
key={minutes}
|
||||||
|
className="rest-button"
|
||||||
|
disabled={isWorking}
|
||||||
|
onClick={() => onSendAction({ type: 'rest', minutes })}
|
||||||
|
>
|
||||||
|
休息 {minutes} 分钟
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="subpanel overlay-side-panel">
|
||||||
|
<PanelHeader title="Mission Logic" subtitle="任务系统设计摘要" compact />
|
||||||
|
<div className="overlay-note-stack">
|
||||||
|
<article className="overlay-note-card">
|
||||||
|
<strong>生命周期</strong>
|
||||||
|
<p>任务分为 locked、active、completed，推进由服务端根据状态、地点、物品与标记自动结算。</p>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-note-card">
|
||||||
|
<strong>引导方式</strong>
|
||||||
|
<p>新手引导应尽量通过任务链驱动，而不是频繁弹出说明窗口。</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import type { GameView } from '@tinywaste/game-core';
|
||||||
|
import { getActiveQuestCount, getSupplyCounts } from '../../hudModel';
|
||||||
|
|
||||||
|
export function OverlayHeaderStats({ view }: { view: GameView }) {
|
||||||
|
const supplyCounts = getSupplyCounts(view);
|
||||||
|
const activeQuestCount = getActiveQuestCount(view);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="overlay-summary-grid">
|
||||||
|
<article className="overlay-summary-card">
|
||||||
|
<span>容量</span>
|
||||||
|
<strong>
|
||||||
|
{view.player.inventoryUsage}/{view.player.inventoryCapacity}
|
||||||
|
</strong>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-summary-card">
|
||||||
|
<span>水</span>
|
||||||
|
<strong>{supplyCounts.water}</strong>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-summary-card">
|
||||||
|
<span>食物</span>
|
||||||
|
<strong>{supplyCounts.food}</strong>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-summary-card">
|
||||||
|
<span>药品</span>
|
||||||
|
<strong>{supplyCounts.medicine}</strong>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-summary-card">
|
||||||
|
<span>任务</span>
|
||||||
|
<strong>{activeQuestCount}</strong>
|
||||||
|
</article>
|
||||||
|
<article className="overlay-summary-card">
|
||||||
|
<span>仓储</span>
|
||||||
|
<strong>
|
||||||
|
{view.player.storageUsage}/{view.player.storageCapacity}
|
||||||
|
</strong>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,346 +1,50 @@
|
|||||||
import type { EdgeView, GameView, InventoryViewEntry, QuestView } from '@tinywaste/game-core';
|
/**
|
||||||
import { getEquipmentArt, getItemArt, getStatusArt } from './uiAssets';
|
* hudModel — Barrel re-export for backward compatibility.
|
||||||
|
*
|
||||||
|
* The actual implementations live in:
|
||||||
|
* models/routeModel.ts — map, routes, atmosphere
|
||||||
|
* models/equipmentModel.ts — loadout, equipment slots
|
||||||
|
* models/survivalModel.ts — stats, alerts, metrics, supplies
|
||||||
|
* models/questModel.ts — quests, objectives
|
||||||
|
* models/utils.ts — time, logs, quick-use, attributes
|
||||||
|
*/
|
||||||
|
|
||||||
export interface EquipmentPreviewEntry {
|
export type { EquipmentPreviewEntry } from './models/equipmentModel';
|
||||||
id: string;
|
|
||||||
label: string;
|
|
||||||
title: string;
|
|
||||||
subtitle: string;
|
|
||||||
art?: string;
|
|
||||||
isEquipped: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Readiness weights for each survival stat (must sum to 100) */
|
export {
|
||||||
const READINESS_WEIGHTS = {
|
edgeDestination,
|
||||||
life: 34,
|
getCurrentPlace,
|
||||||
energy: 28,
|
getPlaceAtmosphere,
|
||||||
thirst: 20,
|
getVisibleRoutes,
|
||||||
hunger: 18,
|
getRouteRiskTier,
|
||||||
} as const;
|
getRiskDots,
|
||||||
|
} from './models/routeModel';
|
||||||
|
|
||||||
/** Readiness thresholds for tone classification */
|
export {
|
||||||
const READINESS_TONE_THRESHOLD_GOOD = 74;
|
getKitItem,
|
||||||
const READINESS_TONE_THRESHOLD_WARN = 48;
|
getLoadoutEntries,
|
||||||
|
} from './models/equipmentModel';
|
||||||
|
|
||||||
/** Risk tier boundaries */
|
export {
|
||||||
const RISK_LOW_MAX = 0.35;
|
getAlertCount,
|
||||||
const RISK_MID_MAX = 0.65;
|
getDominantAlert,
|
||||||
|
getStatusEffects,
|
||||||
|
getExpeditionStatus,
|
||||||
|
getSurvivorMetrics,
|
||||||
|
getSupplyCounts,
|
||||||
|
} from './models/survivalModel';
|
||||||
|
|
||||||
/** Survivor metric formula constants */
|
export {
|
||||||
const PROTECTION_BASE_ARMOR = 34;
|
getActiveQuestCount,
|
||||||
const PROTECTION_BASE_UNARMORED = 12;
|
getObjectiveRows,
|
||||||
const PROTECTION_STR_FACTOR = 5;
|
getPrimaryObjective,
|
||||||
const PROTECTION_LIFE_FACTOR = 30;
|
getQuestProgress,
|
||||||
|
} from './models/questModel';
|
||||||
|
|
||||||
const STEALTH_AGI_FACTOR = 8;
|
export {
|
||||||
const STEALTH_PER_FACTOR = 5;
|
getTimeLabels,
|
||||||
const STEALTH_SANITY_FACTOR = 20;
|
getLatestLog,
|
||||||
|
getQuickUseItems,
|
||||||
const MOBILITY_AGI_FACTOR = 7;
|
getAttributeRows,
|
||||||
const MOBILITY_ENERGY_FACTOR = 42;
|
getInventoryStateLabel,
|
||||||
const MOBILITY_LOAD_PENALTY = 18;
|
} from './models/utils';
|
||||||
|
|
||||||
const PLACE_ATMOSPHERE: Record<
|
|
||||||
string,
|
|
||||||
{
|
|
||||||
weather: string;
|
|
||||||
temperature: string;
|
|
||||||
wind: string;
|
|
||||||
}
|
|
||||||
> = {
|
|
||||||
home: { weather: 'Light rain', temperature: '18°C', wind: 'Wind 12 km/h' },
|
|
||||||
roadside: { weather: 'Cloud break', temperature: '16°C', wind: 'Wind 18 km/h' },
|
|
||||||
old_store: { weather: 'Dust drift', temperature: '20°C', wind: 'Wind 9 km/h' },
|
|
||||||
village_market: { weather: 'Dry overcast', temperature: '22°C', wind: 'Wind 7 km/h' },
|
|
||||||
rain_farm: { weather: 'Wet fog', temperature: '14°C', wind: 'Wind 10 km/h' },
|
|
||||||
city_edge: { weather: 'Soot haze', temperature: '19°C', wind: 'Wind 15 km/h' },
|
|
||||||
subway_entrance: { weather: 'Cold draft', temperature: '11°C', wind: 'Wind 6 km/h' },
|
|
||||||
sewer: { weather: 'Toxic mist', temperature: '13°C', wind: 'Air still' },
|
|
||||||
vault_gate: { weather: 'Ash fall', temperature: '9°C', wind: 'Wind 4 km/h' },
|
|
||||||
};
|
|
||||||
|
|
||||||
export function edgeDestination(view: GameView, edge: EdgeView) {
|
|
||||||
return view.map.places.find((place) => place.id === edge.to);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getTimeLabels(timeLabel: string) {
|
|
||||||
const timeSegments = timeLabel.split('·').map((part) => part.trim());
|
|
||||||
return {
|
|
||||||
dayLabel: timeSegments[0] ?? 'Day 1',
|
|
||||||
clockLabel: timeSegments[1] ?? timeLabel,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getActiveQuestCount(view: GameView) {
|
|
||||||
return view.quests.filter((quest) => quest.state === 'active').length;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getAlertCount(view: GameView) {
|
|
||||||
return Number(Boolean(view.pendingEvent)) + Number(Boolean(view.combat));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getDominantAlert(view: GameView) {
|
|
||||||
return view.survival.alerts[0] ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getCurrentPlace(view: GameView) {
|
|
||||||
return view.map.places.find((place) => place.current) ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getPlaceAtmosphere(placeId: string) {
|
|
||||||
return PLACE_ATMOSPHERE[placeId] ?? { weather: 'Dry static', temperature: '17°C', wind: 'Wind 10 km/h' };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getLatestLog(view: GameView) {
|
|
||||||
return view.logs[0] ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getVisibleRoutes(view: GameView, limit = 3) {
|
|
||||||
return view.map.edges.slice(0, limit);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getQuickUseItems(view: GameView, limit = 6) {
|
|
||||||
const priority = {
|
|
||||||
water: 0,
|
|
||||||
food: 1,
|
|
||||||
medicine: 2,
|
|
||||||
tool: 3,
|
|
||||||
material: 4,
|
|
||||||
weapon: 5,
|
|
||||||
armor: 6,
|
|
||||||
ammo: 7,
|
|
||||||
quest: 8,
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
return [...view.player.inventory]
|
|
||||||
.filter((item) => item.canUse)
|
|
||||||
.sort((left, right) => {
|
|
||||||
const priorityDelta = priority[left.type] - priority[right.type];
|
|
||||||
if (priorityDelta !== 0) return priorityDelta;
|
|
||||||
return right.count - left.count;
|
|
||||||
})
|
|
||||||
.slice(0, limit);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getObjectiveRows(view: GameView) {
|
|
||||||
return view.quests
|
|
||||||
.filter((quest) => quest.state === 'active' || quest.state === 'completed')
|
|
||||||
.map((quest) => {
|
|
||||||
const doneCount = quest.steps.filter((step) => step.done).length;
|
|
||||||
const nextStep = quest.steps.find((step) => !step.done)?.text ?? quest.steps.at(-1)?.text ?? '待机';
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: quest.id,
|
|
||||||
title: quest.title,
|
|
||||||
detail: nextStep,
|
|
||||||
progress: `${doneCount}/${quest.steps.length}`,
|
|
||||||
done: quest.state === 'completed',
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getPrimaryObjective(view: GameView) {
|
|
||||||
return getObjectiveRows(view)[0] ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getAttributeRows(view: GameView) {
|
|
||||||
const { attributes } = view.player;
|
|
||||||
|
|
||||||
return [
|
|
||||||
{ label: 'STR', name: '力量', value: attributes.str },
|
|
||||||
{ label: 'AGI', name: '敏捷', value: attributes.agi },
|
|
||||||
{ label: 'INT', name: '智力', value: attributes.int },
|
|
||||||
{ label: 'PER', name: '感知', value: attributes.per },
|
|
||||||
{ label: 'LCK', name: '幸运', value: attributes.luck },
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getStatusEffects(view: GameView) {
|
|
||||||
const effects = view.survival.alerts.map((entry) => ({
|
|
||||||
id: entry.stat,
|
|
||||||
label: `${entry.label} · ${entry.summary}`,
|
|
||||||
detail: entry.impact,
|
|
||||||
recovery: entry.recovery,
|
|
||||||
art: getStatusArt(entry.stat),
|
|
||||||
tone:
|
|
||||||
entry.tier === 'strained' ? ('warn' as const) : entry.tier === 'safe' ? ('good' as const) : ('danger' as const),
|
|
||||||
}));
|
|
||||||
|
|
||||||
if (!effects.length) {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
id: 'stable',
|
|
||||||
label: '稳定',
|
|
||||||
detail: '当前幸存者状态平稳，可以继续规划下一步行动。',
|
|
||||||
recovery: '保持补给循环与节奏即可。',
|
|
||||||
art: getStatusArt('life'),
|
|
||||||
tone: 'good' as const,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
return effects.slice(0, 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getExpeditionStatus(view: GameView) {
|
|
||||||
const { stats, maxStats } = view.player;
|
|
||||||
const readiness = Math.round(
|
|
||||||
(stats.life / maxStats.life) * READINESS_WEIGHTS.life +
|
|
||||||
(stats.energy / maxStats.energy) * READINESS_WEIGHTS.energy +
|
|
||||||
(stats.thirst / maxStats.thirst) * READINESS_WEIGHTS.thirst +
|
|
||||||
(stats.hunger / maxStats.hunger) * READINESS_WEIGHTS.hunger,
|
|
||||||
);
|
|
||||||
const loadPercent = Math.round((view.player.inventoryUsage / view.player.inventoryCapacity) * 100);
|
|
||||||
const threatCount = view.survival.alerts.length;
|
|
||||||
|
|
||||||
return {
|
|
||||||
readiness,
|
|
||||||
loadPercent,
|
|
||||||
threatCount,
|
|
||||||
tone: readiness >= READINESS_TONE_THRESHOLD_GOOD && threatCount === 0 ? 'good' : readiness >= READINESS_TONE_THRESHOLD_WARN ? 'warn' : 'danger',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getSurvivorMetrics(view: GameView) {
|
|
||||||
const protection = Math.min(
|
|
||||||
100,
|
|
||||||
Math.round(
|
|
||||||
(view.player.equipment.body ? PROTECTION_BASE_ARMOR : PROTECTION_BASE_UNARMORED) +
|
|
||||||
view.player.attributes.str * PROTECTION_STR_FACTOR +
|
|
||||||
(view.player.stats.life / view.player.maxStats.life) * PROTECTION_LIFE_FACTOR,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
const stealth = Math.min(
|
|
||||||
100,
|
|
||||||
Math.round(
|
|
||||||
view.player.attributes.agi * STEALTH_AGI_FACTOR +
|
|
||||||
view.player.attributes.per * STEALTH_PER_FACTOR +
|
|
||||||
(view.player.stats.sanity / view.player.maxStats.sanity) * STEALTH_SANITY_FACTOR,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
const mobility = Math.max(
|
|
||||||
0,
|
|
||||||
Math.min(
|
|
||||||
100,
|
|
||||||
Math.round(
|
|
||||||
view.player.attributes.agi * MOBILITY_AGI_FACTOR +
|
|
||||||
(view.player.stats.energy / view.player.maxStats.energy) * MOBILITY_ENERGY_FACTOR -
|
|
||||||
(view.player.inventoryUsage / view.player.inventoryCapacity) * MOBILITY_LOAD_PENALTY,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
return [
|
|
||||||
{ id: 'protection', label: '防护', value: protection },
|
|
||||||
{ id: 'stealth', label: '潜行', value: stealth },
|
|
||||||
{ id: 'mobility', label: '机动', value: mobility },
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getSupplyCounts(view: GameView) {
|
|
||||||
const counts = {
|
|
||||||
water: 0,
|
|
||||||
food: 0,
|
|
||||||
medicine: 0,
|
|
||||||
material: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
for (const item of view.player.inventory) {
|
|
||||||
if (item.type === 'water') counts.water += item.count;
|
|
||||||
if (item.type === 'food') counts.food += item.count;
|
|
||||||
if (item.type === 'medicine') counts.medicine += item.count;
|
|
||||||
if (item.type === 'material') counts.material += item.count;
|
|
||||||
}
|
|
||||||
|
|
||||||
return counts;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getKitItem(view: GameView) {
|
|
||||||
return view.player.inventory.find((item) => item.type === 'medicine' || item.type === 'water') ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getLoadoutEntries(view: GameView) {
|
|
||||||
const inventoryById = new Map(view.player.inventory.map((item) => [item.itemId, item]));
|
|
||||||
const weaponItem = view.player.equipment.weapon ? inventoryById.get(view.player.equipment.weapon) : undefined;
|
|
||||||
const bodyItem = view.player.equipment.body ? inventoryById.get(view.player.equipment.body) : undefined;
|
|
||||||
const toolItem = view.player.equipment.tool ? inventoryById.get(view.player.equipment.tool) : undefined;
|
|
||||||
const kitItem = getKitItem(view);
|
|
||||||
|
|
||||||
const left: EquipmentPreviewEntry[] = [
|
|
||||||
{
|
|
||||||
id: 'head',
|
|
||||||
label: 'Head',
|
|
||||||
title: '遮面兜帽',
|
|
||||||
subtitle: '造型预置位',
|
|
||||||
art: getEquipmentArt(undefined, 'head'),
|
|
||||||
isEquipped: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'body',
|
|
||||||
label: 'Body',
|
|
||||||
title: bodyItem?.name ?? '未装备护甲',
|
|
||||||
subtitle: bodyItem ? '已挂载在躯干槽' : '建议保留一件抗风装备',
|
|
||||||
art: getEquipmentArt(bodyItem?.itemId, 'body'),
|
|
||||||
isEquipped: Boolean(bodyItem),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'back',
|
|
||||||
label: 'Back',
|
|
||||||
title: '远行背包',
|
|
||||||
subtitle: `容量 ${view.player.inventoryUsage}/${view.player.inventoryCapacity}`,
|
|
||||||
art: getEquipmentArt(undefined, 'back'),
|
|
||||||
isEquipped: true,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const right: EquipmentPreviewEntry[] = [
|
|
||||||
{
|
|
||||||
id: 'weapon',
|
|
||||||
label: 'Weapon',
|
|
||||||
title: weaponItem?.name ?? '未装备主武器',
|
|
||||||
subtitle: weaponItem ? '武器槽在线' : '可通过蓝图制作远程装备',
|
|
||||||
art: getEquipmentArt(weaponItem?.itemId, 'weapon'),
|
|
||||||
isEquipped: Boolean(weaponItem),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'tool',
|
|
||||||
label: 'Tool',
|
|
||||||
title: toolItem?.name ?? '未挂载工具',
|
|
||||||
subtitle: toolItem ? '工具槽在线' : '撬棍可作为早期万能工具',
|
|
||||||
art: getEquipmentArt(toolItem?.itemId, 'tool'),
|
|
||||||
isEquipped: Boolean(toolItem),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'kit',
|
|
||||||
label: 'Kit',
|
|
||||||
title: kitItem?.name ?? '未配置急救包',
|
|
||||||
subtitle: kitItem ? `携带 ${kitItem.count} 件应急补给` : '建议随身携带水或药物',
|
|
||||||
art: kitItem ? getItemArt(kitItem.itemId, kitItem.type) : getEquipmentArt(undefined, 'kit'),
|
|
||||||
isEquipped: Boolean(kitItem),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return { left, right };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRouteRiskTier(risk: number) {
|
|
||||||
if (risk <= RISK_LOW_MAX) return { label: '低风险', tone: 'safe' as const };
|
|
||||||
if (risk <= RISK_MID_MAX) return { label: '中风险', tone: 'warn' as const };
|
|
||||||
return { label: '高风险', tone: 'danger' as const };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRiskDots(risk: number) {
|
|
||||||
const lit = Math.max(1, Math.min(6, Math.round(risk * 6)));
|
|
||||||
return Array.from({ length: 6 }, (_, index) => index < lit);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getInventoryStateLabel(item: InventoryViewEntry) {
|
|
||||||
if (item.equipped) return '已装备';
|
|
||||||
if (item.canUse) return '可立即使用';
|
|
||||||
if (item.equipSlot) return '可挂载';
|
|
||||||
return '物资储备';
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getQuestProgress(quest: QuestView) {
|
|
||||||
return `${quest.steps.filter((step) => step.done).length}/${quest.steps.length}`;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,79 @@
|
|||||||
|
import type { GameView } from '@tinywaste/game-core';
|
||||||
|
import { getEquipmentArt, getItemArt } from '../uiAssets';
|
||||||
|
|
||||||
|
export interface EquipmentPreviewEntry {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
art?: string;
|
||||||
|
isEquipped: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getKitItem(view: GameView) {
|
||||||
|
return view.player.inventory.find((item) => item.type === 'medicine' || item.type === 'water') ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getLoadoutEntries(view: GameView) {
|
||||||
|
const inventoryById = new Map(view.player.inventory.map((item) => [item.itemId, item]));
|
||||||
|
const weaponItem = view.player.equipment.weapon ? inventoryById.get(view.player.equipment.weapon) : undefined;
|
||||||
|
const bodyItem = view.player.equipment.body ? inventoryById.get(view.player.equipment.body) : undefined;
|
||||||
|
const toolItem = view.player.equipment.tool ? inventoryById.get(view.player.equipment.tool) : undefined;
|
||||||
|
const kitItem = getKitItem(view);
|
||||||
|
|
||||||
|
const left: EquipmentPreviewEntry[] = [
|
||||||
|
{
|
||||||
|
id: 'head',
|
||||||
|
label: 'Head',
|
||||||
|
title: '遮面兜帽',
|
||||||
|
subtitle: '造型预置位',
|
||||||
|
art: getEquipmentArt(undefined, 'head'),
|
||||||
|
isEquipped: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'body',
|
||||||
|
label: 'Body',
|
||||||
|
title: bodyItem?.name ?? '未装备护甲',
|
||||||
|
subtitle: bodyItem ? '已挂载在躯干槽' : '建议保留一件抗风装备',
|
||||||
|
art: getEquipmentArt(bodyItem?.itemId, 'body'),
|
||||||
|
isEquipped: Boolean(bodyItem),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'back',
|
||||||
|
label: 'Back',
|
||||||
|
title: '远行背包',
|
||||||
|
subtitle: `容量 ${view.player.inventoryUsage}/${view.player.inventoryCapacity}`,
|
||||||
|
art: getEquipmentArt(undefined, 'back'),
|
||||||
|
isEquipped: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const right: EquipmentPreviewEntry[] = [
|
||||||
|
{
|
||||||
|
id: 'weapon',
|
||||||
|
label: 'Weapon',
|
||||||
|
title: weaponItem?.name ?? '未装备主武器',
|
||||||
|
subtitle: weaponItem ? '武器槽在线' : '可通过蓝图制作远程装备',
|
||||||
|
art: getEquipmentArt(weaponItem?.itemId, 'weapon'),
|
||||||
|
isEquipped: Boolean(weaponItem),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'tool',
|
||||||
|
label: 'Tool',
|
||||||
|
title: toolItem?.name ?? '未挂载工具',
|
||||||
|
subtitle: toolItem ? '工具槽在线' : '撬棍可作为早期万能工具',
|
||||||
|
art: getEquipmentArt(toolItem?.itemId, 'tool'),
|
||||||
|
isEquipped: Boolean(toolItem),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'kit',
|
||||||
|
label: 'Kit',
|
||||||
|
title: kitItem?.name ?? '未配置急救包',
|
||||||
|
subtitle: kitItem ? `携带 ${kitItem.count} 件应急补给` : '建议随身携带水或药物',
|
||||||
|
art: kitItem ? getItemArt(kitItem.itemId, kitItem.type) : getEquipmentArt(undefined, 'kit'),
|
||||||
|
isEquipped: Boolean(kitItem),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return { left, right };
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import type { GameView, QuestView } from '@tinywaste/game-core';
|
||||||
|
|
||||||
|
export function getActiveQuestCount(view: GameView) {
|
||||||
|
return view.quests.filter((quest) => quest.state === 'active').length;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getObjectiveRows(view: GameView) {
|
||||||
|
return view.quests
|
||||||
|
.filter((quest) => quest.state === 'active' || quest.state === 'completed')
|
||||||
|
.map((quest) => {
|
||||||
|
const doneCount = quest.steps.filter((step) => step.done).length;
|
||||||
|
const nextStep = quest.steps.find((step) => !step.done)?.text ?? quest.steps.at(-1)?.text ?? '待机';
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: quest.id,
|
||||||
|
title: quest.title,
|
||||||
|
detail: nextStep,
|
||||||
|
progress: `${doneCount}/${quest.steps.length}`,
|
||||||
|
done: quest.state === 'completed',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getPrimaryObjective(view: GameView) {
|
||||||
|
return getObjectiveRows(view)[0] ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getQuestProgress(quest: QuestView) {
|
||||||
|
return `${quest.steps.filter((step) => step.done).length}/${quest.steps.length}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
import type { EdgeView, GameView } from '@tinywaste/game-core';
|
||||||
|
|
||||||
|
/** Risk tier boundaries */
|
||||||
|
const RISK_LOW_MAX = 0.35;
|
||||||
|
const RISK_MID_MAX = 0.65;
|
||||||
|
|
||||||
|
const PLACE_ATMOSPHERE: Record<
|
||||||
|
string,
|
||||||
|
{
|
||||||
|
weather: string;
|
||||||
|
temperature: string;
|
||||||
|
wind: string;
|
||||||
|
}
|
||||||
|
> = {
|
||||||
|
home: { weather: 'Light rain', temperature: '18°C', wind: 'Wind 12 km/h' },
|
||||||
|
roadside: { weather: 'Cloud break', temperature: '16°C', wind: 'Wind 18 km/h' },
|
||||||
|
old_store: { weather: 'Dust drift', temperature: '20°C', wind: 'Wind 9 km/h' },
|
||||||
|
village_market: { weather: 'Dry overcast', temperature: '22°C', wind: 'Wind 7 km/h' },
|
||||||
|
rain_farm: { weather: 'Wet fog', temperature: '14°C', wind: 'Wind 10 km/h' },
|
||||||
|
city_edge: { weather: 'Soot haze', temperature: '19°C', wind: 'Wind 15 km/h' },
|
||||||
|
subway_entrance: { weather: 'Cold draft', temperature: '11°C', wind: 'Wind 6 km/h' },
|
||||||
|
sewer: { weather: 'Toxic mist', temperature: '13°C', wind: 'Air still' },
|
||||||
|
vault_gate: { weather: 'Ash fall', temperature: '9°C', wind: 'Wind 4 km/h' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export function edgeDestination(view: GameView, edge: EdgeView) {
|
||||||
|
return view.map.places.find((place) => place.id === edge.to);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCurrentPlace(view: GameView) {
|
||||||
|
return view.map.places.find((place) => place.current) ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getPlaceAtmosphere(placeId: string) {
|
||||||
|
return PLACE_ATMOSPHERE[placeId] ?? { weather: 'Dry static', temperature: '17°C', wind: 'Wind 10 km/h' };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getVisibleRoutes(view: GameView, limit = 3) {
|
||||||
|
return view.map.edges.slice(0, limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getRouteRiskTier(risk: number) {
|
||||||
|
if (risk <= RISK_LOW_MAX) return { label: '低风险', tone: 'safe' as const };
|
||||||
|
if (risk <= RISK_MID_MAX) return { label: '中风险', tone: 'warn' as const };
|
||||||
|
return { label: '高风险', tone: 'danger' as const };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getRiskDots(risk: number) {
|
||||||
|
const lit = Math.max(1, Math.min(6, Math.round(risk * 6)));
|
||||||
|
return Array.from({ length: 6 }, (_, index) => index < lit);
|
||||||
|
}
|
||||||
@@ -0,0 +1,136 @@
|
|||||||
|
import type { GameView } from '@tinywaste/game-core';
|
||||||
|
import { getStatusArt } from '../uiAssets';
|
||||||
|
|
||||||
|
/** Readiness weights for each survival stat (must sum to 100) */
|
||||||
|
const READINESS_WEIGHTS = {
|
||||||
|
life: 34,
|
||||||
|
energy: 28,
|
||||||
|
thirst: 20,
|
||||||
|
hunger: 18,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
/** Readiness thresholds for tone classification */
|
||||||
|
const READINESS_TONE_THRESHOLD_GOOD = 74;
|
||||||
|
const READINESS_TONE_THRESHOLD_WARN = 48;
|
||||||
|
|
||||||
|
/** Survivor metric formula constants */
|
||||||
|
const PROTECTION_BASE_ARMOR = 34;
|
||||||
|
const PROTECTION_BASE_UNARMORED = 12;
|
||||||
|
const PROTECTION_STR_FACTOR = 5;
|
||||||
|
const PROTECTION_LIFE_FACTOR = 30;
|
||||||
|
|
||||||
|
const STEALTH_AGI_FACTOR = 8;
|
||||||
|
const STEALTH_PER_FACTOR = 5;
|
||||||
|
const STEALTH_SANITY_FACTOR = 20;
|
||||||
|
|
||||||
|
const MOBILITY_AGI_FACTOR = 7;
|
||||||
|
const MOBILITY_ENERGY_FACTOR = 42;
|
||||||
|
const MOBILITY_LOAD_PENALTY = 18;
|
||||||
|
|
||||||
|
export function getAlertCount(view: GameView) {
|
||||||
|
return Number(Boolean(view.pendingEvent)) + Number(Boolean(view.combat));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDominantAlert(view: GameView) {
|
||||||
|
return view.survival.alerts[0] ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getStatusEffects(view: GameView) {
|
||||||
|
const effects = view.survival.alerts.map((entry) => ({
|
||||||
|
id: entry.stat,
|
||||||
|
label: `${entry.label} · ${entry.summary}`,
|
||||||
|
detail: entry.impact,
|
||||||
|
recovery: entry.recovery,
|
||||||
|
art: getStatusArt(entry.stat),
|
||||||
|
tone:
|
||||||
|
entry.tier === 'strained' ? ('warn' as const) : entry.tier === 'safe' ? ('good' as const) : ('danger' as const),
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (!effects.length) {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
id: 'stable',
|
||||||
|
label: '稳定',
|
||||||
|
detail: '当前幸存者状态平稳，可以继续规划下一步行动。',
|
||||||
|
recovery: '保持补给循环与节奏即可。',
|
||||||
|
art: getStatusArt('life'),
|
||||||
|
tone: 'good' as const,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return effects.slice(0, 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getExpeditionStatus(view: GameView) {
|
||||||
|
const { stats, maxStats } = view.player;
|
||||||
|
const readiness = Math.round(
|
||||||
|
(stats.life / maxStats.life) * READINESS_WEIGHTS.life +
|
||||||
|
(stats.energy / maxStats.energy) * READINESS_WEIGHTS.energy +
|
||||||
|
(stats.thirst / maxStats.thirst) * READINESS_WEIGHTS.thirst +
|
||||||
|
(stats.hunger / maxStats.hunger) * READINESS_WEIGHTS.hunger,
|
||||||
|
);
|
||||||
|
const loadPercent = Math.round((view.player.inventoryUsage / view.player.inventoryCapacity) * 100);
|
||||||
|
const threatCount = view.survival.alerts.length;
|
||||||
|
|
||||||
|
return {
|
||||||
|
readiness,
|
||||||
|
loadPercent,
|
||||||
|
threatCount,
|
||||||
|
tone: readiness >= READINESS_TONE_THRESHOLD_GOOD && threatCount === 0 ? 'good' : readiness >= READINESS_TONE_THRESHOLD_WARN ? 'warn' : 'danger',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSurvivorMetrics(view: GameView) {
|
||||||
|
const protection = Math.min(
|
||||||
|
100,
|
||||||
|
Math.round(
|
||||||
|
(view.player.equipment.body ? PROTECTION_BASE_ARMOR : PROTECTION_BASE_UNARMORED) +
|
||||||
|
view.player.attributes.str * PROTECTION_STR_FACTOR +
|
||||||
|
(view.player.stats.life / view.player.maxStats.life) * PROTECTION_LIFE_FACTOR,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
const stealth = Math.min(
|
||||||
|
100,
|
||||||
|
Math.round(
|
||||||
|
view.player.attributes.agi * STEALTH_AGI_FACTOR +
|
||||||
|
view.player.attributes.per * STEALTH_PER_FACTOR +
|
||||||
|
(view.player.stats.sanity / view.player.maxStats.sanity) * STEALTH_SANITY_FACTOR,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
const mobility = Math.max(
|
||||||
|
0,
|
||||||
|
Math.min(
|
||||||
|
100,
|
||||||
|
Math.round(
|
||||||
|
view.player.attributes.agi * MOBILITY_AGI_FACTOR +
|
||||||
|
(view.player.stats.energy / view.player.maxStats.energy) * MOBILITY_ENERGY_FACTOR -
|
||||||
|
(view.player.inventoryUsage / view.player.inventoryCapacity) * MOBILITY_LOAD_PENALTY,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
return [
|
||||||
|
{ id: 'protection', label: '防护', value: protection },
|
||||||
|
{ id: 'stealth', label: '潜行', value: stealth },
|
||||||
|
{ id: 'mobility', label: '机动', value: mobility },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getSupplyCounts(view: GameView) {
|
||||||
|
const counts = {
|
||||||
|
water: 0,
|
||||||
|
food: 0,
|
||||||
|
medicine: 0,
|
||||||
|
material: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const item of view.player.inventory) {
|
||||||
|
if (item.type === 'water') counts.water += item.count;
|
||||||
|
if (item.type === 'food') counts.food += item.count;
|
||||||
|
if (item.type === 'medicine') counts.medicine += item.count;
|
||||||
|
if (item.type === 'material') counts.material += item.count;
|
||||||
|
}
|
||||||
|
|
||||||
|
return counts;
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import type { GameView, InventoryViewEntry } from '@tinywaste/game-core';
|
||||||
|
|
||||||
|
export function getTimeLabels(timeLabel: string) {
|
||||||
|
const timeSegments = timeLabel.split('·').map((part) => part.trim());
|
||||||
|
return {
|
||||||
|
dayLabel: timeSegments[0] ?? 'Day 1',
|
||||||
|
clockLabel: timeSegments[1] ?? timeLabel,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getLatestLog(view: GameView) {
|
||||||
|
return view.logs[0] ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getQuickUseItems(view: GameView, limit = 6) {
|
||||||
|
const priority = {
|
||||||
|
water: 0,
|
||||||
|
food: 1,
|
||||||
|
medicine: 2,
|
||||||
|
tool: 3,
|
||||||
|
material: 4,
|
||||||
|
weapon: 5,
|
||||||
|
armor: 6,
|
||||||
|
ammo: 7,
|
||||||
|
quest: 8,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
return [...view.player.inventory]
|
||||||
|
.filter((item) => item.canUse)
|
||||||
|
.sort((left, right) => {
|
||||||
|
const priorityDelta = priority[left.type] - priority[right.type];
|
||||||
|
if (priorityDelta !== 0) return priorityDelta;
|
||||||
|
return right.count - left.count;
|
||||||
|
})
|
||||||
|
.slice(0, limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getAttributeRows(view: GameView) {
|
||||||
|
const { attributes } = view.player;
|
||||||
|
|
||||||
|
return [
|
||||||
|
{ label: 'STR', name: '力量', value: attributes.str },
|
||||||
|
{ label: 'AGI', name: '敏捷', value: attributes.agi },
|
||||||
|
{ label: 'INT', name: '智力', value: attributes.int },
|
||||||
|
{ label: 'PER', name: '感知', value: attributes.per },
|
||||||
|
{ label: 'LCK', name: '幸运', value: attributes.luck },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getInventoryStateLabel(item: InventoryViewEntry) {
|
||||||
|
if (item.equipped) return '已装备';
|
||||||
|
if (item.canUse) return '可立即使用';
|
||||||
|
if (item.equipSlot) return '可挂载';
|
||||||
|
return '物资储备';
|
||||||
|
}
|
||||||
@@ -0,0 +1,172 @@
|
|||||||
|
/* ===== Auth Shell ===== */
|
||||||
|
|
||||||
|
.auth-shell,
|
||||||
|
.new-game-shell,
|
||||||
|
.loading-shell {
|
||||||
|
min-height: 100dvh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-shell {
|
||||||
|
grid-template-columns: minmax(0, 1.42fr) minmax(340px, 430px);
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Auth Hero ===== */
|
||||||
|
|
||||||
|
.auth-hero,
|
||||||
|
.new-game-card {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 24px;
|
||||||
|
border-color: var(--panel-border);
|
||||||
|
min-height: calc(100dvh - 1.5rem);
|
||||||
|
padding: 1.4rem;
|
||||||
|
background-color: #12100d;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport-stage {
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport-copy,
|
||||||
|
.auth-hero-copy,
|
||||||
|
.new-game-copy {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport-copy {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 36rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport-copy h2 {
|
||||||
|
font-size: clamp(1.85rem, 3.1vw, 3.1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-hero-copy,
|
||||||
|
.new-game-copy {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 36rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Auth Panel ===== */
|
||||||
|
|
||||||
|
.auth-panel,
|
||||||
|
.loading-card {
|
||||||
|
border-radius: 24px;
|
||||||
|
border-color: var(--panel-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-panel {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-panel label,
|
||||||
|
.new-game-copy label {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.35rem;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-panel input,
|
||||||
|
.new-game-copy input {
|
||||||
|
min-height: 48px;
|
||||||
|
padding: 0 0.95rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Tab Row ===== */
|
||||||
|
|
||||||
|
.tab-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0.45rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-row button {
|
||||||
|
min-height: 42px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-row button.active {
|
||||||
|
border-color: rgba(215, 138, 51, 0.36);
|
||||||
|
background: rgba(215, 138, 51, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== New Game Card ===== */
|
||||||
|
|
||||||
|
.new-game-card {
|
||||||
|
display: grid;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-game-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(4, 4, 4, 0.12), rgba(4, 4, 4, 0.78)),
|
||||||
|
linear-gradient(90deg, rgba(215, 138, 51, 0.12), transparent 55%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Loading Card ===== */
|
||||||
|
|
||||||
|
.loading-card {
|
||||||
|
width: min(100%, 360px);
|
||||||
|
padding: 1.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-line {
|
||||||
|
width: 76px;
|
||||||
|
height: 6px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: linear-gradient(90deg, #e7aa56, #c56c24);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Viewport Flags ===== */
|
||||||
|
|
||||||
|
.viewport-flags {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.85rem;
|
||||||
|
right: 0.85rem;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.45rem;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport-flags span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 1.9rem;
|
||||||
|
padding: 0 0.7rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(6, 6, 6, 0.34);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
@@ -0,0 +1,355 @@
|
|||||||
|
/* ===== Reset & Global ===== */
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#root {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 320px;
|
||||||
|
color: var(--text);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(201, 132, 57, 0.12), transparent 24%),
|
||||||
|
radial-gradient(circle at bottom right, rgba(117, 88, 49, 0.14), transparent 30%),
|
||||||
|
linear-gradient(180deg, #050404 0%, #090806 48%, #050404 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.18;
|
||||||
|
background:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
|
||||||
|
radial-gradient(circle at 20% 20%, rgba(213, 139, 54, 0.08), transparent 16%),
|
||||||
|
radial-gradient(circle at 80% 70%, rgba(213, 139, 54, 0.06), transparent 18%);
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Shared Border & Background ===== */
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
.panel,
|
||||||
|
.subpanel,
|
||||||
|
.auth-panel,
|
||||||
|
.auth-hero,
|
||||||
|
.new-game-card,
|
||||||
|
.loading-card,
|
||||||
|
.stat-meter,
|
||||||
|
.hud-chip,
|
||||||
|
.command-dock,
|
||||||
|
.top-hud,
|
||||||
|
.brand-block,
|
||||||
|
.clock-block {
|
||||||
|
border: 1px solid var(--panel-border-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-hud,
|
||||||
|
.panel,
|
||||||
|
.subpanel,
|
||||||
|
.auth-panel,
|
||||||
|
.auth-hero,
|
||||||
|
.new-game-card,
|
||||||
|
.loading-card,
|
||||||
|
.command-dock {
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
|
||||||
|
var(--panel);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== App Shell ===== */
|
||||||
|
|
||||||
|
.app-shell {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||||
|
gap: 0.4rem;
|
||||||
|
height: 100dvh;
|
||||||
|
padding: 0.4rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Panel Base ===== */
|
||||||
|
|
||||||
|
.panel,
|
||||||
|
.subpanel {
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 20px;
|
||||||
|
border-color: var(--panel-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subpanel {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Panel Header ===== */
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header p {
|
||||||
|
margin: 0.25rem 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.76rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header::after {
|
||||||
|
content: '';
|
||||||
|
flex: 1;
|
||||||
|
align-self: center;
|
||||||
|
min-width: 80px;
|
||||||
|
height: 10px;
|
||||||
|
opacity: 0.42;
|
||||||
|
background: var(--hud-divider) center right / contain no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header-copy {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto minmax(0, 1fr);
|
||||||
|
gap: 0.7rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header-mark {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(7, 6, 5, 0.44);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header-mark img,
|
||||||
|
.hud-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Typography ===== */
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-copy {
|
||||||
|
margin: 0;
|
||||||
|
color: #f08d73;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Buttons ===== */
|
||||||
|
|
||||||
|
.primary-button,
|
||||||
|
.secondary-button,
|
||||||
|
.small-button,
|
||||||
|
.combat-button,
|
||||||
|
.modal-option,
|
||||||
|
.dock-tab {
|
||||||
|
border-radius: 14px;
|
||||||
|
transition: transform 150ms ease, opacity 150ms ease, background 150ms ease, border-color 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:hover,
|
||||||
|
.secondary-button:hover,
|
||||||
|
.small-button:hover,
|
||||||
|
.combat-button:hover,
|
||||||
|
.modal-option:hover,
|
||||||
|
.dock-tab:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button {
|
||||||
|
min-height: 52px;
|
||||||
|
border: 2px solid rgba(228, 158, 75, 0.5);
|
||||||
|
background: linear-gradient(135deg, #f0b050, #d07020);
|
||||||
|
color: #160f08;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
box-shadow: 0 4px 20px rgba(213, 139, 54, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:hover:not(:disabled) {
|
||||||
|
background: linear-gradient(135deg, #f5c060, #d88030);
|
||||||
|
box-shadow: 0 6px 25px rgba(213, 139, 54, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-button,
|
||||||
|
.combat-button,
|
||||||
|
.modal-option,
|
||||||
|
.small-button.secondary,
|
||||||
|
.dock-tab {
|
||||||
|
min-height: 42px;
|
||||||
|
border: 1px solid var(--panel-border-soft);
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-button {
|
||||||
|
min-height: 34px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.34);
|
||||||
|
background: rgba(215, 138, 51, 0.13);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-button:disabled,
|
||||||
|
.secondary-button:disabled,
|
||||||
|
.small-button:disabled,
|
||||||
|
.combat-button:disabled,
|
||||||
|
.modal-option:disabled,
|
||||||
|
.dock-tab:disabled {
|
||||||
|
opacity: 0.72;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== HUD Chip ===== */
|
||||||
|
|
||||||
|
.hud-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 2.15rem;
|
||||||
|
padding: 0 0.8rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: rgba(239, 226, 206, 0.8);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-chip.safe {
|
||||||
|
color: #addb7f;
|
||||||
|
border-color: rgba(141, 194, 106, 0.28);
|
||||||
|
background: rgba(141, 194, 106, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-chip.accent {
|
||||||
|
color: #f0b55a;
|
||||||
|
border-color: rgba(215, 138, 51, 0.34);
|
||||||
|
background: rgba(215, 138, 51, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-chip.warn {
|
||||||
|
color: #f1c27b;
|
||||||
|
border-color: rgba(224, 180, 102, 0.34);
|
||||||
|
background: rgba(224, 180, 102, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-chip.danger {
|
||||||
|
color: #f0a08d;
|
||||||
|
border-color: rgba(225, 109, 76, 0.34);
|
||||||
|
background: rgba(225, 109, 76, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-chip.muted {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Asset Thumb ===== */
|
||||||
|
|
||||||
|
.asset-thumb {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(8, 7, 6, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-thumb img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-thumb span {
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Scrollbar ===== */
|
||||||
|
|
||||||
|
.recipe-list::-webkit-scrollbar,
|
||||||
|
.log-list::-webkit-scrollbar,
|
||||||
|
.inventory-list::-webkit-scrollbar,
|
||||||
|
.quest-list::-webkit-scrollbar,
|
||||||
|
.combat-log::-webkit-scrollbar,
|
||||||
|
.modal-option-list::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recipe-list::-webkit-scrollbar-thumb,
|
||||||
|
.log-list::-webkit-scrollbar-thumb,
|
||||||
|
.inventory-list::-webkit-scrollbar-thumb,
|
||||||
|
.quest-list::-webkit-scrollbar-thumb,
|
||||||
|
.combat-log::-webkit-scrollbar-thumb,
|
||||||
|
.modal-option-list::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(215, 138, 51, 0.26);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Section Glyph ===== */
|
||||||
|
|
||||||
|
.section-glyph {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
flex: 0 0 36px;
|
||||||
|
opacity: 0.92;
|
||||||
|
}
|
||||||
@@ -0,0 +1,140 @@
|
|||||||
|
/* ===== Command Dock ===== */
|
||||||
|
|
||||||
|
.command-dock {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 180px minmax(0, 1fr) auto;
|
||||||
|
gap: 0.55rem;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 14px;
|
||||||
|
border-color: var(--panel-border);
|
||||||
|
padding: 0.3rem 0.6rem;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Operator Card ===== */
|
||||||
|
|
||||||
|
.operator-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
background: rgba(8, 7, 6, 0.38);
|
||||||
|
}
|
||||||
|
|
||||||
|
.operator-emblem {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.38);
|
||||||
|
background: rgba(215, 138, 51, 0.12);
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operator-copy span {
|
||||||
|
display: block;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Dock Nav ===== */
|
||||||
|
|
||||||
|
.dock-nav-groups {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tabs,
|
||||||
|
.dock-metrics {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tabs {
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tab,
|
||||||
|
.dock-metrics span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 1.6rem;
|
||||||
|
padding: 0 0.6rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.64rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tab {
|
||||||
|
min-height: 56px;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
display: grid;
|
||||||
|
justify-items: center;
|
||||||
|
align-content: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tab::before {
|
||||||
|
background-image: var(--hud-frame-dock-idle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tab.active::before {
|
||||||
|
background-image: var(--hud-frame-dock-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tab.active {
|
||||||
|
border-color: rgba(215, 138, 51, 0.35);
|
||||||
|
background: rgba(215, 138, 51, 0.1);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tab-icon {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
flex: 0 0 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-tab span {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-metrics span {
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Dock Commit ===== */
|
||||||
|
|
||||||
|
.dock-commit {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-commit-button {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 48px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dock-commit-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
/* ===== Combat Shell ===== */
|
||||||
|
|
||||||
|
.combat-shell {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.combat-health {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.combat-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.combat-log {
|
||||||
|
max-height: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.combat-log p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.7rem 0.85rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Tactical Dock (legacy) ===== */
|
||||||
|
|
||||||
|
.tactical-dock {
|
||||||
|
grid-template-columns: 208px minmax(0, 1fr) 196px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tactical-operator {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
@@ -0,0 +1,557 @@
|
|||||||
|
/* ===== Panel Command ===== */
|
||||||
|
|
||||||
|
.panel-command {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-command.theater-panel {
|
||||||
|
padding: 0.85rem;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Panel ===== */
|
||||||
|
|
||||||
|
.theater-panel {
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Titlebar ===== */
|
||||||
|
|
||||||
|
.theater-titlebar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-titlebar h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-titlebar p {
|
||||||
|
margin: 0.25rem 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-titlebar-metrics {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.65rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-titlebar-metrics article {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.15rem;
|
||||||
|
padding: 0.45rem 0.65rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(8, 7, 6, 0.6);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-titlebar-metrics article span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-titlebar-metrics article strong {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Scene Stage ===== */
|
||||||
|
|
||||||
|
.theater-scene-stage {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr auto;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-image {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-image::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(6, 5, 4, 0.15), rgba(6, 5, 4, 0.82)),
|
||||||
|
linear-gradient(90deg, rgba(6, 5, 4, 0.06), rgba(6, 5, 4, 0.5) 70%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Action Zone ===== */
|
||||||
|
|
||||||
|
.theater-action-zone {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.3fr) 220px;
|
||||||
|
gap: 0.65rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
align-content: end;
|
||||||
|
min-height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Scene (legacy) ===== */
|
||||||
|
|
||||||
|
.theater-scene {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 22px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.2);
|
||||||
|
background-color: rgba(6, 5, 4, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
linear-gradient(90deg, rgba(6, 5, 4, 0.1), rgba(6, 5, 4, 0.72) 74%),
|
||||||
|
linear-gradient(180deg, rgba(6, 5, 4, 0.06), rgba(6, 5, 4, 0.78));
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-copy,
|
||||||
|
.theater-scene-side {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-copy {
|
||||||
|
left: 1rem;
|
||||||
|
right: 21rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-copy h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(2rem, 3.2vw, 3.15rem);
|
||||||
|
line-height: 0.9;
|
||||||
|
letter-spacing: -0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-copy p:last-child {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 26rem;
|
||||||
|
color: rgba(239, 226, 206, 0.8);
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-side {
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
width: 300px;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Deck ===== */
|
||||||
|
|
||||||
|
.theater-deck {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.15fr) 316px;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Scene Focus Card ===== */
|
||||||
|
|
||||||
|
.scene-focus-card {
|
||||||
|
padding: 0.85rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(7, 6, 5, 0.58);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-focus-card.error {
|
||||||
|
border-color: rgba(225, 109, 76, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-focus-card span,
|
||||||
|
.primary-operation-copy span,
|
||||||
|
.intel-focus-card span,
|
||||||
|
.survivor-metric-card span {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.28rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-focus-card strong,
|
||||||
|
.intel-focus-card strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.98rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-focus-card p,
|
||||||
|
.intel-focus-card p {
|
||||||
|
margin: 0.3rem 0 0;
|
||||||
|
color: rgba(239, 226, 206, 0.8);
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Primary Operation Card ===== */
|
||||||
|
|
||||||
|
.primary-operation-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.72rem;
|
||||||
|
padding: 0.82rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.22);
|
||||||
|
background: rgba(10, 8, 6, 0.42);
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-operation-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-operation-copy h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(1.4rem, 2vw, 2rem);
|
||||||
|
line-height: 0.94;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-operation-copy p,
|
||||||
|
.secondary-operation-card p {
|
||||||
|
margin: 0.4rem 0 0;
|
||||||
|
color: rgba(239, 226, 206, 0.78);
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-operation-card small {
|
||||||
|
color: #f0c27a;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-chip-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-chip-row span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 1.7rem;
|
||||||
|
padding: 0 0.55rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
color: rgba(239, 226, 206, 0.82);
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-commit-button {
|
||||||
|
width: min(100%, 220px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-glyph {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
flex: 0 0 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-glyph-primary {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
flex-basis: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Secondary Operation Card ===== */
|
||||||
|
|
||||||
|
.secondary-operation-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-operation-card {
|
||||||
|
min-height: 94px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 22px minmax(0, 1fr);
|
||||||
|
align-items: start;
|
||||||
|
gap: 0.65rem;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.85rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(10, 8, 7, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-operation-card::before {
|
||||||
|
background-image: var(--hud-frame-compact);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-operation-card strong {
|
||||||
|
font-size: 0.98rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-operation-card p {
|
||||||
|
margin-top: 0.18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-operation-card small {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Primary Card (new component) ===== */
|
||||||
|
|
||||||
|
.theater-primary-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.65rem;
|
||||||
|
padding: 0.85rem;
|
||||||
|
border-radius: 18px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.22);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top right, rgba(215, 138, 51, 0.1), transparent 30%),
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(10, 8, 6, 0.72);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-primary-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-primary-head span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-action-icon {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
flex: 0 0 22px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-primary-copy h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(1.2rem, 2vw, 1.6rem);
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-primary-copy p {
|
||||||
|
margin: 0.3rem 0 0;
|
||||||
|
color: rgba(239, 226, 206, 0.78);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-find-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-find-meta {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.12rem;
|
||||||
|
padding: 0.5rem 0.7rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-find-meta span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-find-meta strong {
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-potential-finds {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.45rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.potential-find-thumb {
|
||||||
|
width: 48px;
|
||||||
|
min-width: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.potential-find-thumb .asset-thumb {
|
||||||
|
width: 48px;
|
||||||
|
min-width: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-primary-button {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 56px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Secondary Column (new component) ===== */
|
||||||
|
|
||||||
|
.theater-secondary-column {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-secondary-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 22px minmax(0, 1fr) auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.7rem 0.75rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(9, 8, 7, 0.56);
|
||||||
|
color: var(--text);
|
||||||
|
transition: transform 150ms ease, border-color 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-secondary-card:hover {
|
||||||
|
border-color: rgba(215, 138, 51, 0.22);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-secondary-card strong {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-secondary-card p {
|
||||||
|
margin: 0.15rem 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-secondary-card > span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Intel Strip (new component) ===== */
|
||||||
|
|
||||||
|
.theater-intel-strip {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 0.7fr));
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-intel-block {
|
||||||
|
padding: 0.6rem 0.7rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
background: rgba(8, 7, 6, 0.55);
|
||||||
|
display: grid;
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-intel-block span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-intel-block p {
|
||||||
|
margin: 0;
|
||||||
|
color: rgba(239, 226, 206, 0.78);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-intel-block.compact {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-intel-block.compact strong {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-intel-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
flex: 0 0 18px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Theater Intel Grid (legacy) ===== */
|
||||||
|
|
||||||
|
.theater-intel-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intel-focus-card {
|
||||||
|
min-height: 108px;
|
||||||
|
padding: 0.78rem;
|
||||||
|
border-radius: 18px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(10, 8, 7, 0.52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.intel-focus-card.system {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto auto 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intel-system-links {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.45rem;
|
||||||
|
align-content: end;
|
||||||
|
margin-top: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Command Error ===== */
|
||||||
|
|
||||||
|
.command-error {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
@@ -0,0 +1,116 @@
|
|||||||
|
/* ===== Game Grid ===== */
|
||||||
|
|
||||||
|
.game-grid {
|
||||||
|
min-height: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 400px minmax(0, 1fr) 340px;
|
||||||
|
gap: 0.75rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== HUD Chrome Surfaces ===== */
|
||||||
|
|
||||||
|
.hud-surface,
|
||||||
|
.hud-card-frame,
|
||||||
|
.hud-warning-frame,
|
||||||
|
.expedition-route-card,
|
||||||
|
.dock-tab,
|
||||||
|
.stat-meter,
|
||||||
|
.brand-block,
|
||||||
|
.clock-block {
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-surface::before,
|
||||||
|
.hud-card-frame::before,
|
||||||
|
.hud-warning-frame::before,
|
||||||
|
.expedition-route-card::before,
|
||||||
|
.dock-tab::before,
|
||||||
|
.stat-meter::before,
|
||||||
|
.brand-block::before,
|
||||||
|
.clock-block::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-surface::before {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-card-frame::before,
|
||||||
|
.hud-warning-frame::before,
|
||||||
|
.expedition-route-card::before,
|
||||||
|
.dock-tab::before,
|
||||||
|
.stat-meter::before,
|
||||||
|
.brand-block::before,
|
||||||
|
.clock-block::before {
|
||||||
|
opacity: 0.96;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-surface > *,
|
||||||
|
.hud-card-frame > *,
|
||||||
|
.hud-warning-frame > *,
|
||||||
|
.expedition-route-card > *,
|
||||||
|
.dock-tab > *,
|
||||||
|
.stat-meter > *,
|
||||||
|
.brand-block > *,
|
||||||
|
.clock-block > * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-surface-wide::before,
|
||||||
|
.hud-top-frame::before,
|
||||||
|
.hud-dock-frame::before {
|
||||||
|
background-image: var(--hud-frame-wide);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-surface-tall::before {
|
||||||
|
background-image: var(--hud-frame-tall);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-card-frame::before {
|
||||||
|
background-image: var(--hud-frame-card);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-card-frame-primary::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hud-warning-frame::before {
|
||||||
|
background-image: var(--hud-frame-warning);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Panel Shared Backgrounds ===== */
|
||||||
|
|
||||||
|
.panel-route.expedition-panel,
|
||||||
|
.panel-command.theater-panel,
|
||||||
|
.panel-loadout.survivor-panel,
|
||||||
|
.top-hud,
|
||||||
|
.command-dock {
|
||||||
|
background: rgba(7, 6, 5, 0.74);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-core,
|
||||||
|
.equipment-grid-panel,
|
||||||
|
.survivor-resource-panel,
|
||||||
|
.intel-focus-card,
|
||||||
|
.survivor-metric-card,
|
||||||
|
.secondary-operation-card,
|
||||||
|
.overlay-summary-card {
|
||||||
|
background: rgba(7, 6, 5, 0.42);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-core,
|
||||||
|
.equipment-grid-panel,
|
||||||
|
.survivor-resource-panel {
|
||||||
|
padding: 0.85rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,698 @@
|
|||||||
|
/* ===== Loadout Panel Grid ===== */
|
||||||
|
|
||||||
|
.panel-loadout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-loadout.survivor-panel {
|
||||||
|
padding: 0.85rem;
|
||||||
|
grid-template-rows: auto auto auto auto auto;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Equipment Terminal (new component) ===== */
|
||||||
|
|
||||||
|
.equipment-terminal {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto auto auto auto;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-terminal-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-terminal-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-terminal-badges {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.45rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Equipment Grid ===== */
|
||||||
|
|
||||||
|
.equipment-grid-frame {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-grid-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-grid-head span {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-grid-head p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Equipment Slot Card ===== */
|
||||||
|
|
||||||
|
.equipment-slot-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(9, 8, 7, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-slot-card.equipped {
|
||||||
|
border-color: rgba(215, 138, 51, 0.28);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(215, 138, 51, 0.06), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(9, 8, 7, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-slot-card.placeholder {
|
||||||
|
place-items: center;
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-slot-top span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-slot-thumb {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-slot-thumb .asset-thumb {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-slot-copy strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-slot-copy small {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-slot-placeholder {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px dashed rgba(255, 255, 255, 0.12);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Equipment Metrics Row ===== */
|
||||||
|
|
||||||
|
.equipment-metrics-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-metric-box {
|
||||||
|
padding: 0.45rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
background: rgba(8, 7, 6, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-metric-box span {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.15rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.58rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-metric-box strong {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Warning Terminal ===== */
|
||||||
|
|
||||||
|
.warning-terminal {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-terminal-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-terminal-head > span {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-terminal-button {
|
||||||
|
min-height: 28px;
|
||||||
|
padding: 0 0.6rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.64rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-terminal-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Warning Meter ===== */
|
||||||
|
|
||||||
|
.warning-meter {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 0.5rem 0.65rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
background: rgba(9, 8, 7, 0.42);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-meter.tone-good {
|
||||||
|
border-color: rgba(141, 194, 106, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-meter.tone-warn {
|
||||||
|
border-color: rgba(224, 180, 102, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-meter.tone-danger {
|
||||||
|
border-color: rgba(225, 109, 76, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-meter-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-meter-head span {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-meter-track {
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-meter-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: linear-gradient(90deg, #f2b55e, #df7a27);
|
||||||
|
transition: width 300ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-good .warning-meter-fill {
|
||||||
|
background: linear-gradient(90deg, #9dda74, #53b96f);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-warn .warning-meter-fill {
|
||||||
|
background: linear-gradient(90deg, #f4cc76, #e0a030);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-danger .warning-meter-fill {
|
||||||
|
background: linear-gradient(90deg, #f4cc76, #eb6650);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Ready Pack Frame ===== */
|
||||||
|
|
||||||
|
.ready-pack-frame {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
background: rgba(9, 8, 7, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ready-pack-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ready-pack-head > span {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ready-pack-head p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ready-pack-columns {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ready-pack-columns > div > strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
font-size: 0.76rem;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Quick Access Row ===== */
|
||||||
|
|
||||||
|
.quick-access-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-access-slot {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
gap: 0.2rem;
|
||||||
|
padding: 0.4rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||||
|
background: rgba(8, 7, 6, 0.48);
|
||||||
|
color: var(--text);
|
||||||
|
min-height: 56px;
|
||||||
|
transition: border-color 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-access-slot:hover:not(:disabled):not(.locked) {
|
||||||
|
border-color: rgba(215, 138, 51, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-access-slot.locked {
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.66rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-access-thumb {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-access-thumb .asset-thumb {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-access-slot span {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: #f1c27b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Stash Row ===== */
|
||||||
|
|
||||||
|
.stash-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stash-slot {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
gap: 0.15rem;
|
||||||
|
padding: 0.35rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
background: rgba(8, 7, 6, 0.4);
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stash-slot span {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
color: #f1c27b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stash-slot.stash-open {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 1rem;
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: rgba(255, 255, 255, 0.1);
|
||||||
|
transition: border-color 150ms ease, color 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stash-slot.stash-open:hover {
|
||||||
|
border-color: rgba(215, 138, 51, 0.28);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stash-slot .asset-thumb {
|
||||||
|
width: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Equipment Terminal Button ===== */
|
||||||
|
|
||||||
|
.equipment-terminal-button {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Survivor Panel (legacy) ===== */
|
||||||
|
|
||||||
|
.survivor-panel {
|
||||||
|
grid-template-rows: auto auto auto auto auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-head strong {
|
||||||
|
margin: 0.3rem 0 0;
|
||||||
|
font-size: 1.28rem;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-head-copy {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-head-side {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
justify-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-head-chips {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Survivor Rig ===== */
|
||||||
|
|
||||||
|
.survivor-rig {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 110px minmax(0, 1fr) 110px;
|
||||||
|
gap: 0.65rem;
|
||||||
|
min-height: 328px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rig-column {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rig-slot {
|
||||||
|
padding: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rig-figure {
|
||||||
|
min-height: 328px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rig-figure-overlay {
|
||||||
|
right: 0.85rem;
|
||||||
|
left: 0.85rem;
|
||||||
|
bottom: 4.85rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rig-figure-overlay strong {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Survivor Metrics ===== */
|
||||||
|
|
||||||
|
.survivor-metrics-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-metrics-strip {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.85rem;
|
||||||
|
right: 0.85rem;
|
||||||
|
bottom: 0.85rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-metric-card {
|
||||||
|
padding: 0.6rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(7, 6, 5, 0.58);
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-metric-card strong {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Survivor Warning ===== */
|
||||||
|
|
||||||
|
.survivor-warning-strip {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-warning-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 42px minmax(0, 1fr);
|
||||||
|
gap: 0.65rem;
|
||||||
|
align-items: start;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0;
|
||||||
|
background: rgba(7, 6, 5, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-warning-card strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.94rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-warning-card p {
|
||||||
|
margin: 0.26rem 0 0;
|
||||||
|
color: rgba(239, 226, 206, 0.78);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.42;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Survivor Supply Grid ===== */
|
||||||
|
|
||||||
|
.survivor-supply-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-supply-grid.compact {
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-supply-card {
|
||||||
|
min-height: 98px;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.45rem;
|
||||||
|
align-content: start;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.6rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 0;
|
||||||
|
background: rgba(8, 7, 6, 0.52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-supply-card .asset-thumb {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-supply-copy span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.22rem;
|
||||||
|
color: #f1c27b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-supply-copy small {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.22rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-supply-card.locked {
|
||||||
|
place-items: center;
|
||||||
|
border-style: dashed;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(8, 7, 6, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Survivor Equipment Grid ===== */
|
||||||
|
|
||||||
|
.survivor-equipment-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-module {
|
||||||
|
grid-template-columns: 68px minmax(0, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
min-height: 110px;
|
||||||
|
background: rgba(8, 7, 6, 0.52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-module.equipped {
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(215, 138, 51, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Survivor Stash Grid ===== */
|
||||||
|
|
||||||
|
.survivor-stash-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-stash-grid.compact {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-stash-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 56px minmax(0, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding: 0.55rem;
|
||||||
|
border: 0;
|
||||||
|
background: rgba(8, 7, 6, 0.52);
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-stash-card .asset-thumb {
|
||||||
|
width: 56px;
|
||||||
|
min-width: 56px;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-stash-open {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Survivor Resource Grid ===== */
|
||||||
|
|
||||||
|
.survivor-resource-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr);
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-resource-column {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-column-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-column-head strong,
|
||||||
|
.resource-column-head span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-column-head strong {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-column-head span {
|
||||||
|
margin-top: 0.16rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Loadout Matrix (legacy) ===== */
|
||||||
|
|
||||||
|
.loadout-matrix {
|
||||||
|
grid-template-columns: 110px minmax(0, 1fr) 110px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
/* ===== Modal Shell ===== */
|
||||||
|
|
||||||
|
.modal-shell {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 1rem;
|
||||||
|
background: rgba(4, 4, 4, 0.8);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-card {
|
||||||
|
width: min(100%, 760px);
|
||||||
|
border-radius: 22px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.24);
|
||||||
|
background: rgba(13, 11, 9, 0.97);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-card-wide {
|
||||||
|
width: min(100%, 1180px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Modal Header ===== */
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header-copy {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 1.75rem;
|
||||||
|
padding: 0 0.7rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: rgba(239, 226, 206, 0.74);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header h3 {
|
||||||
|
margin: 0.25rem 0 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
min-height: 36px;
|
||||||
|
padding: 0 0.8rem;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Modal Option ===== */
|
||||||
|
|
||||||
|
.modal-option {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 60px;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-option span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
@@ -0,0 +1,264 @@
|
|||||||
|
/* ===== System Overlay ===== */
|
||||||
|
|
||||||
|
.system-overlay {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-summary-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-summary-card,
|
||||||
|
.overlay-note-card,
|
||||||
|
.overlay-loadout-row {
|
||||||
|
padding: 0.8rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-summary-card {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-summary-card span,
|
||||||
|
.overlay-loadout-row span {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.26rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-summary-card strong {
|
||||||
|
font-size: 1.02rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Overlay Grids ===== */
|
||||||
|
|
||||||
|
.system-overlay-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
min-height: min(72dvh, 760px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-overlay-grid,
|
||||||
|
.blueprint-overlay-grid,
|
||||||
|
.log-overlay-grid {
|
||||||
|
grid-template-columns: minmax(0, 1.4fr) 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-main-stack {
|
||||||
|
min-height: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-overlay-grid {
|
||||||
|
grid-template-columns: minmax(0, 1.2fr) 340px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-main-panel,
|
||||||
|
.overlay-side-stack,
|
||||||
|
.overlay-side-panel {
|
||||||
|
min-height: 0;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-main-panel,
|
||||||
|
.overlay-side-panel {
|
||||||
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-side-stack {
|
||||||
|
gap: 0.75rem;
|
||||||
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-list {
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-loadout-stack,
|
||||||
|
.overlay-note-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-loadout-row.equipped {
|
||||||
|
border-color: rgba(215, 138, 51, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-loadout-row small,
|
||||||
|
.overlay-note-card p {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
color: rgba(239, 226, 206, 0.76);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Inventory & Recipe Lists ===== */
|
||||||
|
|
||||||
|
.inventory-list,
|
||||||
|
.recipe-list,
|
||||||
|
.quest-list,
|
||||||
|
.log-list,
|
||||||
|
.combat-log,
|
||||||
|
.modal-option-list {
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
padding-right: 0.2rem;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-card,
|
||||||
|
.quest-card {
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(9, 8, 7, 0.52);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-card {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.8rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 72px minmax(0, 1fr) auto;
|
||||||
|
align-items: start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-card.equipped {
|
||||||
|
border-color: rgba(215, 138, 51, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-card strong,
|
||||||
|
.quest-card strong {
|
||||||
|
font-size: 0.94rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-title-row span {
|
||||||
|
color: #f1c27b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Quest Card ===== */
|
||||||
|
|
||||||
|
.quest-card {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-card header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.65rem;
|
||||||
|
margin-bottom: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-card header span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 1.75rem;
|
||||||
|
width: fit-content;
|
||||||
|
padding: 0 0.7rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: rgba(239, 226, 206, 0.74);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-card header div small {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-card.state-completed {
|
||||||
|
border-color: rgba(141, 194, 106, 0.32);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-steps {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-steps span {
|
||||||
|
color: rgba(239, 226, 206, 0.76);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-steps .done {
|
||||||
|
color: #a8e288;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Log Entry ===== */
|
||||||
|
|
||||||
|
.log-entry {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 0.7rem;
|
||||||
|
padding: 0.72rem 0;
|
||||||
|
border-bottom: 1px solid var(--line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-good p {
|
||||||
|
color: #b4e88f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-warn p {
|
||||||
|
color: #f3c17a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-bad p,
|
||||||
|
.tone-danger p {
|
||||||
|
color: #f38b74;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Empty State ===== */
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
padding: 0.9rem;
|
||||||
|
border: 1px dashed rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 14px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== World Map ===== */
|
||||||
|
|
||||||
|
.world-map-panel {
|
||||||
|
min-height: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-node-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-node-card {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
/* ===== Large tablet / small desktop (<=1580px) ===== */
|
||||||
|
|
||||||
|
@media (max-width: 1580px) {
|
||||||
|
.top-hud {
|
||||||
|
grid-template-columns: 250px 104px minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-actions {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-grid {
|
||||||
|
grid-template-columns: 300px minmax(0, 1fr) 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadout-matrix {
|
||||||
|
grid-template-columns: 112px minmax(0, 1fr) 112px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-deck {
|
||||||
|
grid-template-columns: minmax(0, 1fr) 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-copy {
|
||||||
|
right: 18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-side {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-rig {
|
||||||
|
grid-template-columns: 96px minmax(0, 1fr) 96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Tablet (<=1340px) ===== */
|
||||||
|
|
||||||
|
@media (max-width: 1340px) {
|
||||||
|
body {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-shell {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-hud {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-strip {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-shell,
|
||||||
|
.command-dock {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-dock {
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-panel,
|
||||||
|
.panel-route.expedition-panel,
|
||||||
|
.survivor-panel {
|
||||||
|
grid-template-rows: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene {
|
||||||
|
min-height: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-copy,
|
||||||
|
.theater-scene-side {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-copy {
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-side {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-deck,
|
||||||
|
.theater-intel-grid,
|
||||||
|
.theater-intel-strip,
|
||||||
|
.theater-action-zone,
|
||||||
|
.survivor-rig,
|
||||||
|
.tactical-dock {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rig-column {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-head,
|
||||||
|
.expedition-head {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Narrow tablet (961px-1340px) ===== */
|
||||||
|
|
||||||
|
@media (max-width: 1340px) and (min-width: 961px) {
|
||||||
|
body {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-shell {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-hud {
|
||||||
|
grid-template-columns: 236px 112px minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-actions {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-grid {
|
||||||
|
grid-template-columns: 260px minmax(0, 1fr) 300px;
|
||||||
|
height: calc(100dvh - 180px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-copy {
|
||||||
|
right: 15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theater-scene-side {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.survivor-resource-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,470 @@
|
|||||||
|
/* ===== Route Panel Grid ===== */
|
||||||
|
|
||||||
|
.panel-route {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-route.expedition-panel {
|
||||||
|
padding: 0.85rem;
|
||||||
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Expedition Panel Head ===== */
|
||||||
|
|
||||||
|
.expedition-panel-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-panel-head h2 {
|
||||||
|
margin: 0.25rem 0 0;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-weather-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.65rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Route Summary Card (legacy) ===== */
|
||||||
|
|
||||||
|
.route-summary-card {
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 18px;
|
||||||
|
border-color: rgba(215, 138, 51, 0.32);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(215, 138, 51, 0.12), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(7, 7, 7, 0.46);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-summary-card h2,
|
||||||
|
.viewport-copy h2,
|
||||||
|
.auth-hero-copy h1,
|
||||||
|
.new-game-copy h1 {
|
||||||
|
margin: 0.42rem 0 0;
|
||||||
|
font-size: clamp(1.55rem, 3.4vw, 3.8rem);
|
||||||
|
line-height: 0.96;
|
||||||
|
letter-spacing: -0.05em;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-summary-card h2 {
|
||||||
|
font-size: clamp(1.9rem, 3vw, 2.8rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-summary-card p,
|
||||||
|
.viewport-copy p,
|
||||||
|
.auth-hero-copy p,
|
||||||
|
.new-game-copy p,
|
||||||
|
.modal-copy {
|
||||||
|
color: rgba(239, 226, 206, 0.78);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-summary-meta {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.55rem;
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-summary-meta div,
|
||||||
|
.combat-health,
|
||||||
|
.mini-intel-card {
|
||||||
|
padding: 0.78rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-summary-meta small {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.66rem;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-summary-meta strong {
|
||||||
|
font-size: 0.94rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intel-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.45rem;
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Route Card Thumb ===== */
|
||||||
|
|
||||||
|
.route-card-thumb {
|
||||||
|
min-height: 88px;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-card-detail {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.45rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Risk Dots ===== */
|
||||||
|
|
||||||
|
.risk-dots {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.28rem;
|
||||||
|
margin-top: 0.58rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-dots span {
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Expedition Location Card ===== */
|
||||||
|
|
||||||
|
.expedition-location-card {
|
||||||
|
padding: 0.65rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.18);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(215, 138, 51, 0.06), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(9, 8, 7, 0.52);
|
||||||
|
display: grid;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-location-card strong {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Weather Block ===== */
|
||||||
|
|
||||||
|
.expedition-weather-block {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.55rem 0.7rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-weather-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-weather-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
flex: 0 0 20px;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-weather-main span {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Risk Line ===== */
|
||||||
|
|
||||||
|
.expedition-risk-line {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 0.35rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-risk-line span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-risk-line strong {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Expedition Head ===== */
|
||||||
|
|
||||||
|
.expedition-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-head h2 {
|
||||||
|
margin: 0.3rem 0 0;
|
||||||
|
font-size: 1.28rem;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-head-copy {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Expedition Core ===== */
|
||||||
|
|
||||||
|
.expedition-core {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.8rem;
|
||||||
|
padding: 0.95rem;
|
||||||
|
border-radius: 18px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.2);
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(215, 138, 51, 0.08), rgba(255, 255, 255, 0)),
|
||||||
|
rgba(10, 8, 7, 0.68);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-core p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Expedition Status ===== */
|
||||||
|
|
||||||
|
.expedition-status-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-status-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.6rem;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background: rgba(9, 8, 7, 0.48);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-status-card small {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.66rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-status-cell {
|
||||||
|
padding: 0.55rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-status-cell small {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.62rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-status-cell strong {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-launch-button {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 44px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Expedition Routes Card ===== */
|
||||||
|
|
||||||
|
.expedition-routes-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.6rem;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-section-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-section-head > span {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Expedition Toggle ===== */
|
||||||
|
|
||||||
|
.expedition-toggle {
|
||||||
|
min-height: 30px;
|
||||||
|
padding: 0 0.7rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.66rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
transition: border-color 150ms ease, background 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-toggle:hover {
|
||||||
|
border-color: rgba(215, 138, 51, 0.28);
|
||||||
|
background: rgba(215, 138, 51, 0.08);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-toggle.active {
|
||||||
|
border-color: rgba(141, 194, 106, 0.32);
|
||||||
|
background: rgba(141, 194, 106, 0.1);
|
||||||
|
color: #addb7f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Route Stack ===== */
|
||||||
|
|
||||||
|
.route-stack,
|
||||||
|
.expedition-map-panel,
|
||||||
|
.survivor-supply-panel,
|
||||||
|
.survivor-actions-panel {
|
||||||
|
min-height: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-list,
|
||||||
|
.expedition-map-grid {
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-stack {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Expedition Route Card ===== */
|
||||||
|
|
||||||
|
.expedition-route-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 64px minmax(0, 1fr);
|
||||||
|
gap: 0.6rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.6rem;
|
||||||
|
text-align: left;
|
||||||
|
background: rgba(5, 5, 4, 0.48);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 0;
|
||||||
|
transition: border-color 150ms ease, transform 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card::before {
|
||||||
|
background-image: var(--hud-frame-route-idle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card.recommended::before {
|
||||||
|
background-image: var(--hud-frame-route-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card:hover:not(:disabled) {
|
||||||
|
border-color: rgba(215, 138, 51, 0.22);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card.active {
|
||||||
|
border-color: rgba(215, 138, 51, 0.28);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card.tone-safe .risk-dots span.active {
|
||||||
|
background: var(--safe);
|
||||||
|
border-color: rgba(141, 194, 106, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card.tone-warn .risk-dots span.active {
|
||||||
|
background: var(--warn);
|
||||||
|
border-color: rgba(224, 180, 102, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card.tone-danger .risk-dots span.active {
|
||||||
|
background: var(--danger);
|
||||||
|
border-color: rgba(225, 109, 76, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card .route-card-thumb {
|
||||||
|
min-height: 56px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card .route-card-copy {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.2rem;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card .route-card-copy strong {
|
||||||
|
font-size: 0.94rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expedition-route-card .route-card-copy p {
|
||||||
|
margin: 0.2rem 0 0;
|
||||||
|
color: rgba(239, 226, 206, 0.72);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-card-topline {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-card-topline strong {
|
||||||
|
font-size: 0.94rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-card-topline span {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.66rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.route-card-detail {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.55rem;
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,209 @@
|
|||||||
|
/* ===== Top HUD Bar ===== */
|
||||||
|
|
||||||
|
.top-hud {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 240px 100px minmax(0, 1fr) auto;
|
||||||
|
gap: 0.65rem;
|
||||||
|
align-items: stretch;
|
||||||
|
border-color: var(--panel-border);
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Brand Block ===== */
|
||||||
|
|
||||||
|
.brand-block,
|
||||||
|
.clock-block {
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(11, 10, 8, 0.78);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-block::before,
|
||||||
|
.clock-block::before {
|
||||||
|
background-image: var(--hud-frame-compact);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-block {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.85rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-mark {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(215, 138, 51, 0.32);
|
||||||
|
background: rgba(215, 138, 51, 0.11);
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-copy strong,
|
||||||
|
.clock-block strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Clock Block ===== */
|
||||||
|
|
||||||
|
.clock-block {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 22px 1fr;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: start;
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding: 0.65rem 0.8rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock-block div {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clock-block span {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Status Strip ===== */
|
||||||
|
|
||||||
|
.status-strip {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||||
|
gap: 0.45rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Stat Meter ===== */
|
||||||
|
|
||||||
|
.stat-meter {
|
||||||
|
min-width: 0;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0.55rem 0.72rem 0.62rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter::before {
|
||||||
|
background-image: var(--hud-frame-status);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter-copy {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 18px minmax(0, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
object-fit: contain;
|
||||||
|
opacity: 0.92;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter-copy > div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter-copy span {
|
||||||
|
display: block;
|
||||||
|
min-width: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.66rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter-copy strong {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.12rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter strong small {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.66rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Life stat gets more visual weight */
|
||||||
|
.stat-meter.tone-health {
|
||||||
|
border-color: rgba(141, 194, 106, 0.25);
|
||||||
|
background: rgba(141, 194, 106, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter.tone-health .stat-meter-copy strong {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #b4e88f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-meter.tone-health .meter-track {
|
||||||
|
height: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Meter Track ===== */
|
||||||
|
|
||||||
|
.meter-track {
|
||||||
|
height: 7px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meter-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: linear-gradient(90deg, #f2b55e, #df7a27);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-health .meter-fill {
|
||||||
|
background: linear-gradient(90deg, #9dda74, #53b96f);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tone-danger .meter-fill {
|
||||||
|
background: linear-gradient(90deg, #f4cc76, #eb6650);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Top Actions ===== */
|
||||||
|
|
||||||
|
.top-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.45rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-action-button {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-action-icon,
|
||||||
|
.clock-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
flex: 0 0 18px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #070604;
|
||||||
|
--bg-soft: #0d0b09;
|
||||||
|
--panel: rgba(16, 13, 10, 0.94);
|
||||||
|
--panel-strong: rgba(13, 11, 8, 0.98);
|
||||||
|
--panel-border: rgba(166, 114, 53, 0.38);
|
||||||
|
--panel-border-soft: rgba(255, 255, 255, 0.08);
|
||||||
|
--text: #efe2ce;
|
||||||
|
--muted: #a38f73;
|
||||||
|
--accent: #d58b36;
|
||||||
|
--accent-soft: rgba(213, 139, 54, 0.16);
|
||||||
|
--safe: #8bc96d;
|
||||||
|
--warn: #e0b466;
|
||||||
|
--danger: #e16d4c;
|
||||||
|
--line: rgba(255, 255, 255, 0.08);
|
||||||
|
--shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--hud-frame-wide: url('/generated/hud/chrome/panel-wide.png');
|
||||||
|
--hud-frame-tall: url('/generated/hud/chrome/panel-tall.png');
|
||||||
|
--hud-frame-card: url('/generated/hud/chrome/panel-card.png');
|
||||||
|
--hud-frame-compact: url('/generated/hud/chrome/panel-compact.png');
|
||||||
|
--hud-frame-route-idle: url('/generated/hud/chrome/route-card-idle.png');
|
||||||
|
--hud-frame-route-active: url('/generated/hud/chrome/route-card-active.png');
|
||||||
|
--hud-frame-action-primary: url('/generated/hud/chrome/action-card-primary.png');
|
||||||
|
--hud-frame-action-secondary: url('/generated/hud/chrome/action-card-secondary.png');
|
||||||
|
--hud-frame-status: url('/generated/hud/chrome/status-meter.png');
|
||||||
|
--hud-frame-warning: url('/generated/hud/chrome/warning-strip.png');
|
||||||
|
--hud-frame-dock-idle: url('/generated/hud/chrome/dock-tab-idle.png');
|
||||||
|
--hud-frame-dock-active: url('/generated/hud/chrome/dock-tab-active.png');
|
||||||
|
--hud-divider: url('/generated/hud/chrome/divider-ornament.png');
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user