From 9ca2d7b5adbebf1132e8a82b8b7774b1205aff54 Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Sun, 5 Mar 2023 00:36:49 +0800
Subject: [PATCH] wrap game page in server component for initial data fetch

---
 client/src/app/game/[code]/not-found.tsx |   8 ++
 client/src/app/game/[code]/page.tsx      | 105 ++--------------------
 client/src/components/game/Game.tsx      | 109 +++++++++++++++++++++++
 3 files changed, 126 insertions(+), 96 deletions(-)
 create mode 100644 client/src/app/game/[code]/not-found.tsx
 create mode 100644 client/src/components/game/Game.tsx

diff --git a/client/src/app/game/[code]/not-found.tsx b/client/src/app/game/[code]/not-found.tsx
new file mode 100644
index 0000000..d49494f
--- /dev/null
+++ b/client/src/app/game/[code]/not-found.tsx
@@ -0,0 +1,8 @@
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="text-2xl font-bold">Error</div>
+      <div className="text-xl">Game not found</div>
+    </div>
+  );
+}
diff --git a/client/src/app/game/[code]/page.tsx b/client/src/app/game/[code]/page.tsx
index 134ae52..8345876 100644
--- a/client/src/app/game/[code]/page.tsx
+++ b/client/src/app/game/[code]/page.tsx
@@ -1,99 +1,12 @@
-"use client";
-// all of this in a client component for now to easily handle socket events
+import Game from "@/components/game/Game";
+import { getGame } from "@/lib/game";
+import { notFound } from "next/navigation";
 
-import { Chessboard } from "react-chessboard";
-import { IconCopy } from "@tabler/icons-react";
-import Image from "next/image";
+export default async function GamePage({ params }: { params: { code: string } }) {
+  const game = await getGame(params.code);
+  if (!game) {
+    notFound();
+  }
 
-const pgn = "1. e4 e5 2. f3 Nf6 3. d4 exd4 4. Qxd4 Nxe4 5. Qxe4+ Qe7 6. Qxe7+";
-
-export default function Game() {
-  return (
-    <div className="flex w-full flex-wrap justify-center gap-6 px-4 py-4 lg:gap-10 2xl:gap-16">
-      <div className="relative h-min">
-        {/* overlay */}
-        <div className="absolute top-0 right-0 bottom-0 z-10 flex h-full w-full items-center justify-center bg-black bg-opacity-70">
-          <div className="bg-base-200 flex w-full items-center justify-center gap-4 py-4 px-2">
-            Waiting for opponent.
-            <button className="btn btn-secondary">Play as black</button>
-          </div>
-        </div>
-
-        <Chessboard
-          boardWidth={480}
-          /* 350 for mobile, 480 for md up (^768px screen), 540 for 2xl up (^1536px), 580 for ^1920px  */
-          customDarkSquareStyle={{ backgroundColor: "#4b7399" }}
-          customLightSquareStyle={{ backgroundColor: "#eae9d2" }}
-        />
-      </div>
-
-      <div className="flex max-w-lg flex-1 flex-col items-center justify-center gap-4">
-        <div className="mb-auto flex w-full">
-          <div className="flex flex-1 flex-col items-center justify-between">
-            <div className="flex w-full items-center gap-1">
-              <div className="avatar">
-                <div className="w-8 rounded-md">
-                  <Image src="/assets/default_avatar.png" alt="avatar" width={32} height={32} />
-                </div>
-              </div>
-              nize
-            </div>
-            <div className="my-auto w-full text-sm">vs</div>
-            <div className="flex w-full items-center gap-1">
-              <div className="avatar">
-                <div className="w-8 rounded-md">
-                  <Image src="/assets/default_avatar.png" alt="avatar" width={32} height={32} />
-                </div>
-              </div>
-              notnize
-            </div>
-          </div>
-
-          <div className="flex flex-1 flex-col gap-1">
-            <div className="mb-2 flex w-full flex-col items-end gap-1">
-              Invite friends:
-              <div className="badge badge-md bg-base-300 text-base-content h-8 gap-1 font-mono text-xs sm:h-5 sm:text-sm">
-                <IconCopy size={16} />
-                ches.su/game/123abc
-              </div>
-            </div>
-            <div className="h-36 w-full overflow-y-scroll">
-              <table className="table-compact table w-full ">
-                <tbody>
-                  {pgn
-                    .split(/\d+\./)
-                    .filter((move) => move.trim() !== "")
-                    .map((moveSet, i) => {
-                      const moves = moveSet.trim().split(" ");
-                      return (
-                        <tr className="flex w-full items-center gap-1" key={i + 1}>
-                          <td className="">{i + 1}.</td>
-                          <td className="w-1/2 text-center">{moves[0]}</td>
-                          <td className="w-1/2 text-center">{moves[1]}</td>
-                        </tr>
-                      );
-                    })}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        <div className="h-60 w-full min-w-fit">
-          <div className="bg-base-300 flex h-full w-full min-w-[64px] flex-col rounded-lg p-4 shadow-sm">
-            chatbox
-            <div className="input-group mt-auto">
-              <input
-                type="text"
-                placeholder="Chat here..."
-                className="input input-bordered flex-grow"
-              />
-              <button className="btn btn-secondary ml-1">send</button>
-            </div>
-          </div>
-        </div>
-        <div className="w-full px-2 text-xs md:px-0">Spectators: nize, nize, nize</div>
-      </div>
-    </div>
-  );
+  return <Game initialLobby={game} />;
 }
diff --git a/client/src/components/game/Game.tsx b/client/src/components/game/Game.tsx
new file mode 100644
index 0000000..46602af
--- /dev/null
+++ b/client/src/components/game/Game.tsx
@@ -0,0 +1,109 @@
+"use client";
+// all of this in a client component for now to easily handle socket events
+
+import { Chessboard } from "react-chessboard";
+import { IconCopy } from "@tabler/icons-react";
+import { useState, useEffect } from "react";
+import Image from "next/image";
+import { Game } from "@chessu/types";
+
+import { io } from "socket.io-client";
+import { API_URL } from "@/config";
+
+const socket = io(API_URL, { withCredentials: true, autoConnect: true });
+
+const pgn = "1. e4 e5 2. f3 Nf6 3. d4 exd4 4. Qxd4 Nxe4 5. Qxe4+ Qe7 6. Qxe7+";
+
+export default function GameWrapper({ initialLobby }: { initialLobby: Game }) {
+  const [lobbyData, setLobbyData] = useState(initialLobby);
+  // TODO
+
+  return (
+    <div className="flex w-full flex-wrap justify-center gap-6 px-4 py-4 lg:gap-10 2xl:gap-16">
+      <div className="relative h-min">
+        {/* overlay */}
+        <div className="absolute top-0 right-0 bottom-0 z-10 flex h-full w-full items-center justify-center bg-black bg-opacity-70">
+          <div className="bg-base-200 flex w-full items-center justify-center gap-4 py-4 px-2">
+            Waiting for opponent.
+            <button className="btn btn-secondary">Play as black</button>
+          </div>
+        </div>
+
+        <Chessboard
+          boardWidth={480}
+          /* 350 for mobile, 480 for md up (^768px screen), 540 for 2xl up (^1536px), 580 for ^1920px  */
+          customDarkSquareStyle={{ backgroundColor: "#4b7399" }}
+          customLightSquareStyle={{ backgroundColor: "#eae9d2" }}
+        />
+      </div>
+
+      <div className="flex max-w-lg flex-1 flex-col items-center justify-center gap-4">
+        <div className="mb-auto flex w-full">
+          <div className="flex flex-1 flex-col items-center justify-between">
+            <div className="flex w-full items-center gap-1">
+              <div className="avatar">
+                <div className="w-8 rounded-md">
+                  <Image src="/assets/default_avatar.png" alt="avatar" width={32} height={32} />
+                </div>
+              </div>
+              nize
+            </div>
+            <div className="my-auto w-full text-sm">vs</div>
+            <div className="flex w-full items-center gap-1">
+              <div className="avatar">
+                <div className="w-8 rounded-md">
+                  <Image src="/assets/default_avatar.png" alt="avatar" width={32} height={32} />
+                </div>
+              </div>
+              notnize
+            </div>
+          </div>
+
+          <div className="flex flex-1 flex-col gap-1">
+            <div className="mb-2 flex w-full flex-col items-end gap-1">
+              Invite friends:
+              <div className="badge badge-md bg-base-300 text-base-content h-8 gap-1 font-mono text-xs sm:h-5 sm:text-sm">
+                <IconCopy size={16} />
+                ches.su/game/{initialLobby.code}
+              </div>
+            </div>
+            <div className="h-36 w-full overflow-y-scroll">
+              <table className="table-compact table w-full ">
+                <tbody>
+                  {pgn
+                    .split(/\d+\./)
+                    .filter((move) => move.trim() !== "")
+                    .map((moveSet, i) => {
+                      const moves = moveSet.trim().split(" ");
+                      return (
+                        <tr className="flex w-full items-center gap-1" key={i + 1}>
+                          <td className="">{i + 1}.</td>
+                          <td className="w-1/2 text-center">{moves[0]}</td>
+                          <td className="w-1/2 text-center">{moves[1]}</td>
+                        </tr>
+                      );
+                    })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <div className="h-60 w-full min-w-fit">
+          <div className="bg-base-300 flex h-full w-full min-w-[64px] flex-col rounded-lg p-4 shadow-sm">
+            chatbox
+            <div className="input-group mt-auto">
+              <input
+                type="text"
+                placeholder="Chat here..."
+                className="input input-bordered flex-grow"
+              />
+              <button className="btn btn-secondary ml-1">send</button>
+            </div>
+          </div>
+        </div>
+        <div className="w-full px-2 text-xs md:px-0">Spectators: nize, nize, nize</div>
+      </div>
+    </div>
+  );
+}