feat: expand profiles and weapon configuration

2026-07-28 00:11:40 -04:00
parent 0b3be3587b
commit a434cbe60c
37 changed files with 2209 additions and 800 deletions
@@ -0,0 +1,48 @@
+<script lang="ts">
+	let {
+		label = 'More information',
+		title,
+		text
+	}: {
+		label?: string;
+		title: string;
+		text: string;
+	} = $props();
+
+	let root: HTMLDetailsElement;
+	let open = $state(false);
+
+	$effect(() => {
+		if (!open) return;
+		const closeOutside = (event: PointerEvent) => {
+			if (!root.contains(event.target as Node)) open = false;
+		};
+		const closeOnEscape = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				open = false;
+				root.querySelector<HTMLElement>('summary')?.focus();
+			}
+		};
+		document.addEventListener('pointerdown', closeOutside);
+		document.addEventListener('keydown', closeOnEscape);
+		return () => {
+			document.removeEventListener('pointerdown', closeOutside);
+			document.removeEventListener('keydown', closeOnEscape);
+		};
+	});
+</script>
+
+<details bind:this={root} bind:open class="info-popover">
+	<summary aria-label={label}>i</summary>
+	<div class="info-popover-panel" role="note">
+		<strong>{title}</strong>
+		<p>{text}</p>
+	</div>
+</details>
+
+<style>
+	.info-popover{position:relative}.info-popover summary{width:28px;height:28px;display:grid;place-items:center;list-style:none;border:1px solid var(--shd-border-strong);background:var(--shd-surface);color:var(--shd-text-muted);font-family:var(--shd-font-editorial);font-size:13px;font-style:italic;font-weight:700;cursor:pointer}.info-popover summary::-webkit-details-marker{display:none}.info-popover summary:hover,.info-popover summary:focus-visible,.info-popover[open] summary{border-color:var(--shd-orange);background:var(--shd-surface-active);color:var(--shd-orange)}.info-popover-panel{position:absolute;z-index:9;top:calc(100% + 6px);right:0;width:min(290px,calc(100vw - 32px));display:grid;gap:5px;padding:10px;border:1px solid var(--shd-border-strong);background:var(--shd-surface);box-shadow:8px 12px 28px #0009}.info-popover-panel strong{color:var(--shd-orange);font-size:var(--shd-type-telemetry);letter-spacing:.7px}.info-popover-panel p{margin:0;color:var(--shd-text-muted);font:var(--shd-type-supporting)/1.5 var(--shd-font-editorial)}
+	@media(max-width:600px){.info-popover summary{width:44px;height:44px}.info-popover-panel{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto}}
+	@media(prefers-reduced-motion:reduce){.info-popover summary{transition:none}}
+</style>