Initialization

2026-06-15 19:01:02 +08:00
commit 325c267f0c
28 changed files with 12087 additions and 0 deletions
@@ -0,0 +1,43 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { COLORS } from "./logic"
+
+interface NumberBallProps {
+  number: number
+  state: "idle" | "highlighted" | "used"
+  colorIndex?: number
+  size?: "normal" | "large"
+}
+
+export function NumberBall({ number, state, colorIndex, size = "normal" }: NumberBallProps) {
+  const isHighlighted = state === "highlighted"
+  const borderColor = isHighlighted && colorIndex !== undefined 
+    ? COLORS[colorIndex] 
+    : state === "idle" ? "#e2e6ea" 
+    : "#eef0f2"
+  const bgColor = isHighlighted && colorIndex !== undefined 
+    ? COLORS[colorIndex] 
+    : "transparent"
+  const textColor = isHighlighted && colorIndex !== undefined 
+    ? "#ffffff" 
+    : state === "idle" ? "#8a95a1" 
+    : "#cdd2d8"
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center font-mono select-none transition-all duration-150",
+        size === "normal" && "w-8 h-8 text-sm",
+        size === "large" && "w-14 h-14 text-lg",
+      )}
+      style={{
+        border: `1px solid ${borderColor}`,
+        backgroundColor: bgColor,
+        color: textColor,
+      }}
+    >
+      {String(number).padStart(2, "0")}
+    </div>
+  )
+}