Initialize calm game project

2026-06-27 08:37:40 +03:00
commit cc7aec8db5
34 changed files with 5329 additions and 0 deletions
@@ -0,0 +1,164 @@
+<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>