[feat] number-ball (#1)

components/number-ball.tsx

@@ -8,19 +8,23 @@ interface NumberBallProps {
   state: "idle" | "highlighted" | "used"
   colorIndex?: number
   size?: "normal" | "large"
+  dimmed?: boolean
 }
 
-export function NumberBall({ number, state, colorIndex, size = "normal" }: NumberBallProps) {
+export function NumberBall({ number, state, colorIndex, size = "normal", dimmed = false }: NumberBallProps) {
   const isHighlighted = state === "highlighted"
-  const borderColor = isHighlighted && colorIndex !== undefined 
+  const hasColor = colorIndex !== undefined
+
+  const borderColor = hasColor 
     ? COLORS[colorIndex] 
     : state === "idle" ? "#e2e6ea" 
     : "#eef0f2"
-  const bgColor = isHighlighted && colorIndex !== undefined 
+  const bgColor = isHighlighted && hasColor 
     ? COLORS[colorIndex] 
     : "transparent"
-  const textColor = isHighlighted && colorIndex !== undefined 
+  const textColor = isHighlighted && hasColor 
     ? "#ffffff" 
+    : hasColor ? COLORS[colorIndex] 
     : state === "idle" ? "#8a95a1" 
     : "#cdd2d8"
 
@@ -30,6 +34,7 @@ export function NumberBall({ number, state, colorIndex, size = "normal" }: Numbe
         "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",
+        dimmed && !isHighlighted && "opacity-30",
       )}
       style={{
         border: `1px solid ${borderColor}`,