mamonov.ep
f78eacb1a5
## Skip with Exile (новый расходник) - Новая модель ExiledGame для хранения изгнанных игр - Расходник skip_exile: пропуск без штрафа + игра исключается из пула навсегда - Фильтрация изгнанных игр при выдаче заданий - UI кнопка в PlayPage для использования skip_exile ## Модерация марафонов (для организаторов) - Эндпоинты: skip-assignment, exiled-games, restore-exiled-game - UI в LeaderboardPage: кнопка скипа у каждого участника - Выбор типа скипа (обычный/с изгнанием) + причина - Telegram уведомления о модерации ## Админская выдача предметов - Эндпоинты: admin grant/remove items, get user inventory - Новая страница AdminGrantItemPage (как магазин) - Telegram уведомление при получении подарка ## Исправления миграций - Миграции 029/030 теперь идемпотентны (проверка существования таблиц) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1992 lines
89 KiB
TypeScript
1992 lines
89 KiB
TypeScript
import { useState, useEffect, useRef } from 'react'
|
||
import { useParams, Link } from 'react-router-dom'
|
||
import { marathonsApi, wheelApi, gamesApi, eventsApi, assignmentsApi, shopApi } from '@/api'
|
||
import type { Marathon, Assignment, Game, ActiveEvent, SwapCandidate, MySwapRequests, CommonEnemyLeaderboardEntry, EventAssignment, GameChoiceChallenges, ReturnedAssignment, ConsumablesStatus, ConsumableType } 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, Download, SkipForward, Package, Dice5, Copy, Undo2, Shuffle } from 'lucide-react'
|
||
import { useToast } from '@/store/toast'
|
||
import { useConfirm } from '@/store/confirm'
|
||
import { useShopStore } from '@/store/shop'
|
||
|
||
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 [proofFiles, setProofFiles] = useState<File[]>([])
|
||
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[]>([])
|
||
|
||
// Consumables
|
||
const [consumablesStatus, setConsumablesStatus] = useState<ConsumablesStatus | null>(null)
|
||
const [isUsingConsumable, setIsUsingConsumable] = useState<ConsumableType | null>(null)
|
||
|
||
// Bonus challenge completion
|
||
const [expandedBonusId, setExpandedBonusId] = useState<number | null>(null)
|
||
const [bonusProofFiles, setBonusProofFiles] = useState<File[]>([])
|
||
const [bonusProofUrl, setBonusProofUrl] = useState('')
|
||
const [bonusComment, setBonusComment] = useState('')
|
||
const [isCompletingBonus, setIsCompletingBonus] = useState(false)
|
||
|
||
const bonusFileInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
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, availableGamesData, eventData, eventAssignmentData, returnedData, consumablesData] = await Promise.all([
|
||
marathonsApi.get(parseInt(id)),
|
||
wheelApi.getCurrentAssignment(parseInt(id)),
|
||
gamesApi.getAvailableGames(parseInt(id)),
|
||
eventsApi.getActive(parseInt(id)),
|
||
eventsApi.getEventAssignment(parseInt(id)),
|
||
assignmentsApi.getReturnedAssignments(parseInt(id)),
|
||
shopApi.getConsumablesStatus(parseInt(id)).catch(() => null),
|
||
])
|
||
setMarathon(marathonData)
|
||
setCurrentAssignment(assignment)
|
||
setGames(availableGamesData)
|
||
setActiveEvent(eventData)
|
||
setEventAssignment(eventAssignmentData)
|
||
setReturnedAssignments(returnedData)
|
||
setConsumablesStatus(consumablesData)
|
||
} 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
|
||
|
||
// For playthrough: allow file, URL, or comment
|
||
// For challenges: require file or URL
|
||
if (currentAssignment.is_playthrough) {
|
||
if (proofFiles.length === 0 && !proofUrl && !comment) {
|
||
toast.warning('Пожалуйста, предоставьте доказательство (файл, ссылку или комментарий)')
|
||
return
|
||
}
|
||
} else {
|
||
if (proofFiles.length === 0 && !proofUrl) {
|
||
toast.warning('Пожалуйста, предоставьте доказательство (файл или ссылку)')
|
||
return
|
||
}
|
||
}
|
||
|
||
setIsCompleting(true)
|
||
try {
|
||
const result = await wheelApi.complete(currentAssignment.id, {
|
||
proof_files: proofFiles.length > 0 ? proofFiles : undefined,
|
||
proof_url: proofUrl || undefined,
|
||
comment: comment || undefined,
|
||
})
|
||
toast.success(`Выполнено! +${result.points_earned} очков (бонус серии: +${result.streak_bonus})`)
|
||
setProofFiles([])
|
||
setProofUrl('')
|
||
setComment('')
|
||
await loadData()
|
||
// Refresh coins balance
|
||
useShopStore.getState().loadBalance()
|
||
} 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 handleBonusComplete = async (bonusId: number) => {
|
||
if (!currentAssignment) return
|
||
if (bonusProofFiles.length === 0 && !bonusProofUrl && !bonusComment) {
|
||
toast.warning('Прикрепите файл, ссылку или комментарий')
|
||
return
|
||
}
|
||
|
||
setIsCompletingBonus(true)
|
||
try {
|
||
const result = await assignmentsApi.completeBonusAssignment(
|
||
currentAssignment.id,
|
||
bonusId,
|
||
{
|
||
proof_files: bonusProofFiles.length > 0 ? bonusProofFiles : undefined,
|
||
proof_url: bonusProofUrl || undefined,
|
||
comment: bonusComment || undefined,
|
||
}
|
||
)
|
||
toast.success(`Бонус отмечен! +${result.points_earned} очков начислится при завершении игры`)
|
||
setBonusProofFiles([])
|
||
setBonusProofUrl('')
|
||
setBonusComment('')
|
||
setExpandedBonusId(null)
|
||
if (bonusFileInputRef.current) bonusFileInputRef.current.value = ''
|
||
await loadData()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось выполнить бонус')
|
||
} finally {
|
||
setIsCompletingBonus(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)
|
||
}
|
||
}
|
||
|
||
// Consumable handlers
|
||
const handleUseSkip = async () => {
|
||
if (!currentAssignment || !id) return
|
||
setIsUsingConsumable('skip')
|
||
try {
|
||
await shopApi.useConsumable({
|
||
item_code: 'skip',
|
||
marathon_id: parseInt(id),
|
||
assignment_id: currentAssignment.id,
|
||
})
|
||
toast.success('Задание пропущено без штрафа!')
|
||
await loadData()
|
||
useShopStore.getState().loadBalance()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось использовать Skip')
|
||
} finally {
|
||
setIsUsingConsumable(null)
|
||
}
|
||
}
|
||
|
||
const handleUseSkipExile = async () => {
|
||
if (!currentAssignment || !id) return
|
||
const confirmed = await confirm({
|
||
title: 'Скип с изгнанием?',
|
||
message: 'Задание будет пропущено без штрафа, а игра навсегда удалена из вашего пула.',
|
||
confirmText: 'Использовать',
|
||
cancelText: 'Отмена',
|
||
variant: 'warning',
|
||
})
|
||
if (!confirmed) return
|
||
|
||
setIsUsingConsumable('skip_exile')
|
||
try {
|
||
await shopApi.useConsumable({
|
||
item_code: 'skip_exile',
|
||
marathon_id: parseInt(id),
|
||
assignment_id: currentAssignment.id,
|
||
})
|
||
toast.success('Задание пропущено, игра изгнана из пула!')
|
||
await loadData()
|
||
useShopStore.getState().loadBalance()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось использовать Skip с изгнанием')
|
||
} finally {
|
||
setIsUsingConsumable(null)
|
||
}
|
||
}
|
||
|
||
const handleUseBoost = async () => {
|
||
if (!id) return
|
||
setIsUsingConsumable('boost')
|
||
try {
|
||
await shopApi.useConsumable({
|
||
item_code: 'boost',
|
||
marathon_id: parseInt(id),
|
||
})
|
||
toast.success('Boost активирован! x1.5 очков за текущее задание.')
|
||
await loadData()
|
||
useShopStore.getState().loadBalance()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось активировать Boost')
|
||
} finally {
|
||
setIsUsingConsumable(null)
|
||
}
|
||
}
|
||
|
||
// Wild Card modal state
|
||
const [showWildCardModal, setShowWildCardModal] = useState(false)
|
||
|
||
const handleUseWildCard = async (gameId: number) => {
|
||
if (!currentAssignment || !id) return
|
||
setIsUsingConsumable('wild_card')
|
||
try {
|
||
const result = await shopApi.useConsumable({
|
||
item_code: 'wild_card',
|
||
marathon_id: parseInt(id),
|
||
assignment_id: currentAssignment.id,
|
||
game_id: gameId,
|
||
})
|
||
toast.success(result.effect_description)
|
||
setShowWildCardModal(false)
|
||
await loadData()
|
||
useShopStore.getState().loadBalance()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось использовать Wild Card')
|
||
} finally {
|
||
setIsUsingConsumable(null)
|
||
}
|
||
}
|
||
|
||
const handleUseLuckyDice = async () => {
|
||
if (!id) return
|
||
setIsUsingConsumable('lucky_dice')
|
||
try {
|
||
const result = await shopApi.useConsumable({
|
||
item_code: 'lucky_dice',
|
||
marathon_id: parseInt(id),
|
||
})
|
||
const multiplier = result.effect_data?.multiplier as number
|
||
toast.success(`Lucky Dice: x${multiplier} множитель!`)
|
||
await loadData()
|
||
useShopStore.getState().loadBalance()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось использовать Lucky Dice')
|
||
} finally {
|
||
setIsUsingConsumable(null)
|
||
}
|
||
}
|
||
|
||
// Copycat modal state
|
||
const [showCopycatModal, setShowCopycatModal] = useState(false)
|
||
const [copycatCandidates, setCopycatCandidates] = useState<SwapCandidate[]>([])
|
||
const [isLoadingCopycatCandidates, setIsLoadingCopycatCandidates] = useState(false)
|
||
|
||
const loadCopycatCandidates = async () => {
|
||
if (!id) return
|
||
setIsLoadingCopycatCandidates(true)
|
||
try {
|
||
const candidates = await shopApi.getCopycatCandidates(parseInt(id))
|
||
setCopycatCandidates(candidates)
|
||
} catch (error) {
|
||
console.error('Failed to load copycat candidates:', error)
|
||
} finally {
|
||
setIsLoadingCopycatCandidates(false)
|
||
}
|
||
}
|
||
|
||
const handleUseCopycat = async (targetParticipantId: number) => {
|
||
if (!currentAssignment || !id) return
|
||
setIsUsingConsumable('copycat')
|
||
try {
|
||
const result = await shopApi.useConsumable({
|
||
item_code: 'copycat',
|
||
marathon_id: parseInt(id),
|
||
assignment_id: currentAssignment.id,
|
||
target_participant_id: targetParticipantId,
|
||
})
|
||
toast.success(result.effect_description)
|
||
setShowCopycatModal(false)
|
||
await loadData()
|
||
useShopStore.getState().loadBalance()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось использовать Copycat')
|
||
} finally {
|
||
setIsUsingConsumable(null)
|
||
}
|
||
}
|
||
|
||
const handleUseUndo = async () => {
|
||
if (!id) return
|
||
const confirmed = await confirm({
|
||
title: 'Использовать Undo?',
|
||
message: 'Это вернёт очки и серию от последнего пропуска.',
|
||
confirmText: 'Использовать',
|
||
cancelText: 'Отмена',
|
||
variant: 'info',
|
||
})
|
||
if (!confirmed) return
|
||
|
||
setIsUsingConsumable('undo')
|
||
try {
|
||
const result = await shopApi.useConsumable({
|
||
item_code: 'undo',
|
||
marathon_id: parseInt(id),
|
||
})
|
||
toast.success(result.effect_description)
|
||
await loadData()
|
||
useShopStore.getState().loadBalance()
|
||
} catch (err: unknown) {
|
||
const error = err as { response?: { data?: { detail?: string } } }
|
||
toast.error(error.response?.data?.detail || 'Не удалось использовать Undo')
|
||
} finally {
|
||
setIsUsingConsumable(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>
|
||
{ra.is_playthrough ? (
|
||
<>
|
||
<p className="text-white font-medium">Прохождение: {ra.game_title}</p>
|
||
<p className="text-gray-400 text-sm">Прохождение игры</p>
|
||
</>
|
||
) : ra.challenge ? (
|
||
<>
|
||
<p className="text-white font-medium">{ra.challenge.title}</p>
|
||
<p className="text-gray-400 text-sm">{ra.challenge.game.title}</p>
|
||
</>
|
||
) : null}
|
||
</div>
|
||
{!ra.is_playthrough && ra.challenge && (
|
||
<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>
|
||
)}
|
||
|
||
{/* Consumables Panel */}
|
||
{consumablesStatus && marathon?.allow_consumables && (
|
||
<GlassCard className="mb-6 border-purple-500/30">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 rounded-xl bg-purple-500/20 flex items-center justify-center">
|
||
<Package className="w-5 h-5 text-purple-400" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-purple-400">Расходники</h3>
|
||
<p className="text-sm text-gray-400">Используйте для облегчения задания</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Active effects */}
|
||
{(consumablesStatus.has_active_boost || consumablesStatus.has_lucky_dice) && (
|
||
<div className="mb-4 p-3 bg-green-500/10 border border-green-500/30 rounded-xl">
|
||
<p className="text-green-400 text-sm font-medium mb-2">Активные эффекты:</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
{consumablesStatus.has_active_boost && (
|
||
<span className="px-2 py-1 bg-yellow-500/20 text-yellow-400 text-xs rounded-lg border border-yellow-500/30 flex items-center gap-1">
|
||
<Zap className="w-3 h-3" /> Boost x1.5
|
||
</span>
|
||
)}
|
||
{consumablesStatus.has_lucky_dice && (
|
||
<span className="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-lg border border-purple-500/30 flex items-center gap-1">
|
||
<Dice5 className="w-3 h-3" /> Lucky Dice x{consumablesStatus.lucky_dice_multiplier}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Consumables grid */}
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{/* Skip */}
|
||
<div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center gap-2">
|
||
<SkipForward className="w-4 h-4 text-orange-400" />
|
||
<span className="text-white font-medium">Skip</span>
|
||
</div>
|
||
<span className="text-gray-400 text-sm">{consumablesStatus.skips_available} шт.</span>
|
||
</div>
|
||
<p className="text-gray-500 text-xs mb-2">Пропустить без штрафа</p>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleUseSkip}
|
||
disabled={consumablesStatus.skips_available === 0 || !currentAssignment || isUsingConsumable !== null}
|
||
isLoading={isUsingConsumable === 'skip'}
|
||
className="w-full"
|
||
>
|
||
Использовать
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{/* Skip with Exile */}
|
||
<div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center gap-2">
|
||
<XCircle className="w-4 h-4 text-red-400" />
|
||
<span className="text-white font-medium">Skip + Изгнание</span>
|
||
</div>
|
||
<span className="text-gray-400 text-sm">{consumablesStatus.skip_exiles_available} шт.</span>
|
||
</div>
|
||
<p className="text-gray-500 text-xs mb-2">Скип + убрать игру из пула</p>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleUseSkipExile}
|
||
disabled={consumablesStatus.skip_exiles_available === 0 || !currentAssignment || isUsingConsumable !== null}
|
||
isLoading={isUsingConsumable === 'skip_exile'}
|
||
className="w-full"
|
||
>
|
||
Использовать
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{/* Boost */}
|
||
<div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center gap-2">
|
||
<Zap className="w-4 h-4 text-yellow-400" />
|
||
<span className="text-white font-medium">Boost</span>
|
||
</div>
|
||
<span className="text-gray-400 text-sm">
|
||
{consumablesStatus.has_active_boost ? 'Активен' : `${consumablesStatus.boosts_available} шт.`}
|
||
</span>
|
||
</div>
|
||
<p className="text-gray-500 text-xs mb-2">x1.5 очков</p>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleUseBoost}
|
||
disabled={consumablesStatus.has_active_boost || consumablesStatus.boosts_available === 0 || isUsingConsumable !== null}
|
||
isLoading={isUsingConsumable === 'boost'}
|
||
className="w-full"
|
||
>
|
||
{consumablesStatus.has_active_boost ? 'Активен' : 'Активировать'}
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{/* Wild Card */}
|
||
<div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center gap-2">
|
||
<Shuffle className="w-4 h-4 text-green-400" />
|
||
<span className="text-white font-medium">Wild Card</span>
|
||
</div>
|
||
<span className="text-gray-400 text-sm">{consumablesStatus.wild_cards_available} шт.</span>
|
||
</div>
|
||
<p className="text-gray-500 text-xs mb-2">Выбрать игру</p>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => setShowWildCardModal(true)}
|
||
disabled={consumablesStatus.wild_cards_available === 0 || !currentAssignment || isUsingConsumable !== null}
|
||
isLoading={isUsingConsumable === 'wild_card'}
|
||
className="w-full"
|
||
>
|
||
Выбрать
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{/* Lucky Dice */}
|
||
<div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center gap-2">
|
||
<Dice5 className="w-4 h-4 text-purple-400" />
|
||
<span className="text-white font-medium">Lucky Dice</span>
|
||
</div>
|
||
<span className="text-gray-400 text-sm">
|
||
{consumablesStatus.has_lucky_dice ? `x${consumablesStatus.lucky_dice_multiplier}` : `${consumablesStatus.lucky_dice_available} шт.`}
|
||
</span>
|
||
</div>
|
||
<p className="text-gray-500 text-xs mb-2">Случайный множитель</p>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleUseLuckyDice}
|
||
disabled={consumablesStatus.has_lucky_dice || consumablesStatus.lucky_dice_available === 0 || isUsingConsumable !== null}
|
||
isLoading={isUsingConsumable === 'lucky_dice'}
|
||
className="w-full"
|
||
>
|
||
{consumablesStatus.has_lucky_dice ? `x${consumablesStatus.lucky_dice_multiplier}` : 'Бросить'}
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{/* Copycat */}
|
||
<div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center gap-2">
|
||
<Copy className="w-4 h-4 text-cyan-400" />
|
||
<span className="text-white font-medium">Copycat</span>
|
||
</div>
|
||
<span className="text-gray-400 text-sm">{consumablesStatus.copycats_available} шт.</span>
|
||
</div>
|
||
<p className="text-gray-500 text-xs mb-2">Скопировать задание</p>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => {
|
||
setShowCopycatModal(true)
|
||
loadCopycatCandidates()
|
||
}}
|
||
disabled={consumablesStatus.copycats_available === 0 || !currentAssignment || isUsingConsumable !== null}
|
||
isLoading={isUsingConsumable === 'copycat'}
|
||
className="w-full"
|
||
>
|
||
Выбрать
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{/* Undo */}
|
||
<div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<div className="flex items-center gap-2">
|
||
<Undo2 className="w-4 h-4 text-red-400" />
|
||
<span className="text-white font-medium">Undo</span>
|
||
</div>
|
||
<span className="text-gray-400 text-sm">{consumablesStatus.undos_available} шт.</span>
|
||
</div>
|
||
<p className="text-gray-500 text-xs mb-2">Отменить дроп</p>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={handleUseUndo}
|
||
disabled={!consumablesStatus.can_undo || consumablesStatus.undos_available === 0 || isUsingConsumable !== null}
|
||
isLoading={isUsingConsumable === 'undo'}
|
||
className="w-full"
|
||
>
|
||
{consumablesStatus.can_undo ? 'Отменить' : 'Нет дропа'}
|
||
</NeonButton>
|
||
</div>
|
||
</div>
|
||
</GlassCard>
|
||
)}
|
||
|
||
{/* Wild Card Modal */}
|
||
{showWildCardModal && (
|
||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
|
||
<GlassCard className="w-full max-w-md max-h-[80vh] overflow-y-auto">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-lg font-bold text-white">Выберите игру</h3>
|
||
<button
|
||
onClick={() => setShowWildCardModal(false)}
|
||
className="p-2 text-gray-400 hover:text-white"
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<p className="text-gray-400 text-sm mb-4">
|
||
Вы получите случайное задание из выбранной игры
|
||
</p>
|
||
<div className="space-y-2">
|
||
{games.map((game) => (
|
||
<button
|
||
key={game.id}
|
||
onClick={() => handleUseWildCard(game.id)}
|
||
disabled={isUsingConsumable === 'wild_card'}
|
||
className="w-full p-3 bg-dark-700/50 hover:bg-dark-700 rounded-xl text-left transition-colors border border-dark-600 hover:border-green-500/30 disabled:opacity-50"
|
||
>
|
||
<p className="text-white font-medium">{game.title}</p>
|
||
<p className="text-gray-400 text-xs">{game.challenges_count} челленджей</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</GlassCard>
|
||
</div>
|
||
)}
|
||
|
||
{/* Copycat Modal */}
|
||
{showCopycatModal && (
|
||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
|
||
<GlassCard className="w-full max-w-md max-h-[80vh] overflow-y-auto">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h3 className="text-lg font-bold text-white">Скопировать задание</h3>
|
||
<button
|
||
onClick={() => setShowCopycatModal(false)}
|
||
className="p-2 text-gray-400 hover:text-white"
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<p className="text-gray-400 text-sm mb-4">
|
||
Выберите участника, чьё задание хотите скопировать
|
||
</p>
|
||
{isLoadingCopycatCandidates ? (
|
||
<div className="flex justify-center py-8">
|
||
<Loader2 className="w-8 h-8 animate-spin text-cyan-400" />
|
||
</div>
|
||
) : copycatCandidates.length === 0 ? (
|
||
<p className="text-center text-gray-500 py-8">Нет доступных заданий для копирования</p>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{copycatCandidates.map((candidate) => (
|
||
<button
|
||
key={candidate.participant_id}
|
||
onClick={() => handleUseCopycat(candidate.participant_id)}
|
||
disabled={isUsingConsumable === 'copycat'}
|
||
className="w-full p-3 bg-dark-700/50 hover:bg-dark-700 rounded-xl text-left transition-colors border border-dark-600 hover:border-cyan-500/30 disabled:opacity-50"
|
||
>
|
||
<p className="text-white font-medium">{candidate.user.nickname}</p>
|
||
<p className="text-cyan-400 text-sm">{candidate.challenge_title}</p>
|
||
<p className="text-gray-500 text-xs">
|
||
{candidate.game_title} • {candidate.challenge_points} очков • {candidate.challenge_difficulty}
|
||
</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</GlassCard>
|
||
</div>
|
||
)}
|
||
|
||
{/* 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 rounded-full text-sm font-medium border ${
|
||
currentAssignment.is_playthrough
|
||
? 'bg-accent-500/20 text-accent-400 border-accent-500/30'
|
||
: 'bg-neon-500/20 text-neon-400 border-neon-500/30'
|
||
}`}>
|
||
{currentAssignment.is_playthrough ? 'Прохождение игры' : 'Активное задание'}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<p className="text-gray-400 text-sm mb-1">Игра</p>
|
||
<div className="flex items-center justify-between gap-3 flex-wrap">
|
||
<p className="text-xl font-bold text-white">
|
||
{currentAssignment.is_playthrough
|
||
? currentAssignment.game?.title
|
||
: currentAssignment.challenge?.game.title}
|
||
</p>
|
||
{(currentAssignment.is_playthrough
|
||
? currentAssignment.game?.download_url
|
||
: currentAssignment.challenge?.game.download_url) && (
|
||
<a
|
||
href={currentAssignment.is_playthrough
|
||
? currentAssignment.game?.download_url
|
||
: currentAssignment.challenge?.game.download_url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="px-3 py-1.5 bg-neon-500/20 text-neon-400 rounded-lg text-sm font-medium border border-neon-500/30 flex items-center gap-1.5 hover:bg-neon-500/30 transition-colors"
|
||
>
|
||
<Download className="w-4 h-4" />
|
||
Скачать игру
|
||
</a>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{currentAssignment.is_playthrough ? (
|
||
// Playthrough task
|
||
<>
|
||
<div className="mb-4">
|
||
<p className="text-gray-400 text-sm mb-1">Задача</p>
|
||
<p className="text-xl font-bold text-accent-400 mb-2">
|
||
Пройти игру
|
||
</p>
|
||
<p className="text-gray-300">
|
||
{currentAssignment.playthrough_info?.description}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 mb-6 flex-wrap">
|
||
{/* Points - calculated from tracked time if available */}
|
||
{currentAssignment.tracked_time_minutes !== undefined && currentAssignment.tracked_time_minutes > 0 ? (
|
||
<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">
|
||
~{Math.floor(currentAssignment.tracked_time_minutes / 60 * 30)} очков
|
||
</span>
|
||
) : (
|
||
<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.playthrough_info?.points} очков
|
||
</span>
|
||
)}
|
||
{/* Time tracker indicator */}
|
||
{currentAssignment.tracked_time_minutes !== undefined && currentAssignment.tracked_time_minutes > 0 ? (
|
||
<span className="px-3 py-1.5 bg-neon-500/20 text-neon-400 rounded-lg text-sm font-medium border border-neon-500/30 flex items-center gap-1.5">
|
||
<Clock className="w-4 h-4" />
|
||
{Math.floor(currentAssignment.tracked_time_minutes / 60)}ч {currentAssignment.tracked_time_minutes % 60}м
|
||
</span>
|
||
) : (
|
||
<span className="px-3 py-1.5 bg-gray-500/20 text-gray-400 rounded-lg text-sm font-medium border border-gray-500/30 flex items-center gap-1.5">
|
||
<Clock className="w-4 h-4" />
|
||
Установите трекер
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{currentAssignment.playthrough_info?.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.playthrough_info.proof_hint}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Bonus challenges */}
|
||
{currentAssignment.bonus_challenges && currentAssignment.bonus_challenges.length > 0 && (
|
||
<div className="mb-6 p-4 bg-accent-500/10 rounded-xl border border-accent-500/20">
|
||
<p className="text-accent-400 font-medium mb-3">
|
||
Бонусные челленджи (опционально) — {currentAssignment.bonus_challenges.filter(b => b.status === 'completed').length}/{currentAssignment.bonus_challenges.length}
|
||
</p>
|
||
<div className="space-y-2">
|
||
{currentAssignment.bonus_challenges.map((bonus) => (
|
||
<div
|
||
key={bonus.id}
|
||
className={`rounded-lg border overflow-hidden ${
|
||
bonus.status === 'completed'
|
||
? 'bg-green-500/10 border-green-500/30'
|
||
: 'bg-dark-700/50 border-dark-600'
|
||
}`}
|
||
>
|
||
{/* Bonus header */}
|
||
<div
|
||
className={`p-3 flex items-center justify-between ${
|
||
bonus.status === 'pending' ? 'cursor-pointer hover:bg-dark-600/50' : ''
|
||
}`}
|
||
onClick={() => {
|
||
if (bonus.status === 'pending') {
|
||
setExpandedBonusId(expandedBonusId === bonus.id ? null : bonus.id)
|
||
setBonusProofFiles([])
|
||
setBonusProofUrl('')
|
||
setBonusComment('')
|
||
if (bonusFileInputRef.current) bonusFileInputRef.current.value = ''
|
||
}
|
||
}}
|
||
>
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
{bonus.status === 'completed' && (
|
||
<Check className="w-4 h-4 text-green-400" />
|
||
)}
|
||
<p className="text-white font-medium text-sm">{bonus.challenge.title}</p>
|
||
</div>
|
||
<p className="text-gray-400 text-xs mt-0.5">{bonus.challenge.description}</p>
|
||
</div>
|
||
<div className="text-right shrink-0 ml-2">
|
||
{bonus.status === 'completed' ? (
|
||
<span className="text-green-400 text-sm font-medium">+{bonus.points_earned}</span>
|
||
) : (
|
||
<span className="text-accent-400 text-sm">+{bonus.challenge.points}</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Expanded form for completing */}
|
||
{expandedBonusId === bonus.id && bonus.status === 'pending' && (
|
||
<div className="p-3 border-t border-dark-600 bg-dark-800/50 space-y-3">
|
||
{bonus.challenge.proof_hint && (
|
||
<p className="text-xs text-gray-400">
|
||
<strong className="text-white">Пруф:</strong> {bonus.challenge.proof_hint}
|
||
</p>
|
||
)}
|
||
|
||
{/* File upload */}
|
||
<input
|
||
ref={bonusFileInputRef}
|
||
type="file"
|
||
accept="image/*,video/*"
|
||
multiple
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
e.stopPropagation()
|
||
const files = Array.from(e.target.files || [])
|
||
setBonusProofFiles(prev => [...prev, ...files])
|
||
e.target.value = ''
|
||
}}
|
||
/>
|
||
{bonusProofFiles.length > 0 ? (
|
||
<div className="space-y-2">
|
||
{bonusProofFiles.map((file, index) => (
|
||
<div key={index} className="flex items-center gap-2 p-2 bg-dark-700/50 rounded-lg border border-dark-600">
|
||
<span className="text-white text-sm flex-1 truncate">{file.name}</span>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
setBonusProofFiles(prev => prev.filter((_, i) => i !== index))
|
||
}}
|
||
className="p-1 rounded text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
|
||
>
|
||
<X className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
bonusFileInputRef.current?.click()
|
||
}}
|
||
className="w-full p-2 border border-dashed border-neon-500/30 rounded-lg text-neon-400 hover:border-neon-500/50 hover:bg-neon-500/5 transition-all text-sm flex items-center justify-center gap-2"
|
||
>
|
||
<Upload className="w-4 h-4" />
|
||
Добавить еще файл
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
bonusFileInputRef.current?.click()
|
||
}}
|
||
className="w-full p-2 border border-dashed border-dark-500 rounded-lg text-gray-400 text-sm hover:border-accent-400 hover:text-accent-400 transition-colors flex items-center justify-center gap-2"
|
||
>
|
||
<Upload className="w-4 h-4" />
|
||
Загрузить файл
|
||
</button>
|
||
)}
|
||
|
||
<div className="text-center text-gray-500 text-xs">или</div>
|
||
|
||
<input
|
||
type="text"
|
||
className="input text-sm"
|
||
placeholder="Ссылка на пруф (YouTube, Steam и т.д.)"
|
||
value={bonusProofUrl}
|
||
onChange={(e) => setBonusProofUrl(e.target.value)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
<textarea
|
||
className="input text-sm resize-none"
|
||
placeholder="Комментарий (необязательно)"
|
||
rows={2}
|
||
value={bonusComment}
|
||
onChange={(e) => setBonusComment(e.target.value)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
<div className="flex gap-2">
|
||
<NeonButton
|
||
size="sm"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
handleBonusComplete(bonus.id)
|
||
}}
|
||
isLoading={isCompletingBonus}
|
||
disabled={bonusProofFiles.length === 0 && !bonusProofUrl && !bonusComment}
|
||
icon={<Check className="w-3 h-3" />}
|
||
>
|
||
Выполнено
|
||
</NeonButton>
|
||
<NeonButton
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
setBonusProofFiles([])
|
||
setBonusProofUrl('')
|
||
setBonusComment('')
|
||
setExpandedBonusId(null)
|
||
if (bonusFileInputRef.current) bonusFileInputRef.current.value = ''
|
||
}}
|
||
>
|
||
Отмена
|
||
</NeonButton>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p className="text-xs text-gray-500 mt-2">
|
||
Нажмите на бонус, чтобы отметить. Очки начислятся при завершении игры.
|
||
</p>
|
||
</div>
|
||
)}
|
||
</>
|
||
) : (
|
||
// Regular challenge
|
||
<>
|
||
<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.is_playthrough
|
||
? currentAssignment.playthrough_info?.proof_type
|
||
: currentAssignment.challenge?.proof_type})
|
||
</label>
|
||
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*,video/*"
|
||
multiple
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
const files = Array.from(e.target.files || [])
|
||
setProofFiles(prev => [...prev, ...files])
|
||
// Reset input to allow selecting same files again
|
||
e.target.value = ''
|
||
}}
|
||
/>
|
||
|
||
{proofFiles.length > 0 ? (
|
||
<div className="space-y-2">
|
||
{proofFiles.map((file, index) => (
|
||
<div key={index} 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">{file.name}</span>
|
||
<button
|
||
onClick={() => setProofFiles(proofFiles.filter((_, i) => i !== index))}
|
||
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>
|
||
))}
|
||
<NeonButton
|
||
variant="outline"
|
||
className="w-full"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
icon={<Upload className="w-4 h-4" />}
|
||
>
|
||
Добавить ещё файлы
|
||
</NeonButton>
|
||
</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={currentAssignment.is_playthrough
|
||
? (proofFiles.length === 0 && !proofUrl && !comment)
|
||
: (proofFiles.length === 0 && !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>
|
||
)
|
||
}
|