Spaces:

Lashtw
/

factorT

Running

App Files Files Community

Lashtw commited on Nov 20, 2025

Commit

f652d6e

verified ·

1 Parent(s): e32b9e6

Update index.html

Browse files

Files changed (1) hide show

index.html +605 -19

index.html CHANGED Viewed

@@ -1,19 +1,605 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+import React, { useState, useEffect, useRef } from 'react';
+import { RefreshCw, Check, HelpCircle, ArrowRight, Sparkles, Coins, X } from 'lucide-react';
+// 定義題目結構
+interface Problem {
+  id: number;
+  category: string;
+  question: string; // LaTeX 格式
+  answers: string[]; // 所有可接受的答案格式
+  hint: string;
+}
+// 題庫資料 (從 PDF 2-6 頁摘錄)
+const PROBLEMS: Problem[] = [
+  // Page 2: 提公因式
+  {
+    id: 1,
+    category: "基礎提公因式 (Page 2)",
+    question: "3b^2 + 2b",
+    answers: ["b(3b+2)", "(3b+2)b", "b*(3b+2)"],
+    hint: "觀察兩項都有什麼共同的英文字母？"
+  },
+  {
+    id: 2,
+    category: "基礎提公因式 (Page 2)",
+    question: "5x^2 + 2x",
+    answers: ["x(5x+2)", "(5x+2)x"],
+    hint: "提出公因式 x"
+  },
+  {
+    id: 3,
+    category: "基礎提公因式 (Page 2)",
+    question: "6y^2 - 2y",
+    answers: ["2y(3y-1)", "(3y-1)2y"],
+    hint: "數字 6 和 2 的公因數是？變數 y 也可以提出來。"
+  },
+  // Page 3: 分組/括號提公因式
+  {
+    id: 4,
+    category: "分組提公因式 (Page 3)",
+    question: "2x(x-2) + 5(x-2)",
+    answers: ["(x-2)(2x+5)", "(2x+5)(x-2)"],
+    hint: "把 (x-2) 當作一個整體提出來"
+  },
+  {
+    id: 5,
+    category: "分組提公因式 (Page 3)",
+    question: "x(3x-7) + 4(3x-7)",
+    answers: ["(3x-7)(x+4)", "(x+4)(3x-7)"],
+    hint: "大家都有 (3x-7)"
+  },
+  {
+    id: 6,
+    category: "分組提公因式 (Page 3)",
+    question: "3x(2x-5) + (2x-5)(x+8)",
+    answers: ["(2x-5)(4x+8)", "4(2x-5)(x+2)", "(4x+8)(2x-5)", "4(x+2)(2x-5)"],
+    hint: "提出 (2x-5) 後，剩下的要合併：3x + (x+8)"
+  },
+  // Page 4: 變號提公因式
+  {
+    id: 7,
+    category: "變號提公因式 (Page 4)",
+    question: "x(2x-1) + (1-2x)",
+    answers: ["(2x-1)(x-1)", "(x-1)(2x-1)"],
+    hint: "注意 (1-2x) 可以寫成 -(2x-1)"
+  },
+  {
+    id: 8,
+    category: "變號提公因式 (Page 4)",
+    question: "x(2x-3) - 3(3-2x)",
+    answers: ["(2x-3)(x+3)", "(x+3)(2x-3)"],
+    hint: "-(3-2x) 其實就是 +(2x-3)"
+  },
+  // Page 5: 平方差公式 a^2 - b^2 = (a+b)(a-b)
+  {
+    id: 9,
+    category: "平方差公式 (Page 5)",
+    question: "x^2 - 49",
+    answers: ["(x+7)(x-7)", "(x-7)(x+7)"],
+    hint: "49 是 7 的平方"
+  },
+  {
+    id: 10,
+    category: "平方差公式 (Page 5)",
+    question: "25x^2 - 36",
+    answers: ["(5x+6)(5x-6)", "(5x-6)(5x+6)"],
+    hint: "25x^2 是 (5x) 的平方，36 是 6 的平方"
+  },
+  {
+    id: 11,
+    category: "平方差公式 (Page 5)",
+    question: "49 - (y-1)^2",
+    answers: ["(8-y)(y+6)", "(y+6)(8-y)", "-(y-8)(y+6)", "(7-(y-1))(7+(y-1))"], // 包含未化簡與化簡後的答案
+    hint: "A=7, B=(y-1)，套用 (A+B)(A-B)"
+  },
+  // Page 6: 完全平方公式
+  {
+    id: 12,
+    category: "完全平方公式 (Page 6)",
+    question: "x^2 + 8x + 16",
+    answers: ["(x+4)^2", "(x+4)(x+4)"],
+    hint: "頭平方，尾平方，2倍頭尾在中央。16 是 4 的平方。"
+  },
+  {
+    id: 13,
+    category: "完全平方公式 (Page 6)",
+    question: "x^2 - 10x + 25",
+    answers: ["(x-5)^2", "(x-5)(x-5)"],
+    hint: "中間是負號，所以是差的平方"
+  },
+  {
+    id: 14,
+    category: "完全平方公式 (Page 6)",
+    question: "16x^2 - 24x + 9",
+    answers: ["(4x-3)^2", "(4x-3)(4x-3)"],
+    hint: "16x^2 是 (4x)^2，9 是 3^2"
+  },
+  {
+    id: 15,
+    category: "綜合挑戰",
+    question: "(x+1)(x-3) - (x-3)",
+    answers: ["x(x-3)", "(x-3)x"],
+    hint: "後面的 -(x-3) 可以看作 -1(x-3)"
+  }
+];
+// 工具：標準化輸入字串 (移除空格，統一格式)
+const normalizeInput = (input: string): string => {
+  return input.replace(/\s/g, "")
+              .replace(/\^2/g, "^2") // 確保次方符號一致
+              .replace(/（/g, "(")   // 處理全形括號
+              .replace(/）/g, ")");
+};
+// 取得當前題目需要的變數
+const getProblemVariables = (question: string): string[] => {
+  const vars = new Set<string>();
+  if (question.includes('x')) vars.add('x');
+  if (question.includes('y')) vars.add('y');
+  if (question.includes('a')) vars.add('a');
+  if (question.includes('b')) vars.add('b');
+  // 如果題目完全沒有變數(純數字題)，預設給 x
+  if (vars.size === 0) return ['x'];
+  return Array.from(vars).sort();
+};
+// 特效組件：漂浮的數字/符號
+const FloatingNumber = ({ x, y, value }: { x: number, y: number, value: string }) => (
+  <div
+    className="absolute text-amber-400 font-bold animate-bounce pointer-events-none select-none opacity-40"
+    style={{ left: x, top: y, fontSize: '20px' }}
+  >
+    {value}
+  </div>
+);
+// 金幣噴發特效
+const CoinBurst = () => {
+  const coins = Array.from({ length: 25 }).map((_, i) => ({
+    id: i,
+    tx: (Math.random() - 0.5) * 300,
+    ty: (Math.random() - 1.5) * 250,
+    rot: Math.random() * 720,
+    scale: 0.5 + Math.random() * 0.5,
+    delay: Math.random() * 0.2
+  }));
+  return (
+    <div className="absolute top-1/2 left-1/2 w-0 h-0 overflow-visible pointer-events-none z-50">
+      {coins.map((c) => (
+        <div
+          key={c.id}
+          className="absolute w-8 h-8 bg-yellow-400 rounded-full border-2 border-yellow-600 flex items-center justify-center text-yellow-700 font-bold shadow-lg"
+          style={{
+            '--tx': `${c.tx}px`,
+            '--ty': `${c.ty}px`,
+            '--rot': `${c.rot}deg`,
+            animation: `coinFly 1.5s cubic-bezier(0.1, 0.8, 0.2, 1) forwards ${c.delay}s`
+          } as React.CSSProperties}
+        >
+          $
+        </div>
+      ))}
+    </div>
+  );
+};
+// SVG 寶箱組件
+const TreasureChest = ({
+  isOpen,
+  shake,
+  children,
+  questionText
+}: {
+  isOpen: boolean,
+  shake: boolean,
+  children: React.ReactNode,
+  questionText: React.ReactNode
+}) => {
+  return (
+    <div className={`relative w-full max-w-[320px] sm:max-w-[400px] mx-auto transition-transform duration-300 ${shake ? 'animate-shake' : ''} ${isOpen ? 'scale-105' : ''}`}>
+      {/* 寶箱本體 SVG */}
+      <svg viewBox="0 0 400 320" className="w-full drop-shadow-2xl filter">
+        <defs>
+          <linearGradient id="woodGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="#5D4037" />
+            <stop offset="50%" stopColor="#8D6E63" />
+            <stop offset="100%" stopColor="#5D4037" />
+          </linearGradient>
+          <linearGradient id="goldGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#FFD700" />
+            <stop offset="50%" stopColor="#FDB931" />
+            <stop offset="100%" stopColor="#C49102" />
+          </linearGradient>
+          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+            <feGaussianBlur stdDeviation="5" result="blur" />
+            <feComposite in="SourceGraphic" in2="blur" operator="over" />
+          </filter>
+        </defs>
+        <path d="M 20 120 L 380 120 L 380 280 Q 380 310 350 310 L 50 310 Q 20 310 20 280 Z" fill="url(#woodGradient)" stroke="#3E2723" strokeWidth="4" />
+        <path d="M 20 120 L 50 120 L 50 310 M 380 120 L 350 120 L 350 310 M 200 120 L 200 310" stroke="url(#goldGradient)" strokeWidth="8" fill="none" />
+        <g className="transition-transform duration-700 origin-bottom" style={{ transformOrigin: '200px 120px', transform: isOpen ? 'rotateX(-110deg) translateY(-20px)' : 'rotateX(0)' }}>
+          <path d="M 10 120 Q 200 20 390 120 L 390 120 L 10 120 Z" fill="url(#woodGradient)" stroke="#3E2723" strokeWidth="4" />
+          <path d="M 40 118 Q 200 40 360 118" stroke="url(#goldGradient)" strokeWidth="8" fill="none" />
+          <path d="M 200 70 L 200 120" stroke="url(#goldGradient)" strokeWidth="8" fill="none" />
+        </g>
+        {isOpen && (
+          <g className="animate-fade-in">
+             <rect x="50" y="120" width="300" height="160" fill="#1a120b" opacity="0.9" />
+             <circle cx="200" cy="200" r="60" fill="url(#goldGradient)" filter="url(#glow)" className="animate-pulse opacity-50" />
+             <path d="M 80 280 Q 200 180 320 280 Z" fill="url(#goldGradient)" opacity="0.8" />
+          </g>
+        )}
+      </svg>
+      <div className={`absolute -top-16 left-0 right-0 text-center transition-all duration-500 ${isOpen ? 'opacity-0' : 'opacity-100'}`}>
+         <div className="inline-block bg-black/60 backdrop-blur-sm text-amber-300 px-6 py-3 rounded-lg border border-amber-500/50 shadow-[0_0_15px_rgba(245,158,11,0.3)]">
+            {questionText}
+         </div>
+      </div>
+      <div className={`absolute top-[55%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[70%] transition-opacity duration-300 ${isOpen ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}>
+        <div className="bg-black/80 p-2 rounded-lg border-2 border-amber-600 shadow-inner">
+          {children}
+        </div>
+        <div className="text-center text-[10px] text-amber-500/70 mt-1 font-mono tracking-widest">SECRET CODE</div>
+      </div>
+      {isOpen && (
+        <>
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none">
+            <Sparkles className="w-40 h-40 text-yellow-300 animate-spin-slow opacity-80" />
+          </div>
+          <CoinBurst />
+        </>
+      )}
+    </div>
+  );
+};
+export default function FactoringGame() {
+  const [currentLevel, setCurrentLevel] = useState(0);
+  const [inputAnswer, setInputAnswer] = useState("");
+  const [gameStatus, setGameStatus] = useState<"playing" | "success" | "error" | "completed">("playing");
+  const [shake, setShake] = useState(false);
+  const [showHint, setShowHint] = useState(false);
+  const [score, setScore] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // 嚴格模式下的音效處理 (Web Audio API)
+  const playSuccessSound = () => {
+    try {
+      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
+      if (!AudioContext) return;
+      const ctx = new AudioContext();
+      const oscillator = ctx.createOscillator();
+      const gainNode = ctx.createGain();
+      oscillator.connect(gainNode);
+      gainNode.connect(ctx.destination);
+      oscillator.type = 'sine';
+      oscillator.frequency.setValueAtTime(523.25, ctx.currentTime);
+      oscillator.frequency.exponentialRampToValueAtTime(1046.5, ctx.currentTime + 0.1);
+      gainNode.gain.setValueAtTime(0.3, ctx.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5);
+      oscillator.start();
+      oscillator.stop(ctx.currentTime + 0.5);
+    } catch (e) {
+      console.error("Audio play failed", e);
+    }
+  };
+  // 處理背景動畫
+  const [particles, setParticles] = useState<{x:number, y:number, val:string}[]>([]);
+  useEffect(() => {
+    const symbols = ["x²", "y", "+", "-", "( )", "a", "b"];
+    const interval = setInterval(() => {
+      setParticles(prev => {
+        const newP = [...prev, {
+          x: Math.random() * 100,
+          y: Math.random() * 100,
+          val: symbols[Math.floor(Math.random() * symbols.length)]
+        }];
+        if (newP.length > 20) newP.shift();
+        return newP;
+      });
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
+  const currentProblem = PROBLEMS[currentLevel];
+  const handleCheckAnswer = () => {
+    if (!inputAnswer) return;
+    const normalizedUser = normalizeInput(inputAnswer);
+    const normalizedAnswers = currentProblem.answers.map(normalizeInput);
+    if (normalizedAnswers.includes(normalizedUser)) {
+      setGameStatus("success");
+      playSuccessSound();
+      setTimeout(() => {
+        if (currentLevel < PROBLEMS.length - 1) {
+          setCurrentLevel(prev => prev + 1);
+          setInputAnswer("");
+          setGameStatus("playing");
+          setShowHint(false);
+          setScore(prev => prev + 100);
+        } else {
+          setGameStatus("completed");
+        }
+      }, 2000);
+    } else {
+      setGameStatus("error");
+      setShake(true);
+      setTimeout(() => setShake(false), 500);
+      if (navigator.vibrate) navigator.vibrate(200);
+    }
+  };
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleCheckAnswer();
+    }
+  };
+  const insertSymbol = (symbol: string) => {
+    setInputAnswer(prev => prev + symbol);
+    inputRef.current?.focus();
+  };
+  const renderMath = (text: string) => {
+    const parts = text.split(/(\^[0-9]+)/g);
+    return (
+      <span className="font-serif text-2xl md:text-3xl tracking-wider text-amber-100 font-bold drop-shadow-md select-none">
+        {parts.map((part, i) => {
+          if (part.startsWith("^")) {
+            return <sup key={i} className="text-lg text-amber-300">{part.substring(1)}</sup>;
+          }
+          return <span key={i}>{part}</span>;
+        })}
+      </span>
+    );
+  };
+  const getKeyboardButtons = () => {
+    const variableButtons = getProblemVariables(currentProblem.question);
+    const operatorButtons = ['+', '-', '^2', '(', ')'];
+    const numberButtons = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+    return {
+      topRow: Array.from(new Set([...variableButtons, ...operatorButtons])),
+      numberRow: numberButtons
+    };
+  };
+  const keyboard = getKeyboardButtons();
+  if (gameStatus === "completed") {
+    return (
+      <div className="fixed inset-0 bg-[#1a120b] text-white flex flex-col items-center justify-center p-4 overflow-hidden font-sans touch-none">
+         <div className="absolute inset-0 opacity-20">
+          {particles.map((p, i) => <FloatingNumber key={i} x={p.x * 10} y={p.y * 10} value={p.val} />)}
+        </div>
+        <div className="bg-[#2d1f16] p-8 rounded-2xl shadow-2xl border-4 border-amber-500 text-center max-w-md w-full z-10 animate-fade-in-up">
+          <Coins className="w-24 h-24 text-yellow-400 mx-auto mb-6 animate-bounce" />
+          <h1 className="text-4xl font-bold text-yellow-400 mb-4">大富翁誕生！</h1>
+          <p className="text-amber-200 mb-8 text-lg">你已成功解開所有謎題，獲得了傳說中的代數寶藏！</p>
+          <div className="text-3xl font-bold text-white mb-8 flex items-center justify-center gap-2">
+             <span>總獎金：</span>
+             <span className="text-yellow-400">${score + 100}</span>
+          </div>
+          <button
+            onClick={() => window.location.reload()}
+            className="bg-amber-600 hover:bg-amber-500 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 flex items-center justify-center mx-auto gap-2 shadow-lg"
+          >
+            <RefreshCw className="w-5 h-5" />
+            再次挑戰
+          </button>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="fixed inset-0 bg-[#1a120b] text-white flex flex-col items-center justify-center p-4 overflow-hidden font-sans touch-none select-none">
+      {/* 背景粒子 */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        {particles.map((p, i) => (
+          <div
+            key={i}
+            className="absolute text-amber-900/30 font-bold text-xl transition-all duration-1000"
+            style={{ left: `${p.x}%`, top: `${p.y}%` }}
+          >
+            {p.val}
+          </div>
+        ))}
+      </div>
+      {/* 遊戲主介面 */}
+      <div className="w-full max-w-2xl z-10 flex flex-col items-center h-full justify-center">
+        {/* 頂部資訊欄 */}
+        <div className="w-full flex justify-between items-center mb-4 px-4 max-w-[400px]">
+          <div className="flex items-center gap-2">
+            <span className="bg-amber-700/80 text-amber-100 text-xs font-bold px-3 py-1 rounded-full border border-amber-600 uppercase tracking-wider shadow-lg">
+              Level {currentLevel + 1}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 bg-black/40 px-4 py-1 rounded-full border border-amber-900/50 shadow-[0_0_10px_rgba(234,179,8,0.2)]">
+            <Coins className="w-5 h-5 text-yellow-400" />
+            <span className="text-yellow-400 font-bold font-mono text-lg">${score}</span>
+          </div>
+        </div>
+        {/* 寶箱與題目區域 */}
+        <div className="mb-4 w-full flex justify-center relative max-h-[40vh]">
+          <TreasureChest
+            isOpen={gameStatus === "success"}
+            shake={shake}
+            questionText={renderMath(currentProblem.question)}
+          >
+             {/* 嵌入寶箱的輸入框 */}
+             <div className="flex gap-1">
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={inputAnswer}
+                  onChange={(e) => {
+                    setInputAnswer(e.target.value);
+                    setGameStatus("playing");
+                  }}
+                  onKeyDown={handleKeyDown}
+                  placeholder="密碼"
+                  className={`w-full bg-transparent text-center text-xl font-mono font-bold tracking-widest focus:outline-none transition-colors placeholder-amber-900/50 ${
+                    gameStatus === "error" ? "text-red-400" : "text-amber-400"
+                  }`}
+                  autoComplete="off"
+                  disabled={gameStatus === "success"}
+                  readOnly // 防止手機虛擬鍵盤彈出，強制使用遊戲內鍵盤
+                />
+                <button
+                  onClick={handleCheckAnswer}
+                  disabled={!inputAnswer || gameStatus === "success"}
+                  className={`px-2 rounded hover:bg-amber-500/20 transition-colors flex items-center justify-center ${
+                    gameStatus === "success" ? "text-green-400" : "text-amber-500"
+                  }`}
+                >
+                  {gameStatus === "success" ? <Check className="w-6 h-6" /> : <ArrowRight className="w-6 h-6" />}
+                </button>
+             </div>
+          </TreasureChest>
+        </div>
+        {/* 操作區域 (提示與鍵盤) */}
+        <div className={`w-full max-w-[400px] transition-all duration-500 flex flex-col justify-end ${gameStatus === "success" ? "opacity-0 translate-y-10 pointer-events-none" : "opacity-100 translate-y-0"}`}>
+          {/* 提示按鈕與內容 */}
+          <div className="flex justify-center mb-2 min-h-[24px]">
+            <button
+              onClick={() => setShowHint(!showHint)}
+              className="text-amber-400/70 hover:text-amber-300 text-xs flex items-center gap-1 transition-colors px-3 py-1 rounded hover:bg-amber-900/30"
+            >
+              <HelpCircle className="w-3 h-3" />
+              {showHint ? "隱藏提示" : "需要提示？"}
+            </button>
+          </div>
+          {showHint && (
+            <div className="absolute top-20 left-4 right-4 z-50 bg-blue-900/90 backdrop-blur text-blue-200 text-sm p-4 rounded-lg text-center animate-fade-in border border-blue-500/50 shadow-2xl">
+               <button onClick={() => setShowHint(false)} className="absolute top-2 right-2 text-blue-300"><X className="w-4 h-4"/></button>
+              💡 提示：{currentProblem.hint}
+            </div>
+          )}
+          {/* 狀態訊息 */}
+          <div className="h-6 text-center mb-2">
+            {gameStatus === "error" && (
+              <p className="text-red-400 font-bold animate-pulse text-sm bg-red-900/20 inline-block px-4 py-0.5 rounded">
+                密碼錯誤！
+              </p>
+            )}
+          </div>
+          {/* 動態虛擬鍵盤 - 優化觸控區 */}
+          <div className="bg-[#2d1f16] p-3 rounded-xl border-t-4 border-amber-800 shadow-2xl mx-2 pb-6 md:pb-3">
+            {/* 第一層：變數與運算符 */}
+            <div className="grid grid-cols-5 gap-1.5 mb-2">
+              {keyboard.topRow.map((symbol) => (
+                <button
+                  key={symbol}
+                  onClick={() => insertSymbol(symbol)}
+                  className="bg-[#4e342e] hover:bg-[#5d4037] active:bg-[#3e2723] text-amber-100 py-3 rounded-lg font-mono text-lg font-bold transition-all border-b-4 border-[#281912] active:border-b-0 active:translate-y-1 shadow-md touch-manipulation"
+                  disabled={gameStatus === "success"}
+                >
+                  {symbol}
+                </button>
+              ))}
+               <button
+                  onClick={() => {
+                    setInputAnswer("");
+                  }}
+                  className="bg-[#3e2723] hover:bg-red-900/50 text-red-300 py-3 rounded-lg font-mono text-xs font-bold transition-all border-b-4 border-[#1a100a] active:border-b-0 active:translate-y-1 shadow-md col-span-1 touch-manipulation"
+                  disabled={gameStatus === "success"}
+                >
+                  CLR
+                </button>
+            </div>
+            {/* 第二層：數字鍵盤 */}
+            <div className="grid grid-cols-5 gap-1.5 border-t border-amber-900/30 pt-2">
+               {keyboard.numberRow.map((num) => (
+                <button
+                  key={num}
+                  onClick={() => insertSymbol(num)}
+                  className="bg-[#3e2723] hover:bg-[#4e342e] active:bg-[#2d1f16] text-amber-200/80 py-3 rounded-lg font-mono text-lg font-bold transition-all border-b-4 border-[#1a100a] active:border-b-0 active:translate-y-1 shadow-md touch-manipulation"
+                  disabled={gameStatus === "success"}
+                >
+                  {num}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="text-center mt-4 text-amber-900/40 text-[10px]">
+          代數遺跡：公因式的寶藏
+        </div>
+      </div>
+      <style>{`
+        @keyframes shake {
+          0%, 100% { transform: translateX(0); }
+          25% { transform: translateX(-5px); }
+          75% { transform: translateX(5px); }
+        }
+        .animate-shake {
+          animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
+        }
+        .animate-fade-in {
+          animation: fadeIn 0.5s ease-out;
+        }
+        .animate-spin-slow {
+          animation: spin 8s linear infinite;
+        }
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes fadeIn {
+          from { opacity: 0; transform: translateY(-10px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes coinFly {
+          0% {
+            transform: translate(-50%, -50%) scale(0) rotate(0deg);
+            opacity: 1;
+          }
+          10% {
+            transform: translate(-50%, -50%) scale(1) rotate(0deg);
+            opacity: 1;
+          }
+          100% {
+            transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.5) rotate(var(--rot));
+            opacity: 0;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}