refactor: throughput display logic to component

client/index.js

@@ -150,18 +150,6 @@ const AugmentedParser = augmentParserWithThroughput(SocketIoParser);
 const socket = createClient(window.location.href, {
   parser: AugmentedParser,
 });
-// Throughput ticker.
-const throughputSampleTime = 0.5;
-const throughputTicker = new Ticker(throughputSampleTime);
-const {Decoder, Encoder} = AugmentedParser;
-throughputTicker.on('tick', () => {
-  throughputTicker.emit('updateThroughput', Vector.scale([
-    Decoder.throughput,
-    Encoder.throughput,
-  ], 1 / throughputSampleTime));
-  Decoder.throughput = 0;
-  Encoder.throughput = 0;
-});
 // Mouse/touch movement.
 const pointerMovementHandle = setInterval(() => {
   do {
@@ -203,8 +191,6 @@ const predictionHandle = setInterval(() => {
   state = synchronizer.state;
   // Render timing.
   renderTicker.tick(elapsed);
-  // Throughput ticker.
-  throughputTicker.tick(elapsed);
   // Apply environmental lighting.
   let intensity = 0;
   if (worldTime.hour >= 21 || worldTime.hour < 4) {
@@ -261,7 +247,7 @@ const renderHandle = setAnimation(render);
 // UI.
 const UiComponent = <Ui
   worldTime={worldTime}
-  throughputTicker={throughputTicker}
+  Parser={AugmentedParser}
 />;
 ReactDOM.render(UiComponent, stage.ui);
 // Eval.

client/ui/index.js

@@ -5,10 +5,10 @@ import {hot} from 'react-hot-loader/root';
 import Throughput from './throughput';
 import WorldTime from './world-time';
 
-const Ui = ({throughputTicker, worldTime}) => {
+const Ui = ({Parser, worldTime}) => {
   return <React.Fragment>
     <WorldTime worldTime={worldTime} />
-    <Throughput ticker={throughputTicker} />
+    <Throughput Parser={Parser} />
   </React.Fragment>;
 };
 

client/ui/throughput.js

@@ -2,6 +2,7 @@
 import React, {useEffect, useState} from 'react';
 // 2nd party.
 import {compose} from '@avocado/core';
+import {Vector} from '@avocado/math';
 import contempo from 'contempo';
 // 1st party.
 import {WorldTime} from '../../common/world-time';
@@ -20,11 +21,15 @@ const decorate = compose(
   padding: 0.5em;
   font-family: monospace;
 }
+.throughput .kbps:before {
+  color: rgb(180, 180, 180);
+  content: 'kb/s ';
+}
 .throughput .input:before {
-  content: 'kbps \\a0in: ';
+  content: '\\a0in: ';
 }
 .throughput .output:before {
-  content: 'kbps out: ';
+  content: 'out: ';
 }
 .throughput p {
   margin: 0.25em;
@@ -38,21 +43,36 @@ const formatKbps = (bytes) => {
   return Math.floor(kbps * 100) / 100;
 }
 
-const ThroughputComponent = ({ticker}) => {
+const ThroughputComponent = ({Parser}) => {
   const [throughput, setThroughput] = useState([0, 0]);
   useEffect(() => {
-    const updater = (throughput) => {
+    const {Decoder, Encoder} = Parser;
+    const throughputSampleTime = 0.5;
+    // Throughput ticker.
+    const throughputHandle = setInterval(() => {
+      const throughput = Vector.scale([
+        Decoder.throughput || 0,
+        Encoder.throughput || 0,
+      ], 1 / throughputSampleTime);
       setThroughput(throughput);
-    };
-    ticker.on('updateThroughput', updater);
+      Decoder.throughput = 0;
+      Encoder.throughput = 0;
+    }, throughputSampleTime * 1000);
     return () => {
-      ticker.off('updateThroughput', updater);
+      clearInterval(throughputHandle);
     };
   }, []);
   return <div className="throughput unselectable">
-    <p className="input">{formatKbps(throughput[0])}</p>
-    <p className="output">{formatKbps(throughput[1])}</p>
-
+    <p className="unit kbps">
+      <span className="input">
+        {formatKbps(throughput[0])}
+      </span>
+    </p>
+    <p className="unit kbps">
+      <span className="output">
+        {formatKbps(throughput[1])}
+      </span>
+    </p>
   </div>;
 }