Compare commits
3 Commits
6234a50bdb
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 virtheart
|
70e6b5808b | ||
|
virtheart
|
d8e74b00c3 | ||
|
virtheart
|
5c41eb410b |
@@ -15,6 +15,7 @@
|
||||
"dependencies": {
|
||||
"@fastify/cookie": "^11.0.2",
|
||||
"@fastify/cors": "^11.1.0",
|
||||
"@fastify/rate-limit": "^10.3.0",
|
||||
"@fastify/static": "^9.1.3",
|
||||
"@tinywaste/content": "workspace:*",
|
||||
"@tinywaste/game-core": "workspace:*",
|
||||
|
||||
@@ -8,13 +8,13 @@ export const registerAuthRoutes = (app: FastifyInstance, authService: AuthServic
|
||||
return { user };
|
||||
});
|
||||
|
||||
app.post('/api/auth/register', async (request, reply) => {
|
||||
app.post('/api/auth/register', { config: { rateLimit: { max: 5, timeWindow: '1 minute' } } }, async (request, reply) => {
|
||||
const input = registerSchema.parse(request.body);
|
||||
const user = await authService.register(input, reply);
|
||||
return { user };
|
||||
});
|
||||
|
||||
app.post('/api/auth/login', async (request, reply) => {
|
||||
app.post('/api/auth/login', { config: { rateLimit: { max: 10, timeWindow: '1 minute' } } }, async (request, reply) => {
|
||||
const input = loginSchema.parse(request.body);
|
||||
const user = await authService.login(input, reply);
|
||||
return { user };
|
||||
|
||||
@@ -48,7 +48,7 @@ export class AuthService {
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
maxAge: SESSION_TTL_MS / 1000,
|
||||
secure: false,
|
||||
secure: env.isProduction,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -13,11 +13,15 @@ export class GameRepository {
|
||||
});
|
||||
}
|
||||
|
||||
async upsertMainSlot(userId: string, stateJson: string, label: string) {
|
||||
async upsertMainSlot(userId: string, stateJson: string, label: string, expectedRevision?: number) {
|
||||
const existing = await this.getMainSlot(userId);
|
||||
const now = Date.now();
|
||||
|
||||
if (existing) {
|
||||
if (expectedRevision !== undefined && existing.revision !== expectedRevision) {
|
||||
return null;
|
||||
}
|
||||
|
||||
this.db
|
||||
.update(saveSlotsTable)
|
||||
.set({
|
||||
|
||||
@@ -43,7 +43,10 @@ export class GameService {
|
||||
|
||||
const state = JSON.parse(slot.stateJson) as GameState;
|
||||
const result = applyGameAction(state, gameContent, action);
|
||||
await this.repository.upsertMainSlot(userId, JSON.stringify(result.state), slot.label);
|
||||
const saved = await this.repository.upsertMainSlot(userId, JSON.stringify(result.state), slot.label, slot.revision);
|
||||
if (!saved) {
|
||||
throw new AppError(409, 'SAVE_CONFLICT', '存档已被其他请求修改，请重试。');
|
||||
}
|
||||
return buildGameView(result.state, gameContent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { existsSync } from 'node:fs';
|
||||
import Fastify from 'fastify';
|
||||
import cookie from '@fastify/cookie';
|
||||
import cors from '@fastify/cors';
|
||||
import rateLimit from '@fastify/rate-limit';
|
||||
import fastifyStatic from '@fastify/static';
|
||||
import { ZodError } from 'zod';
|
||||
import { db } from './shared/database/client';
|
||||
@@ -25,6 +26,11 @@ await app.register(cors, {
|
||||
credentials: true,
|
||||
});
|
||||
|
||||
await app.register(rateLimit, {
|
||||
max: env.isProduction ? 100 : 1000,
|
||||
timeWindow: '1 minute',
|
||||
});
|
||||
|
||||
const authRepository = new AuthRepository(db);
|
||||
const authService = new AuthService(authRepository);
|
||||
const gameRepository = new GameRepository(db);
|
||||
|
||||
@@ -8,6 +8,7 @@ loadDotenv({
|
||||
});
|
||||
|
||||
const envSchema = z.object({
|
||||
NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
|
||||
API_PORT: z.coerce.number().int().positive().default(3001),
|
||||
WEB_ORIGIN: z.string().url().default('http://localhost:5173'),
|
||||
WEB_DIST_DIR: z.string().min(1).default('../web/dist'),
|
||||
@@ -26,6 +27,8 @@ const webDistPath = resolve(process.cwd(), parsed.data.WEB_DIST_DIR);
|
||||
mkdirSync(dirname(databasePath), { recursive: true });
|
||||
|
||||
export const env = {
|
||||
nodeEnv: parsed.data.NODE_ENV,
|
||||
isProduction: parsed.data.NODE_ENV === 'production',
|
||||
port: parsed.data.API_PORT,
|
||||
webOrigin: parsed.data.WEB_ORIGIN,
|
||||
webDistPath,
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 794 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"reference": {
|
||||
"canonical": "/generated/hud/reference/tinywaste-hud-reference.png",
|
||||
"notes": "Current no-character HUD reference. Replaces the earlier right-side portrait layout."
|
||||
},
|
||||
"atlases": {
|
||||
"chromeSource": "/generated/hud/atlases/hud-chrome-atlas-source.png",
|
||||
"chromeTransparent": "/generated/hud/atlases/hud-chrome-atlas.png",
|
||||
"iconSource": "/generated/hud/atlases/hud-icon-atlas-source.png",
|
||||
"iconTransparent": "/generated/hud/atlases/hud-icon-atlas.png"
|
||||
},
|
||||
"chrome": {
|
||||
"panelWide": "/generated/hud/chrome/panel-wide.png",
|
||||
"panelTall": "/generated/hud/chrome/panel-tall.png",
|
||||
"panelCard": "/generated/hud/chrome/panel-card.png",
|
||||
"panelCompact": "/generated/hud/chrome/panel-compact.png",
|
||||
"routeCardIdle": "/generated/hud/chrome/route-card-idle.png",
|
||||
"routeCardActive": "/generated/hud/chrome/route-card-active.png",
|
||||
"actionCardPrimary": "/generated/hud/chrome/action-card-primary.png",
|
||||
"actionCardSecondary": "/generated/hud/chrome/action-card-secondary.png",
|
||||
"statusCapsule": "/generated/hud/chrome/status-capsule.png",
|
||||
"statusMeter": "/generated/hud/chrome/status-meter.png",
|
||||
"quickStrip": "/generated/hud/chrome/quick-strip.png",
|
||||
"quickStripLocked": "/generated/hud/chrome/quick-strip-locked.png",
|
||||
"dockTabIdle": "/generated/hud/chrome/dock-tab-idle.png",
|
||||
"dockTabActive": "/generated/hud/chrome/dock-tab-active.png",
|
||||
"warningStrip": "/generated/hud/chrome/warning-strip.png",
|
||||
"dividerOrnament": "/generated/hud/chrome/divider-ornament.png"
|
||||
},
|
||||
"icons": {
|
||||
"shelter": "/generated/hud/icons/shelter.png",
|
||||
"expedition": "/generated/hud/icons/expedition.png",
|
||||
"inventory": "/generated/hud/icons/inventory.png",
|
||||
"crafting": "/generated/hud/icons/crafting.png",
|
||||
"skills": "/generated/hud/icons/skills.png",
|
||||
"factions": "/generated/hud/icons/factions.png",
|
||||
"map": "/generated/hud/icons/map.png",
|
||||
"weather": "/generated/hud/icons/weather.png",
|
||||
"clock": "/generated/hud/icons/clock.png",
|
||||
"routePin": "/generated/hud/icons/route-pin.png",
|
||||
"rest": "/generated/hud/icons/rest.png",
|
||||
"repair": "/generated/hud/icons/repair.png",
|
||||
"scavenge": "/generated/hud/icons/scavenge.png",
|
||||
"signal": "/generated/hud/icons/signal.png",
|
||||
"settings": "/generated/hud/icons/settings.png",
|
||||
"logout": "/generated/hud/icons/logout.png"
|
||||
},
|
||||
"pipeline": {
|
||||
"transparentCleanup": "python3 \"$HOME/.codex/skills/.system/imagegen/scripts/remove_chroma_key.py\"",
|
||||
"sliceScript": "scripts/slice_hud_atlas.py"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
+15
-2357
File diff suppressed because it is too large
Load Diff
+14
-11
@@ -2,6 +2,7 @@ import './App.css';
|
||||
import { AuthScreen } from './features/auth/components/AuthScreen';
|
||||
import { NewGameScreen } from './features/auth/components/NewGameScreen';
|
||||
import { GameHud } from './features/game/components/GameHud';
|
||||
import { ErrorBoundary } from './features/shared/components/ErrorBoundary';
|
||||
import { LoadingScreen } from './features/shared/components/LoadingScreen';
|
||||
import { useGameSession } from './features/session/useGameSession';
|
||||
|
||||
@@ -45,17 +46,19 @@ function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<GameHud
|
||||
accountName={session.user.username}
|
||||
gameError={session.gameError}
|
||||
isRestarting={session.createGameMutation.isPending}
|
||||
isWorking={session.isWorking}
|
||||
logoutPending={session.logoutPending}
|
||||
onLogout={session.logout}
|
||||
onRestart={session.startNewGame}
|
||||
onSendAction={session.sendAction}
|
||||
view={session.view}
|
||||
/>
|
||||
<ErrorBoundary>
|
||||
<GameHud
|
||||
accountName={session.user.username}
|
||||
gameError={session.gameError}
|
||||
isRestarting={session.createGameMutation.isPending}
|
||||
isWorking={session.isWorking}
|
||||
logoutPending={session.logoutPending}
|
||||
onLogout={session.logout}
|
||||
onRestart={session.startNewGame}
|
||||
onSendAction={session.sendAction}
|
||||
view={session.view}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.5 KiB |
@@ -1,6 +1,7 @@
|
||||
import type { OverlayPanel } from '../types';
|
||||
import type { GameAction, GameView } from '@tinywaste/game-core';
|
||||
import { getActiveQuestCount, getCurrentPlace, getDominantAlert, getSupplyCounts } from '../hudModel';
|
||||
import { HudIcon } from './HudIcon';
|
||||
|
||||
export function BottomDock({
|
||||
activePanel,
|
||||
@@ -9,7 +10,7 @@ export function BottomDock({
|
||||
view,
|
||||
}: {
|
||||
activePanel: OverlayPanel | null;
|
||||
onOpenPanel: (panel: OverlayPanel) => void;
|
||||
onOpenPanel: (panel: OverlayPanel | null) => void;
|
||||
onSendAction: (action: GameAction) => void;
|
||||
view: GameView;
|
||||
}) {
|
||||
@@ -18,44 +19,47 @@ export function BottomDock({
|
||||
const currentPlace = getCurrentPlace(view);
|
||||
const homeRoute = view.map.edges.find((edge) => edge.to === 'home');
|
||||
const dominantAlert = getDominantAlert(view);
|
||||
const dockTabs: Array<{
|
||||
id: OverlayPanel | 'local';
|
||||
label: string;
|
||||
icon: 'shelter' | 'expedition' | 'inventory' | 'crafting' | 'skills' | 'factions' | 'map';
|
||||
onClick?: () => void;
|
||||
}> = [
|
||||
{ id: 'local', label: currentPlace?.name ?? 'Expedition', icon: 'expedition' },
|
||||
{ id: 'inventory', label: '背包', icon: 'inventory', onClick: () => onOpenPanel('inventory') },
|
||||
{ id: 'blueprints', label: '蓝图', icon: 'crafting', onClick: () => onOpenPanel('blueprints') },
|
||||
{ id: 'missions', label: '任务', icon: 'skills', onClick: () => onOpenPanel('missions') },
|
||||
{ id: 'logs', label: '日志', icon: 'factions', onClick: () => onOpenPanel('logs') },
|
||||
{ id: 'local', label: '地图', icon: 'map', onClick: () => onOpenPanel(null) },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className="command-dock tactical-dock">
|
||||
<footer className="command-dock tactical-dock hud-dock-frame">
|
||||
<div className="operator-card tactical-operator">
|
||||
<div className="operator-emblem">{view.player.name.slice(0, 1)}</div>
|
||||
<div className="operator-copy">
|
||||
<span>ACTIVE SURVIVOR</span>
|
||||
<span>在线幸存者</span>
|
||||
<strong>{view.player.name}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="dock-nav-groups">
|
||||
<div className="dock-tabs">
|
||||
<button className="dock-tab active">{currentPlace?.name ?? 'Expedition'}</button>
|
||||
<button
|
||||
className={`dock-tab ${activePanel === 'blueprints' ? 'active' : ''}`}
|
||||
onClick={() => onOpenPanel('blueprints')}
|
||||
>
|
||||
Crafting
|
||||
</button>
|
||||
<button
|
||||
className={`dock-tab ${activePanel === 'logs' ? 'active' : ''}`}
|
||||
onClick={() => onOpenPanel('logs')}
|
||||
>
|
||||
Logs
|
||||
</button>
|
||||
<button
|
||||
className={`dock-tab ${activePanel === 'inventory' ? 'active' : ''}`}
|
||||
onClick={() => onOpenPanel('inventory')}
|
||||
>
|
||||
Inventory
|
||||
</button>
|
||||
<button
|
||||
className={`dock-tab ${activePanel === 'missions' ? 'active' : ''}`}
|
||||
onClick={() => onOpenPanel('missions')}
|
||||
>
|
||||
Missions
|
||||
</button>
|
||||
{dockTabs.map((tab, index) => {
|
||||
const isCurrentLocation = index === 0 && activePanel === null;
|
||||
const isActive = tab.id !== 'local' ? activePanel === tab.id : isCurrentLocation;
|
||||
return (
|
||||
<button
|
||||
key={`${tab.label}-${index}`}
|
||||
className={`dock-tab ${isActive ? 'active' : ''}`}
|
||||
onClick={tab.onClick}
|
||||
type="button"
|
||||
>
|
||||
<HudIcon name={tab.icon} className="dock-tab-icon" />
|
||||
<span>{tab.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="dock-metrics">
|
||||
@@ -73,10 +77,12 @@ export function BottomDock({
|
||||
className="primary-button dock-commit-button"
|
||||
onClick={() => onSendAction({ type: 'travel', toPlaceId: homeRoute.to })}
|
||||
>
|
||||
<HudIcon name="shelter" className="dock-commit-icon" />
|
||||
返回避难点
|
||||
</button>
|
||||
) : (
|
||||
<button className="primary-button dock-commit-button" onClick={() => onOpenPanel('inventory')}>
|
||||
<HudIcon name="inventory" className="dock-commit-icon" />
|
||||
打开补给终端
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -1,12 +1,25 @@
|
||||
import type { GameAction, GameView, InventoryViewEntry } from '@tinywaste/game-core';
|
||||
import { getLatestLog, getPrimaryObjective, getQuickUseItems } from '../hudModel';
|
||||
import { getPlaceHeroStyle } from '../uiAssets';
|
||||
import { getItemArt, getPlaceHeroStyle, type HudIconAsset } from '../uiAssets';
|
||||
import type { OverlayPanel } from '../types';
|
||||
import { AssetThumb } from './AssetThumb';
|
||||
import { HudIcon } from './HudIcon';
|
||||
|
||||
const MIN_SUCCESS_CHANCE = 15;
|
||||
const REST_DURATION_MINUTES = 30;
|
||||
|
||||
function pickRecoveryItem(items: InventoryViewEntry[], type: 'water' | 'food' | 'medicine') {
|
||||
return items.find((item) => item.type === type);
|
||||
}
|
||||
|
||||
function getOperationIcon(actionId: string): HudIconAsset {
|
||||
if (actionId.includes('rest')) return 'rest';
|
||||
if (actionId.includes('repair') || actionId.includes('fix')) return 'repair';
|
||||
if (actionId.includes('craft')) return 'crafting';
|
||||
if (actionId.includes('search') || actionId.includes('scavenge') || actionId.includes('collect')) return 'scavenge';
|
||||
return 'expedition';
|
||||
}
|
||||
|
||||
export function CommandCenter({
|
||||
gameError,
|
||||
isWorking,
|
||||
@@ -20,7 +33,7 @@ export function CommandCenter({
|
||||
onSendAction: (action: GameAction) => void;
|
||||
view: GameView;
|
||||
}) {
|
||||
const quickUseItems = getQuickUseItems(view);
|
||||
const quickUseItems = getQuickUseItems(view, 6);
|
||||
const primaryObjective = getPrimaryObjective(view);
|
||||
const latestLog = getLatestLog(view);
|
||||
const primaryAlert = view.survival.alerts[0] ?? null;
|
||||
@@ -32,198 +45,168 @@ export function CommandCenter({
|
||||
const water = pickRecoveryItem(quickUseItems, 'water');
|
||||
if (water) {
|
||||
return {
|
||||
kicker: 'Recover now',
|
||||
title: `饮用 ${water.name}`,
|
||||
icon: 'inventory' as const,
|
||||
title: `使用 ${water.name}`,
|
||||
description: primaryAlert.recovery,
|
||||
hint: '先把出行窗口拉回来，再考虑继续搜刮。',
|
||||
chips: [`携带 x${water.count}`, '即时恢复', '口渴优先'],
|
||||
actionLabel: '立即饮水',
|
||||
label: '恢复',
|
||||
time: '0 分钟',
|
||||
actionLabel: '立即使用',
|
||||
chance: '100%',
|
||||
items: quickUseItems.slice(0, 6),
|
||||
onClick: () => onSendAction({ type: 'use-item', itemId: water.itemId }),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (primaryAlert?.stat === 'hunger') {
|
||||
const food = pickRecoveryItem(quickUseItems, 'food');
|
||||
if (food) {
|
||||
return {
|
||||
kicker: 'Recover now',
|
||||
title: `吃掉 ${food.name}`,
|
||||
description: primaryAlert.recovery,
|
||||
hint: '热量恢复后，连续行动的容错会更高。',
|
||||
chips: [`携带 x${food.count}`, '即时恢复', '饥饿优先'],
|
||||
actionLabel: '立即进食',
|
||||
onClick: () => onSendAction({ type: 'use-item', itemId: food.itemId }),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (primaryAlert && (primaryAlert.stat === 'life' || primaryAlert.stat === 'radiation')) {
|
||||
const medicine = pickRecoveryItem(quickUseItems, 'medicine');
|
||||
if (medicine) {
|
||||
return {
|
||||
kicker: 'Stabilize',
|
||||
title: `使用 ${medicine.name}`,
|
||||
description: primaryAlert.recovery,
|
||||
hint: '先把身体拉回稳定区，再决定是否继续推进。',
|
||||
chips: [`携带 x${medicine.count}`, '医疗补给', primaryAlert.label],
|
||||
actionLabel: '立即处理',
|
||||
onClick: () => onSendAction({ type: 'use-item', itemId: medicine.itemId }),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (primaryAlert?.stat === 'energy' && view.place.services.includes('rest')) {
|
||||
return {
|
||||
kicker: 'Recover now',
|
||||
title: '短休 30 分钟',
|
||||
icon: 'rest' as const,
|
||||
title: '休息',
|
||||
description: primaryAlert.recovery,
|
||||
hint: '把精力先抬到安全线，再出门会更稳。',
|
||||
chips: ['30 分钟', '精力恢复', '低风险'],
|
||||
actionLabel: '立即休整',
|
||||
onClick: () => onSendAction({ type: 'rest', minutes: 30 }),
|
||||
label: '恢复',
|
||||
time: '12 分钟',
|
||||
actionLabel: '立即休息',
|
||||
chance: '安全',
|
||||
items: quickUseItems.slice(0, 6),
|
||||
onClick: () => onSendAction({ type: 'rest', minutes: REST_DURATION_MINUTES }),
|
||||
};
|
||||
}
|
||||
|
||||
if (firstUtilityAction) {
|
||||
return {
|
||||
kicker: 'Next move',
|
||||
icon: getOperationIcon(firstUtilityAction.id),
|
||||
title: firstUtilityAction.name,
|
||||
description: firstUtilityAction.desc,
|
||||
hint: firstUtilityAction.rewardHint,
|
||||
chips: [
|
||||
`${firstUtilityAction.timeCostMin} 分钟`,
|
||||
`精力 -${firstUtilityAction.energyCost}`,
|
||||
`风险 ${Math.round(firstUtilityAction.risk * 100)}%`,
|
||||
],
|
||||
actionLabel: '执行行动',
|
||||
label: '主要行动',
|
||||
time: `${firstUtilityAction.timeCostMin} 分钟`,
|
||||
actionLabel: '执行',
|
||||
chance: `${Math.max(MIN_SUCCESS_CHANCE, 100 - Math.round(firstUtilityAction.risk * 100))}%`,
|
||||
items: quickUseItems.slice(0, 6),
|
||||
onClick: () => onSendAction({ type: 'perform-action', actionId: firstUtilityAction.id }),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
kicker: 'System focus',
|
||||
title: '打开背包面板',
|
||||
description: '当前没有可直接执行的扇区行为，先整理资源和配装。',
|
||||
hint: '库存与仓储都在系统面板里管理。',
|
||||
chips: ['系统面板', '整理补给', '继续规划'],
|
||||
actionLabel: '打开背包',
|
||||
icon: 'inventory' as const,
|
||||
title: '打开背包',
|
||||
description: '出发前整理补给物资。',
|
||||
label: '系统',
|
||||
time: '0 分钟',
|
||||
actionLabel: '打开',
|
||||
chance: '安全',
|
||||
items: quickUseItems.slice(0, 6),
|
||||
onClick: () => onOpenPanel('inventory'),
|
||||
};
|
||||
})();
|
||||
|
||||
const secondaryOperations = [
|
||||
...view.place.actions
|
||||
.filter((action) => !action.disabledReason && action.id !== firstUtilityAction?.id)
|
||||
.slice(0, 3)
|
||||
.map((action) => ({
|
||||
id: action.id,
|
||||
title: action.name,
|
||||
detail: action.rewardHint,
|
||||
meta: `${action.timeCostMin}m · 风险 ${Math.round(action.risk * 100)}%`,
|
||||
onClick: () => onSendAction({ type: 'perform-action', actionId: action.id }),
|
||||
})),
|
||||
{
|
||||
id: 'inventory',
|
||||
title: '整理补给',
|
||||
detail: '打开背包与避难所仓储',
|
||||
meta: 'inventory',
|
||||
onClick: () => onOpenPanel('inventory'),
|
||||
},
|
||||
{
|
||||
id: 'blueprints',
|
||||
title: '检查蓝图',
|
||||
detail: '查看可制作项与材料缺口',
|
||||
meta: 'crafting',
|
||||
onClick: () => onOpenPanel('blueprints'),
|
||||
},
|
||||
].slice(0, 5);
|
||||
const secondaryOperations = view.place.actions
|
||||
.filter((action) => !action.disabledReason && action.id !== firstUtilityAction?.id)
|
||||
.slice(0, 2)
|
||||
.map((action) => ({
|
||||
id: action.id,
|
||||
icon: getOperationIcon(action.id),
|
||||
title: action.name,
|
||||
detail: action.rewardHint,
|
||||
time: `${action.timeCostMin} 分钟`,
|
||||
onClick: () => onSendAction({ type: 'perform-action', actionId: action.id }),
|
||||
}));
|
||||
|
||||
return (
|
||||
<section className="panel panel-command theater-panel">
|
||||
<div className="theater-scene" style={getPlaceHeroStyle(view.place.id)}>
|
||||
<div className="theater-scene-copy">
|
||||
<p className="eyebrow">Operation theater</p>
|
||||
<h2>{view.header.placeName}</h2>
|
||||
<section className="panel panel-command theater-panel hud-shell-panel">
|
||||
<header className="theater-titlebar">
|
||||
<div>
|
||||
<h2>{view.header.placeName.toUpperCase()}</h2>
|
||||
<p>{view.header.placeDesc}</p>
|
||||
</div>
|
||||
|
||||
<div className="theater-scene-side">
|
||||
<article className="scene-focus-card">
|
||||
<span>当前重点</span>
|
||||
<strong>{primaryObjective?.title ?? view.survival.headline}</strong>
|
||||
<p>{primaryObjective?.detail ?? '先处理生存威胁，再推进任务。'}</p>
|
||||
<div className="theater-titlebar-metrics">
|
||||
<article>
|
||||
<span>预计耗时</span>
|
||||
<strong>{primaryOperation.time}</strong>
|
||||
</article>
|
||||
<article className={`scene-focus-card ${gameError ? 'error' : ''}`}>
|
||||
<span>扇区反馈</span>
|
||||
<strong>{primaryAlert ? primaryAlert.summary : '链路稳定'}</strong>
|
||||
<p>{gameError ?? latestLog?.message ?? '最新日志会在这里同步关键结果。'}</p>
|
||||
<article>
|
||||
<span>风险等级</span>
|
||||
<strong className={primaryAlert ? 'warn' : 'safe'}>{view.header.riskLabel}</strong>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="theater-deck">
|
||||
<section className="primary-operation-card">
|
||||
<div className="primary-operation-copy">
|
||||
<span>{primaryOperation.kicker}</span>
|
||||
<h3>{primaryOperation.title}</h3>
|
||||
<p>{primaryOperation.description}</p>
|
||||
</div>
|
||||
<div className="operation-chip-row">
|
||||
{primaryOperation.chips.map((chip) => (
|
||||
<span key={chip}>{chip}</span>
|
||||
<div className="theater-scene-stage">
|
||||
<div className="theater-scene-image" style={getPlaceHeroStyle(view.place.id)} />
|
||||
|
||||
<div className="theater-action-zone">
|
||||
<section className="theater-primary-card">
|
||||
<div className="theater-primary-head">
|
||||
<HudIcon name={primaryOperation.icon} className="theater-action-icon" />
|
||||
<span>{primaryOperation.label}</span>
|
||||
</div>
|
||||
<div className="theater-primary-copy">
|
||||
<h3>{primaryOperation.title}</h3>
|
||||
<p>{primaryOperation.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="theater-find-row">
|
||||
<div className="theater-find-meta">
|
||||
<span>最佳发现概率</span>
|
||||
<strong>{primaryOperation.chance}</strong>
|
||||
</div>
|
||||
<div className="theater-find-meta">
|
||||
<span>时间消耗</span>
|
||||
<strong>{primaryOperation.time}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="theater-potential-finds">
|
||||
{primaryOperation.items.slice(0, 6).map((item) => (
|
||||
<AssetThumb
|
||||
key={`potential-${item.itemId}`}
|
||||
src={getItemArt(item.itemId, item.type)}
|
||||
label={item.name}
|
||||
className="potential-find-thumb"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="primary-button theater-primary-button" disabled={isWorking} onClick={primaryOperation.onClick} type="button">
|
||||
{primaryOperation.actionLabel}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div className="theater-secondary-column">
|
||||
{secondaryOperations.map((operation) => (
|
||||
<button key={operation.id} className="theater-secondary-card" disabled={isWorking} onClick={operation.onClick} type="button">
|
||||
<HudIcon name={operation.icon} className="theater-action-icon" />
|
||||
<div>
|
||||
<strong>{operation.title}</strong>
|
||||
<p>{operation.detail}</p>
|
||||
</div>
|
||||
<span>{operation.time}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<small>{primaryOperation.hint}</small>
|
||||
<button className="primary-button operation-commit-button" disabled={isWorking} onClick={primaryOperation.onClick}>
|
||||
{primaryOperation.actionLabel}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="secondary-operation-stack">
|
||||
{secondaryOperations.map((operation) => (
|
||||
<button
|
||||
key={operation.id}
|
||||
className="secondary-operation-card"
|
||||
disabled={isWorking}
|
||||
onClick={operation.onClick}
|
||||
>
|
||||
<strong>{operation.title}</strong>
|
||||
<p>{operation.detail}</p>
|
||||
<small>{operation.meta}</small>
|
||||
</button>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div className="theater-intel-grid">
|
||||
<article className="intel-focus-card">
|
||||
<span>Mission thread</span>
|
||||
<strong>{primaryObjective?.title ?? '暂无关键目标'}</strong>
|
||||
<p>{primaryObjective?.detail ?? '继续探索以触发新的委托与线索。'}</p>
|
||||
</article>
|
||||
|
||||
<article className="intel-focus-card">
|
||||
<span>Recent log</span>
|
||||
<strong>{latestLog ? `${latestLog.minute}m` : '日志空闲'}</strong>
|
||||
<p>{latestLog?.message ?? '还没有新的结构化战报。'}</p>
|
||||
</article>
|
||||
|
||||
<article className="intel-focus-card system">
|
||||
<span>Systems</span>
|
||||
<strong>中频终端</strong>
|
||||
<div className="intel-system-links">
|
||||
<button className="small-button secondary" onClick={() => onOpenPanel('logs')}>
|
||||
日志
|
||||
</button>
|
||||
<button className="small-button secondary" onClick={() => onOpenPanel('missions')}>
|
||||
任务
|
||||
</button>
|
||||
<button className="small-button secondary" onClick={() => onOpenPanel('blueprints')}>
|
||||
蓝图
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<footer className="theater-intel-strip">
|
||||
<article className="theater-intel-block">
|
||||
<span>区域情报</span>
|
||||
<p>{latestLog?.message ?? '近期有拾荒者活动，发现少量物资缓存。'}</p>
|
||||
</article>
|
||||
<article className="theater-intel-block compact">
|
||||
<HudIcon name="expedition" className="theater-intel-icon" />
|
||||
<strong>{primaryObjective?.title ?? '任务线索'}</strong>
|
||||
</article>
|
||||
<article className="theater-intel-block compact">
|
||||
<HudIcon name="inventory" className="theater-intel-icon" />
|
||||
<strong>{view.player.inventoryUsage}/{view.player.inventoryCapacity}</strong>
|
||||
</article>
|
||||
<article className="theater-intel-block compact">
|
||||
<HudIcon name="signal" className="theater-intel-icon" />
|
||||
<strong>{gameError ?? latestLog?.minute ? `${latestLog?.minute ?? 0}分` : '在线'}</strong>
|
||||
</article>
|
||||
<article className="theater-intel-block compact">
|
||||
<HudIcon name="weather" className="theater-intel-icon" />
|
||||
<strong>{primaryAlert ? primaryAlert.label : '安全'}</strong>
|
||||
</article>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import { getHudIconArt, type HudIconAsset } from '../uiAssets';
|
||||
|
||||
export function HudIcon({
|
||||
name,
|
||||
label,
|
||||
className = '',
|
||||
decorative = true,
|
||||
}: {
|
||||
name: HudIconAsset;
|
||||
label?: string;
|
||||
className?: string;
|
||||
decorative?: boolean;
|
||||
}) {
|
||||
const src = getHudIconArt(name);
|
||||
return <img alt={decorative ? '' : label ?? name} aria-hidden={decorative} className={`hud-icon ${className}`.trim()} src={src} />;
|
||||
}
|
||||
@@ -1,15 +1,10 @@
|
||||
import type { GameAction, GameView } from '@tinywaste/game-core';
|
||||
import { useMemo } from 'react';
|
||||
import { getItemArt } from '../uiAssets';
|
||||
import {
|
||||
getLoadoutEntries,
|
||||
getQuickUseItems,
|
||||
getStatusEffects,
|
||||
getSurvivorMetrics,
|
||||
} from '../hudModel';
|
||||
import { getLoadoutEntries, getQuickUseItems, getStatusEffects, getSurvivorMetrics } from '../hudModel';
|
||||
import type { OverlayPanel } from '../types';
|
||||
import { AssetThumb } from './AssetThumb';
|
||||
import { PanelHeader } from '../../shared/components/PanelHeader';
|
||||
import { HudIcon } from './HudIcon';
|
||||
|
||||
export function LoadoutPanel({
|
||||
isWorking,
|
||||
@@ -24,143 +19,122 @@ export function LoadoutPanel({
|
||||
}) {
|
||||
const loadoutEntries = useMemo(() => getLoadoutEntries(view), [view]);
|
||||
const statusEffects = useMemo(() => getStatusEffects(view), [view]);
|
||||
const quickUseItems = useMemo(() => getQuickUseItems(view, 5), [view]);
|
||||
const quickUseItems = useMemo(() => getQuickUseItems(view, 3), [view]);
|
||||
const survivorMetrics = useMemo(() => getSurvivorMetrics(view), [view]);
|
||||
const equipmentEntries = useMemo(
|
||||
() => [...loadoutEntries.left, ...loadoutEntries.right],
|
||||
() => [...loadoutEntries.right.slice(0, 2), loadoutEntries.left[1], loadoutEntries.right[2], loadoutEntries.left[2]],
|
||||
[loadoutEntries.left, loadoutEntries.right],
|
||||
);
|
||||
const storagePreview = useMemo(() => view.player.storage.slice(0, 5), [view.player.storage]);
|
||||
|
||||
return (
|
||||
<section className="panel panel-loadout survivor-panel">
|
||||
<div className="panel-tabs survivor-tabs">
|
||||
<button className="active">Character</button>
|
||||
<button onClick={() => onOpenPanel('inventory')}>Inventory</button>
|
||||
<button onClick={() => onOpenPanel('missions')}>Missions</button>
|
||||
</div>
|
||||
|
||||
<div className="survivor-head">
|
||||
<div>
|
||||
<p className="eyebrow">Survivor rig</p>
|
||||
<section className="panel panel-loadout equipment-terminal">
|
||||
<header className="equipment-terminal-head">
|
||||
<div className="equipment-terminal-title">
|
||||
<p className="eyebrow">装备</p>
|
||||
<strong>{view.player.name}</strong>
|
||||
</div>
|
||||
<div className="survivor-head-chips">
|
||||
<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>
|
||||
|
||||
<section className="subpanel equipment-grid-panel">
|
||||
<PanelHeader title="Equipment" subtitle="去掉人物展示后，右侧改为纯功能 HUD 终端" compact />
|
||||
<div className="survivor-equipment-grid">
|
||||
{equipmentEntries.map((entry) => (
|
||||
<article key={entry.id} className={`loadout-slot equipment-module ${entry.isEquipped ? 'equipped' : ''}`}>
|
||||
<AssetThumb src={entry.art} label={entry.title} className="slot-thumb" />
|
||||
<div className="slot-copy">
|
||||
<span>{entry.label}</span>
|
||||
<strong>{entry.title}</strong>
|
||||
<small>{entry.subtitle}</small>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
<section 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">
|
||||
<span>模组</span>
|
||||
</div>
|
||||
<div className="equipment-slot-placeholder">+</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="survivor-metrics-row">
|
||||
<section className="equipment-metrics-row">
|
||||
{survivorMetrics.map((metric) => (
|
||||
<article key={metric.id} className="survivor-metric-card">
|
||||
<article key={metric.id} className="equipment-metric-box">
|
||||
<span>{metric.label}</span>
|
||||
<strong>{metric.value}</strong>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="survivor-warning-strip">
|
||||
{statusEffects.map((effect) => (
|
||||
<article key={effect.id} className={`survivor-warning-card tone-${effect.tone}`}>
|
||||
{effect.art ? <img className="status-effect-icon" src={effect.art} alt={effect.label} /> : null}
|
||||
<div>
|
||||
<strong>{effect.label}</strong>
|
||||
<p>{effect.detail}</p>
|
||||
<section className="warning-terminal">
|
||||
<div className="warning-terminal-head">
|
||||
<span>生存警报</span>
|
||||
</div>
|
||||
<div className="warning-terminal-list">
|
||||
{statusEffects.slice(0, 3).map((effect) => (
|
||||
<article key={effect.id} className={`warning-meter tone-${effect.tone}`}>
|
||||
<div className="warning-meter-head">
|
||||
<span>{effect.label.split('·')[0].trim()}</span>
|
||||
</div>
|
||||
<div className="warning-meter-track">
|
||||
<div className="warning-meter-fill" />
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="ready-pack-frame">
|
||||
<div className="ready-pack-head">
|
||||
<span>快速补给</span>
|
||||
<p>快速补给和仓储摘要</p>
|
||||
</div>
|
||||
|
||||
<div className="ready-pack-columns">
|
||||
<div>
|
||||
<strong>快捷栏</strong>
|
||||
<div className="quick-access-row">
|
||||
{quickUseItems.map((item) => (
|
||||
<button
|
||||
key={`quick-${item.itemId}`}
|
||||
className="quick-access-slot"
|
||||
disabled={isWorking}
|
||||
onClick={() => onSendAction({ type: 'use-item', itemId: item.itemId })}
|
||||
type="button"
|
||||
>
|
||||
<AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} className="quick-access-thumb" />
|
||||
<span>{item.count}</span>
|
||||
</button>
|
||||
))}
|
||||
{Array.from({ length: Math.max(0, 4 - quickUseItems.length) }).map((_, index) => (
|
||||
<article key={`quick-empty-${index}`} className="quick-access-slot locked">
|
||||
<span>锁定</span>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="subpanel quick-slot-panel survivor-supply-panel">
|
||||
<PanelHeader title="Quick supplies" subtitle="高频补给直接可点，不再只是展示" compact />
|
||||
<div className="survivor-supply-grid">
|
||||
{quickUseItems.map((item) => (
|
||||
<button
|
||||
key={`quick-use-${item.itemId}`}
|
||||
className="survivor-supply-card"
|
||||
disabled={isWorking}
|
||||
onClick={() => onSendAction({ type: 'use-item', itemId: item.itemId })}
|
||||
>
|
||||
<AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} />
|
||||
<div className="survivor-supply-copy">
|
||||
<strong>{item.name}</strong>
|
||||
<span>x{item.count}</span>
|
||||
<small>{item.type}</small>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{Array.from({ length: Math.max(0, 5 - quickUseItems.length) }).map((_, index) => (
|
||||
<article key={`locked-${index}`} className="survivor-supply-card locked">
|
||||
<div className="quick-slot-lock">EMPTY</div>
|
||||
</article>
|
||||
))}
|
||||
<div>
|
||||
<strong>仓储</strong>
|
||||
<div className="stash-row">
|
||||
{storagePreview.map((item) => (
|
||||
<article key={`stash-${item.itemId}`} className="stash-slot">
|
||||
<AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} className="quick-access-thumb" />
|
||||
<span>{item.count}</span>
|
||||
</article>
|
||||
))}
|
||||
<button className="stash-slot stash-open" onClick={() => onOpenPanel('inventory')} type="button">
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="subpanel survivor-stash-panel">
|
||||
<PanelHeader
|
||||
title="Stash snapshot"
|
||||
subtitle={
|
||||
view.player.storageAccessible
|
||||
? `避难所仓储 ${view.player.storageUsage}/${view.player.storageCapacity}`
|
||||
: '离开避难所后只保留摘要'
|
||||
}
|
||||
compact
|
||||
/>
|
||||
<div className="survivor-stash-grid">
|
||||
{storagePreview.map((item) => (
|
||||
<article key={`stash-${item.itemId}`} className="survivor-stash-card">
|
||||
<AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} />
|
||||
<div className="survivor-stash-copy">
|
||||
<strong>{item.name}</strong>
|
||||
<span>x{item.count}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
<button className="secondary-button survivor-stash-open" onClick={() => onOpenPanel('inventory')}>
|
||||
打开仓储终端
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="subpanel survivor-actions-panel">
|
||||
<PanelHeader title="Field terminals" subtitle="中频系统从这里切换，主屏只保留决策所需" compact />
|
||||
<div className="panel-link-grid">
|
||||
<button className="secondary-button panel-link-button" onClick={() => onOpenPanel('inventory')}>
|
||||
背包 / 仓储
|
||||
</button>
|
||||
<button className="secondary-button panel-link-button" onClick={() => onOpenPanel('blueprints')}>
|
||||
制作蓝图
|
||||
</button>
|
||||
<button className="secondary-button panel-link-button" onClick={() => onOpenPanel('missions')}>
|
||||
任务线程
|
||||
</button>
|
||||
<button className="secondary-button panel-link-button" onClick={() => onOpenPanel('logs')}>
|
||||
行动日志
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<button className="secondary-button equipment-terminal-button" onClick={() => onOpenPanel('inventory')} type="button">
|
||||
打开背包 / 仓储终端
|
||||
</button>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
import type { GameAction, GameView } from '@tinywaste/game-core';
|
||||
import { edgeDestination, getActiveQuestCount, getCurrentPlace, getExpeditionStatus, getRiskDots, getRouteRiskTier } from '../hudModel';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
edgeDestination,
|
||||
getCurrentPlace,
|
||||
getExpeditionStatus,
|
||||
getPlaceAtmosphere,
|
||||
getRiskDots,
|
||||
getRouteRiskTier,
|
||||
getVisibleRoutes,
|
||||
} from '../hudModel';
|
||||
import { getPlaceThumbStyle } from '../uiAssets';
|
||||
import { PanelHeader } from '../../shared/components/PanelHeader';
|
||||
import { HudIcon } from './HudIcon';
|
||||
|
||||
export function RoutePanel({
|
||||
isWorking,
|
||||
@@ -12,100 +21,105 @@ export function RoutePanel({
|
||||
onSendAction: (action: GameAction) => void;
|
||||
view: GameView;
|
||||
}) {
|
||||
const [safeOnly, setSafeOnly] = useState(false);
|
||||
const currentPlace = getCurrentPlace(view);
|
||||
const activeQuestCount = getActiveQuestCount(view);
|
||||
const placeId = currentPlace?.id ?? view.place.id;
|
||||
const expedition = getExpeditionStatus(view);
|
||||
const atmosphere = getPlaceAtmosphere(placeId);
|
||||
const allRoutes = getVisibleRoutes(view, 10);
|
||||
const routes = safeOnly
|
||||
? allRoutes.filter((edge) => !edge.blockedReason && getRouteRiskTier(edge.risk).tone === 'safe')
|
||||
: allRoutes.slice(0, 3);
|
||||
const launchRoute = routes[0] ?? null;
|
||||
|
||||
return (
|
||||
<section className="panel panel-route expedition-panel">
|
||||
<header className="expedition-head">
|
||||
<section className="panel panel-route expedition-panel hud-shell-panel">
|
||||
<header className="expedition-panel-head">
|
||||
<div>
|
||||
<p className="eyebrow">Expedition rail</p>
|
||||
<p className="eyebrow">探索</p>
|
||||
<h2>{currentPlace?.name ?? view.header.placeName}</h2>
|
||||
</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>
|
||||
|
||||
<article className="expedition-core">
|
||||
<span className="intel-kicker">CURRENT SECTOR</span>
|
||||
<p>{view.header.placeDesc}</p>
|
||||
<div className="expedition-status-grid">
|
||||
<article className="expedition-status-card">
|
||||
<small>准备度</small>
|
||||
<strong>{expedition.readiness}%</strong>
|
||||
</article>
|
||||
<article className="expedition-status-card">
|
||||
<small>负载</small>
|
||||
<strong>{view.player.inventoryUsage}/{view.player.inventoryCapacity}</strong>
|
||||
</article>
|
||||
<article className="expedition-status-card">
|
||||
<small>威胁</small>
|
||||
<strong>{expedition.threatCount || activeQuestCount}</strong>
|
||||
</article>
|
||||
<section className="expedition-routes-card">
|
||||
<div className="expedition-section-head">
|
||||
<span>路线</span>
|
||||
<button className={`expedition-toggle ${safeOnly ? 'active' : ''}`} type="button" onClick={() => setSafeOnly((prev) => !prev)}>
|
||||
{safeOnly ? '显示全部' : '仅安全路线'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="intel-meta">
|
||||
{(currentPlace?.tags ?? []).map((tag) => (
|
||||
<span key={tag} className="hud-chip muted">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section className="route-stack">
|
||||
<PanelHeader title="Routes" subtitle="选择下一段远行目标" compact />
|
||||
<div className="route-list expedition-route-list">
|
||||
{view.map.edges.map((edge) => {
|
||||
const destination = edgeDestination(view, edge);
|
||||
if (!destination) return null;
|
||||
<div className="expedition-route-stack">
|
||||
{routes.map((edge, index) => {
|
||||
const destination = edgeDestination(view, edge);
|
||||
if (!destination) return null;
|
||||
|
||||
const riskTier = getRouteRiskTier(edge.risk);
|
||||
const riskDots = getRiskDots(edge.risk);
|
||||
const riskTier = getRouteRiskTier(edge.risk);
|
||||
const riskDots = getRiskDots(edge.risk);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`${edge.from}-${edge.to}`}
|
||||
className={`route-card expedition-route-card tone-${riskTier.tone}`}
|
||||
disabled={Boolean(edge.blockedReason) || isWorking}
|
||||
onClick={() => onSendAction({ type: 'travel', toPlaceId: edge.to })}
|
||||
>
|
||||
<div className="route-card-thumb" style={getPlaceThumbStyle(destination.id)} />
|
||||
<div className="route-card-copy">
|
||||
<strong>{destination.name}</strong>
|
||||
<p>{destination.desc}</p>
|
||||
<div className="route-card-detail">
|
||||
<span>{edge.travelTimeMin} 分钟</span>
|
||||
<span>{riskTier.label}</span>
|
||||
return (
|
||||
<button
|
||||
key={`${edge.from}-${edge.to}`}
|
||||
className={`expedition-route-card ${index === 0 ? 'active' : ''} tone-${riskTier.tone}`}
|
||||
disabled={Boolean(edge.blockedReason) || isWorking}
|
||||
onClick={() => onSendAction({ type: 'travel', toPlaceId: edge.to })}
|
||||
type="button"
|
||||
>
|
||||
<div className="route-card-thumb" style={getPlaceThumbStyle(destination.id)} />
|
||||
<div className="route-card-copy">
|
||||
<div className="route-card-topline">
|
||||
<strong>{destination.name}</strong>
|
||||
<span>{destination.visited ? '已探明' : '未知'}</span>
|
||||
</div>
|
||||
<p>{destination.desc}</p>
|
||||
<div className="route-card-detail">
|
||||
<span>{edge.travelTimeMin} 分钟</span>
|
||||
<span>{riskTier.label}</span>
|
||||
</div>
|
||||
<div className="risk-dots" aria-hidden="true">
|
||||
{riskDots.map((active, dotIndex) => (
|
||||
<span key={`${destination.id}-${dotIndex}`} className={active ? 'active' : ''} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="risk-dots" aria-hidden="true">
|
||||
{riskDots.map((active, index) => (
|
||||
<span key={`${destination.id}-${index}`} className={active ? 'active' : ''} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="route-card-state">
|
||||
<span>{destination.visited ? '已探明' : '未知'}</span>
|
||||
{edge.blockedReason ? <em>{edge.blockedReason}</em> : null}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="world-map-panel expedition-map-panel">
|
||||
<PanelHeader title="Known sectors" subtitle="压缩后的节点情报" compact />
|
||||
<div className="map-node-grid expedition-map-grid">
|
||||
{view.map.places.map((place) => (
|
||||
<article key={place.id} className={`map-node-card ${place.current ? 'current' : ''}`}>
|
||||
<strong>{place.name}</strong>
|
||||
<span>{place.visited ? '已探明' : '待深入'}</span>
|
||||
<small>{place.tags.join(' · ') || 'unknown'}</small>
|
||||
</article>
|
||||
))}
|
||||
<section className="expedition-status-card">
|
||||
<div className="expedition-section-head">
|
||||
<span>探索状态</span>
|
||||
</div>
|
||||
<div className="expedition-status-grid">
|
||||
<article className="expedition-status-cell">
|
||||
<small>装备</small>
|
||||
<strong>{expedition.readiness}%</strong>
|
||||
</article>
|
||||
<article className="expedition-status-cell">
|
||||
<small>状态</small>
|
||||
<strong>{Math.round((view.player.stats.life / view.player.maxStats.life) * 100)}%</strong>
|
||||
</article>
|
||||
<article className="expedition-status-cell">
|
||||
<small>负重</small>
|
||||
<strong>
|
||||
{view.player.inventoryUsage}/{view.player.inventoryCapacity}
|
||||
</strong>
|
||||
</article>
|
||||
</div>
|
||||
<button
|
||||
className="primary-button expedition-launch-button"
|
||||
disabled={!launchRoute || isWorking}
|
||||
onClick={() => launchRoute && onSendAction({ type: 'travel', toPlaceId: launchRoute.to })}
|
||||
type="button"
|
||||
>
|
||||
准备出发
|
||||
</button>
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
export function StatMeter({
|
||||
iconSrc,
|
||||
label,
|
||||
value,
|
||||
maxValue,
|
||||
tone,
|
||||
}: {
|
||||
iconSrc?: string;
|
||||
label: string;
|
||||
value: number;
|
||||
maxValue: number;
|
||||
@@ -13,12 +15,15 @@ export function StatMeter({
|
||||
|
||||
return (
|
||||
<article className={`stat-meter tone-${tone}`}>
|
||||
<div>
|
||||
<div className="stat-meter-copy">
|
||||
{iconSrc ? <img className="stat-meter-icon" src={iconSrc} alt="" aria-hidden="true" /> : null}
|
||||
<div>
|
||||
<span>{label}</span>
|
||||
<strong>
|
||||
{Math.round(value)}
|
||||
<small>/{Math.round(maxValue)}</small>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div className="meter-track">
|
||||
<div className="meter-fill" style={{ width: `${percentage}%` }} />
|
||||
|
||||
@@ -1,310 +1,10 @@
|
||||
import type { GameAction, GameView } from '@tinywaste/game-core';
|
||||
import { getActiveQuestCount, getLoadoutEntries, getSupplyCounts } from '../hudModel';
|
||||
import type { OverlayPanel } from '../types';
|
||||
import { ModalShell } from '../../shared/components/ModalShell';
|
||||
import { PanelHeader } from '../../shared/components/PanelHeader';
|
||||
import { InventoryCard } from './cards/InventoryCard';
|
||||
import { QuestCard } from './cards/QuestCard';
|
||||
import { RecipeCard } from './cards/RecipeCard';
|
||||
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>
|
||||
);
|
||||
}
|
||||
import { InventoryOverlay } from './overlays/InventoryOverlay';
|
||||
import { MissionOverlay } from './overlays/MissionOverlay';
|
||||
import { BlueprintOverlay } from './overlays/BlueprintOverlay';
|
||||
import { LogOverlay } from './overlays/LogOverlay';
|
||||
|
||||
export function SystemOverlay({
|
||||
isWorking,
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { GameView } from '@tinywaste/game-core';
|
||||
import { getAlertCount, getDominantAlert, getTimeLabels } from '../hudModel';
|
||||
import { STAT_LABELS, STAT_ORDER } from '../uiAssets';
|
||||
import { getStatusArt, STAT_LABELS, STAT_ORDER } from '../uiAssets';
|
||||
import { StatMeter } from './StatMeter';
|
||||
import { HudIcon } from './HudIcon';
|
||||
|
||||
export function TopHud({
|
||||
accountName,
|
||||
@@ -25,24 +26,28 @@ export function TopHud({
|
||||
: 'safe';
|
||||
|
||||
return (
|
||||
<header className="top-hud">
|
||||
<header className="top-hud hud-surface hud-surface-wide hud-top-frame">
|
||||
<div className="brand-block">
|
||||
<div className="brand-mark">TW</div>
|
||||
<div className="brand-copy">
|
||||
<p className="eyebrow">Persistent Wasteland Interface</p>
|
||||
<p className="eyebrow">废土生存终端</p>
|
||||
<strong>TinyWaste Online</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="clock-block">
|
||||
<span>{dayLabel}</span>
|
||||
<strong>{clockLabel}</strong>
|
||||
<HudIcon name="clock" className="clock-icon" />
|
||||
<div>
|
||||
<span>{dayLabel}</span>
|
||||
<strong>{clockLabel}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="status-strip">
|
||||
{STAT_ORDER.map((statKey) => (
|
||||
<StatMeter
|
||||
key={statKey}
|
||||
iconSrc={getStatusArt(statKey)}
|
||||
label={STAT_LABELS[statKey] ?? statKey}
|
||||
maxValue={view.player.maxStats[statKey]}
|
||||
tone={statKey === 'radiation' ? 'danger' : statKey === 'life' ? 'health' : 'neutral'}
|
||||
@@ -52,15 +57,12 @@ export function TopHud({
|
||||
</section>
|
||||
|
||||
<div className="top-actions">
|
||||
<span className="hud-chip safe">{view.header.riskLabel}</span>
|
||||
<span className={`hud-chip ${alertToneClass}`}>
|
||||
{dominantAlert ? `${dominantAlert.label} ${dominantAlert.summary}` : '状态稳定'}
|
||||
</span>
|
||||
<span className="hud-chip">账号 {accountName}</span>
|
||||
<span className={`hud-chip ${alertCount ? 'accent' : ''}`}>
|
||||
{alertCount ? `警报 ${alertCount}` : '链路稳定'}
|
||||
</span>
|
||||
<button className="secondary-button" onClick={onLogout} disabled={logoutPending}>
|
||||
{alertCount ? <span className="hud-chip accent">警报 {alertCount}</span> : null}
|
||||
<button className="secondary-button top-action-button" onClick={onLogout} disabled={logoutPending}>
|
||||
<HudIcon name="logout" className="top-action-icon" />
|
||||
退出
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -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,293 +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 {
|
||||
id: string;
|
||||
label: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
art?: string;
|
||||
isEquipped: boolean;
|
||||
}
|
||||
export type { EquipmentPreviewEntry } from './models/equipmentModel';
|
||||
|
||||
export function edgeDestination(view: GameView, edge: EdgeView) {
|
||||
return view.map.places.find((place) => place.id === edge.to);
|
||||
}
|
||||
export {
|
||||
edgeDestination,
|
||||
getCurrentPlace,
|
||||
getPlaceAtmosphere,
|
||||
getVisibleRoutes,
|
||||
getRouteRiskTier,
|
||||
getRiskDots,
|
||||
} from './models/routeModel';
|
||||
|
||||
export function getTimeLabels(timeLabel: string) {
|
||||
const timeSegments = timeLabel.split('·').map((part) => part.trim());
|
||||
return {
|
||||
dayLabel: timeSegments[0] ?? 'Day 1',
|
||||
clockLabel: timeSegments[1] ?? timeLabel,
|
||||
};
|
||||
}
|
||||
export {
|
||||
getKitItem,
|
||||
getLoadoutEntries,
|
||||
} from './models/equipmentModel';
|
||||
|
||||
export function getActiveQuestCount(view: GameView) {
|
||||
return view.quests.filter((quest) => quest.state === 'active').length;
|
||||
}
|
||||
export {
|
||||
getAlertCount,
|
||||
getDominantAlert,
|
||||
getStatusEffects,
|
||||
getExpeditionStatus,
|
||||
getSurvivorMetrics,
|
||||
getSupplyCounts,
|
||||
} from './models/survivalModel';
|
||||
|
||||
export function getAlertCount(view: GameView) {
|
||||
return Number(Boolean(view.pendingEvent)) + Number(Boolean(view.combat));
|
||||
}
|
||||
export {
|
||||
getActiveQuestCount,
|
||||
getObjectiveRows,
|
||||
getPrimaryObjective,
|
||||
getQuestProgress,
|
||||
} from './models/questModel';
|
||||
|
||||
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 getLatestLog(view: GameView) {
|
||||
return view.logs[0] ?? null;
|
||||
}
|
||||
|
||||
export function getVisibleInventory(view: GameView, limit = 6) {
|
||||
return view.player.inventory.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) * 34 +
|
||||
(stats.energy / maxStats.energy) * 28 +
|
||||
(stats.thirst / maxStats.thirst) * 20 +
|
||||
(stats.hunger / maxStats.hunger) * 18,
|
||||
);
|
||||
const loadPercent = Math.round((view.player.inventoryUsage / view.player.inventoryCapacity) * 100);
|
||||
const threatCount = view.survival.alerts.length;
|
||||
|
||||
return {
|
||||
readiness,
|
||||
loadPercent,
|
||||
threatCount,
|
||||
tone: readiness >= 74 && threatCount === 0 ? 'good' : readiness >= 48 ? 'warn' : 'danger',
|
||||
};
|
||||
}
|
||||
|
||||
export function getSurvivorMetrics(view: GameView) {
|
||||
const protection = Math.min(
|
||||
100,
|
||||
Math.round(
|
||||
(view.player.equipment.body ? 34 : 12) +
|
||||
view.player.attributes.str * 5 +
|
||||
(view.player.stats.life / view.player.maxStats.life) * 30,
|
||||
),
|
||||
);
|
||||
const stealth = Math.min(
|
||||
100,
|
||||
Math.round(
|
||||
view.player.attributes.agi * 8 +
|
||||
view.player.attributes.per * 5 +
|
||||
(view.player.stats.sanity / view.player.maxStats.sanity) * 20,
|
||||
),
|
||||
);
|
||||
const mobility = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
100,
|
||||
Math.round(
|
||||
view.player.attributes.agi * 7 +
|
||||
(view.player.stats.energy / view.player.maxStats.energy) * 42 -
|
||||
(view.player.inventoryUsage / view.player.inventoryCapacity) * 18,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
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 <= 0.35) return { label: '低风险', tone: 'safe' as const };
|
||||
if (risk <= 0.65) 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}`;
|
||||
}
|
||||
export {
|
||||
getTimeLabels,
|
||||
getLatestLog,
|
||||
getQuickUseItems,
|
||||
getAttributeRows,
|
||||
getInventoryStateLabel,
|
||||
} from './models/utils';
|
||||
|
||||
@@ -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 '物资储备';
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import type { EquipSlot } from '@tinywaste/game-core';
|
||||
|
||||
const GENERATED_ROOT = '/generated';
|
||||
const GENERATED_UI_ROOT = `${GENERATED_ROOT}/ui`;
|
||||
const GENERATED_HUD_ROOT = `${GENERATED_ROOT}/hud`;
|
||||
|
||||
export const PLACE_ART: Record<string, string> = {
|
||||
home: `${GENERATED_ROOT}/home-camp.png`,
|
||||
@@ -81,6 +82,49 @@ const ITEM_TO_EQUIPMENT_ART: Record<string, string> = {
|
||||
leather_coat: `${GENERATED_UI_ROOT}/equipment/body-coat.png`,
|
||||
};
|
||||
|
||||
export const HUD_REFERENCE_ART = `${GENERATED_HUD_ROOT}/reference/tinywaste-hud-reference.png`;
|
||||
|
||||
export const HUD_CHROME_ART = {
|
||||
panelWide: `${GENERATED_HUD_ROOT}/chrome/panel-wide.png`,
|
||||
panelTall: `${GENERATED_HUD_ROOT}/chrome/panel-tall.png`,
|
||||
panelCard: `${GENERATED_HUD_ROOT}/chrome/panel-card.png`,
|
||||
panelCompact: `${GENERATED_HUD_ROOT}/chrome/panel-compact.png`,
|
||||
routeCardIdle: `${GENERATED_HUD_ROOT}/chrome/route-card-idle.png`,
|
||||
routeCardActive: `${GENERATED_HUD_ROOT}/chrome/route-card-active.png`,
|
||||
actionCardPrimary: `${GENERATED_HUD_ROOT}/chrome/action-card-primary.png`,
|
||||
actionCardSecondary: `${GENERATED_HUD_ROOT}/chrome/action-card-secondary.png`,
|
||||
statusCapsule: `${GENERATED_HUD_ROOT}/chrome/status-capsule.png`,
|
||||
statusMeter: `${GENERATED_HUD_ROOT}/chrome/status-meter.png`,
|
||||
quickStrip: `${GENERATED_HUD_ROOT}/chrome/quick-strip.png`,
|
||||
quickStripLocked: `${GENERATED_HUD_ROOT}/chrome/quick-strip-locked.png`,
|
||||
dockTabIdle: `${GENERATED_HUD_ROOT}/chrome/dock-tab-idle.png`,
|
||||
dockTabActive: `${GENERATED_HUD_ROOT}/chrome/dock-tab-active.png`,
|
||||
warningStrip: `${GENERATED_HUD_ROOT}/chrome/warning-strip.png`,
|
||||
dividerOrnament: `${GENERATED_HUD_ROOT}/chrome/divider-ornament.png`,
|
||||
} as const;
|
||||
|
||||
export const HUD_ICON_ART = {
|
||||
shelter: `${GENERATED_HUD_ROOT}/icons/shelter.png`,
|
||||
expedition: `${GENERATED_HUD_ROOT}/icons/expedition.png`,
|
||||
inventory: `${GENERATED_HUD_ROOT}/icons/inventory.png`,
|
||||
crafting: `${GENERATED_HUD_ROOT}/icons/crafting.png`,
|
||||
skills: `${GENERATED_HUD_ROOT}/icons/skills.png`,
|
||||
factions: `${GENERATED_HUD_ROOT}/icons/factions.png`,
|
||||
map: `${GENERATED_HUD_ROOT}/icons/map.png`,
|
||||
weather: `${GENERATED_HUD_ROOT}/icons/weather.png`,
|
||||
clock: `${GENERATED_HUD_ROOT}/icons/clock.png`,
|
||||
routePin: `${GENERATED_HUD_ROOT}/icons/route-pin.png`,
|
||||
rest: `${GENERATED_HUD_ROOT}/icons/rest.png`,
|
||||
repair: `${GENERATED_HUD_ROOT}/icons/repair.png`,
|
||||
scavenge: `${GENERATED_HUD_ROOT}/icons/scavenge.png`,
|
||||
signal: `${GENERATED_HUD_ROOT}/icons/signal.png`,
|
||||
settings: `${GENERATED_HUD_ROOT}/icons/settings.png`,
|
||||
logout: `${GENERATED_HUD_ROOT}/icons/logout.png`,
|
||||
} as const;
|
||||
|
||||
export type HudChromeAsset = keyof typeof HUD_CHROME_ART;
|
||||
export type HudIconAsset = keyof typeof HUD_ICON_ART;
|
||||
|
||||
export function getPlaceHeroStyle(placeId: string): CSSProperties {
|
||||
return {
|
||||
backgroundImage: `linear-gradient(180deg, rgba(7, 7, 7, 0.12), rgba(7, 7, 7, 0.84)), linear-gradient(90deg, rgba(220, 146, 65, 0.18), rgba(10, 10, 10, 0.05) 58%), url(${PLACE_ART[placeId] ?? ''})`,
|
||||
@@ -117,4 +161,10 @@ export function getEquipmentArt(itemId?: string, slot?: EquipSlot | 'head' | 'ba
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export const CHARACTER_PREVIEW_ART = `${GENERATED_UI_ROOT}/character-preview.png`;
|
||||
export function getHudChromeArt(name: HudChromeAsset) {
|
||||
return HUD_CHROME_ART[name];
|
||||
}
|
||||
|
||||
export function getHudIconArt(name: HudIconAsset) {
|
||||
return HUD_ICON_ART[name];
|
||||
}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import { Component, type ReactNode } from 'react';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
export class ErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, info: React.ErrorInfo) {
|
||||
console.error('[ErrorBoundary]', error, info.componentStack);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
if (this.props.fallback) return this.props.fallback;
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
minHeight: '100dvh',
|
||||
padding: '2rem',
|
||||
color: '#efe2ce',
|
||||
background: '#070604',
|
||||
fontFamily: "'Chakra Petch', sans-serif",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: 480,
|
||||
textAlign: 'center',
|
||||
padding: '2rem',
|
||||
borderRadius: 20,
|
||||
border: '1px solid rgba(225, 109, 76, 0.3)',
|
||||
background: 'rgba(16, 13, 10, 0.94)',
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: '0 0 0.75rem', fontSize: '1.3rem', letterSpacing: '0.08em' }}>
|
||||
界面发生异常
|
||||
</h2>
|
||||
<p style={{ margin: '0 0 1.25rem', color: '#a38f73', lineHeight: 1.5 }}>
|
||||
{this.state.error?.message ?? '渲染过程中出现未知错误，请尝试刷新页面。'}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
style={{
|
||||
minHeight: 48,
|
||||
padding: '0 2rem',
|
||||
borderRadius: 14,
|
||||
border: '1px solid rgba(228, 158, 75, 0.42)',
|
||||
background: 'linear-gradient(135deg, #eeab52, #c86d22)',
|
||||
color: '#160f08',
|
||||
fontWeight: 700,
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.9rem',
|
||||
}}
|
||||
>
|
||||
刷新页面
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@@ -2,14 +2,23 @@ export function PanelHeader({
|
||||
title,
|
||||
subtitle,
|
||||
compact = false,
|
||||
iconSrc,
|
||||
iconAlt = '',
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
compact?: boolean;
|
||||
iconSrc?: string;
|
||||
iconAlt?: string;
|
||||
}) {
|
||||
return (
|
||||
<header className={`panel-header ${compact ? 'compact' : ''}`}>
|
||||
<div>
|
||||
<div className="panel-header-copy">
|
||||
{iconSrc ? (
|
||||
<span className="panel-header-mark">
|
||||
<img src={iconSrc} alt={iconAlt} aria-hidden={iconAlt ? undefined : true} />
|
||||
</span>
|
||||
) : null}
|
||||
<h2>{title}</h2>
|
||||
<p>{subtitle}</p>
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Chakra Petch', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
button,
|
||||
input {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@@ -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');
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
- 我现在状态如何（生存状态与主要威胁）
|
||||
- 我下一步能做什么（行动入口与成本）
|
||||
- 避免“信息黑箱”：所有关键数值变化必须可追溯原因
|
||||
- 支持碎片化：移动端单手可操作，任何时候可暂停/保存
|
||||
- 支持 PC / 平板横屏的单屏 HUD 体验，任何时候可暂停/保存
|
||||
|
||||
## 7.2 信息架构（IA）
|
||||
|
||||
@@ -138,10 +138,13 @@ flowchart TB
|
||||
- PC：
|
||||
- 三栏布局（状态/背包/主操作+信息）
|
||||
- 鼠标悬浮展示细节
|
||||
- Mobile：
|
||||
- 单栏纵向布局
|
||||
- 背包与详情用抽屉/底部弹层
|
||||
- 长按替代悬浮
|
||||
- Tablet（横屏）：
|
||||
- 保持单屏 HUD，不切成长网页
|
||||
- 缩窄三栏宽度，优先保住顶部状态带与底部模式坞站
|
||||
- 背包、任务、蓝图通过弹层进入
|
||||
- 当前阶段不适配小屏手机：
|
||||
- 不为 860px 以下宽度继续补专门的游戏体验设计
|
||||
- 若后续启动移动版，再单独设计纵向信息架构
|
||||
|
||||
## 7.8 界面清单（MVP）
|
||||
|
||||
@@ -153,4 +156,3 @@ flowchart TB
|
||||
- 战斗
|
||||
- 事件详情（可选）
|
||||
- 设置（音量/文本速度/难度/存档管理）
|
||||
|
||||
|
||||
+19
-13
@@ -91,13 +91,17 @@ UI 组件 <- Query Cache <- 最新 GameView
|
||||
所有当前接入的 GPT-image-2 资产位于：
|
||||
|
||||
- `apps/web/public/generated/`：地点背景
|
||||
- `apps/web/public/generated/ui/character-preview.png`：角色立绘
|
||||
- `apps/web/public/generated/ui/item-atlas.png`：物资图集原图
|
||||
- `apps/web/public/generated/ui/equipment-atlas.png`：装备图集原图
|
||||
- `apps/web/public/generated/ui/status-atlas.png`：生存状态图集原图
|
||||
- `apps/web/public/generated/ui/items/*`：切分后的物资图标
|
||||
- `apps/web/public/generated/ui/equipment/*`：切分后的装备槽素材
|
||||
- `apps/web/public/generated/ui/status/*`：切分后的生存状态图标
|
||||
- `apps/web/public/generated/hud/reference/tinywaste-hud-reference.png`：当前唯一 HUD 参考图（无右侧人物）
|
||||
- `apps/web/public/generated/hud/atlases/*`：HUD chrome / icon atlas 原图与透明版
|
||||
- `apps/web/public/generated/hud/chrome/*`：切分后的 HUD 框体素材
|
||||
- `apps/web/public/generated/hud/icons/*`：切分后的 HUD 功能图标
|
||||
- `apps/web/public/generated/hud/manifest.json`：HUD 资产清单
|
||||
|
||||
对应映射入口：
|
||||
|
||||
@@ -108,7 +112,9 @@ UI 组件 <- Query Cache <- 最新 GameView
|
||||
- 地点图使用整图背景，服务于中央场景和左侧路线卡。
|
||||
- 物资与装备图使用 atlas + 裁切结果，服务于快捷栏、库存卡、角色槽位。
|
||||
- 生存状态图使用 atlas + 裁切结果，服务于状态效果卡和后续中断提示。
|
||||
- HUD chrome 与 HUD icon 统一走 `apps/web/public/generated/hud/`，并通过 `uiAssets.ts` 暴露。
|
||||
- 所有引用都走 `uiAssets.ts`，避免组件里散落硬编码路径。
|
||||
- HUD atlas 的透明化与切分流程由 `scripts/slice_hud_atlas.py` 和 `remove_chroma_key.py` 组合完成。
|
||||
|
||||
## 12.6 HUD 信息职责
|
||||
|
||||
@@ -137,12 +143,12 @@ UI 组件 <- Query Cache <- 最新 GameView
|
||||
|
||||
### 12.6.4 LoadoutPanel
|
||||
|
||||
- 角色 / 背包 / 任务三态切换
|
||||
- 角色立绘与槽位矩阵
|
||||
- 属性与状态效果
|
||||
- 快捷栏
|
||||
- 完整库存与避难所仓储管理
|
||||
- 任务与休整
|
||||
- Equipment terminal 头部与负载状态
|
||||
- 2x3 装备槽矩阵
|
||||
- 生存能力指标（防护 / 潜行 / 机动）
|
||||
- 生存告警条
|
||||
- Ready pack 资源终端（快速补给 + 仓储摘要）
|
||||
- 打开背包 / 仓储弹层入口
|
||||
|
||||
### 12.6.5 BottomDock
|
||||
|
||||
@@ -156,17 +162,17 @@ UI 组件 <- Query Cache <- 最新 GameView
|
||||
|
||||
- 维持单屏阅读，整页不滚动，滚动只发生在内部面板。
|
||||
- 中央区优先展示场景与决策，避免全文字堆叠。
|
||||
- 右侧区优先视觉化角色与装备，而不是继续做普通列表。
|
||||
- 右侧区不再展示人物立绘，改为装备、警报与资源终端。
|
||||
- 底部区承担模式切换和系统导航，强化“游戏 HUD”心智。
|
||||
- HUD chrome 资产只重点压在小模块和导航件上，大面板只保留轻量纹理，避免再次出现网页卡片感。
|
||||
|
||||
## 12.8 下一步扩展建议
|
||||
|
||||
下一轮优先项：
|
||||
|
||||
1. 继续补 GPT-image-2 资产：
|
||||
- 头部、侧武器、弹药、医疗、食物第二批图集
|
||||
- 第二批 HUD chrome（战斗态、事件态、模态终端）
|
||||
- 天气、辐射、事件状态专用小图标
|
||||
2. 将 `LoadoutPanel` 的 tab 与底部导航进一步联动为统一模式系统。
|
||||
3. 为 `CommandCenter` 增加战斗专属视图和事件专属视图，而不是完全依赖弹层。
|
||||
4. 为物资卡补充更精细的分类过滤和排序逻辑。
|
||||
5. 引入可配置的 HUD 主题参数，支撑不同章节或区域切换皮肤。
|
||||
2. 为 `CommandCenter` 增加战斗专属视图和事件专属视图，而不是完全依赖弹层。
|
||||
3. 为物资卡补充更精细的分类过滤和排序逻辑。
|
||||
4. 引入可配置的 HUD 主题参数，支撑不同章节或区域切换皮肤。
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.3 MiB |
@@ -1070,6 +1070,30 @@ export const gameContent: GameContent = {
|
||||
},
|
||||
],
|
||||
},
|
||||
road_wanderer: {
|
||||
id: 'road_wanderer',
|
||||
title: '路边的求助声',
|
||||
text: '一辆翻覆的车旁边，有人虚弱地问你有没有水。',
|
||||
trigger: 'travel',
|
||||
options: [
|
||||
{
|
||||
id: 'wanderer_share',
|
||||
text: '给他一瓶浑水',
|
||||
conditions: [{ kind: 'has-item', itemId: 'water_dirty', count: 1 }],
|
||||
successEffects: [
|
||||
{ type: 'remove-item', itemId: 'water_dirty', count: 1 },
|
||||
{ type: 'add-item', itemId: 'herb_bundle', count: 1 },
|
||||
],
|
||||
successText: '那人把最后一束干草药塞给了你。',
|
||||
},
|
||||
{
|
||||
id: 'wanderer_leave',
|
||||
text: '继续赶路',
|
||||
successEffects: [{ type: 'change-stat', stat: 'sanity', amount: -2 }],
|
||||
successText: '你没有回头，但那声"算了"跟了你一路。',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
enemies: {
|
||||
rat_swarm: {
|
||||
@@ -1217,29 +1241,4 @@ export const gameContent: GameContent = {
|
||||
travelEventPool: ['road_wanderer'],
|
||||
};
|
||||
|
||||
gameContent.events.road_wanderer = {
|
||||
id: 'road_wanderer',
|
||||
title: '路边的求助声',
|
||||
text: '一辆翻覆的车旁边，有人虚弱地问你有没有水。',
|
||||
trigger: 'travel',
|
||||
options: [
|
||||
{
|
||||
id: 'wanderer_share',
|
||||
text: '给他一瓶浑水',
|
||||
conditions: [{ kind: 'has-item', itemId: 'water_dirty', count: 1 }],
|
||||
successEffects: [
|
||||
{ type: 'remove-item', itemId: 'water_dirty', count: 1 },
|
||||
{ type: 'add-item', itemId: 'herb_bundle', count: 1 },
|
||||
],
|
||||
successText: '那人把最后一束干草药塞给了你。',
|
||||
},
|
||||
{
|
||||
id: 'wanderer_leave',
|
||||
text: '继续赶路',
|
||||
successEffects: [{ type: 'change-stat', stat: 'sanity', amount: -2 }],
|
||||
successText: '你没有回头，但那声“算了”跟了你一路。',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default gameContent;
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
#!/usr/bin/env python3
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import argparse
|
||||
from pathlib import Path
|
||||
|
||||
from PIL import Image
|
||||
|
||||
|
||||
WHITE_THRESHOLD = 245
|
||||
GREEN_KEY = (0, 255, 0)
|
||||
|
||||
|
||||
def is_gutter(sample: list[tuple[int, int, int, int]]) -> bool:
|
||||
white_pixels = 0
|
||||
opaque_pixels = 0
|
||||
|
||||
for red, green, blue, alpha in sample:
|
||||
if alpha == 0:
|
||||
continue
|
||||
opaque_pixels += 1
|
||||
if red >= WHITE_THRESHOLD and green >= WHITE_THRESHOLD and blue >= WHITE_THRESHOLD:
|
||||
white_pixels += 1
|
||||
|
||||
if opaque_pixels == 0:
|
||||
return False
|
||||
|
||||
return white_pixels / opaque_pixels >= 0.92
|
||||
|
||||
|
||||
def find_segments(mask: list[bool]) -> list[tuple[int, int]]:
|
||||
segments: list[tuple[int, int]] = []
|
||||
start: int | None = None
|
||||
|
||||
for index, is_gap in enumerate(mask):
|
||||
if not is_gap and start is None:
|
||||
start = index
|
||||
if is_gap and start is not None:
|
||||
segments.append((start, index))
|
||||
start = None
|
||||
|
||||
if start is not None:
|
||||
segments.append((start, len(mask)))
|
||||
|
||||
return segments
|
||||
|
||||
|
||||
def detect_grid(image: Image.Image) -> tuple[list[tuple[int, int]], list[tuple[int, int]]]:
|
||||
rgba = image.convert('RGBA')
|
||||
width, height = rgba.size
|
||||
pixels = rgba.load()
|
||||
|
||||
column_mask = []
|
||||
for x in range(width):
|
||||
sample = [pixels[x, y] for y in range(height)]
|
||||
column_mask.append(is_gutter(sample))
|
||||
|
||||
row_mask = []
|
||||
for y in range(height):
|
||||
sample = [pixels[x, y] for x in range(width)]
|
||||
row_mask.append(is_gutter(sample))
|
||||
|
||||
columns = [segment for segment in find_segments(column_mask) if segment[1] - segment[0] > 48]
|
||||
rows = [segment for segment in find_segments(row_mask) if segment[1] - segment[0] > 48]
|
||||
|
||||
return columns, rows
|
||||
|
||||
|
||||
def remove_chroma(image: Image.Image) -> Image.Image:
|
||||
rgba = image.convert('RGBA')
|
||||
cleaned = Image.new('RGBA', rgba.size)
|
||||
|
||||
for x in range(rgba.width):
|
||||
for y in range(rgba.height):
|
||||
red, green, blue, alpha = rgba.getpixel((x, y))
|
||||
if alpha == 0:
|
||||
cleaned.putpixel((x, y), (0, 0, 0, 0))
|
||||
continue
|
||||
|
||||
dominant_green = green - max(red, blue)
|
||||
color_distance = abs(red - GREEN_KEY[0]) + abs(green - GREEN_KEY[1]) + abs(blue - GREEN_KEY[2])
|
||||
|
||||
if color_distance <= 60:
|
||||
cleaned.putpixel((x, y), (0, 0, 0, 0))
|
||||
elif green > 120 and dominant_green > 26:
|
||||
despilled_green = min(green, max(red, blue) + 10)
|
||||
new_alpha = max(0, min(alpha, 255 - dominant_green * 2))
|
||||
if new_alpha <= 12:
|
||||
cleaned.putpixel((x, y), (0, 0, 0, 0))
|
||||
else:
|
||||
cleaned.putpixel((x, y), (red, despilled_green, blue, new_alpha))
|
||||
else:
|
||||
cleaned.putpixel((x, y), (red, green, blue, alpha))
|
||||
|
||||
return cleaned
|
||||
|
||||
|
||||
def trim_alpha(image: Image.Image, padding: int = 8) -> Image.Image:
|
||||
bbox = image.getbbox()
|
||||
if bbox is None:
|
||||
return image
|
||||
|
||||
left = max(0, bbox[0] - padding)
|
||||
top = max(0, bbox[1] - padding)
|
||||
right = min(image.width, bbox[2] + padding)
|
||||
bottom = min(image.height, bbox[3] + padding)
|
||||
return image.crop((left, top, right, bottom))
|
||||
|
||||
|
||||
def save_cells(image: Image.Image, names: list[str], output_dir: Path) -> list[str]:
|
||||
columns, rows = detect_grid(image)
|
||||
expected = len(columns) * len(rows)
|
||||
if expected != len(names):
|
||||
raise ValueError(
|
||||
f'Grid detection found {len(columns)} columns x {len(rows)} rows = {expected} cells, '
|
||||
f'but {len(names)} names were provided.'
|
||||
)
|
||||
|
||||
written: list[str] = []
|
||||
index = 0
|
||||
for row_start, row_end in rows:
|
||||
for col_start, col_end in columns:
|
||||
cell = image.crop((col_start, row_start, col_end, row_end))
|
||||
cleaned = trim_alpha(remove_chroma(cell))
|
||||
target = output_dir / f'{names[index]}.png'
|
||||
cleaned.save(target)
|
||||
written.append(target.name)
|
||||
index += 1
|
||||
|
||||
return written
|
||||
|
||||
|
||||
def main() -> None:
|
||||
parser = argparse.ArgumentParser(description='Slice a HUD atlas with white gutters and green chroma background.')
|
||||
parser.add_argument('--input', required=True, type=Path)
|
||||
parser.add_argument('--output-dir', required=True, type=Path)
|
||||
parser.add_argument('--names', required=True, help='Comma-separated output filenames without extension.')
|
||||
args = parser.parse_args()
|
||||
|
||||
names = [name.strip() for name in args.names.split(',') if name.strip()]
|
||||
args.output_dir.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
atlas = Image.open(args.input)
|
||||
written = save_cells(atlas, names, args.output_dir)
|
||||
print('\n'.join(written))
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 914 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Reference in New Issue
Block a user