diff --git a/client/index.js b/client/index.js
index 7cc7d93..9bfc2d0 100644
--- a/client/index.js
+++ b/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 = ;
ReactDOM.render(UiComponent, stage.ui);
// Eval.
diff --git a/client/ui/index.js b/client/ui/index.js
index a12ed43..0209a00 100644
--- a/client/ui/index.js
+++ b/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
-
+
;
};
diff --git a/client/ui/throughput.js b/client/ui/throughput.js
index 63351ec..02f26f4 100644
--- a/client/ui/throughput.js
+++ b/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
-
{formatKbps(throughput[0])}
-
{formatKbps(throughput[1])}
-
+
+
+ {formatKbps(throughput[0])}
+
+
+
+
+ {formatKbps(throughput[1])}
+
+
;
}