Under the hood

Picks uniformly from the canonical 20-answer array after a brief shake animation. The question stays client-side.

'use client';

import * as React from 'react';

import { Win98Button } from '@/components/ui/win-98-button';

const ANSWERS = [
  'It is certain.', 'It is decidedly so.', 'Without a doubt.', 'Yes — definitely.',
  'You may rely on it.', 'As I see it, yes.', 'Most likely.', 'Outlook good.',
  'Yes.', 'Signs point to yes.', 'Reply hazy, try again.', 'Ask again later.',
  'Better not tell you now.', 'Cannot predict now.', 'Concentrate and ask again.',
  "Don't count on it.", 'My reply is no.', 'My sources say no.',
  'Outlook not so good.', 'Very doubtful.',
];

export function Magic8Game() {
  const [q, setQ] = React.useState('');
  const [answer, setAnswer] = React.useState<string | null>(null);
  const [shaking, setShaking] = React.useState(false);

  const ask = () => {
    if (shaking) return;
    setShaking(true);
    setAnswer(null);
    window.setTimeout(() => {
      setAnswer(ANSWERS[Math.floor(Math.random() * ANSWERS.length)]);
      setShaking(false);
    }, 900);
  };

  return (
    <div className="flex w-full max-w-sm flex-col items-center gap-6">
      <div
        className={`flex h-72 w-72 items-center justify-center rounded-full text-center ${
          shaking ? 'animate-[wiggle_0.2s_ease-in-out_infinite]' : ''
        }`}
        style={{ background: 'var(--ink)' }}
      >
        <div className="flex h-40 w-40 items-center justify-center rounded-full bg-[var(--accent-blue)] p-4 text-center text-sm font-medium leading-tight text-white">
          {shaking ? '…' : (answer ?? '8')}
        </div>
      </div>

      <input
        value={q}
        onChange={(e) => setQ(e.target.value)}
        onKeyDown={(e) => e.key === 'Enter' && ask()}
        placeholder="ask a yes/no question…"
        className="w-full border-b border-foreground/30 bg-transparent px-1 py-2 text-center text-sm outline-none placeholder:opacity-40"
      />

      <Win98Button onClick={ask} disabled={shaking} className="h-10 min-w-32 px-7 text-sm">
        Shake
      </Win98Button>

      <style>{`@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}`}</style>
    </div>
  );
}