Redesign p1
This commit is contained in:
389
REDESIGN_PLAN.md
Normal file
389
REDESIGN_PLAN.md
Normal file
@@ -0,0 +1,389 @@
|
||||
# План редизайна фронтенда Game Marathon
|
||||
|
||||
## Концепция дизайна
|
||||
|
||||
**Стиль:** Минималистичный геймерский дизайн
|
||||
- Темная база с неоновыми акцентами (cyan/purple/pink градиенты)
|
||||
- Glitch эффекты на заголовках и при hover
|
||||
- Glassmorphism для карточек (blur + transparency)
|
||||
- Subtle grain/noise текстура на фоне
|
||||
- Геометрические паттерны и линии
|
||||
- Микро-анимации везде
|
||||
|
||||
**Цветовая палитра:**
|
||||
```
|
||||
Background: #0a0a0f (почти черный с синим оттенком)
|
||||
Surface: #12121a (карточки)
|
||||
Border: #1e1e2e (границы)
|
||||
Primary: #00f0ff (cyan неон)
|
||||
Secondary: #a855f7 (purple)
|
||||
Accent: #f0abfc (pink)
|
||||
Success: #22c55e
|
||||
Error: #ef4444
|
||||
Text: #e2e8f0
|
||||
Text Muted: #64748b
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Фаза 1: Базовая инфраструктура
|
||||
|
||||
### 1.1 Обновление Tailwind Config
|
||||
- [ ] Новая цветовая палитра (neon colors)
|
||||
- [ ] Кастомные анимации:
|
||||
- `glitch` - glitch эффект для текста
|
||||
- `glow-pulse` - пульсация свечения
|
||||
- `float` - плавное парение
|
||||
- `slide-in-left/right/up/down` - слайды
|
||||
- `scale-in` - появление с масштабом
|
||||
- `shimmer` - блик на элементах
|
||||
- [ ] Кастомные backdrop-blur классы
|
||||
- [ ] Градиентные утилиты
|
||||
|
||||
### 1.2 Глобальные стили (index.css)
|
||||
- [ ] CSS переменные для цветов
|
||||
- [ ] Glitch keyframes анимация
|
||||
- [ ] Noise/grain overlay
|
||||
- [ ] Glow эффекты (box-shadow неон)
|
||||
- [ ] Custom scrollbar (неоновый)
|
||||
- [ ] Selection стили (выделение текста)
|
||||
|
||||
### 1.3 Новые UI компоненты
|
||||
- [ ] `GlitchText` - текст с glitch эффектом
|
||||
- [ ] `NeonButton` - кнопка с неоновым свечением
|
||||
- [ ] `GlassCard` - карточка с glassmorphism
|
||||
- [ ] `AnimatedCounter` - анимированные числа
|
||||
- [ ] `ProgressBar` - неоновый прогресс бар
|
||||
- [ ] `Badge` - бейджи со свечением
|
||||
- [ ] `Skeleton` - скелетоны загрузки
|
||||
- [ ] `Tooltip` - тултипы
|
||||
- [ ] `Tabs` - табы с анимацией
|
||||
- [ ] `Modal` - переработанная модалка
|
||||
|
||||
---
|
||||
|
||||
## Фаза 2: Layout и навигация
|
||||
|
||||
### 2.1 Новый Header
|
||||
- [ ] Sticky header с blur при скролле
|
||||
- [ ] Логотип с glitch эффектом при hover
|
||||
- [ ] Анимированная навигация (underline slide)
|
||||
- [ ] Notification bell с badge
|
||||
- [ ] User dropdown с аватаром
|
||||
- [ ] Mobile hamburger menu с slide-in
|
||||
|
||||
### 2.2 Sidebar (новый компонент)
|
||||
- [ ] Collapsible sidebar для desktop
|
||||
- [ ] Иконки с tooltip
|
||||
- [ ] Active state с неоновой подсветкой
|
||||
- [ ] Quick stats внизу
|
||||
|
||||
### 2.3 Footer
|
||||
- [ ] Минималистичный footer
|
||||
- [ ] Social links
|
||||
- [ ] Version info
|
||||
|
||||
---
|
||||
|
||||
## Фаза 3: Страницы
|
||||
|
||||
### 3.1 HomePage (полный редизайн)
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ HERO SECTION │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Animated background (particles/ │ │
|
||||
│ │ geometric shapes) │ │
|
||||
│ │ │ │
|
||||
│ │ GAME <glitch>MARATHON</glitch> │ │
|
||||
│ │ │ │
|
||||
│ │ Tagline with typing effect │ │
|
||||
│ │ │ │
|
||||
│ │ [Start Playing] [Watch Demo] │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ FEATURES SECTION (3 glass cards) │
|
||||
│ ┌───────┐ ┌───────┐ ┌───────┐ │
|
||||
│ │ Icon │ │ Icon │ │ Icon │ hover: │
|
||||
│ │ Title │ │ Title │ │ Title │ lift + │
|
||||
│ │ Desc │ │ Desc │ │ Desc │ glow │
|
||||
│ └───────┘ └───────┘ └───────┘ │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ HOW IT WORKS (timeline style) │
|
||||
│ ○───────○───────○───────○ │
|
||||
│ 1 2 3 4 │
|
||||
│ Create Add Spin Win │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ LIVE STATS (animated counters) │
|
||||
│ [ 1,234 Marathons ] [ 5,678 Challenges ] │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ CTA SECTION │
|
||||
│ Ready to compete? [Join Now] │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.2 Login/Register Pages
|
||||
- [ ] Centered card с glassmorphism
|
||||
- [ ] Animated background (subtle)
|
||||
- [ ] Form inputs с glow при focus
|
||||
- [ ] Password strength indicator
|
||||
- [ ] Social login buttons (future)
|
||||
- [ ] Smooth transitions между login/register
|
||||
|
||||
### 3.3 MarathonsPage (Dashboard)
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ Header: "My Marathons" + Create button │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Quick Stats Bar │
|
||||
│ [Active: 2] [Completed: 5] [Total Wins: 3]│
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Filters/Tabs: All | Active | Completed │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Marathon Cards Grid (2-3 columns) │
|
||||
│ ┌──────────────────┐ ┌──────────────────┐ │
|
||||
│ │ Cover image/ │ │ │ │
|
||||
│ │ gradient │ │ │ │
|
||||
│ │ ──────────── │ │ │ │
|
||||
│ │ Title │ │ │ │
|
||||
│ │ Status badge │ │ │ │
|
||||
│ │ Participants │ │ │ │
|
||||
│ │ Progress bar │ │ │ │
|
||||
│ └──────────────────┘ └──────────────────┘ │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Join by Code (expandable section) │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.4 MarathonPage (Detail)
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ Hero Banner │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Background gradient + pattern │ │
|
||||
│ │ Marathon Title (large) │ │
|
||||
│ │ Status | Dates | Participants │ │
|
||||
│ │ [Play] [Leaderboard] [Settings] │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Event Banner (if active) - animated │
|
||||
├────────────────────┬────────────────────────┤
|
||||
│ Main Content │ Sidebar │
|
||||
│ ┌──────────────┐ │ ┌──────────────────┐ │
|
||||
│ │ Your Stats │ │ │ Activity Feed │ │
|
||||
│ │ Points/Streak│ │ │ (scrollable) │ │
|
||||
│ └──────────────┘ │ │ │ │
|
||||
│ ┌──────────────┐ │ │ │ │
|
||||
│ │ Quick Actions│ │ │ │ │
|
||||
│ └──────────────┘ │ │ │ │
|
||||
│ ┌──────────────┐ │ │ │ │
|
||||
│ │ Games List │ │ │ │ │
|
||||
│ │ (collapsible)│ │ │ │ │
|
||||
│ └──────────────┘ │ └──────────────────┘ │
|
||||
└────────────────────┴────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.5 PlayPage (Game Screen) - ГЛАВНАЯ СТРАНИЦА
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ Top Bar: Points | Streak | Event Timer │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ SPIN WHEEL │ │
|
||||
│ │ (redesigned, neon style) │ │
|
||||
│ │ ┌─────────┐ │ │
|
||||
│ │ │ WHEEL │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ └─────────┘ │ │
|
||||
│ │ [SPIN BUTTON] │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Active Challenge Card (если есть) │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Game: [Title] | Difficulty: [★★★] │ │
|
||||
│ │ ─────────────────────────────────── │ │
|
||||
│ │ Challenge Title │ │
|
||||
│ │ Description... │ │
|
||||
│ │ ─────────────────────────────────── │ │
|
||||
│ │ Points: 100 | Time: ~2h │ │
|
||||
│ │ ─────────────────────────────────── │ │
|
||||
│ │ Proof Upload Area │ │
|
||||
│ │ [File] [URL] [Comment] │ │
|
||||
│ │ ─────────────────────────────────── │ │
|
||||
│ │ [Complete ✓] [Skip ✗] │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Mini Leaderboard (top 3 + you) │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.6 LeaderboardPage
|
||||
- [ ] Animated podium для top 3
|
||||
- [ ] Table с hover эффектами
|
||||
- [ ] Highlight для текущего пользователя
|
||||
- [ ] Streak fire animation
|
||||
- [ ] Sorting/filtering
|
||||
|
||||
### 3.7 ProfilePage
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ Profile Header │
|
||||
│ ┌─────────────────────────────────────┐ │
|
||||
│ │ Avatar (large, glow border) │ │
|
||||
│ │ Nickname [Edit] │ │
|
||||
│ │ Member since: Date │ │
|
||||
│ └─────────────────────────────────────┘ │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Stats Cards (animated counters) │
|
||||
│ [Marathons] [Wins] [Challenges] [Points] │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Achievements Section (future) │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Telegram Connection Card │
|
||||
├─────────────────────────────────────────────┤
|
||||
│ Security Section (password change) │
|
||||
└─────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 3.8 LobbyPage
|
||||
- [ ] Step-by-step wizard UI
|
||||
- [ ] Game cards grid с preview
|
||||
- [ ] Challenge preview с difficulty badges
|
||||
- [ ] AI generation progress animation
|
||||
- [ ] Launch countdown
|
||||
|
||||
---
|
||||
|
||||
## Фаза 4: Специальные компоненты
|
||||
|
||||
### 4.1 SpinWheel (полный редизайн)
|
||||
- [ ] 3D perspective эффект
|
||||
- [ ] Неоновые сегменты с названиями игр
|
||||
- [ ] Particle effects при кручении
|
||||
- [ ] Glow trail за указателем
|
||||
- [ ] Sound effects (optional)
|
||||
- [ ] Confetti при выигрыше
|
||||
|
||||
### 4.2 EventBanner (переработка)
|
||||
- [ ] Pulsating glow border
|
||||
- [ ] Countdown timer с flip animation
|
||||
- [ ] Event-specific icons/colors
|
||||
- [ ] Dismiss animation
|
||||
|
||||
### 4.3 ActivityFeed (переработка)
|
||||
- [ ] Timeline style
|
||||
- [ ] Avatar circles
|
||||
- [ ] Type-specific icons
|
||||
- [ ] Hover для деталей
|
||||
- [ ] New items animation (slide-in)
|
||||
|
||||
### 4.4 Challenge Cards
|
||||
- [ ] Difficulty stars/badges
|
||||
- [ ] Progress indicator
|
||||
- [ ] Expandable details
|
||||
- [ ] Proof preview thumbnail
|
||||
|
||||
---
|
||||
|
||||
## Фаза 5: Анимации и эффекты
|
||||
|
||||
### 5.1 Page Transitions
|
||||
- [ ] Framer Motion page transitions
|
||||
- [ ] Fade + slide between routes
|
||||
- [ ] Loading skeleton screens
|
||||
|
||||
### 5.2 Micro-interactions
|
||||
- [ ] Button press effects
|
||||
- [ ] Input focus glow
|
||||
- [ ] Success checkmark animation
|
||||
- [ ] Error shake animation
|
||||
- [ ] Loading spinners (custom)
|
||||
|
||||
### 5.3 Background Effects
|
||||
- [ ] Animated gradient mesh
|
||||
- [ ] Floating particles (optional)
|
||||
- [ ] Grid pattern overlay
|
||||
- [ ] Noise texture
|
||||
|
||||
### 5.4 Special Effects
|
||||
- [ ] Glitch text на заголовках
|
||||
- [ ] Neon glow на важных элементах
|
||||
- [ ] Shimmer effect на loading
|
||||
- [ ] Confetti на achievements
|
||||
|
||||
---
|
||||
|
||||
## Фаза 6: Responsive и Polish
|
||||
|
||||
### 6.1 Mobile Optimization
|
||||
- [ ] Touch-friendly targets
|
||||
- [ ] Swipe gestures
|
||||
- [ ] Bottom navigation (mobile)
|
||||
- [ ] Collapsible sections
|
||||
|
||||
### 6.2 Accessibility
|
||||
- [ ] Keyboard navigation
|
||||
- [ ] Focus indicators
|
||||
- [ ] Screen reader support
|
||||
- [ ] Reduced motion option
|
||||
|
||||
### 6.3 Performance
|
||||
- [ ] Lazy loading images
|
||||
- [ ] Code splitting
|
||||
- [ ] Animation optimization
|
||||
- [ ] Bundle size check
|
||||
|
||||
---
|
||||
|
||||
## Порядок реализации
|
||||
|
||||
### Sprint 1: Фундамент (2-3 дня)
|
||||
1. Tailwind config + colors
|
||||
2. Global CSS + animations
|
||||
3. Base UI components (Button, Card, Input)
|
||||
4. GlitchText component
|
||||
5. Updated Layout/Header
|
||||
|
||||
### Sprint 2: Core Pages (3-4 дня)
|
||||
1. HomePage с hero
|
||||
2. Login/Register
|
||||
3. MarathonsPage dashboard
|
||||
4. Profile page
|
||||
|
||||
### Sprint 3: Game Flow (3-4 дня)
|
||||
1. MarathonPage detail
|
||||
2. SpinWheel redesign
|
||||
3. PlayPage
|
||||
4. LeaderboardPage
|
||||
|
||||
### Sprint 4: Polish (2-3 дня)
|
||||
1. LobbyPage
|
||||
2. Event components
|
||||
3. Activity feed
|
||||
4. Animations & transitions
|
||||
|
||||
### Sprint 5: Finalization (1-2 дня)
|
||||
1. Mobile testing
|
||||
2. Performance optimization
|
||||
3. Bug fixes
|
||||
4. Final polish
|
||||
|
||||
---
|
||||
|
||||
## Референсы для вдохновления
|
||||
|
||||
- Cyberpunk 2077 UI
|
||||
- Discord dark theme
|
||||
- Valorant game UI
|
||||
- Steam profile pages
|
||||
- Twitch streaming UI
|
||||
- Epic Games Store
|
||||
|
||||
---
|
||||
|
||||
## Технические заметки
|
||||
|
||||
**Framer Motion:** Использовать для page transitions и сложных анимаций
|
||||
**CSS:** Использовать для простых transitions и hover эффектов
|
||||
**Tailwind:** Основной инструмент для стилей
|
||||
**Custom Hooks:** useAnimation, useGlitch для переиспользования логики
|
||||
@@ -2,13 +2,12 @@ import { useState, useEffect, useCallback, useRef, useImperativeHandle, forwardR
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { feedApi } from '@/api'
|
||||
import type { Activity, ActivityType } from '@/types'
|
||||
import { Loader2, ChevronDown, Bell, ExternalLink, AlertTriangle } from 'lucide-react'
|
||||
import { Loader2, ChevronDown, Activity as ActivityIcon, ExternalLink, AlertTriangle, Sparkles, Zap } from 'lucide-react'
|
||||
import { UserAvatar } from '@/components/ui'
|
||||
import {
|
||||
formatRelativeTime,
|
||||
getActivityIcon,
|
||||
getActivityColor,
|
||||
getActivityBgClass,
|
||||
isEventActivity,
|
||||
formatActivityMessage,
|
||||
} from '@/utils/activity'
|
||||
@@ -100,52 +99,66 @@ export const ActivityFeed = forwardRef<ActivityFeedRef, ActivityFeedProps>(
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-xl border border-gray-700/50 p-4 flex flex-col ${className}`}>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Bell className="w-5 h-5 text-primary-500" />
|
||||
<h3 className="font-medium text-white">Активность</h3>
|
||||
<div className={`glass rounded-2xl border border-dark-600 flex flex-col ${className}`}>
|
||||
<div className="flex items-center gap-3 px-5 py-4 border-b border-dark-600">
|
||||
<div className="w-8 h-8 rounded-lg bg-neon-500/20 flex items-center justify-center">
|
||||
<ActivityIcon className="w-4 h-4 text-neon-400" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-white">Активность</h3>
|
||||
</div>
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-gray-500" />
|
||||
<div className="flex-1 flex items-center justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-neon-500" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-xl border border-gray-700/50 flex flex-col ${className}`}>
|
||||
<div className={`glass rounded-2xl border border-dark-600 flex flex-col overflow-hidden ${className}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-gray-700/50 flex-shrink-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="w-5 h-5 text-primary-500" />
|
||||
<h3 className="font-medium text-white">Активность</h3>
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-dark-600 flex-shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-neon-500/20 flex items-center justify-center">
|
||||
<Zap className="w-4 h-4 text-neon-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Активность</h3>
|
||||
{total > 0 && (
|
||||
<p className="text-xs text-gray-500">{total} событий</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{total > 0 && (
|
||||
<span className="text-xs text-gray-500">{total}</span>
|
||||
)}
|
||||
<div className="w-2 h-2 rounded-full bg-neon-500 animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* Activity list */}
|
||||
<div className="flex-1 overflow-y-auto min-h-0 custom-scrollbar">
|
||||
{activities.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center text-gray-500 text-sm">
|
||||
Пока нет активности
|
||||
<div className="px-5 py-12 text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-dark-700 flex items-center justify-center">
|
||||
<Sparkles className="w-6 h-6 text-gray-600" />
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm">Пока нет активности</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-700/30">
|
||||
{activities.map((activity) => (
|
||||
<ActivityItem key={activity.id} activity={activity} />
|
||||
<div className="divide-y divide-dark-600/50">
|
||||
{activities.map((activity, index) => (
|
||||
<ActivityItem
|
||||
key={activity.id}
|
||||
activity={activity}
|
||||
isNew={index === 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Load more button */}
|
||||
{hasMore && (
|
||||
<div className="p-3 border-t border-gray-700/30">
|
||||
<div className="p-4 border-t border-dark-600/50">
|
||||
<button
|
||||
onClick={handleLoadMore}
|
||||
disabled={isLoadingMore}
|
||||
className="w-full py-2 text-sm text-gray-400 hover:text-white transition-colors flex items-center justify-center gap-2"
|
||||
className="w-full py-2.5 text-sm text-gray-400 hover:text-neon-400 transition-colors flex items-center justify-center gap-2 rounded-lg hover:bg-neon-500/5"
|
||||
>
|
||||
{isLoadingMore ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
@@ -168,13 +181,13 @@ ActivityFeed.displayName = 'ActivityFeed'
|
||||
|
||||
interface ActivityItemProps {
|
||||
activity: Activity
|
||||
isNew?: boolean
|
||||
}
|
||||
|
||||
function ActivityItem({ activity }: ActivityItemProps) {
|
||||
function ActivityItem({ activity, isNew }: ActivityItemProps) {
|
||||
const navigate = useNavigate()
|
||||
const Icon = getActivityIcon(activity.type)
|
||||
const iconColor = getActivityColor(activity.type)
|
||||
const bgClass = getActivityBgClass(activity.type)
|
||||
const isEvent = isEventActivity(activity.type)
|
||||
const { title, details, extra } = formatActivityMessage(activity)
|
||||
|
||||
@@ -187,21 +200,58 @@ function ActivityItem({ activity }: ActivityItemProps) {
|
||||
? activityData.dispute_status
|
||||
: null
|
||||
|
||||
// Determine accent color based on activity type
|
||||
const getAccentConfig = () => {
|
||||
switch (activity.type) {
|
||||
case 'spin':
|
||||
return { border: 'border-l-accent-500', bg: 'bg-accent-500/5' }
|
||||
case 'complete':
|
||||
return { border: 'border-l-green-500', bg: 'bg-green-500/5' }
|
||||
case 'drop':
|
||||
return { border: 'border-l-red-500', bg: 'bg-red-500/5' }
|
||||
case 'start_marathon':
|
||||
case 'event_start':
|
||||
return { border: 'border-l-yellow-500', bg: 'bg-yellow-500/5' }
|
||||
case 'finish_marathon':
|
||||
case 'event_end':
|
||||
return { border: 'border-l-gray-500', bg: 'bg-gray-500/5' }
|
||||
case 'swap':
|
||||
case 'rematch':
|
||||
return { border: 'border-l-neon-500', bg: 'bg-neon-500/5' }
|
||||
default:
|
||||
return { border: 'border-l-dark-600', bg: '' }
|
||||
}
|
||||
}
|
||||
|
||||
const accent = getAccentConfig()
|
||||
|
||||
if (isEvent) {
|
||||
return (
|
||||
<div className={`px-4 py-3 ${bgClass} border-l-2 ${activity.type === 'event_start' ? 'border-l-yellow-500' : 'border-l-gray-600'}`}>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Icon className={`w-4 h-4 ${iconColor}`} />
|
||||
<span className={`text-sm font-medium ${activity.type === 'event_start' ? 'text-yellow-400' : 'text-gray-400'}`}>
|
||||
<div className={`
|
||||
px-5 py-4 border-l-2 transition-colors
|
||||
${accent.border} ${accent.bg}
|
||||
hover:bg-dark-700/30
|
||||
`}>
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<div className={`w-6 h-6 rounded-md flex items-center justify-center ${
|
||||
activity.type === 'event_start' ? 'bg-yellow-500/20' : 'bg-gray-500/20'
|
||||
}`}>
|
||||
<Icon className={`w-3.5 h-3.5 ${iconColor}`} />
|
||||
</div>
|
||||
<span className={`text-sm font-semibold ${
|
||||
activity.type === 'event_start' ? 'text-yellow-400' : 'text-gray-400'
|
||||
}`}>
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
{details && (
|
||||
<div className={`text-sm ${activity.type === 'event_start' ? 'text-yellow-200' : 'text-gray-500'}`}>
|
||||
<div className={`text-sm ml-8 ${
|
||||
activity.type === 'event_start' ? 'text-yellow-200/80' : 'text-gray-500'
|
||||
}`}>
|
||||
{details}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
<div className="text-xs text-gray-600 mt-2 ml-8">
|
||||
{formatRelativeTime(activity.created_at)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -209,39 +259,53 @@ function ActivityItem({ activity }: ActivityItemProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`px-4 py-3 hover:bg-gray-700/20 transition-colors ${bgClass}`}>
|
||||
<div className={`
|
||||
px-5 py-4 border-l-2 transition-all duration-200
|
||||
${accent.border} ${isNew ? accent.bg : ''}
|
||||
hover:bg-dark-700/30 group
|
||||
`}>
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Avatar */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex-shrink-0 relative">
|
||||
<UserAvatar
|
||||
userId={activity.user.id}
|
||||
hasAvatar={!!activity.user.avatar_url}
|
||||
nickname={activity.user.nickname}
|
||||
size="sm"
|
||||
/>
|
||||
{/* Activity type badge */}
|
||||
<div className={`
|
||||
absolute -bottom-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center
|
||||
border-2 border-dark-800
|
||||
${activity.type === 'complete' ? 'bg-green-500' :
|
||||
activity.type === 'drop' ? 'bg-red-500' :
|
||||
activity.type === 'spin' ? 'bg-accent-500' :
|
||||
'bg-neon-500'}
|
||||
`}>
|
||||
<Icon className="w-2.5 h-2.5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium text-white truncate">
|
||||
<span className="text-sm font-semibold text-white group-hover:text-neon-400 transition-colors">
|
||||
{activity.user.nickname}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
<span className="text-xs text-gray-600">
|
||||
{formatRelativeTime(activity.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 mt-0.5">
|
||||
<Icon className={`w-3.5 h-3.5 flex-shrink-0 ${iconColor}`} />
|
||||
<div className="flex items-center gap-1.5 mt-1">
|
||||
<span className="text-sm text-gray-300">{title}</span>
|
||||
</div>
|
||||
{details && (
|
||||
<div className="text-sm text-gray-400 mt-1">
|
||||
<div className="text-sm text-gray-500 mt-1">
|
||||
{details}
|
||||
</div>
|
||||
)}
|
||||
{extra && (
|
||||
<div className="text-xs text-gray-500 mt-0.5">
|
||||
<div className="text-xs text-gray-600 mt-1">
|
||||
{extra}
|
||||
</div>
|
||||
)}
|
||||
@@ -250,19 +314,19 @@ function ActivityItem({ activity }: ActivityItemProps) {
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<button
|
||||
onClick={() => navigate(`/assignments/${assignmentId}`)}
|
||||
className="text-xs text-primary-400 hover:text-primary-300 flex items-center gap-1"
|
||||
className="text-xs text-neon-400 hover:text-neon-300 flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-neon-500/10 transition-colors"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
Детали
|
||||
</button>
|
||||
{disputeStatus === 'open' && (
|
||||
<span className="text-xs text-orange-400 flex items-center gap-1">
|
||||
<span className="text-xs text-orange-400 flex items-center gap-1.5 px-2 py-1 rounded-md bg-orange-500/10">
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
Оспаривается
|
||||
</span>
|
||||
)}
|
||||
{disputeStatus === 'valid' && (
|
||||
<span className="text-xs text-red-400 flex items-center gap-1">
|
||||
<span className="text-xs text-red-400 flex items-center gap-1.5 px-2 py-1 rounded-md bg-red-500/10">
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
Отклонено
|
||||
</span>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Clock } from 'lucide-react'
|
||||
import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Clock, Sparkles } from 'lucide-react'
|
||||
import type { ActiveEvent, EventType } from '@/types'
|
||||
import { EVENT_INFO } from '@/types'
|
||||
|
||||
@@ -17,13 +17,55 @@ const EVENT_ICONS: Record<EventType, React.ReactNode> = {
|
||||
game_choice: <Gamepad2 className="w-5 h-5" />,
|
||||
}
|
||||
|
||||
const EVENT_COLORS: Record<EventType, string> = {
|
||||
golden_hour: 'from-yellow-500/20 to-yellow-600/20 border-yellow-500/50 text-yellow-400',
|
||||
common_enemy: 'from-red-500/20 to-red-600/20 border-red-500/50 text-red-400',
|
||||
double_risk: 'from-purple-500/20 to-purple-600/20 border-purple-500/50 text-purple-400',
|
||||
jackpot: 'from-green-500/20 to-green-600/20 border-green-500/50 text-green-400',
|
||||
swap: 'from-blue-500/20 to-blue-600/20 border-blue-500/50 text-blue-400',
|
||||
game_choice: 'from-orange-500/20 to-orange-600/20 border-orange-500/50 text-orange-400',
|
||||
const EVENT_COLORS: Record<EventType, {
|
||||
gradient: string
|
||||
border: string
|
||||
text: string
|
||||
glow: string
|
||||
iconBg: string
|
||||
}> = {
|
||||
golden_hour: {
|
||||
gradient: 'from-yellow-500/20 via-yellow-500/10 to-transparent',
|
||||
border: 'border-yellow-500/50',
|
||||
text: 'text-yellow-400',
|
||||
glow: 'shadow-[0_0_30px_rgba(234,179,8,0.3)]',
|
||||
iconBg: 'bg-yellow-500/20',
|
||||
},
|
||||
common_enemy: {
|
||||
gradient: 'from-red-500/20 via-red-500/10 to-transparent',
|
||||
border: 'border-red-500/50',
|
||||
text: 'text-red-400',
|
||||
glow: 'shadow-[0_0_30px_rgba(239,68,68,0.3)]',
|
||||
iconBg: 'bg-red-500/20',
|
||||
},
|
||||
double_risk: {
|
||||
gradient: 'from-purple-500/20 via-purple-500/10 to-transparent',
|
||||
border: 'border-purple-500/50',
|
||||
text: 'text-purple-400',
|
||||
glow: 'shadow-[0_0_30px_rgba(168,85,247,0.3)]',
|
||||
iconBg: 'bg-purple-500/20',
|
||||
},
|
||||
jackpot: {
|
||||
gradient: 'from-green-500/20 via-green-500/10 to-transparent',
|
||||
border: 'border-green-500/50',
|
||||
text: 'text-green-400',
|
||||
glow: 'shadow-[0_0_30px_rgba(34,197,94,0.3)]',
|
||||
iconBg: 'bg-green-500/20',
|
||||
},
|
||||
swap: {
|
||||
gradient: 'from-neon-500/20 via-neon-500/10 to-transparent',
|
||||
border: 'border-neon-500/50',
|
||||
text: 'text-neon-400',
|
||||
glow: 'shadow-[0_0_30px_rgba(0,240,255,0.3)]',
|
||||
iconBg: 'bg-neon-500/20',
|
||||
},
|
||||
game_choice: {
|
||||
gradient: 'from-orange-500/20 via-orange-500/10 to-transparent',
|
||||
border: 'border-orange-500/50',
|
||||
text: 'text-orange-400',
|
||||
glow: 'shadow-[0_0_30px_rgba(249,115,22,0.3)]',
|
||||
iconBg: 'bg-orange-500/20',
|
||||
},
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
@@ -68,42 +110,53 @@ export function EventBanner({ activeEvent, onRefresh }: EventBannerProps) {
|
||||
const event = activeEvent.event
|
||||
const info = EVENT_INFO[event.type]
|
||||
const icon = EVENT_ICONS[event.type]
|
||||
const colorClass = EVENT_COLORS[event.type]
|
||||
const colors = EVENT_COLORS[event.type]
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
relative overflow-hidden rounded-xl border p-4
|
||||
bg-gradient-to-r ${colorClass}
|
||||
relative overflow-hidden rounded-2xl border p-5
|
||||
glass ${colors.border} ${colors.glow}
|
||||
animate-pulse-slow
|
||||
`}
|
||||
>
|
||||
{/* Animated background effect */}
|
||||
{/* Background gradient */}
|
||||
<div className={`absolute inset-0 bg-gradient-to-r ${colors.gradient}`} />
|
||||
|
||||
{/* Animated shimmer effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full animate-shimmer" />
|
||||
|
||||
<div className="relative flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-white/10">
|
||||
{/* Grid pattern */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:20px_20px]" />
|
||||
|
||||
<div className="relative flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`p-3 rounded-xl ${colors.iconBg} ${colors.text}`}>
|
||||
{icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg">{info.name}</h3>
|
||||
<p className="text-sm opacity-80">{info.description}</p>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className={`font-bold text-lg ${colors.text}`}>{info.name}</h3>
|
||||
<Sparkles className={`w-4 h-4 ${colors.text} animate-pulse`} />
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">{info.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{timeRemaining !== null && timeRemaining > 0 && (
|
||||
<div className="flex items-center gap-2 text-lg font-mono font-bold">
|
||||
<Clock className="w-4 h-4" />
|
||||
{formatTime(timeRemaining)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-4">
|
||||
{activeEvent.effects.points_multiplier !== 1.0 && (
|
||||
<div className={`px-4 py-2 rounded-xl ${colors.iconBg} font-bold ${colors.text} border ${colors.border}`}>
|
||||
x{activeEvent.effects.points_multiplier}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeEvent.effects.points_multiplier !== 1.0 && (
|
||||
<div className="px-3 py-1 rounded-full bg-white/10 font-bold">
|
||||
x{activeEvent.effects.points_multiplier}
|
||||
</div>
|
||||
)}
|
||||
{timeRemaining !== null && timeRemaining > 0 && (
|
||||
<div className={`flex items-center gap-2 px-4 py-2 rounded-xl bg-dark-700/50 border border-dark-600 font-mono font-bold ${colors.text}`}>
|
||||
<Clock className="w-4 h-4" />
|
||||
{formatTime(timeRemaining)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Play, Square } from 'lucide-react'
|
||||
import { Button } from '@/components/ui'
|
||||
import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Play, Square, Sparkles } from 'lucide-react'
|
||||
import { NeonButton } from '@/components/ui'
|
||||
import { eventsApi } from '@/api'
|
||||
import type { ActiveEvent, EventType, Challenge } from '@/types'
|
||||
import { EVENT_INFO } from '@/types'
|
||||
@@ -24,12 +24,21 @@ const EVENT_TYPES: EventType[] = [
|
||||
]
|
||||
|
||||
const EVENT_ICONS: Record<EventType, React.ReactNode> = {
|
||||
golden_hour: <Zap className="w-4 h-4" />,
|
||||
common_enemy: <Users className="w-4 h-4" />,
|
||||
double_risk: <Shield className="w-4 h-4" />,
|
||||
jackpot: <Gift className="w-4 h-4" />,
|
||||
swap: <ArrowLeftRight className="w-4 h-4" />,
|
||||
game_choice: <Gamepad2 className="w-4 h-4" />,
|
||||
golden_hour: <Zap className="w-5 h-5" />,
|
||||
common_enemy: <Users className="w-5 h-5" />,
|
||||
double_risk: <Shield className="w-5 h-5" />,
|
||||
jackpot: <Gift className="w-5 h-5" />,
|
||||
swap: <ArrowLeftRight className="w-5 h-5" />,
|
||||
game_choice: <Gamepad2 className="w-5 h-5" />,
|
||||
}
|
||||
|
||||
const EVENT_COLORS: Record<EventType, { selected: string; icon: string }> = {
|
||||
golden_hour: { selected: 'border-yellow-500/50 bg-yellow-500/10', icon: 'text-yellow-400' },
|
||||
common_enemy: { selected: 'border-red-500/50 bg-red-500/10', icon: 'text-red-400' },
|
||||
double_risk: { selected: 'border-purple-500/50 bg-purple-500/10', icon: 'text-purple-400' },
|
||||
jackpot: { selected: 'border-green-500/50 bg-green-500/10', icon: 'text-green-400' },
|
||||
swap: { selected: 'border-neon-500/50 bg-neon-500/10', icon: 'text-neon-400' },
|
||||
game_choice: { selected: 'border-orange-500/50 bg-orange-500/10', icon: 'text-orange-400' },
|
||||
}
|
||||
|
||||
// Default durations for events (in minutes)
|
||||
@@ -107,54 +116,81 @@ export function EventControl({
|
||||
}
|
||||
|
||||
if (activeEvent.event) {
|
||||
const colors = EVENT_COLORS[activeEvent.event.type]
|
||||
return (
|
||||
<div className="p-4 bg-gray-800 rounded-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{EVENT_ICONS[activeEvent.event.type]}
|
||||
<span className="font-medium">
|
||||
Активно: {EVENT_INFO[activeEvent.event.type].name}
|
||||
</span>
|
||||
<div className={`glass rounded-xl p-4 border ${colors.selected}`}>
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg bg-white/10 ${colors.icon}`}>
|
||||
{EVENT_ICONS[activeEvent.event.type]}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold text-white">
|
||||
{EVENT_INFO[activeEvent.event.type].name}
|
||||
</span>
|
||||
<span className="text-gray-400 text-sm ml-2">активно</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="danger"
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleStop}
|
||||
isLoading={isStopping}
|
||||
className="border-red-500/50 text-red-400 hover:bg-red-500/10"
|
||||
icon={<Square className="w-4 h-4" />}
|
||||
>
|
||||
<Square className="w-4 h-4 mr-1" />
|
||||
Остановить
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-gray-800 rounded-xl space-y-4">
|
||||
<h3 className="font-bold text-white">Запустить событие</h3>
|
||||
<div className="glass rounded-xl p-5 space-y-5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||||
<Sparkles className="w-5 h-5 text-accent-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Запустить событие</h3>
|
||||
<p className="text-sm text-gray-400">Выберите тип и настройте параметры</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
{EVENT_TYPES.map((type) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => handleTypeChange(type)}
|
||||
className={`
|
||||
p-3 rounded-lg border-2 transition-all text-left
|
||||
${selectedType === type
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-gray-700 hover:border-gray-600'}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
{EVENT_ICONS[type]}
|
||||
<span className="font-medium text-sm">{EVENT_INFO[type].name}</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 line-clamp-2">
|
||||
{EVENT_INFO[type].description}
|
||||
</p>
|
||||
</button>
|
||||
))}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
||||
{EVENT_TYPES.map((type) => {
|
||||
const colors = EVENT_COLORS[type]
|
||||
const isSelected = selectedType === type
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => handleTypeChange(type)}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left
|
||||
${isSelected
|
||||
? `${colors.selected} shadow-lg`
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`flex items-center gap-2 mb-2 ${isSelected ? colors.icon : 'text-gray-400'}`}>
|
||||
{EVENT_ICONS[type]}
|
||||
<span className={`font-semibold text-sm ${isSelected ? 'text-white' : 'text-gray-300'}`}>
|
||||
{EVENT_INFO[type].name}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 line-clamp-2">
|
||||
{EVENT_INFO[type].description}
|
||||
</p>
|
||||
{isSelected && (
|
||||
<div className="absolute top-2 right-2">
|
||||
<div className={`w-2 h-2 rounded-full ${colors.icon.replace('text-', 'bg-')} animate-pulse`} />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Duration setting */}
|
||||
@@ -170,9 +206,9 @@ export function EventControl({
|
||||
min={1}
|
||||
max={480}
|
||||
placeholder={`По умолчанию: ${DEFAULT_DURATIONS[selectedType]}`}
|
||||
className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white"
|
||||
className="input w-full"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
<p className="text-xs text-gray-500 mt-1.5">
|
||||
Оставьте пустым для значения по умолчанию ({DEFAULT_DURATIONS[selectedType]} мин)
|
||||
</p>
|
||||
</div>
|
||||
@@ -186,7 +222,7 @@ export function EventControl({
|
||||
<select
|
||||
value={selectedChallengeId || ''}
|
||||
onChange={(e) => setSelectedChallengeId(e.target.value ? Number(e.target.value) : null)}
|
||||
className="w-full p-2 bg-gray-700 border border-gray-600 rounded-lg text-white"
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="">— Выберите челлендж —</option>
|
||||
{challenges.map((c) => (
|
||||
@@ -198,15 +234,15 @@ export function EventControl({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
<NeonButton
|
||||
onClick={handleStart}
|
||||
isLoading={isStarting}
|
||||
disabled={selectedType === 'common_enemy' && !selectedChallengeId}
|
||||
className="w-full"
|
||||
icon={<Play className="w-4 h-4" />}
|
||||
>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Запустить {EVENT_INFO[selectedType].name}
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import type { Game } from '@/types'
|
||||
import { Gamepad2, Loader2, Sparkles } from 'lucide-react'
|
||||
import { NeonButton } from './ui'
|
||||
|
||||
interface SpinWheelProps {
|
||||
games: Game[]
|
||||
@@ -82,8 +84,11 @@ export function SpinWheel({ games, onSpin, onSpinComplete, disabled }: SpinWheel
|
||||
|
||||
if (games.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 text-gray-400">
|
||||
Нет доступных игр для прокрутки
|
||||
<div className="glass rounded-2xl p-12 text-center">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-dark-700 flex items-center justify-center">
|
||||
<Gamepad2 className="w-8 h-8 text-gray-600" />
|
||||
</div>
|
||||
<p className="text-gray-400">Нет доступных игр для прокрутки</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -91,119 +96,172 @@ export function SpinWheel({ games, onSpin, onSpinComplete, disabled }: SpinWheel
|
||||
const containerHeight = VISIBLE_ITEMS * ITEM_HEIGHT
|
||||
const currentIndex = Math.round(offset / ITEM_HEIGHT) % games.length
|
||||
|
||||
// Calculate opacity based on distance from center
|
||||
const getItemOpacity = (itemIndex: number) => {
|
||||
// Calculate opacity and scale based on distance from center
|
||||
const getItemStyle = (itemIndex: number) => {
|
||||
const itemPosition = itemIndex * ITEM_HEIGHT - offset
|
||||
const centerPosition = containerHeight / 2 - ITEM_HEIGHT / 2
|
||||
const distanceFromCenter = Math.abs(itemPosition - centerPosition)
|
||||
const maxDistance = containerHeight / 2
|
||||
const opacity = Math.max(0, 1 - (distanceFromCenter / maxDistance) * 0.8)
|
||||
return opacity
|
||||
const normalizedDistance = distanceFromCenter / maxDistance
|
||||
|
||||
const opacity = Math.max(0.15, 1 - normalizedDistance * 0.85)
|
||||
const scale = Math.max(0.85, 1 - normalizedDistance * 0.15)
|
||||
|
||||
return { opacity, scale }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
{/* Wheel container */}
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Selection indicator */}
|
||||
<div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-[100px] border-2 border-primary-500 rounded-lg bg-primary-500/10 z-20 pointer-events-none">
|
||||
<div className="absolute -left-3 top-1/2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent border-r-primary-500" />
|
||||
<div className="absolute -right-3 top-1/2 -translate-y-1/2 w-0 h-0 border-t-8 border-b-8 border-l-8 border-t-transparent border-b-transparent border-l-primary-500" />
|
||||
</div>
|
||||
<div className="relative w-full max-w-lg">
|
||||
{/* Outer glow effect */}
|
||||
<div className={`absolute -inset-1 rounded-2xl transition-all duration-300 ${
|
||||
isSpinning
|
||||
? 'bg-gradient-to-r from-neon-500 via-accent-500 to-neon-500 opacity-50 blur-xl animate-pulse'
|
||||
: 'bg-gradient-to-r from-neon-500/20 to-accent-500/20 opacity-0'
|
||||
}`} />
|
||||
|
||||
{/* Items container */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative overflow-hidden"
|
||||
style={{ height: containerHeight }}
|
||||
>
|
||||
{/* Main container with glass effect */}
|
||||
<div className="relative glass rounded-2xl border border-dark-600 overflow-hidden">
|
||||
{/* Selection indicator - center highlight */}
|
||||
<div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-[100px] z-20 pointer-events-none">
|
||||
{/* Neon border glow */}
|
||||
<div className={`absolute inset-0 border-2 rounded-lg transition-all duration-300 ${
|
||||
isSpinning
|
||||
? 'border-neon-400 shadow-[0_0_20px_rgba(0,240,255,0.5),inset_0_0_20px_rgba(0,240,255,0.1)]'
|
||||
: 'border-neon-500/50 shadow-[0_0_10px_rgba(0,240,255,0.2)]'
|
||||
}`} />
|
||||
|
||||
{/* Side arrows */}
|
||||
<div className="absolute -left-1 top-1/2 -translate-y-1/2">
|
||||
<div className={`w-3 h-6 transition-all duration-300 ${
|
||||
isSpinning ? 'bg-neon-400' : 'bg-neon-500/70'
|
||||
}`} style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 50%)' }} />
|
||||
</div>
|
||||
<div className="absolute -right-1 top-1/2 -translate-y-1/2">
|
||||
<div className={`w-3 h-6 transition-all duration-300 ${
|
||||
isSpinning ? 'bg-neon-400' : 'bg-neon-500/70'
|
||||
}`} style={{ clipPath: 'polygon(0 0, 0 100%, 100% 50%)' }} />
|
||||
</div>
|
||||
|
||||
{/* Inner glow */}
|
||||
<div className={`absolute inset-0 rounded-lg transition-all duration-300 ${
|
||||
isSpinning
|
||||
? 'bg-neon-500/10'
|
||||
: 'bg-neon-500/5'
|
||||
}`} />
|
||||
</div>
|
||||
|
||||
{/* Top fade gradient */}
|
||||
<div className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-dark-800 via-dark-800/80 to-transparent z-10 pointer-events-none" />
|
||||
|
||||
{/* Bottom fade gradient */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-dark-800 via-dark-800/80 to-transparent z-10 pointer-events-none" />
|
||||
|
||||
{/* Items container */}
|
||||
<div
|
||||
className="absolute w-full transition-none"
|
||||
style={{
|
||||
transform: `translateY(${containerHeight / 2 - ITEM_HEIGHT / 2 - offset}px)`,
|
||||
}}
|
||||
ref={containerRef}
|
||||
className="relative overflow-hidden"
|
||||
style={{ height: containerHeight }}
|
||||
>
|
||||
{extendedGames.map((game, index) => {
|
||||
const realIndex = index % games.length
|
||||
const isSelected = !isSpinning && realIndex === currentIndex
|
||||
const opacity = getItemOpacity(index)
|
||||
<div
|
||||
className="absolute w-full"
|
||||
style={{
|
||||
transform: `translateY(${containerHeight / 2 - ITEM_HEIGHT / 2 - offset}px)`,
|
||||
}}
|
||||
>
|
||||
{extendedGames.map((game, index) => {
|
||||
const realIndex = index % games.length
|
||||
const isSelected = !isSpinning && realIndex === currentIndex
|
||||
const { opacity, scale } = getItemStyle(index)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${game.id}-${index}`}
|
||||
className={`flex items-center gap-4 px-4 transition-transform duration-200 ${
|
||||
isSelected ? 'scale-105' : ''
|
||||
}`}
|
||||
style={{ height: ITEM_HEIGHT, opacity }}
|
||||
>
|
||||
{/* Game cover */}
|
||||
<div className="w-16 h-16 rounded-lg overflow-hidden bg-gray-700 flex-shrink-0">
|
||||
{game.cover_url ? (
|
||||
<img
|
||||
src={game.cover_url}
|
||||
alt={game.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-2xl">
|
||||
🎮
|
||||
return (
|
||||
<div
|
||||
key={`${game.id}-${index}`}
|
||||
className="px-4 transition-transform duration-200"
|
||||
style={{
|
||||
height: ITEM_HEIGHT,
|
||||
opacity,
|
||||
transform: `scale(${scale})`,
|
||||
}}
|
||||
>
|
||||
<div className={`
|
||||
flex items-center gap-4 h-full px-4 rounded-xl
|
||||
transition-all duration-300
|
||||
${isSelected
|
||||
? 'bg-neon-500/10 border border-neon-500/30'
|
||||
: 'bg-transparent border border-transparent'
|
||||
}
|
||||
`}>
|
||||
{/* Game cover */}
|
||||
<div className={`
|
||||
w-16 h-16 rounded-xl overflow-hidden flex-shrink-0
|
||||
border transition-all duration-300
|
||||
${isSelected
|
||||
? 'border-neon-500/50 shadow-[0_0_15px_rgba(0,240,255,0.3)]'
|
||||
: 'border-dark-600'
|
||||
}
|
||||
`}>
|
||||
{game.cover_url ? (
|
||||
<img
|
||||
src={game.cover_url}
|
||||
alt={game.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-br from-dark-700 to-dark-800 flex items-center justify-center">
|
||||
<Gamepad2 className={`w-7 h-7 ${isSelected ? 'text-neon-400' : 'text-gray-600'}`} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Game info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-bold text-white truncate text-lg">
|
||||
{game.title}
|
||||
</h3>
|
||||
{game.genre && (
|
||||
<p className="text-sm text-gray-400 truncate">{game.genre}</p>
|
||||
)}
|
||||
{/* Game info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className={`
|
||||
font-bold truncate text-lg transition-colors duration-300
|
||||
${isSelected ? 'text-neon-400' : 'text-white'}
|
||||
`}>
|
||||
{game.title}
|
||||
</h3>
|
||||
{game.genre && (
|
||||
<p className="text-sm text-gray-400 truncate">{game.genre}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Selected indicator */}
|
||||
{isSelected && (
|
||||
<div className="flex-shrink-0">
|
||||
<Sparkles className="w-5 h-5 text-neon-400 animate-pulse" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spinning indicator lines */}
|
||||
{isSpinning && (
|
||||
<>
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-neon-500/50 to-transparent animate-pulse" />
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-accent-500/50 to-transparent animate-pulse" style={{ transform: 'translateY(-50px)' }} />
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-gradient-to-r from-transparent via-accent-500/50 to-transparent animate-pulse" style={{ transform: 'translateY(50px)' }} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Spin button */}
|
||||
<button
|
||||
<NeonButton
|
||||
onClick={handleSpin}
|
||||
disabled={isSpinning || disabled}
|
||||
className={`
|
||||
relative px-12 py-4 text-xl font-bold rounded-full
|
||||
transition-all duration-300 transform
|
||||
${isSpinning || disabled
|
||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:scale-105 hover:shadow-lg hover:shadow-primary-500/30 active:scale-95'
|
||||
}
|
||||
`}
|
||||
size="lg"
|
||||
className="px-12 text-xl"
|
||||
icon={isSpinning ? <Loader2 className="w-6 h-6 animate-spin" /> : <Sparkles className="w-6 h-6" />}
|
||||
>
|
||||
{isSpinning ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="animate-spin w-6 h-6" viewBox="0 0 24 24">
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
Крутится...
|
||||
</span>
|
||||
) : (
|
||||
'КРУТИТЬ!'
|
||||
)}
|
||||
</button>
|
||||
{isSpinning ? 'Крутится...' : 'КРУТИТЬ!'}
|
||||
</NeonButton>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="bg-gray-800 border-b border-gray-700">
|
||||
<header
|
||||
className={clsx(
|
||||
'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
|
||||
isScrolled
|
||||
? 'bg-dark-900/80 backdrop-blur-lg border-b border-dark-600/50 shadow-lg'
|
||||
: 'bg-transparent'
|
||||
)}
|
||||
>
|
||||
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-2 text-xl font-bold text-white">
|
||||
<Gamepad2 className="w-8 h-8 text-primary-500" />
|
||||
<span>Игровой Марафон</span>
|
||||
{/* Logo */}
|
||||
<Link
|
||||
to="/"
|
||||
className="flex items-center gap-3 group"
|
||||
>
|
||||
<div className="relative">
|
||||
<Gamepad2 className="w-8 h-8 text-neon-500 transition-all duration-300 group-hover:text-neon-400 group-hover:drop-shadow-[0_0_8px_rgba(0,240,255,0.8)]" />
|
||||
</div>
|
||||
<span className="text-xl font-bold text-white font-display tracking-wider glitch-hover">
|
||||
МАРАФОН
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center gap-4">
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center gap-6">
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<Link
|
||||
to="/marathons"
|
||||
className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors"
|
||||
className={clsx(
|
||||
'flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200',
|
||||
isActiveLink('/marathons')
|
||||
? 'text-neon-400 bg-neon-500/10'
|
||||
: 'text-gray-300 hover:text-white hover:bg-dark-700'
|
||||
)}
|
||||
>
|
||||
<Trophy className="w-5 h-5" />
|
||||
<span>Марафоны</span>
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-3 ml-4 pl-4 border-l border-gray-700">
|
||||
<div className="flex items-center gap-3 ml-2 pl-4 border-l border-dark-600">
|
||||
<Link
|
||||
to="/profile"
|
||||
className="flex items-center gap-2 text-gray-300 hover:text-white transition-colors"
|
||||
className={clsx(
|
||||
'flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200',
|
||||
isActiveLink('/profile')
|
||||
? 'text-neon-400 bg-neon-500/10'
|
||||
: 'text-gray-300 hover:text-white hover:bg-dark-700'
|
||||
)}
|
||||
>
|
||||
<User className="w-5 h-5" />
|
||||
<span>{user?.nickname}</span>
|
||||
@@ -46,7 +92,7 @@ export function Layout() {
|
||||
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="p-2 text-gray-400 hover:text-white transition-colors"
|
||||
className="p-2 text-gray-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-200"
|
||||
title="Выйти"
|
||||
>
|
||||
<LogOut className="w-5 h-5" />
|
||||
@@ -55,27 +101,114 @@ export function Layout() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/login" className="text-gray-300 hover:text-white transition-colors">
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-gray-300 hover:text-white transition-colors px-4 py-2"
|
||||
>
|
||||
Войти
|
||||
</Link>
|
||||
<Link to="/register" className="btn btn-primary">
|
||||
<Link
|
||||
to="/register"
|
||||
className="px-4 py-2 bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold rounded-lg transition-all duration-200 shadow-[0_0_15px_rgba(0,240,255,0.3)] hover:shadow-[0_0_25px_rgba(0,240,255,0.5)]"
|
||||
>
|
||||
Регистрация
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="md:hidden p-2 text-gray-300 hover:text-white rounded-lg hover:bg-dark-700 transition-colors"
|
||||
>
|
||||
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden bg-dark-800/95 backdrop-blur-lg border-t border-dark-600 animate-slide-in-down">
|
||||
<div className="container mx-auto px-4 py-4 space-y-2">
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
<Link
|
||||
to="/marathons"
|
||||
className={clsx(
|
||||
'flex items-center gap-3 px-4 py-3 rounded-lg transition-all',
|
||||
isActiveLink('/marathons')
|
||||
? 'text-neon-400 bg-neon-500/10'
|
||||
: 'text-gray-300 hover:text-white hover:bg-dark-700'
|
||||
)}
|
||||
>
|
||||
<Trophy className="w-5 h-5" />
|
||||
<span>Марафоны</span>
|
||||
</Link>
|
||||
<Link
|
||||
to="/profile"
|
||||
className={clsx(
|
||||
'flex items-center gap-3 px-4 py-3 rounded-lg transition-all',
|
||||
isActiveLink('/profile')
|
||||
? 'text-neon-400 bg-neon-500/10'
|
||||
: 'text-gray-300 hover:text-white hover:bg-dark-700'
|
||||
)}
|
||||
>
|
||||
<User className="w-5 h-5" />
|
||||
<span>{user?.nickname}</span>
|
||||
</Link>
|
||||
<div className="pt-2 border-t border-dark-600">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center gap-3 w-full px-4 py-3 text-red-400 hover:bg-red-500/10 rounded-lg transition-all"
|
||||
>
|
||||
<LogOut className="w-5 h-5" />
|
||||
<span>Выйти</span>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
to="/login"
|
||||
className="block px-4 py-3 text-gray-300 hover:text-white hover:bg-dark-700 rounded-lg transition-all"
|
||||
>
|
||||
Войти
|
||||
</Link>
|
||||
<Link
|
||||
to="/register"
|
||||
className="block px-4 py-3 text-center bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold rounded-lg transition-all"
|
||||
>
|
||||
Регистрация
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* Spacer for fixed header */}
|
||||
<div className="h-[72px]" />
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 container mx-auto px-4 py-8">
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-800 border-t border-gray-700 py-4">
|
||||
<div className="container mx-auto px-4 text-center text-gray-500 text-sm">
|
||||
Игровой Марафон © {new Date().getFullYear()}
|
||||
<footer className="bg-dark-800/50 border-t border-dark-600/50 py-6">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2 text-gray-500">
|
||||
<Gamepad2 className="w-5 h-5 text-neon-500/50" />
|
||||
<span className="text-sm">
|
||||
Игровой Марафон © {new Date().getFullYear()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<span className="text-neon-500/50">v1.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -15,13 +15,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
ref={ref}
|
||||
disabled={disabled || isLoading}
|
||||
className={clsx(
|
||||
'inline-flex items-center justify-center font-medium rounded-lg transition-colors',
|
||||
'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
{
|
||||
'bg-primary-600 hover:bg-primary-700 text-white': variant === 'primary',
|
||||
'bg-gray-700 hover:bg-gray-600 text-white': variant === 'secondary',
|
||||
'bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold shadow-[0_0_10px_rgba(0,240,255,0.3)] hover:shadow-[0_0_20px_rgba(0,240,255,0.5)]': variant === 'primary',
|
||||
'bg-dark-600 hover:bg-dark-500 text-white border border-dark-500': variant === 'secondary',
|
||||
'bg-red-600 hover:bg-red-700 text-white': variant === 'danger',
|
||||
'bg-transparent hover:bg-gray-800 text-gray-300': variant === 'ghost',
|
||||
'bg-transparent hover:bg-dark-700 text-gray-300 hover:text-white': variant === 'ghost',
|
||||
'px-3 py-1.5 text-sm': size === 'sm',
|
||||
'px-4 py-2 text-base': size === 'md',
|
||||
'px-6 py-3 text-lg': size === 'lg',
|
||||
|
||||
@@ -4,11 +4,18 @@ import { clsx } from 'clsx'
|
||||
interface CardProps {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
hover?: boolean
|
||||
}
|
||||
|
||||
export function Card({ children, className }: CardProps) {
|
||||
export function Card({ children, className, hover = false }: CardProps) {
|
||||
return (
|
||||
<div className={clsx('bg-gray-800 rounded-xl p-6 shadow-lg', className)}>
|
||||
<div
|
||||
className={clsx(
|
||||
'bg-dark-800 rounded-xl p-6 border border-dark-600',
|
||||
hover && 'transition-all duration-300 hover:-translate-y-1 hover:border-neon-500/30 hover:shadow-[0_10px_40px_rgba(0,240,255,0.1)]',
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
211
frontend/src/components/ui/GlassCard.tsx
Normal file
211
frontend/src/components/ui/GlassCard.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
import { type ReactNode, type HTMLAttributes } from 'react'
|
||||
import { clsx } from 'clsx'
|
||||
|
||||
interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
children: ReactNode
|
||||
variant?: 'default' | 'dark' | 'neon' | 'gradient'
|
||||
hover?: boolean
|
||||
glow?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function GlassCard({
|
||||
children,
|
||||
variant = 'default',
|
||||
hover = false,
|
||||
glow = false,
|
||||
className,
|
||||
...props
|
||||
}: GlassCardProps) {
|
||||
const variantClasses = {
|
||||
default: 'glass',
|
||||
dark: 'glass-dark',
|
||||
neon: 'glass-neon',
|
||||
gradient: 'gradient-border',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'rounded-xl p-6',
|
||||
variantClasses[variant],
|
||||
hover && 'card-hover cursor-pointer',
|
||||
glow && 'neon-glow-pulse',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Stats card variant
|
||||
interface StatsCardProps {
|
||||
label: string
|
||||
value: string | number
|
||||
icon?: ReactNode
|
||||
trend?: {
|
||||
value: number
|
||||
isPositive: boolean
|
||||
}
|
||||
color?: 'neon' | 'purple' | 'pink' | 'default'
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function StatsCard({
|
||||
label,
|
||||
value,
|
||||
icon,
|
||||
trend,
|
||||
color = 'default',
|
||||
className,
|
||||
}: StatsCardProps) {
|
||||
const colorClasses = {
|
||||
neon: 'border-neon-500/30 hover:border-neon-500/50',
|
||||
purple: 'border-accent-500/30 hover:border-accent-500/50',
|
||||
pink: 'border-pink-500/30 hover:border-pink-500/50',
|
||||
default: 'border-dark-600 hover:border-dark-500',
|
||||
}
|
||||
|
||||
const iconColorClasses = {
|
||||
neon: 'text-neon-500 bg-neon-500/10',
|
||||
purple: 'text-accent-500 bg-accent-500/10',
|
||||
pink: 'text-pink-500 bg-pink-500/10',
|
||||
default: 'text-gray-400 bg-dark-700',
|
||||
}
|
||||
|
||||
const valueColorClasses = {
|
||||
neon: 'text-neon-400',
|
||||
purple: 'text-accent-400',
|
||||
pink: 'text-pink-400',
|
||||
default: 'text-white',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'glass rounded-xl p-4 border transition-all duration-300',
|
||||
colorClasses[color],
|
||||
'hover:-translate-y-0.5',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-400 mb-1">{label}</p>
|
||||
<p className={clsx('text-2xl font-bold', valueColorClasses[color])}>
|
||||
{value}
|
||||
</p>
|
||||
{trend && (
|
||||
<p
|
||||
className={clsx(
|
||||
'text-xs mt-1',
|
||||
trend.isPositive ? 'text-green-400' : 'text-red-400'
|
||||
)}
|
||||
>
|
||||
{trend.isPositive ? '+' : ''}{trend.value}%
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{icon && (
|
||||
<div
|
||||
className={clsx(
|
||||
'w-12 h-12 rounded-lg flex items-center justify-center',
|
||||
iconColorClasses[color]
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Feature card variant
|
||||
interface FeatureCardProps {
|
||||
title: string
|
||||
description: string
|
||||
icon: ReactNode
|
||||
color?: 'neon' | 'purple' | 'pink'
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function FeatureCard({
|
||||
title,
|
||||
description,
|
||||
icon,
|
||||
color = 'neon',
|
||||
className,
|
||||
}: FeatureCardProps) {
|
||||
const colorClasses = {
|
||||
neon: {
|
||||
icon: 'text-neon-500 bg-neon-500/10 group-hover:bg-neon-500/20',
|
||||
border: 'group-hover:border-neon-500/50',
|
||||
glow: 'group-hover:shadow-[0_0_30px_rgba(0,240,255,0.15)]',
|
||||
},
|
||||
purple: {
|
||||
icon: 'text-accent-500 bg-accent-500/10 group-hover:bg-accent-500/20',
|
||||
border: 'group-hover:border-accent-500/50',
|
||||
glow: 'group-hover:shadow-[0_0_30px_rgba(168,85,247,0.15)]',
|
||||
},
|
||||
pink: {
|
||||
icon: 'text-pink-500 bg-pink-500/10 group-hover:bg-pink-500/20',
|
||||
border: 'group-hover:border-pink-500/50',
|
||||
glow: 'group-hover:shadow-[0_0_30px_rgba(236,72,153,0.15)]',
|
||||
},
|
||||
}
|
||||
|
||||
const colors = colorClasses[color]
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'group glass rounded-xl p-6 border border-dark-600 transition-all duration-300',
|
||||
'hover:-translate-y-1',
|
||||
colors.border,
|
||||
colors.glow,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'w-14 h-14 rounded-xl flex items-center justify-center mb-4 transition-colors',
|
||||
colors.icon
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
|
||||
<p className="text-gray-400 text-sm">{description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Interactive card with animated border
|
||||
interface AnimatedBorderCardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function AnimatedBorderCard({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: AnimatedBorderCardProps) {
|
||||
return (
|
||||
<div className={clsx('relative group', className)} {...props}>
|
||||
{/* Animated gradient border */}
|
||||
<div
|
||||
className="absolute -inset-0.5 bg-gradient-to-r from-neon-500 via-accent-500 to-pink-500 rounded-xl opacity-30 group-hover:opacity-60 blur transition-opacity duration-300"
|
||||
style={{
|
||||
backgroundSize: '200% 200%',
|
||||
animation: 'gradient-flow 3s linear infinite',
|
||||
}}
|
||||
/>
|
||||
{/* Card content */}
|
||||
<div className="relative glass-dark rounded-xl p-6">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
116
frontend/src/components/ui/GlitchText.tsx
Normal file
116
frontend/src/components/ui/GlitchText.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import { type ReactNode, type HTMLAttributes } from 'react'
|
||||
import { clsx } from 'clsx'
|
||||
|
||||
interface GlitchTextProps extends HTMLAttributes<HTMLSpanElement> {
|
||||
children: ReactNode
|
||||
as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'p'
|
||||
intensity?: 'low' | 'medium' | 'high'
|
||||
color?: 'neon' | 'purple' | 'pink' | 'white'
|
||||
hover?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function GlitchText({
|
||||
children,
|
||||
as: Component = 'span',
|
||||
intensity = 'medium',
|
||||
color = 'neon',
|
||||
hover = false,
|
||||
className,
|
||||
...props
|
||||
}: GlitchTextProps) {
|
||||
const text = typeof children === 'string' ? children : ''
|
||||
|
||||
const colorClasses = {
|
||||
neon: 'text-neon-500',
|
||||
purple: 'text-accent-500',
|
||||
pink: 'text-pink-500',
|
||||
white: 'text-white',
|
||||
}
|
||||
|
||||
const glowClasses = {
|
||||
neon: 'neon-text',
|
||||
purple: 'neon-text-purple',
|
||||
pink: '[text-shadow:0_0_10px_#ec4899,0_0_20px_#ec4899,0_0_30px_#ec4899]',
|
||||
white: '[text-shadow:0_0_10px_rgba(255,255,255,0.5),0_0_20px_rgba(255,255,255,0.3)]',
|
||||
}
|
||||
|
||||
const intensityClasses = {
|
||||
low: 'animate-[glitch-skew_2s_infinite_linear_alternate-reverse]',
|
||||
medium: '',
|
||||
high: 'animate-glitch',
|
||||
}
|
||||
|
||||
if (hover) {
|
||||
return (
|
||||
<Component
|
||||
className={clsx(
|
||||
colorClasses[color],
|
||||
'relative inline-block cursor-pointer transition-all duration-300',
|
||||
'hover:' + glowClasses[color],
|
||||
'glitch-hover',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
className={clsx(
|
||||
'glitch relative inline-block',
|
||||
colorClasses[color],
|
||||
glowClasses[color],
|
||||
intensityClasses[intensity],
|
||||
className
|
||||
)}
|
||||
data-text={text}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
)
|
||||
}
|
||||
|
||||
// Simpler glitch effect for headings
|
||||
interface GlitchHeadingProps {
|
||||
children: ReactNode
|
||||
level?: 1 | 2 | 3 | 4
|
||||
className?: string
|
||||
gradient?: boolean
|
||||
}
|
||||
|
||||
export function GlitchHeading({
|
||||
children,
|
||||
level = 1,
|
||||
className,
|
||||
gradient = false,
|
||||
}: GlitchHeadingProps) {
|
||||
const text = typeof children === 'string' ? children : ''
|
||||
|
||||
const sizeClasses = {
|
||||
1: 'text-4xl md:text-5xl lg:text-6xl font-bold',
|
||||
2: 'text-3xl md:text-4xl font-bold',
|
||||
3: 'text-2xl md:text-3xl font-semibold',
|
||||
4: 'text-xl md:text-2xl font-semibold',
|
||||
}
|
||||
|
||||
const Component = `h${level}` as keyof JSX.IntrinsicElements
|
||||
|
||||
return (
|
||||
<Component
|
||||
className={clsx(
|
||||
'glitch relative inline-block',
|
||||
sizeClasses[level],
|
||||
gradient ? 'gradient-neon-text' : 'text-white neon-text',
|
||||
className
|
||||
)}
|
||||
data-text={text}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
)
|
||||
}
|
||||
@@ -11,7 +11,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label htmlFor={id} className="block text-sm font-medium text-gray-300 mb-1">
|
||||
<label htmlFor={id} className="block text-sm font-medium text-gray-300 mb-1.5">
|
||||
{label}
|
||||
</label>
|
||||
)}
|
||||
@@ -19,15 +19,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
ref={ref}
|
||||
id={id}
|
||||
className={clsx(
|
||||
'w-full px-4 py-2 bg-gray-800 border rounded-lg text-white placeholder-gray-500',
|
||||
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
|
||||
'transition-colors',
|
||||
error ? 'border-red-500' : 'border-gray-700',
|
||||
'w-full px-4 py-3 bg-dark-800 border rounded-lg text-white placeholder-gray-500',
|
||||
'focus:outline-none focus:border-neon-500',
|
||||
'focus:shadow-[0_0_0_3px_rgba(0,240,255,0.1),0_0_10px_rgba(0,240,255,0.2)]',
|
||||
'transition-all duration-200',
|
||||
error ? 'border-red-500' : 'border-dark-600',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
{error && <p className="mt-1 text-sm text-red-500">{error}</p>}
|
||||
{error && <p className="mt-1.5 text-sm text-red-400">{error}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
166
frontend/src/components/ui/NeonButton.tsx
Normal file
166
frontend/src/components/ui/NeonButton.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'
|
||||
import { clsx } from 'clsx'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
|
||||
interface NeonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
color?: 'neon' | 'purple' | 'pink'
|
||||
isLoading?: boolean
|
||||
icon?: ReactNode
|
||||
iconPosition?: 'left' | 'right'
|
||||
glow?: boolean
|
||||
pulse?: boolean
|
||||
}
|
||||
|
||||
export const NeonButton = forwardRef<HTMLButtonElement, NeonButtonProps>(
|
||||
(
|
||||
{
|
||||
className,
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
color = 'neon',
|
||||
isLoading,
|
||||
icon,
|
||||
iconPosition = 'left',
|
||||
glow = true,
|
||||
pulse = false,
|
||||
children,
|
||||
disabled,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const colorMap = {
|
||||
neon: {
|
||||
primary: 'bg-neon-500 hover:bg-neon-400 text-dark-900',
|
||||
secondary: 'bg-dark-600 hover:bg-dark-500 text-neon-400 border border-neon-500/30',
|
||||
outline: 'bg-transparent border-2 border-neon-500 text-neon-500 hover:bg-neon-500 hover:text-dark-900',
|
||||
ghost: 'bg-transparent hover:bg-neon-500/10 text-neon-400',
|
||||
danger: 'bg-red-600 hover:bg-red-700 text-white',
|
||||
glow: '0 0 20px rgba(0, 240, 255, 0.5)',
|
||||
glowHover: '0 0 30px rgba(0, 240, 255, 0.7)',
|
||||
},
|
||||
purple: {
|
||||
primary: 'bg-accent-500 hover:bg-accent-400 text-white',
|
||||
secondary: 'bg-dark-600 hover:bg-dark-500 text-accent-400 border border-accent-500/30',
|
||||
outline: 'bg-transparent border-2 border-accent-500 text-accent-500 hover:bg-accent-500 hover:text-white',
|
||||
ghost: 'bg-transparent hover:bg-accent-500/10 text-accent-400',
|
||||
danger: 'bg-red-600 hover:bg-red-700 text-white',
|
||||
glow: '0 0 20px rgba(168, 85, 247, 0.5)',
|
||||
glowHover: '0 0 30px rgba(168, 85, 247, 0.7)',
|
||||
},
|
||||
pink: {
|
||||
primary: 'bg-pink-500 hover:bg-pink-400 text-white',
|
||||
secondary: 'bg-dark-600 hover:bg-dark-500 text-pink-400 border border-pink-500/30',
|
||||
outline: 'bg-transparent border-2 border-pink-500 text-pink-500 hover:bg-pink-500 hover:text-white',
|
||||
ghost: 'bg-transparent hover:bg-pink-500/10 text-pink-400',
|
||||
danger: 'bg-red-600 hover:bg-red-700 text-white',
|
||||
glow: '0 0 20px rgba(236, 72, 153, 0.5)',
|
||||
glowHover: '0 0 30px rgba(236, 72, 153, 0.7)',
|
||||
},
|
||||
}
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'px-3 py-1.5 text-sm gap-1.5',
|
||||
md: 'px-4 py-2.5 text-base gap-2',
|
||||
lg: 'px-6 py-3 text-lg gap-2.5',
|
||||
}
|
||||
|
||||
const iconSizes = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-5 h-5',
|
||||
lg: 'w-6 h-6',
|
||||
}
|
||||
|
||||
const colors = colorMap[color]
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
disabled={disabled || isLoading}
|
||||
className={clsx(
|
||||
'inline-flex items-center justify-center font-semibold rounded-lg',
|
||||
'transition-all duration-300 ease-out',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none',
|
||||
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark-900',
|
||||
color === 'neon' && 'focus:ring-neon-500',
|
||||
color === 'purple' && 'focus:ring-accent-500',
|
||||
color === 'pink' && 'focus:ring-pink-500',
|
||||
colors[variant],
|
||||
sizeClasses[size],
|
||||
pulse && 'neon-glow-pulse',
|
||||
className
|
||||
)}
|
||||
style={{
|
||||
boxShadow: glow && !disabled && variant !== 'ghost' ? colors.glow : undefined,
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (glow && !disabled && variant !== 'ghost') {
|
||||
e.currentTarget.style.boxShadow = colors.glowHover
|
||||
}
|
||||
props.onMouseEnter?.(e)
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (glow && !disabled && variant !== 'ghost') {
|
||||
e.currentTarget.style.boxShadow = colors.glow
|
||||
}
|
||||
props.onMouseLeave?.(e)
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{isLoading && <Loader2 className={clsx(iconSizes[size], 'animate-spin')} />}
|
||||
{!isLoading && icon && iconPosition === 'left' && (
|
||||
<span className={iconSizes[size]}>{icon}</span>
|
||||
)}
|
||||
{children}
|
||||
{!isLoading && icon && iconPosition === 'right' && (
|
||||
<span className={iconSizes[size]}>{icon}</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
NeonButton.displayName = 'NeonButton'
|
||||
|
||||
// Gradient button variant
|
||||
interface GradientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
isLoading?: boolean
|
||||
icon?: ReactNode
|
||||
}
|
||||
|
||||
export const GradientButton = forwardRef<HTMLButtonElement, GradientButtonProps>(
|
||||
({ className, size = 'md', isLoading, icon, children, disabled, ...props }, ref) => {
|
||||
const sizeClasses = {
|
||||
sm: 'px-3 py-1.5 text-sm gap-1.5',
|
||||
md: 'px-4 py-2.5 text-base gap-2',
|
||||
lg: 'px-6 py-3 text-lg gap-2.5',
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
disabled={disabled || isLoading}
|
||||
className={clsx(
|
||||
'relative inline-flex items-center justify-center font-semibold rounded-lg',
|
||||
'bg-gradient-to-r from-neon-500 via-accent-500 to-pink-500',
|
||||
'text-white transition-all duration-300',
|
||||
'hover:shadow-[0_0_30px_rgba(168,85,247,0.5)]',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
'focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 focus:ring-offset-dark-900',
|
||||
sizeClasses[size],
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{isLoading && <Loader2 className="w-5 h-5 animate-spin" />}
|
||||
{!isLoading && icon && <span className="w-5 h-5">{icon}</span>}
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
GradientButton.displayName = 'GradientButton'
|
||||
@@ -4,3 +4,8 @@ export { Card, CardHeader, CardTitle, CardContent } from './Card'
|
||||
export { ToastContainer } from './Toast'
|
||||
export { ConfirmModal } from './ConfirmModal'
|
||||
export { UserAvatar, clearAvatarCache } from './UserAvatar'
|
||||
|
||||
// New design system components
|
||||
export { GlitchText, GlitchHeading } from './GlitchText'
|
||||
export { NeonButton, GradientButton } from './NeonButton'
|
||||
export { GlassCard, StatsCard, FeatureCard, AnimatedBorderCard } from './GlassCard'
|
||||
|
||||
@@ -2,11 +2,118 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
@apply bg-gray-900 text-gray-100 min-h-screen;
|
||||
/* ========================================
|
||||
CSS Variables
|
||||
======================================== */
|
||||
:root {
|
||||
/* Base colors */
|
||||
--color-dark-950: #050508;
|
||||
--color-dark-900: #0a0a0f;
|
||||
--color-dark-800: #12121a;
|
||||
--color-dark-700: #1a1a24;
|
||||
--color-dark-600: #1e1e2e;
|
||||
--color-dark-500: #2a2a3a;
|
||||
|
||||
/* Neon cyan (primary) */
|
||||
--color-neon-500: #00f0ff;
|
||||
--color-neon-400: #22d3ee;
|
||||
--color-neon-600: #00d4e4;
|
||||
|
||||
/* Purple accent */
|
||||
--color-accent-500: #a855f7;
|
||||
--color-accent-600: #9333ea;
|
||||
--color-accent-700: #7c3aed;
|
||||
|
||||
/* Pink highlight */
|
||||
--color-pink-500: #ec4899;
|
||||
|
||||
/* Glow colors */
|
||||
--glow-neon: 0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff;
|
||||
--glow-neon-lg: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff, 0 0 60px #00f0ff;
|
||||
--glow-purple: 0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 20px #a855f7;
|
||||
--glow-pink: 0 0 5px #ec4899, 0 0 10px #ec4899, 0 0 20px #ec4899;
|
||||
|
||||
/* Text glow */
|
||||
--text-glow-neon: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff;
|
||||
--text-glow-purple: 0 0 10px #a855f7, 0 0 20px #a855f7, 0 0 30px #a855f7;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styles */
|
||||
/* ========================================
|
||||
Base Styles
|
||||
======================================== */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-dark-900 text-gray-100 min-h-screen antialiased;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* Noise overlay - can be added to any element */
|
||||
.noise-overlay::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Selection Styles
|
||||
======================================== */
|
||||
::selection {
|
||||
background: rgba(0, 240, 255, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: rgba(0, 240, 255, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Custom Scrollbar (Neon Style)
|
||||
======================================== */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-dark-800);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, var(--color-neon-500), var(--color-accent-500));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, var(--color-neon-400), var(--color-accent-600));
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: var(--color-dark-800);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-neon-500) var(--color-dark-800);
|
||||
}
|
||||
|
||||
/* Custom scrollbar class for specific elements */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
@@ -16,46 +123,450 @@ body {
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #4b5563;
|
||||
background: var(--color-dark-500);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #6b7280;
|
||||
background: var(--color-neon-500);
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #4b5563 transparent;
|
||||
/* ========================================
|
||||
Glitch Effect
|
||||
======================================== */
|
||||
.glitch {
|
||||
position: relative;
|
||||
animation: glitch-skew 1s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
.glitch::before,
|
||||
.glitch::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.glitch::before {
|
||||
left: 2px;
|
||||
text-shadow: -2px 0 #ff00ff;
|
||||
clip: rect(44px, 450px, 56px, 0);
|
||||
animation: glitch-anim 5s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
.glitch::after {
|
||||
left: -2px;
|
||||
text-shadow: -2px 0 #00ffff, 2px 2px #ff00ff;
|
||||
clip: rect(44px, 450px, 56px, 0);
|
||||
animation: glitch-anim2 5s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
@keyframes glitch-anim {
|
||||
0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.85deg); }
|
||||
5% { clip: rect(70px, 9999px, 71px, 0); transform: skew(0.07deg); }
|
||||
10% { clip: rect(29px, 9999px, 24px, 0); transform: skew(0.22deg); }
|
||||
15% { clip: rect(69px, 9999px, 63px, 0); transform: skew(0.52deg); }
|
||||
20% { clip: rect(13px, 9999px, 71px, 0); transform: skew(0.72deg); }
|
||||
25% { clip: rect(39px, 9999px, 89px, 0); transform: skew(0.24deg); }
|
||||
30% { clip: rect(87px, 9999px, 98px, 0); transform: skew(0.63deg); }
|
||||
35% { clip: rect(63px, 9999px, 16px, 0); transform: skew(0.15deg); }
|
||||
40% { clip: rect(92px, 9999px, 4px, 0); transform: skew(0.83deg); }
|
||||
45% { clip: rect(67px, 9999px, 72px, 0); transform: skew(0.19deg); }
|
||||
50% { clip: rect(43px, 9999px, 21px, 0); transform: skew(0.74deg); }
|
||||
55% { clip: rect(75px, 9999px, 54px, 0); transform: skew(0.28deg); }
|
||||
60% { clip: rect(17px, 9999px, 86px, 0); transform: skew(0.91deg); }
|
||||
65% { clip: rect(51px, 9999px, 32px, 0); transform: skew(0.46deg); }
|
||||
70% { clip: rect(29px, 9999px, 69px, 0); transform: skew(0.38deg); }
|
||||
75% { clip: rect(84px, 9999px, 11px, 0); transform: skew(0.67deg); }
|
||||
80% { clip: rect(38px, 9999px, 82px, 0); transform: skew(0.12deg); }
|
||||
85% { clip: rect(61px, 9999px, 47px, 0); transform: skew(0.54deg); }
|
||||
90% { clip: rect(22px, 9999px, 91px, 0); transform: skew(0.33deg); }
|
||||
95% { clip: rect(79px, 9999px, 28px, 0); transform: skew(0.79deg); }
|
||||
100% { clip: rect(56px, 9999px, 65px, 0); transform: skew(0.41deg); }
|
||||
}
|
||||
|
||||
@keyframes glitch-anim2 {
|
||||
0% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.63deg); }
|
||||
5% { clip: rect(52px, 9999px, 74px, 0); transform: skew(0.29deg); }
|
||||
10% { clip: rect(79px, 9999px, 85px, 0); transform: skew(0.84deg); }
|
||||
15% { clip: rect(43px, 9999px, 27px, 0); transform: skew(0.17deg); }
|
||||
20% { clip: rect(16px, 9999px, 92px, 0); transform: skew(0.56deg); }
|
||||
25% { clip: rect(88px, 9999px, 36px, 0); transform: skew(0.39deg); }
|
||||
30% { clip: rect(32px, 9999px, 68px, 0); transform: skew(0.71deg); }
|
||||
35% { clip: rect(71px, 9999px, 13px, 0); transform: skew(0.23deg); }
|
||||
40% { clip: rect(24px, 9999px, 57px, 0); transform: skew(0.92deg); }
|
||||
45% { clip: rect(83px, 9999px, 41px, 0); transform: skew(0.48deg); }
|
||||
50% { clip: rect(19px, 9999px, 79px, 0); transform: skew(0.35deg); }
|
||||
55% { clip: rect(67px, 9999px, 23px, 0); transform: skew(0.76deg); }
|
||||
60% { clip: rect(45px, 9999px, 96px, 0); transform: skew(0.14deg); }
|
||||
65% { clip: rect(91px, 9999px, 51px, 0); transform: skew(0.58deg); }
|
||||
70% { clip: rect(28px, 9999px, 83px, 0); transform: skew(0.87deg); }
|
||||
75% { clip: rect(76px, 9999px, 19px, 0); transform: skew(0.26deg); }
|
||||
80% { clip: rect(53px, 9999px, 67px, 0); transform: skew(0.69deg); }
|
||||
85% { clip: rect(14px, 9999px, 89px, 0); transform: skew(0.43deg); }
|
||||
90% { clip: rect(62px, 9999px, 34px, 0); transform: skew(0.81deg); }
|
||||
95% { clip: rect(37px, 9999px, 76px, 0); transform: skew(0.52deg); }
|
||||
100% { clip: rect(86px, 9999px, 48px, 0); transform: skew(0.31deg); }
|
||||
}
|
||||
|
||||
@keyframes glitch-skew {
|
||||
0% { transform: skew(-2deg); }
|
||||
10% { transform: skew(1deg); }
|
||||
20% { transform: skew(-1deg); }
|
||||
30% { transform: skew(0deg); }
|
||||
40% { transform: skew(2deg); }
|
||||
50% { transform: skew(-1deg); }
|
||||
60% { transform: skew(1deg); }
|
||||
70% { transform: skew(0deg); }
|
||||
80% { transform: skew(-2deg); }
|
||||
90% { transform: skew(1deg); }
|
||||
100% { transform: skew(0deg); }
|
||||
}
|
||||
|
||||
/* Simpler glitch for hover states */
|
||||
.glitch-hover:hover {
|
||||
animation: glitch-simple 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes glitch-simple {
|
||||
0%, 100% { transform: translate(0); }
|
||||
20% { transform: translate(-2px, 2px); }
|
||||
40% { transform: translate(-2px, -2px); }
|
||||
60% { transform: translate(2px, 2px); }
|
||||
80% { transform: translate(2px, -2px); }
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Neon Glow Effects
|
||||
======================================== */
|
||||
.neon-glow {
|
||||
box-shadow: var(--glow-neon);
|
||||
}
|
||||
|
||||
.neon-glow-lg {
|
||||
box-shadow: var(--glow-neon-lg);
|
||||
}
|
||||
|
||||
.neon-glow-purple {
|
||||
box-shadow: var(--glow-purple);
|
||||
}
|
||||
|
||||
.neon-glow-pink {
|
||||
box-shadow: var(--glow-pink);
|
||||
}
|
||||
|
||||
.neon-text {
|
||||
text-shadow: var(--text-glow-neon);
|
||||
}
|
||||
|
||||
.neon-text-purple {
|
||||
text-shadow: var(--text-glow-purple);
|
||||
}
|
||||
|
||||
/* Animated glow */
|
||||
.neon-glow-pulse {
|
||||
animation: neon-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes neon-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff, 0 0 60px #00f0ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Glass Effect (Glassmorphism)
|
||||
======================================== */
|
||||
.glass {
|
||||
background: rgba(18, 18, 26, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(10, 10, 15, 0.8);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.glass-neon {
|
||||
background: rgba(18, 18, 26, 0.6);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(0, 240, 255, 0.2);
|
||||
box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.05);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Gradient Utilities
|
||||
======================================== */
|
||||
.gradient-neon {
|
||||
background: linear-gradient(135deg, #00f0ff, #a855f7);
|
||||
}
|
||||
|
||||
.gradient-neon-text {
|
||||
background: linear-gradient(135deg, #00f0ff, #a855f7);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.gradient-pink-purple {
|
||||
background: linear-gradient(135deg, #ec4899, #a855f7);
|
||||
}
|
||||
|
||||
.gradient-dark {
|
||||
background: linear-gradient(180deg, var(--color-dark-900), var(--color-dark-950));
|
||||
}
|
||||
|
||||
/* Animated gradient border */
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
background: var(--color-dark-800);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.gradient-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
background: linear-gradient(90deg, #00f0ff, #a855f7, #ec4899, #00f0ff);
|
||||
background-size: 300% 300%;
|
||||
border-radius: 14px;
|
||||
z-index: -1;
|
||||
animation: gradient-flow 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Shimmer Effect
|
||||
======================================== */
|
||||
.shimmer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shimmer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
transparent
|
||||
);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Component Layer
|
||||
======================================== */
|
||||
@layer components {
|
||||
/* Buttons */
|
||||
.btn {
|
||||
@apply px-4 py-2 rounded-lg font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
@apply px-4 py-2 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-primary-600 hover:bg-primary-700 text-white;
|
||||
@apply bg-neon-500 hover:bg-neon-400 text-dark-900 font-semibold;
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-gray-700 hover:bg-gray-600 text-white;
|
||||
@apply bg-dark-600 hover:bg-dark-500 text-white border border-dark-500;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply bg-red-600 hover:bg-red-700 text-white;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply bg-transparent hover:bg-dark-700 text-gray-300 hover:text-white;
|
||||
}
|
||||
|
||||
.btn-neon {
|
||||
@apply relative bg-transparent border-2 border-neon-500 text-neon-500 font-semibold overflow-hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-neon:hover {
|
||||
@apply text-dark-900;
|
||||
background: var(--color-neon-500);
|
||||
box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.input {
|
||||
@apply w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
|
||||
@apply w-full px-4 py-3 bg-dark-800 border border-dark-600 rounded-lg text-white placeholder-gray-500 transition-all duration-200;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
@apply outline-none border-neon-500;
|
||||
box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1), 0 0 10px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
@apply bg-gray-800 rounded-xl p-6 shadow-lg;
|
||||
@apply bg-dark-800 rounded-xl p-6 border border-dark-600;
|
||||
}
|
||||
|
||||
.card-glass {
|
||||
@apply rounded-xl p-6;
|
||||
background: rgba(18, 18, 26, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply transition-all duration-300;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
@apply -translate-y-1;
|
||||
box-shadow: 0 10px 40px rgba(0, 240, 255, 0.1);
|
||||
border-color: rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.link {
|
||||
@apply text-primary-400 hover:text-primary-300 transition-colors;
|
||||
@apply text-neon-500 hover:text-neon-400 transition-colors;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.badge-neon {
|
||||
@apply bg-neon-500/20 text-neon-400 border border-neon-500/30;
|
||||
}
|
||||
|
||||
.badge-purple {
|
||||
@apply bg-accent-500/20 text-accent-400 border border-accent-500/30;
|
||||
}
|
||||
|
||||
.badge-pink {
|
||||
@apply bg-pink-500/20 text-pink-400 border border-pink-500/30;
|
||||
}
|
||||
|
||||
/* Dividers */
|
||||
.divider {
|
||||
@apply border-t border-dark-600;
|
||||
}
|
||||
|
||||
.divider-glow {
|
||||
@apply border-t border-neon-500/30;
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Utility Animations
|
||||
======================================== */
|
||||
.hover-lift {
|
||||
@apply transition-transform duration-300;
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
@apply -translate-y-1;
|
||||
}
|
||||
|
||||
.hover-glow {
|
||||
@apply transition-shadow duration-300;
|
||||
}
|
||||
|
||||
.hover-glow:hover {
|
||||
box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
.hover-border-glow {
|
||||
@apply transition-all duration-300;
|
||||
}
|
||||
|
||||
.hover-border-glow:hover {
|
||||
border-color: rgba(0, 240, 255, 0.5);
|
||||
box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Stagger children animations */
|
||||
.stagger-children > * {
|
||||
@apply animate-slide-in-up;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
|
||||
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
|
||||
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
|
||||
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
|
||||
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
|
||||
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
|
||||
.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
|
||||
.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
|
||||
|
||||
/* ========================================
|
||||
Skeleton Loading
|
||||
======================================== */
|
||||
.skeleton {
|
||||
@apply relative overflow-hidden bg-dark-700 rounded;
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.05),
|
||||
transparent
|
||||
);
|
||||
animation: skeleton-pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-pulse {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Focus States (Accessibility)
|
||||
======================================== */
|
||||
.focus-ring {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-neon-500 focus:ring-offset-2 focus:ring-offset-dark-900;
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,13 +2,13 @@ import { useState, useEffect } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import { assignmentsApi } from '@/api'
|
||||
import type { AssignmentDetail } from '@/types'
|
||||
import { Card, CardContent, Button } from '@/components/ui'
|
||||
import { GlassCard, NeonButton } from '@/components/ui'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { useToast } from '@/store/toast'
|
||||
import {
|
||||
ArrowLeft, Loader2, ExternalLink, Image, MessageSquare,
|
||||
ThumbsUp, ThumbsDown, AlertTriangle, Clock, CheckCircle, XCircle,
|
||||
Send, Flag
|
||||
Send, Flag, Gamepad2, Zap, Trophy
|
||||
} from 'lucide-react'
|
||||
|
||||
export function AssignmentDetailPage() {
|
||||
@@ -142,373 +142,412 @@ export function AssignmentDetailPage() {
|
||||
return `${hours}ч ${minutes}м`
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const getStatusConfig = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return (
|
||||
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
|
||||
<CheckCircle className="w-4 h-4" /> Выполнено
|
||||
</span>
|
||||
)
|
||||
return {
|
||||
color: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||
icon: <CheckCircle className="w-4 h-4" />,
|
||||
text: 'Выполнено',
|
||||
}
|
||||
case 'dropped':
|
||||
return (
|
||||
<span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
|
||||
<XCircle className="w-4 h-4" /> Пропущено
|
||||
</span>
|
||||
)
|
||||
return {
|
||||
color: 'bg-red-500/20 text-red-400 border-red-500/30',
|
||||
icon: <XCircle className="w-4 h-4" />,
|
||||
text: 'Пропущено',
|
||||
}
|
||||
case 'returned':
|
||||
return (
|
||||
<span className="px-3 py-1 bg-orange-500/20 text-orange-400 rounded-full text-sm flex items-center gap-1">
|
||||
<AlertTriangle className="w-4 h-4" /> Возвращено
|
||||
</span>
|
||||
)
|
||||
return {
|
||||
color: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
|
||||
icon: <AlertTriangle className="w-4 h-4" />,
|
||||
text: 'Возвращено',
|
||||
}
|
||||
default:
|
||||
return (
|
||||
<span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm">
|
||||
Активно
|
||||
</span>
|
||||
)
|
||||
return {
|
||||
color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
|
||||
icon: <Zap className="w-4 h-4" />,
|
||||
text: 'Активно',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
||||
<p className="text-gray-400">Загрузка...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error || !assignment) {
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto text-center py-12">
|
||||
<p className="text-red-400 mb-4">{error || 'Задание не найдено'}</p>
|
||||
<Button onClick={() => navigate(-1)}>Назад</Button>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<GlassCard className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-red-500/10 border border-red-500/30 flex items-center justify-center">
|
||||
<AlertTriangle className="w-8 h-8 text-red-400" />
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6">{error || 'Задание не найдено'}</p>
|
||||
<NeonButton variant="outline" onClick={() => navigate(-1)}>
|
||||
Назад
|
||||
</NeonButton>
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const dispute = assignment.dispute
|
||||
const status = getStatusConfig(assignment.status)
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="max-w-2xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<button onClick={() => navigate(-1)} className="text-gray-400 hover:text-white">
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="w-10 h-10 rounded-xl bg-dark-700 border border-dark-600 flex items-center justify-center text-gray-400 hover:text-white hover:border-neon-500/30 transition-all"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<h1 className="text-xl font-bold text-white">Детали выполнения</h1>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white">Детали выполнения</h1>
|
||||
<p className="text-sm text-gray-400">Просмотр доказательства</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Challenge info */}
|
||||
<Card className="mb-6">
|
||||
<CardContent>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<GlassCard variant="neon">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 border border-neon-500/20 flex items-center justify-center">
|
||||
<Gamepad2 className="w-7 h-7 text-neon-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm">{assignment.challenge.game.title}</p>
|
||||
<h2 className="text-xl font-bold text-white">{assignment.challenge.title}</h2>
|
||||
</div>
|
||||
{getStatusBadge(assignment.status)}
|
||||
</div>
|
||||
<span className={`px-3 py-1.5 rounded-full text-sm font-medium border flex items-center gap-1.5 ${status.color}`}>
|
||||
{status.icon}
|
||||
{status.text}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-300 mb-4">{assignment.challenge.description}</p>
|
||||
<p className="text-gray-300 mb-4">{assignment.challenge.description}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">
|
||||
+{assignment.challenge.points} очков
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
<span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30 flex items-center gap-1.5">
|
||||
<Trophy className="w-4 h-4" />
|
||||
+{assignment.challenge.points} очков
|
||||
</span>
|
||||
<span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600">
|
||||
{assignment.challenge.difficulty}
|
||||
</span>
|
||||
{assignment.challenge.estimated_time && (
|
||||
<span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600 flex items-center gap-1.5">
|
||||
<Clock className="w-4 h-4" />
|
||||
~{assignment.challenge.estimated_time} мин
|
||||
</span>
|
||||
<span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
|
||||
{assignment.challenge.difficulty}
|
||||
</span>
|
||||
{assignment.challenge.estimated_time && (
|
||||
<span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
|
||||
~{assignment.challenge.estimated_time} мин
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-400 space-y-1">
|
||||
<div className="pt-4 border-t border-dark-600 text-sm text-gray-400 space-y-1">
|
||||
<p>
|
||||
<span className="text-gray-500">Выполнил:</span>{' '}
|
||||
<span className="text-white">{assignment.participant.nickname}</span>
|
||||
</p>
|
||||
{assignment.completed_at && (
|
||||
<p>
|
||||
<strong>Выполнил:</strong> {assignment.participant.nickname}
|
||||
<span className="text-gray-500">Дата:</span>{' '}
|
||||
<span className="text-white">{formatDate(assignment.completed_at)}</span>
|
||||
</p>
|
||||
{assignment.completed_at && (
|
||||
<p>
|
||||
<strong>Дата:</strong> {formatDate(assignment.completed_at)}
|
||||
</p>
|
||||
)}
|
||||
{assignment.points_earned > 0 && (
|
||||
<p>
|
||||
<strong>Получено очков:</strong> {assignment.points_earned}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
{assignment.points_earned > 0 && (
|
||||
<p>
|
||||
<span className="text-gray-500">Получено очков:</span>{' '}
|
||||
<span className="text-neon-400 font-semibold">{assignment.points_earned}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Proof section */}
|
||||
<Card className="mb-6">
|
||||
<CardContent>
|
||||
<h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
||||
<Image className="w-5 h-5" />
|
||||
Доказательство
|
||||
</h3>
|
||||
<GlassCard>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||||
<Image className="w-5 h-5 text-accent-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Доказательство</h3>
|
||||
<p className="text-sm text-gray-400">Пруф выполнения задания</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Proof media (image or video) */}
|
||||
{assignment.proof_image_url && (
|
||||
<div className="mb-4">
|
||||
{proofMediaBlobUrl ? (
|
||||
proofMediaType === 'video' ? (
|
||||
<video
|
||||
src={proofMediaBlobUrl}
|
||||
controls
|
||||
className="w-full rounded-lg max-h-96 bg-gray-900"
|
||||
preload="metadata"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={proofMediaBlobUrl}
|
||||
alt="Proof"
|
||||
className="w-full rounded-lg max-h-96 object-contain bg-gray-900"
|
||||
/>
|
||||
)
|
||||
{/* Proof media (image or video) */}
|
||||
{assignment.proof_image_url && (
|
||||
<div className="mb-4 rounded-xl overflow-hidden border border-dark-600">
|
||||
{proofMediaBlobUrl ? (
|
||||
proofMediaType === 'video' ? (
|
||||
<video
|
||||
src={proofMediaBlobUrl}
|
||||
controls
|
||||
className="w-full max-h-96 bg-dark-900"
|
||||
preload="metadata"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-48 bg-gray-900 rounded-lg flex items-center justify-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-gray-500" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={proofMediaBlobUrl}
|
||||
alt="Proof"
|
||||
className="w-full max-h-96 object-contain bg-dark-900"
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<div className="w-full h-48 bg-dark-900 flex items-center justify-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-gray-500" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Proof URL */}
|
||||
{assignment.proof_url && (
|
||||
<div className="mb-4">
|
||||
<a
|
||||
href={assignment.proof_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 text-primary-400 hover:text-primary-300"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
{assignment.proof_url}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{/* Proof URL */}
|
||||
{assignment.proof_url && (
|
||||
<div className="mb-4">
|
||||
<a
|
||||
href={assignment.proof_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 text-neon-400 hover:text-neon-300 transition-colors"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
{assignment.proof_url}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Proof comment */}
|
||||
{assignment.proof_comment && (
|
||||
<div className="p-3 bg-gray-900 rounded-lg">
|
||||
<p className="text-sm text-gray-400 mb-1">Комментарий:</p>
|
||||
<p className="text-white">{assignment.proof_comment}</p>
|
||||
</div>
|
||||
)}
|
||||
{/* Proof comment */}
|
||||
{assignment.proof_comment && (
|
||||
<div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600">
|
||||
<p className="text-sm text-gray-400 mb-1">Комментарий:</p>
|
||||
<p className="text-white">{assignment.proof_comment}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!assignment.proof_image_url && !assignment.proof_url && (
|
||||
<p className="text-gray-500 text-center py-4">Пруф не предоставлен</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{!assignment.proof_image_url && !assignment.proof_url && (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-dark-700 flex items-center justify-center">
|
||||
<Image className="w-6 h-6 text-gray-600" />
|
||||
</div>
|
||||
<p className="text-gray-500">Пруф не предоставлен</p>
|
||||
</div>
|
||||
)}
|
||||
</GlassCard>
|
||||
|
||||
{/* Dispute button */}
|
||||
{assignment.can_dispute && !dispute && !showDisputeForm && (
|
||||
<Button
|
||||
variant="danger"
|
||||
className="w-full mb-6"
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
className="w-full border-red-500/50 text-red-400 hover:bg-red-500/10"
|
||||
onClick={() => setShowDisputeForm(true)}
|
||||
icon={<Flag className="w-4 h-4" />}
|
||||
>
|
||||
<Flag className="w-4 h-4 mr-2" />
|
||||
Оспорить выполнение
|
||||
</Button>
|
||||
</NeonButton>
|
||||
)}
|
||||
|
||||
{/* Dispute creation form */}
|
||||
{showDisputeForm && !dispute && (
|
||||
<Card className="mb-6 border-red-500/50">
|
||||
<CardContent>
|
||||
<h3 className="text-lg font-bold text-red-400 mb-4 flex items-center gap-2">
|
||||
<AlertTriangle className="w-5 h-5" />
|
||||
Оспорить выполнение
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-400 text-sm mb-4">
|
||||
Опишите причину оспаривания. После создания у участников будет 24 часа для голосования.
|
||||
</p>
|
||||
|
||||
<textarea
|
||||
className="input w-full min-h-[100px] resize-none mb-4"
|
||||
placeholder="Причина оспаривания (минимум 10 символов)..."
|
||||
value={disputeReason}
|
||||
onChange={(e) => setDisputeReason(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="danger"
|
||||
className="flex-1"
|
||||
onClick={handleCreateDispute}
|
||||
isLoading={isCreatingDispute}
|
||||
disabled={disputeReason.trim().length < 10}
|
||||
>
|
||||
Оспорить
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setShowDisputeForm(false)
|
||||
setDisputeReason('')
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<GlassCard className="border-red-500/30">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
|
||||
<AlertTriangle className="w-5 h-5 text-red-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div>
|
||||
<h3 className="font-semibold text-red-400">Оспорить выполнение</h3>
|
||||
<p className="text-sm text-gray-400">У участников будет 24 часа для голосования</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
className="input w-full min-h-[100px] resize-none mb-4"
|
||||
placeholder="Причина оспаривания (минимум 10 символов)..."
|
||||
value={disputeReason}
|
||||
onChange={(e) => setDisputeReason(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<NeonButton
|
||||
className="flex-1 border-red-500/50 bg-red-500/10 hover:bg-red-500/20 text-red-400"
|
||||
onClick={handleCreateDispute}
|
||||
isLoading={isCreatingDispute}
|
||||
disabled={disputeReason.trim().length < 10}
|
||||
>
|
||||
Оспорить
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowDisputeForm(false)
|
||||
setDisputeReason('')
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</NeonButton>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Dispute section */}
|
||||
{dispute && (
|
||||
<Card className={`mb-6 ${dispute.status === 'open' ? 'border-yellow-500/50' : ''}`}>
|
||||
<CardContent>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="text-lg font-bold text-yellow-400 flex items-center gap-2">
|
||||
<AlertTriangle className="w-5 h-5" />
|
||||
Оспаривание
|
||||
</h3>
|
||||
<GlassCard className={dispute.status === 'open' ? 'border-yellow-500/30' : ''}>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
|
||||
<AlertTriangle className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-yellow-400">Оспаривание</h3>
|
||||
</div>
|
||||
|
||||
{dispute.status === 'open' ? (
|
||||
<span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm flex items-center gap-1">
|
||||
<Clock className="w-4 h-4" />
|
||||
{getTimeRemaining(dispute.expires_at)}
|
||||
</span>
|
||||
) : dispute.status === 'valid' ? (
|
||||
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
Пруф валиден
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
|
||||
<XCircle className="w-4 h-4" />
|
||||
Пруф невалиден
|
||||
</span>
|
||||
{dispute.status === 'open' ? (
|
||||
<span className="px-3 py-1.5 bg-yellow-500/20 text-yellow-400 rounded-lg text-sm font-medium border border-yellow-500/30 flex items-center gap-1.5">
|
||||
<Clock className="w-4 h-4" />
|
||||
{getTimeRemaining(dispute.expires_at)}
|
||||
</span>
|
||||
) : dispute.status === 'valid' ? (
|
||||
<span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30 flex items-center gap-1.5">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
Пруф валиден
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-3 py-1.5 bg-red-500/20 text-red-400 rounded-lg text-sm font-medium border border-red-500/30 flex items-center gap-1.5">
|
||||
<XCircle className="w-4 h-4" />
|
||||
Пруф невалиден
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4 text-sm text-gray-400">
|
||||
<p>
|
||||
Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
|
||||
</p>
|
||||
<p>
|
||||
Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600 mb-4">
|
||||
<p className="text-sm text-gray-400 mb-1">Причина:</p>
|
||||
<p className="text-white">{dispute.reason}</p>
|
||||
</div>
|
||||
|
||||
{/* Voting section */}
|
||||
{dispute.status === 'open' && (
|
||||
<div className="mb-6 p-4 bg-dark-700/30 rounded-xl border border-dark-600">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Голосование</h4>
|
||||
|
||||
<div className="flex items-center gap-6 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center">
|
||||
<ThumbsUp className="w-4 h-4 text-green-400" />
|
||||
</div>
|
||||
<span className="text-green-400 font-bold text-lg">{dispute.votes_valid}</span>
|
||||
<span className="text-gray-500 text-sm">валидно</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center">
|
||||
<ThumbsDown className="w-4 h-4 text-red-400" />
|
||||
</div>
|
||||
<span className="text-red-400 font-bold text-lg">{dispute.votes_invalid}</span>
|
||||
<span className="text-gray-500 text-sm">невалидно</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<NeonButton
|
||||
className={`flex-1 ${dispute.my_vote === true ? 'bg-green-500/20 border-green-500/50 text-green-400' : ''}`}
|
||||
variant="outline"
|
||||
onClick={() => handleVote(true)}
|
||||
isLoading={isVoting}
|
||||
disabled={isVoting}
|
||||
icon={<ThumbsUp className="w-4 h-4" />}
|
||||
>
|
||||
Валидно
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
className={`flex-1 ${dispute.my_vote === false ? 'bg-red-500/20 border-red-500/50 text-red-400' : ''}`}
|
||||
variant="outline"
|
||||
onClick={() => handleVote(false)}
|
||||
isLoading={isVoting}
|
||||
disabled={isVoting}
|
||||
icon={<ThumbsDown className="w-4 h-4" />}
|
||||
>
|
||||
Невалидно
|
||||
</NeonButton>
|
||||
</div>
|
||||
|
||||
{dispute.my_vote !== null && (
|
||||
<p className="text-sm text-gray-500 mt-3 text-center">
|
||||
Вы проголосовали: <span className={dispute.my_vote ? 'text-green-400' : 'text-red-400'}>
|
||||
{dispute.my_vote ? 'валидно' : 'невалидно'}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm text-gray-400">
|
||||
Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
|
||||
</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
|
||||
</p>
|
||||
{/* Comments section */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<MessageSquare className="w-4 h-4 text-gray-400" />
|
||||
<h4 className="text-sm font-semibold text-white">
|
||||
Обсуждение ({dispute.comments.length})
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-gray-900 rounded-lg mb-4">
|
||||
<p className="text-sm text-gray-400 mb-1">Причина:</p>
|
||||
<p className="text-white">{dispute.reason}</p>
|
||||
</div>
|
||||
|
||||
{/* Voting section */}
|
||||
{dispute.status === 'open' && (
|
||||
<div className="mb-4">
|
||||
<h4 className="text-sm font-medium text-gray-300 mb-3">Голосование</h4>
|
||||
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<ThumbsUp className="w-5 h-5 text-green-500" />
|
||||
<span className="text-green-400 font-medium">{dispute.votes_valid}</span>
|
||||
<span className="text-gray-500 text-sm">валидно</span>
|
||||
{dispute.comments.length > 0 && (
|
||||
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto custom-scrollbar">
|
||||
{dispute.comments.map((comment) => (
|
||||
<div key={comment.id} className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className={`font-medium ${comment.user.id === user?.id ? 'text-neon-400' : 'text-white'}`}>
|
||||
{comment.user.nickname}
|
||||
{comment.user.id === user?.id && ' (Вы)'}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{formatDate(comment.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-300 text-sm">{comment.text}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ThumbsDown className="w-5 h-5 text-red-500" />
|
||||
<span className="text-red-400 font-medium">{dispute.votes_invalid}</span>
|
||||
<span className="text-gray-500 text-sm">невалидно</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant={dispute.my_vote === true ? 'primary' : 'secondary'}
|
||||
className="flex-1"
|
||||
onClick={() => handleVote(true)}
|
||||
isLoading={isVoting}
|
||||
disabled={isVoting}
|
||||
>
|
||||
<ThumbsUp className="w-4 h-4 mr-2" />
|
||||
Валидно
|
||||
</Button>
|
||||
<Button
|
||||
variant={dispute.my_vote === false ? 'danger' : 'secondary'}
|
||||
className="flex-1"
|
||||
onClick={() => handleVote(false)}
|
||||
isLoading={isVoting}
|
||||
disabled={isVoting}
|
||||
>
|
||||
<ThumbsDown className="w-4 h-4 mr-2" />
|
||||
Невалидно
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{dispute.my_vote !== null && (
|
||||
<p className="text-sm text-gray-500 mt-2 text-center">
|
||||
Вы проголосовали: {dispute.my_vote ? 'валидно' : 'невалидно'}
|
||||
</p>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Comments section */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center gap-2">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
Обсуждение ({dispute.comments.length})
|
||||
</h4>
|
||||
|
||||
{dispute.comments.length > 0 && (
|
||||
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
|
||||
{dispute.comments.map((comment) => (
|
||||
<div key={comment.id} className="p-3 bg-gray-900 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className={`font-medium ${comment.user.id === user?.id ? 'text-primary-400' : 'text-white'}`}>
|
||||
{comment.user.nickname}
|
||||
{comment.user.id === user?.id && ' (Вы)'}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{formatDate(comment.created_at)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-300 text-sm">{comment.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add comment form */}
|
||||
{dispute.status === 'open' && (
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
className="input flex-1"
|
||||
placeholder="Написать комментарий..."
|
||||
value={commentText}
|
||||
onChange={(e) => setCommentText(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleAddComment()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
onClick={handleAddComment}
|
||||
isLoading={isAddingComment}
|
||||
disabled={!commentText.trim()}
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Add comment form */}
|
||||
{dispute.status === 'open' && (
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
className="input flex-1"
|
||||
placeholder="Написать комментарий..."
|
||||
value={commentText}
|
||||
onChange={(e) => setCommentText(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleAddComment()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<NeonButton
|
||||
onClick={handleAddComment}
|
||||
isLoading={isAddingComment}
|
||||
disabled={!commentText.trim()}
|
||||
icon={<Send className="w-4 h-4" />}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -4,8 +4,8 @@ import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { marathonsApi } from '@/api'
|
||||
import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
|
||||
import { Globe, Lock, Users, UserCog, ArrowLeft } from 'lucide-react'
|
||||
import { NeonButton, Input, GlassCard } from '@/components/ui'
|
||||
import { Globe, Lock, Users, UserCog, ArrowLeft, Gamepad2, AlertCircle, Sparkles, Calendar, Clock } from 'lucide-react'
|
||||
import type { GameProposalMode } from '@/types'
|
||||
|
||||
const createSchema = z.object({
|
||||
@@ -64,25 +64,38 @@ export function CreateMarathonPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-lg mx-auto">
|
||||
<div className="max-w-xl mx-auto">
|
||||
{/* Back button */}
|
||||
<Link to="/marathons" className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
<Link
|
||||
to="/marathons"
|
||||
className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
||||
К списку марафонов
|
||||
</Link>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Создать марафон</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-500/20 border border-red-500 rounded-lg text-red-500 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<GlassCard variant="neon">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/30">
|
||||
<Gamepad2 className="w-7 h-7 text-neon-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Создать марафон</h1>
|
||||
<p className="text-gray-400 text-sm">Настройте свой игровой марафон</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{error && (
|
||||
<div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-red-400 text-sm animate-shake">
|
||||
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Basic info */}
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label="Название"
|
||||
placeholder="Введите название марафона"
|
||||
@@ -91,132 +104,209 @@ export function CreateMarathonPage() {
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-1">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Описание (необязательно)
|
||||
</label>
|
||||
<textarea
|
||||
className="input min-h-[100px] resize-none"
|
||||
placeholder="Введите описание"
|
||||
placeholder="Расскажите о вашем марафоне..."
|
||||
{...register('description')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Дата начала"
|
||||
type="datetime-local"
|
||||
error={errors.start_date?.message}
|
||||
{...register('start_date')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Длительность (дней)"
|
||||
type="number"
|
||||
error={errors.duration_days?.message}
|
||||
{...register('duration_days', { valueAsNumber: true })}
|
||||
/>
|
||||
|
||||
{/* Тип марафона */}
|
||||
{/* Date and duration */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Тип марафона
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
|
||||
<Calendar className="w-4 h-4 text-neon-400" />
|
||||
Дата начала
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('is_public', false)}
|
||||
className={`p-3 rounded-lg border-2 transition-all ${
|
||||
!isPublic
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-gray-700 bg-gray-800 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<Lock className={`w-5 h-5 mx-auto mb-1 ${!isPublic ? 'text-primary-400' : 'text-gray-400'}`} />
|
||||
<div className={`text-sm font-medium ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
|
||||
Закрытый
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Вход по коду
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('is_public', true)}
|
||||
className={`p-3 rounded-lg border-2 transition-all ${
|
||||
isPublic
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-gray-700 bg-gray-800 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<Globe className={`w-5 h-5 mx-auto mb-1 ${isPublic ? 'text-primary-400' : 'text-gray-400'}`} />
|
||||
<div className={`text-sm font-medium ${isPublic ? 'text-white' : 'text-gray-300'}`}>
|
||||
Открытый
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Виден всем
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="input w-full"
|
||||
{...register('start_date')}
|
||||
/>
|
||||
{errors.start_date && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.start_date.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Кто может предлагать игры */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Кто может предлагать игры
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-300 mb-2">
|
||||
<Clock className="w-4 h-4 text-accent-400" />
|
||||
Длительность (дней)
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('game_proposal_mode', 'all_participants')}
|
||||
className={`p-3 rounded-lg border-2 transition-all ${
|
||||
gameProposalMode === 'all_participants'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-gray-700 bg-gray-800 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<Users className={`w-5 h-5 mx-auto mb-1 ${gameProposalMode === 'all_participants' ? 'text-primary-400' : 'text-gray-400'}`} />
|
||||
<div className={`text-sm font-medium ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Все участники
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
С модерацией
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('game_proposal_mode', 'organizer_only')}
|
||||
className={`p-3 rounded-lg border-2 transition-all ${
|
||||
gameProposalMode === 'organizer_only'
|
||||
? 'border-primary-500 bg-primary-500/10'
|
||||
: 'border-gray-700 bg-gray-800 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
<UserCog className={`w-5 h-5 mx-auto mb-1 ${gameProposalMode === 'organizer_only' ? 'text-primary-400' : 'text-gray-400'}`} />
|
||||
<div className={`text-sm font-medium ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Только организатор
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Без модерации
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
className="input w-full"
|
||||
min={1}
|
||||
max={365}
|
||||
{...register('duration_days', { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.duration_days && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.duration_days.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<Button
|
||||
{/* Marathon type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Тип марафона
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
className="flex-1"
|
||||
onClick={() => navigate('/marathons')}
|
||||
onClick={() => setValue('is_public', false)}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
|
||||
${!isPublic
|
||||
? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button type="submit" className="flex-1" isLoading={isLoading}>
|
||||
Создать
|
||||
</Button>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
||||
${!isPublic ? 'bg-neon-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<Lock className={`w-5 h-5 ${!isPublic ? 'text-neon-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className={`font-semibold mb-1 ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
|
||||
Закрытый
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Вход только по коду приглашения
|
||||
</div>
|
||||
{!isPublic && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<Sparkles className="w-4 h-4 text-neon-400" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('is_public', true)}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
|
||||
${isPublic
|
||||
? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_20px_rgba(168,85,247,0.1)]'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
||||
${isPublic ? 'bg-accent-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<Globe className={`w-5 h-5 ${isPublic ? 'text-accent-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className={`font-semibold mb-1 ${isPublic ? 'text-white' : 'text-gray-300'}`}>
|
||||
Открытый
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Виден всем пользователям
|
||||
</div>
|
||||
{isPublic && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<Sparkles className="w-4 h-4 text-accent-400" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Game proposal mode */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Кто может предлагать игры
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('game_proposal_mode', 'all_participants')}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left
|
||||
${gameProposalMode === 'all_participants'
|
||||
? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
||||
${gameProposalMode === 'all_participants' ? 'bg-neon-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<Users className={`w-5 h-5 ${gameProposalMode === 'all_participants' ? 'text-neon-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className={`font-semibold mb-1 ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Все участники
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
С модерацией организатором
|
||||
</div>
|
||||
{gameProposalMode === 'all_participants' && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<Sparkles className="w-4 h-4 text-neon-400" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('game_proposal_mode', 'organizer_only')}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left
|
||||
${gameProposalMode === 'organizer_only'
|
||||
? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_20px_rgba(168,85,247,0.1)]'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
||||
${gameProposalMode === 'organizer_only' ? 'bg-accent-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<UserCog className={`w-5 h-5 ${gameProposalMode === 'organizer_only' ? 'text-accent-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className={`font-semibold mb-1 ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Только организатор
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Без модерации
|
||||
</div>
|
||||
{gameProposalMode === 'organizer_only' && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<Sparkles className="w-4 h-4 text-accent-400" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-4 border-t border-dark-600">
|
||||
<NeonButton
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={() => navigate('/marathons')}
|
||||
>
|
||||
Отмена
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
type="submit"
|
||||
className="flex-1"
|
||||
isLoading={isLoading}
|
||||
icon={<Sparkles className="w-4 h-4" />}
|
||||
>
|
||||
Создать
|
||||
</NeonButton>
|
||||
</div>
|
||||
</form>
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,113 +1,269 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { Button } from '@/components/ui'
|
||||
import { Gamepad2, Users, Trophy, Sparkles } from 'lucide-react'
|
||||
import { NeonButton, GradientButton, FeatureCard } from '@/components/ui'
|
||||
import { Gamepad2, Users, Trophy, Sparkles, Zap, Target, Crown, ArrowRight } from 'lucide-react'
|
||||
|
||||
export function HomePage() {
|
||||
const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
{/* Hero */}
|
||||
<div className="py-12">
|
||||
<div className="flex justify-center mb-6">
|
||||
<Gamepad2 className="w-20 h-20 text-primary-500" />
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
Игровой Марафон
|
||||
</h1>
|
||||
<p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
|
||||
Соревнуйтесь с друзьями в игровых челленджах. Крутите колесо, выполняйте задания, зарабатывайте очки и станьте чемпионом!
|
||||
</p>
|
||||
<div className="-mt-8">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
|
||||
{/* Animated background */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
{/* Gradient orbs */}
|
||||
<div className="absolute top-1/4 -left-20 w-96 h-96 bg-neon-500/20 rounded-full blur-[100px] animate-float" />
|
||||
<div className="absolute bottom-1/4 -right-20 w-96 h-96 bg-accent-500/20 rounded-full blur-[100px] animate-float" style={{ animationDelay: '-3s' }} />
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-pink-500/10 rounded-full blur-[120px]" />
|
||||
|
||||
<div className="flex gap-4 justify-center">
|
||||
{isAuthenticated ? (
|
||||
<Link to="/marathons">
|
||||
<Button size="lg">К марафонам</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register">
|
||||
<Button size="lg">Начать</Button>
|
||||
{/* Grid lines */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:100px_100px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,black_40%,transparent_100%)]" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 max-w-5xl mx-auto text-center px-4">
|
||||
{/* Logo */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="relative">
|
||||
<Gamepad2 className="w-24 h-24 text-neon-500 animate-float drop-shadow-[0_0_30px_rgba(0,240,255,0.5)]" />
|
||||
<div className="absolute inset-0 bg-neon-500/20 blur-2xl rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title with glitch effect */}
|
||||
<h1 className="relative mb-6">
|
||||
<span className="block text-5xl md:text-7xl font-bold font-display tracking-wider text-white">
|
||||
ИГРОВОЙ
|
||||
</span>
|
||||
<span
|
||||
className="glitch block text-5xl md:text-7xl font-bold font-display tracking-wider text-neon-500 neon-text"
|
||||
data-text="МАРАФОН"
|
||||
>
|
||||
МАРАФОН
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subtitle with typing effect */}
|
||||
<p className="text-xl md:text-2xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
|
||||
Соревнуйтесь с друзьями в{' '}
|
||||
<span className="text-neon-400">игровых челленджах</span>.
|
||||
<br className="hidden md:block" />
|
||||
Крутите колесо, выполняйте задания, станьте{' '}
|
||||
<span className="text-accent-400">чемпионом</span>!
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
{isAuthenticated ? (
|
||||
<Link to="/marathons">
|
||||
<GradientButton size="lg" icon={<ArrowRight className="w-5 h-5" />}>
|
||||
К марафонам
|
||||
</GradientButton>
|
||||
</Link>
|
||||
<Link to="/login">
|
||||
<Button size="lg" variant="secondary">Войти</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="grid md:grid-cols-3 gap-8 py-12">
|
||||
<div className="card text-center">
|
||||
<div className="flex justify-center mb-4">
|
||||
<Sparkles className="w-12 h-12 text-yellow-500" />
|
||||
) : (
|
||||
<>
|
||||
<Link to="/register">
|
||||
<GradientButton size="lg" icon={<Zap className="w-5 h-5" />}>
|
||||
Начать играть
|
||||
</GradientButton>
|
||||
</Link>
|
||||
<Link to="/login">
|
||||
<NeonButton size="lg" variant="outline" color="neon">
|
||||
Войти
|
||||
</NeonButton>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex flex-wrap justify-center gap-8 mt-16">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-neon-400">100+</div>
|
||||
<div className="text-sm text-gray-500">Марафонов</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-accent-400">500+</div>
|
||||
<div className="text-sm text-gray-500">Игроков</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-pink-400">2000+</div>
|
||||
<div className="text-sm text-gray-500">Челленджей</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">Случайные челленджи</h3>
|
||||
<p className="text-gray-400">
|
||||
Крутите колесо, чтобы получить случайную игру и задание. Проверьте свои навыки неожиданным способом!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="card text-center">
|
||||
<div className="flex justify-center mb-4">
|
||||
<Users className="w-12 h-12 text-green-500" />
|
||||
{/* Scroll indicator */}
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<div className="w-6 h-10 border-2 border-gray-600 rounded-full flex justify-center pt-2">
|
||||
<div className="w-1 h-2 bg-neon-500 rounded-full animate-pulse" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">Играйте с друзьями</h3>
|
||||
<p className="text-gray-400">
|
||||
Создавайте приватные марафоны и приглашайте друзей. Каждый добавляет свои любимые игры.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="card text-center">
|
||||
<div className="flex justify-center mb-4">
|
||||
<Trophy className="w-12 h-12 text-primary-500" />
|
||||
{/* Features Section */}
|
||||
<section className="py-24 relative">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
Почему <span className="gradient-neon-text">Игровой Марафон</span>?
|
||||
</h2>
|
||||
<p className="text-gray-400 max-w-2xl mx-auto">
|
||||
Уникальный способ играть с друзьями. Случайные челленджи, честная конкуренция, незабываемые моменты.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 stagger-children">
|
||||
<FeatureCard
|
||||
icon={<Sparkles className="w-7 h-7" />}
|
||||
title="Случайные челленджи"
|
||||
description="Крутите колесо и получайте уникальные задания. ИИ генерирует челленджи специально под ваши игры."
|
||||
color="neon"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Users className="w-7 h-7" />}
|
||||
title="Играйте с друзьями"
|
||||
description="Создавайте приватные марафоны. Каждый добавляет свои игры, все соревнуются на равных."
|
||||
color="purple"
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Trophy className="w-7 h-7" />}
|
||||
title="Зарабатывайте очки"
|
||||
description="Выполняйте задания, собирайте серии побед. Бонусные множители за стрики!"
|
||||
color="pink"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">Соревнуйтесь за очки</h3>
|
||||
<p className="text-gray-400">
|
||||
Выполняйте задания, чтобы зарабатывать очки. Собирайте серии для бонусных множителей!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it works */}
|
||||
<div className="py-12">
|
||||
<h2 className="text-2xl font-bold text-white mb-8">Как это работает</h2>
|
||||
<div className="grid md:grid-cols-4 gap-6 text-left">
|
||||
<div className="relative">
|
||||
<div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">1</div>
|
||||
<div className="relative z-10 pt-6">
|
||||
<h4 className="font-bold text-white mb-2">Создайте марафон</h4>
|
||||
<p className="text-gray-400 text-sm">Начните новый марафон и пригласите друзей по уникальному коду</p>
|
||||
</div>
|
||||
<section className="py-24 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-dark-800/50 to-transparent" />
|
||||
|
||||
<div className="max-w-6xl mx-auto px-4 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
Как это работает
|
||||
</h2>
|
||||
<p className="text-gray-400">
|
||||
Четыре простых шага до победы
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<div className="relative">
|
||||
<div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">2</div>
|
||||
<div className="relative z-10 pt-6">
|
||||
<h4 className="font-bold text-white mb-2">Добавьте игры</h4>
|
||||
<p className="text-gray-400 text-sm">Все добавляют игры, в которые хотят играть. ИИ генерирует задания</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Connection line */}
|
||||
<div className="hidden md:block absolute top-12 left-0 right-0 h-0.5 bg-gradient-to-r from-neon-500 via-accent-500 to-pink-500" />
|
||||
|
||||
<div className="relative">
|
||||
<div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">3</div>
|
||||
<div className="relative z-10 pt-6">
|
||||
<h4 className="font-bold text-white mb-2">Крутите и играйте</h4>
|
||||
<p className="text-gray-400 text-sm">Крутите колесо, получите задание, выполните его и отправьте доказательство</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
{[
|
||||
{
|
||||
step: 1,
|
||||
icon: <Gamepad2 className="w-6 h-6" />,
|
||||
title: 'Создайте марафон',
|
||||
desc: 'Начните новый марафон и пригласите друзей по коду',
|
||||
color: 'neon',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
icon: <Target className="w-6 h-6" />,
|
||||
title: 'Добавьте игры',
|
||||
desc: 'Каждый добавляет игры. ИИ генерирует задания',
|
||||
color: 'neon',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
title: 'Крутите и играйте',
|
||||
desc: 'Крутите колесо, выполняйте задания',
|
||||
color: 'accent',
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
icon: <Crown className="w-6 h-6" />,
|
||||
title: 'Победите!',
|
||||
desc: 'Зарабатывайте очки и станьте чемпионом',
|
||||
color: 'pink',
|
||||
},
|
||||
].map((item, index) => (
|
||||
<div key={item.step} className="relative text-center group">
|
||||
{/* Step circle */}
|
||||
<div
|
||||
className={`
|
||||
relative z-10 w-24 h-24 mx-auto mb-6 rounded-2xl
|
||||
bg-dark-800 border-2 transition-all duration-300
|
||||
flex items-center justify-center
|
||||
group-hover:-translate-y-2
|
||||
${item.color === 'neon' ? 'border-neon-500/50 group-hover:border-neon-500 group-hover:shadow-[0_0_30px_rgba(0,240,255,0.3)]' : ''}
|
||||
${item.color === 'accent' ? 'border-accent-500/50 group-hover:border-accent-500 group-hover:shadow-[0_0_30px_rgba(168,85,247,0.3)]' : ''}
|
||||
${item.color === 'pink' ? 'border-pink-500/50 group-hover:border-pink-500 group-hover:shadow-[0_0_30px_rgba(236,72,153,0.3)]' : ''}
|
||||
`}
|
||||
style={{ animationDelay: `${index * 100}ms` }}
|
||||
>
|
||||
<div className={`
|
||||
${item.color === 'neon' ? 'text-neon-500' : ''}
|
||||
${item.color === 'accent' ? 'text-accent-500' : ''}
|
||||
${item.color === 'pink' ? 'text-pink-500' : ''}
|
||||
`}>
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className={`
|
||||
absolute -top-2 -right-2 w-8 h-8 rounded-full
|
||||
flex items-center justify-center text-sm font-bold
|
||||
${item.color === 'neon' ? 'bg-neon-500 text-dark-900' : ''}
|
||||
${item.color === 'accent' ? 'bg-accent-500 text-white' : ''}
|
||||
${item.color === 'pink' ? 'bg-pink-500 text-white' : ''}
|
||||
`}>
|
||||
{item.step}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="text-5xl font-bold text-primary-500/20 absolute -top-4 -left-2">4</div>
|
||||
<div className="relative z-10 pt-6">
|
||||
<h4 className="font-bold text-white mb-2">Победите!</h4>
|
||||
<p className="text-gray-400 text-sm">Зарабатывайте очки, поднимайтесь в таблице лидеров, станьте чемпионом!</p>
|
||||
<h4 className="text-lg font-semibold text-white mb-2">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-gray-400 text-sm">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-24 relative">
|
||||
<div className="max-w-4xl mx-auto px-4 text-center">
|
||||
<div className="glass-neon rounded-2xl p-12 relative overflow-hidden">
|
||||
{/* Background glow */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-neon-500/5 via-accent-500/5 to-pink-500/5" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
Готовы к соревнованиям?
|
||||
</h2>
|
||||
<p className="text-gray-300 mb-8 max-w-xl mx-auto">
|
||||
Присоединяйтесь к сотням игроков, которые уже соревнуются в игровых челленджах
|
||||
</p>
|
||||
|
||||
{isAuthenticated ? (
|
||||
<Link to="/marathons">
|
||||
<GradientButton size="lg" icon={<ArrowRight className="w-5 h-5" />}>
|
||||
Перейти к марафонам
|
||||
</GradientButton>
|
||||
</Link>
|
||||
) : (
|
||||
<Link to="/register">
|
||||
<GradientButton size="lg" icon={<Zap className="w-5 h-5" />}>
|
||||
Создать аккаунт бесплатно
|
||||
</GradientButton>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@ import { useParams, useNavigate, Link } from 'react-router-dom'
|
||||
import { marathonsApi } from '@/api'
|
||||
import type { MarathonPublicInfo } from '@/types'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { Button, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
|
||||
import { Users, Loader2, Trophy, UserPlus, LogIn } from 'lucide-react'
|
||||
import { NeonButton, GlassCard } from '@/components/ui'
|
||||
import { Users, Loader2, Trophy, UserPlus, LogIn, Gamepad2, AlertCircle, Sparkles, Crown } from 'lucide-react'
|
||||
|
||||
export function InvitePage() {
|
||||
const { code } = useParams<{ code: string }>()
|
||||
@@ -63,8 +63,9 @@ export function InvitePage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
||||
<p className="text-gray-400">Загрузка приглашения...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -72,97 +73,154 @@ export function InvitePage() {
|
||||
if (error || !marathon) {
|
||||
return (
|
||||
<div className="max-w-md mx-auto">
|
||||
<Card>
|
||||
<CardContent className="text-center py-8">
|
||||
<div className="text-red-400 mb-4">{error || 'Марафон не найден'}</div>
|
||||
<Link to="/marathons">
|
||||
<Button variant="secondary">К списку марафонов</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<GlassCard className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-red-500/10 border border-red-500/30 flex items-center justify-center">
|
||||
<AlertCircle className="w-8 h-8 text-red-400" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white mb-2">Ошибка</h2>
|
||||
<p className="text-gray-400 mb-6">{error || 'Марафон не найден'}</p>
|
||||
<Link to="/marathons">
|
||||
<NeonButton variant="outline">К списку марафонов</NeonButton>
|
||||
</Link>
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const statusText = {
|
||||
preparing: 'Подготовка',
|
||||
active: 'Активен',
|
||||
finished: 'Завершён',
|
||||
}[marathon.status]
|
||||
const getStatusConfig = (status: string) => {
|
||||
switch (status) {
|
||||
case 'preparing':
|
||||
return {
|
||||
color: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||
text: 'Подготовка',
|
||||
dot: 'bg-yellow-500',
|
||||
}
|
||||
case 'active':
|
||||
return {
|
||||
color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
|
||||
text: 'Активен',
|
||||
dot: 'bg-neon-500 animate-pulse',
|
||||
}
|
||||
case 'finished':
|
||||
return {
|
||||
color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
text: 'Завершён',
|
||||
dot: 'bg-gray-500',
|
||||
}
|
||||
default:
|
||||
return {
|
||||
color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
text: status,
|
||||
dot: 'bg-gray-500',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const status = getStatusConfig(marathon.status)
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto">
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="flex items-center justify-center gap-2">
|
||||
<Trophy className="w-6 h-6 text-primary-500" />
|
||||
Приглашение в марафон
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Marathon info */}
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-white mb-2">{marathon.title}</h2>
|
||||
{marathon.description && (
|
||||
<p className="text-gray-400 text-sm mb-4">{marathon.description}</p>
|
||||
)}
|
||||
<div className="flex items-center justify-center gap-4 text-sm text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
{marathon.participants_count} участников
|
||||
</span>
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${
|
||||
marathon.status === 'active' ? 'bg-green-900/50 text-green-400' :
|
||||
marathon.status === 'preparing' ? 'bg-yellow-900/50 text-yellow-400' :
|
||||
'bg-gray-700 text-gray-400'
|
||||
}`}>
|
||||
{statusText}
|
||||
</span>
|
||||
<div className="min-h-[70vh] flex items-center justify-center px-4">
|
||||
{/* Background effects */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-neon-500/10 rounded-full blur-[100px]" />
|
||||
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-md">
|
||||
<GlassCard variant="neon" className="animate-scale-in">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 border border-neon-500/30 flex items-center justify-center">
|
||||
<Trophy className="w-10 h-10 text-neon-400" />
|
||||
</div>
|
||||
<p className="text-gray-500 text-xs mt-2">
|
||||
Организатор: {marathon.creator_nickname}
|
||||
</p>
|
||||
<h1 className="text-xl font-bold text-white mb-1">Приглашение в марафон</h1>
|
||||
<p className="text-gray-400 text-sm">Вас пригласили присоединиться</p>
|
||||
</div>
|
||||
|
||||
{/* Marathon info */}
|
||||
<div className="glass rounded-xl p-5 mb-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/20 flex-shrink-0">
|
||||
<Gamepad2 className="w-7 h-7 text-neon-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-xl font-bold text-white mb-1 truncate">{marathon.title}</h2>
|
||||
{marathon.description && (
|
||||
<p className="text-gray-400 text-sm line-clamp-2 mb-3">{marathon.description}</p>
|
||||
)}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className={`px-2.5 py-1 rounded-full text-xs font-medium border flex items-center gap-1.5 ${status.color}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
|
||||
{status.text}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-sm text-gray-400">
|
||||
<Users className="w-4 h-4" />
|
||||
{marathon.participants_count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Organizer */}
|
||||
<div className="mt-4 pt-4 border-t border-dark-600 flex items-center gap-2 text-sm text-gray-500">
|
||||
<Crown className="w-4 h-4 text-yellow-500" />
|
||||
<span>Организатор:</span>
|
||||
<span className="text-gray-300">{marathon.creator_nickname}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
{marathon.status === 'finished' ? (
|
||||
<div className="text-center text-gray-400">
|
||||
Этот марафон уже завершён
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-gray-500/10 flex items-center justify-center">
|
||||
<AlertCircle className="w-6 h-6 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-gray-400 mb-4">Этот марафон уже завершён</p>
|
||||
<Link to="/marathons">
|
||||
<NeonButton variant="outline" className="w-full">
|
||||
К списку марафонов
|
||||
</NeonButton>
|
||||
</Link>
|
||||
</div>
|
||||
) : isAuthenticated ? (
|
||||
/* Authenticated - show join button */
|
||||
<Button
|
||||
<NeonButton
|
||||
className="w-full"
|
||||
size="lg"
|
||||
onClick={handleJoin}
|
||||
isLoading={isJoining}
|
||||
icon={<Sparkles className="w-5 h-5" />}
|
||||
>
|
||||
<UserPlus className="w-4 h-4 mr-2" />
|
||||
Присоединиться к марафону
|
||||
</Button>
|
||||
Присоединиться
|
||||
</NeonButton>
|
||||
) : (
|
||||
/* Not authenticated - show login/register options */
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-4">
|
||||
<p className="text-center text-gray-400 text-sm">
|
||||
Чтобы присоединиться, войдите или зарегистрируйтесь
|
||||
</p>
|
||||
<Button
|
||||
<NeonButton
|
||||
className="w-full"
|
||||
size="lg"
|
||||
onClick={() => handleAuthRedirect('/login')}
|
||||
icon={<LogIn className="w-5 h-5" />}
|
||||
>
|
||||
<LogIn className="w-4 h-4 mr-2" />
|
||||
Войти
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={() => handleAuthRedirect('/register')}
|
||||
icon={<UserPlus className="w-5 h-5" />}
|
||||
>
|
||||
<UserPlus className="w-4 h-4 mr-2" />
|
||||
Зарегистрироваться
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</GlassCard>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -top-4 -left-4 w-24 h-24 border border-neon-500/20 rounded-2xl -z-10" />
|
||||
<div className="absolute -bottom-4 -right-4 w-32 h-32 border border-accent-500/20 rounded-2xl -z-10" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,9 +2,9 @@ import { useState, useEffect } from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { marathonsApi } from '@/api'
|
||||
import type { LeaderboardEntry } from '@/types'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
|
||||
import { GlassCard } from '@/components/ui'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { Trophy, Flame, ArrowLeft, Loader2 } from 'lucide-react'
|
||||
import { Trophy, Flame, ArrowLeft, Loader2, Crown, Medal, Award, Star, Zap, Target } from 'lucide-react'
|
||||
|
||||
export function LeaderboardPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
@@ -28,92 +28,254 @@ export function LeaderboardPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const getRankIcon = (rank: number) => {
|
||||
const getRankConfig = (rank: number) => {
|
||||
switch (rank) {
|
||||
case 1:
|
||||
return <Trophy className="w-6 h-6 text-yellow-500" />
|
||||
return {
|
||||
icon: <Crown className="w-6 h-6" />,
|
||||
color: 'text-yellow-400',
|
||||
bg: 'bg-yellow-500/20',
|
||||
border: 'border-yellow-500/30',
|
||||
glow: 'shadow-[0_0_20px_rgba(234,179,8,0.3)]',
|
||||
gradient: 'from-yellow-500/20 via-transparent to-transparent',
|
||||
}
|
||||
case 2:
|
||||
return <Trophy className="w-6 h-6 text-gray-400" />
|
||||
return {
|
||||
icon: <Medal className="w-6 h-6" />,
|
||||
color: 'text-gray-300',
|
||||
bg: 'bg-gray-400/20',
|
||||
border: 'border-gray-400/30',
|
||||
glow: 'shadow-[0_0_15px_rgba(156,163,175,0.2)]',
|
||||
gradient: 'from-gray-400/10 via-transparent to-transparent',
|
||||
}
|
||||
case 3:
|
||||
return <Trophy className="w-6 h-6 text-amber-700" />
|
||||
return {
|
||||
icon: <Award className="w-6 h-6" />,
|
||||
color: 'text-amber-600',
|
||||
bg: 'bg-amber-600/20',
|
||||
border: 'border-amber-600/30',
|
||||
glow: 'shadow-[0_0_15px_rgba(217,119,6,0.2)]',
|
||||
gradient: 'from-amber-600/10 via-transparent to-transparent',
|
||||
}
|
||||
default:
|
||||
return <span className="text-gray-500 font-mono w-6 text-center">{rank}</span>
|
||||
return {
|
||||
icon: <span className="text-gray-500 font-mono font-bold">{rank}</span>,
|
||||
color: 'text-gray-500',
|
||||
bg: 'bg-dark-700',
|
||||
border: 'border-dark-600',
|
||||
glow: '',
|
||||
gradient: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Top 3 for podium
|
||||
const topThree = leaderboard.slice(0, 3)
|
||||
|
||||
// Calculate stats
|
||||
const totalPoints = leaderboard.reduce((acc, e) => acc + e.total_points, 0)
|
||||
const maxStreak = Math.max(...leaderboard.map(e => e.current_streak), 0)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
||||
<p className="text-gray-400">Загрузка рейтинга...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Link to={`/marathons/${id}`} className="text-gray-400 hover:text-white">
|
||||
<ArrowLeft className="w-6 h-6" />
|
||||
<Link
|
||||
to={`/marathons/${id}`}
|
||||
className="w-10 h-10 rounded-xl bg-dark-700 border border-dark-600 flex items-center justify-center text-gray-400 hover:text-white hover:border-neon-500/30 transition-all"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold text-white">Таблица лидеров</h1>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Таблица лидеров</h1>
|
||||
<p className="text-gray-400 text-sm">Рейтинг участников марафона</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trophy className="w-5 h-5 text-yellow-500" />
|
||||
Рейтинг
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{leaderboard.length === 0 ? (
|
||||
<p className="text-center text-gray-400 py-8">Пока нет участников</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{leaderboard.map((entry) => (
|
||||
<div
|
||||
key={entry.user.id}
|
||||
className={`flex items-center gap-4 p-4 rounded-lg ${
|
||||
entry.user.id === user?.id
|
||||
? 'bg-primary-500/20 border border-primary-500/50'
|
||||
: 'bg-gray-900'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center w-8">
|
||||
{getRankIcon(entry.rank)}
|
||||
{leaderboard.length === 0 ? (
|
||||
<GlassCard className="text-center py-16">
|
||||
<div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-dark-700 flex items-center justify-center">
|
||||
<Trophy className="w-10 h-10 text-gray-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Пока нет участников</h3>
|
||||
<p className="text-gray-400">Станьте первым в рейтинге!</p>
|
||||
</GlassCard>
|
||||
) : (
|
||||
<>
|
||||
{/* Podium for top 3 */}
|
||||
{topThree.length >= 3 && (
|
||||
<div className="mb-8">
|
||||
<div className="flex items-end justify-center gap-4 mb-4">
|
||||
{/* 2nd place */}
|
||||
<div className="flex flex-col items-center animate-slide-in-up" style={{ animationDelay: '100ms' }}>
|
||||
<div className={`
|
||||
w-20 h-20 rounded-2xl mb-3 flex items-center justify-center
|
||||
bg-gray-400/10 border border-gray-400/30
|
||||
shadow-[0_0_20px_rgba(156,163,175,0.2)]
|
||||
`}>
|
||||
<span className="text-3xl font-bold text-gray-300">2</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-white">
|
||||
{entry.user.nickname}
|
||||
{entry.user.id === user?.id && (
|
||||
<span className="ml-2 text-xs text-primary-400">(Вы)</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{entry.completed_count} выполнено, {entry.dropped_count} пропущено
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{entry.current_streak > 0 && (
|
||||
<div className="flex items-center gap-1 text-yellow-500">
|
||||
<Flame className="w-4 h-4" />
|
||||
<span className="text-sm">{entry.current_streak}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-right">
|
||||
<div className="text-xl font-bold text-primary-400">
|
||||
{entry.total_points}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">очков</div>
|
||||
<div className="glass rounded-xl p-4 text-center w-28">
|
||||
<Medal className="w-6 h-6 text-gray-300 mx-auto mb-2" />
|
||||
<p className="text-sm font-medium text-white truncate">{topThree[1].user.nickname}</p>
|
||||
<p className="text-xs text-gray-400">{topThree[1].total_points} очков</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 1st place */}
|
||||
<div className="flex flex-col items-center animate-slide-in-up" style={{ animationDelay: '0ms' }}>
|
||||
<div className={`
|
||||
w-24 h-24 rounded-2xl mb-3 flex items-center justify-center
|
||||
bg-yellow-500/20 border border-yellow-500/30
|
||||
shadow-[0_0_30px_rgba(234,179,8,0.4)]
|
||||
`}>
|
||||
<Crown className="w-10 h-10 text-yellow-400" />
|
||||
</div>
|
||||
<div className="glass-neon rounded-xl p-4 text-center w-32">
|
||||
<Star className="w-6 h-6 text-yellow-400 mx-auto mb-2" />
|
||||
<p className="font-semibold text-white truncate">{topThree[0].user.nickname}</p>
|
||||
<p className="text-sm text-neon-400 font-bold">{topThree[0].total_points} очков</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3rd place */}
|
||||
<div className="flex flex-col items-center animate-slide-in-up" style={{ animationDelay: '200ms' }}>
|
||||
<div className={`
|
||||
w-20 h-20 rounded-2xl mb-3 flex items-center justify-center
|
||||
bg-amber-600/10 border border-amber-600/30
|
||||
shadow-[0_0_20px_rgba(217,119,6,0.2)]
|
||||
`}>
|
||||
<span className="text-3xl font-bold text-amber-600">3</span>
|
||||
</div>
|
||||
<div className="glass rounded-xl p-4 text-center w-28">
|
||||
<Award className="w-6 h-6 text-amber-600 mx-auto mb-2" />
|
||||
<p className="text-sm font-medium text-white truncate">{topThree[2].user.nickname}</p>
|
||||
<p className="text-xs text-gray-400">{topThree[2].total_points} очков</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Stats row */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-8">
|
||||
<div className="glass rounded-xl p-4 text-center">
|
||||
<Trophy className="w-6 h-6 text-neon-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold text-white">{leaderboard.length}</p>
|
||||
<p className="text-xs text-gray-400">Участников</p>
|
||||
</div>
|
||||
<div className="glass rounded-xl p-4 text-center">
|
||||
<Zap className="w-6 h-6 text-accent-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold text-white">{totalPoints}</p>
|
||||
<p className="text-xs text-gray-400">Всего очков</p>
|
||||
</div>
|
||||
<div className="glass rounded-xl p-4 text-center">
|
||||
<Flame className="w-6 h-6 text-orange-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold text-white">{maxStreak}</p>
|
||||
<p className="text-xs text-gray-400">Макс. серия</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full leaderboard */}
|
||||
<GlassCard>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-neon-500/20 flex items-center justify-center">
|
||||
<Target className="w-5 h-5 text-neon-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Полный рейтинг</h3>
|
||||
<p className="text-sm text-gray-400">Все участники марафона</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{leaderboard.map((entry, index) => {
|
||||
const isCurrentUser = entry.user.id === user?.id
|
||||
const rankConfig = getRankConfig(entry.rank)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={entry.user.id}
|
||||
className={`
|
||||
relative flex items-center gap-4 p-4 rounded-xl
|
||||
transition-all duration-300 group
|
||||
${isCurrentUser
|
||||
? 'bg-neon-500/10 border border-neon-500/30 shadow-[0_0_20px_rgba(0,240,255,0.1)]'
|
||||
: `${rankConfig.bg} border ${rankConfig.border} hover:border-neon-500/20`
|
||||
}
|
||||
`}
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
{/* Gradient overlay for top 3 */}
|
||||
{entry.rank <= 3 && (
|
||||
<div className={`absolute inset-0 bg-gradient-to-r ${rankConfig.gradient} rounded-xl pointer-events-none`} />
|
||||
)}
|
||||
|
||||
{/* Rank */}
|
||||
<div className={`
|
||||
relative w-10 h-10 rounded-xl flex items-center justify-center
|
||||
${rankConfig.bg} ${rankConfig.color} ${rankConfig.glow}
|
||||
`}>
|
||||
{rankConfig.icon}
|
||||
</div>
|
||||
|
||||
{/* User info */}
|
||||
<div className="relative flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`font-semibold truncate ${isCurrentUser ? 'text-neon-400' : 'text-white'}`}>
|
||||
{entry.user.nickname}
|
||||
</span>
|
||||
{isCurrentUser && (
|
||||
<span className="px-2 py-0.5 text-xs font-medium bg-neon-500/20 text-neon-400 rounded-full border border-neon-500/30">
|
||||
Вы
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-1.5 h-1.5 bg-green-500 rounded-full" />
|
||||
{entry.completed_count} выполнено
|
||||
</span>
|
||||
{entry.dropped_count > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-1.5 h-1.5 bg-red-500 rounded-full" />
|
||||
{entry.dropped_count} пропущено
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Streak */}
|
||||
{entry.current_streak > 0 && (
|
||||
<div className="relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-orange-500/10 border border-orange-500/20">
|
||||
<Flame className="w-4 h-4 text-orange-400" />
|
||||
<span className="text-sm font-semibold text-orange-400">{entry.current_streak}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Points */}
|
||||
<div className="relative text-right">
|
||||
<div className={`text-xl font-bold ${isCurrentUser ? 'text-neon-400' : 'text-white'}`}>
|
||||
{entry.total_points}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">очков</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</GlassCard>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,13 +2,13 @@ import { useState, useEffect } from 'react'
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom'
|
||||
import { marathonsApi, gamesApi } from '@/api'
|
||||
import type { Marathon, Game, Challenge, ChallengePreview } from '@/types'
|
||||
import { Button, Input, Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
|
||||
import { NeonButton, Input, GlassCard, StatsCard } from '@/components/ui'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { useToast } from '@/store/toast'
|
||||
import { useConfirm } from '@/store/confirm'
|
||||
import {
|
||||
Plus, Trash2, Sparkles, Play, Loader2, Gamepad2, X, Save, Eye,
|
||||
ChevronDown, ChevronUp, Edit2, Check, CheckCircle, XCircle, Clock, User, ArrowLeft
|
||||
ChevronDown, ChevronUp, Edit2, Check, CheckCircle, XCircle, Clock, User, ArrowLeft, Zap
|
||||
} from 'lucide-react'
|
||||
|
||||
export function LobbyPage() {
|
||||
@@ -72,17 +72,14 @@ export function LobbyPage() {
|
||||
const marathonData = await marathonsApi.get(parseInt(id))
|
||||
setMarathon(marathonData)
|
||||
|
||||
// Load games - organizers see all, participants see approved + own
|
||||
const gamesData = await gamesApi.list(parseInt(id))
|
||||
setGames(gamesData)
|
||||
|
||||
// If organizer, load pending games separately
|
||||
if (marathonData.my_participation?.role === 'organizer' || user?.role === 'admin') {
|
||||
try {
|
||||
const pending = await gamesApi.listPending(parseInt(id))
|
||||
setPendingGames(pending)
|
||||
} catch {
|
||||
// If not authorized, just ignore
|
||||
setPendingGames([])
|
||||
}
|
||||
}
|
||||
@@ -175,7 +172,6 @@ export function LobbyPage() {
|
||||
|
||||
setExpandedGameId(gameId)
|
||||
|
||||
// Load challenges if we haven't loaded them yet
|
||||
if (!gameChallenges[gameId]) {
|
||||
setLoadingChallenges(gameId)
|
||||
try {
|
||||
@@ -183,7 +179,6 @@ export function LobbyPage() {
|
||||
setGameChallenges(prev => ({ ...prev, [gameId]: challenges }))
|
||||
} catch (error) {
|
||||
console.error('Failed to load challenges:', error)
|
||||
// Set empty array to prevent repeated attempts
|
||||
setGameChallenges(prev => ({ ...prev, [gameId]: [] }))
|
||||
} finally {
|
||||
setLoadingChallenges(null)
|
||||
@@ -210,7 +205,6 @@ export function LobbyPage() {
|
||||
proof_hint: newChallenge.proof_hint.trim() || undefined,
|
||||
})
|
||||
toast.success('Задание добавлено')
|
||||
// Reset form
|
||||
setNewChallenge({
|
||||
title: '',
|
||||
description: '',
|
||||
@@ -222,7 +216,6 @@ export function LobbyPage() {
|
||||
proof_hint: '',
|
||||
})
|
||||
setAddingChallengeToGameId(null)
|
||||
// Refresh challenges
|
||||
const challenges = await gamesApi.getChallenges(gameId)
|
||||
setGameChallenges(prev => ({ ...prev, [gameId]: challenges }))
|
||||
await loadData()
|
||||
@@ -246,10 +239,9 @@ export function LobbyPage() {
|
||||
|
||||
try {
|
||||
await gamesApi.deleteChallenge(challengeId)
|
||||
// Refresh challenges for this game
|
||||
const challenges = await gamesApi.getChallenges(gameId)
|
||||
setGameChallenges(prev => ({ ...prev, [gameId]: challenges }))
|
||||
await loadData() // Refresh game counts
|
||||
await loadData()
|
||||
} catch (error) {
|
||||
console.error('Failed to delete challenge:', error)
|
||||
}
|
||||
@@ -283,7 +275,7 @@ export function LobbyPage() {
|
||||
const result = await gamesApi.saveChallenges(parseInt(id), previewChallenges)
|
||||
setGenerateMessage(result.message)
|
||||
setPreviewChallenges(null)
|
||||
setGameChallenges({}) // Clear cache to reload
|
||||
setGameChallenges({})
|
||||
await loadData()
|
||||
} catch (error) {
|
||||
console.error('Failed to save challenges:', error)
|
||||
@@ -337,8 +329,9 @@ export function LobbyPage() {
|
||||
|
||||
if (isLoading || !marathon) {
|
||||
return (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
||||
<p className="text-gray-400">Загрузка лобби...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -351,21 +344,21 @@ export function LobbyPage() {
|
||||
switch (status) {
|
||||
case 'approved':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-green-900/50 text-green-400">
|
||||
<span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-lg bg-green-500/20 text-green-400 border border-green-500/30">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
Одобрено
|
||||
</span>
|
||||
)
|
||||
case 'pending':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-yellow-900/50 text-yellow-400">
|
||||
<span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-lg bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">
|
||||
<Clock className="w-3 h-3" />
|
||||
На модерации
|
||||
</span>
|
||||
)
|
||||
case 'rejected':
|
||||
return (
|
||||
<span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-red-900/50 text-red-400">
|
||||
<span className="flex items-center gap-1 text-xs px-2 py-0.5 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30">
|
||||
<XCircle className="w-3 h-3" />
|
||||
Отклонено
|
||||
</span>
|
||||
@@ -376,11 +369,11 @@ export function LobbyPage() {
|
||||
}
|
||||
|
||||
const renderGameCard = (game: Game, showModeration = false) => (
|
||||
<div key={game.id} className="bg-gray-900 rounded-lg overflow-hidden">
|
||||
<div key={game.id} className="glass rounded-xl overflow-hidden border border-dark-600">
|
||||
{/* Game header */}
|
||||
<div
|
||||
className={`flex items-center justify-between p-4 ${
|
||||
(game.status === 'approved') ? 'cursor-pointer hover:bg-gray-800/50' : ''
|
||||
(game.status === 'approved') ? 'cursor-pointer hover:bg-dark-700/50 transition-colors' : ''
|
||||
}`}
|
||||
onClick={() => game.status === 'approved' && handleToggleGameChallenges(game.id)}
|
||||
>
|
||||
@@ -394,14 +387,22 @@ export function LobbyPage() {
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-neon-500/20 to-accent-500/20 border border-neon-500/20 flex items-center justify-center flex-shrink-0">
|
||||
<Gamepad2 className="w-5 h-5 text-neon-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h4 className="font-medium text-white">{game.title}</h4>
|
||||
<h4 className="font-semibold text-white">{game.title}</h4>
|
||||
{getStatusBadge(game.status)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400 flex items-center gap-3 flex-wrap">
|
||||
{game.genre && <span>{game.genre}</span>}
|
||||
{game.status === 'approved' && <span>{game.challenges_count} заданий</span>}
|
||||
{game.status === 'approved' && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Sparkles className="w-3 h-3 text-accent-400" />
|
||||
{game.challenges_count} заданий
|
||||
</span>
|
||||
)}
|
||||
{game.proposed_by && (
|
||||
<span className="flex items-center gap-1 text-gray-500">
|
||||
<User className="w-3 h-3" />
|
||||
@@ -414,49 +415,43 @@ export function LobbyPage() {
|
||||
<div className="flex items-center gap-2 shrink-0" onClick={(e) => e.stopPropagation()}>
|
||||
{showModeration && game.status === 'pending' && (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
<button
|
||||
onClick={() => handleApproveGame(game.id)}
|
||||
disabled={moderatingGameId === game.id}
|
||||
className="text-green-400 hover:text-green-300"
|
||||
className="p-2 rounded-lg text-green-400 hover:bg-green-500/10 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{moderatingGameId === game.id ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRejectGame(game.id)}
|
||||
disabled={moderatingGameId === game.id}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
</Button>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(isOrganizer || game.proposed_by?.id === user?.id) && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
<button
|
||||
onClick={() => handleDeleteGame(game.id)}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expanded challenges list */}
|
||||
{expandedGameId === game.id && (
|
||||
<div className="border-t border-gray-800 p-4 space-y-2">
|
||||
<div className="border-t border-dark-600 p-4 space-y-2 bg-dark-800/30">
|
||||
{loadingChallenges === game.id ? (
|
||||
<div className="flex justify-center py-4">
|
||||
<Loader2 className="w-5 h-5 animate-spin text-gray-400" />
|
||||
<Loader2 className="w-5 h-5 animate-spin text-neon-400" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
@@ -464,24 +459,24 @@ export function LobbyPage() {
|
||||
gameChallenges[game.id].map((challenge) => (
|
||||
<div
|
||||
key={challenge.id}
|
||||
className="flex items-start justify-between gap-3 p-3 bg-gray-800 rounded-lg"
|
||||
className="flex items-start justify-between gap-3 p-3 bg-dark-700/50 rounded-lg border border-dark-600"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${
|
||||
challenge.difficulty === 'easy' ? 'bg-green-900/50 text-green-400' :
|
||||
challenge.difficulty === 'medium' ? 'bg-yellow-900/50 text-yellow-400' :
|
||||
'bg-red-900/50 text-red-400'
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className={`text-xs px-2 py-0.5 rounded-lg border ${
|
||||
challenge.difficulty === 'easy' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
|
||||
challenge.difficulty === 'medium' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
|
||||
'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}`}>
|
||||
{challenge.difficulty === 'easy' ? 'Легко' :
|
||||
challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
|
||||
</span>
|
||||
<span className="text-xs text-primary-400 font-medium">
|
||||
<span className="text-xs text-neon-400 font-semibold">
|
||||
+{challenge.points}
|
||||
</span>
|
||||
{challenge.is_generated && (
|
||||
<span className="text-xs text-gray-500">
|
||||
<Sparkles className="w-3 h-3 inline" /> ИИ
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Sparkles className="w-3 h-3" /> ИИ
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -489,19 +484,17 @@ export function LobbyPage() {
|
||||
<p className="text-xs text-gray-400 mt-1">{challenge.description}</p>
|
||||
</div>
|
||||
{isOrganizer && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
<button
|
||||
onClick={() => handleDeleteChallenge(challenge.id, game.id)}
|
||||
className="text-red-400 hover:text-red-300 shrink-0"
|
||||
className="p-1.5 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors shrink-0"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</Button>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-center text-gray-500 py-2 text-sm">
|
||||
<p className="text-center text-gray-500 py-4 text-sm">
|
||||
Нет заданий
|
||||
</p>
|
||||
)}
|
||||
@@ -509,8 +502,11 @@ export function LobbyPage() {
|
||||
{/* Add challenge form */}
|
||||
{isOrganizer && game.status === 'approved' && (
|
||||
addingChallengeToGameId === game.id ? (
|
||||
<div className="mt-4 p-4 bg-gray-800 rounded-lg space-y-3 border border-gray-700">
|
||||
<h4 className="font-medium text-white text-sm">Новое задание</h4>
|
||||
<div className="mt-4 p-4 glass rounded-xl space-y-3 border border-neon-500/20">
|
||||
<h4 className="font-semibold text-white text-sm flex items-center gap-2">
|
||||
<Plus className="w-4 h-4 text-neon-400" />
|
||||
Новое задание
|
||||
</h4>
|
||||
<Input
|
||||
placeholder="Название задания"
|
||||
value={newChallenge.title}
|
||||
@@ -520,7 +516,7 @@ export function LobbyPage() {
|
||||
placeholder="Описание (что нужно сделать)"
|
||||
value={newChallenge.description}
|
||||
onChange={(e) => setNewChallenge(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm resize-none"
|
||||
className="input w-full resize-none"
|
||||
rows={2}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
@@ -529,7 +525,7 @@ export function LobbyPage() {
|
||||
<select
|
||||
value={newChallenge.type}
|
||||
onChange={(e) => setNewChallenge(prev => ({ ...prev, type: e.target.value }))}
|
||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm"
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="completion">Прохождение</option>
|
||||
<option value="no_death">Без смертей</option>
|
||||
@@ -544,7 +540,7 @@ export function LobbyPage() {
|
||||
<select
|
||||
value={newChallenge.difficulty}
|
||||
onChange={(e) => setNewChallenge(prev => ({ ...prev, difficulty: e.target.value }))}
|
||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm"
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="easy">Легко (20-40 очков)</option>
|
||||
<option value="medium">Средне (45-75 очков)</option>
|
||||
@@ -575,11 +571,11 @@ export function LobbyPage() {
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Тип доказательства</label>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Тип пруфа</label>
|
||||
<select
|
||||
value={newChallenge.proof_type}
|
||||
onChange={(e) => setNewChallenge(prev => ({ ...prev, proof_type: e.target.value }))}
|
||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm"
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="screenshot">Скриншот</option>
|
||||
<option value="video">Видео</option>
|
||||
@@ -589,44 +585,42 @@ export function LobbyPage() {
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Подсказка</label>
|
||||
<Input
|
||||
placeholder="Что должно быть на пруфе"
|
||||
placeholder="Что на пруфе"
|
||||
value={newChallenge.proof_hint}
|
||||
onChange={(e) => setNewChallenge(prev => ({ ...prev, proof_hint: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
<NeonButton
|
||||
size="sm"
|
||||
onClick={() => handleCreateChallenge(game.id)}
|
||||
isLoading={isCreatingChallenge}
|
||||
disabled={!newChallenge.title || !newChallenge.description}
|
||||
icon={<Plus className="w-4 h-4" />}
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
Добавить
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setAddingChallengeToGameId(null)}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
<button
|
||||
onClick={() => {
|
||||
setAddingChallengeToGameId(game.id)
|
||||
setExpandedGameId(game.id)
|
||||
}}
|
||||
className="w-full mt-2 border border-dashed border-gray-700 text-gray-400 hover:text-white hover:border-gray-600"
|
||||
className="w-full mt-2 p-3 rounded-lg border-2 border-dashed border-dark-600 text-gray-400 hover:text-neon-400 hover:border-neon-500/30 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
<Plus className="w-4 h-4" />
|
||||
Добавить задание вручную
|
||||
</Button>
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
@@ -639,14 +633,18 @@ export function LobbyPage() {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Back button */}
|
||||
<Link to={`/marathons/${id}`} className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
<Link
|
||||
to={`/marathons/${id}`}
|
||||
className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
||||
К марафону
|
||||
</Link>
|
||||
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">{marathon.title}</h1>
|
||||
<h1 className="text-2xl font-bold text-white mb-1">{marathon.title}</h1>
|
||||
<p className="text-gray-400">
|
||||
{isOrganizer
|
||||
? 'Настройка - Добавьте игры и сгенерируйте задания'
|
||||
@@ -655,296 +653,306 @@ export function LobbyPage() {
|
||||
</div>
|
||||
|
||||
{isOrganizer && (
|
||||
<Button onClick={handleStartMarathon} isLoading={isStarting} disabled={approvedGames.length === 0}>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
<NeonButton
|
||||
onClick={handleStartMarathon}
|
||||
isLoading={isStarting}
|
||||
disabled={approvedGames.length === 0}
|
||||
icon={<Play className="w-4 h-4" />}
|
||||
>
|
||||
Запустить марафон
|
||||
</Button>
|
||||
</NeonButton>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stats - только для организаторов */}
|
||||
{/* Stats */}
|
||||
{isOrganizer && (
|
||||
<div className="grid grid-cols-2 gap-4 mb-8">
|
||||
<Card>
|
||||
<CardContent className="text-center py-4">
|
||||
<div className="text-2xl font-bold text-white">{approvedGames.length}</div>
|
||||
<div className="text-sm text-gray-400 flex items-center justify-center gap-1">
|
||||
<Gamepad2 className="w-4 h-4" />
|
||||
Игр одобрено
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="text-center py-4">
|
||||
<div className="text-2xl font-bold text-white">{totalChallenges}</div>
|
||||
<div className="text-sm text-gray-400 flex items-center justify-center gap-1">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Заданий
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<StatsCard
|
||||
label="Игр одобрено"
|
||||
value={approvedGames.length}
|
||||
icon={<Gamepad2 className="w-6 h-6" />}
|
||||
color="neon"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Заданий"
|
||||
value={totalChallenges}
|
||||
icon={<Sparkles className="w-6 h-6" />}
|
||||
color="purple"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending games for moderation (organizers only) */}
|
||||
{/* Pending games for moderation */}
|
||||
{isOrganizer && pendingGames.length > 0 && (
|
||||
<Card className="mb-8 border-yellow-900/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-yellow-400">
|
||||
<Clock className="w-5 h-5" />
|
||||
На модерации ({pendingGames.length})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{pendingGames.map((game) => renderGameCard(game, true))}
|
||||
<GlassCard className="mb-8 border-yellow-500/30">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
|
||||
<Clock className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div>
|
||||
<h3 className="font-semibold text-yellow-400">На модерации</h3>
|
||||
<p className="text-sm text-gray-400">{pendingGames.length} игр ожидают</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{pendingGames.map((game) => renderGameCard(game, true))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Generate challenges button */}
|
||||
{/* Generate challenges */}
|
||||
{isOrganizer && approvedGames.length > 0 && !previewChallenges && (
|
||||
<Card className="mb-8">
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<GlassCard className="mb-8">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||||
<Zap className="w-5 h-5 text-accent-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-white">Генерация заданий</h3>
|
||||
<h3 className="font-semibold text-white">Генерация заданий</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
Используйте ИИ для генерации заданий для одобренных игр без заданий
|
||||
ИИ создаст задания для игр без заданий
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleGenerateChallenges} isLoading={isGenerating} variant="secondary">
|
||||
<Sparkles className="w-4 h-4 mr-2" />
|
||||
Сгенерировать
|
||||
</Button>
|
||||
</div>
|
||||
{generateMessage && (
|
||||
<p className="mt-3 text-sm text-primary-400">{generateMessage}</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<NeonButton
|
||||
onClick={handleGenerateChallenges}
|
||||
isLoading={isGenerating}
|
||||
variant="outline"
|
||||
color="purple"
|
||||
icon={<Sparkles className="w-4 h-4" />}
|
||||
>
|
||||
Сгенерировать
|
||||
</NeonButton>
|
||||
</div>
|
||||
{generateMessage && (
|
||||
<p className="mt-4 text-sm text-neon-400 p-3 bg-neon-500/10 rounded-lg border border-neon-500/20">
|
||||
{generateMessage}
|
||||
</p>
|
||||
)}
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Challenge preview with editing */}
|
||||
{/* Challenge preview */}
|
||||
{previewChallenges && previewChallenges.length > 0 && (
|
||||
<Card className="mb-8">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye className="w-5 h-5 text-primary-400" />
|
||||
<CardTitle>Предпросмотр заданий ({previewChallenges.length})</CardTitle>
|
||||
<GlassCard className="mb-8 border-accent-500/30">
|
||||
<div className="flex items-center justify-between mb-4 flex-wrap gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||||
<Eye className="w-5 h-5 text-accent-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Предпросмотр заданий</h3>
|
||||
<p className="text-sm text-gray-400">{previewChallenges.length} заданий</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleCancelPreview} variant="ghost" size="sm">
|
||||
<X className="w-4 h-4 mr-1" />
|
||||
<NeonButton onClick={handleCancelPreview} variant="outline" size="sm" icon={<X className="w-4 h-4" />}>
|
||||
Отмена
|
||||
</Button>
|
||||
<Button onClick={handleSaveChallenges} isLoading={isSaving} size="sm">
|
||||
<Save className="w-4 h-4 mr-1" />
|
||||
</NeonButton>
|
||||
<NeonButton onClick={handleSaveChallenges} isLoading={isSaving} size="sm" icon={<Save className="w-4 h-4" />}>
|
||||
Сохранить все
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3 max-h-[60vh] overflow-y-auto">
|
||||
{previewChallenges.map((challenge, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 bg-gray-900 rounded-lg border border-gray-800"
|
||||
>
|
||||
{editingIndex === index ? (
|
||||
// Edit mode
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-gray-800 text-gray-400">
|
||||
</div>
|
||||
<div className="space-y-3 max-h-[60vh] overflow-y-auto custom-scrollbar">
|
||||
{previewChallenges.map((challenge, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="p-4 bg-dark-700/50 rounded-xl border border-dark-600"
|
||||
>
|
||||
{editingIndex === index ? (
|
||||
<div className="space-y-3">
|
||||
<span className="text-xs px-2 py-0.5 rounded-lg bg-dark-600 text-gray-400">
|
||||
{challenge.game_title}
|
||||
</span>
|
||||
<Input
|
||||
value={challenge.title}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'title', e.target.value)}
|
||||
placeholder="Название"
|
||||
/>
|
||||
<textarea
|
||||
value={challenge.description}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'description', e.target.value)}
|
||||
placeholder="Описание"
|
||||
className="input w-full resize-none"
|
||||
rows={2}
|
||||
/>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<select
|
||||
value={challenge.difficulty}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'difficulty', e.target.value)}
|
||||
className="input"
|
||||
>
|
||||
<option value="easy">Легко</option>
|
||||
<option value="medium">Средне</option>
|
||||
<option value="hard">Сложно</option>
|
||||
</select>
|
||||
<Input
|
||||
type="number"
|
||||
value={challenge.points}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'points', parseInt(e.target.value) || 0)}
|
||||
placeholder="Очки"
|
||||
/>
|
||||
<select
|
||||
value={challenge.proof_type}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'proof_type', e.target.value)}
|
||||
className="input"
|
||||
>
|
||||
<option value="screenshot">Скриншот</option>
|
||||
<option value="video">Видео</option>
|
||||
<option value="steam">Steam</option>
|
||||
</select>
|
||||
</div>
|
||||
<Input
|
||||
value={challenge.proof_hint || ''}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'proof_hint', e.target.value)}
|
||||
placeholder="Подсказка для пруфа"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<NeonButton size="sm" onClick={() => setEditingIndex(null)} icon={<Check className="w-4 h-4" />}>
|
||||
Готово
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRemovePreviewChallenge(index)}
|
||||
className="text-red-400 border-red-500/30 hover:bg-red-500/10"
|
||||
icon={<Trash2 className="w-4 h-4" />}
|
||||
>
|
||||
Удалить
|
||||
</NeonButton>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className="text-xs px-2 py-0.5 rounded-lg bg-dark-600 text-gray-400">
|
||||
{challenge.game_title}
|
||||
</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-lg border ${
|
||||
challenge.difficulty === 'easy' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
|
||||
challenge.difficulty === 'medium' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
|
||||
'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}`}>
|
||||
{challenge.difficulty === 'easy' ? 'Легко' :
|
||||
challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
|
||||
</span>
|
||||
<span className="text-xs text-neon-400 font-semibold">
|
||||
+{challenge.points} очков
|
||||
</span>
|
||||
</div>
|
||||
<Input
|
||||
value={challenge.title}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'title', e.target.value)}
|
||||
placeholder="Название"
|
||||
className="bg-gray-800"
|
||||
/>
|
||||
<textarea
|
||||
value={challenge.description}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'description', e.target.value)}
|
||||
placeholder="Описание"
|
||||
className="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm resize-none"
|
||||
rows={2}
|
||||
/>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<select
|
||||
value={challenge.difficulty}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'difficulty', e.target.value)}
|
||||
className="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm"
|
||||
>
|
||||
<option value="easy">Легко</option>
|
||||
<option value="medium">Средне</option>
|
||||
<option value="hard">Сложно</option>
|
||||
</select>
|
||||
<Input
|
||||
type="number"
|
||||
value={challenge.points}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'points', parseInt(e.target.value) || 0)}
|
||||
placeholder="Очки"
|
||||
className="bg-gray-800"
|
||||
/>
|
||||
<select
|
||||
value={challenge.proof_type}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'proof_type', e.target.value)}
|
||||
className="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm"
|
||||
>
|
||||
<option value="screenshot">Скриншот</option>
|
||||
<option value="video">Видео</option>
|
||||
<option value="steam">Steam</option>
|
||||
</select>
|
||||
</div>
|
||||
<Input
|
||||
value={challenge.proof_hint || ''}
|
||||
onChange={(e) => handleUpdatePreviewChallenge(index, 'proof_hint', e.target.value)}
|
||||
placeholder="Подсказка для подтверждения"
|
||||
className="bg-gray-800"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={() => setEditingIndex(null)}>
|
||||
<Check className="w-4 h-4 mr-1" />
|
||||
Готово
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemovePreviewChallenge(index)}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-1" />
|
||||
Удалить
|
||||
</Button>
|
||||
</div>
|
||||
<h4 className="font-medium text-white mb-1">{challenge.title}</h4>
|
||||
<p className="text-sm text-gray-400">{challenge.description}</p>
|
||||
{challenge.proof_hint && (
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Пруф: {challenge.proof_hint}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// View mode
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-gray-800 text-gray-400">
|
||||
{challenge.game_title}
|
||||
</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded ${
|
||||
challenge.difficulty === 'easy' ? 'bg-green-900/50 text-green-400' :
|
||||
challenge.difficulty === 'medium' ? 'bg-yellow-900/50 text-yellow-400' :
|
||||
'bg-red-900/50 text-red-400'
|
||||
}`}>
|
||||
{challenge.difficulty === 'easy' ? 'Легко' :
|
||||
challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
|
||||
</span>
|
||||
<span className="text-xs text-primary-400 font-medium">
|
||||
+{challenge.points} очков
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="font-medium text-white mb-1">{challenge.title}</h4>
|
||||
<p className="text-sm text-gray-400">{challenge.description}</p>
|
||||
{challenge.proof_hint && (
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Подтверждение: {challenge.proof_hint}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setEditingIndex(index)}
|
||||
className="text-gray-400 hover:text-white"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleRemovePreviewChallenge(index)}
|
||||
className="text-red-400 hover:text-red-300"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<button
|
||||
onClick={() => setEditingIndex(index)}
|
||||
className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRemovePreviewChallenge(index)}
|
||||
className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Games list */}
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Игры</CardTitle>
|
||||
{/* Показываем кнопку если: all_participants ИЛИ (organizer_only И isOrganizer) */}
|
||||
{(marathon.game_proposal_mode === 'all_participants' || isOrganizer) && (
|
||||
<Button size="sm" onClick={() => setShowAddGame(!showAddGame)}>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
{isOrganizer ? 'Добавить игру' : 'Предложить игру'}
|
||||
</Button>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Add game form */}
|
||||
{showAddGame && (
|
||||
<div className="mb-6 p-4 bg-gray-900 rounded-lg space-y-3">
|
||||
<Input
|
||||
placeholder="Название игры"
|
||||
value={gameTitle}
|
||||
onChange={(e) => setGameTitle(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Ссылка для скачивания"
|
||||
value={gameUrl}
|
||||
onChange={(e) => setGameUrl(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Жанр (необязательно)"
|
||||
value={gameGenre}
|
||||
onChange={(e) => setGameGenre(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleAddGame} isLoading={isAddingGame} disabled={!gameTitle || !gameUrl}>
|
||||
{isOrganizer ? 'Добавить' : 'Предложить'}
|
||||
</Button>
|
||||
<Button variant="ghost" onClick={() => setShowAddGame(false)}>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
{!isOrganizer && (
|
||||
<p className="text-xs text-gray-500">
|
||||
Ваша игра будет отправлена на модерацию организаторам
|
||||
</p>
|
||||
)}
|
||||
<GlassCard>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-neon-500/20 flex items-center justify-center">
|
||||
<Gamepad2 className="w-5 h-5 text-neon-400" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-white">Игры</h3>
|
||||
</div>
|
||||
{(marathon.game_proposal_mode === 'all_participants' || isOrganizer) && (
|
||||
<NeonButton
|
||||
size="sm"
|
||||
onClick={() => setShowAddGame(!showAddGame)}
|
||||
icon={<Plus className="w-4 h-4" />}
|
||||
>
|
||||
{isOrganizer ? 'Добавить' : 'Предложить'}
|
||||
</NeonButton>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Games */}
|
||||
{(() => {
|
||||
// Организаторы: показываем только одобренные (pending в секции модерации)
|
||||
// Участники: показываем одобренные + свои pending
|
||||
const visibleGames = isOrganizer
|
||||
? games.filter(g => g.status !== 'pending')
|
||||
: games.filter(g => g.status === 'approved' || (g.status === 'pending' && g.proposed_by?.id === user?.id))
|
||||
{/* Add game form */}
|
||||
{showAddGame && (
|
||||
<div className="mb-6 p-4 glass rounded-xl space-y-3 border border-neon-500/20">
|
||||
<Input
|
||||
placeholder="Название игры"
|
||||
value={gameTitle}
|
||||
onChange={(e) => setGameTitle(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Ссылка для скачивания"
|
||||
value={gameUrl}
|
||||
onChange={(e) => setGameUrl(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
placeholder="Жанр (необязательно)"
|
||||
value={gameGenre}
|
||||
onChange={(e) => setGameGenre(e.target.value)}
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<NeonButton
|
||||
onClick={handleAddGame}
|
||||
isLoading={isAddingGame}
|
||||
disabled={!gameTitle || !gameUrl}
|
||||
>
|
||||
{isOrganizer ? 'Добавить' : 'Предложить'}
|
||||
</NeonButton>
|
||||
<NeonButton variant="outline" onClick={() => setShowAddGame(false)}>
|
||||
Отмена
|
||||
</NeonButton>
|
||||
</div>
|
||||
{!isOrganizer && (
|
||||
<p className="text-xs text-gray-500">
|
||||
Игра будет отправлена на модерацию организаторам
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
return visibleGames.length === 0 ? (
|
||||
<p className="text-center text-gray-400 py-8">
|
||||
{/* Games */}
|
||||
{(() => {
|
||||
const visibleGames = isOrganizer
|
||||
? games.filter(g => g.status !== 'pending')
|
||||
: games.filter(g => g.status === 'approved' || (g.status === 'pending' && g.proposed_by?.id === user?.id))
|
||||
|
||||
return visibleGames.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-dark-700 flex items-center justify-center">
|
||||
<Gamepad2 className="w-8 h-8 text-gray-600" />
|
||||
</div>
|
||||
<p className="text-gray-400">
|
||||
{isOrganizer ? 'Пока нет игр. Добавьте игры, чтобы начать!' : 'Пока нет одобренных игр. Предложите свою!'}
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{visibleGames.map((game) => renderGameCard(game, false))}
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{visibleGames.map((game) => renderGameCard(game, false))}
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,7 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { marathonsApi } from '@/api'
|
||||
import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
|
||||
import { NeonButton, Input } from '@/components/ui'
|
||||
import { Gamepad2, LogIn, AlertCircle } from 'lucide-react'
|
||||
|
||||
const loginSchema = z.object({
|
||||
login: z.string().min(3, 'Логин должен быть не менее 3 символов'),
|
||||
@@ -52,16 +53,33 @@ export function LoginPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center">Вход</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="min-h-[80vh] flex items-center justify-center px-4 -mt-8">
|
||||
{/* Background effects */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-neon-500/10 rounded-full blur-[100px]" />
|
||||
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Card */}
|
||||
<div className="glass-neon rounded-2xl p-8 animate-scale-in">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="w-16 h-16 rounded-2xl bg-neon-500/10 border border-neon-500/30 flex items-center justify-center">
|
||||
<Gamepad2 className="w-8 h-8 text-neon-500" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white mb-2">Добро пожаловать!</h1>
|
||||
<p className="text-gray-400">Войдите, чтобы продолжить</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
|
||||
{(submitError || error) && (
|
||||
<div className="p-3 bg-red-500/20 border border-red-500 rounded-lg text-red-500 text-sm">
|
||||
{submitError || error}
|
||||
<div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-red-400 text-sm animate-shake">
|
||||
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
||||
<span>{submitError || error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -69,6 +87,7 @@ export function LoginPage() {
|
||||
label="Логин"
|
||||
placeholder="Введите логин"
|
||||
error={errors.login?.message}
|
||||
autoComplete="username"
|
||||
{...register('login')}
|
||||
/>
|
||||
|
||||
@@ -77,22 +96,39 @@ export function LoginPage() {
|
||||
type="password"
|
||||
placeholder="Введите пароль"
|
||||
error={errors.password?.message}
|
||||
autoComplete="current-password"
|
||||
{...register('password')}
|
||||
/>
|
||||
|
||||
<Button type="submit" className="w-full" isLoading={isLoading}>
|
||||
<NeonButton
|
||||
type="submit"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
icon={<LogIn className="w-5 h-5" />}
|
||||
>
|
||||
Войти
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-gray-400 text-sm">
|
||||
{/* Footer */}
|
||||
<div className="mt-6 pt-6 border-t border-dark-600 text-center">
|
||||
<p className="text-gray-400 text-sm">
|
||||
Нет аккаунта?{' '}
|
||||
<Link to="/register" className="link">
|
||||
<Link
|
||||
to="/register"
|
||||
className="text-neon-400 hover:text-neon-300 transition-colors font-medium"
|
||||
>
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -top-4 -right-4 w-24 h-24 border border-neon-500/20 rounded-2xl -z-10" />
|
||||
<div className="absolute -bottom-4 -left-4 w-32 h-32 border border-accent-500/20 rounded-2xl -z-10" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,15 +2,20 @@ import { useState, useEffect, useRef } from 'react'
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom'
|
||||
import { marathonsApi, eventsApi, challengesApi } from '@/api'
|
||||
import type { Marathon, ActiveEvent, Challenge } from '@/types'
|
||||
import { Button, Card, CardContent } from '@/components/ui'
|
||||
import { NeonButton, GlassCard, StatsCard } from '@/components/ui'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { useToast } from '@/store/toast'
|
||||
import { useConfirm } from '@/store/confirm'
|
||||
import { EventBanner } from '@/components/EventBanner'
|
||||
import { EventControl } from '@/components/EventControl'
|
||||
import { ActivityFeed, type ActivityFeedRef } from '@/components/ActivityFeed'
|
||||
import { Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2, Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft, Zap, Flag } from 'lucide-react'
|
||||
import {
|
||||
Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2,
|
||||
Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft, Zap, Flag,
|
||||
Star, Target, TrendingDown, ChevronDown, ChevronUp, Link2
|
||||
} from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import { ru } from 'date-fns/locale'
|
||||
|
||||
export function MarathonPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
@@ -39,12 +44,10 @@ export function MarathonPage() {
|
||||
const data = await marathonsApi.get(parseInt(id))
|
||||
setMarathon(data)
|
||||
|
||||
// Load event data if marathon is active
|
||||
if (data.status === 'active' && data.my_participation) {
|
||||
const eventData = await eventsApi.getActive(parseInt(id))
|
||||
setActiveEvent(eventData)
|
||||
|
||||
// Load challenges for event control if organizer
|
||||
if (data.my_participation.role === 'organizer') {
|
||||
try {
|
||||
const challengesData = await challengesApi.list(parseInt(id))
|
||||
@@ -67,7 +70,6 @@ export function MarathonPage() {
|
||||
try {
|
||||
const eventData = await eventsApi.getActive(parseInt(id))
|
||||
setActiveEvent(eventData)
|
||||
// Refresh activity feed when event changes
|
||||
activityFeedRef.current?.refresh()
|
||||
} catch (error) {
|
||||
console.error('Failed to refresh event:', error)
|
||||
@@ -153,8 +155,9 @@ export function MarathonPage() {
|
||||
|
||||
if (isLoading || !marathon) {
|
||||
return (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
||||
<p className="text-gray-400">Загрузка марафона...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -164,265 +167,257 @@ export function MarathonPage() {
|
||||
const isCreator = marathon.creator.id === user?.id
|
||||
const canDelete = isCreator || user?.role === 'admin'
|
||||
|
||||
const statusConfig = {
|
||||
active: { color: 'text-neon-400', bg: 'bg-neon-500/20', border: 'border-neon-500/30', label: 'Активен' },
|
||||
preparing: { color: 'text-yellow-400', bg: 'bg-yellow-500/20', border: 'border-yellow-500/30', label: 'Подготовка' },
|
||||
finished: { color: 'text-gray-400', bg: 'bg-gray-500/20', border: 'border-gray-500/30', label: 'Завершён' },
|
||||
}
|
||||
const status = statusConfig[marathon.status as keyof typeof statusConfig] || statusConfig.finished
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Back button */}
|
||||
<Link to="/marathons" className="inline-flex items-center gap-2 text-gray-400 hover:text-white mb-4 transition-colors">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
<Link
|
||||
to="/marathons"
|
||||
className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
||||
К списку марафонов
|
||||
</Link>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Main content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-3xl font-bold text-white">{marathon.title}</h1>
|
||||
<span className={`flex items-center gap-1 text-xs px-2 py-1 rounded ${
|
||||
{/* Hero Banner */}
|
||||
<div className="relative rounded-2xl overflow-hidden mb-8">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-neon-500/10 via-dark-800 to-accent-500/10" />
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)] bg-[size:50px_50px]" />
|
||||
|
||||
<div className="relative p-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start gap-6">
|
||||
{/* Title & Description */}
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-wrap items-center gap-3 mb-3">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-white">{marathon.title}</h1>
|
||||
<span className={`flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border ${
|
||||
marathon.is_public
|
||||
? 'bg-green-900/50 text-green-400'
|
||||
: 'bg-gray-700 text-gray-300'
|
||||
? 'bg-green-500/20 text-green-400 border-green-500/30'
|
||||
: 'bg-dark-700 text-gray-300 border-dark-600'
|
||||
}`}>
|
||||
{marathon.is_public ? (
|
||||
<><Globe className="w-3 h-3" /> Открытый</>
|
||||
) : (
|
||||
<><Lock className="w-3 h-3" /> Закрытый</>
|
||||
)}
|
||||
{marathon.is_public ? <Globe className="w-3 h-3" /> : <Lock className="w-3 h-3" />}
|
||||
{marathon.is_public ? 'Открытый' : 'Закрытый'}
|
||||
</span>
|
||||
<span className={`flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full border ${status.bg} ${status.color} ${status.border}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${marathon.status === 'active' ? 'bg-neon-500 animate-pulse' : marathon.status === 'preparing' ? 'bg-yellow-500' : 'bg-gray-500'}`} />
|
||||
{status.label}
|
||||
</span>
|
||||
</div>
|
||||
{marathon.description && (
|
||||
<p className="text-gray-400">{marathon.description}</p>
|
||||
<p className="text-gray-400 max-w-2xl">{marathon.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 flex-wrap justify-end">
|
||||
{/* Кнопка присоединиться для открытых марафонов */}
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{marathon.is_public && !isParticipant && marathon.status !== 'finished' && (
|
||||
<Button onClick={handleJoinPublic} isLoading={isJoining}>
|
||||
<UserPlus className="w-4 h-4 mr-2" />
|
||||
<NeonButton onClick={handleJoinPublic} isLoading={isJoining} icon={<UserPlus className="w-4 h-4" />}>
|
||||
Присоединиться
|
||||
</Button>
|
||||
</NeonButton>
|
||||
)}
|
||||
|
||||
{/* Настройка для организаторов */}
|
||||
{marathon.status === 'preparing' && isOrganizer && (
|
||||
<Link to={`/marathons/${id}/lobby`}>
|
||||
<Button variant="secondary">
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
<NeonButton variant="secondary" icon={<Settings className="w-4 h-4" />}>
|
||||
Настройка
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Предложить игру для участников (не организаторов) если разрешено */}
|
||||
{marathon.status === 'preparing' && isParticipant && !isOrganizer && marathon.game_proposal_mode === 'all_participants' && (
|
||||
<Link to={`/marathons/${id}/lobby`}>
|
||||
<Button variant="secondary">
|
||||
<Gamepad2 className="w-4 h-4 mr-2" />
|
||||
<NeonButton variant="secondary" icon={<Gamepad2 className="w-4 h-4" />}>
|
||||
Предложить игру
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{marathon.status === 'active' && isParticipant && (
|
||||
<Link to={`/marathons/${id}/play`}>
|
||||
<Button>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
<NeonButton icon={<Play className="w-4 h-4" />}>
|
||||
Играть
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Link to={`/marathons/${id}/leaderboard`}>
|
||||
<Button variant="secondary">
|
||||
<Trophy className="w-4 h-4 mr-2" />
|
||||
<NeonButton variant="outline" icon={<Trophy className="w-4 h-4" />}>
|
||||
Рейтинг
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</Link>
|
||||
|
||||
{marathon.status === 'active' && isOrganizer && (
|
||||
<Button
|
||||
<NeonButton
|
||||
variant="secondary"
|
||||
onClick={handleFinish}
|
||||
isLoading={isFinishing}
|
||||
className="text-yellow-400 hover:text-yellow-300 hover:bg-yellow-900/20"
|
||||
icon={<Flag className="w-4 h-4" />}
|
||||
className="!text-yellow-400 !border-yellow-500/30 hover:!bg-yellow-500/10"
|
||||
>
|
||||
<Flag className="w-4 h-4 mr-2" />
|
||||
Завершить
|
||||
</Button>
|
||||
</NeonButton>
|
||||
)}
|
||||
|
||||
{canDelete && (
|
||||
<Button
|
||||
<NeonButton
|
||||
variant="ghost"
|
||||
onClick={handleDelete}
|
||||
isLoading={isDeleting}
|
||||
className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
className="!text-red-400 hover:!bg-red-500/10"
|
||||
icon={<Trash2 className="w-4 h-4" />}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Main content */}
|
||||
<div className="flex-1 min-w-0 space-y-6">
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
|
||||
<Card>
|
||||
<CardContent className="text-center py-4">
|
||||
<div className="text-2xl font-bold text-white">{marathon.participants_count}</div>
|
||||
<div className="text-sm text-gray-400 flex items-center justify-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
Участников
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="text-center py-4">
|
||||
<div className="text-2xl font-bold text-white">{marathon.games_count}</div>
|
||||
<div className="text-sm text-gray-400">Игр</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="text-center py-4">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{marathon.start_date ? format(new Date(marathon.start_date), 'd MMM') : '-'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400 flex items-center justify-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Начало
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="text-center py-4">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{marathon.end_date ? format(new Date(marathon.end_date), 'd MMM') : '-'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400 flex items-center justify-center gap-1">
|
||||
<CalendarCheck className="w-4 h-4" />
|
||||
Конец
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent className="text-center py-4">
|
||||
<div className={`text-2xl font-bold ${
|
||||
marathon.status === 'active' ? 'text-green-500' :
|
||||
marathon.status === 'preparing' ? 'text-yellow-500' : 'text-gray-400'
|
||||
}`}>
|
||||
{marathon.status === 'active' ? 'Активен' : marathon.status === 'preparing' ? 'Подготовка' : 'Завершён'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Статус</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
||||
<StatsCard
|
||||
label="Участников"
|
||||
value={marathon.participants_count}
|
||||
icon={<Users className="w-5 h-5" />}
|
||||
color="neon"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Игр"
|
||||
value={marathon.games_count}
|
||||
icon={<Gamepad2 className="w-5 h-5" />}
|
||||
color="purple"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Начало"
|
||||
value={marathon.start_date ? format(new Date(marathon.start_date), 'd MMM', { locale: ru }) : '-'}
|
||||
icon={<Calendar className="w-5 h-5" />}
|
||||
color="default"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Конец"
|
||||
value={marathon.end_date ? format(new Date(marathon.end_date), 'd MMM', { locale: ru }) : '-'}
|
||||
icon={<CalendarCheck className="w-5 h-5" />}
|
||||
color="default"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Статус"
|
||||
value={status.label}
|
||||
icon={<Target className="w-5 h-5" />}
|
||||
color={marathon.status === 'active' ? 'neon' : marathon.status === 'preparing' ? 'default' : 'default'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Active event banner */}
|
||||
{marathon.status === 'active' && activeEvent?.event && (
|
||||
<div className="mb-8">
|
||||
<EventBanner activeEvent={activeEvent} onRefresh={refreshEvent} />
|
||||
</div>
|
||||
<EventBanner activeEvent={activeEvent} onRefresh={refreshEvent} />
|
||||
)}
|
||||
|
||||
{/* Event control for organizers */}
|
||||
{marathon.status === 'active' && isOrganizer && (
|
||||
<Card className="mb-8">
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-medium text-white flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-yellow-500" />
|
||||
Управление событиями
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowEventControl(!showEventControl)}
|
||||
>
|
||||
{showEventControl ? 'Скрыть' : 'Показать'}
|
||||
</Button>
|
||||
<GlassCard>
|
||||
<button
|
||||
onClick={() => setShowEventControl(!showEventControl)}
|
||||
className="w-full flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
|
||||
<Zap className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold text-white">Управление событиями</h3>
|
||||
<p className="text-sm text-gray-400">Активируйте бонусы для участников</p>
|
||||
</div>
|
||||
</div>
|
||||
{showEventControl && activeEvent && (
|
||||
{showEventControl ? (
|
||||
<ChevronUp className="w-5 h-5 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
{showEventControl && activeEvent && (
|
||||
<div className="mt-6 pt-6 border-t border-dark-600">
|
||||
<EventControl
|
||||
marathonId={marathon.id}
|
||||
activeEvent={activeEvent}
|
||||
challenges={challenges}
|
||||
onEventChange={refreshEvent}
|
||||
/>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Invite link */}
|
||||
{marathon.status !== 'finished' && (
|
||||
<Card className="mb-8">
|
||||
<CardContent>
|
||||
<h3 className="font-medium text-white mb-3">Ссылка для приглашения</h3>
|
||||
<div className="flex items-center gap-3">
|
||||
<code className="flex-1 px-4 py-2 bg-gray-900 rounded-lg text-primary-400 font-mono text-sm overflow-hidden text-ellipsis">
|
||||
{getInviteLink()}
|
||||
</code>
|
||||
<Button variant="secondary" onClick={copyInviteLink}>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-4 h-4 mr-2" />
|
||||
Скопировано!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="w-4 h-4 mr-2" />
|
||||
Копировать
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<GlassCard>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||||
<Link2 className="w-5 h-5 text-accent-400" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
Поделитесь этой ссылкой с друзьями, чтобы они могли присоединиться к марафону
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Пригласить друзей</h3>
|
||||
<p className="text-sm text-gray-400">Поделитесь ссылкой</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<code className="flex-1 px-4 py-3 bg-dark-700 rounded-xl text-neon-400 font-mono text-sm overflow-hidden text-ellipsis border border-dark-600">
|
||||
{getInviteLink()}
|
||||
</code>
|
||||
<NeonButton variant="secondary" onClick={copyInviteLink} icon={copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}>
|
||||
{copied ? 'Скопировано!' : 'Копировать'}
|
||||
</NeonButton>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* My stats */}
|
||||
{marathon.my_participation && (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<h3 className="font-medium text-white mb-4">Ваша статистика</h3>
|
||||
<div className="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-primary-500">
|
||||
{marathon.my_participation.total_points}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Очков</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-yellow-500">
|
||||
{marathon.my_participation.current_streak}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Серия</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-gray-400">
|
||||
{marathon.my_participation.drop_count}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Пропусков</div>
|
||||
<GlassCard variant="neon">
|
||||
<h3 className="font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Star className="w-5 h-5 text-yellow-500" />
|
||||
Ваша статистика
|
||||
</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="text-center p-4 bg-dark-700/50 rounded-xl border border-dark-600">
|
||||
<div className="text-3xl font-bold text-neon-400">
|
||||
{marathon.my_participation.total_points}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400 mt-1">Очков</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="text-center p-4 bg-dark-700/50 rounded-xl border border-dark-600">
|
||||
<div className="text-3xl font-bold text-yellow-400 flex items-center justify-center gap-1">
|
||||
{marathon.my_participation.current_streak}
|
||||
{marathon.my_participation.current_streak > 0 && (
|
||||
<span className="text-lg">🔥</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400 mt-1">Серия</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-dark-700/50 rounded-xl border border-dark-600">
|
||||
<div className="text-3xl font-bold text-gray-400 flex items-center justify-center gap-1">
|
||||
{marathon.my_participation.drop_count}
|
||||
<TrendingDown className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="text-sm text-gray-400 mt-1">Пропусков</div>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Activity Feed - right sidebar */}
|
||||
{isParticipant && (
|
||||
<div className="lg:w-96 flex-shrink-0">
|
||||
<div className="lg:sticky lg:top-4">
|
||||
<div className="lg:sticky lg:top-24">
|
||||
<ActivityFeed
|
||||
ref={activityFeedRef}
|
||||
marathonId={marathon.id}
|
||||
|
||||
@@ -2,9 +2,10 @@ import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { marathonsApi } from '@/api'
|
||||
import type { MarathonListItem } from '@/types'
|
||||
import { Button, Card, CardContent } from '@/components/ui'
|
||||
import { Plus, Users, Calendar, Loader2 } from 'lucide-react'
|
||||
import { NeonButton, GlassCard, StatsCard } from '@/components/ui'
|
||||
import { Plus, Users, Calendar, Loader2, Trophy, Gamepad2, ChevronRight, Hash, Sparkles } from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import { ru } from 'date-fns/locale'
|
||||
|
||||
export function MarathonsPage() {
|
||||
const [marathons, setMarathons] = useState<MarathonListItem[]>([])
|
||||
@@ -12,6 +13,7 @@ export function MarathonsPage() {
|
||||
const [joinCode, setJoinCode] = useState('')
|
||||
const [joinError, setJoinError] = useState<string | null>(null)
|
||||
const [isJoining, setIsJoining] = useState(false)
|
||||
const [showJoinSection, setShowJoinSection] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
loadMarathons()
|
||||
@@ -36,6 +38,7 @@ export function MarathonsPage() {
|
||||
try {
|
||||
await marathonsApi.join(joinCode.trim())
|
||||
setJoinCode('')
|
||||
setShowJoinSection(false)
|
||||
await loadMarathons()
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
@@ -45,112 +48,217 @@ export function MarathonsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const getStatusConfig = (status: string) => {
|
||||
switch (status) {
|
||||
case 'preparing':
|
||||
return 'bg-yellow-500/20 text-yellow-500'
|
||||
return {
|
||||
color: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||
text: 'Подготовка',
|
||||
dot: 'bg-yellow-500',
|
||||
}
|
||||
case 'active':
|
||||
return 'bg-green-500/20 text-green-500'
|
||||
return {
|
||||
color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
|
||||
text: 'Активен',
|
||||
dot: 'bg-neon-500 animate-pulse',
|
||||
}
|
||||
case 'finished':
|
||||
return 'bg-gray-500/20 text-gray-400'
|
||||
return {
|
||||
color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
text: 'Завершён',
|
||||
dot: 'bg-gray-500',
|
||||
}
|
||||
default:
|
||||
return 'bg-gray-500/20 text-gray-400'
|
||||
return {
|
||||
color: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
|
||||
text: status,
|
||||
dot: 'bg-gray-500',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'preparing':
|
||||
return 'Подготовка'
|
||||
case 'active':
|
||||
return 'Активен'
|
||||
case 'finished':
|
||||
return 'Завершён'
|
||||
default:
|
||||
return status
|
||||
}
|
||||
}
|
||||
// Stats
|
||||
const activeCount = marathons.filter(m => m.status === 'active').length
|
||||
const completedCount = marathons.filter(m => m.status === 'finished').length
|
||||
const totalParticipants = marathons.reduce((acc, m) => acc + m.participants_count, 0)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
||||
<p className="text-gray-400">Загрузка марафонов...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-2xl font-bold text-white">Мои марафоны</h1>
|
||||
<Link to="/marathons/create">
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Создать марафон
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Мои марафоны</h1>
|
||||
<p className="text-gray-400">Управляйте своими игровыми соревнованиями</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
onClick={() => setShowJoinSection(!showJoinSection)}
|
||||
icon={<Hash className="w-4 h-4" />}
|
||||
>
|
||||
По коду
|
||||
</NeonButton>
|
||||
<Link to="/marathons/create">
|
||||
<NeonButton icon={<Plus className="w-4 h-4" />}>
|
||||
Создать
|
||||
</NeonButton>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
{marathons.length > 0 && (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<StatsCard
|
||||
label="Всего"
|
||||
value={marathons.length}
|
||||
icon={<Gamepad2 className="w-6 h-6" />}
|
||||
color="default"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Активных"
|
||||
value={activeCount}
|
||||
icon={<Sparkles className="w-6 h-6" />}
|
||||
color="neon"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Завершено"
|
||||
value={completedCount}
|
||||
icon={<Trophy className="w-6 h-6" />}
|
||||
color="purple"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Участников"
|
||||
value={totalParticipants}
|
||||
icon={<Users className="w-6 h-6" />}
|
||||
color="pink"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Join marathon */}
|
||||
<Card className="mb-8">
|
||||
<CardContent>
|
||||
<h3 className="font-medium text-white mb-3">Присоединиться к марафону</h3>
|
||||
{showJoinSection && (
|
||||
<GlassCard className="mb-8 animate-slide-in-down" variant="neon">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||||
<Hash className="w-5 h-5 text-accent-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-white">Присоединиться к марафону</h3>
|
||||
<p className="text-sm text-gray-400">Введите код приглашения</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={joinCode}
|
||||
onChange={(e) => setJoinCode(e.target.value)}
|
||||
placeholder="Введите код приглашения"
|
||||
className="input flex-1"
|
||||
onChange={(e) => setJoinCode(e.target.value.toUpperCase())}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleJoin()}
|
||||
placeholder="XXXXXX"
|
||||
className="input flex-1 font-mono text-center tracking-widest uppercase"
|
||||
maxLength={10}
|
||||
/>
|
||||
<Button onClick={handleJoin} isLoading={isJoining}>
|
||||
<NeonButton
|
||||
onClick={handleJoin}
|
||||
isLoading={isJoining}
|
||||
color="purple"
|
||||
>
|
||||
Присоединиться
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</div>
|
||||
{joinError && <p className="mt-2 text-sm text-red-500">{joinError}</p>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{joinError && (
|
||||
<p className="mt-3 text-sm text-red-400 flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-red-500 rounded-full" />
|
||||
{joinError}
|
||||
</p>
|
||||
)}
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Marathon list */}
|
||||
{marathons.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="text-center py-8">
|
||||
<p className="text-gray-400 mb-4">У вас пока нет марафонов</p>
|
||||
<GlassCard className="text-center py-16">
|
||||
<div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-dark-700 flex items-center justify-center">
|
||||
<Gamepad2 className="w-10 h-10 text-gray-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">Нет марафонов</h3>
|
||||
<p className="text-gray-400 mb-6 max-w-sm mx-auto">
|
||||
Создайте свой первый марафон или присоединитесь к существующему по коду
|
||||
</p>
|
||||
<div className="flex gap-3 justify-center">
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
onClick={() => setShowJoinSection(true)}
|
||||
icon={<Hash className="w-4 h-4" />}
|
||||
>
|
||||
Ввести код
|
||||
</NeonButton>
|
||||
<Link to="/marathons/create">
|
||||
<Button>Создать первый марафон</Button>
|
||||
<NeonButton icon={<Plus className="w-4 h-4" />}>
|
||||
Создать марафон
|
||||
</NeonButton>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</GlassCard>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{marathons.map((marathon) => (
|
||||
<Link key={marathon.id} to={`/marathons/${marathon.id}`}>
|
||||
<Card className="hover:bg-gray-700/50 transition-colors cursor-pointer">
|
||||
<CardContent className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white mb-1">
|
||||
{marathon.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
{marathon.participants_count} участников
|
||||
{marathons.map((marathon, index) => {
|
||||
const status = getStatusConfig(marathon.status)
|
||||
return (
|
||||
<Link key={marathon.id} to={`/marathons/${marathon.id}`}>
|
||||
<div
|
||||
className="group glass rounded-xl p-5 border border-dark-600 transition-all duration-300 hover:border-neon-500/30 hover:-translate-y-0.5 hover:shadow-[0_10px_40px_rgba(0,240,255,0.1)]"
|
||||
style={{ animationDelay: `${index * 50}ms` }}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Icon */}
|
||||
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 flex items-center justify-center border border-neon-500/20 group-hover:border-neon-500/40 transition-colors">
|
||||
<Gamepad2 className="w-7 h-7 text-neon-400" />
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-neon-400 transition-colors mb-1">
|
||||
{marathon.title}
|
||||
</h3>
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Users className="w-4 h-4" />
|
||||
{marathon.participants_count}
|
||||
</span>
|
||||
{marathon.start_date && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{format(new Date(marathon.start_date), 'd MMM yyyy', { locale: ru })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status & Arrow */}
|
||||
<div className="flex items-center gap-4">
|
||||
<span className={`px-3 py-1.5 rounded-full text-sm font-medium border flex items-center gap-2 ${status.color}`}>
|
||||
<span className={`w-2 h-2 rounded-full ${status.dot}`} />
|
||||
{status.text}
|
||||
</span>
|
||||
{marathon.start_date && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{format(new Date(marathon.start_date), 'MMM d, yyyy')}
|
||||
</span>
|
||||
)}
|
||||
<ChevronRight className="w-5 h-5 text-gray-600 group-hover:text-neon-400 transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-sm ${getStatusColor(marathon.status)}`}>
|
||||
{getStatusText(marathon.status)}
|
||||
</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,33 +1,62 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Button } from '@/components/ui'
|
||||
import { Gamepad2, Home, Ghost } from 'lucide-react'
|
||||
import { NeonButton } from '@/components/ui'
|
||||
import { Gamepad2, Home, Ghost, Sparkles } from 'lucide-react'
|
||||
|
||||
export function NotFoundPage() {
|
||||
return (
|
||||
<div className="min-h-[60vh] flex flex-col items-center justify-center text-center px-4">
|
||||
{/* Иконка с анимацией */}
|
||||
<div className="relative mb-8">
|
||||
<Ghost className="w-32 h-32 text-gray-700 animate-bounce" />
|
||||
<Gamepad2 className="w-12 h-12 text-primary-500 absolute -bottom-2 -right-2" />
|
||||
<div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4">
|
||||
{/* Background effects */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/3 -left-32 w-96 h-96 bg-accent-500/5 rounded-full blur-[100px]" />
|
||||
<div className="absolute bottom-1/3 -right-32 w-96 h-96 bg-neon-500/5 rounded-full blur-[100px]" />
|
||||
</div>
|
||||
|
||||
{/* Заголовок */}
|
||||
<h1 className="text-7xl font-bold text-white mb-4">404</h1>
|
||||
<h2 className="text-2xl font-semibold text-gray-400 mb-2">
|
||||
{/* Icon */}
|
||||
<div className="relative mb-8 animate-float">
|
||||
<div className="w-32 h-32 rounded-3xl bg-dark-700/50 border border-dark-600 flex items-center justify-center">
|
||||
<Ghost className="w-20 h-20 text-gray-600" />
|
||||
</div>
|
||||
<div className="absolute -bottom-2 -right-2 w-12 h-12 rounded-xl bg-neon-500/20 border border-neon-500/30 flex items-center justify-center">
|
||||
<Gamepad2 className="w-6 h-6 text-neon-400" />
|
||||
</div>
|
||||
{/* Glitch effect dots */}
|
||||
<div className="absolute -top-2 -left-2 w-3 h-3 rounded-full bg-accent-500/50 animate-pulse" />
|
||||
<div className="absolute top-4 -right-4 w-2 h-2 rounded-full bg-neon-500/50 animate-pulse" style={{ animationDelay: '0.5s' }} />
|
||||
</div>
|
||||
|
||||
{/* 404 text with glitch effect */}
|
||||
<div className="relative mb-4">
|
||||
<h1 className="text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neon-400 via-accent-400 to-pink-400">
|
||||
404
|
||||
</h1>
|
||||
<div className="absolute inset-0 text-8xl font-bold text-neon-500/20 blur-xl">
|
||||
404
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold text-white mb-3">
|
||||
Страница не найдена
|
||||
</h2>
|
||||
<p className="text-gray-500 mb-8 max-w-md">
|
||||
<p className="text-gray-400 mb-8 max-w-md">
|
||||
Похоже, эта страница ушла на марафон и не вернулась.
|
||||
Попробуй начать с главной.
|
||||
<br />
|
||||
<span className="text-gray-500">Попробуй начать с главной.</span>
|
||||
</p>
|
||||
|
||||
{/* Кнопка */}
|
||||
{/* Button */}
|
||||
<Link to="/">
|
||||
<Button size="lg" className="flex items-center gap-2">
|
||||
<Home className="w-5 h-5" />
|
||||
<NeonButton size="lg" icon={<Home className="w-5 h-5" />}>
|
||||
На главную
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</Link>
|
||||
|
||||
{/* Decorative sparkles */}
|
||||
<div className="absolute top-1/4 left-1/4 opacity-20">
|
||||
<Sparkles className="w-6 h-6 text-neon-400 animate-pulse" />
|
||||
</div>
|
||||
<div className="absolute bottom-1/3 right-1/4 opacity-20">
|
||||
<Sparkles className="w-4 h-4 text-accent-400 animate-pulse" style={{ animationDelay: '1s' }} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -7,15 +7,15 @@ import { usersApi, telegramApi, authApi } from '@/api'
|
||||
import type { UserStats } from '@/types'
|
||||
import { useToast } from '@/store/toast'
|
||||
import {
|
||||
Button, Input, Card, CardHeader, CardTitle, CardContent, clearAvatarCache
|
||||
NeonButton, Input, GlassCard, StatsCard, clearAvatarCache
|
||||
} from '@/components/ui'
|
||||
import {
|
||||
User, Camera, Trophy, Target, CheckCircle, Flame,
|
||||
Loader2, MessageCircle, Link2, Link2Off, ExternalLink,
|
||||
Eye, EyeOff, Save, KeyRound
|
||||
Eye, EyeOff, Save, KeyRound, Shield
|
||||
} from 'lucide-react'
|
||||
|
||||
// Схемы валидации
|
||||
// Schemas
|
||||
const nicknameSchema = z.object({
|
||||
nickname: z.string().min(2, 'Минимум 2 символа').max(50, 'Максимум 50 символов'),
|
||||
})
|
||||
@@ -36,7 +36,7 @@ export function ProfilePage() {
|
||||
const { user, updateUser } = useAuthStore()
|
||||
const toast = useToast()
|
||||
|
||||
// Состояние
|
||||
// State
|
||||
const [stats, setStats] = useState<UserStats | null>(null)
|
||||
const [isLoadingStats, setIsLoadingStats] = useState(true)
|
||||
const [isUploadingAvatar, setIsUploadingAvatar] = useState(false)
|
||||
@@ -53,7 +53,7 @@ export function ProfilePage() {
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Формы
|
||||
// Forms
|
||||
const nicknameForm = useForm<NicknameForm>({
|
||||
resolver: zodResolver(nicknameSchema),
|
||||
defaultValues: { nickname: user?.nickname || '' },
|
||||
@@ -64,7 +64,7 @@ export function ProfilePage() {
|
||||
defaultValues: { current_password: '', new_password: '', confirm_password: '' },
|
||||
})
|
||||
|
||||
// Загрузка статистики
|
||||
// Load stats
|
||||
useEffect(() => {
|
||||
loadStats()
|
||||
return () => {
|
||||
@@ -72,7 +72,7 @@ export function ProfilePage() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Загрузка аватарки через API
|
||||
// Load avatar via API
|
||||
useEffect(() => {
|
||||
if (user?.id && user?.avatar_url) {
|
||||
loadAvatar(user.id)
|
||||
@@ -98,7 +98,7 @@ export function ProfilePage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Обновляем форму никнейма при изменении user
|
||||
// Update nickname form when user changes
|
||||
useEffect(() => {
|
||||
if (user?.nickname) {
|
||||
nicknameForm.reset({ nickname: user.nickname })
|
||||
@@ -116,7 +116,7 @@ export function ProfilePage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Обновление никнейма
|
||||
// Update nickname
|
||||
const onNicknameSubmit = async (data: NicknameForm) => {
|
||||
try {
|
||||
const updatedUser = await usersApi.updateNickname(data)
|
||||
@@ -127,7 +127,7 @@ export function ProfilePage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Загрузка аватара
|
||||
// Upload avatar
|
||||
const handleAvatarClick = () => {
|
||||
fileInputRef.current?.click()
|
||||
}
|
||||
@@ -136,7 +136,6 @@ export function ProfilePage() {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
// Валидация
|
||||
if (!file.type.startsWith('image/')) {
|
||||
toast.error('Файл должен быть изображением')
|
||||
return
|
||||
@@ -150,9 +149,7 @@ export function ProfilePage() {
|
||||
try {
|
||||
const updatedUser = await usersApi.uploadAvatar(file)
|
||||
updateUser({ avatar_url: updatedUser.avatar_url })
|
||||
// Перезагружаем аватарку через API
|
||||
if (user?.id) {
|
||||
// Очищаем старый blob URL и глобальный кэш
|
||||
if (avatarBlobUrl) {
|
||||
URL.revokeObjectURL(avatarBlobUrl)
|
||||
}
|
||||
@@ -167,7 +164,7 @@ export function ProfilePage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Смена пароля
|
||||
// Change password
|
||||
const onPasswordSubmit = async (data: PasswordForm) => {
|
||||
try {
|
||||
await usersApi.changePassword({
|
||||
@@ -184,7 +181,7 @@ export function ProfilePage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Telegram функции
|
||||
// Telegram functions
|
||||
const startPolling = () => {
|
||||
setIsPolling(true)
|
||||
let attempts = 0
|
||||
@@ -245,265 +242,285 @@ export function ProfilePage() {
|
||||
}
|
||||
|
||||
const isLinked = !!user?.telegram_id
|
||||
// Приоритет: загруженная аватарка (blob) > телеграм аватарка
|
||||
const displayAvatar = avatarBlobUrl || user?.telegram_avatar_url
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto space-y-6">
|
||||
<h1 className="text-2xl font-bold text-white">Мой профиль</h1>
|
||||
<div className="max-w-3xl mx-auto space-y-6">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Мой профиль</h1>
|
||||
<p className="text-gray-400">Настройки вашего аккаунта</p>
|
||||
</div>
|
||||
|
||||
{/* Карточка профиля */}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-6">
|
||||
{/* Аватар */}
|
||||
<div className="relative group flex-shrink-0">
|
||||
{isLoadingAvatar ? (
|
||||
<div className="w-24 h-24 rounded-full bg-gray-700 animate-pulse" />
|
||||
) : (
|
||||
<button
|
||||
onClick={handleAvatarClick}
|
||||
disabled={isUploadingAvatar}
|
||||
className="relative w-24 h-24 rounded-full overflow-hidden bg-gray-700 hover:opacity-80 transition-opacity"
|
||||
>
|
||||
{displayAvatar ? (
|
||||
<img
|
||||
src={displayAvatar}
|
||||
alt={user?.nickname}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<User className="w-12 h-12 text-gray-500" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{isUploadingAvatar ? (
|
||||
<Loader2 className="w-6 h-6 text-white animate-spin" />
|
||||
) : (
|
||||
<Camera className="w-6 h-6 text-white" />
|
||||
)}
|
||||
{/* Profile Card */}
|
||||
<GlassCard variant="neon">
|
||||
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
|
||||
{/* Avatar */}
|
||||
<div className="relative group flex-shrink-0">
|
||||
{isLoadingAvatar ? (
|
||||
<div className="w-28 h-28 rounded-2xl bg-dark-700 skeleton" />
|
||||
) : (
|
||||
<button
|
||||
onClick={handleAvatarClick}
|
||||
disabled={isUploadingAvatar}
|
||||
className="relative w-28 h-28 rounded-2xl overflow-hidden bg-dark-700 border-2 border-neon-500/30 hover:border-neon-500 transition-all group-hover:shadow-[0_0_30px_rgba(0,240,255,0.3)]"
|
||||
>
|
||||
{displayAvatar ? (
|
||||
<img
|
||||
src={displayAvatar}
|
||||
alt={user?.nickname}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-neon-500/20 to-accent-500/20">
|
||||
<User className="w-12 h-12 text-gray-500" />
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleAvatarChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Форма никнейма */}
|
||||
<div className="flex-1">
|
||||
<form onSubmit={nicknameForm.handleSubmit(onNicknameSubmit)} className="space-y-4">
|
||||
<Input
|
||||
label="Никнейм"
|
||||
{...nicknameForm.register('nickname')}
|
||||
error={nicknameForm.formState.errors.nickname?.message}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
isLoading={nicknameForm.formState.isSubmitting}
|
||||
disabled={!nicknameForm.formState.isDirty}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Сохранить
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Статистика */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trophy className="w-5 h-5 text-yellow-500" />
|
||||
Статистика
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoadingStats ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<div className="w-6 h-6 bg-gray-700 rounded mx-auto mb-2 animate-pulse" />
|
||||
<div className="h-8 w-12 bg-gray-700 rounded mx-auto mb-2 animate-pulse" />
|
||||
<div className="h-4 w-16 bg-gray-700 rounded mx-auto animate-pulse" />
|
||||
)}
|
||||
<div className="absolute inset-0 bg-dark-900/70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{isUploadingAvatar ? (
|
||||
<Loader2 className="w-8 h-8 text-neon-500 animate-spin" />
|
||||
) : (
|
||||
<Camera className="w-8 h-8 text-neon-500" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : stats ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<Target className="w-6 h-6 text-blue-400 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-white">{stats.marathons_count}</div>
|
||||
<div className="text-sm text-gray-400">Марафонов</div>
|
||||
</button>
|
||||
)}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleAvatarChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Nickname Form */}
|
||||
<div className="flex-1 w-full sm:w-auto">
|
||||
<form onSubmit={nicknameForm.handleSubmit(onNicknameSubmit)} className="space-y-4">
|
||||
<Input
|
||||
label="Никнейм"
|
||||
{...nicknameForm.register('nickname')}
|
||||
error={nicknameForm.formState.errors.nickname?.message}
|
||||
/>
|
||||
<NeonButton
|
||||
type="submit"
|
||||
size="sm"
|
||||
isLoading={nicknameForm.formState.isSubmitting}
|
||||
disabled={!nicknameForm.formState.isDirty}
|
||||
icon={<Save className="w-4 h-4" />}
|
||||
>
|
||||
Сохранить
|
||||
</NeonButton>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Stats */}
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Trophy className="w-5 h-5 text-yellow-500" />
|
||||
Статистика
|
||||
</h2>
|
||||
{isLoadingStats ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="glass rounded-xl p-4">
|
||||
<div className="w-12 h-12 bg-dark-700 rounded-lg mb-3 skeleton" />
|
||||
<div className="h-8 w-16 bg-dark-700 rounded mb-2 skeleton" />
|
||||
<div className="h-4 w-20 bg-dark-700 rounded skeleton" />
|
||||
</div>
|
||||
<div className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<Trophy className="w-6 h-6 text-yellow-500 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-white">{stats.wins_count}</div>
|
||||
<div className="text-sm text-gray-400">Побед</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<CheckCircle className="w-6 h-6 text-green-500 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-white">{stats.completed_assignments}</div>
|
||||
<div className="text-sm text-gray-400">Заданий</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<Flame className="w-6 h-6 text-orange-500 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-white">{stats.total_points_earned}</div>
|
||||
<div className="text-sm text-gray-400">Очков</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-400 text-center">Не удалось загрузить статистику</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : stats ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatsCard
|
||||
label="Марафонов"
|
||||
value={stats.marathons_count}
|
||||
icon={<Target className="w-6 h-6" />}
|
||||
color="neon"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Побед"
|
||||
value={stats.wins_count}
|
||||
icon={<Trophy className="w-6 h-6" />}
|
||||
color="purple"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Заданий"
|
||||
value={stats.completed_assignments}
|
||||
icon={<CheckCircle className="w-6 h-6" />}
|
||||
color="neon"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Очков"
|
||||
value={stats.total_points_earned}
|
||||
icon={<Flame className="w-6 h-6" />}
|
||||
color="pink"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<GlassCard className="text-center py-8">
|
||||
<p className="text-gray-400">Не удалось загрузить статистику</p>
|
||||
</GlassCard>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Telegram */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<MessageCircle className="w-5 h-5 text-blue-400" />
|
||||
Telegram
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLinked ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4 p-4 bg-gray-900 rounded-lg">
|
||||
<div className="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center overflow-hidden">
|
||||
{user?.telegram_avatar_url ? (
|
||||
<img
|
||||
src={user.telegram_avatar_url}
|
||||
alt="Telegram avatar"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Link2 className="w-6 h-6 text-blue-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-white font-medium">
|
||||
{user?.telegram_first_name} {user?.telegram_last_name}
|
||||
</p>
|
||||
{user?.telegram_username && (
|
||||
<p className="text-blue-400 text-sm">@{user.telegram_username}</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={handleUnlinkTelegram}
|
||||
isLoading={telegramLoading}
|
||||
>
|
||||
<Link2Off className="w-4 h-4 mr-2" />
|
||||
Отвязать
|
||||
</Button>
|
||||
<GlassCard>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
|
||||
<MessageCircle className="w-6 h-6 text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Telegram</h2>
|
||||
<p className="text-sm text-gray-400">
|
||||
{isLinked ? 'Аккаунт привязан' : 'Привяжите для уведомлений'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLinked ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4 p-4 bg-dark-700/50 rounded-xl border border-dark-600">
|
||||
<div className="w-14 h-14 rounded-xl bg-blue-500/20 flex items-center justify-center overflow-hidden border border-blue-500/30">
|
||||
{user?.telegram_avatar_url ? (
|
||||
<img
|
||||
src={user.telegram_avatar_url}
|
||||
alt="Telegram avatar"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Link2 className="w-7 h-7 text-blue-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-white font-medium">
|
||||
{user?.telegram_first_name} {user?.telegram_last_name}
|
||||
</p>
|
||||
{user?.telegram_username && (
|
||||
<p className="text-blue-400 text-sm">@{user.telegram_username}</p>
|
||||
)}
|
||||
</div>
|
||||
<NeonButton
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={handleUnlinkTelegram}
|
||||
isLoading={telegramLoading}
|
||||
icon={<Link2Off className="w-4 h-4" />}
|
||||
>
|
||||
Отвязать
|
||||
</NeonButton>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-400">
|
||||
Привяжи Telegram для получения уведомлений о событиях и марафонах.
|
||||
</p>
|
||||
{isPolling ? (
|
||||
<div className="p-4 bg-blue-500/20 border border-blue-500/50 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Loader2 className="w-5 h-5 text-blue-400 animate-spin" />
|
||||
<p className="text-blue-400">Ожидание привязки...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-400">
|
||||
Привяжите Telegram для получения уведомлений о событиях и марафонах.
|
||||
</p>
|
||||
{isPolling ? (
|
||||
<div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-xl">
|
||||
<div className="flex items-center gap-3">
|
||||
<Loader2 className="w-5 h-5 text-blue-400 animate-spin" />
|
||||
<p className="text-blue-400">Ожидание привязки...</p>
|
||||
</div>
|
||||
) : (
|
||||
<Button onClick={handleLinkTelegram} isLoading={telegramLoading}>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
Привязать Telegram
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Смена пароля */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<KeyRound className="w-5 h-5 text-gray-400" />
|
||||
Безопасность
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!showPasswordForm ? (
|
||||
<Button variant="secondary" onClick={() => setShowPasswordForm(true)}>
|
||||
Сменить пароль
|
||||
</Button>
|
||||
) : (
|
||||
<form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4">
|
||||
<div className="relative">
|
||||
<Input
|
||||
label="Текущий пароль"
|
||||
type={showCurrentPassword ? 'text' : 'password'}
|
||||
{...passwordForm.register('current_password')}
|
||||
error={passwordForm.formState.errors.current_password?.message}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
|
||||
className="absolute right-3 top-8 text-gray-400 hover:text-white"
|
||||
>
|
||||
{showCurrentPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<NeonButton
|
||||
onClick={handleLinkTelegram}
|
||||
isLoading={telegramLoading}
|
||||
icon={<ExternalLink className="w-4 h-4" />}
|
||||
>
|
||||
Привязать Telegram
|
||||
</NeonButton>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</GlassCard>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
label="Новый пароль"
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
{...passwordForm.register('new_password')}
|
||||
error={passwordForm.formState.errors.new_password?.message}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewPassword(!showNewPassword)}
|
||||
className="absolute right-3 top-8 text-gray-400 hover:text-white"
|
||||
>
|
||||
{showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
{/* Security */}
|
||||
<GlassCard>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-accent-500/20 flex items-center justify-center">
|
||||
<Shield className="w-6 h-6 text-accent-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">Безопасность</h2>
|
||||
<p className="text-sm text-gray-400">Управление паролем</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!showPasswordForm ? (
|
||||
<NeonButton
|
||||
variant="secondary"
|
||||
onClick={() => setShowPasswordForm(true)}
|
||||
icon={<KeyRound className="w-4 h-4" />}
|
||||
>
|
||||
Сменить пароль
|
||||
</NeonButton>
|
||||
) : (
|
||||
<form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4">
|
||||
<div className="relative">
|
||||
<Input
|
||||
label="Подтвердите новый пароль"
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
{...passwordForm.register('confirm_password')}
|
||||
error={passwordForm.formState.errors.confirm_password?.message}
|
||||
label="Текущий пароль"
|
||||
type={showCurrentPassword ? 'text' : 'password'}
|
||||
{...passwordForm.register('current_password')}
|
||||
error={passwordForm.formState.errors.current_password?.message}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCurrentPassword(!showCurrentPassword)}
|
||||
className="absolute right-3 top-9 text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
{showCurrentPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button type="submit" isLoading={passwordForm.formState.isSubmitting}>
|
||||
Сменить пароль
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setShowPasswordForm(false)
|
||||
passwordForm.reset()
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="relative">
|
||||
<Input
|
||||
label="Новый пароль"
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
{...passwordForm.register('new_password')}
|
||||
error={passwordForm.formState.errors.new_password?.message}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewPassword(!showNewPassword)}
|
||||
className="absolute right-3 top-9 text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
{showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Подтвердите новый пароль"
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
{...passwordForm.register('confirm_password')}
|
||||
error={passwordForm.formState.errors.confirm_password?.message}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<NeonButton
|
||||
type="submit"
|
||||
isLoading={passwordForm.formState.isSubmitting}
|
||||
icon={<Save className="w-4 h-4" />}
|
||||
>
|
||||
Сменить пароль
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setShowPasswordForm(false)
|
||||
passwordForm.reset()
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</NeonButton>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,7 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { marathonsApi } from '@/api'
|
||||
import { Button, Input, Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
|
||||
import { NeonButton, Input } from '@/components/ui'
|
||||
import { Gamepad2, UserPlus, AlertCircle } from 'lucide-react'
|
||||
|
||||
const registerSchema = z.object({
|
||||
login: z
|
||||
@@ -68,16 +69,33 @@ export function RegisterPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-center">Регистрация</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="min-h-[80vh] flex items-center justify-center px-4 -mt-8">
|
||||
{/* Background effects */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-1/3 -right-32 w-96 h-96 bg-accent-500/10 rounded-full blur-[100px]" />
|
||||
<div className="absolute bottom-1/3 -left-32 w-96 h-96 bg-neon-500/10 rounded-full blur-[100px]" />
|
||||
</div>
|
||||
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Card */}
|
||||
<div className="glass-neon rounded-2xl p-8 animate-scale-in">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="w-16 h-16 rounded-2xl bg-accent-500/10 border border-accent-500/30 flex items-center justify-center">
|
||||
<Gamepad2 className="w-8 h-8 text-accent-500" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white mb-2">Создать аккаунт</h1>
|
||||
<p className="text-gray-400">Присоединяйтесь к игровому марафону</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
{(submitError || error) && (
|
||||
<div className="p-3 bg-red-500/20 border border-red-500 rounded-lg text-red-500 text-sm">
|
||||
{submitError || error}
|
||||
<div className="flex items-center gap-3 p-4 bg-red-500/10 border border-red-500/30 rounded-xl text-red-400 text-sm animate-shake">
|
||||
<AlertCircle className="w-5 h-5 flex-shrink-0" />
|
||||
<span>{submitError || error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -85,12 +103,13 @@ export function RegisterPage() {
|
||||
label="Логин"
|
||||
placeholder="Придумайте логин"
|
||||
error={errors.login?.message}
|
||||
autoComplete="username"
|
||||
{...register('login')}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Никнейм"
|
||||
placeholder="Придумайте никнейм"
|
||||
placeholder="Как вас называть?"
|
||||
error={errors.nickname?.message}
|
||||
{...register('nickname')}
|
||||
/>
|
||||
@@ -100,6 +119,7 @@ export function RegisterPage() {
|
||||
type="password"
|
||||
placeholder="Придумайте пароль"
|
||||
error={errors.password?.message}
|
||||
autoComplete="new-password"
|
||||
{...register('password')}
|
||||
/>
|
||||
|
||||
@@ -108,22 +128,40 @@ export function RegisterPage() {
|
||||
type="password"
|
||||
placeholder="Повторите пароль"
|
||||
error={errors.confirmPassword?.message}
|
||||
autoComplete="new-password"
|
||||
{...register('confirmPassword')}
|
||||
/>
|
||||
|
||||
<Button type="submit" className="w-full" isLoading={isLoading}>
|
||||
<NeonButton
|
||||
type="submit"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
color="purple"
|
||||
isLoading={isLoading}
|
||||
icon={<UserPlus className="w-5 h-5" />}
|
||||
>
|
||||
Зарегистрироваться
|
||||
</Button>
|
||||
</NeonButton>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-gray-400 text-sm">
|
||||
{/* Footer */}
|
||||
<div className="mt-6 pt-6 border-t border-dark-600 text-center">
|
||||
<p className="text-gray-400 text-sm">
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link to="/login" className="link">
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-accent-400 hover:text-accent-300 transition-colors font-medium"
|
||||
>
|
||||
Войти
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -top-4 -left-4 w-24 h-24 border border-accent-500/20 rounded-2xl -z-10" />
|
||||
<div className="absolute -bottom-4 -right-4 w-32 h-32 border border-neon-500/20 rounded-2xl -z-10" />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,10 +3,10 @@ import { useParams, useNavigate, Link } from 'react-router-dom'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { usersApi } from '@/api'
|
||||
import type { UserProfilePublic } from '@/types'
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui'
|
||||
import { GlassCard, StatsCard } from '@/components/ui'
|
||||
import {
|
||||
User, Trophy, Target, CheckCircle, Flame,
|
||||
Loader2, ArrowLeft, Calendar
|
||||
Loader2, ArrowLeft, Calendar, Zap
|
||||
} from 'lucide-react'
|
||||
|
||||
export function UserProfilePage() {
|
||||
@@ -82,8 +82,9 @@ export function UserProfilePage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
|
||||
<p className="text-gray-400">Загрузка профиля...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -91,17 +92,17 @@ export function UserProfilePage() {
|
||||
if (error || !profile) {
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<User className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold text-white mb-2">
|
||||
{error || 'Пользователь не найден'}
|
||||
</h2>
|
||||
<Link to="/" className="text-primary-400 hover:text-primary-300">
|
||||
Вернуться на главную
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<GlassCard className="py-12 text-center">
|
||||
<div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-dark-700 flex items-center justify-center">
|
||||
<User className="w-10 h-10 text-gray-600" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white mb-2">
|
||||
{error || 'Пользователь не найден'}
|
||||
</h2>
|
||||
<Link to="/" className="text-neon-400 hover:text-neon-300 transition-colors">
|
||||
Вернуться на главную
|
||||
</Link>
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -111,18 +112,18 @@ export function UserProfilePage() {
|
||||
{/* Кнопка назад */}
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
|
||||
className="flex items-center gap-2 text-gray-400 hover:text-neon-400 transition-colors group"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
|
||||
Назад
|
||||
</button>
|
||||
|
||||
{/* Профиль */}
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Аватар */}
|
||||
<div className="w-24 h-24 rounded-full overflow-hidden bg-gray-700 flex-shrink-0">
|
||||
<GlassCard variant="neon">
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Аватар */}
|
||||
<div className="relative">
|
||||
<div className="w-24 h-24 rounded-2xl overflow-hidden bg-dark-700 border-2 border-neon-500/30 shadow-[0_0_20px_rgba(0,240,255,0.2)]">
|
||||
{avatarBlobUrl ? (
|
||||
<img
|
||||
src={avatarBlobUrl}
|
||||
@@ -130,67 +131,69 @@ export function UserProfilePage() {
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-dark-700 to-dark-800">
|
||||
<User className="w-12 h-12 text-gray-500" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Инфо */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white mb-2">
|
||||
{profile.nickname}
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-gray-400 text-sm">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Зарегистрирован {formatDate(profile.created_at)}</span>
|
||||
</div>
|
||||
{/* Online indicator effect */}
|
||||
<div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-lg bg-neon-500/20 border border-neon-500/30 flex items-center justify-center">
|
||||
<Zap className="w-3 h-3 text-neon-400" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Инфо */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white mb-2">
|
||||
{profile.nickname}
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-gray-400 text-sm">
|
||||
<Calendar className="w-4 h-4 text-accent-400" />
|
||||
<span>Зарегистрирован {formatDate(profile.created_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
|
||||
{/* Статистика */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Trophy className="w-5 h-5 text-yellow-500" />
|
||||
Статистика
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<Target className="w-6 h-6 text-blue-400 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{profile.stats.marathons_count}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Марафонов</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<Trophy className="w-6 h-6 text-yellow-500 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{profile.stats.wins_count}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Побед</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<CheckCircle className="w-6 h-6 text-green-500 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{profile.stats.completed_assignments}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Заданий</div>
|
||||
</div>
|
||||
<div className="bg-gray-900 rounded-lg p-4 text-center">
|
||||
<Flame className="w-6 h-6 text-orange-500 mx-auto mb-2" />
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{profile.stats.total_points_earned}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Очков</div>
|
||||
</div>
|
||||
<GlassCard>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
|
||||
<Trophy className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div>
|
||||
<h2 className="font-semibold text-white">Статистика</h2>
|
||||
<p className="text-sm text-gray-400">Достижения игрока</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatsCard
|
||||
label="Марафонов"
|
||||
value={profile.stats.marathons_count}
|
||||
icon={<Target className="w-6 h-6" />}
|
||||
color="neon"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Побед"
|
||||
value={profile.stats.wins_count}
|
||||
icon={<Trophy className="w-6 h-6" />}
|
||||
color="purple"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Заданий"
|
||||
value={profile.stats.completed_assignments}
|
||||
icon={<CheckCircle className="w-6 h-6" />}
|
||||
color="default"
|
||||
/>
|
||||
<StatsCard
|
||||
label="Очков"
|
||||
value={profile.stats.total_points_earned}
|
||||
icon={<Flame className="w-6 h-6" />}
|
||||
color="pink"
|
||||
/>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -7,25 +7,91 @@ export default {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Base dark colors
|
||||
dark: {
|
||||
950: '#050508',
|
||||
900: '#0a0a0f',
|
||||
800: '#12121a',
|
||||
700: '#1a1a24',
|
||||
600: '#1e1e2e',
|
||||
500: '#2a2a3a',
|
||||
},
|
||||
// Neon cyan (primary)
|
||||
neon: {
|
||||
50: '#ecfeff',
|
||||
100: '#cffafe',
|
||||
200: '#a5f3fc',
|
||||
300: '#67e8f9',
|
||||
400: '#22d3ee',
|
||||
500: '#00f0ff',
|
||||
600: '#00d4e4',
|
||||
700: '#00a8b8',
|
||||
800: '#007c8a',
|
||||
900: '#005a64',
|
||||
},
|
||||
// Purple accent
|
||||
accent: {
|
||||
50: '#faf5ff',
|
||||
100: '#f3e8ff',
|
||||
200: '#e9d5ff',
|
||||
300: '#d8b4fe',
|
||||
400: '#c084fc',
|
||||
500: '#a855f7',
|
||||
600: '#9333ea',
|
||||
700: '#7c3aed',
|
||||
800: '#6b21a8',
|
||||
900: '#581c87',
|
||||
},
|
||||
// Pink highlight
|
||||
pink: {
|
||||
400: '#f472b6',
|
||||
500: '#ec4899',
|
||||
600: '#db2777',
|
||||
},
|
||||
// Keep primary for backwards compatibility
|
||||
primary: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9',
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e',
|
||||
950: '#082f49',
|
||||
50: '#ecfeff',
|
||||
100: '#cffafe',
|
||||
200: '#a5f3fc',
|
||||
300: '#67e8f9',
|
||||
400: '#22d3ee',
|
||||
500: '#00f0ff',
|
||||
600: '#00d4e4',
|
||||
700: '#00a8b8',
|
||||
800: '#007c8a',
|
||||
900: '#005a64',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
mono: ['JetBrains Mono', 'monospace'],
|
||||
display: ['Orbitron', 'sans-serif'],
|
||||
},
|
||||
animation: {
|
||||
// Existing
|
||||
'spin-slow': 'spin 3s linear infinite',
|
||||
'wheel-spin': 'wheel-spin 4s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards',
|
||||
'fade-in': 'fade-in 0.3s ease-out',
|
||||
'slide-up': 'slide-up 0.3s ease-out',
|
||||
'fade-in': 'fade-in 0.3s ease-out forwards',
|
||||
'slide-up': 'slide-up 0.3s ease-out forwards',
|
||||
// New animations
|
||||
'glitch': 'glitch 1s linear infinite',
|
||||
'glitch-1': 'glitch-1 0.5s infinite linear alternate-reverse',
|
||||
'glitch-2': 'glitch-2 0.5s infinite linear alternate-reverse',
|
||||
'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'shimmer': 'shimmer 2s linear infinite',
|
||||
'slide-in-right': 'slide-in-right 0.3s ease-out forwards',
|
||||
'slide-in-left': 'slide-in-left 0.3s ease-out forwards',
|
||||
'slide-in-up': 'slide-in-up 0.4s ease-out forwards',
|
||||
'slide-in-down': 'slide-in-down 0.3s ease-out forwards',
|
||||
'scale-in': 'scale-in 0.2s ease-out forwards',
|
||||
'bounce-in': 'bounce-in 0.5s ease-out forwards',
|
||||
'pulse-neon': 'pulse-neon 2s ease-in-out infinite',
|
||||
'border-flow': 'border-flow 3s linear infinite',
|
||||
'typing': 'typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite',
|
||||
'counter': 'counter 2s ease-out forwards',
|
||||
'shake': 'shake 0.5s ease-in-out',
|
||||
'confetti': 'confetti 1s ease-out forwards',
|
||||
},
|
||||
keyframes: {
|
||||
'wheel-spin': {
|
||||
@@ -40,6 +106,119 @@ export default {
|
||||
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
'glitch': {
|
||||
'0%, 100%': { transform: 'translate(0)' },
|
||||
'20%': { transform: 'translate(-2px, 2px)' },
|
||||
'40%': { transform: 'translate(-2px, -2px)' },
|
||||
'60%': { transform: 'translate(2px, 2px)' },
|
||||
'80%': { transform: 'translate(2px, -2px)' },
|
||||
},
|
||||
'glitch-1': {
|
||||
'0%': { clipPath: 'inset(20% 0 60% 0)' },
|
||||
'100%': { clipPath: 'inset(50% 0 30% 0)' },
|
||||
},
|
||||
'glitch-2': {
|
||||
'0%': { clipPath: 'inset(60% 0 20% 0)' },
|
||||
'100%': { clipPath: 'inset(30% 0 50% 0)' },
|
||||
},
|
||||
'glow-pulse': {
|
||||
'0%, 100%': {
|
||||
boxShadow: '0 0 5px var(--glow-color, #00f0ff), 0 0 10px var(--glow-color, #00f0ff), 0 0 20px var(--glow-color, #00f0ff)'
|
||||
},
|
||||
'50%': {
|
||||
boxShadow: '0 0 10px var(--glow-color, #00f0ff), 0 0 20px var(--glow-color, #00f0ff), 0 0 40px var(--glow-color, #00f0ff)'
|
||||
},
|
||||
},
|
||||
'float': {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
},
|
||||
'shimmer': {
|
||||
'0%': { backgroundPosition: '-200% 0' },
|
||||
'100%': { backgroundPosition: '200% 0' },
|
||||
},
|
||||
'slide-in-right': {
|
||||
'0%': { opacity: '0', transform: 'translateX(20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateX(0)' },
|
||||
},
|
||||
'slide-in-left': {
|
||||
'0%': { opacity: '0', transform: 'translateX(-20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateX(0)' },
|
||||
},
|
||||
'slide-in-up': {
|
||||
'0%': { opacity: '0', transform: 'translateY(30px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
'slide-in-down': {
|
||||
'0%': { opacity: '0', transform: 'translateY(-20px)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
'scale-in': {
|
||||
'0%': { opacity: '0', transform: 'scale(0.9)' },
|
||||
'100%': { opacity: '1', transform: 'scale(1)' },
|
||||
},
|
||||
'bounce-in': {
|
||||
'0%': { opacity: '0', transform: 'scale(0.3)' },
|
||||
'50%': { transform: 'scale(1.05)' },
|
||||
'70%': { transform: 'scale(0.9)' },
|
||||
'100%': { opacity: '1', transform: 'scale(1)' },
|
||||
},
|
||||
'pulse-neon': {
|
||||
'0%, 100%': {
|
||||
textShadow: '0 0 5px var(--neon-color, #00f0ff), 0 0 10px var(--neon-color, #00f0ff)'
|
||||
},
|
||||
'50%': {
|
||||
textShadow: '0 0 10px var(--neon-color, #00f0ff), 0 0 20px var(--neon-color, #00f0ff), 0 0 30px var(--neon-color, #00f0ff)'
|
||||
},
|
||||
},
|
||||
'border-flow': {
|
||||
'0%': { backgroundPosition: '0% 50%' },
|
||||
'50%': { backgroundPosition: '100% 50%' },
|
||||
'100%': { backgroundPosition: '0% 50%' },
|
||||
},
|
||||
'typing': {
|
||||
'from': { width: '0' },
|
||||
'to': { width: '100%' },
|
||||
},
|
||||
'blink-caret': {
|
||||
'from, to': { borderColor: 'transparent' },
|
||||
'50%': { borderColor: '#00f0ff' },
|
||||
},
|
||||
'shake': {
|
||||
'0%, 100%': { transform: 'translateX(0)' },
|
||||
'10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-5px)' },
|
||||
'20%, 40%, 60%, 80%': { transform: 'translateX(5px)' },
|
||||
},
|
||||
'confetti': {
|
||||
'0%': { transform: 'translateY(0) rotate(0deg)', opacity: '1' },
|
||||
'100%': { transform: 'translateY(100vh) rotate(720deg)', opacity: '0' },
|
||||
},
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
'neon-glow': 'linear-gradient(90deg, #00f0ff, #a855f7, #00f0ff)',
|
||||
'cyber-grid': `
|
||||
linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px)
|
||||
`,
|
||||
},
|
||||
backgroundSize: {
|
||||
'grid': '50px 50px',
|
||||
},
|
||||
boxShadow: {
|
||||
'neon': '0 0 5px #00f0ff, 0 0 10px #00f0ff, 0 0 20px #00f0ff',
|
||||
'neon-lg': '0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 40px #00f0ff, 0 0 60px #00f0ff',
|
||||
'neon-purple': '0 0 5px #a855f7, 0 0 10px #a855f7, 0 0 20px #a855f7',
|
||||
'neon-pink': '0 0 5px #ec4899, 0 0 10px #ec4899, 0 0 20px #ec4899',
|
||||
'inner-glow': 'inset 0 0 20px rgba(0, 240, 255, 0.1)',
|
||||
'glass': '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
|
||||
},
|
||||
backdropBlur: {
|
||||
'xs': '2px',
|
||||
},
|
||||
transitionDuration: {
|
||||
'400': '400ms',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user