Adding NT

src/lib/components/reefscape/LevelSelector.svelte

@@ -24,8 +24,9 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		background: #1a1a1a;
-		padding: 1rem;
+		background: #0a0a0a;
+
+		padding: 2rem;
 		border-radius: 0.5rem;
 	}
 
@@ -36,7 +37,7 @@
 	}
 
 	button {
-		padding: 0.5rem 1rem;
+		padding: 1rem 5rem;
 		border: 1px solid #333;
 		background: #2a2a2a;
 		color: #fff;
@@ -45,11 +46,11 @@
 	}
 
 	button:hover {
-		background: #333;
+		background: #444;
 	}
 
 	button.active {
 		background: #404040;
-		border-color: #666;
+		border-color: #118800;
 	}
 </style>

src/lib/components/reefscape/stores.js

@@ -1,14 +1,42 @@
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 
 export const selectedLevel = writable('L1');
 
 export const levelStates = writable({
-	L1: Array(12).fill('gray'),
-	L2: Array(12).fill('gray'),
-	L3: Array(12).fill('gray'),
-	L4: Array(12).fill('gray')
+    L1: Array(12).fill('gray'),
+    L2: Array(12).fill('gray'),
+    L3: Array(12).fill('gray'),
+    L4: Array(12).fill('gray')
 });
 
-levelStates.subscribe((states) => {
-	console.log(states);
+// Create a derived store that maps the state colors to numeric values for NetworkTables
+export const levelStatesNT = derived(levelStates, ($levelStates) => {
+    const ntValues = {};
+    for (const level in $levelStates) {
+        ntValues[level] = $levelStates[level].map(color => {
+            switch (color) {
+                case 'gray': return 0;
+                case 'yellow': return 1;
+                case 'lime': return 2;
+                case 'red': return 3;
+                default: return 0;
+            }
+        });
+    }
+    return ntValues;
+});
+
+// Update NetworkTables
+export function updateNetworkTables(nt, states) {
+    if (!nt) return;
+
+    for (const level in states) {
+        nt.putValue(`/ReefScape/${level}`, states[level]);
+    }
+}
+
+// Subscribe to state changes and update NT
+levelStatesNT.subscribe(states => {
+    // called from the Reef component with the actual NT instance
+    console.log('Reef states updated:', states);
 });

src/routes/+page.svelte

@@ -144,8 +144,8 @@
 					<div>
 						<LevelSelector />
 					</div>
-					<div class="flex w-[900px] flex-grow justify-center rounded-lg p-4">
-						<Reef />
+					<div class="flex w-[800px] flex-grow justify-center rounded-lg p-4">
+						<Reef {nt} />
 					</div>
 				</div>
 			</Card.Content>