1 files changed, 55 insertions, 16 deletions

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 };
 };