Merge pull request #10 from JBB0807/homepage-2nd-sprint

Homepage 2nd sprint

src/components/Hero.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import "../scss/components/Hero.scss";
+import "../scss/components/_hero.scss";
 
 function Hero() {
   const canvasRef = useRef(null);
@@ -32,7 +32,7 @@ function Hero() {
 
     // Japanese katakana characters + some latin characters and numbers
     const katakana =
-      "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+      "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
     const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
     const nums = "0123456789";
     const alphabet = katakana + latin + nums;
@@ -125,21 +125,30 @@ function Hero() {
       <div className="hero-glitch-lines"></div>
 
       <div className="hero-content">
+        <div className="hero-text-container">
+          <h1 className="hero-title">
+            BATTLE<span className="hero-title-highlight">SNAKE</span>
+          </h1>
+          <p className="hero-subtitle">
+            Enter the digital arena and code your way to victory
+          </p>
+
+          <div className="hero-cta-container">
+            <button className="hero-cta">
+              <span className="hero-cta-text">START BATTLE</span>
+              <span className="hero-cta-glitch"></span>
+            </button>
+          </div>
+        </div>
+
         <div className="hero-logo-container">
           <img
-            src="/images/battlesnake-neon-logo.jpg"
+            src="/images/battlesnake-neon-logo.GIF"
             alt="BattleSnake Neon Logo"
             className="hero-logo"
           />
           <div className="hero-logo-glow"></div>
         </div>
-
-        <div className="hero-cta-container">
-          <button className="hero-cta">
-            <span className="hero-cta-text">START BATTLE</span>
-            <span className="hero-cta-glitch"></span>
-          </button>
-        </div>
       </div>
 
       <div className="cyberpunk-cursor"></div>

src/components/Navbar.jsx

@@ -1,11 +1,32 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import "../scss/styles.scss";
 import "../scss/components/_navbar.scss";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 const Navbar = () => {
   const [glitchEffect, setGlitchEffect] = useState(false);
   const [activeLink, setActiveLink] = useState("/");
+  const [user, setUser] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    // Implement client-side logout without calling the backend
+    // This clears the user state in the frontend
+    setUser(null);
+
+    // Clear any authentication cookies if they exist
+    document.cookie.split(";").forEach((cookie) => {
+      const [name] = cookie.trim().split("=");
+      document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+    });
+
+    // Redirect to home page
+    navigate("/");
+
+    console.log("Logged out successfully");
+  };
 
   useEffect(() => {
     // Set active link based on current path
@@ -17,11 +38,52 @@ const Navbar = () => {
       setTimeout(() => setGlitchEffect(false), 200);
     }, 3000);
 
-    return () => clearInterval(glitchInterval);
+    // Close menu when clicking outside
+    const handleClickOutside = (event) => {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target) &&
+        menuOpen
+      ) {
+        setMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    async function fetchUser() {
+      const res = await fetch("http://localhost:8080/auth/current_user", {
+        credentials: "include", // very important
+      });
+      if (res.ok) {
+        console.log("User response:", res);
+        const user = await res.json();
+        //checking user response
+        // console.log("User:", user);
+        // console.log("User display name:", user.displayName);
+
+        setUser(user);
+      } else {
+        setUser(null);
+      }
+    }
+    fetchUser();
+
+    return () => {
+      clearInterval(glitchInterval);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
   }, []);
 
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  };
+
   return (
-    <nav className={`navbar ${glitchEffect ? "navbar--glitch" : ""}`}>
+    <nav
+      className={`navbar ${glitchEffect ? "navbar--glitch" : ""} ${
+        menuOpen ? "navbar--menu-open" : ""
+      }`}
+    >
       <div className="navbar__logo">
         <div className="navbar__logo-scanner"></div>
         <span className="navbar__logo-text">
@@ -29,7 +91,29 @@ const Navbar = () => {
         </span>
       </div>
 
-      <ul className="navbar__links">
+      <div className="navbar__hamburger" onClick={toggleMenu}>
+        <div
+          className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
+        ></div>
+        <div
+          className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
+        ></div>
+        <div
+          className={`navbar__hamburger-line ${menuOpen ? "active" : ""}`}
+        ></div>
+      </div>
+
+      {user && (
+        <div className="navbar__greeting">
+          <span className="navbar__greeting-text">WELCOME</span>
+          <span className="navbar__greeting-name">{user.displayName}</span>
+        </div>
+      )}
+
+      <ul
+        className={`navbar__links ${menuOpen ? "navbar__links--open" : ""}`}
+        ref={menuRef}
+      >
         <li>
           <Link
             to="/"
@@ -42,7 +126,8 @@ const Navbar = () => {
             <span className="navbar__link-hover"></span>
           </Link>
         </li>
-        <li>
+        {/* will be decided later of we shall keep NOTEBOOK or not */}
+        {/* <li>
           <Link
             to="/notebook"
             className={`navbar__link ${
@@ -50,10 +135,11 @@ const Navbar = () => {
             }`}
           >
             <span className="navbar__link-icon">📓</span>
-            <span className="navbar__link-text">NOTEBOOK</span>
+            <span className="navbar__link-text"></span>
+            NOTEBOOK
             <span className="navbar__link-hover"></span>
           </Link>
-        </li>
+        </li> */}
         <li>
           <Link
             to="/assignment"
@@ -79,16 +165,31 @@ const Navbar = () => {
           </Link>
         </li>
         <li>
-          <Link
+          {user ? (
-            to="/login"
+            <a
-            className={`navbar__link ${
+              href="#"
-              activeLink === "/login" ? "navbar__link--active" : ""
+              onClick={(e) => {
-            }`}
+                e.preventDefault();
-          >
+                handleLogout();
-            <span className="navbar__link-icon">🔒</span>
+              }}
-            <span className="navbar__link-text">LOGIN</span>
+              className={`navbar__link`}
-            <span className="navbar__link-hover"></span>
+            >
-          </Link>
+              <span className="navbar__link-icon">🔓</span>
+              <span className="navbar__link-text">LOGOUT</span>
+              <span className="navbar__link-hover"></span>
+            </a>
+          ) : (
+            <Link
+              to="/login"
+              className={`navbar__link ${
+                activeLink === "/login" ? "navbar__link--active" : ""
+              }`}
+            >
+              <span className="navbar__link-icon">🔒</span>
+              <span className="navbar__link-text">LOGIN</span>
+              <span className="navbar__link-hover"></span>
+            </Link>
+          )}
         </li>
       </ul>
     </nav>
@@ -96,3 +197,21 @@ const Navbar = () => {
 };
 
 export default Navbar;
+//{user ? user.displayName : "NOTEBOOK"}
+
+//server side logout (was not working properly, so implemented client side logout)
+// const handleLogout = async () => {
+//   try {
+//     const res = await fetch("http://localhost:8080/auth/logout", {
+//       method: "GET",
+//       credentials: "include",
+//     });
+
+//     if (res.ok) {
+//       setUser(null);
+// } else {
+//   console.error("Logout failed");
+// }
+// } catch (error) {
+// console.error("Error during logout:", error);
+// }

src/pages/HomePage.jsx

@@ -1,23 +1,27 @@
 // Page - Home
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
 const PageHome = () => {
+  useEffect(() => {
+    document.title = "Home";
+  }, []);
+  const [user, setUser] = useState(null);
 
-    useEffect(()=>{
+  return (
-        document.title = 'Home';
+    <div className="homepage-container">
-    },[]);
+      <main>
-
+        <section>
-    return (
+          <h2>Home Page</h2>
-        <div className="homepage-container">
+          <p>
-            <main>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit
-                <section>
+            porro, dolorem, quod facere enim voluptate provident quo labore vero
-                    <h2>Home Page</h2>
+            repellat nemo animi ad exercitationem rem quos, possimus libero
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit porro, dolorem, quod facere enim voluptate provident quo labore vero repellat nemo animi ad exercitationem rem quos, possimus libero deleniti laudantium?</p>
+            deleniti laudantium?
-                </section>
+          </p>
-            </main>
+        </section>
-        </div>
+      </main>
-    );
+    </div>
-
+  );
 };
 
 export default PageHome;

src/scss/components/_hero.scss

@@ -145,28 +145,89 @@ $cyber-black: #1a1a1a;
   &-content {
     position: relative;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     z-index: 2;
     width: 100%;
     max-width: 1200px;
     padding: 2rem;
     // Add a subtle backdrop filter to make content more readable against the matrix rain
     backdrop-filter: blur(2px);
+    
+    @media (max-width: 768px) {
+      flex-direction: column-reverse;
+      gap: 2rem;
+    }
+  }
+
+  // Text container styling
+  &-text-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding-right: 2rem;
+    
+    @media (max-width: 768px) {
+      align-items: center;
+      text-align: center;
+      padding-right: 0;
+    }
+  }
+  
+  // Title styling
+  &-title {
+    font-size: 3.5rem;
+    font-weight: bold;
+    color: white;
+    margin-bottom: 1rem;
+    letter-spacing: 4px;
+    text-shadow: 0 0 10px rgba($neon-blue, 0.7);
+    animation: flicker 3s infinite alternate;
+    
+    &-highlight {
+      color: $neon-pink;
+      text-shadow: 0 0 10px rgba($neon-pink, 0.7);
+    }
+    
+    @media (max-width: 768px) {
+      font-size: 2.5rem;
+    }
+  }
+  
+  // Subtitle styling
+  &-subtitle {
+    font-size: 1.2rem;
+    color: rgba(white, 0.8);
+    margin-bottom: 2rem;
+    max-width: 500px;
+    line-height: 1.6;
+    letter-spacing: 1px;
+    
+    @media (max-width: 768px) {
+      font-size: 1rem;
+    }
   }
   
   // Logo styling
   &-logo-container {
     position: relative;
-    margin-bottom: 3rem;
+    flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
+    max-width: 50%;
+    
+    @media (max-width: 768px) {
+      max-width: 80%;
+      margin-bottom: 1rem;
+    }
   }
 
   &-logo {
-    max-width: 80%;
+    max-width: 100%;
     height: auto;
     border-radius: 8px;
     filter: drop-shadow(0 0 10px rgba($neon-blue, 0.7))
@@ -191,8 +252,8 @@ $cyber-black: #1a1a1a;
 
   // CTA button styling
   &-cta-container {
-    margin-top: 2rem;
     position: relative;
+    margin-top: 1rem;
   }
 
   &-cta {

src/scss/components/_navbar.scss

@@ -6,6 +6,9 @@ $neon-yellow: #f7f500;
 $dark-bg: #0d0221;
 $cyber-black: #1a1a1a;
 
+// Breakpoints
+$mobile-breakpoint: 768px;
+
 @keyframes scanline {
   0% {
     transform: translateY(-100%);
@@ -18,34 +21,136 @@ $cyber-black: #1a1a1a;
 @keyframes glitch {
   0% {
     text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 75%, 0 75%, 0 100%, 100% 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 25%,
+      0 25%,
+      0 30%,
+      100% 30%,
+      100% 50%,
+      0 50%,
+      0 60%,
+      100% 60%,
+      100% 75%,
+      0 75%,
+      0 100%,
+      100% 100%
+    );
   }
   25% {
     text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 85%, 0 85%, 0 100%, 100% 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 35%,
+      0 35%,
+      0 65%,
+      100% 65%,
+      100% 85%,
+      0 85%,
+      0 100%,
+      100% 100%
+    );
   }
   50% {
     text-shadow: 0.025em 0.05em 0 $neon-blue, -0.05em -0.05em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%, 0 40%, 100% 40%, 100% 55%, 0 55%, 0 70%, 100% 70%, 100% 100%, 0 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 15%,
+      0 15%,
+      0 40%,
+      100% 40%,
+      100% 55%,
+      0 55%,
+      0 70%,
+      100% 70%,
+      100% 100%,
+      0 100%
+    );
   }
   75% {
     text-shadow: -0.05em -0.025em 0 $neon-blue, 0.025em 0.025em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%, 0 50%, 100% 50%, 100% 70%, 0 70%, 0 80%, 100% 80%, 100% 100%, 0 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 45%,
+      0 45%,
+      0 50%,
+      100% 50%,
+      100% 70%,
+      0 70%,
+      0 80%,
+      100% 80%,
+      100% 100%,
+      0 100%
+    );
   }
   100% {
     text-shadow: 0.05em 0 0 $neon-blue, -0.05em -0.025em 0 $neon-pink;
-    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 75%, 0 75%, 0 100%, 100% 100%);
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 25%,
+      0 25%,
+      0 30%,
+      100% 30%,
+      100% 50%,
+      0 50%,
+      0 60%,
+      100% 60%,
+      100% 75%,
+      0 75%,
+      0 100%,
+      100% 100%
+    );
+  }
+}
+
+@keyframes hamburger-pulse {
+  0% {
+    box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+  }
+  50% {
+    box-shadow: 0 0 8px $neon-pink, 0 0 15px $neon-pink, 0 0 20px $neon-pink;
+  }
+  100% {
+    box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+  }
+}
+
+@keyframes menu-reveal {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
 @keyframes neon-flicker {
-  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
+  0%,
+  19.999%,
+  22%,
+  62.999%,
+  64%,
+  64.999%,
+  70%,
+  100% {
     opacity: 0.99;
     filter: drop-shadow(0 0 1px rgba($neon-pink, 0.95))
-           drop-shadow(0 0 4px rgba($neon-pink, 0.6))
+      drop-shadow(0 0 4px rgba($neon-pink, 0.6))
-           drop-shadow(0 0 8px rgba($neon-pink, 0.4));
+      drop-shadow(0 0 8px rgba($neon-pink, 0.4));
   }
-  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
+  20%,
+  21.999%,
+  63%,
+  63.999%,
+  65%,
+  69.999% {
     opacity: 0.4;
     filter: none;
   }
@@ -53,10 +158,12 @@ $cyber-black: #1a1a1a;
 
 @keyframes hover-glow {
   0% {
-    box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue, 0 0 15px $neon-blue, 0 0 20px $neon-blue;
+    box-shadow: 0 0 5px $neon-blue, 0 0 10px $neon-blue, 0 0 15px $neon-blue,
+      0 0 20px $neon-blue;
   }
   100% {
-    box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue, 0 0 40px $neon-blue;
+    box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue, 0 0 30px $neon-blue,
+      0 0 40px $neon-blue;
   }
 }
 
@@ -75,6 +182,7 @@ $cyber-black: #1a1a1a;
   width: 100%;
   border-bottom: 1px solid $neon-pink;
   backdrop-filter: blur(5px);
+  transition: all 0.3s ease;
 
   // Glitch effect for the navbar
   &--glitch {
@@ -83,7 +191,7 @@ $cyber-black: #1a1a1a;
 
   &__logo {
     position: relative;
-    font-size: 1.5rem;
+    font-size: 2rem;
     font-weight: bold;
     display: flex;
     align-items: center;
@@ -113,20 +221,148 @@ $cyber-black: #1a1a1a;
     }
   }
 
+  &__hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30px;
+    height: 22px;
+    cursor: pointer;
+    z-index: 1001;
+    position: relative;
+
+    @media (max-width: $mobile-breakpoint) {
+      display: flex;
+    }
+
+    &-line {
+      width: 100%;
+      height: 3px;
+      background-color: white;
+      border-radius: 2px;
+      position: relative;
+      transition: all 0.3s ease;
+      box-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+
+      &.active {
+        &:nth-child(1) {
+          transform: translateY(9.5px) rotate(45deg);
+        }
+
+        &:nth-child(2) {
+          opacity: 0;
+          transform: translateX(-20px);
+        }
+
+        &:nth-child(3) {
+          transform: translateY(-9.5px) rotate(-45deg);
+        }
+      }
+    }
+
+    &:hover {
+      .navbar__hamburger-line {
+        animation: hamburger-pulse 1.5s infinite;
+        box-shadow: 0 0 10px $neon-blue, 0 0 20px $neon-blue;
+      }
+    }
+  }
+
+  &__greeting {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border: 1px solid $neon-blue;
+    border-radius: 4px;
+    background-color: rgba($dark-bg, 0.7);
+    position: absolute;
+    left: 40%;
+    transform: translateX(-50%);
+    overflow: hidden;
+
+    @media (max-width: $mobile-breakpoint) {
+      display: none;
+    }
+
+    &-text {
+      color: $neon-blue;
+      font-size: 0.9rem;
+      font-weight: bold;
+      letter-spacing: 2px;
+      text-shadow: 0 0 5px rgba($neon-blue, 0.7);
+    }
+
+    &-name {
+      color: white;
+      font-size: 1.2rem;
+      font-weight: bold;
+      letter-spacing: 2px;
+      animation: neon-flicker 5s infinite alternate;
+      text-shadow: 0 0 5px $neon-pink, 0 0 10px $neon-pink;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      height: 2px;
+      width: 100%;
+      background: linear-gradient(90deg, transparent, $neon-blue, transparent);
+      animation: scanline 2s linear infinite;
+    }
+  }
+
   &__links {
     list-style: none;
     display: flex;
     gap: 1.5rem;
     margin: 0;
     padding: 0;
+    transition: all 0.3s ease;
 
-    @media (max-width: 768px) {
+    @media (max-width: $mobile-breakpoint) {
+      position: fixed;
+      top: 0;
+      right: -100%;
+      width: 250px;
+      height: 100vh;
+      background-color: rgba($cyber-black, 0.95);
       flex-direction: column;
-      gap: 0.8rem;
+      gap: 1.5rem;
+      padding: 5rem 2rem 2rem;
+      z-index: 1000;
+      box-shadow: -5px 0 15px rgba($neon-purple, 0.5);
+      border-left: 1px solid $neon-pink;
+      backdrop-filter: blur(10px);
+      overflow-y: auto;
+      transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
+    }
+
+    &--open {
+      @media (max-width: $mobile-breakpoint) {
+        right: 0;
+
+        li {
+          animation: menu-reveal 0.5s ease forwards;
+          opacity: 0;
+
+          @for $i from 1 through 10 {
+            &:nth-child(#{$i}) {
+              animation-delay: 0.1s * $i;
+            }
+          }
+        }
+      }
     }
 
     li {
       position: relative;
+      width: 100%;
+
+      @media (max-width: $mobile-breakpoint) {
+        margin-bottom: 0.5rem;
+      }
     }
   }
 
@@ -143,6 +379,13 @@ $cyber-black: #1a1a1a;
     transition: all 0.3s ease;
     letter-spacing: 1px;
 
+    @media (max-width: $mobile-breakpoint) {
+      width: 100%;
+      padding: 0.8rem 1rem;
+      border: 1px solid rgba($neon-blue, 0.3);
+      margin-bottom: 0.5rem;
+    }
+
     &-icon {
       margin-right: 0.5rem;
       font-size: 1.2rem;
@@ -192,4 +435,22 @@ $cyber-black: #1a1a1a;
       }
     }
   }
+
+  // Mobile menu open state
+  &--menu-open {
+    @media (max-width: $mobile-breakpoint) {
+      &::after {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 999;
+        backdrop-filter: blur(3px);
+        animation: menu-reveal 0.3s ease forwards;
+      }
+    }
+  }
 }