feat: responsive layout

Author: nsarrazin

godot/scenes/camera_3d.gd

@@ -7,14 +7,20 @@ var _target_node: Node3D = null
 		_set_target(value)
 	get:
 		return _get_target()
-@export var orbit_radius: float = 20.0
+@export var orbit_radius: float = 5.0
 @export var orbit_sensitivity: float = 0.01
 @export var zoom_sensitivity: float = 0.1
 @export var min_zoom: float = 5.0
 @export var max_zoom: float = 50.0
+@export var pinch_zoom_sensitivity: float = 2.0
 
 var orbit_angles = Vector2.ZERO # Stores pitch and yaw angles
 
+# Touch tracking for pinch gestures
+var touch_points = {}
+var initial_pinch_distance = 0.0
+var is_pinching = false
+
 # Called when the node enters the scene tree for the first time.
 func _ready() -> void:
 	# Initialize with no target
@@ -40,6 +46,7 @@ func _unhandled_input(event: InputEvent) -> void:
 	if not target_node:
 		return
 
+	# Handle mouse controls
 	if event is InputEventMouseMotion and event.button_mask == MOUSE_BUTTON_LEFT:
 		# Update orbit angles based on mouse movement
 		orbit_angles.x += event.relative.y * orbit_sensitivity # Reversed y movement
@@ -60,12 +67,70 @@ func _unhandled_input(event: InputEvent) -> void:
 			eff = min(zoom_sensitivity, 0.01)
 		if event.button_index == MOUSE_BUTTON_WHEEL_UP:
 			# Zoom in multiplicatively and clamp to target-aware limits
-			orbit_radius = clamp(orbit_radius * (1.0 - eff), limits.x, limits.y)
+			orbit_radius = clamp(orbit_radius / (1.0 + eff), limits.x, limits.y)
 			_update_camera_position()
 		elif event.button_index == MOUSE_BUTTON_WHEEL_DOWN:
 			# Zoom out multiplicatively and clamp to target-aware limits
 			orbit_radius = clamp(orbit_radius * (1.0 + eff), limits.x, limits.y)
 			_update_camera_position()
+	
+	# Handle touch controls
+	elif event is InputEventScreenTouch:
+		if event.pressed:
+			# Touch down - add to tracking
+			touch_points[event.index] = event.position
+			
+			# Check if we now have two touches for pinching
+			if touch_points.size() == 2:
+				is_pinching = true
+				var positions = touch_points.values()
+				initial_pinch_distance = positions[0].distance_to(positions[1])
+		else:
+			# Touch up - remove from tracking
+			touch_points.erase(event.index)
+			
+			# Stop pinching if we don't have two touches
+			if touch_points.size() < 2:
+				is_pinching = false
+				initial_pinch_distance = 0.0
+	
+	elif event is InputEventScreenDrag:
+		# Update touch position
+		if event.index in touch_points:
+			touch_points[event.index] = event.position
+		
+		# Handle pinch gesture
+		if is_pinching and touch_points.size() == 2:
+			var positions = touch_points.values()
+			var current_distance = positions[0].distance_to(positions[1])
+			
+			if initial_pinch_distance > 0:
+				var zoom_factor = current_distance / initial_pinch_distance
+				var limits := _get_zoom_limits()
+				
+				# Adjust sensitivity based on target type
+				var eff := pinch_zoom_sensitivity * 0.01 # Scale down for smoother control
+				if target_node and "radius" in target_node:
+					eff = min(eff, 0.005) # Even smaller for planets
+				
+				# Apply zoom based on pinch distance change
+				var new_radius = orbit_radius / (1.0 + (zoom_factor - 1.0) * eff)
+				orbit_radius = clamp(new_radius, limits.x, limits.y)
+				
+				_update_camera_position()
+			
+			# Update for next frame
+			initial_pinch_distance = current_distance
+		
+		# Single finger drag for orbit controls (only if not pinching)
+		elif not is_pinching and event.index == 0:
+			orbit_angles.x += event.relative.y * orbit_sensitivity * 2.0 # Slightly more sensitive for touch
+			orbit_angles.y -= event.relative.x * orbit_sensitivity * 2.0
+			
+			# Clamp vertical rotation to avoid flipping
+			orbit_angles.x = clamp(orbit_angles.x, -PI / 2, PI / 2)
+			
+			_update_camera_position()
 
 # Called every frame. 'delta' is the elapsed time since the previous frame.
 func _process(_delta: float) -> void:

web/src/lib/components/GodotEngine.svelte

@@ -108,14 +108,37 @@
 
 		const rect = wrapEl.getBoundingClientRect();
 		const dpr = window.devicePixelRatio || 1;
+		
+		// Target aspect ratio for 480i (4:3)
+		const targetAspectRatio = 4 / 3;
+		const containerAspectRatio = rect.width / rect.height;
+		
+		let canvasWidth, canvasHeight;
+		
+		// Calculate canvas size to fill container while maintaining 4:3 aspect ratio
+		// This works like CSS object-fit: cover - fills container, crops excess
+		if (containerAspectRatio > targetAspectRatio) {
+			// Container is wider than 4:3, so fit to width and crop height
+			canvasWidth = rect.width;
+			canvasHeight = rect.width / targetAspectRatio;
+		} else {
+			// Container is taller than 4:3, so fit to height and crop width  
+			canvasHeight = rect.height;
+			canvasWidth = rect.height * targetAspectRatio;
+		}
 
 		// Set the display size (CSS pixels)
-		canvasEl.style.width = rect.width + 'px';
-		canvasEl.style.height = rect.height + 'px';
+		canvasEl.style.width = canvasWidth + 'px';
+		canvasEl.style.height = canvasHeight + 'px';
+		
+		// Center the canvas in the container
+		canvasEl.style.left = '50%';
+		canvasEl.style.top = '50%';
+		canvasEl.style.transform = 'translate(-50%, -50%)';
 
 		// Set the actual size in memory (scaled for high-DPI displays)
-		canvasEl.width = rect.width * dpr;
-		canvasEl.height = rect.height * dpr;
+		canvasEl.width = canvasWidth * dpr;
+		canvasEl.height = canvasHeight * dpr;
 
 		// Notify the Godot engine if it's running
 		if (engine && engine.requestDisplayRefresh) {
@@ -241,7 +264,7 @@
 	}
 </script>
 
-<div class="relative h-full w-full" bind:this={wrapEl}>
+<div class="relative h-full w-full bg-[#131318] overflow-hidden" bind:this={wrapEl}>
 	<canvas
 		id="canvas"
 		class="absolute inset-0 block"
@@ -292,5 +315,6 @@
 		display: block;
 		outline: none;
 		background: transparent;
+		position: absolute;
 	}
 </style> 

web/src/lib/components/MemoryViewer.svelte

@@ -114,7 +114,7 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 font-mono text-sm">
+<div class="flex h-full flex-col gap-3 font-mono text-sm max-w-2xl mx-auto">
 	<!-- Registers Display -->
 	<div class="flex flex-col gap-2">
 		<div class="border-b border-[#ffb86b]/20 pb-1 text-xs tracking-[0.2em] text-[#ffb86b]/80">
@@ -211,18 +211,18 @@
 				<div
 					class="grid-cols-17 sticky top-0 mb-1 grid gap-1 bg-[#131318] text-xs text-[#ffb86b]/40"
 				>
-					<div></div>
-					<!-- Empty cell for row headers -->
+					<div class="text-right"></div>
+					<!-- Empty cell for row headers, aligned right like row headers -->
 					{#each Array(16) as _, i}
-						<div class="text-center">{formatHex(i, 1)}</div>
+						<div class="text-center p-1">{formatHex(i, 1)}</div>
 					{/each}
 				</div>
 
 				<!-- Memory rows -->
 				{#each Array(16) as _, row}
 					<div class="grid-cols-17 mb-1 grid gap-1 text-xs">
 						<!-- Row header -->
-						<div class="text-right text-[#ffb86b]/40">
+						<div class="text-right text-[#ffb86b]/40 p-1">
 							{formatHex(currentPage * 16 + row, 1)}0:
 						</div>
 
@@ -257,6 +257,6 @@
 <style>
 	/* Custom grid for 16 columns + 1 header column */
 	.grid-cols-17 {
-		grid-template-columns: auto repeat(16, 1fr);
+		grid-template-columns: 3ch repeat(16, minmax(2ch, 1fr));
 	}
 </style>

web/src/routes/+page.svelte

@@ -113,9 +113,9 @@ inner_loop:
 	<link rel="manifest" href="SpessComputer.manifest.json" />
 </svelte:head>
 
-<main class="flex gap-4 p-4">
-	<!-- LEFT: Canvas panel with 4:3 aspect ratio -->
-	<section class="relative bg-[#101014] shadow-[inset_0_0_0_2px_rgba(255,184,107,0.15)]" style="width: min(calc((100vh - 2rem) * 4/3), 60vw); height: min(calc(100vh - 2rem), calc(60vw * 3/4));">
+<main class="flex flex-col lg:flex-row gap-4 p-4">
+	<!-- VISUAL LINK: Top on mobile, left on desktop -->
+	<section class="relative bg-[#101014] shadow-[inset_0_0_0_2px_rgba(255,184,107,0.15)] w-full lg:w-auto order-first flex-shrink-0 lg:aspect-[4/3] lg:h-[calc(100vh-2rem)] lg:max-w-[60vw]" style="height: 50vh;">
 		<div
 			class="flex items-center justify-between border-b border-[#ffb86b]/30 px-3 py-2 text-xs tracking-[0.2em]"
 		>
@@ -134,8 +134,8 @@ inner_loop:
 		{@render Corner('br')}
 	</section>
 
-	<!-- RIGHT: Tabs panel -->
-	<section class="relative flex-1 bg-[#101014] shadow-[inset_0_0_0_2px_rgba(255,184,107,0.15)]">
+	<!-- CONTROL DECK: Bottom on mobile, right on desktop -->
+	<section class="relative flex-1 bg-[#101014] shadow-[inset_0_0_0_2px_rgba(255,184,107,0.15)] order-last">
 		<div
 			class="flex items-center justify-between border-b border-[#ffb86b]/30 px-3 py-2 text-xs tracking-[0.2em]"
 		>
@@ -144,7 +144,7 @@ inner_loop:
 
 		<!-- Tabs -->
 		<div
-			class="flex gap-2 border-b border-[#ffb86b]/20 bg-[#0f0f12] px-3 py-2"
+			class="flex gap-1 sm:gap-2 border-b border-[#ffb86b]/20 bg-[#0f0f12] px-2 sm:px-3 py-2"
 			role="tablist"
 			aria-label="Controls"
 			onkeydown={onTabsKey}
@@ -156,7 +156,7 @@ inner_loop:
 
 		<!-- Panels -->
 		<div
-			class="h-[calc(60vh-6rem)] bg-[#131318] p-3 shadow-[inset_0_0_0_1px_rgba(255,184,107,0.15),0_0_0_0_1px_rgba(255,184,107,0.08)] lg:h-[calc(78vh-6rem)]"
+			class="min-h-[80vh] lg:h-[calc(60vh-6rem)] xl:h-[calc(78vh-6rem)] bg-[#131318] p-2 sm:p-3 shadow-[inset_0_0_0_1px_rgba(255,184,107,0.15),0_0_0_0_1px_rgba(255,184,107,0.08)]"
 		>
 			{#if activeTab === 'tab1'}
 				<div
@@ -167,12 +167,13 @@ inner_loop:
 					class="flex h-full min-h-0 flex-col gap-3"
 					in:fade={{ duration: 150 }}
 				>
-					<div class="flex-1 min-h-0 overflow-y-auto">
+					<div class="flex-1 min-h-[60vh] lg:min-h-0 overflow-y-auto">
 						<Asm6502Editor bind:value={source} className="h-full" />
 					</div>
 						<button
 						onclick={() => handleRespawnShip()}
-						class="transform border border-[#ffb86b]/40 bg-[#0f0f12] px-4 py-2 tracking-[0.18em]
+						class="transform border border-[#ffb86b]/40 bg-[#0f0f12] px-3 sm:px-4 py-2 
+						       text-xs sm:text-sm tracking-[0.15em] sm:tracking-[0.18em]
 						       text-[#ffb86b]/80 shadow-[inset_0_0_0_1px_rgba(255,184,107,0.35)] transition hover:text-[#ffb86b]
 						       hover:brightness-110 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50"
 							disabled={isRespawning}
@@ -202,7 +203,7 @@ inner_loop:
 					in:fade={{ duration: 150 }}
 				>
 					{#if engine}
-						<div class="min-h-0 flex-1">
+						<div class="min-h-[60vh] lg:min-h-0 flex-1 overflow-y-auto">
 							<MemoryViewer />
 						</div>
 						<div class="mt-3">
@@ -219,7 +220,7 @@ inner_loop:
 					hidden
 				>
 					{#if engine}
-						<div class="min-h-0 flex-1" style="display: none;">
+						<div class="min-h-[60vh] lg:min-h-0 flex-1 overflow-y-auto" style="display: none;">
 							<MemoryViewer />
 						</div>
 						<div class="mt-3" style="display: none;">
@@ -260,9 +261,10 @@ inner_loop:
 		aria-controls={`tab-panel-${id.slice(-1)}`}
 		tabindex={activeTab === id ? 0 : -1}
 		onclick={() => (activeTab = id)}
-		class="transform border border-[#ffb86b]/40 bg-[#0f0f12] px-3 py-2 tracking-[0.18em]
+		class="transform border border-[#ffb86b]/40 bg-[#0f0f12] px-2 sm:px-3 py-1.5 sm:py-2 
+		       text-xs sm:text-sm tracking-[0.15em] sm:tracking-[0.18em] flex-1 sm:flex-none
            text-[#ffb86b]/80 shadow-[inset_0_0_0_1px_rgba(255,184,107,0.35)] transition hover:brightness-110
-           active:scale-[0.98] data-[active=true]:text-[#ffb86b]"
+           active:scale-[0.98] data-[active=true]:text-[#ffb86b] whitespace-nowrap"
 		data-active={activeTab === id}
 	>
 		{label}