+ {/* Main container with glass effect */}
+
+ {/* Selection indicator - center highlight */}
+
+ {/* Neon border glow */}
+
+
+ {/* Side arrows */}
+
+
+
+ {/* Inner glow */}
+
+
+
+ {/* Top fade gradient */}
+
+
+ {/* Bottom fade gradient */}
+
+
+ {/* Items container */}
- {extendedGames.map((game, index) => {
- const realIndex = index % games.length
- const isSelected = !isSpinning && realIndex === currentIndex
- const opacity = getItemOpacity(index)
+
+ {extendedGames.map((game, index) => {
+ const realIndex = index % games.length
+ const isSelected = !isSpinning && realIndex === currentIndex
+ const { opacity, scale } = getItemStyle(index)
- return (
-
- {/* Game cover */}
-
- {game.cover_url ? (
-
- ) : (
-
- 🎮
+ return (
+
+
+ {/* Game cover */}
+
+ {game.cover_url ? (
+
+ ) : (
+
+
+
+ )}
- )}
-
- {/* Game info */}
-
-
- {game.title}
-
- {game.genre && (
-
{game.genre}
- )}
+ {/* Game info */}
+
+
+ {game.title}
+
+ {game.genre && (
+
{game.genre}
+ )}
+
+
+ {/* Selected indicator */}
+ {isSelected && (
+
+
+
+ )}
+
-
- )
- })}
+ )
+ })}
+
+
+ {/* Spinning indicator lines */}
+ {isSpinning && (
+ <>
+
+
+
+
+ )}
{/* Spin button */}
-
:
}
>
- {isSpinning ? (
-
-
- Крутится...
-
- ) : (
- 'КРУТИТЬ!'
- )}
-
+ {isSpinning ? 'Крутится...' : 'КРУТИТЬ!'}
+
)
}
diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
index d00117b..100e10f 100644
--- a/frontend/src/components/layout/Layout.tsx
+++ b/frontend/src/components/layout/Layout.tsx
@@ -1,42 +1,88 @@
-import { Outlet, Link, useNavigate } from 'react-router-dom'
+import { useState, useEffect } from 'react'
+import { Outlet, Link, useNavigate, useLocation } from 'react-router-dom'
import { useAuthStore } from '@/store/auth'
-import { Gamepad2, LogOut, Trophy, User } from 'lucide-react'
+import { Gamepad2, LogOut, Trophy, User, Menu, X } from 'lucide-react'
import { TelegramLink } from '@/components/TelegramLink'
+import { clsx } from 'clsx'
export function Layout() {
const { user, isAuthenticated, logout } = useAuthStore()
const navigate = useNavigate()
+ const location = useLocation()
+ const [isScrolled, setIsScrolled] = useState(false)
+ const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+ useEffect(() => {
+ const handleScroll = () => {
+ setIsScrolled(window.scrollY > 10)
+ }
+ window.addEventListener('scroll', handleScroll)
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [])
+
+ // Close mobile menu on route change
+ useEffect(() => {
+ setIsMobileMenuOpen(false)
+ }, [location])
const handleLogout = () => {
logout()
navigate('/login')
}
+ const isActiveLink = (path: string) => location.pathname === path
+
return (
{/* Header */}
-
+
-
-
-
Игровой Марафон
+ {/* Logo */}
+
+
+
+
+
+ МАРАФОН
+
-