Merge pull request 'FooterFix' (#44) from footerFIx into main

Reviewed-on: #44

SerpentRace_Backend/.env.dev

@@ -32,3 +32,10 @@ MINIO_USE_SSL=false
 MAX_SPECIAL_FIELDS_PERCENTAGE=67
 MAX_GENERATION_TIME_SECONDS=20
 GENERATION_ERROR_TOLERANCE=15
+
+# EMAIL SERVICE CONFIGURATION
+EMAIL_HOST=smtp.gmail.com
+EMAIL_PORT=587
+EMAIL_USER=your_email@domain.com
+EMAIL_PASS=your_email_password
+EMAIL_FROM=noreply@serpentrace.com

SerpentRace_Frontend/src/api/userApi.js

@@ -73,3 +73,13 @@ export const verifyEmail = async (token) => {
     throw error
   }
 }
+
+// Get current user's game statistics
+export const getUserStats = async () => {
+  try {
+    const response = await apiClient.get("/users/me/stats")
+    return response.data
+  } catch (error) {
+    throw error
+  }
+}

SerpentRace_Frontend/src/components/Footer/Footer.jsx

@@ -1,54 +1,69 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { Link } from "react-router-dom"
 import Logo from "../../assets/pictures/Logo"
 
 const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
 
 const Footer = () => {
+  const [isVisible, setIsVisible] = useState(false)
+  const footerRef = useRef(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting)
+      },
+      { threshold: 0.3 }
+    )
+
+    if (footerRef.current) {
+      observer.observe(footerRef.current)
+    }
+
+    return () => {
+      if (footerRef.current) {
+        observer.unobserve(footerRef.current)
+      }
+    }
+  }, [])
+
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" })
   }
 
   return (
     <footer
+      ref={footerRef}
       className="relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8"
       style={{ transformOrigin: "bottom center" }}
     >
-      <style>
-        {`
-          .footer-animate {
-            transition: opacity 0.8s ease, transform 0.8s ease;
-          }
-        `}
-      </style>
-
       <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
         {/* Logó */}
-        <div className="flex flex-col items-center footer-animate">
-          <a href="/" className="transition-transform duration-500 hover:scale-105 hover:brightness-125">
+        <div className="flex flex-col items-center">
+          <a href="/" className="hover:scale-105 hover:brightness-125">
             <Logo size={100} />
           </a>
           <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
         </div>
 
         {/* Oldalak */}
-        <div className="flex flex-col gap-1 footer-animate">
+        <div className="flex flex-col gap-1">
           <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
             Oldalak
           </span>
-          <a href="/" className="hover:underline hover:text-green-400 transition">
+          <a href="/" className="hover:underline hover:text-green-400">
             Főoldal
           </a>
-          <a href="/about" className="hover:underline hover:text-green-400 transition">
+          <a href="/about" className="hover:underline hover:text-green-400">
             Rólunk
           </a>
-          <a href="/contact" className="hover:underline hover:text-green-400 transition">
+          <a href="/contact" className="hover:underline hover:text-green-400">
             Kapcsolat
           </a>
         </div>
 
         {/* Közösség */}
-        <div className="flex flex-col gap-1 footer-animate">
+        <div className="flex flex-col gap-1">
           <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
             Közösség
           </span>
@@ -56,7 +71,7 @@ const Footer = () => {
             href="https://discord.gg/"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:underline hover:text-green-400 transition"
+            className="hover:underline hover:text-green-400"
           >
             Discord
           </a>
@@ -64,14 +79,14 @@ const Footer = () => {
             href="https://github.com/"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:underline hover:text-green-400 transition"
+            className="hover:underline hover:text-green-400"
           >
             GitHub
           </a>
         </div>
 
         {/* Elérhetőség */}
-        <div className="flex flex-col gap-1 footer-animate">
+        <div className="flex flex-col gap-1">
           <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
             Elérhetőség
           </span>
@@ -80,18 +95,20 @@ const Footer = () => {
         </div>
       </div>
 
-      <div className="text-center mt-8 text-sm opacity-70 footer-animate">
+      <div className="text-center mt-8 text-sm opacity-70">
         © {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
       </div>
 
       {/* Scroll to top */}
-      <button
-        onClick={scrollToTop}
-        className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg transition transform hover:scale-110"
-        aria-label="Ugrás az oldal tetejére"
-      >
-        <ArrowUpIcon />
-      </button>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg hover:scale-110"
+          aria-label="Ugrás az oldal tetejére"
+        >
+          <ArrowUpIcon />
+        </button>
+      )}
     </footer>
   )
 }

SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx

@@ -6,13 +6,7 @@ import ButtonGreen from "../Buttons/ButtonGreen.jsx"
 import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
 import { motion } from "framer-motion"
 
-import { useNavigate } from "react-router-dom"
-
-const LandingPage = ({ onNavigateToPlay }) => {
-  const navigate = useNavigate()
-  const handleNavigateToAuth = () => {
-    navigate("/register")
-  }
+const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
   return (
     <div className="w-full">
       {/* Hero Section */}
@@ -61,8 +55,8 @@ const LandingPage = ({ onNavigateToPlay }) => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7, delay: 1 }}
           >
-            <ButtonGreen text="Játék" onClick={onNavigateToPlay} width="w-60" />
-            <ButtonGreen text="Regisztráció" onClick={handleNavigateToAuth} width="w-60" />
+            <ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" />
+            <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
           </motion.div>
         </div>
       </motion.section>
@@ -171,7 +165,7 @@ const LandingPage = ({ onNavigateToPlay }) => {
 
             <ButtonGreen
               text="Kapcsolatfelvétel"
-              onClick={handleNavigateToAuth}
+              onClick={onNavigateToAuth}
               className="px-12 py-4 text-xl font-bold"
             />
           </motion.div>

SerpentRace_Frontend/src/pages/Home/Home.jsx

@@ -25,7 +25,7 @@ export default function Home() {
       <div className="fixed top-0 left-0 right-0 z-30">
         <Navbar />
       </div>
-      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[640px]">
+      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
         <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
         {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
       </main>

SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx

@@ -1,23 +1,23 @@
 // src/pages/Landing/Landingpage.jsx
 // Főoldal - Landing Page
 
-import { useState } from "react"
+
+import { useNavigate } from "react-router-dom"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import LandingPage from "../../components/Landingpage/LandingPage.jsx"
 
 export default function LandingPageMain() {
-  // Navigációs callbackok
+  const navigate = useNavigate();
+
   const handleNavigateToPlay = () => {
-    // Itt lehet navigálni a játék oldalra
-    alert("Navigáció a játék oldalra")
-  }
+    navigate("/login"); 
+  };
 
   const handleNavigateToAuth = () => {
-    // Itt lehet navigálni a bejelentkezés oldalra
-    alert("Navigáció a bejelentkezés oldalra")
-  }
+    navigate("/register");
+  };
 
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -32,5 +32,5 @@ export default function LandingPageMain() {
       </main>
       <Footer />
     </div>
-  )
+  );
 }

SerpentRace_Frontend/src/pages/Report/Reports.jsx

@@ -3,6 +3,7 @@ import { useState } from "react"
 import Navbar from "../../components/Navbar/Navbar.jsx"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
+import { getUserStats } from "../../api/userApi.js"
 
 export default function Reports() {
   return (