From 09e5271dfbfc22e8a4899e25a75e6b604be29f07 Mon Sep 17 00:00:00 2001
From: Michess <michess@mischlabs.de>
Date: Tue, 14 Apr 2026 07:49:59 +0200
Subject: [PATCH] feat: redesign homepage layout and fix invite links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Homepage: Grid-Layout mit 3 Karten (Spiel erstellen, KI, Freunde/Beitreten)
  statt vertikalem Stack mit Dividers
- CreateGame: kompakteres Styling, auf Deutsch, in Primary-Card integriert
- Einladungslink: APP_URL statt hardcoded ches.su in GamePage und CopyLink
- JoinGame: URL-Parsing für beliebige Domains (nicht nur ches.su)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/app/page.tsx                   | 91 ++++++++++++++---------
 client/src/components/game/GamePage.tsx   | 12 +--
 client/src/components/home/CreateGame.tsx | 30 ++++----
 client/src/components/home/JoinGame.tsx   |  4 +-
 client/src/components/user/CopyLink.tsx   | 12 +--
 client/src/config.ts                      |  2 +-
 6 files changed, 83 insertions(+), 68 deletions(-)

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index d199083..8ab2d09 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -6,51 +6,74 @@ import PublicGames from "@/components/home/PublicGames/PublicGames";
 import Link from "next/link";
 import { useSession } from "@/context/session";
 
-
 export default function Home() {
   const { user } = useSession();
+  const isLoggedIn = user?.id && typeof user.id === "number";
 
   return (
-    <div className="flex w-full flex-wrap items-start justify-center gap-8 px-4 py-10 lg:gap-16">
-      <PublicGames />
+    <div className="flex flex-col gap-8 w-full max-w-5xl px-4 py-8">
 
-      <div className="flex flex-col items-center gap-4">
+      {/* Hauptaktionen */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
 
-        {/* Against AI */}
-        <div className="flex flex-col items-center">
-          <h2 className="mb-4 text-xl font-bold leading-tight">Gegen KI spielen</h2>
-          <Link href="/ai" className="btn btn-primary w-full max-w-xs">
-            ♟ Gegen Stockfish spielen
-          </Link>
-        </div>
-
-        <div className="divider divider-vertical">oder</div>
-
-        {/* Friends */}
-        {user?.id && typeof user.id === "number" && (
-          <>
-            <div className="flex flex-col items-center">
-              <h2 className="mb-4 text-xl font-bold leading-tight">Freunde</h2>
-              <Link href="/friends" className="btn btn-outline w-full max-w-xs">
-                👥 Freunde verwalten
-              </Link>
+        <div className="card bg-base-200 border-2 border-primary shadow-lg">
+          <div className="card-body gap-3">
+            <h2 className="card-title text-primary">♟ Spiel erstellen</h2>
+            <p className="text-sm opacity-70">Erstelle eine Partie und teile den Einladungslink mit Freunden</p>
+            <div className="mt-2">
+              <CreateGame />
             </div>
-            <div className="divider divider-vertical">oder</div>
-          </>
-        )}
-
-        <div className="flex flex-col items-center">
-          <h2 className="mb-4 text-xl font-bold leading-tight">Per Einladung beitreten</h2>
-          <JoinGame />
+          </div>
         </div>
 
-        <div className="divider divider-vertical">oder</div>
-
-        <div className="flex flex-col items-center">
-          <h2 className="mb-4 text-xl font-bold leading-tight">Spiel erstellen</h2>
-          <CreateGame />
+        <div className="card bg-base-200 shadow-lg">
+          <div className="card-body gap-3">
+            <h2 className="card-title">🤖 Gegen KI spielen</h2>
+            <p className="text-sm opacity-70">Fordere Stockfish auf verschiedenen Stufen heraus — von Anfänger bis Meister</p>
+            <div className="mt-auto pt-4">
+              <Link href="/ai" className="btn btn-secondary w-full">Jetzt spielen</Link>
+            </div>
+          </div>
         </div>
+
+        <div className="card bg-base-200 shadow-lg">
+          <div className="card-body gap-3">
+            {isLoggedIn ? (
+              <>
+                <h2 className="card-title">👥 Freunde</h2>
+                <p className="text-sm opacity-70">Freunde hinzufügen, verwalten und zu einer Partie einladen</p>
+                <div className="mt-auto pt-4">
+                  <Link href="/friends" className="btn btn-outline w-full">Freunde verwalten</Link>
+                </div>
+              </>
+            ) : (
+              <>
+                <h2 className="card-title">🔗 Einladung annehmen</h2>
+                <p className="text-sm opacity-70 mb-2">Einladungslink oder Code eingeben um beizutreten</p>
+                <JoinGame />
+              </>
+            )}
+          </div>
+        </div>
+
       </div>
+
+      {/* Öffentliche Spiele + Beitreten */}
+      <div className={`grid gap-6 grid-cols-1 ${isLoggedIn ? "lg:grid-cols-3" : ""}`}>
+        <div className={isLoggedIn ? "lg:col-span-2" : ""}>
+          <PublicGames />
+        </div>
+        {isLoggedIn && (
+          <div className="card bg-base-200 shadow h-fit">
+            <div className="card-body">
+              <h2 className="card-title text-lg">🔗 Einladung annehmen</h2>
+              <p className="text-sm opacity-70 mb-2">Link oder Code eingeben</p>
+              <JoinGame />
+            </div>
+          </div>
+        )}
+      </div>
+
     </div>
   );
 }
diff --git a/client/src/components/game/GamePage.tsx b/client/src/components/game/GamePage.tsx
index 751f118..b97a867 100644
--- a/client/src/components/game/GamePage.tsx
+++ b/client/src/components/game/GamePage.tsx
@@ -22,7 +22,7 @@ import { Chess } from "chess.js";
 import type { ClearPremoves } from "react-chessboard";
 import { Chessboard } from "react-chessboard";
 
-import { API_URL } from "@/config";
+import { API_URL, APP_URL } from "@/config";
 import { io } from "socket.io-client";
 
 import { lobbyReducer, squareReducer } from "./reducers";
@@ -408,12 +408,8 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) {
   }
 
   function copyInvite() {
-    const text = `https://ches.su/${lobby.endReason ? `archive/${lobby.id}` : initialLobby.code}`;
-    if ("clipboard" in navigator) {
-      navigator.clipboard.writeText(text);
-    } else {
-      document.execCommand("copy", true, text);
-    }
+    const text = `${APP_URL}/${lobby.endReason ? `archive/${lobby.id}` : initialLobby.code}`;
+    navigator.clipboard.writeText(text).catch(() => {});
     setCopiedLink(true);
     setTimeout(() => {
       setCopiedLink(false);
@@ -586,7 +582,7 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) {
                   onClick={copyInvite}
                 >
                   <IconCopy size={16} />
-                  ches.su/{lobby.endReason ? `archive/${lobby.id}` : initialLobby.code}
+                  {APP_URL.replace(/^https?:\/\//, "")}/{lobby.endReason ? `archive/${lobby.id}` : initialLobby.code}
                 </label>
                 <div tabIndex={0} className="dropdown-content badge badge-neutral text-xs shadow">
                   copied to clipboard
diff --git a/client/src/components/home/CreateGame.tsx b/client/src/components/home/CreateGame.tsx
index 839c08a..547c1aa 100644
--- a/client/src/components/home/CreateGame.tsx
+++ b/client/src/components/home/CreateGame.tsx
@@ -33,35 +33,35 @@ export default function CreateGame() {
   }
 
   return (
-    <form className="form-control" onSubmit={submitCreateGame}>
-      <label className="label cursor-pointer">
-        <span className="label-text">Unlisted/invite-only</span>
-        <input type="checkbox" className="checkbox" name="createUnlisted" id="createUnlisted" />
+    <form className="flex flex-col gap-3" onSubmit={submitCreateGame}>
+      <label className="flex items-center justify-between cursor-pointer">
+        <span className="label-text text-sm">Nur per Einladung</span>
+        <input type="checkbox" className="checkbox checkbox-primary checkbox-sm" name="createUnlisted" id="createUnlisted" />
       </label>
-      <label className="label" htmlFor="createStartingSide">
-        <span className="label-text">Select your side</span>
-      </label>
-      <div className="input-group">
+      <div className="flex gap-2">
         <select
-          className="select select-bordered"
+          className="select select-bordered select-sm flex-1"
           name="createStartingSide"
           id="createStartingSide"
         >
-          <option value="random">Random</option>
-          <option value="white">White</option>
-          <option value="black">Black</option>
+          <option value="random">Zufällig</option>
+          <option value="white">Weiß</option>
+          <option value="black">Schwarz</option>
         </select>
         <button
           className={
-            "btn" +
+            "btn btn-primary btn-sm" +
             (buttonLoading ? " loading" : "") +
-            (!session?.user?.id ? " btn-disabled text-base-content" : "")
+            (!session?.user?.id ? " btn-disabled" : "")
           }
           type="submit"
         >
-          Create
+          Erstellen
         </button>
       </div>
+      {!session?.user?.id && (
+        <p className="text-xs opacity-60">Bitte einloggen um ein Spiel zu erstellen</p>
+      )}
     </form>
   );
 }
diff --git a/client/src/components/home/JoinGame.tsx b/client/src/components/home/JoinGame.tsx
index 1604f38..9f85e4a 100644
--- a/client/src/components/home/JoinGame.tsx
+++ b/client/src/components/home/JoinGame.tsx
@@ -25,8 +25,8 @@ export default function JoinGame() {
 
     setButtonLoading(true);
 
-    if (code.startsWith("ches.su")) {
-      code = "http://" + code;
+    if (!code.startsWith("http") && code.includes("/")) {
+      code = "https://" + code;
     }
     if (code.startsWith("http")) {
       code = new URL(code).pathname.split("/")[1];
diff --git a/client/src/components/user/CopyLink.tsx b/client/src/components/user/CopyLink.tsx
index 60a8456..1d50c0b 100644
--- a/client/src/components/user/CopyLink.tsx
+++ b/client/src/components/user/CopyLink.tsx
@@ -2,18 +2,14 @@
 
 import { IconCopy } from "@tabler/icons-react";
 import { useState } from "react";
+import { APP_URL } from "@/config";
 
 export default function CopyLink({ name }: { name: string }) {
   const [copiedLink, setCopiedLink] = useState(false);
+  const host = APP_URL.replace(/^https?:\/\//, "");
 
   function copyLink() {
-    const text = `https://ches.su/user/${name}`;
-
-    if ("clipboard" in navigator) {
-      navigator.clipboard.writeText(text);
-    } else {
-      document.execCommand("copy", true, text);
-    }
+    navigator.clipboard.writeText(`${APP_URL}/user/${name}`).catch(() => {});
     setCopiedLink(true);
     setTimeout(() => {
       setCopiedLink(false);
@@ -27,7 +23,7 @@ export default function CopyLink({ name }: { name: string }) {
         onClick={copyLink}
       >
         <IconCopy size={16} />
-        ches.su/user/{name}
+        {host}/user/{name}
       </label>
       <div tabIndex={0} className="dropdown-content badge badge-neutral text-xs shadow">
         copied to clipboard
diff --git a/client/src/config.ts b/client/src/config.ts
index 397995f..288f78a 100644
--- a/client/src/config.ts
+++ b/client/src/config.ts
@@ -1,2 +1,2 @@
-// back-end server url
 export const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+export const APP_URL = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";