Refactor +page.svelte: simplify robot state handling, enhance layout …

…responsiveness, and improve overflow management (styling)
Team3256 · Jan 18, 2025 · f6b5d31 · f6b5d31
1 parent 4fbf89b
commit f6b5d31
Showing 1 changed file with 15 additions and 32 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -18,47 +18,38 @@
 	import Subsystems from '$lib/components/Subsystems.svelte';
 	import Reef from '$lib/components/reefscape/Reef.svelte';
 	import LevelSelector from '$lib/components/reefscape/LevelSelector.svelte';
+
 	let teamNum = $state(3256);
 	let devMode = $state(false);
 	let address = $state('localhost');
 	let port = $state(5810);
 	let configMode = $state('simple');
+
 	const nt = $derived(
 		configMode === 'simple'
 			? devMode
 				? NetworkTables.getInstanceByURI('localhost')
 				: NetworkTables.getInstanceByTeam(teamNum)
 			: NetworkTables.getInstanceByURI(address, port)
 	);
+
 	let active = $state(false);
 </script>
 
-<!-- <h1 class="my-3 text-center text-4xl">William's Demise</h1>
-<div class="flex justify-center">
-	<div class="flex items-center space-x-2">
-		<Switch id="airplane-mode" bind:checked={devMode} />
-		<Label for="airplane-mode">Dev Mode</Label>
-	</div>
-</div> -->
 <div class="my-3 flex w-full justify-center space-x-2 px-3">
 	<FMSControlData
 		{nt}
 		onChange={(robotState) => {
-			if (robotState === 'Disconnected' || robotState === 'Unknown' || robotState === 'Disabled') {
+			if (['Disconnected', 'Unknown', 'Disabled'].includes(robotState)) {
 				active = false;
 				return;
 			}
-			if (!active) {
-				active = true;
-			}
+			active = true;
 		}}
 	/>
 	<MatchTimer {active} />
 </div>
 
-<!-- <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p> -->
-
-<!-- <div class="h-fit flex-[50%] flex-col justify-start px-3"> -->
 <div class="space-y-3 px-3">
 	<div class="flex">
 		<Subsystems {nt} />
@@ -79,13 +70,13 @@
 			/>
 		</div>
 	</div>
-	<!-- </div> -->
+
 	<div class="flex justify-start space-x-4">
 		<Card.Root>
 			<Card.Header>
 				<Card.Title>Config</Card.Title>
 			</Card.Header>
-			<Card.Content class="space-y-5">
+			<Card.Content class="space-y-5 overflow-visible">
 				<Tabs.Root bind:value={configMode} class="w-full">
 					<Tabs.List class="grid w-full grid-cols-2">
 						<Tabs.Trigger value="simple">Simple</Tabs.Trigger>
@@ -95,9 +86,6 @@
 						<Card.Root>
 							<Card.Header>
 								<Card.Title>Simple</Card.Title>
-								<!-- <Card.Description>
-									Make changes to your account here. Click save when you're done.
-								</Card.Description> -->
 							</Card.Header>
 							<Card.Content class="space-y-2">
 								<div class="flex items-center space-x-2">
@@ -115,9 +103,6 @@
 						<Card.Root>
 							<Card.Header>
 								<Card.Title>URI</Card.Title>
-								<!-- <Card.Description>
-									Change your password here. After saving, you'll be logged out.
-								</Card.Description> -->
 							</Card.Header>
 							<Card.Content class="space-y-2">
 								<div class="grid w-full max-w-sm items-center gap-1.5">
@@ -135,24 +120,22 @@
 			</Card.Content>
 		</Card.Root>
 
-		<Card.Root>
+		<Card.Root class="flex-grow">
 			<Card.Header>
 				<Card.Title>Reef Status</Card.Title>
 			</Card.Header>
-			<Card.Content>
-				<div class="flex gap-4">
-					<div>
+			<Card.Content class="overflow-visible">
+				<div class="flex flex-col sm:flex-row items-start gap-6">
+					<div class="shrink-0">
 						<LevelSelector />
 					</div>
-					<div class="flex w-[800px] flex-grow justify-center rounded-lg p-4">
-						<Reef {nt} />
+					<div class="w-full min-h-[800px] flex items-center justify-center rounded-lg bg-black/20 p-6 overflow-visible">
+						<div class="w-full max-w-[700px] overflow-visible">
+							<Reef {nt} class="overflow-visible" />
+						</div>
 					</div>
 				</div>
 			</Card.Content>
 		</Card.Root>
 	</div>
 </div>
-
-<!-- <div class="flex-[50%]">
-		<SubsystemsGraphic {nt} />
-	</div> -->