Oronemu/game-marathon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign p1

Browse Source
This commit is contained in:
Oronemu
2025-12-17 02:03:33 +07:00
parent 11f7b59471
commit 332491454d
29 changed files with 5137 additions and 2587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

349
frontend/src/pages/MarathonPage.tsx
View File

@@ -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}