--- a/src/main.ts	Sun Jan 28 16:53:35 2024 -0800
+++ b/src/main.ts	Sun Jan 28 17:31:06 2024 -0800
@@ -1,6 +1,16 @@
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
+interface Light {
+  name: string;
+  address: string;
+  requestingColor: string;
+  requestingDeviceColor: object;
+  emittingColor: string;
+  online: boolean;
+  latencyMs: number;
+}
+
 @customElement("lb-page")
 export class LbPage extends LitElement {
   static styles = [
@@ -39,7 +49,8 @@
   ];
 
   // bug https://github.com/lit/lit/issues/4305
-  @((state as any)()) lights: object[] = [];
+  @((state as any)()) lights: Light[] = [];
+  @((state as any)()) lightByName: Map<string, Light> = new Map();
   @((state as any)()) reportTime: Date = new Date(0);
 
   connectedCallback(): void {
@@ -47,10 +58,18 @@
     const es = new EventSource("api/table");
     es.onmessage = (ev) => {
       const body = JSON.parse(ev.data);
-      this.lights = body.lights;
+      this.lights = body.lights.map((wrappedLight: any) => wrappedLight.light as Light);
+      this.rebuildLightByName();
       this.reportTime = new Date(body.now * 1000);
     };
   }
+  private rebuildLightByName() {
+    this.lightByName = new Map();
+    this.lights.forEach((light: any) => {
+      this.lightByName.set(light.name, light);
+    });
+  }
+
   render() {
     return html`
       <h1>Light-bridge</h1>
@@ -66,18 +85,18 @@
           <th class="col-group-3">latency</th>
         </tr>
         ${this.lights.map(
-          (d: any) => html`
+          (d: Light) => html`
             <tr>
-              <td class="col-group-1">${d.light.name}</td>
-              <td class="col-group-1"><code>${d.light.address}</code></td>
+              <td class="col-group-1">${d.name}</td>
+              <td class="col-group-1"><code>${d.address}</code></td>
               <td class="col-group-2">
-                <code>${d.light.requestingColor}</code>
-                <input type="color" @input=${this.onRequestingColor.bind(this, d.light.name)} .value="${d.light.requestingColor}" />
+                <code>${d.requestingColor}</code>
+                <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" />
               </td>
-              <td class="col-group-2"><code>${JSON.stringify(d.light.requestingDeviceColor)}</code></td>
-              <td class="col-group-3">${d.light.emittingColor} <span class="color" style="background: ${d.light.emittingColor}"></span></td>
-              <td class="col-group-3">${d.light.online ? "✔" : ""}</td>
-              <td class="col-group-3">${d.light.latencyMs} ms</td>
+              <td class="col-group-2"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
+              <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td>
+              <td class="col-group-3">${d.online ? "✔" : ""}</td>
+              <td class="col-group-3">${d.latencyMs} ms</td>
             </tr>
           `
         )}
@@ -90,10 +109,17 @@
       <bigast-loginbar></bigast-loginbar>
     `;
   }
-  onRequestingColor(lightName: string, ev: InputEvent) {
+  async onRequestingColor(lightName: string, ev: InputEvent) {
+    const currentRequest = this.lightByName.get(lightName)!.requestingColor;
     const value = (ev.target as HTMLInputElement).value;
+    console.log("LbPage ~ onRequestingColor ~ value === currentRequest:", value, currentRequest);
+    if (value === currentRequest) {
+      return;
+    }
     const url = new URL("api/output", location as any);
     url.searchParams.append("light", lightName);
     fetch(url, { method: "PUT", body: value }); // todo: only run one fetch at a time, per light
+
+    // sometime after this, the SSE table will send us back the change we made (probably)
   }
 }