my-calm-game/src/lib/components/QuestionModal.svelte

<script lang="ts">
	import type { Category, Question } from '$lib/types';

	interface Props {
		category: Category;
		question: Question;
		onAward: (points: number) => void;
		onReject: () => void;
		onClose: () => void;
	}

	let { category, question, onAward, onReject, onClose }: Props = $props();

	let answerShown = $state(false);
	let hintShown = $state(false);

	// При смене вопроса — сбрасываем локальное состояние показа.
	$effect(() => {
		question.id;
		answerShown = false;
		hintShown = false;
	});

	// Творческие вопросы — мягкие формулировки.
	const isCreative = $derived(question.type === 'creative');

	// Управление с клавиатуры: Esc — вернуться (если ответ скрыт — закрыть модал,
	// иначе просто убрать фокус с кнопки). Удобно ведущему.
	function onKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape' && !answerShown) {
			onClose();
		}
	}
</script>

<svelte:window onkeydown={onKeydown} />

<!-- Затемнённый фон -->
<div
	class="fixed inset-0 z-50 flex items-center justify-center bg-night-950/80 p-4 backdrop-blur-md animate-fade-in"
	role="dialog"
	aria-modal="true"
	aria-label="Вопрос викторины"
>
	<div
		class="relative w-full max-w-3xl overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-night-700/95 to-night-900/95 shadow-2xl shadow-night-950/60 animate-pop-in"
	>
		<!-- верхняя подсветка -->
		<div
			class="pointer-events-none absolute -top-24 left-1/2 h-48 w-[120%] -translate-x-1/2 rounded-full bg-gradient-to-r from-ember-400/20 via-gold-400/20 to-plum-400/20 blur-3xl"
		></div>

		<div class="relative p-6 sm:p-10">
			<!-- Категория + стоимость -->
			<div class="mb-6 flex items-center justify-between gap-4">
				<span
					class="inline-flex items-center rounded-full bg-plum-400/15 px-4 py-1.5 text-sm font-semibold text-plum-300"
				>
					{category.title}
				</span>
				<span
					class="inline-flex items-center rounded-full bg-gold-400/15 px-4 py-1.5 text-lg font-extrabold tabular-nums text-gold-300"
					style="text-shadow: 0 0 14px rgba(251, 191, 36, 0.4)"
				>
					{question.points.toLocaleString('ru-RU')}
					{#if isCreative}
						<span class="ml-2 text-xs font-medium text-plum-300">творческий</span>
					{/if}
				</span>
			</div>

			<!-- Сам вопрос -->
			<p
				class="mb-2 text-center text-2xl font-bold leading-snug text-white sm:text-4xl"
				style="text-shadow: 0 0 20px rgba(255,255,255,0.08)"
			>
				{question.question}
			</p>

			<!-- Подсказка (необязательная) -->
			{#if question.optionalHint}
				<div class="mt-4 flex justify-center">
					{#if !hintShown}
						<button
							type="button"
							onclick={() => (hintShown = true)}
							class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-2 text-sm text-night-50/70 transition-colors hover:bg-white/10"
						>
							💡 Показать подсказку
						</button>
					{:else}
						<p class="animate-fade-in max-w-lg rounded-2xl bg-white/5 px-4 py-3 text-center text-sm italic text-night-50/70">
							💡 {question.optionalHint}
						</p>
					{/if}
				</div>
			{/if}

			<!-- Ответ -->
			{#if answerShown}
				<div class="mt-8 animate-reveal-answer">
					<div
						class="rounded-2xl border border-mint-400/30 bg-mint-400/10 p-5 text-center"
					>
						<span class="mb-1 block text-xs font-semibold uppercase tracking-widest text-mint-300/80">
							Ответ
						</span>
						<p class="text-xl font-bold text-mint-300 sm:text-2xl">{question.answer}</p>
					</div>

					<!-- Действия ведущего -->
					<div class="mt-6 flex flex-wrap items-center justify-center gap-3">
						<button
							type="button"
							onclick={() => onAward(question.points)}
							class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-br from-mint-400 to-mint-300 px-6 py-3.5 text-base font-bold text-night-900 shadow-lg shadow-mint-400/30 transition-all duration-200 hover:scale-105 hover:shadow-mint-400/50 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-mint-400/50 active:scale-95"
						>
							✓ {isCreative ? 'Засчитать творческий ответ' : 'Засчитать'}
							<span class="tabular-nums">+{question.points.toLocaleString('ru-RU')}</span>
						</button>

						<button
							type="button"
							onclick={onReject}
							class="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/5 px-6 py-3.5 text-base font-semibold text-night-50/70 transition-all duration-200 hover:scale-105 hover:border-white/30 hover:bg-white/10 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-white/20 active:scale-95"
						>
							✕ Не засчитывать
						</button>
					</div>

					<div class="mt-4 text-center">
						<button
							type="button"
							onclick={onClose}
							class="text-sm text-night-50/50 underline-offset-4 transition-colors hover:text-night-50/80 hover:underline"
						>
							Вернуться к табло
						</button>
					</div>
				</div>
			{:else}
				<div class="mt-8 flex justify-center">
					<button
						type="button"
						onclick={() => (answerShown = true)}
						class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-br from-gold-400 to-ember-500 px-8 py-4 text-lg font-bold text-night-900 shadow-lg shadow-gold-400/30 transition-all duration-200 hover:scale-105 hover:shadow-gold-400/50 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-gold-400/50 active:scale-95"
					>
						👁️ Показать ответ
					</button>
				</div>

				<div class="mt-4 text-center">
					<button
						type="button"
						onclick={onClose}
						class="text-sm text-night-50/50 underline-offset-4 transition-colors hover:text-night-50/80 hover:underline"
					>
						← Вернуться к табло
					</button>
				</div>
			{/if}
		</div>
	</div>
</div>