fix(style): HUD not always visible

TODO

@@ -9,13 +9,9 @@ fix(board): moves not canceled
 fix(game): No Solution does not show incorrect screen
 fix(game): despite solution, knight game has no solution as answer
 fix(game): number sometimes ignored on enter
-fix(game): weird equal sign in show answers
-fix(style): HUD not always visible
 fix(style): buttons have different styles
 fix(style): site nav does not wrap
-fix(style): solution bar has no x padding
 fix(style): too much space at top on mobile
-fix(ux): number entry jumps around
 fix(ux): position of solutions non-obvious
 refactor: autogenerate site nav
 refactor: externalize game logic

src/app/games/[gameId]/playing/page.tsx → src/app/games/[gameId]/play/page.tsx

@@ -73,17 +73,19 @@ export default async function Page({ params: { gameId } }: HasParams) {
 
   const levelResp = await getLevel(gameId, 1);
   if (!levelResp.success) {
-    console.log(levelResp.error);
+    console.error(levelResp.error);
     return notFound();
   }
 
   return (
-    <Game
-      id={gameId}
-      flavor={flavor}
-      logic={logic}
-      getLevel={getLevel}
-      defaultLevel={levelResp.data}
-    />
+    <main className="flex-1 flex justify-center items-center">
+      <Game
+        id={gameId}
+        flavor={flavor}
+        logic={logic}
+        getLevel={getLevel}
+        defaultLevel={levelResp.data}
+      />
+    </main>
   );
 }

src/app/games/[gameId]/start/layout.tsx

@@ -0,0 +1,37 @@
+// React
+import React from "react";
+
+// NextJS
+import Link from "next/link";
+
+// Components
+import { SiteNav } from "@/components/SiteNav";
+
+// Styles
+import "@/app/globals.css";
+import { Footer } from "@/components/Footer";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <div className="flex-1 flex justify-center items-center flex-wrap-reverse">
+        <header className="flex-1 flex justify-center">
+          <div className="flex flex-col items-center gap-2">
+            <Link
+              href="/"
+              className="mb-2 whitespace-nowrap font-header text-3xl font-bold text-amber-300"
+            >
+              Chess Coven
+            </Link>
+            <SiteNav />
+          </div>
+        </header>
+        <div className="w-full xl:w-auto">
+          <div className="mx-auto max-w-2xl p-4">{children}</div>
+        </div>
+        <div className="flex-1" />
+      </div>
+      <Footer />
+    </>
+  );
+}

src/components/GameStartScreen.tsx → src/app/games/[gameId]/start/page.tsx

@@ -1,22 +1,28 @@
-"use server";
+// NextJS
+import { notFound } from "next/navigation";
 
+// Components
+import { GameStartScreen } from "@/components/GameStartScreen";
+
+// Game
+import { getFlavor } from "@/games";
 import Link from "next/link";
 
-type GameStartScreenProps = {
-  rules: string;
-  story: string;
-  title: string;
-  to: string;
+type HasParams = {
+  params: {
+    gameId: string;
+  };
 };
 
-export const GameStartScreen = ({
-  rules,
-  story,
-  to,
-  title,
-}: GameStartScreenProps) => {
+export default function Page({ params: { gameId } }: HasParams) {
+  const flavor = getFlavor(gameId);
+  if (flavor == null) {
+    return notFound();
+  }
+  const { rules, story, title } = flavor;
+
   return (
-    <div className="flex min-h-chessboard max-w-chessboard gap-4 grow flex-col justify-center p-6 bg-backdrop">
+    <main className="flex gap-4 min-h-[90dvh] flex-col justify-center p-6 bg-backdrop">
       <h1 className="text-center text-4xl">{title}</h1>
       <div>
         <div className="mb-1 text-center text-xl font-bold">Story</div>
@@ -27,11 +33,11 @@ export const GameStartScreen = ({
         <p className="text-justify indent-6 text-lg">{rules}</p>
       </div>
       <Link
-        href={to}
+        href={`/games/${gameId}/play`}
         className="rounded mt-2 bg-amber-600 self-center px-6 py-2 text-white hover:bg-amber-700"
       >
         Play
       </Link>
-    </div>
+    </main>
   );
-};
+}

src/app/layout.tsx

@@ -10,9 +10,6 @@ import { Analytics } from "@vercel/analytics/react";
 // CSS
 import "@/app/globals.css";
 
-// Components
-import { Footer } from "@/components/Footer";
-
 export const metadata = {
   title: "Chess Coven",
   description: "Chess learning tools and games",
@@ -43,12 +40,9 @@ export default function RootLayout({
             `,
         }}
       />
-      <body className="bg-forest bg-forest-bottom bg-top bg-no-repeat font-body text-white">
+      <body className="bg-forest bg-forest-bottom bg-top bg-no-repeat font-body text-white min-h-screen flex flex-col">
         <Analytics />
-        <div className="flex min-h-screen flex-col">
-          {children}
-          <Footer />
-        </div>
+        {children}
       </body>
     </html>
   );

src/components/ActionBar.tsx

@@ -7,6 +7,7 @@ import { SanInputForm } from "./SanInputForm";
 
 // Types
 import type { PlayerStatus, SolutionType } from "@/types";
+import Link from "next/link";
 
 const DEBUG = true;
 
@@ -18,6 +19,7 @@ export type ActionBarProps = {
   showReplay: boolean;
   showAdvance: boolean;
   showGiveUp: boolean;
+  toExit: string;
   onAdvance: () => void;
   onGiveUp: () => void;
   onSanEntry: (san: string) => void;
@@ -33,14 +35,15 @@ export const ActionBar = ({
   showAdvance,
   showReplay,
   showGiveUp,
+  toExit,
   onSanEntry,
   onGiveUp,
   onAdvance,
   onNumberEntry,
   onReplay,
 }: ActionBarProps) => {
   return (
-    <div className="flex flex-wrap items-center justify-between gap-4 px-2">
+    <div className="flex flex-wrap items-center justify-between gap-4 py-1 px-2">
       <div className="flex items-center gap-1">
         <div className="flex gap-2">
           {showAdvance && (
@@ -79,7 +82,12 @@ export const ActionBar = ({
           )}
         </div>
       </div>
-      {DEBUG && playerStatus}
+      <Link
+        href={toExit}
+        className="rounded bg-red-600 px-2 py-1 font-bold text-white hover:bg-red-700"
+      >
+        Exit
+      </Link>
       {solutionType == "number" && (
         <NumberEntryForm
           label="Total value"

src/components/Chessboard.tsx

@@ -53,6 +53,7 @@ export function Chessboard({
   movable = false,
 }: ChessboardProps) {
   const boardRef = useRef<HTMLDivElement>(null);
+  const boardWrapperRef = useRef<HTMLDivElement>(null);
   const [board, setBoard] = useState<BoardApi | null>(null);
 
   useEffect(() => {
@@ -130,34 +131,40 @@ export function Chessboard({
     onSelect,
   ]);
 
-  let gameSourceEl = null;
-  if (gameUrl) {
-    gameSourceEl = (
-      <Link
-        href={gameUrl}
-        className="bg-backdrop px-2 text-white"
-        target="_blank"
-      >
-        View Game
-      </Link>
-    );
-  }
+  useEffect(() => {
+    const wrapper = boardWrapperRef.current;
+    if (!wrapper || !board) {
+      return;
+    }
+
+    const wrapperParent = wrapper.parentElement;
+    if (!wrapperParent) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      const rect = wrapperParent.getBoundingClientRect();
+      const minLength = Math.min(rect.height, rect.width);
+      console.log(rect.toJSON());
+      const sizeAttr = `${minLength}px`;
+      wrapper.style.width = sizeAttr;
+      wrapper.style.height = sizeAttr;
+      wrapperParent.style.maxHeight = sizeAttr;
+    });
 
-  const topColor = flipped ? "bg-red-100" : "bg-red-400";
-  const bottomColor = flipped ? "bg-red-400" : "bg-red-100";
+    resizeObserver.observe(wrapperParent);
+    return () => resizeObserver.disconnect(); // clean up
+  }, [boardWrapperRef, board]);
 
   return (
-    <div className="w-chessboard">
-      <div className={`border-2 border-black ${topColor} min-h-8 text-black`}>
-        {children}
-      </div>
-      <div className={`flex ${flipped ? "flex-col-reverse" : "flex-col"}`}>
-        <div ref={boardRef} className="h-chessboard w-chessboard" />
-      </div>
-      <div
-        className={`flex items-center justify-center border-2 border-black ${bottomColor} min-h-8 pr-6 text-black`}
-      >
-        {gameSourceEl}
+    <div
+      className={`flex-1 justify-center items-center flex ${flipped ? "flex-col-reverse" : "flex-col"}`}
+    >
+      <div ref={boardWrapperRef}>
+        <div
+          ref={boardRef}
+          className="flex justify-center items-center h-full w-full"
+        />
       </div>
     </div>
   );