404-Layers/src/ui/DrillCard.tsx

/**
 * Drill's card area, in the same 84px box Explore uses for its info card.
 *
 * Three states: asking you to press a combo, asking you to name one, or showing
 * the verdict. Feedback is orange or an outline — the palette has no green or red.
 */
import { comboParts } from "../domain/format";
import type { Entry } from "../domain/types";
import type { DrillState } from "./drillReducer";
import { cx } from "./cx";
import styles from "./DrillCard.module.css";

export interface DrillCardProps {
  readonly state: DrillState;
  readonly onCheck: () => void;
  readonly onClear: () => void;
  readonly onReveal: () => void;
  readonly onNext: () => void;
  readonly onPickOption: (name: string) => void;
}

function Chips({ entry }: { entry: Entry }) {
  return (
    <span className={styles.combo}>
      {comboParts(entry).map((part, i) => (
        <span key={part}>
          {i > 0 ? <i className={styles.plus}>+</i> : null}
          <b className={styles.chip}>{part}</b>
        </span>
      ))}
    </span>
  );
}

export function DrillCard({
  state,
  onCheck,
  onClear,
  onReveal,
  onNext,
  onPickOption,
}: DrillCardProps) {
  const { card, chord, answered, lastCorrect, direction, input } = state;

  if (!card) {
    return (
      <div className={styles.card}>
        <p className={styles.body}>No cards in this deck.</p>
      </div>
    );
  }

  if (answered) {
    return (
      <div className={styles.card}>
        <div className={styles.meta}>
          <span className={cx(styles.verdict, !lastCorrect && styles.verdictMiss)}>
            {lastCorrect ? "CORRECT" : "NOT QUITE"}
          </span>
          <span>P.{card.page}</span>
        </div>
        <div className={styles.row}>
          <Chips entry={card} />
          <button className={styles.primary} onClick={onNext}>
            NEXT
          </button>
        </div>
        <p className={styles.body}>{card.desc || card.name}</p>
      </div>
    );
  }

  if (direction === "name") {
    return (
      <div className={styles.card}>
        <div className={styles.meta}>
          <Chips entry={card} />
          <span>WHICH IS IT?</span>
        </div>
        <div className={styles.options}>
          {state.options.map((name) => (
            <button key={name} className={styles.option} onClick={() => onPickOption(name)}>
              {name}
            </button>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className={styles.card}>
      <div className={styles.meta}>
        <span className={styles.ellipsis}>
          {input === "hold" ? "HOLD THE COMBO" : "TAP EACH, THEN CHECK"}
        </span>
        <button className={styles.ghost} onClick={onReveal}>
          SHOW ME
        </button>
      </div>
      <h2 className={styles.title}>{card.name}</h2>
      <div className={styles.row}>
        <span className={styles.pressed}>
          {chord.length === 0 ? "—" : chord.join(" + ").toUpperCase()}
        </span>
        {input === "tap" ? (
          <span className={styles.row}>
            <button className={styles.ghost} onClick={onClear} disabled={chord.length === 0}>
              CLEAR
            </button>
            <button
              className={styles.primary}
              onClick={onCheck}
              disabled={chord.length === 0}
            >
              CHECK
            </button>
          </span>
        ) : null}
      </div>
    </div>
  );
}