show error tooltip when game not found

client/src/components/home/JoinGame.tsx

@@ -9,34 +9,43 @@ import { useRouter } from "next/navigation";
 export default function JoinGame() {
   const session = useContext(SessionContext);
   const [buttonLoading, setButtonLoading] = useState(false);
+  const [notFound, setNotFound] = useState(false);
   const router = useRouter();
 
   async function submitJoinGame(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     if (!session?.user?.id) return;
-    setButtonLoading(true);
 
     const target = e.target as HTMLFormElement;
     const codeEl = target.elements.namedItem("joinGameCode") as HTMLInputElement;
 
     let code = codeEl.value;
+    if (!code) return;
+
+    setButtonLoading(true);
+
     if (code.startsWith("http") || code.startsWith("ches.su")) {
       code = new URL(code).pathname.split("/")[2];
     }
 
     const game = await getGame(code);
 
-    if (game) {
+    if (game && game.code) {
       router.push(`/game/${game.code}`);
     } else {
       setButtonLoading(false);
+      setNotFound(true);
+      setTimeout(() => setNotFound(false), 5000);
       codeEl.value = "";
-      // TODO: Show error message
     }
   }
 
   return (
-    <form className="input-group" onSubmit={submitJoinGame}>
+    <form
+      className={"input-group" + (notFound ? " tooltip tooltip-error tooltip-open" : "")}
+      data-tip="error: game not found"
+      onSubmit={submitJoinGame}
+    >
       <input
         type="text"
         placeholder="Invite link or code"