Add challenges promotion
This commit is contained in:
@@ -61,6 +61,27 @@ export function LobbyPage() {
|
||||
})
|
||||
const [isCreatingChallenge, setIsCreatingChallenge] = useState(false)
|
||||
|
||||
// Edit challenge
|
||||
const [editingChallengeId, setEditingChallengeId] = useState<number | null>(null)
|
||||
const [editChallenge, setEditChallenge] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
type: 'completion',
|
||||
difficulty: 'medium',
|
||||
points: 50,
|
||||
estimated_time: 30,
|
||||
proof_type: 'screenshot',
|
||||
proof_hint: '',
|
||||
})
|
||||
const [isUpdatingChallenge, setIsUpdatingChallenge] = useState(false)
|
||||
|
||||
// Proposed challenges
|
||||
const [proposedChallenges, setProposedChallenges] = useState<Challenge[]>([])
|
||||
const [myProposedChallenges, setMyProposedChallenges] = useState<Challenge[]>([])
|
||||
const [approvingChallengeId, setApprovingChallengeId] = useState<number | null>(null)
|
||||
const [isProposingChallenge, setIsProposingChallenge] = useState(false)
|
||||
const [editingProposedId, setEditingProposedId] = useState<number | null>(null)
|
||||
|
||||
// Start marathon
|
||||
const [isStarting, setIsStarting] = useState(false)
|
||||
|
||||
@@ -84,6 +105,23 @@ export function LobbyPage() {
|
||||
} catch {
|
||||
setPendingGames([])
|
||||
}
|
||||
// Load proposed challenges for organizers
|
||||
try {
|
||||
const proposed = await gamesApi.getProposedChallenges(parseInt(id))
|
||||
setProposedChallenges(proposed)
|
||||
} catch {
|
||||
setProposedChallenges([])
|
||||
}
|
||||
}
|
||||
|
||||
// Load my proposed challenges for all participants
|
||||
if (marathonData.my_participation) {
|
||||
try {
|
||||
const myProposed = await gamesApi.getMyProposedChallenges(parseInt(id))
|
||||
setMyProposedChallenges(myProposed)
|
||||
} catch {
|
||||
setMyProposedChallenges([])
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load data:', error)
|
||||
@@ -249,6 +287,206 @@ export function LobbyPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleStartEditChallenge = (challenge: Challenge) => {
|
||||
setEditingChallengeId(challenge.id)
|
||||
setEditChallenge({
|
||||
title: challenge.title,
|
||||
description: challenge.description,
|
||||
type: challenge.type,
|
||||
difficulty: challenge.difficulty,
|
||||
points: challenge.points,
|
||||
estimated_time: challenge.estimated_time || 30,
|
||||
proof_type: challenge.proof_type,
|
||||
proof_hint: challenge.proof_hint || '',
|
||||
})
|
||||
}
|
||||
|
||||
const handleUpdateChallenge = async (challengeId: number, gameId: number) => {
|
||||
if (!editChallenge.title.trim() || !editChallenge.description.trim()) {
|
||||
toast.warning('Заполните название и описание')
|
||||
return
|
||||
}
|
||||
|
||||
setIsUpdatingChallenge(true)
|
||||
try {
|
||||
await gamesApi.updateChallenge(challengeId, {
|
||||
title: editChallenge.title.trim(),
|
||||
description: editChallenge.description.trim(),
|
||||
type: editChallenge.type,
|
||||
difficulty: editChallenge.difficulty,
|
||||
points: editChallenge.points,
|
||||
estimated_time: editChallenge.estimated_time || undefined,
|
||||
proof_type: editChallenge.proof_type,
|
||||
proof_hint: editChallenge.proof_hint.trim() || undefined,
|
||||
})
|
||||
toast.success('Задание обновлено')
|
||||
setEditingChallengeId(null)
|
||||
const challenges = await gamesApi.getChallenges(gameId)
|
||||
setGameChallenges(prev => ({ ...prev, [gameId]: challenges }))
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось обновить задание')
|
||||
} finally {
|
||||
setIsUpdatingChallenge(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadProposedChallenges = async () => {
|
||||
if (!id) return
|
||||
try {
|
||||
const proposed = await gamesApi.getProposedChallenges(parseInt(id))
|
||||
setProposedChallenges(proposed)
|
||||
} catch (error) {
|
||||
console.error('Failed to load proposed challenges:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleApproveChallenge = async (challengeId: number) => {
|
||||
setApprovingChallengeId(challengeId)
|
||||
try {
|
||||
await gamesApi.approveChallenge(challengeId)
|
||||
toast.success('Задание одобрено')
|
||||
await loadProposedChallenges()
|
||||
// Reload challenges for the game
|
||||
const challenge = proposedChallenges.find(c => c.id === challengeId)
|
||||
if (challenge) {
|
||||
const challenges = await gamesApi.getChallenges(challenge.game.id)
|
||||
setGameChallenges(prev => ({ ...prev, [challenge.game.id]: challenges }))
|
||||
}
|
||||
await loadData()
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось одобрить задание')
|
||||
} finally {
|
||||
setApprovingChallengeId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRejectChallenge = async (challengeId: number) => {
|
||||
const confirmed = await confirm({
|
||||
title: 'Отклонить задание?',
|
||||
message: 'Задание будет удалено.',
|
||||
confirmText: 'Отклонить',
|
||||
cancelText: 'Отмена',
|
||||
variant: 'danger',
|
||||
})
|
||||
if (!confirmed) return
|
||||
|
||||
setApprovingChallengeId(challengeId)
|
||||
try {
|
||||
await gamesApi.rejectChallenge(challengeId)
|
||||
toast.success('Задание отклонено')
|
||||
await loadProposedChallenges()
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось отклонить задание')
|
||||
} finally {
|
||||
setApprovingChallengeId(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleStartEditProposed = (challenge: Challenge) => {
|
||||
setEditingProposedId(challenge.id)
|
||||
setEditChallenge({
|
||||
title: challenge.title,
|
||||
description: challenge.description,
|
||||
type: challenge.type,
|
||||
difficulty: challenge.difficulty,
|
||||
points: challenge.points,
|
||||
estimated_time: challenge.estimated_time || 30,
|
||||
proof_type: challenge.proof_type,
|
||||
proof_hint: challenge.proof_hint || '',
|
||||
})
|
||||
}
|
||||
|
||||
const handleUpdateProposedChallenge = async (challengeId: number) => {
|
||||
if (!editChallenge.title.trim() || !editChallenge.description.trim()) {
|
||||
toast.warning('Заполните название и описание')
|
||||
return
|
||||
}
|
||||
|
||||
setIsUpdatingChallenge(true)
|
||||
try {
|
||||
await gamesApi.updateChallenge(challengeId, {
|
||||
title: editChallenge.title.trim(),
|
||||
description: editChallenge.description.trim(),
|
||||
type: editChallenge.type,
|
||||
difficulty: editChallenge.difficulty,
|
||||
points: editChallenge.points,
|
||||
estimated_time: editChallenge.estimated_time || undefined,
|
||||
proof_type: editChallenge.proof_type,
|
||||
proof_hint: editChallenge.proof_hint.trim() || undefined,
|
||||
})
|
||||
toast.success('Задание обновлено')
|
||||
setEditingProposedId(null)
|
||||
await loadProposedChallenges()
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось обновить задание')
|
||||
} finally {
|
||||
setIsUpdatingChallenge(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleProposeChallenge = async (gameId: number) => {
|
||||
if (!newChallenge.title.trim() || !newChallenge.description.trim()) {
|
||||
toast.warning('Заполните название и описание')
|
||||
return
|
||||
}
|
||||
|
||||
setIsProposingChallenge(true)
|
||||
try {
|
||||
await gamesApi.proposeChallenge(gameId, {
|
||||
title: newChallenge.title.trim(),
|
||||
description: newChallenge.description.trim(),
|
||||
type: newChallenge.type,
|
||||
difficulty: newChallenge.difficulty,
|
||||
points: newChallenge.points,
|
||||
estimated_time: newChallenge.estimated_time || undefined,
|
||||
proof_type: newChallenge.proof_type,
|
||||
proof_hint: newChallenge.proof_hint.trim() || undefined,
|
||||
})
|
||||
toast.success('Задание предложено на модерацию')
|
||||
setNewChallenge({
|
||||
title: '',
|
||||
description: '',
|
||||
type: 'completion',
|
||||
difficulty: 'medium',
|
||||
points: 50,
|
||||
estimated_time: 30,
|
||||
proof_type: 'screenshot',
|
||||
proof_hint: '',
|
||||
})
|
||||
setAddingChallengeToGameId(null)
|
||||
await loadData()
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось предложить задание')
|
||||
} finally {
|
||||
setIsProposingChallenge(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteMyProposedChallenge = async (challengeId: number) => {
|
||||
const confirmed = await confirm({
|
||||
title: 'Удалить предложение?',
|
||||
message: 'Предложенное задание будет удалено.',
|
||||
confirmText: 'Удалить',
|
||||
cancelText: 'Отмена',
|
||||
variant: 'danger',
|
||||
})
|
||||
if (!confirmed) return
|
||||
|
||||
try {
|
||||
await gamesApi.deleteChallenge(challengeId)
|
||||
toast.success('Предложение удалено')
|
||||
await loadData()
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось удалить предложение')
|
||||
}
|
||||
}
|
||||
|
||||
const handleGenerateChallenges = async () => {
|
||||
if (!id) return
|
||||
|
||||
@@ -476,41 +714,156 @@ export function LobbyPage() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{gameChallenges[game.id]?.length > 0 ? (
|
||||
gameChallenges[game.id].map((challenge) => (
|
||||
{(() => {
|
||||
// For organizers: hide pending challenges (they see them in separate block)
|
||||
// For regular users: hide their own pending/rejected challenges (they see them in "My proposals")
|
||||
// but show their own approved challenges in both places
|
||||
const visibleChallenges = isOrganizer
|
||||
? gameChallenges[game.id]?.filter(c => c.status !== 'pending') || []
|
||||
: gameChallenges[game.id]?.filter(c =>
|
||||
!(c.proposed_by?.id === user?.id && c.status !== 'approved')
|
||||
) || []
|
||||
|
||||
return visibleChallenges.length > 0 ? (
|
||||
visibleChallenges.map((challenge) => (
|
||||
<div
|
||||
key={challenge.id}
|
||||
className="flex items-start justify-between gap-3 p-3 bg-dark-700/50 rounded-lg border border-dark-600"
|
||||
className="p-3 bg-dark-700/50 rounded-lg border border-dark-600"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<span className={`text-xs px-2 py-0.5 rounded-lg border ${
|
||||
challenge.difficulty === 'easy' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
|
||||
challenge.difficulty === 'medium' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
|
||||
'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}`}>
|
||||
{challenge.difficulty === 'easy' ? 'Легко' :
|
||||
challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
|
||||
</span>
|
||||
<span className="text-xs text-neon-400 font-semibold">
|
||||
+{challenge.points}
|
||||
</span>
|
||||
{challenge.is_generated && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Sparkles className="w-3 h-3" /> ИИ
|
||||
</span>
|
||||
{editingChallengeId === challenge.id ? (
|
||||
// Edit form
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
placeholder="Название задания"
|
||||
value={editChallenge.title}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, title: e.target.value }))}
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Описание"
|
||||
value={editChallenge.description}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="input w-full resize-none"
|
||||
rows={2}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Тип</label>
|
||||
<select
|
||||
value={editChallenge.type}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, type: e.target.value }))}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="completion">Прохождение</option>
|
||||
<option value="no_death">Без смертей</option>
|
||||
<option value="speedrun">Спидран</option>
|
||||
<option value="collection">Коллекция</option>
|
||||
<option value="achievement">Достижение</option>
|
||||
<option value="challenge_run">Челлендж-ран</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Сложность</label>
|
||||
<select
|
||||
value={editChallenge.difficulty}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, difficulty: e.target.value }))}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="easy">Легко</option>
|
||||
<option value="medium">Средне</option>
|
||||
<option value="hard">Сложно</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Очки</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={editChallenge.points}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, points: parseInt(e.target.value) || 0 }))}
|
||||
min={1}
|
||||
max={500}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Тип пруфа</label>
|
||||
<select
|
||||
value={editChallenge.proof_type}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, proof_type: e.target.value }))}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="screenshot">Скриншот</option>
|
||||
<option value="video">Видео</option>
|
||||
<option value="steam">Steam</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<NeonButton
|
||||
size="sm"
|
||||
onClick={() => handleUpdateChallenge(challenge.id, game.id)}
|
||||
isLoading={isUpdatingChallenge}
|
||||
icon={<Check className="w-4 h-4" />}
|
||||
>
|
||||
Сохранить
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setEditingChallengeId(null)}
|
||||
>
|
||||
Отмена
|
||||
</NeonButton>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Display challenge
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
{challenge.status === 'pending' && getStatusBadge('pending')}
|
||||
<span className={`text-xs px-2 py-0.5 rounded-lg border ${
|
||||
challenge.difficulty === 'easy' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
|
||||
challenge.difficulty === 'medium' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
|
||||
'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}`}>
|
||||
{challenge.difficulty === 'easy' ? 'Легко' :
|
||||
challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
|
||||
</span>
|
||||
<span className="text-xs text-neon-400 font-semibold">
|
||||
+{challenge.points}
|
||||
</span>
|
||||
{challenge.is_generated && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<Sparkles className="w-3 h-3" /> ИИ
|
||||
</span>
|
||||
)}
|
||||
{challenge.proposed_by && (
|
||||
<span className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<User className="w-3 h-3" /> {challenge.proposed_by.nickname}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h5 className="text-sm font-medium text-white">{challenge.title}</h5>
|
||||
<p className="text-xs text-gray-400 mt-1">{challenge.description}</p>
|
||||
</div>
|
||||
{isOrganizer && (
|
||||
<div className="flex gap-1 shrink-0">
|
||||
<button
|
||||
onClick={() => handleStartEditChallenge(challenge)}
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
|
||||
>
|
||||
<Edit2 className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteChallenge(challenge.id, game.id)}
|
||||
className="p-1.5 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h5 className="text-sm font-medium text-white">{challenge.title}</h5>
|
||||
<p className="text-xs text-gray-400 mt-1">{challenge.description}</p>
|
||||
</div>
|
||||
{isOrganizer && (
|
||||
<button
|
||||
onClick={() => handleDeleteChallenge(challenge.id, game.id)}
|
||||
className="p-1.5 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors shrink-0"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
@@ -518,15 +871,16 @@ export function LobbyPage() {
|
||||
<p className="text-center text-gray-500 py-4 text-sm">
|
||||
Нет заданий
|
||||
</p>
|
||||
)}
|
||||
)
|
||||
})()}
|
||||
|
||||
{/* Add challenge form */}
|
||||
{isOrganizer && game.status === 'approved' && (
|
||||
{/* Add/Propose challenge form */}
|
||||
{game.status === 'approved' && (
|
||||
addingChallengeToGameId === game.id ? (
|
||||
<div className="mt-4 p-4 glass rounded-xl space-y-3 border border-neon-500/20">
|
||||
<h4 className="font-semibold text-white text-sm flex items-center gap-2">
|
||||
<Plus className="w-4 h-4 text-neon-400" />
|
||||
Новое задание
|
||||
{isOrganizer ? 'Новое задание' : 'Предложить задание'}
|
||||
</h4>
|
||||
<Input
|
||||
placeholder="Название задания"
|
||||
@@ -613,15 +967,27 @@ export function LobbyPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<NeonButton
|
||||
size="sm"
|
||||
onClick={() => handleCreateChallenge(game.id)}
|
||||
isLoading={isCreatingChallenge}
|
||||
disabled={!newChallenge.title || !newChallenge.description}
|
||||
icon={<Plus className="w-4 h-4" />}
|
||||
>
|
||||
Добавить
|
||||
</NeonButton>
|
||||
{isOrganizer ? (
|
||||
<NeonButton
|
||||
size="sm"
|
||||
onClick={() => handleCreateChallenge(game.id)}
|
||||
isLoading={isCreatingChallenge}
|
||||
disabled={!newChallenge.title || !newChallenge.description}
|
||||
icon={<Plus className="w-4 h-4" />}
|
||||
>
|
||||
Добавить
|
||||
</NeonButton>
|
||||
) : (
|
||||
<NeonButton
|
||||
size="sm"
|
||||
onClick={() => handleProposeChallenge(game.id)}
|
||||
isLoading={isProposingChallenge}
|
||||
disabled={!newChallenge.title || !newChallenge.description}
|
||||
icon={<Plus className="w-4 h-4" />}
|
||||
>
|
||||
Предложить
|
||||
</NeonButton>
|
||||
)}
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@@ -630,6 +996,11 @@ export function LobbyPage() {
|
||||
Отмена
|
||||
</NeonButton>
|
||||
</div>
|
||||
{!isOrganizer && (
|
||||
<p className="text-xs text-gray-500">
|
||||
Задание будет отправлено на модерацию организаторам
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
@@ -640,7 +1011,7 @@ export function LobbyPage() {
|
||||
className="w-full mt-2 p-3 rounded-lg border-2 border-dashed border-dark-600 text-gray-400 hover:text-neon-400 hover:border-neon-500/30 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Добавить задание вручную
|
||||
{isOrganizer ? 'Добавить задание вручную' : 'Предложить задание'}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
@@ -721,6 +1092,233 @@ export function LobbyPage() {
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Proposed challenges for moderation */}
|
||||
{isOrganizer && proposedChallenges.length > 0 && (
|
||||
<GlassCard className="mb-8 border-accent-500/30">
|
||||
<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">
|
||||
<Sparkles className="w-5 h-5 text-accent-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-accent-400">Предложенные задания</h3>
|
||||
<p className="text-sm text-gray-400">{proposedChallenges.length} заданий ожидают</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{proposedChallenges.map((challenge) => (
|
||||
<div
|
||||
key={challenge.id}
|
||||
className="p-4 bg-dark-700/50 rounded-xl border border-dark-600"
|
||||
>
|
||||
{editingProposedId === challenge.id ? (
|
||||
// Edit form
|
||||
<div className="space-y-3">
|
||||
<span className="text-xs px-2 py-0.5 rounded-lg bg-dark-600 text-gray-400">
|
||||
{challenge.game.title}
|
||||
</span>
|
||||
<Input
|
||||
placeholder="Название задания"
|
||||
value={editChallenge.title}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, title: e.target.value }))}
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Описание"
|
||||
value={editChallenge.description}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="input w-full resize-none"
|
||||
rows={2}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Тип</label>
|
||||
<select
|
||||
value={editChallenge.type}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, type: e.target.value }))}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="completion">Прохождение</option>
|
||||
<option value="no_death">Без смертей</option>
|
||||
<option value="speedrun">Спидран</option>
|
||||
<option value="collection">Коллекция</option>
|
||||
<option value="achievement">Достижение</option>
|
||||
<option value="challenge_run">Челлендж-ран</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Сложность</label>
|
||||
<select
|
||||
value={editChallenge.difficulty}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, difficulty: e.target.value }))}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="easy">Легко</option>
|
||||
<option value="medium">Средне</option>
|
||||
<option value="hard">Сложно</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Очки</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={editChallenge.points}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, points: parseInt(e.target.value) || 0 }))}
|
||||
min={1}
|
||||
max={500}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Тип пруфа</label>
|
||||
<select
|
||||
value={editChallenge.proof_type}
|
||||
onChange={(e) => setEditChallenge(prev => ({ ...prev, proof_type: e.target.value }))}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="screenshot">Скриншот</option>
|
||||
<option value="video">Видео</option>
|
||||
<option value="steam">Steam</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<NeonButton
|
||||
size="sm"
|
||||
onClick={() => handleUpdateProposedChallenge(challenge.id)}
|
||||
isLoading={isUpdatingChallenge}
|
||||
icon={<Check className="w-4 h-4" />}
|
||||
>
|
||||
Сохранить
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setEditingProposedId(null)}
|
||||
>
|
||||
Отмена
|
||||
</NeonButton>
|
||||
</div>
|
||||
{challenge.proposed_by && (
|
||||
<p className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<User className="w-3 h-3" /> Предложил: {challenge.proposed_by.nickname}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// Display
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
||||
<span className="text-xs px-2 py-0.5 rounded-lg bg-dark-600 text-gray-400">
|
||||
{challenge.game.title}
|
||||
</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-lg border ${
|
||||
challenge.difficulty === 'easy' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
|
||||
challenge.difficulty === 'medium' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
|
||||
'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}`}>
|
||||
{challenge.difficulty === 'easy' ? 'Легко' :
|
||||
challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
|
||||
</span>
|
||||
<span className="text-xs text-neon-400 font-semibold">
|
||||
+{challenge.points}
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="font-medium text-white mb-1">{challenge.title}</h4>
|
||||
<p className="text-sm text-gray-400 mb-2">{challenge.description}</p>
|
||||
{challenge.proposed_by && (
|
||||
<p className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<User className="w-3 h-3" /> Предложил: {challenge.proposed_by.nickname}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<button
|
||||
onClick={() => handleStartEditProposed(challenge)}
|
||||
className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
|
||||
>
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleApproveChallenge(challenge.id)}
|
||||
disabled={approvingChallengeId === challenge.id}
|
||||
className="p-2 rounded-lg text-green-400 hover:bg-green-500/10 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{approvingChallengeId === challenge.id ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRejectChallenge(challenge.id)}
|
||||
disabled={approvingChallengeId === challenge.id}
|
||||
className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* My proposed challenges (for non-organizers) */}
|
||||
{!isOrganizer && myProposedChallenges.length > 0 && (
|
||||
<GlassCard className="mb-8 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">
|
||||
<Sparkles 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">{myProposedChallenges.length} заданий</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{myProposedChallenges.map((challenge) => (
|
||||
<div
|
||||
key={challenge.id}
|
||||
className="flex items-start justify-between gap-3 p-4 bg-dark-700/50 rounded-xl border border-dark-600"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
||||
<span className="text-xs px-2 py-0.5 rounded-lg bg-dark-600 text-gray-400">
|
||||
{challenge.game.title}
|
||||
</span>
|
||||
{getStatusBadge(challenge.status)}
|
||||
<span className={`text-xs px-2 py-0.5 rounded-lg border ${
|
||||
challenge.difficulty === 'easy' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
|
||||
challenge.difficulty === 'medium' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
|
||||
'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}`}>
|
||||
{challenge.difficulty === 'easy' ? 'Легко' :
|
||||
challenge.difficulty === 'medium' ? 'Средне' : 'Сложно'}
|
||||
</span>
|
||||
<span className="text-xs text-neon-400 font-semibold">
|
||||
+{challenge.points}
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="font-medium text-white mb-1">{challenge.title}</h4>
|
||||
<p className="text-sm text-gray-400">{challenge.description}</p>
|
||||
</div>
|
||||
{challenge.status === 'pending' && (
|
||||
<button
|
||||
onClick={() => handleDeleteMyProposedChallenge(challenge.id)}
|
||||
className="p-2 rounded-lg text-red-400 hover:bg-red-500/10 transition-colors shrink-0"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</GlassCard>
|
||||
)}
|
||||
|
||||
{/* Generate challenges */}
|
||||
{isOrganizer && approvedGames.length > 0 && !previewChallenges && (
|
||||
<GlassCard className="mb-8">
|
||||
|
||||
Reference in New Issue
Block a user