kamilkrzywda
913d094e11
- MapLibre map is now a fixed, full-viewport background layer (z-0) - New FloatingWindow: drag by title bar (pointer capture, viewport-clamped, position persisted to localStorage), collapsible to title bar, bring-to-front z-index; semi-transparent slate window with amber/cyan accents - Game screen re-laid out as floating windows over the map: slim top header (scenario, turn + date, player nation chip, Idle/Simulating status, Focus map collapse-all), dossier (top-left), event feed (right), Your move deck (bottom-center), legend (bottom-left), tiny zoom control (bottom-right) - MapLibre default nav controls removed; custom floating zoom-in/out control - Panels gain an inWindow mode (no card chrome, same testids) - server: honor HISTORY_API_PORT as PORT fallback (dev proxy/e2e agreement) - css: keep maplibre canvas base color and Radix portals above HUD windows
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import type { RegionMap } from '@shared/protocol';
|
|
|
|
/**
|
|
* Small bottom-left legend mapping each nation on the map to its stable color.
|
|
* Rendered by the game screen as a minimal floating window over the map.
|
|
*/
|
|
export default function MapLegend({ regions }: { regions: RegionMap }) {
|
|
const owners = new Map<string, { color: string; owner: string }>();
|
|
for (const r of Object.values(regions)) {
|
|
if (r.ownerId && !owners.has(r.ownerId)) owners.set(r.ownerId, { color: r.color, owner: r.owner });
|
|
}
|
|
const list = [...owners.entries()].sort((a, b) => a[1].owner.localeCompare(b[1].owner));
|
|
if (list.length === 0) return null;
|
|
return (
|
|
<div
|
|
data-testid="map-legend"
|
|
className="max-h-[52vh] overflow-y-auto p-2.5"
|
|
>
|
|
<div className="mb-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
|
|
Nations
|
|
</div>
|
|
<ul className="space-y-1">
|
|
{list.map(([id, o]) => (
|
|
<li key={id} data-testid="map-legend-item" className="flex items-center gap-1.5 text-xs">
|
|
<span className="inline-block size-2.5 shrink-0 rounded-sm" style={{ background: o.color }} />
|
|
<span className="truncate">{o.owner}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|