1197 lines
50 KiB
TypeScript
1197 lines
50 KiB
TypeScript
import { useState, useEffect, useRef } from 'react'
|
||
import { useParams, Link } from 'react-router-dom'
|
||
import { marathonsApi, wheelApi, gamesApi, eventsApi, assignmentsApi } from '@/api'
|
||
import type { Marathon, Assignment, Game, ActiveEvent, SwapCandidate, MySwapRequests, CommonEnemyLeaderboardEntry, EventAssignment, GameChoiceChallenges, ReturnedAssignment } from '@/types'
|
||
import { NeonButton, GlassCard, StatsCard } from '@/components/ui'
|
||
import { SpinWheel } from '@/components/SpinWheel'
|
||
import { EventBanner } from '@/components/EventBanner'
|
||
import { Loader2, Upload, X, Gamepad2, ArrowLeftRight, Check, XCircle, Clock, Send, Trophy, Users, ArrowLeft, AlertTriangle, Zap, Flame, Target } from 'lucide-react'
|
||
import { useToast } from '@/store/toast'
|
||
import { useConfirm } from '@/store/confirm'
|
||
|
||
const MAX_IMAGE_SIZE = 15 * 1024 * 1024
|
||
const MAX_VIDEO_SIZE = 30 * 1024 * 1024
|
||
const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp']
|
||
const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov']
|
||
|
||
export function PlayPage() {
|
||
const { id } = useParams<{ id: string }>()
|
||
const toast = useToast()
|
||
const confirm = useConfirm()
|
||
|
||
const [marathon, setMarathon] = useState<Marathon | null>(null)
|
||
const [currentAssignment, setCurrentAssignment] = useState<Assignment | null>(null)
|
||
const [games, setGames] = useState<Game[]>([])
|
||
const [activeEvent, setActiveEvent] = useState<ActiveEvent | null>(null)
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
|
||
const [proofFile, setProofFile] = useState<File | null>(null)
|
||
const [proofUrl, setProofUrl] = useState('')
|
||
const [comment, setComment] = useState('')
|
||
const [isCompleting, setIsCompleting] = useState(false)
|
||
const [isDropping, setIsDropping] = useState(false)
|
||
|
||
const [selectedGameId, setSelectedGameId] = useState<number | null>(null)
|
||
const [gameChoiceChallenges, setGameChoiceChallenges] = useState<GameChoiceChallenges | null>(null)
|
||
const [isLoadingChallenges, setIsLoadingChallenges] = useState(false)
|
||
const [isSelectingChallenge, setIsSelectingChallenge] = useState(false)
|
||
|
||
const [swapCandidates, setSwapCandidates] = useState<SwapCandidate[]>([])
|
||
const [swapRequests, setSwapRequests] = useState<MySwapRequests>({ incoming: [], outgoing: [] })
|
||
const [isSwapLoading, setIsSwapLoading] = useState(false)
|
||
const [sendingRequestTo, setSendingRequestTo] = useState<number | null>(null)
|
||
const [processingRequestId, setProcessingRequestId] = useState<number | null>(null)
|
||
|
||
const [commonEnemyLeaderboard, setCommonEnemyLeaderboard] = useState<CommonEnemyLeaderboardEntry[]>([])
|
||
|
||
type PlayTab = 'spin' | 'event'
|
||
const [activeTab, setActiveTab] = useState<PlayTab>('spin')
|
||
|
||
const [eventAssignment, setEventAssignment] = useState<EventAssignment | null>(null)
|
||
const [eventProofFile, setEventProofFile] = useState<File | null>(null)
|
||
const [eventProofUrl, setEventProofUrl] = useState('')
|
||
const [eventComment, setEventComment] = useState('')
|
||
const [isEventCompleting, setIsEventCompleting] = useState(false)
|
||
|
||
const [returnedAssignments, setReturnedAssignments] = useState<ReturnedAssignment[]>([])
|
||
|
||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||
const eventFileInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
useEffect(() => {
|
||
loadData()
|
||
}, [id])
|
||
|
||
useEffect(() => {
|
||
if (activeEvent?.event?.type !== 'game_choice') {
|
||
setSelectedGameId(null)
|
||
setGameChoiceChallenges(null)
|
||
}
|
||
}, [activeEvent?.event?.type])
|
||
|
||
useEffect(() => {
|
||
if (activeEvent?.event?.type === 'swap') {
|
||
loadSwapRequests()
|
||
if (currentAssignment) {
|
||
loadSwapCandidates()
|
||
}
|
||
}
|
||
}, [activeEvent?.event?.type, currentAssignment])
|
||
|
||
useEffect(() => {
|
||
if (activeEvent?.event?.type === 'common_enemy') {
|
||
loadCommonEnemyLeaderboard()
|
||
const interval = setInterval(loadCommonEnemyLeaderboard, 10000)
|
||
return () => clearInterval(interval)
|
||
}
|
||
}, [activeEvent?.event?.type])
|
||
|
||
const loadGameChoiceChallenges = async (gameId: number) => {
|
||
if (!id) return
|
||
setIsLoadingChallenges(true)
|
||
try {
|
||
const challenges = await eventsApi.getGameChoiceChallenges(parseInt(id), gameId)
|
||
setGameChoiceChallenges(challenges)
|
||
} catch (error) {
|
||
console.error('Failed to load game choice challenges:', error)
|
||
toast.error('Не удалось загрузить челленджи для этой игры')
|
||
} finally {
|
||
setIsLoadingChallenges(false)
|
||
}
|
||
}
|
||
|
||
const loadSwapCandidates = async () => {
|
||
if (!id) return
|
||
setIsSwapLoading(true)
|
||
try {
|
||
const candidates = await eventsApi.getSwapCandidates(parseInt(id))
|
||
setSwapCandidates(candidates)
|
||
} catch (error) {
|
||
console.error('Failed to load swap candidates:', error)
|
||
} finally {
|
||
setIsSwapLoading(false)
|
||
}
|
||
}
|
||
|
||
const loadSwapRequests = async () => {
|
||
if (!id) return
|
||
try {
|
||
const requests = await eventsApi.getSwapRequests(parseInt(id))
|
||
setSwapRequests(requests)
|
||
} catch (error) {
|
||
console.error('Failed to load swap requests:', error)
|
||
}
|
||
}
|
||
|
||
const loadCommonEnemyLeaderboard = async () => {
|
||
if (!id) return
|
||
try {
|
||
const leaderboard = await eventsApi.getCommonEnemyLeaderboard(parseInt(id))
|
||
setCommonEnemyLeaderboard(leaderboard)
|
||
} catch (error) {
|
||
console.error('Failed to load common enemy leaderboard:', error)
|
||
}
|
||
}
|
||
|
||
const validateAndSetFile = (
|
||
file: File | null,
|
||
setFile: (file: File | null) => void,
|
||
inputRef: React.RefObject<HTMLInputElement | null>
|
||
) => {
|
||
if (!file) {
|
||
setFile(null)
|
||
return
|
||
}
|
||
|
||
const ext = file.name.split('.').pop()?.toLowerCase() || ''
|
||
const isImage = IMAGE_EXTENSIONS.includes(ext)
|
||
const isVideo = VIDEO_EXTENSIONS.includes(ext)
|
||
|
||
if (!isImage && !isVideo) {
|
||
toast.error('Неподдерживаемый формат файла')
|
||
if (inputRef.current) inputRef.current.value = ''
|
||
return
|
||
}
|
||
|
||
const maxSize = isImage ? MAX_IMAGE_SIZE : MAX_VIDEO_SIZE
|
||
const maxSizeMB = isImage ? 15 : 30
|
||
|
||
if (file.size > maxSize) {
|
||
toast.error(`Файл слишком большой. Максимум ${maxSizeMB} МБ для ${isImage ? 'изображений' : 'видео'}`)
|
||
if (inputRef.current) inputRef.current.value = ''
|
||
return
|
||
}
|
||
|
||
setFile(file)
|
||
}
|
||
|
||
const loadData = async () => {
|
||
if (!id) return
|
||
try {
|
||
const [marathonData, assignment, gamesData, eventData, eventAssignmentData, returnedData] = await Promise.all([
|
||
marathonsApi.get(parseInt(id)),
|
||
wheelApi.getCurrentAssignment(parseInt(id)),
|
||
gamesApi.list(parseInt(id), 'approved'),
|
||
eventsApi.getActive(parseInt(id)),
|
||
eventsApi.getEventAssignment(parseInt(id)),
|
||
assignmentsApi.getReturnedAssignments(parseInt(id)),
|
||
])
|
||
setMarathon(marathonData)
|
||
setCurrentAssignment(assignment)
|
||
setGames(gamesData)
|
||
setActiveEvent(eventData)
|
||
setEventAssignment(eventAssignmentData)
|
||
setReturnedAssignments(returnedData)
|
||
} catch (error) {
|
||
console.error('Failed to load data:', error)
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
const refreshEvent = async () => {
|
||
if (!id) return
|
||
try {
|
||
const eventData = await eventsApi.getActive(parseInt(id))
|
||
setActiveEvent(eventData)
|
||
} catch (error) {
|
||
console.error('Failed to refresh event:', error)
|
||
}
|
||
}
|
||
|
||
const handleSpin = async (): Promise<Game | null> => {
|
||
if (!id) return null
|
||
try {
|
||
const result = await wheelApi.spin(parseInt(id))
|
||
return result.game
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось крутить')
|
||
return null
|
||
}
|
||
}
|
||
|
||
const handleSpinComplete = async () => {
|
||
setTimeout(async () => {
|
||
await loadData()
|
||
}, 500)
|
||
}
|
||
|
||
const handleComplete = async () => {
|
||
if (!currentAssignment) return
|
||
if (!proofFile && !proofUrl) {
|
||
toast.warning('Пожалуйста, предоставьте доказательство (файл или ссылку)')
|
||
return
|
||
}
|
||
|
||
setIsCompleting(true)
|
||
try {
|
||
const result = await wheelApi.complete(currentAssignment.id, {
|
||
proof_file: proofFile || undefined,
|
||
proof_url: proofUrl || undefined,
|
||
comment: comment || undefined,
|
||
})
|
||
toast.success(`Выполнено! +${result.points_earned} очков (бонус серии: +${result.streak_bonus})`)
|
||
setProofFile(null)
|
||
setProofUrl('')
|
||
setComment('')
|
||
await loadData()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось выполнить')
|
||
} finally {
|
||
setIsCompleting(false)
|
||
}
|
||
}
|
||
|
||
const handleDrop = async () => {
|
||
if (!currentAssignment) return
|
||
|
||
const penalty = currentAssignment.drop_penalty
|
||
const confirmed = await confirm({
|
||
title: 'Пропустить задание?',
|
||
message: `Вы потеряете ${penalty} очков.`,
|
||
confirmText: 'Пропустить',
|
||
cancelText: 'Отмена',
|
||
variant: 'warning',
|
||
})
|
||
if (!confirmed) return
|
||
|
||
setIsDropping(true)
|
||
try {
|
||
const result = await wheelApi.drop(currentAssignment.id)
|
||
toast.info(`Пропущено. Штраф: -${result.penalty} очков`)
|
||
await loadData()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось пропустить')
|
||
} finally {
|
||
setIsDropping(false)
|
||
}
|
||
}
|
||
|
||
const handleEventComplete = async () => {
|
||
if (!eventAssignment?.assignment) return
|
||
if (!eventProofFile && !eventProofUrl) {
|
||
toast.warning('Пожалуйста, предоставьте доказательство (файл или ссылку)')
|
||
return
|
||
}
|
||
|
||
setIsEventCompleting(true)
|
||
try {
|
||
const result = await eventsApi.completeEventAssignment(eventAssignment.assignment.id, {
|
||
proof_file: eventProofFile || undefined,
|
||
proof_url: eventProofUrl || undefined,
|
||
comment: eventComment || undefined,
|
||
})
|
||
toast.success(`Выполнено! +${result.points_earned} очков`)
|
||
setEventProofFile(null)
|
||
setEventProofUrl('')
|
||
setEventComment('')
|
||
await loadData()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось выполнить')
|
||
} finally {
|
||
setIsEventCompleting(false)
|
||
}
|
||
}
|
||
|
||
const handleGameSelect = async (gameId: number) => {
|
||
setSelectedGameId(gameId)
|
||
await loadGameChoiceChallenges(gameId)
|
||
}
|
||
|
||
const handleChallengeSelect = async (challengeId: number) => {
|
||
if (!id) return
|
||
|
||
const hasActiveAssignment = !!currentAssignment
|
||
const confirmed = await confirm({
|
||
title: 'Выбрать челлендж?',
|
||
message: hasActiveAssignment
|
||
? 'Текущее задание будет заменено без штрафа.'
|
||
: 'Вы уверены, что хотите выбрать этот челлендж?',
|
||
confirmText: 'Выбрать',
|
||
cancelText: 'Отмена',
|
||
variant: 'info',
|
||
})
|
||
if (!confirmed) return
|
||
|
||
setIsSelectingChallenge(true)
|
||
try {
|
||
const result = await eventsApi.selectGameChoiceChallenge(parseInt(id), challengeId)
|
||
toast.success(result.message)
|
||
setSelectedGameId(null)
|
||
setGameChoiceChallenges(null)
|
||
await loadData()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось выбрать челлендж')
|
||
} finally {
|
||
setIsSelectingChallenge(false)
|
||
}
|
||
}
|
||
|
||
const handleSendSwapRequest = async (participantId: number, participantName: string, theirChallenge: string) => {
|
||
if (!id) return
|
||
|
||
const confirmed = await confirm({
|
||
title: 'Отправить запрос на обмен?',
|
||
message: `Вы предлагаете обменяться с ${participantName} на:\n"${theirChallenge}"\n\n${participantName} должен будет подтвердить обмен.`,
|
||
confirmText: 'Отправить',
|
||
cancelText: 'Отмена',
|
||
variant: 'info',
|
||
})
|
||
if (!confirmed) return
|
||
|
||
setSendingRequestTo(participantId)
|
||
try {
|
||
await eventsApi.createSwapRequest(parseInt(id), participantId)
|
||
toast.success('Запрос на обмен отправлен!')
|
||
await loadSwapRequests()
|
||
await loadSwapCandidates()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось отправить запрос')
|
||
} finally {
|
||
setSendingRequestTo(null)
|
||
}
|
||
}
|
||
|
||
const handleAcceptSwapRequest = async (requestId: number) => {
|
||
if (!id) return
|
||
|
||
const confirmed = await confirm({
|
||
title: 'Принять обмен?',
|
||
message: 'Задания будут обменяны сразу после подтверждения.',
|
||
confirmText: 'Принять',
|
||
cancelText: 'Отмена',
|
||
variant: 'info',
|
||
})
|
||
if (!confirmed) return
|
||
|
||
setProcessingRequestId(requestId)
|
||
try {
|
||
await eventsApi.acceptSwapRequest(parseInt(id), requestId)
|
||
toast.success('Обмен выполнен!')
|
||
await loadData()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось выполнить обмен')
|
||
} finally {
|
||
setProcessingRequestId(null)
|
||
}
|
||
}
|
||
|
||
const handleDeclineSwapRequest = async (requestId: number) => {
|
||
if (!id) return
|
||
setProcessingRequestId(requestId)
|
||
try {
|
||
await eventsApi.declineSwapRequest(parseInt(id), requestId)
|
||
await loadSwapRequests()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось отклонить запрос')
|
||
} finally {
|
||
setProcessingRequestId(null)
|
||
}
|
||
}
|
||
|
||
const handleCancelSwapRequest = async (requestId: number) => {
|
||
if (!id) return
|
||
setProcessingRequestId(requestId)
|
||
try {
|
||
await eventsApi.cancelSwapRequest(parseInt(id), requestId)
|
||
await loadSwapRequests()
|
||
await loadSwapCandidates()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось отменить запрос')
|
||
} finally {
|
||
setProcessingRequestId(null)
|
||
}
|
||
}
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<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 (!marathon) {
|
||
return (
|
||
<div className="text-center py-12">
|
||
<p className="text-gray-400">Марафон не найден</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const marathonEndDate = marathon.end_date ? new Date(marathon.end_date) : null
|
||
const isMarathonExpired = marathonEndDate && new Date() > marathonEndDate
|
||
const isMarathonEnded = marathon.status === 'finished' || isMarathonExpired
|
||
|
||
if (isMarathonEnded) {
|
||
return (
|
||
<div className="max-w-2xl mx-auto">
|
||
<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>
|
||
|
||
<GlassCard className="text-center py-12">
|
||
<div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-yellow-500/20 border border-yellow-500/30 flex items-center justify-center">
|
||
<Trophy className="w-10 h-10 text-yellow-400" />
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-white mb-2">Марафон завершён</h2>
|
||
<p className="text-gray-400 mb-6">
|
||
{marathon.status === 'finished'
|
||
? 'Этот марафон был завершён организатором.'
|
||
: 'Этот марафон завершился по истечении срока.'}
|
||
</p>
|
||
<Link to={`/marathons/${id}/leaderboard`}>
|
||
<NeonButton icon={<Trophy className="w-4 h-4" />}>
|
||
Посмотреть итоговый рейтинг
|
||
</NeonButton>
|
||
</Link>
|
||
</GlassCard>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const participation = marathon.my_participation
|
||
|
||
return (
|
||
<div className="max-w-2xl mx-auto">
|
||
{/* Back button */}
|
||
<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>
|
||
|
||
{/* Header stats */}
|
||
<div className="grid grid-cols-3 gap-4 mb-6">
|
||
<StatsCard
|
||
label="Очков"
|
||
value={participation?.total_points || 0}
|
||
icon={<Zap className="w-6 h-6" />}
|
||
color="neon"
|
||
/>
|
||
<StatsCard
|
||
label="Серия"
|
||
value={participation?.current_streak || 0}
|
||
icon={<Flame className="w-6 h-6" />}
|
||
color="purple"
|
||
/>
|
||
<StatsCard
|
||
label="Пропусков"
|
||
value={participation?.drop_count || 0}
|
||
icon={<Target className="w-6 h-6" />}
|
||
color="default"
|
||
/>
|
||
</div>
|
||
|
||
{/* Active event banner */}
|
||
{activeEvent?.event && (
|
||
<div className="mb-6">
|
||
<EventBanner activeEvent={activeEvent} onRefresh={refreshEvent} />
|
||
</div>
|
||
)}
|
||
|
||
{/* Returned assignments warning */}
|
||
{returnedAssignments.length > 0 && (
|
||
<GlassCard className="mb-6 border-orange-500/30">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center">
|
||
<AlertTriangle className="w-5 h-5 text-orange-400" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-orange-400">Возвращённые задания</h3>
|
||
<p className="text-sm text-gray-400">{returnedAssignments.length} заданий</p>
|
||
</div>
|
||
</div>
|
||
<p className="text-gray-400 text-sm mb-4">
|
||
Эти задания были оспорены. После текущего задания вам нужно будет их переделать.
|
||
</p>
|
||
<div className="space-y-2">
|
||
{returnedAssignments.map((ra) => (
|
||
<div
|
||
key={ra.id}
|
||
className="p-3 bg-orange-500/10 border border-orange-500/20 rounded-xl"
|
||
>
|
||
<div className="flex items-start justify-between">
|
||
<div>
|
||
<p className="text-white font-medium">{ra.challenge.title}</p>
|
||
<p className="text-gray-400 text-sm">{ra.challenge.game.title}</p>
|
||
</div>
|
||
<span className="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs rounded-lg border border-green-500/30">
|
||
+{ra.challenge.points}
|
||
</span>
|
||
</div>
|
||
<p className="text-orange-300 text-xs mt-2">
|
||
Причина: {ra.dispute_reason}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</GlassCard>
|
||
)}
|
||
|
||
{/* Tabs for Common Enemy event */}
|
||
{activeEvent?.event?.type === 'common_enemy' && (
|
||
<div className="flex gap-2 mb-6">
|
||
<NeonButton
|
||
variant={activeTab === 'spin' ? 'primary' : 'outline'}
|
||
onClick={() => setActiveTab('spin')}
|
||
className="flex-1"
|
||
>
|
||
Мой прокрут
|
||
</NeonButton>
|
||
<NeonButton
|
||
variant={activeTab === 'event' ? 'primary' : 'outline'}
|
||
onClick={() => setActiveTab('event')}
|
||
className="flex-1 relative"
|
||
color="purple"
|
||
>
|
||
Общий враг
|
||
{eventAssignment?.assignment && !eventAssignment.is_completed && (
|
||
<span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse" />
|
||
)}
|
||
</NeonButton>
|
||
</div>
|
||
)}
|
||
|
||
{/* Event tab content (Common Enemy) */}
|
||
{activeTab === 'event' && activeEvent?.event?.type === 'common_enemy' && (
|
||
<>
|
||
{/* Common Enemy Leaderboard */}
|
||
<GlassCard className="mb-6">
|
||
<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">
|
||
<Users className="w-5 h-5 text-red-400" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-white">Выполнили челлендж</h3>
|
||
<p className="text-sm text-gray-400">{commonEnemyLeaderboard.length} чел.</p>
|
||
</div>
|
||
</div>
|
||
|
||
{commonEnemyLeaderboard.length === 0 ? (
|
||
<div className="text-center py-8">
|
||
<p className="text-gray-500">Пока никто не выполнил. Будь первым!</p>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{commonEnemyLeaderboard.map((entry) => (
|
||
<div
|
||
key={entry.participant_id}
|
||
className={`
|
||
flex items-center gap-3 p-3 rounded-xl border
|
||
${entry.rank === 1 ? 'bg-yellow-500/10 border-yellow-500/30' :
|
||
entry.rank === 2 ? 'bg-gray-400/10 border-gray-400/30' :
|
||
entry.rank === 3 ? 'bg-orange-600/10 border-orange-600/30' :
|
||
'bg-dark-700/50 border-dark-600'}
|
||
`}
|
||
>
|
||
<div className={`
|
||
w-8 h-8 rounded-lg flex items-center justify-center font-bold text-sm
|
||
${entry.rank === 1 ? 'bg-yellow-500 text-black' :
|
||
entry.rank === 2 ? 'bg-gray-400 text-black' :
|
||
entry.rank === 3 ? 'bg-orange-600 text-white' :
|
||
'bg-dark-600 text-gray-300'}
|
||
`}>
|
||
{entry.rank && entry.rank <= 3 ? (
|
||
<Trophy className="w-4 h-4" />
|
||
) : (
|
||
entry.rank
|
||
)}
|
||
</div>
|
||
<div className="flex-1">
|
||
<p className="text-white font-medium">{entry.user.nickname}</p>
|
||
</div>
|
||
{entry.bonus_points > 0 && (
|
||
<span className="text-green-400 text-sm font-semibold">
|
||
+{entry.bonus_points} бонус
|
||
</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</GlassCard>
|
||
|
||
{/* Event Assignment Card */}
|
||
{eventAssignment?.assignment && !eventAssignment.is_completed ? (
|
||
<GlassCard variant="neon">
|
||
<div className="text-center mb-6">
|
||
<span className="px-4 py-1.5 bg-red-500/20 text-red-400 rounded-full text-sm font-medium border border-red-500/30">
|
||
Задание события "Общий враг"
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<p className="text-gray-400 text-sm mb-1">Игра</p>
|
||
<p className="text-xl font-bold text-white">
|
||
{eventAssignment.assignment.challenge.game.title}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<p className="text-gray-400 text-sm mb-1">Задание</p>
|
||
<p className="text-xl font-bold text-neon-400 mb-2">
|
||
{eventAssignment.assignment.challenge.title}
|
||
</p>
|
||
<p className="text-gray-300">
|
||
{eventAssignment.assignment.challenge.description}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 mb-6 flex-wrap">
|
||
<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">
|
||
+{eventAssignment.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">
|
||
{eventAssignment.assignment.challenge.difficulty}
|
||
</span>
|
||
{eventAssignment.assignment.challenge.estimated_time && (
|
||
<span className="text-gray-400 text-sm flex items-center gap-1">
|
||
<Clock className="w-4 h-4" />
|
||
~{eventAssignment.assignment.challenge.estimated_time} мин
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{eventAssignment.assignment.challenge.proof_hint && (
|
||
<div className="mb-6 p-4 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<p className="text-sm text-gray-400">
|
||
<strong className="text-white">Нужно доказательство:</strong> {eventAssignment.assignment.challenge.proof_hint}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-4 mb-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Загрузить доказательство ({eventAssignment.assignment.challenge.proof_type})
|
||
</label>
|
||
|
||
<input
|
||
ref={eventFileInputRef}
|
||
type="file"
|
||
accept="image/*,video/*"
|
||
className="hidden"
|
||
onChange={(e) => validateAndSetFile(e.target.files?.[0] || null, setEventProofFile, eventFileInputRef)}
|
||
/>
|
||
|
||
{eventProofFile ? (
|
||
<div className="flex items-center gap-2 p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<span className="text-white flex-1 truncate">{eventProofFile.name}</span>
|
||
<button
|
||
onClick={() => setEventProofFile(null)}
|
||
className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
|
||
>
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div>
|
||
<NeonButton
|
||
variant="outline"
|
||
className="w-full"
|
||
onClick={() => eventFileInputRef.current?.click()}
|
||
icon={<Upload className="w-4 h-4" />}
|
||
>
|
||
Выбрать файл
|
||
</NeonButton>
|
||
<p className="text-xs text-gray-500 mt-2 text-center">
|
||
Макс. 15 МБ для изображений, 30 МБ для видео
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-center text-gray-500">или</div>
|
||
|
||
<input
|
||
type="text"
|
||
className="input"
|
||
placeholder="Вставьте ссылку (YouTube, профиль Steam и т.д.)"
|
||
value={eventProofUrl}
|
||
onChange={(e) => setEventProofUrl(e.target.value)}
|
||
/>
|
||
|
||
<textarea
|
||
className="input min-h-[80px] resize-none"
|
||
placeholder="Комментарий (необязательно)"
|
||
value={eventComment}
|
||
onChange={(e) => setEventComment(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<NeonButton
|
||
className="w-full"
|
||
onClick={handleEventComplete}
|
||
isLoading={isEventCompleting}
|
||
disabled={!eventProofFile && !eventProofUrl}
|
||
icon={<Check className="w-4 h-4" />}
|
||
>
|
||
Выполнено
|
||
</NeonButton>
|
||
</GlassCard>
|
||
) : eventAssignment?.is_completed ? (
|
||
<GlassCard className="text-center py-12">
|
||
<div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-green-500/20 border border-green-500/30 flex items-center justify-center">
|
||
<Check className="w-10 h-10 text-green-400" />
|
||
</div>
|
||
<h3 className="text-xl font-bold text-white mb-2">Задание выполнено!</h3>
|
||
<p className="text-gray-400">
|
||
Вы уже завершили челлендж события "Общий враг"
|
||
</p>
|
||
{eventAssignment.assignment && (
|
||
<p className="text-green-400 font-semibold mt-2">
|
||
+{eventAssignment.assignment.points_earned} очков
|
||
</p>
|
||
)}
|
||
</GlassCard>
|
||
) : (
|
||
<GlassCard className="text-center py-12">
|
||
<Loader2 className="w-8 h-8 animate-spin text-neon-400 mx-auto mb-4" />
|
||
<p className="text-gray-400">Загрузка задания события...</p>
|
||
</GlassCard>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Spin tab content */}
|
||
{(activeTab === 'spin' || activeEvent?.event?.type !== 'common_enemy') && (
|
||
<>
|
||
{/* Game Choice section */}
|
||
{activeEvent?.event?.type === 'game_choice' && (
|
||
<GlassCard className="mb-6 border-orange-500/30">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center">
|
||
<Gamepad2 className="w-5 h-5 text-orange-400" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-orange-400">Выбор игры</h3>
|
||
<p className="text-sm text-gray-400">
|
||
{currentAssignment ? 'Текущее задание будет заменено без штрафа!' : 'Выберите игру и челлендж'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{!selectedGameId ? (
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{games.map((game) => (
|
||
<button
|
||
key={game.id}
|
||
onClick={() => handleGameSelect(game.id)}
|
||
className="p-3 bg-dark-700/50 hover:bg-dark-700 rounded-xl text-left transition-colors border border-dark-600 hover:border-orange-500/30"
|
||
>
|
||
<p className="text-white font-medium truncate">{game.title}</p>
|
||
<p className="text-gray-400 text-xs">{game.challenges_count} челленджей</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h4 className="text-white font-medium">
|
||
{gameChoiceChallenges?.game_title || 'Загрузка...'}
|
||
</h4>
|
||
<NeonButton
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => {
|
||
setSelectedGameId(null)
|
||
setGameChoiceChallenges(null)
|
||
}}
|
||
icon={<ArrowLeft className="w-4 h-4" />}
|
||
>
|
||
Назад
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{isLoadingChallenges ? (
|
||
<div className="flex justify-center py-8">
|
||
<Loader2 className="w-8 h-8 animate-spin text-orange-400" />
|
||
</div>
|
||
) : gameChoiceChallenges?.challenges.length ? (
|
||
<div className="space-y-3">
|
||
{gameChoiceChallenges.challenges.map((challenge) => (
|
||
<div
|
||
key={challenge.id}
|
||
className="p-4 bg-dark-700/50 rounded-xl border border-dark-600"
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-white font-medium">{challenge.title}</p>
|
||
<p className="text-gray-400 text-sm mt-1">{challenge.description}</p>
|
||
<div className="flex items-center gap-2 mt-2 text-xs flex-wrap">
|
||
<span className="px-2 py-0.5 bg-green-500/20 text-green-400 rounded-lg border border-green-500/30">
|
||
+{challenge.points} очков
|
||
</span>
|
||
<span className="px-2 py-0.5 bg-dark-600 text-gray-300 rounded-lg">
|
||
{challenge.difficulty}
|
||
</span>
|
||
{challenge.estimated_time && (
|
||
<span className="text-gray-500">~{challenge.estimated_time} мин</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<NeonButton
|
||
size="sm"
|
||
onClick={() => handleChallengeSelect(challenge.id)}
|
||
isLoading={isSelectingChallenge}
|
||
disabled={isSelectingChallenge}
|
||
>
|
||
Выбрать
|
||
</NeonButton>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="text-center text-gray-500 py-8">
|
||
Нет доступных челленджей
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
</GlassCard>
|
||
)}
|
||
|
||
{/* No active assignment - show spin wheel */}
|
||
{!currentAssignment && (
|
||
<GlassCard>
|
||
<div className="text-center mb-6">
|
||
<h2 className="text-2xl font-bold text-white mb-2">Крутите колесо!</h2>
|
||
<p className="text-gray-400">
|
||
Получите случайную игру и задание для выполнения
|
||
</p>
|
||
</div>
|
||
<SpinWheel
|
||
games={games}
|
||
onSpin={handleSpin}
|
||
onSpinComplete={handleSpinComplete}
|
||
/>
|
||
</GlassCard>
|
||
)}
|
||
|
||
{/* Active assignment */}
|
||
{currentAssignment && (
|
||
<>
|
||
<GlassCard variant="neon">
|
||
<div className="text-center mb-6">
|
||
<span className="px-4 py-1.5 bg-neon-500/20 text-neon-400 rounded-full text-sm font-medium border border-neon-500/30">
|
||
Активное задание
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<p className="text-gray-400 text-sm mb-1">Игра</p>
|
||
<p className="text-xl font-bold text-white">
|
||
{currentAssignment.challenge.game.title}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<p className="text-gray-400 text-sm mb-1">Задание</p>
|
||
<p className="text-xl font-bold text-neon-400 mb-2">
|
||
{currentAssignment.challenge.title}
|
||
</p>
|
||
<p className="text-gray-300">
|
||
{currentAssignment.challenge.description}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 mb-6 flex-wrap">
|
||
<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">
|
||
+{currentAssignment.challenge.points} очков
|
||
</span>
|
||
<span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600">
|
||
{currentAssignment.challenge.difficulty}
|
||
</span>
|
||
{currentAssignment.challenge.estimated_time && (
|
||
<span className="text-gray-400 text-sm flex items-center gap-1">
|
||
<Clock className="w-4 h-4" />
|
||
~{currentAssignment.challenge.estimated_time} мин
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{currentAssignment.challenge.proof_hint && (
|
||
<div className="mb-6 p-4 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<p className="text-sm text-gray-400">
|
||
<strong className="text-white">Нужно доказательство:</strong> {currentAssignment.challenge.proof_hint}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-4 mb-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
Загрузить доказательство ({currentAssignment.challenge.proof_type})
|
||
</label>
|
||
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*,video/*"
|
||
className="hidden"
|
||
onChange={(e) => validateAndSetFile(e.target.files?.[0] || null, setProofFile, fileInputRef)}
|
||
/>
|
||
|
||
{proofFile ? (
|
||
<div className="flex items-center gap-2 p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<span className="text-white flex-1 truncate">{proofFile.name}</span>
|
||
<button
|
||
onClick={() => setProofFile(null)}
|
||
className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
|
||
>
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div>
|
||
<NeonButton
|
||
variant="outline"
|
||
className="w-full"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
icon={<Upload className="w-4 h-4" />}
|
||
>
|
||
Выбрать файл
|
||
</NeonButton>
|
||
<p className="text-xs text-gray-500 mt-2 text-center">
|
||
Макс. 15 МБ для изображений, 30 МБ для видео
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-center text-gray-500">или</div>
|
||
|
||
<input
|
||
type="text"
|
||
className="input"
|
||
placeholder="Вставьте ссылку (YouTube, профиль Steam и т.д.)"
|
||
value={proofUrl}
|
||
onChange={(e) => setProofUrl(e.target.value)}
|
||
/>
|
||
|
||
<textarea
|
||
className="input min-h-[80px] resize-none"
|
||
placeholder="Комментарий (необязательно)"
|
||
value={comment}
|
||
onChange={(e) => setComment(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex gap-3">
|
||
<NeonButton
|
||
className="flex-1"
|
||
onClick={handleComplete}
|
||
isLoading={isCompleting}
|
||
disabled={!proofFile && !proofUrl}
|
||
icon={<Check className="w-4 h-4" />}
|
||
>
|
||
Выполнено
|
||
</NeonButton>
|
||
<NeonButton
|
||
variant="danger"
|
||
onClick={handleDrop}
|
||
isLoading={isDropping}
|
||
icon={<XCircle className="w-4 h-4" />}
|
||
>
|
||
Пропустить (-{currentAssignment.drop_penalty})
|
||
</NeonButton>
|
||
</div>
|
||
</GlassCard>
|
||
|
||
{/* Swap section */}
|
||
{activeEvent?.event?.type === 'swap' && (
|
||
<GlassCard className="mt-6 border-neon-500/30">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 rounded-xl bg-neon-500/20 flex items-center justify-center">
|
||
<ArrowLeftRight className="w-5 h-5 text-neon-400" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-neon-400">Обмен заданиями</h3>
|
||
<p className="text-sm text-gray-400">Требует подтверждения с обеих сторон</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Incoming swap requests */}
|
||
{swapRequests.incoming.length > 0 && (
|
||
<div className="mb-6">
|
||
<h4 className="text-sm font-medium text-yellow-400 mb-3 flex items-center gap-2">
|
||
<Clock className="w-4 h-4" />
|
||
Входящие запросы ({swapRequests.incoming.length})
|
||
</h4>
|
||
<div className="space-y-3">
|
||
{swapRequests.incoming.map((request) => (
|
||
<div
|
||
key={request.id}
|
||
className="p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-xl"
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-white font-medium">
|
||
{request.from_user.nickname} предлагает обмен
|
||
</p>
|
||
<p className="text-yellow-400 text-sm mt-1">
|
||
Вы получите: <span className="font-medium">{request.from_challenge.title}</span>
|
||
</p>
|
||
<p className="text-gray-400 text-xs">
|
||
{request.from_challenge.game_title} • {request.from_challenge.points} очков
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col gap-2">
|
||
<NeonButton
|
||
size="sm"
|
||
onClick={() => handleAcceptSwapRequest(request.id)}
|
||
isLoading={processingRequestId === request.id}
|
||
disabled={processingRequestId !== null}
|
||
icon={<Check className="w-4 h-4" />}
|
||
>
|
||
Принять
|
||
</NeonButton>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-red-500/30 text-red-400"
|
||
onClick={() => handleDeclineSwapRequest(request.id)}
|
||
isLoading={processingRequestId === request.id}
|
||
disabled={processingRequestId !== null}
|
||
icon={<XCircle className="w-4 h-4" />}
|
||
>
|
||
Отклонить
|
||
</NeonButton>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Outgoing swap requests */}
|
||
{swapRequests.outgoing.length > 0 && (
|
||
<div className="mb-6">
|
||
<h4 className="text-sm font-medium text-accent-400 mb-3 flex items-center gap-2">
|
||
<Send className="w-4 h-4" />
|
||
Отправленные запросы ({swapRequests.outgoing.length})
|
||
</h4>
|
||
<div className="space-y-3">
|
||
{swapRequests.outgoing.map((request) => (
|
||
<div
|
||
key={request.id}
|
||
className="p-4 bg-accent-500/10 border border-accent-500/30 rounded-xl"
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-white font-medium">
|
||
Запрос к {request.to_user.nickname}
|
||
</p>
|
||
<p className="text-accent-400 text-sm mt-1">
|
||
Вы получите: <span className="font-medium">{request.to_challenge.title}</span>
|
||
</p>
|
||
<p className="text-gray-500 text-xs mt-1">
|
||
Ожидание подтверждения...
|
||
</p>
|
||
</div>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleCancelSwapRequest(request.id)}
|
||
isLoading={processingRequestId === request.id}
|
||
disabled={processingRequestId !== null}
|
||
icon={<X className="w-4 h-4" />}
|
||
>
|
||
Отменить
|
||
</NeonButton>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Swap candidates */}
|
||
<div>
|
||
<h4 className="text-sm font-medium text-gray-300 mb-3">
|
||
Доступные для обмена
|
||
</h4>
|
||
{isSwapLoading ? (
|
||
<div className="flex justify-center py-8">
|
||
<Loader2 className="w-8 h-8 animate-spin text-neon-400" />
|
||
</div>
|
||
) : swapCandidates.filter(c =>
|
||
!swapRequests.outgoing.some(r => r.to_user.id === c.user.id) &&
|
||
!swapRequests.incoming.some(r => r.from_user.id === c.user.id)
|
||
).length === 0 ? (
|
||
<div className="text-center py-8 text-gray-500">
|
||
Нет участников для обмена
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{swapCandidates
|
||
.filter(c =>
|
||
!swapRequests.outgoing.some(r => r.to_user.id === c.user.id) &&
|
||
!swapRequests.incoming.some(r => r.from_user.id === c.user.id)
|
||
)
|
||
.map((candidate) => (
|
||
<div
|
||
key={candidate.participant_id}
|
||
className="p-4 bg-dark-700/50 rounded-xl border border-dark-600"
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-white font-medium">
|
||
{candidate.user.nickname}
|
||
</p>
|
||
<p className="text-neon-400 text-sm font-medium truncate">
|
||
{candidate.challenge_title}
|
||
</p>
|
||
<p className="text-gray-400 text-xs mt-1">
|
||
{candidate.game_title} • {candidate.challenge_points} очков • {candidate.challenge_difficulty}
|
||
</p>
|
||
</div>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleSendSwapRequest(
|
||
candidate.participant_id,
|
||
candidate.user.nickname,
|
||
candidate.challenge_title
|
||
)}
|
||
isLoading={sendingRequestTo === candidate.participant_id}
|
||
disabled={sendingRequestTo !== null}
|
||
icon={<ArrowLeftRight className="w-4 h-4" />}
|
||
>
|
||
Предложить
|
||
</NeonButton>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</GlassCard>
|
||
)}
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|