Checkpoint SHD dashboard design system

2026-07-24 21:31:35 -04:00
commit 5e113454ee
52 changed files with 3128 additions and 0 deletions
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	type Slot = { name: string; item: string; brand: string; core: string };
+	let buildName = $state('Untitled loadout');
+	let saved = $state(false);
+	let message = $state('');
+	let slots = $state<Slot[]>([
+		{ name: 'Primary weapon', item: 'Police M4', brand: 'Assault rifle', core: '5,184 DMG' },
+		{ name: 'Secondary weapon', item: 'SVD', brand: 'Marksman rifle', core: '8,420 DMG' },
+		{ name: 'Mask', item: 'Striker Mask', brand: "Striker's Battlegear", core: '+42 Firearms' },
+		{ name: 'Vest', item: 'Reinforced Vest', brand: 'Fenris Group AB', core: '+38 Armor' },
+		{ name: 'Backpack', item: 'Field Pack', brand: "Striker's Battlegear", core: '+39 Firearms' },
+		{ name: 'Gloves', item: 'Tactical Gloves', brand: 'Sokolov Concern', core: '+6.5% CHC' }
+	]);
+	onMount(() => {
+		const draft = localStorage.getItem('shd-build-loadout-draft');
+		if (!draft) return;
+		try {
+			const parsed = JSON.parse(draft);
+			buildName = parsed.buildName ?? buildName;
+			slots = parsed.slots ?? slots;
+			saved = true;
+		} catch { localStorage.removeItem('shd-build-loadout-draft'); }
+	});
+	function saveDraft() {
+		localStorage.setItem('shd-build-loadout-draft', JSON.stringify({ buildName, slots, updatedAt: new Date().toISOString() }));
+		saved = true; message = 'Draft saved on this device.';
+		setTimeout(() => (message = ''), 2200);
+	}
+</script>
+
+<svelte:head><title>Build a loadout — SHD.build</title></svelte:head>
+<main class="app-page">
+	<div class="page-title"><div><p class="eyebrow"><span></span> LOADOUT WORKBENCH</p><input bind:value={buildName} aria-label="Build name" /></div><div class="actions"><span class:visible={saved}>SAVED LOCALLY</span><button class="primary" onclick={saveDraft}>SAVE DRAFT</button></div></div>
+	{#if message}<p class="success" role="status">{message}</p>{/if}
+	<div class="builder-layout">
+		<section class="slot-grid">{#each slots as slot}<button class="slot-card" onclick={() => (message = `${slot.name} editing will be added in the next builder increment.`)}><span class="slot-label">{slot.name}</span><span class="slot-icon">◇</span><strong>{slot.item}</strong><small>{slot.brand}</small><b>{slot.core}</b></button>{/each}</section>
+		<aside class="summary"><p class="eyebrow"><span></span> LIVE SUMMARY</p><h2>AGENT STATS</h2><div class="stat"><span>Firepower</span><strong>4,218</strong><i style="width:76%"></i></div><div class="stat"><span>Armor</span><strong>2,840</strong><i style="width:53%"></i></div><div class="stat"><span>Skill power</span><strong>1,265</strong><i style="width:30%"></i></div><hr/><div class="mini"><span>Critical chance</span><b>52.5%</b></div><div class="mini"><span>Critical damage</span><b>118%</b></div><p class="notice">Anonymous drafts stay on this device. Sign in to publish and sync builds.</p></aside>
+	</div>
+</main>