add online user count

packages/client/src/components/CanvasMeta.tsx

@@ -10,6 +10,7 @@ import { useAppContext } from "../contexts/AppContext";
 import { Canvas } from "../lib/canvas";
 import { useEffect, useState } from "react";
 import { ClientConfig } from "@sc07-canvas/lib/src/net";
+import network from "../lib/network";
 
 const getTimeLeft = (pixels: { available: number }, config: ClientConfig) => {
   // this implementation matches the server's implementation
@@ -40,10 +41,33 @@ const PlaceCountdown = () => {
   }, [pixels]);
 
   return (
-    <>{pixels.available + 1 < config.canvas.pixel.maxStack && timeLeft + "s"}</>
+    <>
+      {timeLeft
+        ? pixels.available + 1 < config.canvas.pixel.maxStack && timeLeft + "s"
+        : ""}
+    </>
   );
 };
 
+const OnlineCount = () => {
+  const [online, setOnline] = useState<number>();
+
+  useEffect(() => {
+    function handleOnline(count: number) {
+      setOnline(count);
+    }
+
+    network.waitFor("online").then(([count]) => setOnline(count));
+    network.on("online", handleOnline);
+
+    return () => {
+      network.off("online", handleOnline);
+    };
+  }, []);
+
+  return <>{typeof online === "number" ? online : "???"}</>;
+};
+
 export const CanvasMeta = () => {
   const { canvasPosition, cursorPosition, pixels, config } = useAppContext();
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
@@ -74,7 +98,10 @@ export const CanvasMeta = () => {
           <PlaceCountdown />
         </span>
         <span>
-          Users Online: <span>321</span>
+          Users Online:{" "}
+          <span>
+            <OnlineCount />
+          </span>
         </span>
       </div>
       <ShareModal isOpen={isOpen} onOpenChange={onOpenChange} />

packages/client/src/lib/network.ts

@@ -13,6 +13,7 @@ export interface INetworkEvents {
   canvas: (pixels: string[]) => void;
   pixels: (data: { available: number }) => void;
   pixelLastPlaced: (time: number) => void;
+  online: (count: number) => void;
 }
 
 type SentEventValue<K extends keyof INetworkEvents> = EventEmitter.ArgumentMap<
@@ -55,6 +56,10 @@ class Network extends EventEmitter<INetworkEvents> {
       this._emit("pixelLastPlaced", time);
     });
 
+    this.socket.on("online", ({ count }) => {
+      this._emit("online", count);
+    });
+
     // this.socket.on("config", (config) => {
     //   Pallete.load(config.pallete);
     //   Canvas.load(config.canvas);
@@ -67,10 +72,6 @@ class Network extends EventEmitter<INetworkEvents> {
     // this.socket.on("canvas", (data: SCanvasPacket) => {
     //   Canvas.handleBatch(data);
     // });
-
-    // this.socket.on("online", (data: { count: number }) => {
-    //   this.online_count = data.count;
-    // });
   }
 
   private _emit: typeof this.emit = (event, ...args) => {