Merge pull request 'creator, creation date on deck' (#61) from Backend_Fix into main

Reviewed-on: #61

SerpentRace_Backend/src/Api/routers/tests.ts

@@ -1,66 +0,0 @@
-import e, { Router } from 'express';
-import { container, DIContainer } from '../../Application/Services/DIContainer';
-import { ErrorResponseService } from '../../Application/Services/ErrorResponseService';
-import { logRequest, logError, logAuth, logWarning, logOther } from '../../Application/Services/Logger';
-import { GenerateBoardCommand } from '../../Application/Game/commands/GenerateBoardCommand';
-
-const router = Router();
-
-//function to test the search service
-async function triggerAsyncBoardGeneration(gameId: string): Promise<boolean> {
-        try {
-            // Calculate default field counts based on game configuration
-            // For now, use reasonable defaults - this should be configurable by host in the future
-            const maxSpecialFieldsPercentage = parseInt(process.env.MAX_SPECIAL_FIELDS_PERCENTAGE || '67');
-            const maxSpecialFields = Math.floor((100 * maxSpecialFieldsPercentage) / 100);
-            
-            // Default distribution: 60% positive, 25% negative, 15% luck
-            const positiveFieldCount = Math.floor(maxSpecialFields * 0.6);
-            const negativeFieldCount = Math.floor(maxSpecialFields * 0.25);
-            const luckFieldCount = Math.floor(maxSpecialFields * 0.15);
-            
-            const command: GenerateBoardCommand = {
-                gameId,
-                positiveFieldCount,
-                negativeFieldCount,
-                luckFieldCount
-            };
-
-            logOther(`Triggering async board generation for game ${gameId}`, {
-                positiveFieldCount,
-                negativeFieldCount,
-                luckFieldCount,
-                totalSpecialFields: positiveFieldCount + negativeFieldCount + luckFieldCount
-            });
-
-            // Execute board generation in background
-            await DIContainer.getInstance().generateBoardCommandHandler.execute(command);
-            return true;
-
-        } catch (error) {
-            logError(`Async board generation failed for game ${gameId}`, error as Error);
-            // Don't propagate error - board generation failure shouldn't affect game creation
-            return false;
-        }
-    }
-
-
-// Game board generation endpoint
-router.post('/gameBoardGeneration', async (req, res) => {
-    try {
-        logRequest('Game board generation endpoint accessed', req, res);
-
-        const result = await triggerAsyncBoardGeneration("######-#####-#####-######");
-        
-        if (result) {
-            logOther('Game board generation triggered successfully', result);
-            return res.json({ message: 'Game board generation triggered successfully' });
-        } else {
-            throw new Error('Game board generation failed to trigger');
-        } 
-    } catch (error : any) {
-        logError('Error in game board generation endpoint', error);
-        return ErrorResponseService.sendInternalServerError(res);
-    }
-});
-export default router;

SerpentRace_Backend/src/Application/DTOs/DeckDto.ts

@@ -15,6 +15,9 @@ export interface ShortDeckDto {
   type: number;
   playedNumber: number;
   ctype: number;
+  cardsCount: number;
+  creator: string;
+  creationdate: Date;
 }
 
 export interface DetailDeckDto {

SerpentRace_Backend/src/Application/DTOs/Mappers/DeckMapper.ts

@@ -1,4 +1,5 @@
 import { DeckAggregate } from '../../../Domain/Deck/DeckAggregate';
+import { UserAggregate } from '../../../Domain/User/UserAggregate';
 import { CreateDeckDto, UpdateDeckDto, ShortDeckDto, DetailDeckDto } from '../DeckDto';
 
 export class DeckMapper {
@@ -9,6 +10,9 @@ export class DeckMapper {
       type: deck.type,
       playedNumber: deck.playedNumber,
       ctype: deck.ctype,
+      cardsCount: deck.cards.length,
+      creator: deck.user?.username || 'Unknown',
+      creationdate: deck.creationdate
     };
   }
 
@@ -26,6 +30,15 @@ export class DeckMapper {
   }
 
   static toShortDtoList(decks: DeckAggregate[]): ShortDeckDto[] {
-    return decks.map(this.toShortDto);
+    return decks.map(deck => ({
+      id: deck.id,
+      name: deck.name,
+      type: deck.type,
+      playedNumber: deck.playedNumber,
+      ctype: deck.ctype,
+      cardsCount: deck.cards.length,
+      creator: deck.user?.username || 'Unknown',
+      creationdate: deck.creationdate
+    }));
   }
 }

SerpentRace_Backend/src/Domain/Deck/DeckAggregate.ts

@@ -1,5 +1,6 @@
 import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn, CreateDateColumn, UpdateDateColumn } from 'typeorm';
 import { OrganizationAggregate } from '../Organization/OrganizationAggregate';
+import { UserAggregate } from '../User/UserAggregate';
 
 export enum Type {
     LUCK = 0,
@@ -81,4 +82,8 @@ export class DeckAggregate {
     @ManyToOne(() => OrganizationAggregate, { nullable: true })
     @JoinColumn({ name: 'organization_id' })
     organization!: OrganizationAggregate | null;
+
+    @ManyToOne(() => UserAggregate, { eager: false })
+    @JoinColumn({ name: 'user_id' })
+    user!: UserAggregate | null;
 }

SerpentRace_Backend/src/Infrastructure/Repository/DeckRepository.ts

@@ -255,7 +255,7 @@ export class DeckRepository implements IDeckRepository {
 
                 const [decks, totalCount] = await this.repo.findAndCount({
                     where: { state: Not(State.SOFT_DELETE) },
-                    relations: ['organization'],
+                    relations: ['organization', 'user'],
                     order: { creationdate: 'DESC' },
                     skip,
                     take
@@ -270,6 +270,7 @@ export class DeckRepository implements IDeckRepository {
             // Regular user complex filtering
             const queryBuilder = this.repo.createQueryBuilder('deck')
                 .leftJoinAndSelect('deck.organization', 'org')
+                .leftJoinAndSelect('deck.user', 'user') 
                 .where('deck.state != :deletedState', { deletedState: State.SOFT_DELETE });
 
             queryBuilder.andWhere('(' +

SerpentRace_Docker/docker-compose.watch.nat.yml

@@ -0,0 +1,206 @@
+services:
+  # Backend service with hot reload
+  backend:
+    build:
+      context: ../SerpentRace_Backend
+      dockerfile: ../SerpentRace_Docker/Dockerfile_backend.dev
+    container_name: serpentrace-backend-dev
+    restart: unless-stopped
+    env_file:
+      - .env.dev
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=development
+      - PORT=3000
+      - FRONTEND_URL=http://localhost:5173
+      - DB_HOST=postgres
+      - DB_PORT=5432
+      - DB_NAME=serpentrace
+      - DB_USERNAME=postgres
+      - DB_PASSWORD=postgres
+      - REDIS_URL=redis://redis:6379
+      - REDIS_HOST=redis
+      - REDIS_PORT=6379
+      - MINIO_ENDPOINT=minio
+      - MINIO_PORT=9000
+      - MINIO_ACCESS_KEY=serpentrace
+      - MINIO_SECRET_KEY=serpentrace123!
+      - MINIO_USE_SSL=false
+    volumes: [ ../SerpentRace_Backend/logs:/app/logs ]
+    develop:
+      watch:
+        - action: sync
+          path: ../SerpentRace_Backend/src
+          target: /app/src
+          ignore:
+            - node_modules/
+            - dist/
+            - "*.log"
+        - action: sync
+          path: ../SerpentRace_Backend/package.json
+          target: /app/package.json
+        - action: rebuild
+          path: ../SerpentRace_Backend/package-lock.json
+        - action: rebuild
+          path: ../SerpentRace_Backend/tsconfig.json
+        - action: rebuild
+          path: ./Dockerfile_backend.dev
+
+    depends_on:
+      postgres:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+      minio:
+        condition: service_healthy
+    network_mode: host
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  # Frontend service with hot reload
+  frontend:
+    build:
+      context: ../SerpentRace_Frontend
+      dockerfile: ../SerpentRace_Docker/Dockerfile_frontend.dev
+    container_name: serpentrace-frontend-dev
+    restart: unless-stopped
+    ports:
+      - "5173:5173"
+    environment:
+      - NODE_ENV=development
+      - VITE_API_URL=http://localhost:3000
+    volumes: []
+    develop:
+      watch:
+        - action: sync
+          path: ../SerpentRace_Frontend/src
+          target: /app/src
+          ignore:
+            - node_modules/
+            - dist/
+            - "*.log"
+        - action: sync
+          path: ../SerpentRace_Frontend/public
+          target: /app/public
+        - action: sync
+          path: ../SerpentRace_Frontend/package.json
+          target: /app/package.json
+        - action: rebuild
+          path: ../SerpentRace_Frontend/package-lock.json
+        - action: rebuild
+          path: ../SerpentRace_Frontend/vite.config.js
+        - action: rebuild
+          path: ./Dockerfile_frontend.dev
+    depends_on:
+      - backend
+    network_mode: host
+
+  # PostgreSQL Database
+  postgres:
+    image: postgres:15-alpine
+    container_name: serpentrace-postgres-dev
+    restart: unless-stopped
+    ports:
+      - "5432:5432"
+    environment:
+      POSTGRES_DB: serpentrace
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_INITDB_ARGS: "--encoding=UTF-8"
+    volumes:
+      - postgres_dev_data:/var/lib/postgresql/data
+      - ./sql_schema_only.sql:/docker-entrypoint-initdb.d/init.sql:ro
+    network_mode: host
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # Redis Cache
+  redis:
+    image: redis:7-alpine
+    container_name: serpentrace-redis-dev
+    restart: unless-stopped
+    ports:
+      - "6379:6379"
+    volumes:
+      - redis_dev_data:/data
+    command: redis-server --appendonly yes
+    network_mode: host
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # MinIO Object Storage
+  minio:
+    image: minio/minio:latest
+    container_name: serpentrace-minio-dev
+    restart: unless-stopped
+    ports:
+      - "9000:9000"
+      - "9001:9001"
+    environment:
+      MINIO_ROOT_USER: serpentrace
+      MINIO_ROOT_PASSWORD: serpentrace123!
+    volumes:
+      - minio_dev_data:/data
+    command: server /data --console-address ":9001"
+    network_mode: host
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # Redis Commander for development debugging
+  redis-commander:
+    image: rediscommander/redis-commander:latest
+    container_name: serpentrace-redis-commander-dev
+    restart: unless-stopped
+    ports:
+      - "8081:8081"
+    environment:
+      - REDIS_HOSTS=local:redis:6379
+    depends_on:
+      redis:
+        condition: service_healthy
+    network_mode: host
+
+  # Database administration tool
+  pgadmin:
+    image: dpage/pgadmin4:latest
+    container_name: serpentrace-pgadmin-dev
+    restart: unless-stopped
+    ports:
+      - "8080:80"
+    environment:
+      PGADMIN_DEFAULT_EMAIL: admin@serpentrace.dev
+      PGADMIN_DEFAULT_PASSWORD: admin
+      PGADMIN_CONFIG_SERVER_MODE: 'False'
+      PGADMIN_CONFIG_MASTER_PASSWORD_REQUIRED: 'False'
+      PGADMIN_CONFIG_WTF_CSRF_ENABLED: 'False'
+    volumes:
+      - pgadmin_dev_data:/var/lib/pgadmin
+      - ./pgadmin_servers.json:/pgadmin4/servers.json:ro
+    depends_on:
+      postgres:
+        condition: service_healthy
+    network_mode: host
+
+volumes:
+  postgres_dev_data:
+    driver: local
+  redis_dev_data:
+    driver: local
+  minio_dev_data:
+    driver: local
+  pgadmin_dev_data:
+    driver: local

SerpentRace_Frontend/index.html

@@ -1,10 +1,10 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/pictures/Logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>SerpentRace</title>
   </head>
   <body>
     <div id="root"></div>

SerpentRace_Frontend/package-lock.json

@@ -15,6 +15,7 @@
         "react-dom": "^19.1.0",
         "react-icons": "^5.5.0",
         "react-router-dom": "^7.6.0",
+        "react-toastify": "^11.0.5",
         "tailwindcss": "^4.1.7"
       },
       "devDependencies": {
@@ -1816,6 +1817,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3363,6 +3373,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

SerpentRace_Frontend/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.0",
+    "react-toastify": "^11.0.5",
     "tailwindcss": "^4.1.7"
   },
   "devDependencies": {

SerpentRace_Frontend/src/App.jsx

@@ -15,6 +15,10 @@ import About from "./pages/About/About"
 import ScrollToTop from "./components/ScrollToTop"
 import GameScreen from "./pages/Game/GameScreen"
 import Reports from "./pages/Report/Reports"
+import Lobby from "./pages/Lobby/Lobby"
+import { ToastConfig } from "./components/Toastify/toastifyServices" // ✅ fontos: named import, nem default!
+
+
 
 function App() {
   const [isMobile, setIsMobile] = useState(false)
@@ -43,27 +47,31 @@ function App() {
   // }
 
   return (
-    <Router>
-      <Routes>
-        <Route path="/about" element={<About />} />
-        <Route path="/register" element={<AuthRegister />} />
-        <Route path="/login" element={<AuthLogin />} />
-        <Route path="/verify-email" element={<EmailVerification />} />
-        <Route path="/forgot-password" element={<ForgotPassword />} />
-        <Route path="/reset-password" element={<ResetPassword />} />
-        <Route path="/test" element={<Test />} />
-        <Route path="/" element={<Landingpage />} />
-        <Route path="/home" element={<Home />} />
-        <Route path="/decks" element={<DeckManagerPage />} />
-        <Route path="/deck-creator" element={<DeckCreator />} />
-        <Route path="/deck-creator/:deckId" element={<DeckCreator />} />
-        <Route path="/game" element={<GameScreen />} />
-        <Route path="/companies" element={<CompanyHub />} />
-        <Route path="/report" element={<Reports />} />
+    <>
+      <Router>
+        <Routes>
+          <Route path="/about" element={<About />} />
+          <Route path="/lobby" element={<Lobby />} />
+          <Route path="/register" element={<AuthRegister />} />
+          <Route path="/login" element={<AuthLogin />} />
+          <Route path="/verify-email" element={<EmailVerification />} />
+          <Route path="/forgot-password" element={<ForgotPassword />} />
+          <Route path="/reset-password" element={<ResetPassword />} />
+          <Route path="/test" element={<Test />} />
+          <Route path="/" element={<Landingpage />} />
+          <Route path="/home" element={<Home />} />
+          <Route path="/decks" element={<DeckManagerPage />} />
+          <Route path="/deck-creator" element={<DeckCreator />} />
+          <Route path="/deck-creator/:deckId" element={<DeckCreator />} />
+          <Route path="/game" element={<GameScreen />} />
+          <Route path="/companies" element={<CompanyHub />} />
+          <Route path="/report" element={<Reports />} />
+        </Routes>
+      </Router>
 
-        {/* Add more routes as needed */}
-      </Routes>
-    </Router>
+      {/* ✅ Toastify Container */}
+      <ToastConfig />
+    </>
   )
 }
 

SerpentRace_Frontend/src/api/userApi.js

@@ -1,7 +1,7 @@
 import axios from "axios"
 
 export const API_CONFIG = {
-  baseURL: (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : '') + "/api",
+  baseURL: (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : "") + "/api",
   wsURL: "http://localhost:3000",
   timeout: 10000,
   retryAttempts: 3,
@@ -12,9 +12,9 @@ export const apiClient = axios.create({
   timeout: API_CONFIG.timeout,
   withCredentials: true, // Important for cookie-based auth
   headers: {
-    'Content-Type': 'application/json'
-  }
-});
+    "Content-Type": "application/json",
+  },
+})
 
 //login
 export const login = async (username, password) => {
@@ -36,16 +36,6 @@ export const register = async (username, email, password, fname, lname, phone) =
   }
 }
 
-//verify email
-export const verifyEmail = async (token) => {
-  try {
-    const response = await apiClient.get(`/users/verify-email/${token}`)
-    return response.data
-  } catch (error) {
-    throw error
-  }
-}
-
 // Get current user's game statistics
 export const getUserStats = async () => {
   try {

SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx

@@ -7,6 +7,8 @@ import TaskCardEditor from "./TaskCardEditor.jsx"
 import JokerCardEditor from "./JokerCardEditor.jsx"
 import LuckCardEditor from "./LuckCardEditor.jsx"
 import CardPreview from "./CardPreview.jsx"
+import { notifySuccess, notifyError,notifyWarning } from "../../components/Toastify/toastifyServices"
+
 
 export default function CardEditor({ card, isCreating, cardType, onSave, onCancel }) {
   const [cardData, setCardData] = useState(null)
@@ -65,33 +67,24 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
     }
   }, [card, isCreating, cardType])
 
-  const handleSave = () => {
-    if (!cardData) return
-    
-    // Validáció
-    if (!validateCard(cardData)) return
-    
-    onSave(cardData)
-  }
-
   const validateCard = (data) => {
     if (data.type === 'task') {
       if (!data.question && !data.statement) {
-        alert("❌ Kérdés vagy állítás megadása kötelező!")
+        notifyError("Kérdés vagy állítás megadása kötelező!")
         return false
       }
       if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
-        alert("❌ Minden válaszlehetőséget ki kell tölteni!")
+        notifyError("Minden válaszlehetőséget ki kell tölteni!")
         return false
       }
     } else if (data.type === 'joker') {
       if (!data.text || !data.text.trim()) {
-        alert("❌ Joker kártya szövege nem lehet üres!")
+        notifyError("Joker kártya szövege nem lehet üres!")
         return false
       }
     } else if (data.type === 'luck') {
       if (!data.text || !data.text.trim()) {
-        alert("❌ Szerencse kártya szövege nem lehet üres!")
+        notifyError("Szerencse kártya szövege nem lehet üres!")
         return false
       }
     }
@@ -103,6 +96,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
     setCardData(prev => prev ? { ...prev, ...updates } : null)
   }
 
+  const handleSave = () => {
+    if (!cardData) return
+
+    if (!validateCard(cardData)) return
+
+    try {
+      onSave(cardData)
+      notifySuccess('Kártya sikeresen mentve!')
+    } catch (error) {
+      notifyError('Hiba történt a kártya mentése során: ' + (error?.message || String(error)))
+    }
+  }
+
   // Ha nincs kiválasztott kártya vagy új kártya létrehozás
   if (!cardData) {
     return (
@@ -134,7 +140,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
             </div>
             <div>
               <h2 className="text-xl font-bold text-[color:var(--color-text)]">
-                {isCreating ? 'Új' : 'Szerkesztés'} {' '}
+                {isCreating ? 'Új' : 'Szerkesztés'}{' '}
                 {cardData.type === 'task' && 'Feladat kártya'}
                 {cardData.type === 'joker' && 'Joker kártya'}
                 {cardData.type === 'luck' && 'Szerencse kártya'}
@@ -157,8 +163,8 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
               onClick={() => setShowPreview(!showPreview)}
               className={`
                 flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200
-                ${showPreview 
-                  ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]' 
+                ${showPreview
+                  ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]'
                   : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
                 }
               `}
@@ -168,12 +174,15 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
             </button>
             
             <button
-              onClick={onCancel}
-              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
-            >
-              <FaTimes />
-              Mégse
-            </button>
+  onClick={() => {
+    notifyWarning('Kártya készítés megszakítva')
+    onCancel()
+  }}
+  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
+>
+  <FaTimes />
+  Mégse
+</button>
             
             <button
               onClick={handleSave}
@@ -189,12 +198,10 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
       {/* Content */}
       <div className="flex-1 overflow-hidden">
         {showPreview ? (
-          /* Preview Mode */
           <div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6">
             <CardPreview card={cardData} />
           </div>
         ) : (
-          /* Edit Mode */
           <div className="h-full overflow-y-auto p-6">
             {cardData.type === 'task' && (
               <TaskCardEditor 
@@ -221,4 +228,4 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
       </div>
     </div>
   )
-}
+}

SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx

@@ -1,8 +1,18 @@
 // src/components/DeckCreator/CardsList.jsx
 // Bal oldali kártyák listája és új kártya létrehozás
 
-import React from "react"
-import { FaPlus, FaEdit, FaTrash, FaQuestionCircle, FaCheck, FaTimes, FaDice, FaTheaterMasks } from "react-icons/fa"
+import React, { useState } from "react"
+import {
+  FaPlus,
+  FaEdit,
+  FaTrash,
+  FaQuestionCircle,
+  FaCheck,
+  FaTimes,
+  FaDice,
+  FaTheaterMasks
+} from "react-icons/fa"
+import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
 
 const cardTypeIcons = {
   task: { icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -17,47 +27,60 @@ const cardSubTypeLabels = {
   text: "Szöveges válasz"
 }
 
-export default function CardsList({ 
-  cards, 
-  selectedCard, 
-  onSelectCard, 
-  onCreateCard, 
+export default function CardsList({
+  cards,
+  selectedCard,
+  onSelectCard,
+  onCreateCard,
   onDeleteCard,
   isCreatingCard,
-  newCardType 
+  newCardType
 }) {
+  const [confirmingDelete, setConfirmingDelete] = useState(null)
 
   const getCardPreview = (card) => {
-    if (card.type === 'task') {
-      return card.question || card.statement || 'Új feladat kártya'
+    if (card.type === "task") {
+      return card.question || card.statement || "Új feladat kártya"
     }
-    if (card.type === 'joker') {
-      return card.text || 'Új joker kártya'
+    if (card.type === "joker") {
+      return card.text || "Új joker kártya"
     }
-    if (card.type === 'luck') {
-      return card.text || 'Új szerencse kártya'
+    if (card.type === "luck") {
+      return card.text || "Új szerencse kártya"
     }
-    return 'Ismeretlen kártya'
+    return "Ismeretlen kártya"
   }
 
   const getCardTypeLabel = (card) => {
-    if (card.type === 'task') {
+    if (card.type === "task") {
       if (card.subType) {
-        return cardSubTypeLabels[card.subType] || 'Feladat'
+        return cardSubTypeLabels[card.subType] || "Feladat"
       }
-      return 'Feladat'
+      return "Feladat"
     }
-    if (card.type === 'joker') {
-      return 'Joker'
+    if (card.type === "joker") {
+      return "Joker"
     }
-    if (card.type === 'luck') {
-      return 'Szerencse'
+    if (card.type === "luck") {
+      return "Szerencse"
     }
-    return 'Ismeretlen'
+    return "Ismeretlen"
+  }
+
+  const handleConfirmDelete = () => {
+    if (confirmingDelete) {
+      onDeleteCard(confirmingDelete)
+      notifySuccess("Kártya sikeresen törölve a pakliból!")
+      setConfirmingDelete(null)
+    }
+  }
+
+  const handleCancelDelete = () => {
+    setConfirmingDelete(null)
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full relative">
       {/* Header */}
       <div className="p-4 border-b border-[color:var(--color-surface-selected)]">
         <h2 className="text-lg font-bold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
@@ -70,27 +93,27 @@ export default function CardsList({
             <FaPlus />
             Új kártya
           </button>
-          
+
           {/* Dropdown Menu */}
           <div className="absolute top-full left-0 right-0 mt-2 bg-[color:var(--color-card)] rounded-xl shadow-lg border border-[color:var(--color-surface-selected)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
             <button
-              onClick={() => onCreateCard('task')}
+              onClick={() => onCreateCard("task")}
               className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-t-xl"
             >
               <FaQuestionCircle className="text-[color:var(--color-question)]" />
               📋 Feladat kártya
             </button>
-            
+
             <button
-              onClick={() => onCreateCard('joker')}
+              onClick={() => onCreateCard("joker")}
               className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200"
             >
               <FaTheaterMasks className="text-[color:var(--color-fun)]" />
               🃏 Joker kártya
             </button>
-            
+
             <button
-              onClick={() => onCreateCard('luck')}
+              onClick={() => onCreateCard("luck")}
               className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-b-xl"
             >
               <FaDice className="text-[color:var(--color-luck)]" />
@@ -115,7 +138,7 @@ export default function CardsList({
               )}
               <div>
                 <div className="text-[color:var(--color-text)] font-medium">
-                  Új {newCardType === 'task' ? 'feladat' : newCardType === 'joker' ? 'joker' : 'szerencse'} kártya
+                  Új {newCardType === "task" ? "feladat" : newCardType === "joker" ? "joker" : "szerencse"} kártya
                 </div>
                 <div className="text-[color:var(--color-text-muted)] text-sm">
                   Szerkesztés folyamatban...
@@ -129,29 +152,33 @@ export default function CardsList({
         {cards.map((card, index) => {
           const cardIcon = cardTypeIcons[card.type] || cardTypeIcons.task
           const isSelected = selectedCard?.id === card.id
-          
+
           return (
             <div
               key={card.id}
               onClick={() => onSelectCard(card)}
               className={`
                 p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group
-                ${isSelected 
-                  ? 'bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg' 
-                  : 'bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80'
+                ${
+                  isSelected
+                    ? "bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg"
+                    : "bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80"
                 }
               `}
             >
               {/* Card Header */}
               <div className="flex items-start justify-between gap-2 mb-3">
                 <div className="flex items-center gap-3 flex-1 min-w-0">
-                  <div className="flex items-center justify-center w-10 h-10 rounded-full border-2" style={{ borderColor: cardIcon.color }}>
+                  <div
+                    className="flex items-center justify-center w-10 h-10 rounded-full border-2"
+                    style={{ borderColor: cardIcon.color }}
+                  >
                     {React.createElement(cardIcon.icon, {
                       style: { color: cardIcon.color },
                       className: "text-lg"
                     })}
                   </div>
-                  
+
                   <div className="flex-1 min-w-0">
                     <div className="text-[color:var(--color-text)] font-bold text-sm mb-1">
                       #{index + 1} - {getCardTypeLabel(card)}
@@ -169,7 +196,7 @@ export default function CardsList({
                   <button
                     onClick={(e) => {
                       e.stopPropagation()
-                      onDeleteCard(card.id)
+                      setConfirmingDelete(card.id)
                     }}
                     className="p-1.5 rounded-lg bg-[color:var(--color-error)]/10 hover:bg-[color:var(--color-error)]/20 text-[color:var(--color-error)] transition-colors duration-200"
                   >
@@ -180,13 +207,13 @@ export default function CardsList({
 
               {/* Card Content Preview */}
               <div className="bg-[color:var(--color-surface)]/30 rounded-lg p-3 mb-2">
-                <div 
+                <div
                   className="text-[color:var(--color-text)] text-sm leading-relaxed"
                   style={{
-                    display: '-webkit-box',
+                    display: "-webkit-box",
                     WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical',
-                    overflow: 'hidden'
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
                   }}
                 >
                   {getCardPreview(card)}
@@ -209,22 +236,50 @@ export default function CardsList({
         )}
       </div>
 
+      {/* Confirm Delete Popup */}
+      {confirmingDelete && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-xl p-6 w-80 text-center animate-fadeIn">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">
+              Biztosan törölni szeretnéd?
+            </h3>
+            <p className="text-sm text-gray-600 mb-6">
+              Ez a művelet nem visszavonható.
+            </p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={handleConfirmDelete}
+                className="bg-[color:var(--color-error)] text-white px-4 py-2 rounded-lg hover:bg-red-600 transition"
+              >
+                Igen
+              </button>
+              <button
+                onClick={handleCancelDelete}
+                className="bg-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 transition"
+              >
+                Mégse
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Footer Stats */}
       <div className="p-4 border-t border-[color:var(--color-surface-selected)] bg-[color:var(--color-background)]/30">
         <div className="text-center">
           <div className="text-[color:var(--color-text)] font-semibold">
             📊 Összesen: {cards.length} kártya
           </div>
-          
+
           {cards.length > 0 && (
             <div className="flex justify-center gap-4 mt-2 text-xs text-[color:var(--color-text-muted)]">
-              <span>📋 {cards.filter(c => c.type === 'task').length}</span>
-              <span>🃏 {cards.filter(c => c.type === 'joker').length}</span>
-              <span>🎲 {cards.filter(c => c.type === 'luck').length}</span>
+              <span>📋 {cards.filter((c) => c.type === "task").length}</span>
+              <span>🃏 {cards.filter((c) => c.type === "joker").length}</span>
+              <span>🎲 {cards.filter((c) => c.type === "luck").length}</span>
             </div>
           )}
         </div>
       </div>
     </div>
   )
-}
+}

SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx

@@ -63,7 +63,7 @@ const sortOptions = [
 
 const DeckManager = () => {
   const navigate = useNavigate()
-  
+
   const [selectedType, setSelectedType] = useState("All")
   const [selectedOrigin, setSelectedOrigin] = useState("Mind")
   const [sortBy, setSortBy] = useState("date-desc")
@@ -125,9 +125,9 @@ const DeckManager = () => {
 
   return (
     <div className="w-full flex flex-col bg-[color:var(--color-background)]">
-      <div className="w-full max-w-6xl mx-auto px-4 py-10">
+      <div className="w-full max-w-[1200px] mx-auto px-4 py-10">
         {/* Filters */}
-        <div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
+        <div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
           <div className="flex gap-2 items-center w-full md:w-auto">
             <SearchBox
               value={search}
@@ -266,8 +266,8 @@ const DeckManager = () => {
         {/* Decks Grid */}
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
           {/* Create New Deck (Mockup) */}
-          <div 
-            onClick={() => navigate('/deck-creator')}
+          <div
+            onClick={() => navigate("/deck-creator")}
             className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
           >
             <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
@@ -318,14 +318,9 @@ const DeckManager = () => {
           })}
         </div>
       </div>
-      
+
       {/* Deck Info Popup */}
-      {selectedDeck && (
-        <DeckInfoPopUp 
-          deck={selectedDeck} 
-          onClose={() => setSelectedDeck(null)} 
-        />
-      )}
+      {selectedDeck && <DeckInfoPopUp deck={selectedDeck} onClose={() => setSelectedDeck(null)} />}
     </div>
   )
 }

SerpentRace_Frontend/src/components/Footer/Footer.jsx

@@ -34,13 +34,13 @@ const Footer = () => {
   return (
     <footer
       ref={footerRef}
-      className="relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8"
+      className="relative bg-zinc-900 text-zinc-400 border-t-2 border-zinc-800 mt-auto py-8"
       style={{ transformOrigin: "bottom center" }}
     >
       <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">
-          <a href="/" className="hover:scale-105 hover:brightness-125">
+          <a href="/" className="hover:scale-105 hover:brightness-110">
             <Logo size={100} />
           </a>
           <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
@@ -48,30 +48,30 @@ const Footer = () => {
 
         {/* Oldalak */}
         <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">
+          <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
             Oldalak
           </span>
-          <a href="/" className="hover:underline hover:text-green-400">
+          <a href="/" className="hover:underline hover:text-green-500">
             Főoldal
           </a>
-          <a href="/about" className="hover:underline hover:text-green-400">
+          <a href="/about" className="hover:underline hover:text-green-500">
             Rólunk
           </a>
-          <a href="/contact" className="hover:underline hover:text-green-400">
+          <a href="/contact" className="hover:underline hover:text-green-500">
             Kapcsolat
           </a>
         </div>
 
         {/* Közösség */}
         <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">
+          <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
             Közösség
           </span>
           <a
             href="https://discord.gg/"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:underline hover:text-green-400"
+            className="hover:underline hover:text-green-500"
           >
             Discord
           </a>
@@ -79,7 +79,7 @@ const Footer = () => {
             href="https://github.com/"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:underline hover:text-green-400"
+            className="hover:underline hover:text-green-500"
           >
             GitHub
           </a>
@@ -87,11 +87,11 @@ const Footer = () => {
 
         {/* Elérhetőség */}
         <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">
+          <span className="text-lg font-semibold text-green-600 underline underline-offset-4 mb-2 drop-shadow-sm">
             Elérhetőség
           </span>
-          <span className="opacity-80">Email: info@serpentrace.hu</span>
-          <span className="opacity-80">Telefon: +36 30 123 4567</span>
+          <span className="opacity-85">Email: info@serpentrace.hu</span>
+          <span className="opacity-85">Telefon: +36 30 123 4567</span>
         </div>
       </div>
 

SerpentRace_Frontend/src/components/Inputs/InputBoxDark.jsx

@@ -7,7 +7,7 @@ export default function InputBox({ type, placeholder, value, onChange, width })
   return (
     <input
       type={type}
-      className={`${widthClass} py-3 px-4 border border-battleship-gray rounded-lg focus:border-mint focus:outline-none text-text placeholder-text-muted bg-background font-semibold text-lg`}
+      className={`${widthClass} py-3 px-4 border border-battleship-gray rounded-lg focus:border-mint-lighter focus:outline-none text-text placeholder-text-muted bg-background font-semibold text-lg`}
       placeholder={placeholder}
       value={value}
       onChange={onChange}

SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx

@@ -5,8 +5,13 @@ import logoImg from "../../assets/pictures/Logo.png"
 import ButtonGreen from "../Buttons/ButtonGreen.jsx"
 import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
 import { motion } from "framer-motion"
+import { isAuthenticated } from "../../hooks/useRequireAuth" // <-- added import
+import { useNavigate } from "react-router-dom" // <-- NEW
+
+const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame }) => {
+  const auth = isAuthenticated() // <-- check without redirect
+  const navigate = useNavigate() // <-- NEW
 
-const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
   return (
     <div className="w-full">
       {/* Hero Section */}
@@ -55,8 +60,16 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7, delay: 1 }}
           >
-            <ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" />
-            <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
+            {/* If not authenticated show Login/Register; if authenticated show Home button */}
+            {!auth ? (
+              <>
+                <ButtonGreen text="Bejelentkezés" onClick={onNavigateToPlay} width="w-60" />
+                <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
+                <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" /> 
+              </>
+            ) : (
+              <ButtonGreen text="Játék" onClick={() => navigate("/home")} width="w-60" />
+            )}
           </motion.div>
         </div>
       </motion.section>

SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx

@@ -4,9 +4,14 @@ import logoImg from "../../assets/pictures/Logo.png" // <-- EZT ADD HOZZÁ
 import ButtonDark from "../Buttons/ButtonDark.jsx"
 import InputBoxDark from "../Inputs/InputBoxDark.jsx"
 
-const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
+const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
   const [joinCode, setJoinCode] = useState("")
   const [error, setError] = useState("")
+  const [guestName, setGuestName] = useState("")
+  const [guestError, setGuestError] = useState("")
+
+  // gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
+  const username = user?.name ?? null
 
   const handleJoin = () => {
     if (!joinCode.trim()) {
@@ -21,9 +26,19 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
     onCreateGame()
   }
 
+  // egyszerű segéd a kezdobetűk kinyerésére
+  const initials = username
+    ? username
+        .split(" ")
+        .map((s) => s[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase()
+    : ""
+
   return (
     <section
-      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl min-h-[60vh] overflow-hidden"
+      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl overflow-hidden"
       style={{
         background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
       }}
@@ -32,10 +47,10 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
       <div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
         <LogoCard
           imageSrc={logoImg}
-          containerHeight="450px"
-          containerWidth="450px"
-          imageHeight="450px"
-          imageWidth="450px"
+          containerHeight="420px"
+          containerWidth="420px"
+          imageHeight="420px"
+          imageWidth="420px"
           rotateAmplitude={7}
           scaleOnHover={1.03}
           showMobileWarning={false}
@@ -43,12 +58,49 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
           displayOverlayContent={false}
         />
       </div>
+
       {/* Jobb oldali panel */}
-      <div className="flex-1 w-full flex flex-col items-center justify-center px-4 md:px-12 py-10">
-        <div className="w-full max-w-md rounded-2xl p-8 flex flex-col gap-8">
+      <div className="flex-1 w-full flex items-center justify-center px-6 md:px-12 py-8">
+        <div
+          className="w-full max-w-md rounded-2xl p-6 md:p-8 flex flex-col gap-6"
+          style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
+        >
+          <div className="flex items-center justify-between">
+            {username ? (
+              <div className="flex items-center gap-3">
+                <div
+                  className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
+                  style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
+                >
+                  {initials}
+                </div>
+                <div className="text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
+                  <span className="font-medium" style={{ color: "var(--color-text, #fff)" }}>
+                    {username}
+                  </span>
+                </div>
+              </div>
+            ) : (
+              <div className="w-full">
+                <div className="font-semibold mb-3 text-text">Nincs bejelentkezve — játssz vendégként:</div>
+                <InputBoxDark
+                  type="text"
+                  placeholder="Nickname..."
+                  value={guestName}
+                  onChange={(e) => {
+                    setGuestName(e.target.value)
+                    setGuestError("")
+                  }}
+                  width="w-full"
+                />
+                {guestError && <div className="text-xs mt-2 text-error">{guestError}</div>}
+              </div>
+            )}
+          </div>
+
           <div>
-            <h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
-            <div className={`${error ? "border border-error rounded-lg" : ""}`}>
+            <h2 className="font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
+            <div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
               <InputBoxDark
                 type="text"
                 placeholder="Játék kódja"
@@ -57,17 +109,21 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
                 width="w-full"
               />
             </div>
-            {error && <div className="text-xs mt-1 text-error">{error}</div>}
+            {error && <div className="text-xs mt-2 text-error">{error}</div>}
             <div className="mt-4">
               <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
             </div>
           </div>
-          {user && (
-            <div>
-              <h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
-              <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
+          {username ? (
+            <div className="border-t border-white/10 pt-4">
+              {username && (
+                <div>
+                  <h3 className="font-semibold mb-3 text-text">Új játék létrehozása</h3>
+                  <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
+                </div>
+              )}
             </div>
-          )}
+          ) : null}
         </div>
       </div>
     </section>

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -1,42 +1,84 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
-import About from "../../pages/About/About"
-import Home from "../../pages/Landing/Home"
+import { Link, useNavigate } from "react-router-dom"
 
 const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
+const navLinkClassPlay =
+  "px-4 py-2 rounded-lg text-white bg-white/12 hover:bg-white/20 transition-all duration-200"
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false)
+  const navigate = useNavigate()
+  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
+
+  const handleLogout = () => {
+    localStorage.removeItem("authLevel")
+    localStorage.removeItem("username")
+    navigate("/")
+  }
 
   return (
-  
     <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between h-16 items-center">
           {/* Logo */}
           <div className="flex-shrink-0 flex items-center gap-2">
-            <a href="/" className="flex items-center mt-1 h-9">
+            <Link to="/" className="flex items-center mt-1 h-9">
               <Logo size={36} />
-            </a>
-            <a href="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
+            </Link>
+            <Link to="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
               SerpentRace
-            </a>
+            </Link>
           </div>
+
           {/* Desktop Menu */}
-          <div className="hidden md:flex space-x-8">
-            <a href="/home" className={navLinkClass}>
-              Home
-            </a>
-            <a href="/report" className={navLinkClass}>
-              Stats
-            </a>
-            <a href="/about" className={navLinkClass}>
-              About
-            </a>
-            <a href="/companies" className={navLinkClass}>
-              Contact
-            </a>
+          <div className="hidden md:flex space-x-8 items-center">
+            {isLoggedIn ? (
+              <>
+                <Link to="/home" className={navLinkClass}>Játék</Link>
+                <Link to="/decks" className={navLinkClass}>Paklik</Link>
+                <Link to="/report" className={navLinkClass}>Statisztikák</Link>
+              </>
+            ) : (
+              <Link to="/" className={navLinkClass}>Főoldal</Link>
+            )}
+            <Link to="/about" className={navLinkClass}>Rólunk</Link>
+            <Link to="/companies" className={navLinkClass}>Kontakt</Link>
+            {!isLoggedIn && (
+              <>
+                <Link to="/home" className={navLinkClassPlay}>Játék</Link>
+                <Link
+                  to="/login"
+                  className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
+                >
+                  Bejelentkezés / Regisztráció
+                </Link>
+              </>
+            )}
+            {isLoggedIn && (
+              <button
+                onClick={handleLogout}
+                className="ml-4 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
+                title="Kijelentkezés"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
+                  />
+                </svg>
+              </button>
+            )}
           </div>
+
           {/* Mobile Hamburger */}
           <div className="md:hidden flex items-center">
             <button
@@ -52,12 +94,7 @@ const Navbar = () => {
                 xmlns="http://www.w3.org/2000/svg"
               >
                 {menuOpen ? (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 ) : (
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
                 )}
@@ -66,21 +103,63 @@ const Navbar = () => {
           </div>
         </div>
       </div>
+
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <a href="#" className={navLinkClass}>
-            Home
-          </a>
-          <a href="#" className={navLinkClass}>
-            Leaderboard
-          </a>
-          <a href="#" className={navLinkClass}>
-            About
-          </a>
-          <a href="#" className={navLinkClass}>
-            Contact
-          </a>
+          {isLoggedIn ? (
+            <Link to="/home" className={navLinkClass}>Home</Link>
+          ) : (
+            <Link to="/" className={navLinkClass}>Főoldal</Link>
+          )}
+          <Link to="/leaderboard" className={navLinkClass}>Leaderboard</Link>
+          <Link to="/about" className={navLinkClass}>Rólunk</Link>
+          <Link to="/companies" className={navLinkClass}>Kontakt</Link>
+          {!isLoggedIn && (
+            <>
+              <div className="px-2">
+                <button
+                  onClick={() => {
+                    setMenuOpen(false)
+                    navigate("/")
+                  }}
+                  className="w-full text-left px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-all"
+                >
+                  Játék
+                </button>
+              </div>
+              <Link
+                to="/login"
+                className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
+              >
+                Bejelentkezés / Regisztráció
+              </Link>
+            </>
+          )}
+          {isLoggedIn && (
+            <div className="flex justify-end px-2 pb-2">
+              <button
+                onClick={handleLogout}
+                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
+                title="Kijelentkezés"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
+                  />
+                </svg>
+              </button>
+            </div>
+          )}
         </div>
       )}
     </nav>

SerpentRace_Frontend/src/components/Toastify/toastifyServices.jsx

@@ -0,0 +1,165 @@
+import { toast, ToastContainer, Bounce } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+/**
+ * 🔧 Ezt csak egyszer kell betenni az App.jsx-be!
+ * <ToastConfig /> = az a komponens, ami kirendereli a toastokat
+ */
+export const ToastConfig = () => (
+  <ToastContainer
+    position="bottom-right"
+    autoClose={5000}
+    hideProgressBar={false}
+    newestOnTop={false}
+    closeOnClick={false}
+    rtl={false}
+    pauseOnFocusLoss
+    draggable
+    pauseOnHover
+    theme="light"
+    transition={Bounce}
+  />
+);
+
+/**
+ * 🦄 Alapértelmezett toast üzenet (semleges)
+ * notify("Üzenet szövege")
+ */
+export const notify = (message) => {
+  toast(message, {
+    position: "bottom-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: false,
+    pauseOnHover: true,
+    draggable: true,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+/**
+ * ✅ Sikeres művelethez
+ * notifySuccess("Sikeres mentés!")
+ */
+export const notifySuccess = (message) => {
+  toast.success(message, {
+    position: "bottom-right",
+    autoClose: 4000,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+/**
+ * ❌ Hibás művelethez
+ * notifyError("Hiba történt a mentés során!")
+ */
+export const notifyError = (message) => {
+  toast.error(message, {
+    position: "bottom-right",
+    autoClose: 5000,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+/**
+ * ℹ️ Információs üzenethez
+ * notifyInfo("Friss adatok betöltve!")
+ */
+export const notifyInfo = (message) => {
+  toast.info(message, {
+    position: "bottom-right",
+    autoClose: 4000,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+/**
+ * ⚠️ Figyelmeztetéshez
+ * notifyWarning("Figyelem! Nem mentett módosítások vannak!")
+ */
+export const notifyWarning = (message) => {
+  toast.warn(message, {
+    position: "bottom-right",
+    autoClose: 4000,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+
+
+
+
+// import React, { useState } from "react";
+// import { notifyWarning } from "../../components/Toastify/toastifyServices";
+
+// function AuthLogin() {
+//   const [email, setEmail] = useState("");
+//   const [password, setPassword] = useState("");
+
+//   const handleLogin = async (e) => {
+//     e.preventDefault();
+
+//     // Példa jelszó ellenőrzés logikára:
+//     if (password !== "titkosjelszo123") {
+//       notifyWarning("⚠️ Hibás jelszó! Kérlek próbáld újra.");
+//       return;
+//     }
+
+//     // Ha jó a jelszó:
+//     notifySuccess("✅ Sikeres bejelentkezés!");
+//   };
+
+//   return (
+//     <form onSubmit={handleLogin} className="login-form">
+//       <input
+//         type="email"
+//         placeholder="Email cím"
+//         value={email}
+//         onChange={(e) => setEmail(e.target.value)}
+//       />
+//       <input
+//         type="password"
+//         placeholder="Jelszó"
+//         value={password}
+//         onChange={(e) => setPassword(e.target.value)}
+//       />
+//       <button type="submit">Bejelentkezés</button>
+//     </form>
+//   );
+// }
+
+// export default AuthLogin;
+
+
+
+// meghivas
+// import { toast } from "react-toastify";
+
+// // 🔔 Alap toast
+// export const notify = (msg) => toast(msg);
+
+// // ✅ Sikeres üzenet
+// export const notifySuccess = (msg) => toast.success(msg);
+
+// // ⚠️ Figyelmeztetés
+// export const notifyWarning = (msg) => toast.warning(msg);
+
+// // ❌ Hiba
+// export const notifyError = (msg) => toast.error(msg);
+
+// // ℹ️ Információ
+// export const notifyInfo = (msg) => toast.info(msg);
+
+
+
+// hasznalat
+// import { notifyWarning } from "../../components/Toastify/toastifyServices";
+
+// if (password !== "titkos") {
+//   notifyWarning("⚠️ Hibás jelszó!");
+// }

SerpentRace_Frontend/src/hooks/useRequireAuth.jsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+
+export function requireAuthSync({ key = "username", redirectTo = "/login", replace = true } = {}) {
+  const value = localStorage.getItem(key)
+  if (!value) {
+    if (replace) window.location.replace(redirectTo)
+    else window.location.assign(redirectTo)
+    return false
+  }
+  return true
+}
+
+// New: non-redirecting check for auth status
+export function isAuthenticated(key = "username") {
+  try {
+    return !!localStorage.getItem(key)
+  } catch {
+    return false
+  }
+}
+
+// Default hook: ad vissza egy [value, setValue] párt, szinkronizálja localStorage-t és opcionálisan átirányít, ha nincs érték
+export default function useRequireAuth({ key = "username", redirectTo = "/login", redirect = true } = {}) {
+  const navigate = useNavigate()
+  const [value, setValue] = useState(() => {
+    try {
+      return localStorage.getItem(key)
+    } catch {
+      return null
+    }
+  })
+
+  // Ha nincs érték és redirect engedélyezve van, átirányítjuk (komponens mount-oláskor)
+  useEffect(() => {
+    if (!value && redirect) {
+      navigate(redirectTo)
+    }
+  }, [navigate, value, redirectTo, redirect])
+
+  // Szinkronizáljuk a localStorage-t amikor a state változik
+  useEffect(() => {
+    try {
+      if (value == null) localStorage.removeItem(key)
+      else localStorage.setItem(key, value)
+    } catch {
+      // fail silently
+    }
+  }, [key, value])
+
+  return [value, setValue]
+}

SerpentRace_Frontend/src/index.css

@@ -8,9 +8,13 @@
   --color-eerie-black: #181d23;
 
   --color-mint: #15803d;
+
   --color-mint-dark: #136636;
   --color-mint-darker: #11522b;
 
+  --color-mint-light: #16a34a;
+  --color-mint-lighter: #22c55e;
+
   /* Gombok */
   --color-button-primary: #16a34a;
   --color-button-primary-hover: #15803d;

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -1,12 +1,11 @@
 // src/pages/Auth/LoginForm.jsx
-// Bejelentkezési űrlap
-
 import InputBox from "../../components/Inputs/InputBox"
 import Button from "../../components/Buttons/Button"
 import { motion } from "framer-motion"
 import { useState, useEffect } from "react"
 import { useLocation, useNavigate } from "react-router-dom"
 import { login } from "../../api/userApi"
+import { FaArrowLeft } from "react-icons/fa"
 
 export default function LoginForm() {
   const [email, setEmail] = useState("")
@@ -32,23 +31,23 @@ export default function LoginForm() {
     e.preventDefault()
     setError("")
     setShowErrorPopup(false)
+
     if (!email || !password) {
       setError("Minden mező kitöltése kötelező.")
       setShowErrorPopup(true)
       setTimeout(() => setShowErrorPopup(false), 2000)
       return
     }
+
     if (!validateEmail(email)) {
       setError("Hibás email formátum.")
       setShowErrorPopup(true)
       setTimeout(() => setShowErrorPopup(false), 2000)
       return
     }
-    // Backend API
+
     login(email, password)
       .then((response) => {
-        console.log(response)
-        // Csak a response.status-t ellenőrizd!
         if (response && response.status === 200) {
           if (response.data && response.data.user) {
             localStorage.setItem("username", response.data.user.username)
@@ -61,7 +60,7 @@ export default function LoginForm() {
           setTimeout(() => setShowErrorPopup(false), 2000)
         }
       })
-      .catch((error) => {
+      .catch(() => {
         setError("Hibás bejelentkezési adatok.")
         setShowErrorPopup(true)
         setTimeout(() => setShowErrorPopup(false), 2000)
@@ -75,18 +74,35 @@ export default function LoginForm() {
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.25 }}
+      className="relative flex flex-col items-center"
     >
-      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Bejelentkezés</h2>
+      {/* 🔙 Vissza nyíl gomb — most pontosan a fehér box bal felső sarkában */}
+      <div
+        className="absolute -top-6 -left-6 flex items-center group cursor-pointer select-none"
+        onClick={() => navigate("/")}
+      >
+        <FaArrowLeft className="text-gray-700 text-xl transition-transform duration-300 group-hover:-translate-x-1" />
+        <span className="ml-2 text-gray-700 font-medium opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
+          Vissza a főoldalra
+        </span>
+      </div>
+
+      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">
+        Bejelentkezés
+      </h2>
+
       {showSuccess && (
         <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
           Sikeres regisztráció! Az email ellenőrzése után be tudsz lépni.
         </div>
       )}
+
       {showErrorPopup && error && (
         <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
           {error}
         </div>
       )}
+
       <form onSubmit={handleSubmit} className="space-y-6">
         <InputBox
           type="email"

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -1,12 +1,12 @@
 // src/pages/Auth/RegisterForm.jsx
-// Regisztrációs űrlap
-
 import InputBox from "../../components/Inputs/InputBox"
 import Button from "../../components/Buttons/Button"
 import { motion } from "framer-motion"
 import { useState } from "react"
 import { register } from "../../api/userApi"
-import { useNavigate } from "react-router-dom"
+import { useNavigate, useLocation } from "react-router-dom"
+import { ToastConfig } from "../../components/Toastify/toastifyServices"
+import { FaArrowLeft } from "react-icons/fa"
 
 export default function RegisterForm() {
   const [lastname, setLastname] = useState("")
@@ -19,6 +19,7 @@ export default function RegisterForm() {
   const [error, setError] = useState("")
   const [showErrorPopup, setShowErrorPopup] = useState(false)
   const navigate = useNavigate()
+  const location = useLocation()
 
   function validateEmail(email) {
     return /\S+@\S+\.\S+/.test(email)
@@ -45,28 +46,26 @@ export default function RegisterForm() {
       setError("A jelszavak nem egyeznek.")
       return
     }
-    // Backend API
+
     try {
       const response = await register(username, email, password, firstname, lastname, phone)
-      // Check for 201 Created status
       if (response && response.status === 201) {
-        navigate("/login", { state: { success: true } })
+        ToastConfig("✅ Sikeres regisztráció!")
+        if (location.pathname === "/login") {
+          navigate("/login", { state: { success: true } })
+          window.location.reload()
+        } else {
+          navigate("/login", { state: { success: true } })
+        }
       } else {
         let msg = "Sikertelen regisztráció."
-        if (response && response.data && response.data.error) {
-          msg = response.data.error
-        }
+        if (response?.data?.error) msg = response.data.error
         setError(msg)
         setShowErrorPopup(true)
         setTimeout(() => setShowErrorPopup(false), 2000)
       }
     } catch (err) {
-      let msg = "Ismeretlen hiba történt."
-      if (err.response && err.response.data && err.response.data.error) {
-        msg = err.response.data.error
-      } else if (err.message) {
-        msg = err.message
-      }
+      let msg = err?.response?.data?.error || err.message || "Ismeretlen hiba történt."
       setError(msg)
       setShowErrorPopup(true)
       setTimeout(() => setShowErrorPopup(false), 2000)
@@ -80,56 +79,37 @@ export default function RegisterForm() {
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.25 }}
+      className="relative flex flex-col items-center"
     >
-      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Regisztráció</h2>
+      {/* 🔙 Vissza nyíl gomb – ugyanott, mint a login oldalon */}
+      <div
+        className="absolute -top-2 -left-1 flex items-center group cursor-pointer select-none"
+        onClick={() => navigate("/")}
+      >
+        <FaArrowLeft className="text-gray-700 text-xl transition-transform duration-300 group-hover:-translate-x-1" />
+        <span className="ml-2 text-gray-700 font-medium opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
+          Vissza a főoldalra
+        </span>
+      </div>
+
+      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">
+        Regisztráció
+      </h2>
+
       {showErrorPopup && error && (
         <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
           {error}
         </div>
       )}
+
       <form onSubmit={handleSubmit} className="space-y-6">
-        <InputBox
-          type="text"
-          placeholder="Vezetéknév"
-          value={lastname}
-          onChange={(e) => setLastname(e.target.value)}
-        />
-        <InputBox
-          type="text"
-          placeholder="Keresztnév"
-          value={firstname}
-          onChange={(e) => setFirstname(e.target.value)}
-        />
-        <InputBox
-          type="text"
-          placeholder="Felhasználónév"
-          value={username}
-          onChange={(e) => setUsername(e.target.value)}
-        />
-        <InputBox
-          type="email"
-          placeholder="Email cím"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <InputBox
-          type="phone"
-          placeholder="Telefonszám"
-          value={phone}
-          onChange={(e) => setPhone(e.target.value)}
-        />
-        <InputBox
-          type="password"
-          placeholder="Jelszó"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-        />
-        <InputBox
-          type="password"
-          placeholder="Jelszó megerősítése"
-          value={confirmPassword}
-          onChange={(e) => setConfirmPassword(e.target.value)}
-        />
+        <InputBox type="text" placeholder="Vezetéknév" value={lastname} onChange={(e) => setLastname(e.target.value)} />
+        <InputBox type="text" placeholder="Keresztnév" value={firstname} onChange={(e) => setFirstname(e.target.value)} />
+        <InputBox type="text" placeholder="Felhasználónév" value={username} onChange={(e) => setUsername(e.target.value)} />
+        <InputBox type="email" placeholder="Email cím" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <InputBox type="phone" placeholder="Telefonszám" value={phone} onChange={(e) => setPhone(e.target.value)} />
+        <InputBox type="password" placeholder="Jelszó" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <InputBox type="password" placeholder="Jelszó megerősítése" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
         <Button text="Regisztráció" type="submit" />
       </form>
     </motion.div>

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -8,6 +8,7 @@ import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
 import CardsList from "../../components/DeckCreator/CardsList.jsx"
 import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
 import { createDeck } from '../../api/deckApi'
+import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
 
 export default function DeckCreator() {
   const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
@@ -31,10 +32,8 @@ export default function DeckCreator() {
   // Betöltés (később API-ból)
   useEffect(() => {
     if (deckId) {
-      // TODO: Betöltés API-ból
       loadDeck(deckId)
     } else {
-      // Új deck
       setDeck({
         id: null,
         name: "Új Deck",
@@ -98,19 +97,25 @@ export default function DeckCreator() {
       }
 
       const saved = await createDeck(payload)
-      setDeck(prev => ({ ...prev, id: saved.id ?? prev.id, creationdate: saved.creationdate ?? prev.creationdate, updatedate: saved.updatedate ?? prev.updatedate }))
+      setDeck(prev => ({
+        ...prev,
+        id: saved.id ?? prev.id,
+        creationdate: saved.creationdate ?? prev.creationdate,
+        updatedate: saved.updatedate ?? prev.updatedate
+      }))
+
       console.log('Deck saved (backend):', saved)
-      alert('✅ Deck sikeresen mentve!')
+      notifySuccess('Deck sikeresen mentve!')
     } catch (error) {
       console.error('Mentési hiba:', error)
-      alert('❌ Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error)))
+      notifyError('Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error)))
     }
   }
 
+  // 🔧 Itt korábban volt confirm(), de most eltávolítottuk
   const handleBack = () => {
-    if (confirm("Biztosan visszamész? A nem mentett változtatások elvesznek.")) {
-      navigate("/decks")
-    }
+    // Egyszerű visszalépés — ha akarsz, később adhatunk hozzá saját modalt
+    navigate("/decks")
   }
 
   const handleCreateCard = (cardType) => {
@@ -143,7 +148,7 @@ export default function DeckCreator() {
       // Meglévő kártya frissítése
       setDeck(prev => ({
         ...prev,
-        cards: prev.cards.map(card => 
+        cards: prev.cards.map(card =>
           card.id === cardData.id ? cardData : card
         )
       }))
@@ -151,26 +156,25 @@ export default function DeckCreator() {
     }
   }
 
+  // 🔧 Itt is confirm() volt — most a CardsList popupja kezeli a megerősítést
   const handleDeleteCard = (cardId) => {
-    if (confirm("Biztosan törlöd ezt a kártyát?")) {
-      setDeck(prev => ({
-        ...prev,
-        cards: prev.cards.filter(card => card.id !== cardId)
-      }))
-      
-      if (selectedCard?.id === cardId) {
-        setSelectedCard(null)
-      }
+    setDeck(prev => ({
+      ...prev,
+      cards: prev.cards.filter(card => card.id !== cardId)
+    }))
+
+    if (selectedCard?.id === cardId) {
+      setSelectedCard(null)
     }
   }
 
   return (
     <div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
       <Navbar />
-      
+
       <main className="flex-1 flex flex-col">
         {/* Deck Header */}
-        <DeckHeader 
+        <DeckHeader
           deck={deck}
           onUpdate={handleDeckUpdate}
           onSave={handleSaveDeck}
@@ -210,4 +214,4 @@ export default function DeckCreator() {
       </main>
     </div>
   )
-}
+}

SerpentRace_Frontend/src/pages/Decks/DeckManagerPage.jsx

@@ -1,7 +1,7 @@
 // src/pages/Decks/DeckManagerPage.jsx
 // Deck Management Page (with Navbar, no Footer)
 
-import DeckManager from "../../components/Landingpage/DeckManager.jsx"
+import DeckManager from "../../components/DeckCreator/DeckManager.jsx"
 import Navbar from "../../components/Navbar/Navbar.jsx"
 
 export default function DeckManagerPage() {

SerpentRace_Frontend/src/pages/Game/GameScreen.jsx

@@ -66,12 +66,17 @@ const GameScreen = () => {
     { id: 3, name: "Fürtös", position: 68, score: 14, color: "bg-yellow-600", emoji: "😂" },
   ])
 
+  // New: selected dice value from dropdown (null = none)
+  const [selectedDice, setSelectedDice] = useState(null)
+
   // Sort players by position in descending order
   const sortedPlayers = [...players].sort((a, b) => b.position - a.position)
 
-  // Handle dice roll
+  // Handle dice roll completion
   const handleDiceRoll = (value) => {
     console.log("Rolled:", value)
+    // reset dropdown selection after roll
+    setSelectedDice(null)
     // You can add logic here to move the current player based on the dice value
   }
 
@@ -118,9 +123,6 @@ const GameScreen = () => {
             {/* Háttér */}
             <div className="absolute w-full h-full opacity-10 pointer-events-none overflow-hidden">
               {[...Array(35)].map((_, i) => (
-                // Sajat pulse effect! => node_modules/tailwindcss/index.css:
-                // --animate-pulse8: pulse 6s cubic-bezier(0.4, 0.2, 0.6, 1) infinite;
-
                 <div
                   key={i}
                   className="absolute rounded-full bg-teal-600 animate-pulse8"
@@ -187,7 +189,7 @@ const GameScreen = () => {
               {sortedPlayers.map((player, index) => (
                 <div
                   key={player.id}
-                  className="flex items-center mb-3 p-2 bg-gray-900 rounded-lg hover:bg-gray-800 transition-colors"
+                  className="flex items-center mb-3 p-2 bg-gray-900 rounded-lg hover:bg-gray-700 transition-colors"
                 >
                   <div
                     className={`w-8 h-8 ${player.color} rounded-full mr-3 flex items-center justify-center text-white text-sm font-bold shadow-md`}
@@ -222,8 +224,31 @@ const GameScreen = () => {
             {/* Dice Container */}
             <div className="bg-gray-800 rounded-xl p-4 shadow-lg border border-teal-700 text-center">
               <h2 className="text-xl font-semibold mb-3 text-teal-300">Dobókocka</h2>
-              <p className="text-gray-300 text-sm mb-4">Kattints a kockára dobáshoz!</p>
-              <Dice onRoll={handleDiceRoll} />
+              <p className="text-gray-300 text-sm mb-4">
+                Kattints a kockára dobáshoz vagy válassz egy számot az alábbiból!
+              </p>
+
+              {/* Dropdown to select number 1-6 (triggers animated roll to that number) */}
+              <div className="mb-3">
+                <select
+                  value={selectedDice ?? ""}
+                  onChange={(e) => {
+                    const v = e.target.value ? Number(e.target.value) : null
+                    setSelectedDice(v)
+                  }}
+                  className="bg-gray-900 text-gray-200 rounded-md p-2 border border-gray-700"
+                >
+                  <option value="">Válassz számot...</option>
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                  <option value="4">4</option>
+                  <option value="5">5</option>
+                  <option value="6">6</option>
+                </select>
+              </div>
+
+              <Dice onRoll={handleDiceRoll} selectedValue={selectedDice} />
             </div>
           </div>
         </div>

SerpentRace_Frontend/src/pages/Home/Home.jsx

@@ -1,46 +0,0 @@
-// src/pages/Home/Home.jsx
-// Régi PlayMenu-s oldal, "Home" néven
-
-import { useState, useEffect } 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 PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
-
-export default function Home() {
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    const username = localStorage.getItem("username")
-    const authLevel = localStorage.getItem("authLevel")
-    if (!username || !authLevel) {
-      navigate("/login")
-    }
-  }, [navigate])
-
-  // Dummy callbackok és user példa
-  const handleJoinGame = (code) => {
-    alert(`Csatlakozás játékhoz: ${code}`)
-  }
-  const handleCreateGame = () => {
-    alert("Új játék létrehozása")
-  }
-  const user = { name: localStorage.getItem("username") }
-
-  return (
-    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
-      <div className="fixed inset-0 -z-10 pointer-events-none">
-        <Background />
-      </div>
-      <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-[64px]">
-        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
-        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
-      </main>
-      <Footer />
-    </div>
-  )
-}

SerpentRace_Frontend/src/pages/Landing/Home.jsx

@@ -1,13 +1,17 @@
 // src/pages/Home/Home.jsx
 // Régi PlayMenu-s oldal, "Home" néven
 
-import { useState } from "react"
-import Navbar from "../../components/Navbar/Navbar.jsx"
+import { useEffect } from "react"
+import useRequireAuth from "../../hooks/useRequireAuth"
+import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
 
 export default function Home() {
+  // a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert
+  const [user, setUser] = useRequireAuth({ redirect: false }) // no redirect on unauthenticated visitors
+
   // Dummy callbackok és user példa
   const handleJoinGame = (code) => {
     alert(`Csatlakozás játékhoz: ${code}`)
@@ -15,7 +19,9 @@ export default function Home() {
   const handleCreateGame = () => {
     alert("Új játék létrehozása")
   }
-  const user = { name: "Teszt Elek" }
+  const userObj = { name: user }
+
+  // ha szükséges a user módosítása máshol: setUser("újnév") automatikusan menti localStorage-be
 
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -25,8 +31,13 @@ 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-[64px]">
-        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
+      <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] flex-col items-center justify-center">
+        <PlayMenu
+          onJoinGame={handleJoinGame}
+          onCreateGame={handleCreateGame}
+          user={userObj}
+          setUser={setUser}
+        />
         {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
       </main>
       <Footer />

SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx

@@ -19,6 +19,10 @@ export default function LandingPageMain() {
     navigate("/register");
   };
 
+  const handleNavigateToGame = () => {
+    navigate("/home"); 
+  };
+
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
       <div className="fixed inset-0 -z-10 pointer-events-none">
@@ -28,7 +32,7 @@ export default function LandingPageMain() {
         <Navbar />
       </div>
       <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <LandingPage onNavigateToPlay={handleNavigateToPlay} onNavigateToAuth={handleNavigateToAuth} />
+        <LandingPage onNavigateToPlay={handleNavigateToPlay} onNavigateToAuth={handleNavigateToAuth} onNavigateToGame={handleNavigateToGame} />
       </main>
       <Footer />
     </div>

SerpentRace_Frontend/src/pages/Lobby/Lobby.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from "react"
+import { useNavigate, useLocation } from "react-router-dom"
+import Navbar from "../../components/Navbar/Navbar"
+import Background from "../../assets/backgrounds/Background.jsx"
+import useRequireAuth from "../../hooks/useRequireAuth"
+
+const Lobby = () => {
+  const [visible, setVisible] = useState(false)
+  const sectionRef = useRef(null)
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  
+  const [user, setUser] = useRequireAuth()
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) setVisible(true)
+      },
+      { threshold: 0.3 }
+    )
+    if (sectionRef.current) observer.observe(sectionRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  const handleExit = () => {
+    if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
+      navigate("/home")
+    }
+  }
+
+  const getInitials = (name) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .slice(0, 2)
+      .toUpperCase()
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen overflow-y-auto relative">
+      <div className="fixed top-0 left-0 w-full h-full -z-10">
+        <Background />
+      </div>
+
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+
+      <main className="flex-grow text-white px-6 pt-16 mt-0 mb-20 flex items-center justify-center">
+        <section
+          ref={sectionRef}
+          className={`w-full max-w-3xl rounded-2xl p-8 md:p-10 transition-all duration-1000 ease-out backdrop-blur-md shadow-2xl ${
+            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+          }`}
+          style={{ background: "rgba(0,0,0,0.25)" }}
+        >
+          <h1 className="text-4xl md:text-5xl font-extrabold text-green-300 mb-4 text-center tracking-wide drop-shadow-lg">
+            {user} Lobby-ja
+          </h1>
+
+          <p className="text-lg text-zinc-300 mb-8 text-center">
+            Játékosok, akik csatlakoztak ehhez a szobához:
+          </p>
+
+          <div className="bg-zinc-800/90 rounded-xl shadow-lg p-6 mb-8">
+            <ul className="flex flex-col gap-4">
+              <li className="bg-zinc-700 py-3 px-4 rounded-xl text-green-400 font-semibold flex items-center gap-4 shadow hover:shadow-green-500/20 transition">
+                <div
+                  className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
+                  style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
+                >
+                  {getInitials(user)}
+                </div>
+                <span className="text-white text-lg">{user}</span>
+              </li>
+            </ul>
+          </div>
+
+          <div className="flex justify-center">
+            <button
+              onClick={handleExit}
+              className="bg-gradient-to-r from-green-700 to-green-500 hover:from-green-600 hover:to-green-400 text-white px-8 py-3 rounded-xl font-semibold shadow-lg hover:shadow-green-400/30 transition-transform transform hover:scale-105"
+            >
+              Kilépés
+            </button>
+          </div>
+        </section>
+      </main>
+    </div>
+  )
+}
+
+export default Lobby

SerpentRace_Frontend/src/pages/Report/Reports.jsx

@@ -4,8 +4,11 @@ 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"
+import useRequireAuth from "../../hooks/useRequireAuth.jsx"
 
 export default function Reports() {
+  const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
+
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
       {/* Háttér */}
@@ -24,9 +27,8 @@ export default function Reports() {
           {/* Fejléc */}
           <div className="text-center mb-8">
             <h2 className="text-3xl font-bold text-white">Játék Riportok</h2>
-            <p className="text-gray-300 mt-2">
-              Áttekintés a legutóbbi játékokról és statisztikákról
-            </p>
+            <p className="text-gray-300 mt-2">Áttekintés a legutóbbi játékokról és statisztikákról</p>
+            {username && <p className="text-sm text-gray-400 mt-1">Bejelentkezett: {username}</p>}
           </div>
 
           {/* Statisztikai kártyák */}

SerpentRace_Frontend/src/utils/dice/Dice.jsx

@@ -1,74 +1,103 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react"
+import { dotPositions } from "./diceDotPositions"
+
+const Dice = ({ onRoll, selectedValue }) => {
+  const [diceValue, setDiceValue] = useState(1)
+  const [isRolling, setIsRolling] = useState(false)
+  const animationRef = useRef(null)
+  const rollTimeoutRef = useRef(null)
 
-const Dice = ({ onRoll }) => {
-  const [diceValue, setDiceValue] = useState(1);
-  const [isRolling, setIsRolling] = useState(false);
-  const animationRef = useRef(null);
-  const rollTimeoutRef = useRef(null);
-  
   const diceFaces = [
-    [<div key="center" className="dice-dot"></div>],
-    [<div key="top-left" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>],
-    [<div key="top-left" className="dice-dot"></div>, <div key="center" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>],
-    [<div key="top-left" className="dice-dot"></div>, <div key="top-right" className="dice-dot"></div>, 
-     <div key="bottom-left" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>],
-    [<div key="top-left" className="dice-dot"></div>, <div key="top-right" className="dice-dot"></div>, 
-     <div key="center" className="dice-dot"></div>, 
-     <div key="bottom-left" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>],
-    [<div key="top-left" className="dice-dot"></div>, <div key="top-right" className="dice-dot"></div>,
-     <div key="middle-left" className="dice-dot"></div>, <div key="middle-right" className="dice-dot"></div>,
-     <div key="bottom-left" className="dice-dot"></div>, <div key="bottom-right" className="dice-dot"></div>]
-  ];
-  
+    [<div key="center" className="dice-dot" style={dotPositions.center}></div>],
+    [
+      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
+      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
+    ],
+    [
+      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
+      <div key="center" className="dice-dot" style={dotPositions.center}></div>,
+      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
+    ],
+    [
+      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
+      <div key="top-right" className="dice-dot" style={dotPositions.topRight}></div>,
+      <div key="bottom-left" className="dice-dot" style={dotPositions.bottomLeft}></div>,
+      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
+    ],
+    [
+      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
+      <div key="top-right" className="dice-dot" style={dotPositions.topRight}></div>,
+      <div key="center" className="dice-dot" style={dotPositions.center}></div>,
+      <div key="bottom-left" className="dice-dot" style={dotPositions.bottomLeft}></div>,
+      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
+    ],
+    [
+      <div key="top-left" className="dice-dot" style={dotPositions.topLeft}></div>,
+      <div key="top-right" className="dice-dot" style={dotPositions.topRight}></div>,
+      <div key="middle-left" className="dice-dot" style={dotPositions.middleLeft}></div>,
+      <div key="middle-right" className="dice-dot" style={dotPositions.middleRight}></div>,
+      <div key="bottom-left" className="dice-dot" style={dotPositions.bottomLeft}></div>,
+      <div key="bottom-right" className="dice-dot" style={dotPositions.bottomRight}></div>,
+    ],
+  ]
+
   useEffect(() => {
     return () => {
-      if (animationRef.current) cancelAnimationFrame(animationRef.current);
-      if (rollTimeoutRef.current) clearTimeout(rollTimeoutRef.current);
-    };
-  }, []);
-  
-  const rollDice = () => {
-    if (isRolling) return;
-    
-    setIsRolling(true);
-    
-    let duration = 0;
-    const rollInterval = 80; // ms between dice face changes
-    const maxDuration = 1500; // total animation time
-    
+      if (animationRef.current) cancelAnimationFrame(animationRef.current)
+      if (rollTimeoutRef.current) clearTimeout(rollTimeoutRef.current)
+    }
+  }, [])
+
+  // Helper that starts the rolling animation and finishes with targetValue if provided
+  const startRoll = (targetValue = null) => {
+    if (isRolling) return
+
+    setIsRolling(true)
+
+    let duration = 0
+    const rollInterval = 80 // ms between dice face changes
+    const maxDuration = 1500 // total animation time
+
     const rollAnimation = () => {
-      const randomValue = Math.floor(Math.random() * 6) + 1;
-      setDiceValue(randomValue);
-      
-      duration += rollInterval;
-      
+      const randomValue = Math.floor(Math.random() * 6) + 1
+      setDiceValue(randomValue)
+
+      duration += rollInterval
+
       if (duration < maxDuration) {
         // Speed effect: slow down towards the end
-        const nextInterval = rollInterval * (1 + (duration / maxDuration) * 2);
+        const nextInterval = rollInterval * (1 + (duration / maxDuration) * 2)
         rollTimeoutRef.current = setTimeout(() => {
-          animationRef.current = requestAnimationFrame(rollAnimation);
-        }, nextInterval);
+          animationRef.current = requestAnimationFrame(rollAnimation)
+        }, nextInterval)
       } else {
-        // Final roll
-        const finalValue = Math.floor(Math.random() * 6) + 1;
-        setDiceValue(finalValue);
-        setIsRolling(false);
-        
-        if (onRoll) onRoll(finalValue);
+        // Final roll (use targetValue if provided)
+        const finalValue = targetValue != null ? Number(targetValue) : Math.floor(Math.random() * 6) + 1
+        setDiceValue(finalValue)
+        setIsRolling(false)
+
+        if (onRoll) onRoll(finalValue)
       }
-    };
-    
-    animationRef.current = requestAnimationFrame(rollAnimation);
-  };
-  
+    }
+
+    animationRef.current = requestAnimationFrame(rollAnimation)
+  }
+
+  // Click to roll randomly
+  const rollDice = () => {
+    startRoll(null)
+  }
+
+  // If parent provides a selectedValue, animate to that value
+  useEffect(() => {
+    if (selectedValue != null) {
+      startRoll(Number(selectedValue))
+    }
+  }, [selectedValue])
+
   return (
-    <div 
-      className={`dice-container ${isRolling ? 'rolling' : ''}`} 
-      onClick={rollDice}
-    >
-      <div className="dice">
-        {diceFaces[diceValue - 1]}
-      </div>
+    <div className={`dice-container ${isRolling ? "rolling" : ""}`} onClick={rollDice}>
+      <div className="dice">{diceFaces[diceValue - 1]}</div>
       <style jsx>{`
         .dice-container {
           width: 80px;
@@ -78,15 +107,15 @@ const Dice = ({ onRoll }) => {
           margin: 0 auto;
           transition: transform 0.2s;
         }
-        
+
         .dice-container:hover {
           transform: scale(1.05);
         }
-        
+
         .dice-container:active {
           transform: scale(0.95);
         }
-        
+
         .dice {
           width: 100%;
           height: 100%;
@@ -98,42 +127,45 @@ const Dice = ({ onRoll }) => {
           justify-content: center;
           background-color: #e63946;
           border-radius: 10px;
-          box-shadow: 0 0 10px rgba(0,0,0,0.3);
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
           padding: 8px;
         }
-        
+
         .rolling .dice {
           animation: roll 0.5s infinite linear;
         }
-        
+
         @keyframes roll {
-          0% { transform: rotateX(0deg) rotateY(0deg); }
-          25% { transform: rotateX(90deg) rotateY(45deg); }
-          50% { transform: rotateX(180deg) rotateY(90deg); }
-          75% { transform: rotateX(270deg) rotateY(135deg); }
-          100% { transform: rotateX(360deg) rotateY(180deg); }
+          0% {
+            transform: rotateX(0deg) rotateY(0deg);
+          }
+          25% {
+            transform: rotateX(90deg) rotateY(45deg);
+          }
+          50% {
+            transform: rotateX(180deg) rotateY(90deg);
+          }
+          75% {
+            transform: rotateX(270deg) rotateY(135deg);
+          }
+          100% {
+            transform: rotateX(360deg) rotateY(180deg);
+          }
         }
-        
+
         .dice-dot {
           width: 14px;
           height: 14px;
           border-radius: 50%;
           background-color: white;
           position: absolute;
-          box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
+          box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
         }
-        
-        /* Positioning dots */
-        .dice-dot:nth-child(1) { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Center */
-        .dice-dot:nth-child(2) { top: 20%; left: 20%; } /* Top-left */
-        .dice-dot:nth-child(3) { bottom: 20%; right: 20%; } /* Bottom-right */
-        .dice-dot:nth-child(4) { top: 20%; right: 20%; } /* Top-right */
-        .dice-dot:nth-child(5) { bottom: 20%; left: 20%; } /* Bottom-left */
-        .dice-dot:nth-child(6) { top: 50%; left: 20%; transform: translateY(-50%); } /* Middle-left */
-        .dice-dot:nth-child(7) { top: 50%; right: 20%; transform: translateY(-50%); } /* Middle-right */
+
+        /* removed :nth-child positioning — positions are provided inline from diceDotPositions.js */
       `}</style>
     </div>
-  );
-};
+  )
+}
 
-export default Dice;
+export default Dice

SerpentRace_Frontend/src/utils/dice/diceDotPositions.js

@@ -0,0 +1,9 @@
+export const dotPositions = {
+  center: { top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
+  topLeft: { top: "20%", left: "20%" },
+  bottomRight: { bottom: "20%", right: "20%" },
+  topRight: { top: "20%", right: "20%" },
+  bottomLeft: { bottom: "20%", left: "20%" },
+  middleLeft: { top: "50%", left: "20%", transform: "translateY(-50%)" },
+  middleRight: { top: "50%", right: "20%", transform: "translateY(-50%)" },
+}

docker-manage.bat

@@ -18,6 +18,7 @@ if %errorlevel% neq 0 (
 
 if "%1"=="dev:start" goto dev_start
 if "%1"=="dev:watch" goto dev_watch
+if "%1"=="dev:watch_nat" goto dev_watch_nat
 if "%1"=="dev:stop" goto dev_stop
 if "%1"=="prod:start" goto prod_start
 if "%1"=="prod:stop" goto prod_stop
@@ -49,6 +50,16 @@ docker-compose -f docker-compose.watch.yml --env-file .env.dev up --build --watc
 cd ..
 goto end
 
+:dev_watch_nat
+echo [INFO] Starting SerpentRace development environment with file watchers without nat...
+echo [INFO] This will automatically sync file changes and rebuild containers as needed
+cd SerpentRace_Docker
+echo [INFO] This will use system network to avoid nat
+docker-compose -f docker-compose.watch.nat.yml --env-file .env.dev up --build --watch
+cd ..
+goto end
+
+
 :dev_stop
 echo [INFO] Stopping SerpentRace development environment...
 cd SerpentRace_Docker
@@ -109,6 +120,7 @@ echo.
 echo Commands:
 echo   dev:start     Start development environment with hot reload
 echo   dev:watch     Start development environment with file watchers (auto-rebuild)
+echo   dev:watch_nat Start development environment with file watchers (auto-rebuild); Without NAT
 echo   dev:stop      Stop development environment
 echo   prod:start    Start production environment
 echo   prod:stop     Stop production environment

hibák.txt

@@ -0,0 +1,11 @@
+kapcs fel routing
+navbar széthúz
+footer kapcsolat
+navabar gomboksorrend
+vagy kontat vagy kapcsolat
+navbar bejelent
+navbar layout finomít
+
+deck lista kialakít köv oldal max stb
+palki info get
+deck hibák javítása