feat: Connection ui

client/index.js

@@ -300,6 +300,7 @@ const DebugUiComponent = <DebugUi
   actionRegistry={actionRegistry}
   app={app}
   Parser={AugmentedParser}
+  socket={socket}
   stage={stage}
 />;
 ReactDOM.render(DebugUiComponent, debugUiNode);

client/ui/debug/connection/index.js

@@ -0,0 +1,69 @@
+// 3rd party.
+import classnames from 'classnames';
+import React, {useEffect, useState} from 'react';
+// 2nd party.
+import {compose} from '@avocado/core';
+import contempo from 'contempo';
+// 1st party.
+import Throughput from './throughput';
+
+const decorate = compose(
+  contempo(`
+.connection {
+  background-color: rgba(0, 0, 0, .3);
+  border: 1px solid white;
+  color: white;
+  font-size: 0.8em;
+  height: 4.5em;
+  position: absolute;
+  top: 0.5em;
+  left: calc(320px + 0.5em);
+  line-height: 1em;
+  width: 10em;
+  padding: 0.125em;
+  font-family: monospace;
+}
+.connection > p {
+  margin-left: 0.25em;
+  margin-top: 0.3em;
+  text-transform: uppercase;
+}
+.connection > p.connected {
+  color: rgb(0, 255, 0);
+}
+.connection > p.not-connected {
+  color: rgb(255, 0, 0);
+}
+  `),
+);
+
+const ConnectionComponent = ({
+  Parser,
+  socket,
+}) => {
+  const [isConnected, setIsConnected] = useState(true);
+  // Juggle connected state.
+  useEffect(() => {
+    const onConnect = () => {
+      setIsConnected(true);
+    };
+    socket.on('connect', onConnect);
+    const onDisconnect = () => {
+      setIsConnected(false);
+    };
+    socket.on('disconnect', onDisconnect);
+    return () => {
+      socket.off('connect', onConnect);
+      socket.off('disconnect', onDisconnect);
+    };
+  }, []);
+  return <div className="connection unselectable">
+    <p className={classnames(
+      isConnected ? 'connected' : 'not-connected',
+      'status',
+    )}>{isConnected ? 'connected' : 'not connected'}</p>
+    <Throughput Parser={Parser} />
+  </div>;
+}
+
+export default decorate(ConnectionComponent);

client/ui/debug/connection/throughput.js

@@ -14,10 +14,10 @@ const decorate = compose(
   color: white;
   font-size: 0.8em;
   position: absolute;
-  top: 0.5em;
-  left: calc(320px + 0.5em);
+  top: 2.5em;
+  left: 0.5em;
   line-height: 1em;
-  width: 11em;
+  width: 11.5em;
   padding: 0.125em;
   font-family: monospace;
 }

client/ui/debug/index.js

@@ -7,7 +7,7 @@ import {Vector} from '@avocado/math';
 import contempo from 'contempo';
 // 3rd party.
 import SelfEntity from './self-entity';
-import Throughput from './throughput';
+import Connection from './connection';
 
 const decorate = compose(
   contempo(``),
@@ -17,6 +17,7 @@ const decorate = compose(
 const DebugUi = ({
   actionRegistry,
   app,
+  socket,
   stage,
   Parser,
 }) => {
@@ -72,7 +73,7 @@ const DebugUi = ({
         height: stage.size[1],
       }}
     >
-      <Throughput Parser={Parser} />
+      <Connection Parser={Parser} socket={socket} />
       <SelfEntity app={app} />
     </div>
   </div>;