improving game

client/src/clusterStatus/ClusterStatus.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { useWebSocketContext } from "../contexts/useWebSocketContext";
+
+export const ClusterStatus = () => {
+  const { socket, isConnected } = useWebSocketContext();
+  const [channelStatus, setChannelStatus] = useState<string>("waiting");
+
+  useEffect(() => {
+    if (!socket || !isConnected) {
+      return;
+    }
+
+    const channelName = "clusterstatus";
+    console.log(`Joining channel: ${channelName}`);
+    const newChannel = socket.channel(channelName, {});
+
+    newChannel
+      .join()
+      .receive("ok", () => {
+        setChannelStatus("connected");
+      })
+      .receive("error", (resp: unknown) => {
+        console.log(`Failed to join channel ${channelName}:`, resp);
+        setChannelStatus("join failed");
+      })
+      .receive("timeout", () => {
+        setChannelStatus("timeout");
+      });
+
+    return () => {
+      console.log(`Leaving channel: ${channelName}`);
+      newChannel.leave();
+      setChannelStatus("waiting");
+    };
+  }, [socket, isConnected]);
+
+  return (
+    <div>
+      <div>ClusterStatus</div>
+      <div>Channel: {channelStatus}</div>
+    </div>
+  );
+}