From 181738ae3f11eb6325a57387e10f3321574b1f10 Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Thu, 2 Mar 2023 17:53:35 +0800
Subject: [PATCH] general layout improvements

---
 client/src/app/game/[code]/page.tsx | 61 +++++++++++++++++++----------
 client/src/app/page.tsx             | 55 +++++++++++++++-----------
 2 files changed, 72 insertions(+), 44 deletions(-)

diff --git a/client/src/app/game/[code]/page.tsx b/client/src/app/game/[code]/page.tsx
index fdf3a4c..134ae52 100644
--- a/client/src/app/game/[code]/page.tsx
+++ b/client/src/app/game/[code]/page.tsx
@@ -5,12 +5,20 @@ import { Chessboard } from "react-chessboard";
 import { IconCopy } from "@tabler/icons-react";
 import Image from "next/image";
 
-const pgn = "1. e4 e5 2. f3 Nf6 3. d4 exd4 4. Qxd4 Nxe4 5. Qxe4+ Qe7 6. Qxe7+ Bxe7";
+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="flex flex-col items-center justify-center gap-1">
+      <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  */
@@ -30,6 +38,7 @@ export default function Game() {
               </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">
@@ -41,28 +50,31 @@ export default function Game() {
           </div>
 
           <div className="flex flex-1 flex-col gap-1">
-            <div className="flex w-full flex-col items-end gap-1">
+            <div className="mb-2 flex w-full flex-col items-end gap-1">
               Invite friends:
-              <div className="badge badge-md gap-1 font-mono">
+              <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="w-full">
-              move list table
-              {pgn
-                .split(/\d+\./)
-                .filter((move) => move.trim() !== "")
-                .map((moveSet, i) => {
-                  const moves = moveSet.trim().split(" ");
-                  return (
-                    <div className="flex w-full items-center gap-1" key={i + 1}>
-                      <div className="badge badge-md">{i + 1}</div>
-                      <div className="badge badge-md">{moves[0]}</div>
-                      <div className="badge badge-md">{moves[1]}</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>
@@ -70,10 +82,17 @@ export default function Game() {
         <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
-            <input type="text" placeholder="Chat here..." className="input mt-auto" />
+            <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">observer list</div>
+        <div className="w-full px-2 text-xs md:px-0">Spectators: nize, nize, nize</div>
       </div>
     </div>
   );
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index e329214..56ef57c 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -2,35 +2,44 @@ import PublicGames from "@/components/PublicGames";
 
 export default function Home() {
   return (
-    <div className="flex w-full flex-wrap items-center justify-evenly gap-4 px-4 py-10 lg:gap-0">
+    <div className="bg-base-200 flex w-full flex-wrap items-center justify-evenly gap-4 rounded-xl px-4 py-10 shadow-md lg:gap-0">
       <PublicGames />
 
-      <div className="flex flex-col items-center">
-        <h2 className="mb-4 text-xl font-bold leading-tight">Join from invite</h2>
-        <div className="form-control">
-          <div className="input-group">
-            <input type="text" placeholder="Invite link or code" className="input input-bordered" />
-            <button className="btn btn-square">Join</button>
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex flex-col items-center">
+          <h2 className="mb-4 text-xl font-bold leading-tight">Join from invite</h2>
+          <div className="form-control">
+            <div className="input-group">
+              <input
+                type="text"
+                placeholder="Invite link or code"
+                className="input input-bordered"
+              />
+              <button className="btn btn-square">Join</button>
+            </div>
           </div>
         </div>
+
         <div className="divider divider-vertical">or</div>
 
-        <h2 className="mb-4 text-xl font-bold leading-tight">Create game</h2>
-        <div className="form-control">
-          <label className="label cursor-pointer">
-            <span className="label-text">Unlisted/invite-only</span>
-            <input type="checkbox" className="checkbox" />
-          </label>
-          <label className="label">
-            <span className="label-text">Select your side</span>
-          </label>
-          <div className="input-group">
-            <select className="select select-bordered">
-              <option value="random">Random</option>
-              <option value="white">White</option>
-              <option value="black">Black</option>
-            </select>
-            <button className="btn">Create</button>
+        <div className="flex flex-col items-center">
+          <h2 className="mb-4 text-xl font-bold leading-tight">Create game</h2>
+          <div className="form-control">
+            <label className="label cursor-pointer">
+              <span className="label-text">Unlisted/invite-only</span>
+              <input type="checkbox" className="checkbox" />
+            </label>
+            <label className="label">
+              <span className="label-text">Select your side</span>
+            </label>
+            <div className="input-group">
+              <select className="select select-bordered">
+                <option value="random">Random</option>
+                <option value="white">White</option>
+                <option value="black">Black</option>
+              </select>
+              <button className="btn">Create</button>
+            </div>
           </div>
         </div>
       </div>