Initial commit

src/client.ts

@@ -0,0 +1,52 @@
+import { Message } from "@app/types"
+
+export type MessageHandler = (msg: Message) => void
+
+class Client {
+  private ws: WebSocket
+  private handler: MessageHandler
+  private socketReady: boolean
+  private clientReady: boolean
+
+  constructor(handler: MessageHandler) {
+    this.ws = new WebSocket("ws://localhost:3030/state")
+    this.handler = handler
+    this.socketReady = false
+    this.clientReady = false
+
+    this.ws.onopen = () => {
+      console.log("Open")
+      this.socketReady = true
+      this.demand()
+    }
+    this.ws.onmessage = (ev: MessageEvent) => this.handle(ev)
+  }
+
+  close() {
+    this.ws.close()
+  }
+
+  ready() {
+    this.clientReady = true
+    this.demand()
+  }
+
+  private demand() {
+    if (this.socketReady && this.clientReady) {
+      this.ws.send("MOAR")
+    }
+  }
+
+  private handle(ev: MessageEvent) {
+    if (!this.clientReady) {
+      return
+    }
+
+    const msg: Message = JSON.parse(ev.data)
+    this.clientReady = false
+
+    this.handler(msg)
+  }
+}
+
+export default Client

src/components/Home.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react"
+
+import { Message, Object } from "@app/types"
+import Client from "@app/client"
+import ObjectList from "./ObjectList"
+
+function Home() {
+  const [objects, setObjects] = useState<Object[]>([])
+  const [iteration, setIteration] = useState(0)
+  const [messageCount, setMessageCount] = useState(0)
+  const [client, setClient] = useState<Client|null>(null)
+
+  const handleMessage = (msg: Message) => {
+    setObjects(msg.objects)
+    setIteration(msg.iteration)
+    setMessageCount((mc) => mc + 1)
+  }
+
+  useEffect(() => {
+    const client = new Client(handleMessage)
+    setClient(client)
+
+    return () => {
+      client.close()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (client) {
+      client.ready()
+    }
+  }, [client, messageCount])
+
+  return (
+    <>
+      <h1>Hello, World!</h1>
+      <p>Iteration: { iteration }, message count: { messageCount }.</p>
+      <ObjectList objects={objects} />
+    </>
+  )
+}
+
+export default Home

src/components/ObjectList.tsx

@@ -0,0 +1,15 @@
+import React from "react"
+
+import { Object } from "@app/types"
+
+export interface ObjectListProps {
+  objects: Object[]
+}
+
+function ObjectList({ objects }: ObjectListProps) {
+  return (<ul>
+    {objects.map((o) => <li key={o.id}>{o.name} @ ({o.x}, {o.y}, {o.z}) </li>)}
+  </ul>)
+}
+
+export default ObjectList

src/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import Home from '@app/components/Home'
+
+ReactDOM.render(<Home />, document.getElementById('root'))

src/types.ts

@@ -0,0 +1,12 @@
+export interface Object {
+  name: string,
+  id: number,
+  x: number,
+  y: number,
+  z: number
+}
+
+export interface Message {
+  iteration: number,
+  objects: Object[]
+}