diff --git a/public/images/battlesnake-neon-logo.GIF b/public/images/battlesnake-neon-logo.GIF new file mode 100644 index 0000000..1426891 Binary files /dev/null and b/public/images/battlesnake-neon-logo.GIF differ diff --git a/public/images/battlesnake-neon-logo.jpg b/public/images/battlesnake-neon-logo1.jpg similarity index 100% rename from public/images/battlesnake-neon-logo.jpg rename to public/images/battlesnake-neon-logo1.jpg diff --git a/src/components/EditorPanel.jsx b/src/components/EditorPanel.jsx index fc7c247..fadcc5d 100644 --- a/src/components/EditorPanel.jsx +++ b/src/components/EditorPanel.jsx @@ -3,14 +3,32 @@ import Editor from '@monaco-editor/react'; export default function EditorPanel({ code, onChange }) { return ( -
+
onChange(v || '')} theme="vs-dark" + options={{ + fontSize: 16, + padding: { top: 10, bottom: 10 }, + minimap: { enabled: false }, + scrollbar: { + verticalScrollbarSize: 8, + horizontalScrollbarSize: 8, + }, + lineNumbers: 'on', + scrollBeyondLastLine: false, + }} />
); -} \ No newline at end of file +} diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 03fccee..718b553 100644 --- a/src/components/Hero.jsx +++ b/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() {
+
+

+ BATTLESNAKE +

+

+ Enter the digital arena and code your way to victory +

+ +
+ +
+
+
BattleSnake Neon Logo
- -
- -
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index c7533cb..f507995 100644 --- a/src/components/Navbar.jsx +++ b/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 ( -