galaxy-game/ui/frontend/src/lib/active-view/map-toggles.svelte

<!--
Phase 29 gear popover. Sits in the top-right corner of the map
canvas and exposes the per-game visibility toggles that the
`GameStateStore` already owns. The component is a thin view of the
store — every checkbox fires `store.setMapToggle(...)` and reads
back the current state through the rune.

The wrap-scrolling toggle that used to live alongside the visibility
flags was dropped in F8-05 (issue #48 п.8): wrap is a game-server
feature, not a per-session UI affordance, so the renderer always
runs in torus mode for now. The renderer-side `wrapMode` plumbing
stays put for when the engine surfaces non-torus topologies.

Outside-click + Escape close the popover, matching the
`header/view-menu.svelte` precedent. On mobile (<768 px) the
surface re-styles into a bottom-sheet positioned above the
bottom-tabs bar.
-->
<script lang="ts">
	import { onMount } from "svelte";
	import { i18n } from "$lib/i18n/index.svelte";
	import { restoreFocus } from "$lib/a11y/restore-focus";
	import type { MapToggles, GameStateStore } from "$lib/game-state.svelte";

	type Props = { store: GameStateStore };
	let { store }: Props = $props();

	let open = $state(false);
	let rootEl: HTMLDivElement | null = $state(null);

	function toggleOpen(): void {
		open = !open;
	}

	function setFlag<K extends keyof MapToggles>(
		key: K,
		event: Event & { currentTarget: HTMLInputElement },
	): void {
		void store.setMapToggle(key, event.currentTarget.checked as MapToggles[K]);
	}

	function onKeyDown(event: KeyboardEvent): void {
		if (event.key === "Escape" && open) {
			open = false;
		}
	}

	onMount(() => {
		const handleClick = (event: MouseEvent): void => {
			if (!open || rootEl === null) return;
			const target = event.target;
			if (target instanceof Node && rootEl.contains(target)) return;
			open = false;
		};
		document.addEventListener("click", handleClick, true);
		document.addEventListener("keydown", onKeyDown);
		return () => {
			document.removeEventListener("click", handleClick, true);
			document.removeEventListener("keydown", onKeyDown);
		};
	});
</script>

<div class="map-toggles" bind:this={rootEl}>
	<button
		type="button"
		class="trigger"
		data-testid="map-toggles-trigger"
		aria-haspopup="menu"
		aria-expanded={open}
		aria-label={open
			? i18n.t("game.map.toggles.close")
			: i18n.t("game.map.toggles.open")}
		onclick={toggleOpen}
	>
		<span aria-hidden="true">⚙</span>
	</button>
	{#if open}
		<div
			class="surface"
			role="menu"
			data-testid="map-toggles-surface"
			use:restoreFocus
		>
			<fieldset>
				<legend>{i18n.t("game.map.toggles.section.objects")}</legend>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-hyperspace-groups"
						checked={store.mapToggles.hyperspaceGroups}
						onchange={(e) => setFlag("hyperspaceGroups", e)}
					/>
					<span>{i18n.t("game.map.toggles.hyperspace_groups")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-incoming-groups"
						checked={store.mapToggles.incomingGroups}
						onchange={(e) => setFlag("incomingGroups", e)}
					/>
					<span>{i18n.t("game.map.toggles.incoming_groups")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-unidentified-groups"
						checked={store.mapToggles.unidentifiedGroups}
						onchange={(e) => setFlag("unidentifiedGroups", e)}
					/>
					<span>{i18n.t("game.map.toggles.unidentified_groups")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-cargo-routes"
						checked={store.mapToggles.cargoRoutes}
						onchange={(e) => setFlag("cargoRoutes", e)}
					/>
					<span>{i18n.t("game.map.toggles.cargo_routes")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-battle-markers"
						checked={store.mapToggles.battleMarkers}
						onchange={(e) => setFlag("battleMarkers", e)}
					/>
					<span>{i18n.t("game.map.toggles.battle_markers")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-bombing-markers"
						checked={store.mapToggles.bombingMarkers}
						onchange={(e) => setFlag("bombingMarkers", e)}
					/>
					<span>{i18n.t("game.map.toggles.bombing_markers")}</span>
				</label>
			</fieldset>
			<fieldset>
				<legend>{i18n.t("game.map.toggles.section.planets")}</legend>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-foreign-planets"
						checked={store.mapToggles.foreignPlanets}
						onchange={(e) => setFlag("foreignPlanets", e)}
					/>
					<span>{i18n.t("game.map.toggles.foreign_planets")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-uninhabited-planets"
						checked={store.mapToggles.uninhabitedPlanets}
						onchange={(e) => setFlag("uninhabitedPlanets", e)}
					/>
					<span>{i18n.t("game.map.toggles.uninhabited_planets")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-unidentified-planets"
						checked={store.mapToggles.unidentifiedPlanets}
						onchange={(e) => setFlag("unidentifiedPlanets", e)}
					/>
					<span>{i18n.t("game.map.toggles.unidentified_planets")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-unreachable-planets"
						checked={store.mapToggles.unreachablePlanets}
						onchange={(e) => setFlag("unreachablePlanets", e)}
					/>
					<span>{i18n.t("game.map.toggles.unreachable_planets")}</span>
				</label>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-planet-names"
						checked={store.mapToggles.planetNames}
						onchange={(e) => setFlag("planetNames", e)}
					/>
					<span>{i18n.t("game.map.toggles.planet_names")}</span>
				</label>
			</fieldset>
			<fieldset>
				<legend>{i18n.t("game.map.toggles.section.view")}</legend>
				<label>
					<input
						type="checkbox"
						data-testid="map-toggles-visible-hyperspace"
						checked={store.mapToggles.visibleHyperspace}
						onchange={(e) => setFlag("visibleHyperspace", e)}
					/>
					<span>{i18n.t("game.map.toggles.visible_hyperspace")}</span>
				</label>
			</fieldset>
		</div>
	{/if}
</div>

<style>
	.map-toggles {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		z-index: 20;
	}
	.trigger {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font: inherit;
		font-size: 1.4rem;
		padding: 0.25rem 0.5rem;
		background: var(--color-surface-overlay);
		color: var(--color-text);
		border: 1px solid var(--color-border);
		border-radius: 6px;
		cursor: pointer;
	}
	.trigger:hover {
		background: var(--color-surface-hover);
	}
	.surface {
		position: absolute;
		top: calc(100% + 0.25rem);
		right: 0;
		min-width: 16rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		background: var(--color-surface-overlay);
		color: var(--color-text);
		border: 1px solid var(--color-border);
		border-radius: 6px;
		box-shadow: var(--shadow-lg);
		padding: 0.5rem;
		z-index: 50;
	}
	fieldset {
		border: 0;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
	legend {
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--color-text-muted);
		padding: 0 0 0.15rem 0;
	}
	label {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		font-size: 0.9rem;
		padding: 0.2rem 0.25rem;
		border-radius: 3px;
		cursor: pointer;
	}
	label:hover {
		background: var(--color-surface-hover);
	}
	input[type="checkbox"] {
		accent-color: var(--color-accent);
	}
	@media (max-width: 767.98px) {
		.surface {
			position: fixed;
			top: auto;
			right: 0;
			left: 0;
			bottom: 3.25rem;
			max-height: calc(100vh - 6rem);
			overflow-y: auto;
			border-radius: 0;
			border-left: 0;
			border-right: 0;
			box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
		}
	}
</style>