07OX quiz panel

<main class="stage">
<div class="ox is-demo" id="ox">
  <header class="ox__bar">
    <p class="ox__title">OX quiz</p>
    <p class="ox__score"><span class="ox__scoreLabel">Score</span> <b class="ox__scoreNum" id="oxScore">0</b><span class="ox__scoreMax">/5</span></p>
  </header>

  <div class="ox__card">
    <p class="ox__q" id="oxQ">CSS transform forces a layout recalculation</p>
    <p class="ox__q ox__q--ghost" aria-hidden="true">prefers-reduced-motion is a request for less motion</p>
  </div>

  <div class="ox__btns">
    <button class="ox__btn ox__btn--o" id="oxO" type="button" aria-pressed="false" aria-label="True">O</button>
    <button class="ox__btn ox__btn--x" id="oxX" type="button" aria-pressed="false" aria-label="False">X</button>
  </div>

  <ol class="ox__dots" id="oxDots">
    <li class="ox__dot is-now"></li>
    <li class="ox__dot"></li>
    <li class="ox__dot"></li>
    <li class="ox__dot"></li>
    <li class="ox__dot"></li>
  </ol>

  <p class="ox__msg" id="oxMsg" role="status">The O and X keys work too</p>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// OX 퀴즈 패널 — 문장 카드 하나, 커다란 O·X 버튼 둘, 진행 점 다섯.
// 진행 점의 번호는 counter-increment 가 세고 JS 는 색만 바꾼다.
// 정답 면은 $subject-blue-deep + 크림 글자(5.98:1), 오답 면은 $error + 크림 글자(5.13:1) —
// 주황 무대 위 글자는 전부 $subject-ink(5.50:1) 다.
// 미리보기(.is-demo)는 실제 버튼 위에 덧씌운 연출이 아니라 같은 요소의 애니메이션이다:
// 색 교체는 steps(1, end) 컷, 크기 팝은 이징 — 둘을 한 요소에 두 애니메이션으로 나눠 건다.

$duration: $dur-loop;
$easing: $ease-pop;
$color: $subject-blue-deep;

@include stage($stage-orange);

.ox {
  display: flex; flex-direction: column; gap: $sp-2;
  width: 100%; max-width: 400px; height: 100%; max-height: 100%;
}

.ox__bar { display: flex; align-items: baseline; justify-content: space-between; gap: $sp-2; }
.ox__title { margin: 0; font-weight: 800; font-size: clamp(11px, 2.8vw, 14px); color: $subject-ink; }
.ox__score { margin: 0; font-weight: 700; font-size: clamp(10px, 2.6vw, 13px); color: $subject-ink; }
.ox__scoreLabel { font-weight: 700; }
.ox__scoreNum { font-weight: 800; font-size: clamp(12px, 3.2vw, 16px); color: $subject-ink; }
.ox__scoreMax { font-weight: 700; }

// 문장 카드 — 두 문장이 같은 격자 칸에 겹쳐 있고 미리보기가 컷으로 갈아 끼운다
.ox__card {
  display: grid; place-items: center;
  min-height: clamp(44px, 16vw, 84px);
  padding: clamp(8px, 2vw, 16px);
  border-radius: $r-card;
  background-color: $subject-cream;
}
.ox__q {
  grid-area: 1 / 1; margin: 0; text-align: center;
  font-weight: 700; font-size: clamp(11px, 3vw, 15px); line-height: 1.4;
  color: $subject-ink;
}
.ox__q--ghost { opacity: 0; }

.ox__btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: $sp-3; }
.ox__btn {
  height: clamp(40px, 13vw, 64px);
  padding: 0; border: 0; border-radius: $r-card;
  background-color: $subject-cream; color: $subject-ink;
  font-weight: 800; font-size: clamp(20px, 7vw, 34px); line-height: 1;
  cursor: pointer;
  transition: background-color $dur-quick $ease-out, color $dur-quick $ease-out, transform $dur-quick $easing;
}
.ox__btn:focus-visible { outline: 2px solid $subject-ink; outline-offset: 2px; }
.ox__btn.is-hit { background-color: $color; color: $subject-cream; }
.ox__btn.is-miss { background-color: $error; color: $subject-cream; }
.ox__btn.is-hint { box-shadow: inset 0 0 0 4px $color; }

.ox__dots {
  display: flex; justify-content: center; gap: $sp-2;
  margin: 0; padding: 0; list-style: none;
  counter-reset: oxStep;
}
.ox__dot {
  counter-increment: oxStep;
  display: grid; place-items: center;
  width: clamp(16px, 5vw, 22px); aspect-ratio: 1;
  border-radius: 50%;
  background-color: $subject-cream; color: $subject-ink;
  font-weight: 700; font-size: clamp(8px, 2.2vw, 10px); line-height: 1;
}
.ox__dot::before { content: counter(oxStep); }
.ox__dot.is-now { outline: 2px solid $subject-ink; outline-offset: 2px; }
.ox__dot.is-hit { background-color: $color; color: $subject-cream; }
.ox__dot.is-miss { background-color: $error; color: $subject-cream; }

.ox__msg {
  margin: 0; min-height: clamp(12px, 4vw, 16px); text-align: center;
  font-weight: 700; font-size: clamp(9px, 2.4vw, 12px); line-height: 1.3;
  color: $subject-ink;
}

// ── 미리보기 루프 ───────────────────────────────────────────
// 0~46% 첫 문장에 X(정답) · 46~88% 둘째 문장에 X(오답, O 쪽에 힌트 테두리)
.ox.is-demo .ox__btn {
  animation-duration: $duration, $duration;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: backwards, backwards;
}
.ox.is-demo .ox__btn--x {
  animation-name: oxPopX, oxTintX;
  animation-timing-function: $easing, steps(1, end);
}
.ox.is-demo .ox__btn--o {
  animation-name: oxPopO, oxTintO;
  animation-timing-function: $easing, steps(1, end);
}
.ox.is-demo .ox__q {
  animation-name: oxCardA; animation-duration: $duration;
  animation-timing-function: steps(1, end); animation-iteration-count: infinite;
}
.ox.is-demo .ox__q--ghost { animation-name: oxCardB; }
.ox.is-demo .ox__dot:nth-child(1) {
  animation-name: oxDot1; animation-duration: $duration;
  animation-timing-function: steps(1, end); animation-iteration-count: infinite;
}
.ox.is-demo .ox__dot:nth-child(2) {
  animation-name: oxDot2; animation-duration: $duration;
  animation-timing-function: steps(1, end); animation-iteration-count: infinite;
}

@keyframes oxPopX {
  0%, 8%   { transform: scale(1); }
  14%      { transform: scale(1.07); }
  30%      { transform: scale(1.07); }
  38%, 58% { transform: scale(1); }
  64%      { transform: scale(1.07); }
  80%      { transform: scale(1.07); }
  88%, 100% { transform: scale(1); }
}
@keyframes oxTintX {
  0%   { background-color: $subject-cream; color: $subject-ink; }
  12%  { background-color: $color; color: $subject-cream; }
  36%  { background-color: $subject-cream; color: $subject-ink; }
  62%  { background-color: $error; color: $subject-cream; }
  86%  { background-color: $subject-cream; color: $subject-ink; }
  100% { background-color: $subject-cream; color: $subject-ink; }
}
@keyframes oxPopO {
  0%, 60%  { transform: scale(1); }
  68%      { transform: scale(1.04); }
  82%      { transform: scale(1.04); }
  88%, 100% { transform: scale(1); }
}
@keyframes oxTintO {
  0%   { box-shadow: inset 0 0 0 0 $color; }
  62%  { box-shadow: inset 0 0 0 4px $color; }
  86%  { box-shadow: inset 0 0 0 0 $color; }
  100% { box-shadow: inset 0 0 0 0 $color; }
}
@keyframes oxCardA {
  0%   { opacity: 1; }
  46%  { opacity: 0; }
  88%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes oxCardB {
  0%   { opacity: 0; }
  46%  { opacity: 1; }
  88%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes oxDot1 {
  0%   { background-color: $subject-cream; color: $subject-ink; }
  12%  { background-color: $color; color: $subject-cream; }
  86%  { background-color: $color; color: $subject-cream; }
  88%  { background-color: $subject-cream; color: $subject-ink; }
  100% { background-color: $subject-cream; color: $subject-ink; }
}
@keyframes oxDot2 {
  0%   { background-color: $subject-cream; color: $subject-ink; }
  62%  { background-color: $error; color: $subject-cream; }
  86%  { background-color: $error; color: $subject-cream; }
  88%  { background-color: $subject-cream; color: $subject-ink; }
  100% { background-color: $subject-cream; color: $subject-ink; }
}

@media (max-width: 340px) {
  .ox { gap: $sp-1; }
  .ox__btns { gap: $sp-2; }
  .ox__dots { gap: $sp-1; }
  .ox__card { padding: $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  .ox__btn { transition: none !important; }
  .ox.is-demo .ox__btn,
  .ox.is-demo .ox__q,
  .ox.is-demo .ox__dot { animation: none !important; }
  .ox.is-demo .ox__q--ghost { opacity: 0 !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  height: 100%;
  max-height: 100%;
}

.ox__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ox__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(11px, 2.8vw, 14px);
  color: #17141a;
}

.ox__score {
  margin: 0;
  font-weight: 700;
  font-size: clamp(10px, 2.6vw, 13px);
  color: #17141a;
}

.ox__scoreLabel {
  font-weight: 700;
}

.ox__scoreNum {
  font-weight: 800;
  font-size: clamp(12px, 3.2vw, 16px);
  color: #17141a;
}

.ox__scoreMax {
  font-weight: 700;
}

.ox__card {
  display: grid;
  place-items: center;
  min-height: clamp(44px, 16vw, 84px);
  padding: clamp(8px, 2vw, 16px);
  border-radius: 16px;
  background-color: #fff7e6;
}

.ox__q {
  grid-area: 1/1;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: clamp(11px, 3vw, 15px);
  line-height: 1.4;
  color: #17141a;
}

.ox__q--ghost {
  opacity: 0;
}

.ox__btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ox__btn {
  height: clamp(40px, 13vw, 64px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background-color: #fff7e6;
  color: #17141a;
  font-weight: 800;
  font-size: clamp(20px, 7vw, 34px);
  line-height: 1;
  cursor: pointer;
  transition: background-color 220ms ease-out, color 220ms ease-out, transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.ox__btn:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.ox__btn.is-hit {
  background-color: #0a4fe8;
  color: #fff7e6;
}

.ox__btn.is-miss {
  background-color: #c2361a;
  color: #fff7e6;
}

.ox__btn.is-hint {
  box-shadow: inset 0 0 0 4px #0a4fe8;
}

.ox__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: oxStep;
}

.ox__dot {
  counter-increment: oxStep;
  display: grid;
  place-items: center;
  width: clamp(16px, 5vw, 22px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff7e6;
  color: #17141a;
  font-weight: 700;
  font-size: clamp(8px, 2.2vw, 10px);
  line-height: 1;
}

.ox__dot::before {
  content: counter(oxStep);
}

.ox__dot.is-now {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.ox__dot.is-hit {
  background-color: #0a4fe8;
  color: #fff7e6;
}

.ox__dot.is-miss {
  background-color: #c2361a;
  color: #fff7e6;
}

.ox__msg {
  margin: 0;
  min-height: clamp(12px, 4vw, 16px);
  text-align: center;
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 12px);
  line-height: 1.3;
  color: #17141a;
}

.ox.is-demo .ox__btn {
  animation-duration: 2s, 2s;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: backwards, backwards;
}

.ox.is-demo .ox__btn--x {
  animation-name: oxPopX, oxTintX;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1), steps(1, end);
}

.ox.is-demo .ox__btn--o {
  animation-name: oxPopO, oxTintO;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1), steps(1, end);
}

.ox.is-demo .ox__q {
  animation-name: oxCardA;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.ox.is-demo .ox__q--ghost {
  animation-name: oxCardB;
}

.ox.is-demo .ox__dot:nth-child(1) {
  animation-name: oxDot1;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.ox.is-demo .ox__dot:nth-child(2) {
  animation-name: oxDot2;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes oxPopX {
  0%, 8% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.07);
  }
  30% {
    transform: scale(1.07);
  }
  38%, 58% {
    transform: scale(1);
  }
  64% {
    transform: scale(1.07);
  }
  80% {
    transform: scale(1.07);
  }
  88%, 100% {
    transform: scale(1);
  }
}
@keyframes oxTintX {
  0% {
    background-color: #fff7e6;
    color: #17141a;
  }
  12% {
    background-color: #0a4fe8;
    color: #fff7e6;
  }
  36% {
    background-color: #fff7e6;
    color: #17141a;
  }
  62% {
    background-color: #c2361a;
    color: #fff7e6;
  }
  86% {
    background-color: #fff7e6;
    color: #17141a;
  }
  100% {
    background-color: #fff7e6;
    color: #17141a;
  }
}
@keyframes oxPopO {
  0%, 60% {
    transform: scale(1);
  }
  68% {
    transform: scale(1.04);
  }
  82% {
    transform: scale(1.04);
  }
  88%, 100% {
    transform: scale(1);
  }
}
@keyframes oxTintO {
  0% {
    box-shadow: inset 0 0 0 0 #0a4fe8;
  }
  62% {
    box-shadow: inset 0 0 0 4px #0a4fe8;
  }
  86% {
    box-shadow: inset 0 0 0 0 #0a4fe8;
  }
  100% {
    box-shadow: inset 0 0 0 0 #0a4fe8;
  }
}
@keyframes oxCardA {
  0% {
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes oxCardB {
  0% {
    opacity: 0;
  }
  46% {
    opacity: 1;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes oxDot1 {
  0% {
    background-color: #fff7e6;
    color: #17141a;
  }
  12% {
    background-color: #0a4fe8;
    color: #fff7e6;
  }
  86% {
    background-color: #0a4fe8;
    color: #fff7e6;
  }
  88% {
    background-color: #fff7e6;
    color: #17141a;
  }
  100% {
    background-color: #fff7e6;
    color: #17141a;
  }
}
@keyframes oxDot2 {
  0% {
    background-color: #fff7e6;
    color: #17141a;
  }
  62% {
    background-color: #c2361a;
    color: #fff7e6;
  }
  86% {
    background-color: #c2361a;
    color: #fff7e6;
  }
  88% {
    background-color: #fff7e6;
    color: #17141a;
  }
  100% {
    background-color: #fff7e6;
    color: #17141a;
  }
}
@media (max-width: 340px) {
  .ox {
    gap: 4px;
  }
  .ox__btns {
    gap: 8px;
  }
  .ox__dots {
    gap: 4px;
  }
  .ox__card {
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ox__btn {
    transition: none !important;
  }
  .ox.is-demo .ox__btn,
  .ox.is-demo .ox__q,
  .ox.is-demo .ox__dot {
    animation: none !important;
  }
  .ox.is-demo .ox__q--ghost {
    opacity: 0 !important;
  }
}

// OX quiz — 문장 5개를 O/X 로 판정한다. 정답이면 고른 쪽이 파란 면, 오답이면 붉은 면이 되고
// 오답일 때는 정답 쪽에 옅은 힌트 테두리가 함께 켜진다. 900ms 뒤 다음 문장으로 넘어간다.
// 진행 점의 번호는 CSS counter-increment 가 세므로 JS 는 색만 바꾼다.
(function () {
  var QUESTIONS = [
    { t: 'CSS transform forces a layout recalculation', a: 'X' },
    { t: 'prefers-reduced-motion is a request for less motion', a: 'O' },
    { t: 'z-index does nothing while position is static', a: 'O' },
    { t: 'gap cannot be used in a flex layout', a: 'X' },
    { t: 'aria-pressed reports a pressed state', a: 'O' }
  ];
  var HIT = 'Correct!';
  var MISS = 'Not quite';
  var DONE = 'Done! {n} of 5 correct';
  var HELP = 'The O and X keys work too';
  var root = document.getElementById('ox');
  var qEl = document.getElementById('oxQ');
  var oBtn = document.getElementById('oxO');
  var xBtn = document.getElementById('oxX');
  var msgEl = document.getElementById('oxMsg');
  var scoreEl = document.getElementById('oxScore');
  var dots = [].slice.call(document.querySelectorAll('.ox__dot'));
  var step = 0, score = 0, lock = false;

  function paint() {
    qEl.textContent = QUESTIONS[step].t;
    for (var i = 0; i < dots.length; i++) { dots[i].classList.toggle('is-now', i === step); }
  }
  function reset() {
    step = 0; score = 0; lock = false;
    scoreEl.textContent = '0';
    msgEl.textContent = HELP;
    for (var i = 0; i < dots.length; i++) { dots[i].className = 'ox__dot'; }
    paint();
  }
  function clearBtns() {
    oBtn.className = 'ox__btn ox__btn--o';
    xBtn.className = 'ox__btn ox__btn--x';
    oBtn.setAttribute('aria-pressed', 'false');
    xBtn.setAttribute('aria-pressed', 'false');
  }
  function pick(v) {
    if (lock) { return; }
    root.classList.remove('is-demo');
    if (step >= QUESTIONS.length) { reset(); return; }
    lock = true;
    var ok = QUESTIONS[step].a === v;
    var picked = v === 'O' ? oBtn : xBtn;
    var right = QUESTIONS[step].a === 'O' ? oBtn : xBtn;
    picked.setAttribute('aria-pressed', 'true');
    picked.classList.add(ok ? 'is-hit' : 'is-miss');
    if (!ok) { right.classList.add('is-hint'); }
    if (ok) { score++; scoreEl.textContent = String(score); }
    dots[step].classList.add(ok ? 'is-hit' : 'is-miss');
    msgEl.textContent = ok ? HIT : MISS;
    window.setTimeout(function () {
      clearBtns();
      step++;
      lock = false;
      if (step >= QUESTIONS.length) {
        msgEl.textContent = DONE.replace('{n}', String(score));
        return;
      }
      msgEl.textContent = HELP;
      paint();
    }, 900);
  }
  oBtn.addEventListener('click', function () { pick('O'); });
  xBtn.addEventListener('click', function () { pick('X'); });
  document.addEventListener('keydown', function (e) {
    var k = String(e.key).toLowerCase();
    if (k !== 'o' && k !== 'x') { return; }
    e.preventDefault();
    pick(k === 'o' ? 'O' : 'X');
  });
  paint();
})();

// OxQuizPanel — vanilla 판(run/080/demo/07-ox-quiz-panel/index.html) 의 React 포트.
// 문장 5개를 O/X 로 판정한다. 정답이면 고른 쪽이 파란 면, 오답이면 붉은 면 + 정답 쪽 힌트 테두리.
// 900ms 뒤 다음 문장으로 넘어가고, 다 풀면 한 번 더 누를 때 처음으로 돌아간다.
// 진행 점의 번호는 CSS counter-increment 가 세므로 컴포넌트는 색만 바꾼다.
import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./OxQuizPanel.module.scss";

export type OxQuizPanelProps = {
  duration?: number;
  easing?: string;
  accentColor?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type Side = "O" | "X";
type Mark = "hit" | "miss" | null;
type KeyEvt = { key: string; preventDefault(): void };   // React 제네릭 대신 로컬 타입
type TimerBox = { current: number[] };                   // ambient 의 useRef 는 T|null 을 돌려준다

const QUESTIONS: { t: string; a: Side }[] = [
  { t: "CSS 의 transform 은 레이아웃을 다시 계산한다", a: "X" },
  { t: "prefers-reduced-motion 은 움직임 줄이기 요청이다", a: "O" },
  { t: "z-index 는 position 이 static 이면 듣지 않는다", a: "O" },
  { t: "gap 은 flex 에서는 쓸 수 없다", a: "X" },
  { t: "aria-pressed 는 눌림 상태를 알려 주는 속성이다", a: "O" },
];
const TITLE = "OX 퀴즈";
const SCORE_LABEL = "점수";
const O_LABEL = "맞다";
const X_LABEL = "아니다";
const GHOST_Q = "prefers-reduced-motion 은 움직임 줄이기 요청이다";
const HIT = "정답!";
const MISS = "아쉬워요";
const DONE = "끝! 5문제 중 {n}개 정답";
const HELP = "O 와 X 키로도 답합니다";

export default function OxQuizPanel({
  duration = 2000,
  easing = "cubic-bezier(.2, 1.4, .4, 1)",
  accentColor = "#0a4fe8",
}: OxQuizPanelProps) {
  const [step, setStep] = useState(0);
  const [score, setScore] = useState(0);
  const [picked, setPicked] = useState<Side | null>(null);
  const [ok, setOk] = useState(false);
  const [marks, setMarks] = useState<Mark[]>([null, null, null, null, null]);
  const [msg, setMsg] = useState(HELP);
  const [demo, setDemo] = useState(true);
  const lockRef = useRef(false);
  const timersRef = useRef<number[]>([]) as TimerBox;
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": accentColor };

  useEffect(() => {
    return () => { timersRef.current.forEach((t) => window.clearTimeout(t)); };
  }, []);

  function pick(v: Side) {
    if (lockRef.current) { return; }
    setDemo(false);
    if (step >= QUESTIONS.length) {
      setStep(0); setScore(0); setPicked(null); setMsg(HELP);
      setMarks([null, null, null, null, null]);
      return;
    }
    lockRef.current = true;
    const hit = QUESTIONS[step].a === v;
    setPicked(v);
    setOk(hit);
    setMsg(hit ? HIT : MISS);
    if (hit) { setScore(score + 1); }
    setMarks((prev) => prev.map((m, i) => (i === step ? (hit ? "hit" : "miss") : m)));
    timersRef.current.push(window.setTimeout(() => {
      const next = step + 1;
      setPicked(null);
      setStep(next);
      lockRef.current = false;
      setMsg(next >= QUESTIONS.length
        ? DONE.replace("{n}", String(hit ? score + 1 : score))
        : HELP);
    }, 900));
  }

  useEffect(() => {
    const onKey = (e: KeyEvt) => {
      const k = String(e.key).toLowerCase();
      if (k !== "o" && k !== "x") { return; }
      e.preventDefault();
      pick(k === "o" ? "O" : "X");
    };
    document.addEventListener("keydown", onKey as unknown as EventListener);
    return () => { document.removeEventListener("keydown", onKey as unknown as EventListener); };
  });

  const answer: Side | null = step < QUESTIONS.length ? QUESTIONS[step].a : null;
  const btnCls = (side: Side): string => [
    styles.btn,
    side === "O" ? styles.btnO : styles.btnX,
    picked === side ? (ok ? styles.isHit : styles.isMiss) : "",
    picked && !ok && answer === side ? styles.isHint : "",
  ].filter(Boolean).join(" ");
  const dotCls = (i: number): string => [
    styles.dot,
    i === step ? styles.isNow : "",
    marks[i] === "hit" ? styles.isHit : "",
    marks[i] === "miss" ? styles.isMiss : "",
  ].filter(Boolean).join(" ");

  return (
    <main className={styles.stage}>
      <div className={[styles.root, demo ? styles.isDemo : ""].filter(Boolean).join(" ")} style={vars}>
        <header className={styles.bar}>
          <p className={styles.title}>{TITLE}</p>
          <p className={styles.score}>
            <span className={styles.scoreLabel}>{SCORE_LABEL}</span>{" "}
            <b className={styles.scoreNum}>{score}</b><span className={styles.scoreMax}>/5</span>
          </p>
        </header>

        <div className={styles.card}>
          <p className={styles.q}>{step < QUESTIONS.length ? QUESTIONS[step].t : QUESTIONS[0].t}</p>
          <p className={`${styles.q} ${styles.qGhost}`} aria-hidden="true">{GHOST_Q}</p>
        </div>

        <div className={styles.btns}>
          <button className={btnCls("O")} type="button" aria-pressed={picked === "O" ? "true" : "false"}
                  aria-label={O_LABEL} onClick={() => pick("O")}>O</button>
          <button className={btnCls("X")} type="button" aria-pressed={picked === "X" ? "true" : "false"}
                  aria-label={X_LABEL} onClick={() => pick("X")}>X</button>
        </div>

        <ol className={styles.dots}>
          {marks.map((m, i) => (<li key={i} className={dotCls(i)} />))}
        </ol>

        <p className={styles.msg} role="status">{msg}</p>
      </div>
    </main>
  );
}