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

Redesign p1

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

635
frontend/src/pages/AssignmentDetailPage.tsx
View File

@@ -2,13 +2,13 @@ import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { assignmentsApi } from '@/api'
import type { AssignmentDetail } from '@/types'
import { Card, CardContent, Button } from '@/components/ui'
import { GlassCard, NeonButton } from '@/components/ui'
import { useAuthStore } from '@/store/auth'
import { useToast } from '@/store/toast'
import {
ArrowLeft, Loader2, ExternalLink, Image, MessageSquare,
ThumbsUp, ThumbsDown, AlertTriangle, Clock, CheckCircle, XCircle,
Send, Flag
Send, Flag, Gamepad2, Zap, Trophy
} from 'lucide-react'
export function AssignmentDetailPage() {
@@ -142,373 +142,412 @@ export function AssignmentDetailPage() {
return `${hours}ч ${minutes}м`
}
const getStatusBadge = (status: string) => {
const getStatusConfig = (status: string) => {
switch (status) {
case 'completed':
return (
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
<CheckCircle className="w-4 h-4" /> Выполнено
</span>
)
return {
color: 'bg-green-500/20 text-green-400 border-green-500/30',
icon: <CheckCircle className="w-4 h-4" />,
text: 'Выполнено',
}
case 'dropped':
return (
<span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
<XCircle className="w-4 h-4" /> Пропущено
</span>
)
return {
color: 'bg-red-500/20 text-red-400 border-red-500/30',
icon: <XCircle className="w-4 h-4" />,
text: 'Пропущено',
}
case 'returned':
return (
<span className="px-3 py-1 bg-orange-500/20 text-orange-400 rounded-full text-sm flex items-center gap-1">
<AlertTriangle className="w-4 h-4" /> Возвращено
</span>
)
return {
color: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
icon: <AlertTriangle className="w-4 h-4" />,
text: 'Возвращено',
}
default:
return (
<span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm">
Активно
</span>
)
return {
color: 'bg-neon-500/20 text-neon-400 border-neon-500/30',
icon: <Zap className="w-4 h-4" />,
text: 'Активно',
}
}
}
if (isLoading) {
return (
<div className="flex justify-center py-12">
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
<div className="flex flex-col items-center justify-center py-24">
<Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
<p className="text-gray-400">Загрузка...</p>
</div>
)
}
if (error || !assignment) {
return (
<div className="max-w-2xl mx-auto text-center py-12">
<p className="text-red-400 mb-4">{error || 'Задание не найдено'}</p>
<Button onClick={() => navigate(-1)}>Назад</Button>
<div className="max-w-2xl mx-auto">
<GlassCard className="text-center py-12">
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-red-500/10 border border-red-500/30 flex items-center justify-center">
<AlertTriangle className="w-8 h-8 text-red-400" />
</div>
<p className="text-gray-400 mb-6">{error || 'Задание не найдено'}</p>
<NeonButton variant="outline" onClick={() => navigate(-1)}>
Назад
</NeonButton>
</GlassCard>
</div>
)
}
const dispute = assignment.dispute
const status = getStatusConfig(assignment.status)
return (
<div className="max-w-2xl mx-auto">
<div className="max-w-2xl mx-auto space-y-6">
{/* Header */}
<div className="flex items-center gap-4 mb-6">
<button onClick={() => navigate(-1)} className="text-gray-400 hover:text-white">
<ArrowLeft className="w-6 h-6" />
<div className="flex items-center gap-4">
<button
onClick={() => navigate(-1)}
className="w-10 h-10 rounded-xl bg-dark-700 border border-dark-600 flex items-center justify-center text-gray-400 hover:text-white hover:border-neon-500/30 transition-all"
>
<ArrowLeft className="w-5 h-5" />
</button>
<h1 className="text-xl font-bold text-white">Детали выполнения</h1>
<div>
<h1 className="text-xl font-bold text-white">Детали выполнения</h1>
<p className="text-sm text-gray-400">Просмотр доказательства</p>
</div>
</div>
{/* Challenge info */}
<Card className="mb-6">
<CardContent>
<div className="flex items-start justify-between mb-4">
<GlassCard variant="neon">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-4">
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-neon-500/20 to-accent-500/20 border border-neon-500/20 flex items-center justify-center">
<Gamepad2 className="w-7 h-7 text-neon-400" />
</div>
<div>
<p className="text-gray-400 text-sm">{assignment.challenge.game.title}</p>
<h2 className="text-xl font-bold text-white">{assignment.challenge.title}</h2>
</div>
{getStatusBadge(assignment.status)}
</div>
<span className={`px-3 py-1.5 rounded-full text-sm font-medium border flex items-center gap-1.5 ${status.color}`}>
{status.icon}
{status.text}
</span>
</div>
<p className="text-gray-300 mb-4">{assignment.challenge.description}</p>
<p className="text-gray-300 mb-4">{assignment.challenge.description}</p>
<div className="flex flex-wrap gap-2 mb-4">
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">
+{assignment.challenge.points} очков
<div className="flex flex-wrap gap-2 mb-4">
<span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30 flex items-center gap-1.5">
<Trophy className="w-4 h-4" />
+{assignment.challenge.points} очков
</span>
<span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600">
{assignment.challenge.difficulty}
</span>
{assignment.challenge.estimated_time && (
<span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600 flex items-center gap-1.5">
<Clock className="w-4 h-4" />
~{assignment.challenge.estimated_time} мин
</span>
<span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
{assignment.challenge.difficulty}
</span>
{assignment.challenge.estimated_time && (
<span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
~{assignment.challenge.estimated_time} мин
</span>
)}
</div>
)}
</div>
<div className="text-sm text-gray-400 space-y-1">
<div className="pt-4 border-t border-dark-600 text-sm text-gray-400 space-y-1">
<p>
<span className="text-gray-500">Выполнил:</span>{' '}
<span className="text-white">{assignment.participant.nickname}</span>
</p>
{assignment.completed_at && (
<p>
<strong>Выполнил:</strong> {assignment.participant.nickname}
<span className="text-gray-500">Дата:</span>{' '}
<span className="text-white">{formatDate(assignment.completed_at)}</span>
</p>
{assignment.completed_at && (
<p>
<strong>Дата:</strong> {formatDate(assignment.completed_at)}
</p>
)}
{assignment.points_earned > 0 && (
<p>
<strong>Получено очков:</strong> {assignment.points_earned}
</p>
)}
</div>
</CardContent>
</Card>
)}
{assignment.points_earned > 0 && (
<p>
<span className="text-gray-500">Получено очков:</span>{' '}
<span className="text-neon-400 font-semibold">{assignment.points_earned}</span>
</p>
)}
</div>
</GlassCard>
{/* Proof section */}
<Card className="mb-6">
<CardContent>
<h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
<Image className="w-5 h-5" />
Доказательство
</h3>
<GlassCard>
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-accent-500/20 flex items-center justify-center">
<Image className="w-5 h-5 text-accent-400" />
</div>
<div>
<h3 className="font-semibold text-white">Доказательство</h3>
<p className="text-sm text-gray-400">Пруф выполнения задания</p>
</div>
</div>
{/* Proof media (image or video) */}
{assignment.proof_image_url && (
<div className="mb-4">
{proofMediaBlobUrl ? (
proofMediaType === 'video' ? (
<video
src={proofMediaBlobUrl}
controls
className="w-full rounded-lg max-h-96 bg-gray-900"
preload="metadata"
/>
) : (
<img
src={proofMediaBlobUrl}
alt="Proof"
className="w-full rounded-lg max-h-96 object-contain bg-gray-900"
/>
)
{/* Proof media (image or video) */}
{assignment.proof_image_url && (
<div className="mb-4 rounded-xl overflow-hidden border border-dark-600">
{proofMediaBlobUrl ? (
proofMediaType === 'video' ? (
<video
src={proofMediaBlobUrl}
controls
className="w-full max-h-96 bg-dark-900"
preload="metadata"
/>
) : (
<div className="w-full h-48 bg-gray-900 rounded-lg flex items-center justify-center">
<Loader2 className="w-8 h-8 animate-spin text-gray-500" />
</div>
)}
</div>
)}
<img
src={proofMediaBlobUrl}
alt="Proof"
className="w-full max-h-96 object-contain bg-dark-900"
/>
)
) : (
<div className="w-full h-48 bg-dark-900 flex items-center justify-center">
<Loader2 className="w-8 h-8 animate-spin text-gray-500" />
</div>
)}
</div>
)}
{/* Proof URL */}
{assignment.proof_url && (
<div className="mb-4">
<a
href={assignment.proof_url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-primary-400 hover:text-primary-300"
>
<ExternalLink className="w-4 h-4" />
{assignment.proof_url}
</a>
</div>
)}
{/* Proof URL */}
{assignment.proof_url && (
<div className="mb-4">
<a
href={assignment.proof_url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-neon-400 hover:text-neon-300 transition-colors"
>
<ExternalLink className="w-4 h-4" />
{assignment.proof_url}
</a>
</div>
)}
{/* Proof comment */}
{assignment.proof_comment && (
<div className="p-3 bg-gray-900 rounded-lg">
<p className="text-sm text-gray-400 mb-1">Комментарий:</p>
<p className="text-white">{assignment.proof_comment}</p>
</div>
)}
{/* Proof comment */}
{assignment.proof_comment && (
<div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600">
<p className="text-sm text-gray-400 mb-1">Комментарий:</p>
<p className="text-white">{assignment.proof_comment}</p>
</div>
)}
{!assignment.proof_image_url && !assignment.proof_url && (
<p className="text-gray-500 text-center py-4">Пруф не предоставлен</p>
)}
</CardContent>
</Card>
{!assignment.proof_image_url && !assignment.proof_url && (
<div className="text-center py-8">
<div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-dark-700 flex items-center justify-center">
<Image className="w-6 h-6 text-gray-600" />
</div>
<p className="text-gray-500">Пруф не предоставлен</p>
</div>
)}
</GlassCard>
{/* Dispute button */}
{assignment.can_dispute && !dispute && !showDisputeForm && (
<Button
variant="danger"
className="w-full mb-6"
<NeonButton
variant="outline"
className="w-full border-red-500/50 text-red-400 hover:bg-red-500/10"
onClick={() => setShowDisputeForm(true)}
icon={<Flag className="w-4 h-4" />}
>
<Flag className="w-4 h-4 mr-2" />
Оспорить выполнение
</Button>
</NeonButton>
)}
{/* Dispute creation form */}
{showDisputeForm && !dispute && (
<Card className="mb-6 border-red-500/50">
<CardContent>
<h3 className="text-lg font-bold text-red-400 mb-4 flex items-center gap-2">
<AlertTriangle className="w-5 h-5" />
Оспорить выполнение
</h3>
<p className="text-gray-400 text-sm mb-4">
Опишите причину оспаривания. После создания у участников будет 24 часа для голосования.
</p>
<textarea
className="input w-full min-h-[100px] resize-none mb-4"
placeholder="Причина оспаривания (минимум 10 символов)..."
value={disputeReason}
onChange={(e) => setDisputeReason(e.target.value)}
/>
<div className="flex gap-3">
<Button
variant="danger"
className="flex-1"
onClick={handleCreateDispute}
isLoading={isCreatingDispute}
disabled={disputeReason.trim().length < 10}
>
Оспорить
</Button>
<Button
variant="secondary"
onClick={() => {
setShowDisputeForm(false)
setDisputeReason('')
}}
>
Отмена
</Button>
<GlassCard className="border-red-500/30">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
<AlertTriangle className="w-5 h-5 text-red-400" />
</div>
</CardContent>
</Card>
<div>
<h3 className="font-semibold text-red-400">Оспорить выполнение</h3>
<p className="text-sm text-gray-400">У участников будет 24 часа для голосования</p>
</div>
</div>
<textarea
className="input w-full min-h-[100px] resize-none mb-4"
placeholder="Причина оспаривания (минимум 10 символов)..."
value={disputeReason}
onChange={(e) => setDisputeReason(e.target.value)}
/>
<div className="flex gap-3">
<NeonButton
className="flex-1 border-red-500/50 bg-red-500/10 hover:bg-red-500/20 text-red-400"
onClick={handleCreateDispute}
isLoading={isCreatingDispute}
disabled={disputeReason.trim().length < 10}
>
Оспорить
</NeonButton>
<NeonButton
variant="outline"
onClick={() => {
setShowDisputeForm(false)
setDisputeReason('')
}}
>
Отмена
</NeonButton>
</div>
</GlassCard>
)}
{/* Dispute section */}
{dispute && (
<Card className={`mb-6 ${dispute.status === 'open' ? 'border-yellow-500/50' : ''}`}>
<CardContent>
<div className="flex items-start justify-between mb-4">
<h3 className="text-lg font-bold text-yellow-400 flex items-center gap-2">
<AlertTriangle className="w-5 h-5" />
Оспаривание
</h3>
<GlassCard className={dispute.status === 'open' ? 'border-yellow-500/30' : ''}>
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-yellow-500/20 flex items-center justify-center">
<AlertTriangle className="w-5 h-5 text-yellow-400" />
</div>
<h3 className="font-semibold text-yellow-400">Оспаривание</h3>
</div>
{dispute.status === 'open' ? (
<span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm flex items-center gap-1">
<Clock className="w-4 h-4" />
{getTimeRemaining(dispute.expires_at)}
</span>
) : dispute.status === 'valid' ? (
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
<CheckCircle className="w-4 h-4" />
Пруф валиден
</span>
) : (
<span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
<XCircle className="w-4 h-4" />
Пруф невалиден
</span>
{dispute.status === 'open' ? (
<span className="px-3 py-1.5 bg-yellow-500/20 text-yellow-400 rounded-lg text-sm font-medium border border-yellow-500/30 flex items-center gap-1.5">
<Clock className="w-4 h-4" />
{getTimeRemaining(dispute.expires_at)}
</span>
) : dispute.status === 'valid' ? (
<span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30 flex items-center gap-1.5">
<CheckCircle className="w-4 h-4" />
Пруф валиден
</span>
) : (
<span className="px-3 py-1.5 bg-red-500/20 text-red-400 rounded-lg text-sm font-medium border border-red-500/30 flex items-center gap-1.5">
<XCircle className="w-4 h-4" />
Пруф невалиден
</span>
)}
</div>
<div className="mb-4 text-sm text-gray-400">
<p>
Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
</p>
<p>
Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
</p>
</div>
<div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600 mb-4">
<p className="text-sm text-gray-400 mb-1">Причина:</p>
<p className="text-white">{dispute.reason}</p>
</div>
{/* Voting section */}
{dispute.status === 'open' && (
<div className="mb-6 p-4 bg-dark-700/30 rounded-xl border border-dark-600">
<h4 className="text-sm font-semibold text-white mb-4">Голосование</h4>
<div className="flex items-center gap-6 mb-4">
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center">
<ThumbsUp className="w-4 h-4 text-green-400" />
</div>
<span className="text-green-400 font-bold text-lg">{dispute.votes_valid}</span>
<span className="text-gray-500 text-sm">валидно</span>
</div>
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center">
<ThumbsDown className="w-4 h-4 text-red-400" />
</div>
<span className="text-red-400 font-bold text-lg">{dispute.votes_invalid}</span>
<span className="text-gray-500 text-sm">невалидно</span>
</div>
</div>
<div className="flex gap-3">
<NeonButton
className={`flex-1 ${dispute.my_vote === true ? 'bg-green-500/20 border-green-500/50 text-green-400' : ''}`}
variant="outline"
onClick={() => handleVote(true)}
isLoading={isVoting}
disabled={isVoting}
icon={<ThumbsUp className="w-4 h-4" />}
>
Валидно
</NeonButton>
<NeonButton
className={`flex-1 ${dispute.my_vote === false ? 'bg-red-500/20 border-red-500/50 text-red-400' : ''}`}
variant="outline"
onClick={() => handleVote(false)}
isLoading={isVoting}
disabled={isVoting}
icon={<ThumbsDown className="w-4 h-4" />}
>
Невалидно
</NeonButton>
</div>
{dispute.my_vote !== null && (
<p className="text-sm text-gray-500 mt-3 text-center">
Вы проголосовали: <span className={dispute.my_vote ? 'text-green-400' : 'text-red-400'}>
{dispute.my_vote ? 'валидно' : 'невалидно'}
</span>
</p>
)}
</div>
)}
<div className="mb-4">
<p className="text-sm text-gray-400">
Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
</p>
<p className="text-sm text-gray-400">
Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
</p>
{/* Comments section */}
<div>
<div className="flex items-center gap-2 mb-4">
<MessageSquare className="w-4 h-4 text-gray-400" />
<h4 className="text-sm font-semibold text-white">
Обсуждение ({dispute.comments.length})
</h4>
</div>
<div className="p-3 bg-gray-900 rounded-lg mb-4">
<p className="text-sm text-gray-400 mb-1">Причина:</p>
<p className="text-white">{dispute.reason}</p>
</div>
{/* Voting section */}
{dispute.status === 'open' && (
<div className="mb-4">
<h4 className="text-sm font-medium text-gray-300 mb-3">Голосование</h4>
<div className="flex items-center gap-4 mb-3">
<div className="flex items-center gap-2">
<ThumbsUp className="w-5 h-5 text-green-500" />
<span className="text-green-400 font-medium">{dispute.votes_valid}</span>
<span className="text-gray-500 text-sm">валидно</span>
{dispute.comments.length > 0 && (
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto custom-scrollbar">
{dispute.comments.map((comment) => (
<div key={comment.id} className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
<div className="flex items-center justify-between mb-1">
<span className={`font-medium ${comment.user.id === user?.id ? 'text-neon-400' : 'text-white'}`}>
{comment.user.nickname}
{comment.user.id === user?.id && ' (Вы)'}
</span>
<span className="text-xs text-gray-500">
{formatDate(comment.created_at)}
</span>
</div>
<p className="text-gray-300 text-sm">{comment.text}</p>
</div>
<div className="flex items-center gap-2">
<ThumbsDown className="w-5 h-5 text-red-500" />
<span className="text-red-400 font-medium">{dispute.votes_invalid}</span>
<span className="text-gray-500 text-sm">невалидно</span>
</div>
</div>
<div className="flex gap-3">
<Button
variant={dispute.my_vote === true ? 'primary' : 'secondary'}
className="flex-1"
onClick={() => handleVote(true)}
isLoading={isVoting}
disabled={isVoting}
>
<ThumbsUp className="w-4 h-4 mr-2" />
Валидно
</Button>
<Button
variant={dispute.my_vote === false ? 'danger' : 'secondary'}
className="flex-1"
onClick={() => handleVote(false)}
isLoading={isVoting}
disabled={isVoting}
>
<ThumbsDown className="w-4 h-4 mr-2" />
Невалидно
</Button>
</div>
{dispute.my_vote !== null && (
<p className="text-sm text-gray-500 mt-2 text-center">
Вы проголосовали: {dispute.my_vote ? 'валидно' : 'невалидно'}
</p>
)}
))}
</div>
)}
{/* Comments section */}
<div>
<h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center gap-2">
<MessageSquare className="w-4 h-4" />
Обсуждение ({dispute.comments.length})
</h4>
{dispute.comments.length > 0 && (
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
{dispute.comments.map((comment) => (
<div key={comment.id} className="p-3 bg-gray-900 rounded-lg">
<div className="flex items-center justify-between mb-1">
<span className={`font-medium ${comment.user.id === user?.id ? 'text-primary-400' : 'text-white'}`}>
{comment.user.nickname}
{comment.user.id === user?.id && ' (Вы)'}
</span>
<span className="text-xs text-gray-500">
{formatDate(comment.created_at)}
</span>
</div>
<p className="text-gray-300 text-sm">{comment.text}</p>
</div>
))}
</div>
)}
{/* Add comment form */}
{dispute.status === 'open' && (
<div className="flex gap-2">
<input
type="text"
className="input flex-1"
placeholder="Написать комментарий..."
value={commentText}
onChange={(e) => setCommentText(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
handleAddComment()
}
}}
/>
<Button
onClick={handleAddComment}
isLoading={isAddingComment}
disabled={!commentText.trim()}
>
<Send className="w-4 h-4" />
</Button>
</div>
)}
</div>
</CardContent>
</Card>
{/* Add comment form */}
{dispute.status === 'open' && (
<div className="flex gap-2">
<input
type="text"
className="input flex-1"
placeholder="Написать комментарий..."
value={commentText}
onChange={(e) => setCommentText(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
handleAddComment()
}
}}
/>
<NeonButton
onClick={handleAddComment}
isLoading={isAddingComment}
disabled={!commentText.trim()}
icon={<Send className="w-4 h-4" />}
/>
</div>
)}
</div>
</GlassCard>
)}
</div>
)