Initial project setup: Rust/WASM solar system simulator with SvelteKit frontend

- Rust workspace with 4 crates: orbital-mechanics, mass-driver-core, mass-driver-wasm, mass-driver-backend - Keplerian orbital mechanics engine with JPL elements for 14 bodies (Sun, 8 planets, Pluto, Ceres, Europa, Titan, Ganymede) - Kepler equation solver and orbital position computation compiled to WASM - SvelteKit frontend with Tailwind CSS, Canvas2D renderer showing animated solar system - Orbit ellipses, planet dots with labels, Sun glow, grid, scale bar, pan/zoom controls - Time controls (play/pause, 5 speed levels, date picker) driving live simulation - 2D/3D view toggle (3D placeholder for Threlte integration) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 22:06:30 -07:00
commit 5efe0736ac
45 changed files with 4626 additions and 0 deletions
--- a/frontend/src/routes/(simulator)/components/Canvas2DView.svelte
+++ b/frontend/src/routes/(simulator)/components/Canvas2DView.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { SolarSystem2DRenderer } from '$lib/render/canvas2d/SolarSystem2D';
+	import { simulation } from '$lib/stores/simulation.svelte';
+	import { getBodyPositions, getBodyInfos, getOrbitPoints } from '$lib/wasm/bridge';
+
+	let canvas: HTMLCanvasElement;
+	let renderer: SolarSystem2DRenderer;
+	let animFrameId: number;
+	let orbitsComputed = false;
+
+	function computeOrbits() {
+		const bodyCount = simulation.bodyInfos.length;
+		for (let i = 1; i < bodyCount; i++) {
+			const points = getOrbitPoints(i, simulation.currentJD, 360);
+			if (points.length > 0) {
+				renderer.updateOrbit(i, points);
+			}
+		}
+		orbitsComputed = true;
+	}
+
+	onMount(() => {
+		renderer = new SolarSystem2DRenderer(canvas);
+
+		if (simulation.wasmReady) {
+			simulation.bodyInfos = getBodyInfos();
+		}
+
+		let lastTime = performance.now();
+		let frameCount = 0;
+
+		function mainLoop() {
+			const now = performance.now();
+			const dt = (now - lastTime) / 1000;
+			lastTime = now;
+			simulation.advanceTime(dt);
+
+			if (simulation.wasmReady) {
+				simulation.bodyPositions = getBodyPositions(simulation.currentJD);
+				renderer.updateBodies(simulation.bodyInfos, simulation.bodyPositions);
+
+				// Compute orbits on first frame and refresh every 600 frames (~10s)
+				if (!orbitsComputed || frameCount % 600 === 0) {
+					computeOrbits();
+				}
+			}
+			renderer.render();
+			frameCount++;
+			animFrameId = requestAnimationFrame(mainLoop);
+		}
+
+		mainLoop();
+	});
+
+	onDestroy(() => {
+		if (animFrameId) cancelAnimationFrame(animFrameId);
+		renderer?.destroy();
+	});
+</script>
+
+<canvas
+	bind:this={canvas}
+	class="w-full h-full block"
+	style="cursor: grab;"
+></canvas>
--- a/frontend/src/routes/(simulator)/components/TimeControls.svelte
+++ b/frontend/src/routes/(simulator)/components/TimeControls.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { simulation } from '$lib/stores/simulation.svelte';
+
+	const speedOptions = [
+		{ label: '1x', value: 1 },
+		{ label: '4x', value: 4 },
+		{ label: '12x', value: 12 },
+		{ label: '52x', value: 52 },
+		{ label: '260x', value: 260 },
+	];
+
+	function handleDateInput(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const [year, month, day] = input.value.split('-').map(Number);
+		if (year && month && day) {
+			simulation.setDate(year, month, day);
+		}
+	}
+</script>
+
+<div class="flex items-center gap-3 px-4 py-2 bg-[var(--bg-panel)] rounded-lg border border-white/5">
+	<!-- Play/Pause -->
+	<button
+		onclick={() => simulation.togglePlay()}
+		class="w-8 h-8 flex items-center justify-center rounded hover:bg-white/10 transition-colors"
+		title={simulation.isPlaying ? 'Pause' : 'Play'}
+	>
+		{#if simulation.isPlaying}
+			<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+				<rect x="2" y="1" width="3.5" height="12" rx="1" />
+				<rect x="8.5" y="1" width="3.5" height="12" rx="1" />
+			</svg>
+		{:else}
+			<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+				<polygon points="2,1 12,7 2,13" />
+			</svg>
+		{/if}
+	</button>
+
+	<!-- Speed selector -->
+	<div class="flex gap-1">
+		{#each speedOptions as opt}
+			<button
+				onclick={() => { simulation.playbackSpeed = opt.value; }}
+				class="px-2 py-0.5 text-xs rounded transition-colors {simulation.playbackSpeed === opt.value
+					? 'bg-[var(--accent-blue)] text-white'
+					: 'text-[var(--text-secondary)] hover:bg-white/5'}"
+			>
+				{opt.label}
+			</button>
+		{/each}
+	</div>
+
+	<!-- Separator -->
+	<div class="w-px h-5 bg-white/10"></div>
+
+	<!-- Date display -->
+	<div class="flex items-center gap-2">
+		<span class="text-xs text-[var(--text-secondary)]">Date:</span>
+		<input
+			type="date"
+			value={simulation.currentDateStr}
+			onchange={handleDateInput}
+			class="bg-transparent text-sm text-[var(--text-primary)] border border-white/10 rounded px-2 py-0.5 [color-scheme:dark]"
+		/>
+	</div>
+
+	<!-- Week index -->
+	<span class="text-xs text-[var(--text-secondary)] ml-auto">
+		Week {simulation.currentWeekIndex.toLocaleString()}
+	</span>
+</div>
--- a/frontend/src/routes/(simulator)/components/ViewToggle.svelte
+++ b/frontend/src/routes/(simulator)/components/ViewToggle.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { simulation, type ViewMode } from '$lib/stores/simulation.svelte';
+
+	function setView(mode: ViewMode) {
+		simulation.viewMode = mode;
+	}
+</script>
+
+<div class="flex bg-[var(--bg-panel)] rounded-lg border border-white/5 overflow-hidden">
+	<button
+		onclick={() => setView('2d')}
+		class="px-3 py-1.5 text-xs font-medium transition-colors {simulation.viewMode === '2d'
+			? 'bg-[var(--accent-blue)] text-white'
+			: 'text-[var(--text-secondary)] hover:bg-white/5'}"
+	>
+		2D
+	</button>
+	<button
+		onclick={() => setView('3d')}
+		class="px-3 py-1.5 text-xs font-medium transition-colors {simulation.viewMode === '3d'
+			? 'bg-[var(--accent-blue)] text-white'
+			: 'text-[var(--text-secondary)] hover:bg-white/5'}"
+	>
+		3D
+	</button>
+</div>
--- a/frontend/src/routes/(simulator)/components/Viewport.svelte
+++ b/frontend/src/routes/(simulator)/components/Viewport.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { simulation } from '$lib/stores/simulation.svelte';
+	import Canvas2DView from './Canvas2DView.svelte';
+
+	// 3D view will be added in Phase 3
+</script>
+
+<div class="relative w-full h-full">
+	{#if simulation.viewMode === '2d'}
+		<Canvas2DView />
+	{:else}
+		<div class="w-full h-full flex items-center justify-center text-[var(--text-secondary)]">
+			<p class="text-sm">3D view coming soon...</p>
+		</div>
+	{/if}
+</div>
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import '../app.css';
+	import favicon from '$lib/assets/favicon.svg';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+	<title>Mass Driver — Interplanetary Relay Network</title>
+</svelte:head>
+
+{@render children()}
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { simulation } from '$lib/stores/simulation.svelte';
+	import { initWasm } from '$lib/wasm/loader';
+	import { getBodyInfos } from '$lib/wasm/bridge';
+	import Viewport from './(simulator)/components/Viewport.svelte';
+	import TimeControls from './(simulator)/components/TimeControls.svelte';
+	import ViewToggle from './(simulator)/components/ViewToggle.svelte';
+
+	let wasmError = $state('');
+
+	onMount(async () => {
+		try {
+			await initWasm();
+			simulation.bodyInfos = getBodyInfos();
+			simulation.wasmReady = true;
+			// Start in Jan 2025 for a recognizable view
+			simulation.setDate(2025, 1, 1);
+			simulation.isPlaying = true;
+		} catch (e) {
+			wasmError = String(e);
+			console.error('Failed to load WASM module:', e);
+		}
+	});
+</script>
+
+<div class="h-screen w-screen flex flex-col bg-[var(--bg-primary)]">
+	<!-- Top bar -->
+	<header class="flex items-center justify-between px-4 py-2 bg-[var(--bg-secondary)] border-b border-white/5 shrink-0">
+		<div class="flex items-center gap-3">
+			<h1 class="text-sm font-bold tracking-wide text-[var(--text-primary)]">
+				MASS DRIVER
+			</h1>
+			<span class="text-xs text-[var(--text-secondary)]">Interplanetary Relay Network</span>
+		</div>
+		<ViewToggle />
+	</header>
+
+	<!-- Main content -->
+	<main class="flex-1 relative overflow-hidden">
+		{#if wasmError}
+			<div class="absolute inset-0 flex items-center justify-center">
+				<div class="bg-red-900/50 border border-red-500/30 rounded-lg p-6 max-w-md">
+					<h2 class="text-red-400 font-bold mb-2">Failed to load simulation engine</h2>
+					<p class="text-sm text-red-300/80">{wasmError}</p>
+				</div>
+			</div>
+		{:else if !simulation.wasmReady}
+			<div class="absolute inset-0 flex items-center justify-center">
+				<div class="text-center">
+					<div class="w-8 h-8 border-2 border-[var(--accent-blue)] border-t-transparent rounded-full animate-spin mx-auto mb-3"></div>
+					<p class="text-sm text-[var(--text-secondary)]">Initializing simulation engine...</p>
+				</div>
+			</div>
+		{:else}
+			<Viewport />
+		{/if}
+	</main>
+
+	<!-- Bottom bar: time controls -->
+	<footer class="px-4 py-2 bg-[var(--bg-secondary)] border-t border-white/5 shrink-0">
+		<TimeControls />
+	</footer>
+</div>
--- a/frontend/src/routes/+page.ts
+++ b/frontend/src/routes/+page.ts
@@ -0,0 +1 @@
+export const ssr = false;