Mercurial > code > home > repos > light-bridge
annotate src/main.ts @ 11:028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
| author | drewp@bigasterisk.com |
|---|---|
| date | Sun, 28 Jan 2024 17:31:06 -0800 |
| parents | 9f427d8073c3 |
| children | 7cc004eafb82 |
| rev | line source |
|---|---|
| 0 | 1 import { LitElement, css, html } from "lit"; |
| 2 import { customElement, state } from "lit/decorators.js"; | |
| 3 | |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
4 interface Light { |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
5 name: string; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
6 address: string; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
7 requestingColor: string; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
8 requestingDeviceColor: object; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
9 emittingColor: string; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
10 online: boolean; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
11 latencyMs: number; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
12 } |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
13 |
| 0 | 14 @customElement("lb-page") |
| 15 export class LbPage extends LitElement { | |
| 16 static styles = [ | |
| 17 css` | |
| 18 :host { | |
| 19 display: flex; | |
| 20 flex-direction: column; | |
| 21 height: 100vh; | |
| 22 } | |
| 23 table { | |
| 24 border-collapse: collapse; | |
| 25 } | |
| 26 td, | |
| 27 th { | |
| 28 border: 1px solid #aaa; | |
| 29 text-align: center; | |
| 30 } | |
| 31 .color { | |
| 32 display: inline-block; | |
| 33 width: 30px; | |
| 34 height: 30px; | |
| 35 border-radius: 50%; | |
| 36 margin: 3px; | |
| 37 vertical-align: middle; | |
| 38 } | |
| 9 | 39 .col-group-1 { |
| 40 background: #e0ecf4; | |
| 41 } | |
| 42 .col-group-2 { | |
| 43 background: #e0f3db; | |
| 44 } | |
| 45 .col-group-3 { | |
| 46 background: #fee8c8; | |
| 47 } | |
| 0 | 48 `, |
| 49 ]; | |
| 3 | 50 |
| 51 // bug https://github.com/lit/lit/issues/4305 | |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
52 @((state as any)()) lights: Light[] = []; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
53 @((state as any)()) lightByName: Map<string, Light> = new Map(); |
| 9 | 54 @((state as any)()) reportTime: Date = new Date(0); |
| 0 | 55 |
| 56 connectedCallback(): void { | |
| 57 super.connectedCallback(); | |
| 58 const es = new EventSource("api/table"); | |
| 59 es.onmessage = (ev) => { | |
| 1 | 60 const body = JSON.parse(ev.data); |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
61 this.lights = body.lights.map((wrappedLight: any) => wrappedLight.light as Light); |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
62 this.rebuildLightByName(); |
| 1 | 63 this.reportTime = new Date(body.now * 1000); |
| 0 | 64 }; |
| 65 } | |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
66 private rebuildLightByName() { |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
67 this.lightByName = new Map(); |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
68 this.lights.forEach((light: any) => { |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
69 this.lightByName.set(light.name, light); |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
70 }); |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
71 } |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
72 |
| 0 | 73 render() { |
| 74 return html` | |
| 75 <h1>Light-bridge</h1> | |
| 76 | |
| 77 <table> | |
| 78 <tr> | |
| 9 | 79 <th class="col-group-1">light</th> |
| 80 <th class="col-group-1">address</th> | |
| 81 <th class="col-group-2">requested color</th> | |
| 82 <th class="col-group-2">requested device color</th> | |
| 83 <th class="col-group-3">emitting color</th> | |
| 84 <th class="col-group-3">online</th> | |
| 85 <th class="col-group-3">latency</th> | |
| 0 | 86 </tr> |
| 87 ${this.lights.map( | |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
88 (d: Light) => html` |
| 0 | 89 <tr> |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
90 <td class="col-group-1">${d.name}</td> |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
91 <td class="col-group-1"><code>${d.address}</code></td> |
| 9 | 92 <td class="col-group-2"> |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
93 <code>${d.requestingColor}</code> |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
94 <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" /> |
| 0 | 95 </td> |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
96 <td class="col-group-2"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td> |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
97 <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td> |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
98 <td class="col-group-3">${d.online ? "✔" : ""}</td> |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
99 <td class="col-group-3">${d.latencyMs} ms</td> |
| 0 | 100 </tr> |
| 101 ` | |
| 102 )} | |
| 103 </table> | |
| 1 | 104 <p>Updated ${this.reportTime.toLocaleString("sv")}</p> |
| 0 | 105 <p> |
| 106 <a href="metrics">metrics</a> | | |
| 107 <a href="api/graph">graph</a> | |
| 108 </p> | |
| 109 <bigast-loginbar></bigast-loginbar> | |
| 110 `; | |
| 111 } | |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
112 async onRequestingColor(lightName: string, ev: InputEvent) { |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
113 const currentRequest = this.lightByName.get(lightName)!.requestingColor; |
| 0 | 114 const value = (ev.target as HTMLInputElement).value; |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
115 console.log("LbPage ~ onRequestingColor ~ value === currentRequest:", value, currentRequest); |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
116 if (value === currentRequest) { |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
117 return; |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
118 } |
| 0 | 119 const url = new URL("api/output", location as any); |
| 120 url.searchParams.append("light", lightName); | |
| 121 fetch(url, { method: "PUT", body: value }); // todo: only run one fetch at a time, per light | |
|
11
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
122 |
|
028ed39aa78f
more ts types; attempted multiplayer but the change events are managed wrong
drewp@bigasterisk.com
parents:
9
diff
changeset
|
123 // sometime after this, the SSE table will send us back the change we made (probably) |
| 0 | 124 } |
| 125 } |