Bits

src/components/Stats.tsx

@@ -11,7 +11,7 @@ import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { getTargetElements } from "../scene";
 import { AppState } from "../types";
-import { debounce, formatSpeedBytes, getVersion, nFormatter } from "../utils";
+import { debounce, formatSpeedBits, getVersion, nFormatter } from "../utils";
 import { close } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
@@ -186,7 +186,7 @@ export const Stats = (props: {
                     {props.appState.networkSpeed === 0
                       ? "…"
                       : props.appState.networkSpeed > 0
-                      ? formatSpeedBytes(props.appState.networkSpeed)
+                      ? formatSpeedBits(props.appState.networkSpeed)
                       : t("stats.error")}
                   </td>
                 </tr>

src/networkStats.ts

@@ -1,7 +1,7 @@
 const IMAGE_URL = `${process.env.REACT_APP_SOCKET_SERVER_URL}/test256.png`;
-const IMAGE_SIZE_BYTES = 141978;
+const IMAGE_SIZE_BITS = 141978 * 8;
 
-const getSpeed = (
+const getSpeedBits = (
   imageSize: number,
   startTime: number,
   endTime: number,
@@ -19,7 +19,7 @@ const processImage = (): Promise<number> => {
     let endTime: number;
     image.onload = () => {
       endTime = new Date().getTime();
-      const speed = getSpeed(IMAGE_SIZE_BYTES, startTime, endTime);
+      const speed = getSpeedBits(IMAGE_SIZE_BITS, startTime, endTime);
       resolve(speed);
     };
 

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -40,7 +40,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -501,7 +501,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -968,7 +968,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -1744,7 +1744,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -1948,7 +1948,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -2406,7 +2406,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -2659,7 +2659,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -2823,7 +2823,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -3300,7 +3300,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -3608,7 +3608,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -3812,7 +3812,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -4056,7 +4056,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -4308,7 +4308,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -4691,7 +4691,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -4986,7 +4986,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -5293,7 +5293,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -5501,7 +5501,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -5665,7 +5665,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -6118,7 +6118,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -6436,7 +6436,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -8470,7 +8470,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -8832,7 +8832,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -9087,7 +9087,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -9340,7 +9340,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -9655,7 +9655,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -9819,7 +9819,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -9983,7 +9983,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -10147,7 +10147,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -10341,7 +10341,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -10535,7 +10535,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -10729,7 +10729,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -10923,7 +10923,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -11087,7 +11087,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -11251,7 +11251,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -11445,7 +11445,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -11609,7 +11609,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -11803,7 +11803,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -12519,7 +12519,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -12772,7 +12772,7 @@ Object {
   "lastPointerDownWith": "touch",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -12874,7 +12874,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -12974,7 +12974,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -13138,7 +13138,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -13446,7 +13446,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -13754,7 +13754,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -13918,7 +13918,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -14114,7 +14114,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -14363,7 +14363,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -14687,7 +14687,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -15526,7 +15526,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -15834,7 +15834,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -16142,7 +16142,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -16521,7 +16521,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -16688,7 +16688,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -17009,7 +17009,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -17248,7 +17248,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -17503,7 +17503,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -17830,7 +17830,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -17930,7 +17930,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -18094,7 +18094,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -18915,7 +18915,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -19015,7 +19015,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -19769,7 +19769,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -20174,7 +20174,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -20447,7 +20447,7 @@ Object {
   "lastPointerDownWith": "touch",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -20549,7 +20549,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -21047,7 +21047,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,
@@ -21147,7 +21147,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
-  "networkSpeed": "…",
+  "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
   "openMenu": null,

src/utils.ts

@@ -363,9 +363,9 @@ export const nFormatter = (num: number, digits: number): string => {
   );
 };
 
-export const formatSpeedBytes = (speed: number): string => {
-  // source: en.wikipedia.org/wiki/Data-rate_units#Conversion_table
-  const suffix = ["B/s", "kB/s", "MB/s", "GB/s"];
+export const formatSpeedBits = (speed: number): string => {
+  // source: https://en.wikipedia.org/wiki/Data-rate_units#Conversion_table
+  const suffix = ["bit/s", "kbit/s", "Mbit/s", "Gbit/s"];
   let index = 0;
   while (speed > 1000) {
     index++;