Full-screen map with draggable, collapsible floating HUD windows
- 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
This commit is contained in:
@@ -0,0 +1,324 @@
|
||||
import {
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type CSSProperties,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import { Minus, Plus } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** Edge anchor used to place a window on first run (before the user drags it). */
|
||||
export type FloatAnchor =
|
||||
| 'top-left'
|
||||
| 'top-center'
|
||||
| 'top-right'
|
||||
| 'right'
|
||||
| 'bottom-left'
|
||||
| 'bottom-center'
|
||||
| 'bottom-right';
|
||||
|
||||
const STORAGE_PREFIX = 'history.floatwin.v1.';
|
||||
|
||||
// Module-level z-index bookkeeping so sibling windows stack in click order:
|
||||
// every window starts at the base (10); each time a *different* window is
|
||||
// raised, the shared counter advances, so the newest on top always wins.
|
||||
const Z_BASE = 10;
|
||||
const Z_STEP = 10;
|
||||
let zSeq = 0;
|
||||
let zTopId: string | null = null;
|
||||
/** Returns the new z-index to use, or -1 if this window is already front-most. */
|
||||
function nextZ(id: string): number {
|
||||
if (zTopId === id) return -1;
|
||||
zSeq += 1;
|
||||
zTopId = id;
|
||||
return Z_BASE + zSeq * Z_STEP;
|
||||
}
|
||||
|
||||
interface Pos {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
/** Read a persisted position; any missing/corrupt storage falls back to null. */
|
||||
function loadPos(id: string): Pos | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_PREFIX + 'pos.' + id);
|
||||
if (raw == null) return null;
|
||||
const v = JSON.parse(raw) as Partial<Pos>;
|
||||
if (
|
||||
typeof v.x !== 'number' ||
|
||||
!Number.isFinite(v.x) ||
|
||||
typeof v.y !== 'number' ||
|
||||
!Number.isFinite(v.y)
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
return { x: v.x, y: v.y };
|
||||
} catch {
|
||||
return null; // storage unavailable or unparseable — first-run placement
|
||||
}
|
||||
}
|
||||
|
||||
function savePos(id: string, x: number, y: number): void {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_PREFIX + 'pos.' + id, JSON.stringify({ x, y }));
|
||||
} catch {
|
||||
/* storage unavailable (e.g. private mode) — dragging still works, just won't persist */
|
||||
}
|
||||
}
|
||||
|
||||
const EDGE = 12;
|
||||
|
||||
/** Resolve an anchor to a concrete top-left position for a window of w×h. */
|
||||
function anchorToPos(anchor: FloatAnchor, w: number, h: number): Pos {
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
switch (anchor) {
|
||||
case 'top-left':
|
||||
return { x: EDGE, y: 72 };
|
||||
case 'top-center':
|
||||
return { x: Math.round((vw - w) / 2), y: 8 };
|
||||
case 'top-right':
|
||||
case 'right':
|
||||
return { x: vw - w - EDGE, y: 72 };
|
||||
case 'bottom-left':
|
||||
return { x: EDGE, y: Math.max(EDGE, vh - h - EDGE) };
|
||||
case 'bottom-center':
|
||||
return { x: Math.round((vw - w) / 2), y: Math.max(64, vh - h - EDGE) };
|
||||
case 'bottom-right':
|
||||
return { x: vw - w - EDGE, y: Math.max(64, vh - h - EDGE) };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clamp a top-left position so the window can never be dragged fully
|
||||
* off-screen: at least MIN_W px of width and MIN_H px (the title bar) of
|
||||
* height always remain inside the viewport.
|
||||
*/
|
||||
function clampPos(x: number, y: number, w: number, h: number): Pos {
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
const MIN_W = 96;
|
||||
const MIN_H = 36;
|
||||
let minX = MIN_W - w;
|
||||
let maxX = vw - MIN_W;
|
||||
if (minX > maxX) {
|
||||
minX = maxX = Math.round((minX + maxX) / 2);
|
||||
}
|
||||
let minY = MIN_H - h;
|
||||
let maxY = vh - MIN_H;
|
||||
if (minY > maxY) {
|
||||
minY = maxY = Math.round((minY + maxY) / 2);
|
||||
}
|
||||
return { x: Math.min(Math.max(x, minX), maxX), y: Math.min(Math.max(y, minY), maxY) };
|
||||
}
|
||||
|
||||
export interface FloatingWindowProps {
|
||||
/** Stable id — used for the localStorage key and as a data-attribute. */
|
||||
id: string;
|
||||
/** First-run placement. The last dragged position (persisted) takes over. */
|
||||
anchor: FloatAnchor;
|
||||
/** Fixed window width in px (content is sized to it). Omit to fit content. */
|
||||
width?: number;
|
||||
/** Extra px nudged away from the anchor position (e.g. clear the map attribution). */
|
||||
offset?: { x?: number; y?: number };
|
||||
/** Title-bar content (text or node). The whole bar is the drag handle. */
|
||||
title?: ReactNode;
|
||||
/** Optional icon before the title. */
|
||||
titleIcon?: ReactNode;
|
||||
/** Right-side title-bar content, rendered before the collapse button. */
|
||||
titleExtra?: ReactNode;
|
||||
/** Render the collapse toggle (default true). */
|
||||
collapsible?: boolean;
|
||||
/** Controlled collapsed state — the parent persists/restores it. */
|
||||
collapsed?: boolean;
|
||||
onCollapsedChange?: (collapsed: boolean) => void;
|
||||
/** Extra classes for the inner card (border/background). */
|
||||
className?: string;
|
||||
/** Extra classes for the body wrapper (max-height, scrolling, …). */
|
||||
bodyClassName?: string;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* A draggable, collapsible, position-persisted window that floats over the
|
||||
* full-screen map. Dragging is limited to the title bar (via pointer capture)
|
||||
* so inputs and buttons in the body keep working; the window is clamped so it
|
||||
* can never be dragged fully off-screen, its position is remembered in
|
||||
* localStorage, clicking any part of it raises it above siblings, and the
|
||||
* collapse toggle shrinks it to just its title bar.
|
||||
*/
|
||||
export default function FloatingWindow({
|
||||
id,
|
||||
anchor,
|
||||
width,
|
||||
offset,
|
||||
title,
|
||||
titleIcon,
|
||||
titleExtra,
|
||||
collapsible: collapsibleProp = true,
|
||||
collapsed = false,
|
||||
onCollapsedChange,
|
||||
className,
|
||||
bodyClassName,
|
||||
children,
|
||||
}: FloatingWindowProps) {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const sizeRef = useRef<{ w: number; h: number } | null>(null);
|
||||
const dragRef = useRef<{ dx: number; dy: number; pointerId: number } | null>(null);
|
||||
const posRef = useRef<Pos | null>(null);
|
||||
const [pos, setPosState] = useState<Pos | null>(null);
|
||||
const [z, setZ] = useState(Z_BASE);
|
||||
|
||||
const setPos = (p: Pos): void => {
|
||||
posRef.current = p;
|
||||
setPosState(p);
|
||||
};
|
||||
|
||||
// First paint: measure, then place (restored position or anchor) and clamp.
|
||||
// Runs before paint (useLayoutEffect), so there is no visible flash.
|
||||
useLayoutEffect(() => {
|
||||
if (posRef.current) return;
|
||||
const el = rootRef.current;
|
||||
if (!el) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.width <= 0) return;
|
||||
sizeRef.current = { w: rect.width, h: rect.height };
|
||||
const base = loadPos(id) ?? anchorToPos(anchor, rect.width, rect.height);
|
||||
const p = clampPos(
|
||||
base.x + (offset?.x ?? 0),
|
||||
base.y + (offset?.y ?? 0),
|
||||
rect.width,
|
||||
rect.height,
|
||||
);
|
||||
posRef.current = p;
|
||||
setPosState(p);
|
||||
}, [id, anchor]);
|
||||
|
||||
// Re-measure + re-clamp whenever the body toggles hidden (expand can push a
|
||||
// bottom-anchored window off the bottom edge).
|
||||
useLayoutEffect(() => {
|
||||
const el = rootRef.current;
|
||||
const p = posRef.current;
|
||||
if (!el || !p) return;
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.width <= 0) return;
|
||||
sizeRef.current = { w: rect.width, h: rect.height };
|
||||
const c = clampPos(p.x, p.y, rect.width, rect.height);
|
||||
if (c.x !== p.x || c.y !== p.y) setPos(c);
|
||||
}, [collapsed]);
|
||||
|
||||
// Keep the window on-screen when the viewport shrinks.
|
||||
useEffect(() => {
|
||||
const onResize = () => {
|
||||
const p = posRef.current;
|
||||
const s = sizeRef.current;
|
||||
if (!p || !s) return;
|
||||
const c = clampPos(p.x, p.y, s.w, s.h);
|
||||
if (c.x !== p.x || c.y !== p.y) setPos(c);
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
return () => window.removeEventListener('resize', onResize);
|
||||
}, []);
|
||||
|
||||
const onHandleDown = (e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (e.button !== 0) return;
|
||||
// Never start a drag from an interactive element (buttons, inputs, …).
|
||||
const t = e.target as HTMLElement | null;
|
||||
if (t?.closest('button, a, input, textarea, select, [data-no-drag]')) return;
|
||||
const el = rootRef.current;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
sizeRef.current = { w: r.width, h: r.height };
|
||||
dragRef.current = { dx: e.clientX - r.left, dy: e.clientY - r.top, pointerId: e.pointerId };
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
};
|
||||
|
||||
const onHandleMove = (e: React.PointerEvent<HTMLDivElement>) => {
|
||||
const d = dragRef.current;
|
||||
if (!d || d.pointerId !== e.pointerId) return;
|
||||
e.preventDefault();
|
||||
const s = sizeRef.current ?? { w: 200, h: 100 };
|
||||
// Fixed positioning: moving this window never reflows the rest of the page.
|
||||
setPos(clampPos(e.clientX - d.dx, e.clientY - d.dy, s.w, s.h));
|
||||
};
|
||||
|
||||
const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {
|
||||
const d = dragRef.current;
|
||||
if (!d || d.pointerId !== e.pointerId) return;
|
||||
dragRef.current = null;
|
||||
try {
|
||||
e.currentTarget.releasePointerCapture(e.pointerId);
|
||||
} catch {
|
||||
/* pointer already released */
|
||||
}
|
||||
const p = posRef.current;
|
||||
if (p) savePos(id, p.x, p.y);
|
||||
};
|
||||
|
||||
const style: CSSProperties = {
|
||||
zIndex: z,
|
||||
...(pos ? { left: pos.x, top: pos.y } : {}),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
data-float-window={id}
|
||||
style={style}
|
||||
className={cn('fixed', !pos && 'pointer-events-none opacity-0')}
|
||||
onPointerDown={() => {
|
||||
const nz = nextZ(id);
|
||||
if (nz > 0) setZ(nz);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'overflow-hidden rounded-xl border border-border/70 bg-slate-900/80 shadow-2xl shadow-black/50 backdrop-blur-md',
|
||||
className,
|
||||
)}
|
||||
style={
|
||||
width != null
|
||||
? { width, maxWidth: '96vw' }
|
||||
: { width: 'fit-content', maxWidth: '96vw' }
|
||||
}
|
||||
>
|
||||
{title != null && (
|
||||
<div
|
||||
className="flex cursor-grab touch-none select-none items-center gap-2 border-b border-border/60 bg-white/[0.03] px-2.5 py-1.5 active:cursor-grabbing"
|
||||
onPointerDown={onHandleDown}
|
||||
onPointerMove={onHandleMove}
|
||||
onPointerUp={endDrag}
|
||||
onPointerCancel={endDrag}
|
||||
>
|
||||
{titleIcon && (
|
||||
<span className="shrink-0 text-muted-foreground" aria-hidden>
|
||||
{titleIcon}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden text-sm font-semibold tracking-wide">
|
||||
{title}
|
||||
</span>
|
||||
{titleExtra}
|
||||
{collapsibleProp && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={collapsed ? 'Expand window' : 'Collapse window'}
|
||||
title={collapsed ? 'Expand' : 'Collapse'}
|
||||
className="shrink-0 rounded-md p-1 text-muted-foreground transition-colors hover:bg-white/10 hover:text-foreground"
|
||||
onClick={() => onCollapsedChange?.(!collapsed)}
|
||||
>
|
||||
{collapsed ? <Plus className="size-3.5" /> : <Minus className="size-3.5" />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{children != null && (
|
||||
<div className={cn('min-h-0', collapsed && 'hidden', bodyClassName)}>{children}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user