diff --git a/client/app/client-layout.tsx b/client/app/client-layout.tsx
new file mode 100644
index 0000000..fd58492
--- /dev/null
+++ b/client/app/client-layout.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { ReactNode } from "react";
+
+const Providers = dynamic(
+ () => import("@/providers/providers").then((mod) => mod.Providers),
+ { ssr: false },
+);
+
+export default function ClientLayout({ children }: { children: ReactNode }) {
+ return {children};
+}
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
index 8d7bf4d..528ac00 100644
--- a/client/app/layout.tsx
+++ b/client/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Providers } from "@/providers/providers";
+import ClientLayout from "./client-layout";
import "@rainbow-me/rainbowkit/styles.css";
import type { Metadata } from "next";
import "./globals.css";
@@ -16,7 +16,7 @@ export default function RootLayout({
return (
- {children}
+ {children}
);
diff --git a/client/app/leaderboard/page.tsx b/client/app/leaderboard/page.tsx
index b5b616a..55f570e 100644
--- a/client/app/leaderboard/page.tsx
+++ b/client/app/leaderboard/page.tsx
@@ -45,11 +45,18 @@ export default function Leaderboard() {
],
});
- const highScore = data?.[0]?.result;
- const champion = data?.[1]?.result;
+ const highScore = data?.[0]?.result as bigint | undefined;
+ const champion = data?.[1]?.result as string | undefined;
- const formatAddress = (address: string) => {
- return `${address.slice(0, 6)}...${address.slice(-4)}`;
+ const formatAddress = (address: string) =>
+ `${address.slice(0, 6)}...${address.slice(-4)}`;
+
+ const formatScore = (score: bigint): string => {
+ if (score <= BigInt(1_000_000_000)) {
+ return Number(score).toLocaleString();
+ }
+ const str = score.toString();
+ return `${str[0]}.${str.slice(1, 4)}e+${str.length - 1}`;
};
return (
@@ -96,7 +103,7 @@ export default function Leaderboard() {
{champion
- ? formatAddress(champion as string)
+ ? formatAddress(champion)
: "No Champion"}
{champion && (
@@ -124,9 +131,10 @@ export default function Leaderboard() {
Error
) : (
-
- High Score:{" "}
- {highScore ? Number(highScore).toLocaleString() : "0"}
+
+ {highScore !== undefined
+ ? formatScore(highScore)
+ : "0"}
)}
+
+
@@ -261,6 +267,10 @@ export default function Home() {
)}
+
+
+
+
{/* Connection Status */}
{!isWsConnected && (
diff --git a/client/components/network-console.tsx b/client/components/network-console.tsx
new file mode 100644
index 0000000..206b7b7
--- /dev/null
+++ b/client/components/network-console.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { NetworkLogEntry } from "@/hooks/use-tetris";
+
+interface NetworkConsoleProps {
+ logs: NetworkLogEntry[];
+}
+
+export default function NetworkConsole({ logs }: NetworkConsoleProps) {
+ const scrollRef = useRef
(null);
+ const [expanded, setExpanded] = useState(null);
+
+ useEffect(() => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+ }
+ }, [logs.length]);
+
+ const formatTime = (iso: string) => {
+ const d = new Date(iso);
+ return d.toLocaleTimeString("en-US", { hour12: false, fractionalSecondDigits: 3 });
+ };
+
+ const truncatePayload = (data: unknown): string => {
+ const str = JSON.stringify(data);
+ return str.length > 120 ? str.slice(0, 120) + "..." : str;
+ };
+
+ return (
+
+
+
+
+
+ Yellow Network Console
+
+
+
+ {logs.length} message{logs.length !== 1 ? "s" : ""}
+
+
+
+
+ {logs.length === 0 ? (
+
+ Waiting for network messages...
+
+ ) : (
+ logs.map((log, i) => {
+ const isSent = log.direction === "sent";
+ const isExpanded = expanded === i;
+
+ return (
+
+
+ {isExpanded && (
+
+ {JSON.stringify(log.data, null, 2)}
+
+ )}
+
+ );
+ })
+ )}
+
+