xmatic/my-calm-game
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add auction question mechanic

Browse Source
This commit is contained in:
mayatnikov
2026-06-27 13:45:24 +03:00
parent 85168b8d1e
commit 272a9834ac
5 changed files with 674 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/AuctionModal.svelte
+301
View File
@@ -0,0 +1,301 @@
<script lang="ts">
import { untrack } from 'svelte';
import type { Category, Question } from '$lib/types';
interface Props {
/** Номинал оригинальной карточки табло, по которой запустили аукцион. */
originalNominal: number;
/** Название набора, откуда пришёл случайный вопрос аукциона. */
sourceSetTitle: string;
/** Категория случайного вопроса аукциона. */
category: Category;
/** Случайный вопрос аукциона (не с табло). */
question: Question;
/** Текущий счёт команды. */
score: number;
/** Текущая ставка — эффективная стоимость аукциона. */
wager: number;
/** Показывал ли ведущий подсказку аукциона. */
hintUsed: boolean;
onSetWager: (wager: number) => void;
onMarkHintUsed: () => void;
onAward: (points: number) => void;
onReject: () => void;
onCancel: () => void;
}
let {
originalNominal,
sourceSetTitle,
category,
question,
score,
wager,
hintUsed,
onSetWager,
onMarkHintUsed,
onAward,
onReject,
onCancel
}: Props = $props();
let answerShown = $state(false);
// При смене вопроса аукциона — сбрасываем локальное состояние показа ответа.
$effect(() => {
question.id;
answerShown = false;
});
// Ставку можно редактировать только при ненулевом счёте.
const wagerEditable = $derived(score > 0);
// Локальное зеркало поля ставки: даём свободно печатать, не сражаясь с
// пользователем, и синхронизируемся со значением из состояния, когда оно
// поменялось извне (кнопка «Ва-банк» или восстановление после перезагрузки).
let wagerInput = $state(untrack(() => String(wager)));
let lastWager = untrack(() => wager);
$effect(() => {
if (wager !== lastWager) {
lastWager = wager;
wagerInput = String(wager);
}
});
function onWagerInput(e: Event) {
const target = e.currentTarget as HTMLInputElement;
wagerInput = target.value;
const n = parseInt(target.value, 10);
// Пустое/нечисловое поле коммитим в состояние только когда оно валидно —
// даём ведущему спокойно стереть и перепечатать ставку.
if (Number.isFinite(n)) {
onSetWager(n);
}
}
function vaBank() {
onSetWager(score);
}
// Половина ставки — для ответа по подсказке или частично правильного ответа.
const halfValue = $derived(Math.round(wager / 2));
// Сколько очков даёт основное «Засчитать»: с подсказкой — половину, иначе ставку.
const awardPoints = $derived(hintUsed ? halfValue : wager);
// Управление с клавиатуры: Esc — отменить аукцион (если ответ скрыт).
function onKeydown(e: KeyboardEvent) {
if (e.key === 'Escape' && !answerShown) {
onCancel();
}
}
</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-labelledby="auction-modal-title"
aria-describedby="auction-modal-value"
>
<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/25 via-gold-400/25 to-ember-400/25 blur-3xl"
></div>
<div class="relative p-6 sm:p-10">
<!-- Аукцион + источник + категория -->
<div class="mb-5 flex flex-wrap items-center justify-between gap-3">
<div class="flex min-w-0 items-center gap-2">
<span
class="inline-flex items-center rounded-full bg-ember-400/15 px-4 py-1.5 text-sm font-semibold text-ember-300"
>
🔨 Аукцион
</span>
<span class="truncate text-xs text-night-50/50">из «{sourceSetTitle}»</span>
</div>
<span
id="auction-modal-value"
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>
</div>
<!-- Сам вопрос -->
<p
id="auction-modal-title"
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 !hintUsed}
<button
type="button"
onclick={onMarkHintUsed}
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}
<!-- Управление ставкой -->
<div class="mt-6 rounded-2xl border border-white/10 bg-white/5 p-4">
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="text-sm text-night-50/70">
<div class="text-[10px] uppercase tracking-widest text-night-50/50">
Карточка табло
</div>
<div class="font-bold tabular-nums text-gold-300">
{originalNominal.toLocaleString('ru-RU')} очков
</div>
</div>
<div class="flex items-center gap-3">
{#if wagerEditable}
<label for="auction-wager" class="text-[10px] uppercase tracking-widest text-night-50/50">
Ставка
</label>
<input
id="auction-wager"
type="number"
inputmode="numeric"
min="1"
max={score}
value={wagerInput}
oninput={onWagerInput}
aria-label="Ставка аукциона"
class="w-28 rounded-xl border border-white/15 bg-night-900/60 px-3 py-2 text-center text-lg font-bold tabular-nums text-white focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-gold-400/40"
/>
<button
type="button"
onclick={vaBank}
class="inline-flex items-center gap-1 rounded-xl border border-ember-400/50 bg-ember-400/15 px-4 py-2 text-sm font-bold text-ember-300 transition-all duration-200 hover:scale-105 hover:bg-ember-400/25 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ember-400/40 active:scale-95"
>
🔥 Ва-банк<span class="tabular-nums"> {score.toLocaleString('ru-RU')}</span>
</button>
{:else}
<div class="text-sm text-night-50/70">
<div class="text-[10px] uppercase tracking-widest text-night-50/50">
Ставка
</div>
<div class="font-bold tabular-nums text-gold-300">
{wager.toLocaleString('ru-RU')} очков
</div>
</div>
{/if}
</div>
</div>
{#if !wagerEditable}
<p class="mt-2 text-center text-xs text-night-50/50">
Счёт 0 — ставка равна номиналу карточки и не редактируется.
</p>
{/if}
</div>
<!-- Ответ -->
{#if answerShown}
<div class="mt-6 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(awardPoints)}
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"
>
✓ Засчитать
<span class="tabular-nums">+{awardPoints.toLocaleString('ru-RU')}</span>
</button>
<!-- Частично правильный ответ: половина ставки. Доступно только если
подсказка НЕ показывалась (иначе основная кнопка уже даёт половину). -->
{#if !hintUsed}
<button
type="button"
onclick={() => onAward(halfValue)}
class="inline-flex items-center gap-2 rounded-2xl border border-mint-400/40 bg-mint-400/10 px-5 py-3.5 text-base font-semibold text-mint-300 transition-all duration-200 hover:scale-105 hover:border-mint-400/60 hover:bg-mint-400/20 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-mint-400/30 active:scale-95"
>
≈ Засчитать частично
<span class="tabular-nums">+{halfValue.toLocaleString('ru-RU')}</span>
</button>
{/if}
<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"
>
✕ Не засчитывать
{#if wagerEditable}
<span class="tabular-nums text-night-50/50">−{wager.toLocaleString('ru-RU')}</span>
{/if}
</button>
</div>
{#if hintUsed}
<p class="mt-3 text-center text-xs text-night-50/50">
💡 Подсказка показана — ответ засчитывается за половину ставки.
</p>
{:else if !wagerEditable}
<p class="mt-3 text-center text-xs text-night-50/50">
Счёт 0 — неправильный ответ не меняет очки.
</p>
{/if}
<div class="mt-4 text-center">
<button
type="button"
onclick={onCancel}
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-6 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={onCancel}
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>