UI/frontend/look and feel

frontend/app/(guest-only)/layout.tsx

@@ -1,9 +1,3 @@
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <main className="flex items-center justify-center md:h-screen">
-      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
-        {children}
-      </div>
-    </main>
-  );
+  return <div className="mx-auto mt-4 w-full max-w-[400px]">{children}</div>;
 }

frontend/app/(guest-only)/login/page.tsx

@@ -1,12 +1,5 @@
 import LoginForm from "@/app/ui/auth/login-form";
 
 export default function LoginPage() {
-  return (
-    <>
-      <LoginForm />
-      <a href={`${process.env.NEXT_PUBLIC_API_URL}/auth/login/oauth2/42`}>
-        login with 42
-      </a>
-    </>
-  );
+  return <LoginForm />;
 }

frontend/app/(guest-only)/signup/page.tsx

@@ -2,12 +2,5 @@
 import SignUpForm from "@/app/ui/auth/signup-form";
 
 export default function SignUp() {
-  return (
-    <>
-      <SignUpForm />
-      <a href={`${process.env.NEXT_PUBLIC_API_URL}/auth/signup/oauth2/42`}>
-        sign up with 42
-      </a>
-    </>
-  );
+  return <SignUpForm />;
 }

frontend/app/page.tsx

@@ -1,13 +1,10 @@
-import { Button } from "@/components/ui/button";
-
 export default function Home() {
   return (
     <>
-      <div className="text-muted-foreground">Hello</div>
-      <div className="flex gap-8">
-        <Button variant={"secondary"}>Learn More</Button>
-        <Button>Enroll</Button>
-      </div>
+      <h1 className="text-4xl font-bold">42 Transcendence Project</h1>
+      <p className="text-lg text-muted-foreground">
+        You can play classic pong game here.
+      </p>
     </>
   );
 }

frontend/app/pong/GameList.tsx

@@ -30,7 +30,7 @@ export default function GameList() {
 
   return (
     <>
-      <Card className="flex flex-col items-center">
+      <Card className="basis-1/3 flex flex-col items-center">
         <CardHeader>
           <CardTitle>Ongoing games</CardTitle>
         </CardHeader>

frontend/app/pong/JoinRoomForm.tsx

@@ -10,40 +10,74 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import MatchButton from "./MatchButton";
+import { v4 } from "uuid";
+import { Separator } from "@/components/ui/separator";
 
-export default function JoinRoomForm({ disabled }: { disabled: boolean }) {
-  const router = useRouter();
-  const [inputValue, setInputValue] = useState("");
-  const handleSubmit = (event: React.SyntheticEvent) => {
-    event.preventDefault();
-    router.push(`/pong/${inputValue}?mode=player`);
-  };
-
+export default function JoinRoomForm({}) {
   return (
-    <Card className="w-[350px]">
+    <Card className="basis-1/3">
       <CardHeader>
         <CardTitle>Join room</CardTitle>
         <CardDescription>
           Join a room to play pong with your friend
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <form onSubmit={handleSubmit}>
-          <div className="grid w-full items-center gap-4">
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="id">ID</Label>
-              <Input
-                id="id"
-                placeholder="ID of pong room you friend told you"
-                onChange={(e) => setInputValue(e.target.value)}
-              />
-            </div>
-            <Button disabled={disabled}>Join</Button>
-          </div>
-        </form>
+        <div className="flex flex-col gap-4">
+          <Form />
+          <OrSeparator />
+          <CreateRoomButton />
+          <OrSeparator />
+          <MatchButton />
+        </div>
       </CardContent>
     </Card>
   );
 }
+
+function OrSeparator() {
+  return (
+    <div className="flex gap-4 w-full">
+      <Separator className="shrink self-center" />
+      OR
+      <Separator className="shrink self-center" />
+    </div>
+  );
+}
+
+function CreateRoomButton() {
+  const randomRoomId = v4();
+  return (
+    <Button asChild>
+      <Link href={`/pong/${randomRoomId}`}>Create a new room</Link>
+    </Button>
+  );
+}
+
+function Form() {
+  const router = useRouter();
+  const [inputValue, setInputValue] = useState("");
+  const handleSubmit = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    router.push(`/pong/${inputValue}?mode=player`);
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="grid w-full items-center gap-4">
+        <div className="flex flex-col space-y-1.5">
+          <Label htmlFor="id">ID</Label>
+          <Input
+            id="id"
+            placeholder="ID of pong room you friend told you"
+            onChange={(e) => setInputValue(e.target.value)}
+          />
+        </div>
+        <Button>Join</Button>
+      </div>
+    </form>
+  );
+}

frontend/app/pong/MatchButton.tsx

@@ -5,17 +5,13 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { io } from "socket.io-client";
 
-export default function MatchButton({
-  disabled: initiallyDisabled,
-}: {
-  disabled: boolean;
-}) {
+export default function MatchButton({}) {
   const router = useRouter();
   const [socket] = useState(() =>
     io("/pong", { autoConnect: false, forceNew: true }),
   );
   const [message, setMessage] = useState("Match with someone!");
-  const [disabled, setDisabled] = useState(initiallyDisabled);
+  const [disabled, setDisabled] = useState(false);
 
   useEffect(() => {
     const handleConnect = () => {

frontend/app/pong/page.tsx

@@ -1,22 +1,24 @@
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
-import { v4 } from "uuid";
 import { isLoggedIn } from "../lib/session";
 import GameList from "./GameList";
 import JoinRoomForm from "./JoinRoomForm";
-import MatchButton from "./MatchButton";
 
 export default async function Page() {
   const isAuthorized = await isLoggedIn();
-  const roomId = v4();
   return (
-    <div className="flex flex-col gap-5 items-center">
-      <Button disabled={!isAuthorized} asChild>
-        <Link href={`/pong/${roomId}`}>Create a new room</Link>
-      </Button>
-      <MatchButton disabled={!isAuthorized}></MatchButton>
-      <JoinRoomForm disabled={!isAuthorized} />
-      <GameList />
+    <div className="flex gap-4 justify-center">
+      {isAuthorized ? (
+        <>
+          <JoinRoomForm />
+          <GameList />
+        </>
+      ) : (
+        <div className="flex flex-col gap-4 max-w-[400px]">
+          <p className="self-center">
+            You can watch games, but you need to log in to play!
+          </p>
+          <GameList />
+        </div>
+      )}
     </div>
   );
 }

frontend/app/ui/auth/login-form.tsx

@@ -3,22 +3,43 @@
 import { authenticate } from "@/app/lib/actions";
 import { useAuthContext } from "@/app/lib/client-auth";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useFormState, useFormStatus } from "react-dom";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
+import { Separator } from "@/components/ui/separator";
 
 export default function LoginForm() {
   return (
     <>
-      <Card className="w-[300px]">
+      <Card>
         <CardHeader>
-          <CardTitle className="text-center">Pong</CardTitle>
+          <CardTitle>Log in</CardTitle>
         </CardHeader>
         <CardContent>
-          <Form />
+          <div className="flex flex-col gap-8">
+            <Form />
+            <div className="flex gap-4 w-full">
+              <Separator className="shrink self-center" />
+              OR
+              <Separator className="shrink self-center" />
+            </div>
+            <Button className="w-full" asChild>
+              <a
+                href={`${process.env.NEXT_PUBLIC_API_URL}/auth/login/oauth2/42`}
+              >
+                Login with 42
+              </a>
+            </Button>
+          </div>
         </CardContent>
       </Card>
     </>
@@ -59,15 +80,13 @@ function Form() {
           </div>
           <LoginButton />
         </div>
-        <div className="flex h-8 items-end space-x-1">
-          {code === "CredentialSignin" && (
-            <>
-              <p aria-live="polite" className="text-sm text-red-500">
-                Invalid credentials
-              </p>
-            </>
-          )}
-        </div>
+        {code === "CredentialSignin" && (
+          <div className="flex h-8 items-end space-x-1">
+            <p aria-live="polite" className="text-sm text-red-500">
+              Invalid credentials
+            </p>
+          </div>
+        )}
       </form>
     </>
   );

frontend/app/ui/auth/signup-form.tsx

@@ -1,5 +1,7 @@
 import Form from "@/app/ui/user/create-form";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 
 export default function SignUpForm() {
   return (
@@ -8,7 +10,19 @@ export default function SignUpForm() {
         <CardTitle>Create Account</CardTitle>
       </CardHeader>
       <CardContent>
-        <Form />
+        <div className="flex flex-col gap-8">
+          <Form />
+          <div className="flex gap-4 w-full">
+            <Separator className="shrink self-center" />
+            OR
+            <Separator className="shrink self-center" />
+          </div>
+          <Button className="w-full" asChild>
+            <a href={`${process.env.NEXT_PUBLIC_API_URL}/auth/login/oauth2/42`}>
+              Sign up with 42
+            </a>
+          </Button>
+        </div>
       </CardContent>
     </Card>
   );

frontend/app/ui/nav.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 
 function AuthorizedMenu() {
   return (
-    <li className="flex gap-8 items-center">
+    <li className="flex flex-wrap gap-x-4 items-center whitespace-nowrap">
       <Link href="/user">User List</Link>
       <Link href="/room">Chat</Link>
       <Link href="/pong">Game</Link>
@@ -21,7 +21,7 @@ function AuthorizedMenu() {
 
 function UnauthorizedMenu() {
   return (
-    <li className="flex gap-8 items-center">
+    <li className="flex flex-wrap gap-x-4 items-center whitespace-nowrap">
       <Link href="/signup">Sign Up</Link>
       <Link href="/login">Log In</Link>
       {process.env.NODE_ENV === "development" && (
@@ -39,7 +39,7 @@ export default async function Nav() {
   const isAuthorized = await isLoggedIn();
   return (
     <nav className="py-4">
-      <ul className="flex items-center justify-between">
+      <ul className="flex flex-wrap items-center justify-between">
         <Link href="/" className="font-black">
           Pong
         </Link>