abdularhamkhan · AhmadCSWeb · May 11, 2025 · May 11, 2025
diff --git a/README.md b/README.md
@@ -3,6 +3,10 @@
 - A web-app for playing video games. 
 - The website will feature arcade games, user accounts, leaderboards, user comments (CRUD operations), and an admin panel. 
 - The games may be few and super-simple (to keep Web Dev. the primary focus of the project). Feedback appreciated!
+### Games
+- Tictactoe
+- Whack-a-mole
+- 1024
 
 
 

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -1,6 +1,6 @@
 // components/Navbar.js
-import { useState } from 'react';
-import Link from 'next/link';
+import { useState } from "react";
+import Link from "next/link";
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -14,60 +14,135 @@ const Navbar = () => {
       <div className="container mx-auto flex justify-between items-center">
         <h1 className="text-white text-2xl font-bold">GameSpace</h1>
         <div className="md:hidden">
-          <button onClick={toggleMenu} className="text-white focus:outline-none">
+          <button
+            onClick={toggleMenu}
+            className="text-white focus:outline-none"
+          >
             {isOpen ? (
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             ) : (
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16m-7 6h7"
+                />
               </svg>
             )}
           </button>
         </div>
         {/* Desktop Menu */}
         <div className="hidden md:flex md:flex-row md:items-center md:space-x-4">
-          <Link href="/games/tictactoe" className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors">
+          <Link
+            href="/games/tictactoe"
+            className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors"
+          >
             Tic Tac Toe
           </Link>
-          <Link href="/games/whack-a-mole" className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors">
+          <Link
+            href="/games/whack-a-mole"
+            className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors"
+          >
             Whack-a-Mole
           </Link>
-          <Link href="/games/game2" className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors">
+<<<<<<< HEAD
+          <Link href="/games/1024" className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors">
+            1024
+=======
+          <Link
+            href="/games/game2"
+            className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors"
+          >
             Game 2
+>>>>>>> 5dcd9aaee1c4c68702f7eb87312da3141a8d2973
           </Link>
-          <Link href="/games/game3" className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors">
+          <Link
+            href="/games/game3"
+            className="text-white hover:bg-[#C26DFC]/20 px-3 py-2 rounded-xl transition-colors"
+          >
             Game 3
           </Link>
         </div>
         <div className="hidden md:flex space-x-4">
-          <Link href="/signup" className="bg-[#F67385] text-white px-4 py-2 rounded-xl shadow-md hover:bg-[#C26DFC] transition-colors">
+          <Link
+            href="/signup"
+            className="bg-[#F67385] text-white px-4 py-2 rounded-xl shadow-md hover:bg-[#C26DFC] transition-colors"
+          >
             Sign Up
           </Link>
-          <Link href="/login" className="bg-[#F67385] text-white px-4 py-2 rounded-xl shadow-md hover:bg-[#C26DFC] transition-colors">
+          <Link
+            href="/login"
+            className="bg-[#F67385] text-white px-4 py-2 rounded-xl shadow-md hover:bg-[#C26DFC] transition-colors"
+          >
             Login
           </Link>
         </div>
       </div>
       {/* Mobile Menu */}
-      <div className={`md:hidden ${isOpen ? 'block' : 'hidden'} bg-[#F67385]/20 backdrop-blur-md mt-2 rounded-xl p-4`}>
-        <Link href="/games/tictactoe" className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors">
+      <div
+        className={`md:hidden ${
+          isOpen ? "block" : "hidden"
+        } bg-[#F67385]/20 backdrop-blur-md mt-2 rounded-xl p-4`}
+      >
+        <Link
+          href="/games/tictactoe"
+          className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors"
+        >
           Tic Tac Toe
         </Link>
-        <Link href="/games/whack-a-mole" className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors">
+        <Link
+          href="/games/whack-a-mole"
+          className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors"
+        >
           Whack-a-Mole
         </Link>
-        <Link href="/games/game2" className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors">
+<<<<<<< HEAD
+        <Link href="/games/1024" className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors">
+          1024
+=======
+        <Link
+          href="/games/game2"
+          className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors"
+        >
           Game 2
+>>>>>>> 5dcd9aaee1c4c68702f7eb87312da3141a8d2973
         </Link>
-        <Link href="/games/game3" className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors">
+        <Link
+          href="/games/game3"
+          className="block text-white hover:bg-[#C26DFC]/20 px-4 py-2 rounded-xl transition-colors"
+        >
           Game 3
         </Link>
-        <Link href="/signup" className="block bg-[#F67385] text-white px-4 py-2 rounded-xl shadow-md hover:bg-[#C26DFC] mt-2 transition-colors">
+        <Link
+          href="/auth/signup"
+          className="block bg-[#F67385] text-white px-4 py-2 rounded-xl shadow-md hover:bg-[#C26DFC] mt-2 transition-colors"
+        >
           Sign Up
         </Link>
-        <Link href="/login" className="block bg-[#F67385] text-white px-4 py-2 rounded-xl shadow-md hover:bg-[#C26DFC] mt-2 transition-colors">
+        <Link
+          href="/auth/signup"
+          className="block bg-[#F67385] text-white px-4 py-2 rounded-xl shadow-md hover:bg-[#C26DFC] mt-2 transition-colors"
+        >
           Login
         </Link>
       </div>

diff --git a/components/auth/auth-form.js b/components/auth/auth-form.js
@@ -0,0 +1,74 @@
+import { useState,useRef } from 'react';
+import classes from './auth-form.module.css';
+import {signIn} from 'next-auth/react';
+import { useRouter } from 'next/router';
+
+
+function createUser(e,p){
+    fetch('/api/auth/signup',{
+        method:'POST',
+        body:JSON.stringify({email:e,password:p}),
+        headers:{
+            'Content-Type':'application/json'
+        }
+    }).then(res=>res.json()).then(d=>console.log(d));
+}
+
+function AuthForm() {
+  const router=useRouter();
+    const eref=useRef();
+    const pref=useRef();
+  const [isLogin, setIsLogin] = useState(true);
+
+  function switchAuthModeHandler() {
+    setIsLogin((prevState) => !prevState);
+  }
+
+  async function submitHandler(event){
+    event.preventDefault();
+    const email=eref.current.value;
+    const pass=pref.current.value;
+    if(isLogin)
+    {
+        //log user in
+      const result= await signIn('credentials',{redirect:false,email:email,password:pass})
+      console.log(result)
+      if(!result.error)
+      {
+          router.replace('/profile')
+      }
+    }
+    else
+    {
+        //send request to create a new user
+        createUser(email,pass);
+    }
+  }
+  return (
+    <section className={classes.auth}>
+      <h1>{isLogin ? 'Login' : 'Sign Up'}</h1>
+      <form onSubmit={submitHandler}>
+        <div className={classes.control}>
+          <label htmlFor='email'>Your Email</label>
+          <input type='email' id='email' required ref={eref} />
+        </div>
+        <div className={classes.control}>
+          <label htmlFor='password'>Your Password</label>
+          <input type='password' id='password' required ref={pref} />
+        </div>
+        <div className={classes.actions}>
+          <button>{isLogin ? 'Login' : 'Create Account'}</button>
+          <button
+            type='button'
+            className={classes.toggle}
+            onClick={switchAuthModeHandler}
+          >
+            {isLogin ? 'Create new account' : 'Login with existing account'}
+          </button>
+        </div>
+      </form>
+    </section>
+  );
+}
+
+export default AuthForm;
diff --git a/components/auth/auth-form.module.css b/components/auth/auth-form.module.css
@@ -0,0 +1,72 @@
+.auth {
+    margin: 3rem auto;
+    width: 95%;
+    max-width: 25rem;
+    border-radius: 6px;
+    background-color: #38015c;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    padding: 1rem;
+    text-align: center;
+  }
+
+  .auth h1 {
+    text-align: center;
+    color: white;
+  }
+
+  .control {
+    margin-bottom: 0.5rem;
+  }
+
+  .control label {
+    display: block;
+    color: white;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  .control input {
+    font: inherit;
+    background-color: #f1e1fc;
+    color: #38015c;
+    border-radius: 4px;
+    border: 1px solid white;
+    width: 100%;
+    text-align: left;
+    padding: 0.25rem;
+  }
+
+  .actions {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .actions button {
+    cursor: pointer;
+    font: inherit;
+    color: white;
+    background-color: #9f5ccc;
+    border: 1px solid #9f5ccc;
+    border-radius: 4px;
+    padding: 0.5rem 2.5rem;
+  }
+
+  .actions button:hover {
+    background-color: #873abb;
+    border-color: #873abb;
+  }
+
+  .actions .toggle {
+    margin-top: 1rem;
+    background-color: transparent;
+    color: #9f5ccc;
+    border: none;
+    padding: 0.15rem 1.5rem;
+  }
+
+  .actions .toggle:hover {
+    background-color: transparent;
+    color: #ae82cc;
+  }