From 3df0abc4b0a374c57845e96339bf5a46d8189364 Mon Sep 17 00:00:00 2001
From: Kai Stevenson <kai@kaistevenson.com>
Date: Sun, 29 Jun 2025 15:56:06 -0700
Subject: networking works

---
 src/ui/render.ts | 71 +++++++++++++++++++++++++++++++++++++++++++-------------
 src/ui/utils.ts  | 11 ++++++---
 2 files changed, 63 insertions(+), 19 deletions(-)

(limited to 'src/ui')

diff --git a/src/ui/render.ts b/src/ui/render.ts
index 95464dc..79451ae 100644
--- a/src/ui/render.ts
+++ b/src/ui/render.ts
@@ -3,15 +3,19 @@ import readline from "node:readline";
 import {
   clearTerminal,
   getCurrentTerminalSize,
-  TERM_SIZE as RENDER_SIZE,
+  RENDER_GAME_SIZE,
+  RENDER_STATE_SIZE,
 } from "./utils";
 
 let lastTermSize: ReturnType<typeof getCurrentTerminalSize> | undefined;
+let lastRender: { seqno: number; time: number } = {
+  seqno: 0,
+  time: Date.now(),
+};
 
 export const renderGameState = (gameState: GameState): string[] => {
   let rows: string[] = [];
   for (let row = -1; row < GAME_SIZE.rows + 1; row++) {
-    // let rowOut: string = " ".repeat(marginCols);
     let rowOut: string = " ";
 
     if (row === -1) {
@@ -86,28 +90,63 @@ export const renderState = (sessionState: SessionState) => {
   }
   lastTermSize = termSize;
 
-  if (termSize.cols < RENDER_SIZE.cols || termSize.rows < RENDER_SIZE.rows) {
+  if (
+    termSize.cols < RENDER_STATE_SIZE.cols ||
+    termSize.rows < RENDER_STATE_SIZE.rows
+  ) {
     process.stdout.write("Please increase the screen size");
     return;
   }
 
-  const marginCols = (termSize.cols - RENDER_SIZE.cols) / 2;
-  const marginRows = (termSize.rows - RENDER_SIZE.rows) / 2;
+  const marginCols = termSize.cols - RENDER_STATE_SIZE.cols;
+  const marginRows = (termSize.rows - RENDER_STATE_SIZE.rows) / 2;
 
   let allOut: string = "\n".repeat(marginRows);
 
   const localDisplay = renderGameState(sessionState.localPlayerGameState);
-  const remoteDisplay = renderGameState(sessionState.remotePlayerGameState);
-
-  localDisplay.forEach(
-    (row, i) =>
-      (allOut = allOut
-        .concat(" ".repeat(marginCols / 2))
-        .concat(row)
-        .concat(" ".repeat(marginCols / 2))
-        .concat(remoteDisplay[i])
-        .concat("\n"))
-  );
+  const remoteDisplay =
+    sessionState.remotePlayerGameState &&
+    renderGameState(sessionState.remotePlayerGameState);
+
+  const timeNow = Date.now();
+  const infoHeader = `Frame: ${sessionState.seqno}
+Session: ${sessionState.sessionId}
+Fps: ${(
+    ((sessionState.seqno - lastRender.seqno) / (timeNow - lastRender.time)) *
+    1000
+  ).toFixed(0)}\n`;
+
+  if (remoteDisplay) {
+    allOut = allOut
+      .concat(infoHeader)
+      .concat(" ".repeat(marginCols / 2))
+      .concat(`LOCAL:`)
+      .concat(" ".repeat(RENDER_GAME_SIZE.cols))
+      .concat(" ".repeat(4))
+      .concat(`REMOTE:`)
+      .concat("\n");
+    localDisplay.forEach(
+      (row, i) =>
+        (allOut = allOut
+          .concat(" ".repeat(marginCols / 2))
+          .concat(row)
+          .concat(" ".repeat(8))
+          .concat(remoteDisplay[i])
+          .concat(" ".repeat(marginCols / 2))
+          .concat("\n"))
+    );
+  } else {
+    allOut = allOut.concat(infoHeader).concat("\n");
+    localDisplay.forEach(
+      (row, i) =>
+        (allOut = allOut
+          .concat(" ".repeat(marginCols / 2 + 4))
+          .concat(row)
+          .concat(" ".repeat(marginCols / 2 + 4))
+          .concat("\n"))
+    );
+  }
 
   process.stdout.write(allOut);
+  lastRender = { seqno: sessionState.seqno, time: timeNow };
 };
diff --git a/src/ui/utils.ts b/src/ui/utils.ts
index 32de02e..9f5e8bc 100644
--- a/src/ui/utils.ts
+++ b/src/ui/utils.ts
@@ -1,9 +1,14 @@
 import process from "node:process";
 import { GAME_SIZE } from "../state";
 
-export const TERM_SIZE = {
-  rows: GAME_SIZE.rows + 2,
-  cols: (GAME_SIZE.cols * 2 + 2) * 2,
+export const RENDER_GAME_SIZE = {
+  rows: GAME_SIZE.rows,
+  cols: GAME_SIZE.cols * 2 + 4,
+};
+
+export const RENDER_STATE_SIZE = {
+  rows: RENDER_GAME_SIZE.rows + 7,
+  cols: RENDER_GAME_SIZE.cols * 2 + 10,
 };
 
 export const getCurrentTerminalSize = (): { rows: number; cols: number } => {
-- 
cgit v1.2.3-70-g09d2