[feat] number-ball (#1)

components/logic.tsx

@@ -88,6 +88,7 @@ export interface RollCallActions {
   clearResult: () => void
   getBallState: (n: number) => "idle" | "highlighted" | "used"
   getBallColorIndex: (n: number) => number | undefined
+  getBallDimmed: (n: number) => boolean
 }
 
 export const COLORS = [
@@ -112,7 +113,7 @@ export const COLORS = [
 
 export function useRollCallLogic(): [RollCallState, RollCallActions] {
   const [mode, setMode] = useState<Mode>("single")
-  const [totalTasks, setTotalTasks] = useState(20)
+  const [totalTasks, setTotalTasks] = useState(35)
   const [pickCount, setPickCount] = useState(1)
   const [rounds, setRounds] = useState(1)
   const [allowRepeat, setAllowRepeat] = useState(false)
@@ -251,14 +252,15 @@ export function useRollCallLogic(): [RollCallState, RollCallActions] {
 
   const getBallState = useCallback((n: number): "idle" | "highlighted" | "used" => {
     if (mode === "single") {
-      const isInRecords = selectedRecords.some(r => r.number === n)
-      if (isInRecords) return "highlighted"
+      // Only highlight current round's selections
+      const isCurrentRound = singleHighlighted.includes(n)
+      if (isCurrentRound) return "highlighted"
       return "idle"
     }
     if (highlighted.has(n)) return "highlighted"
     if (hasResult && usedAll.size > 0 && !usedAll.has(n)) return "used"
     return "idle"
-  }, [mode, selectedRecords, highlighted, hasResult, usedAll])
+  }, [mode, singleHighlighted, highlighted, hasResult, usedAll])
 
   const getBallColorIndex = useCallback((n: number): number | undefined => {
     if (mode === "single") {
@@ -275,6 +277,14 @@ export function useRollCallLogic(): [RollCallState, RollCallActions] {
     return undefined
   }, [mode, selectedRecords, groups])
 
+  const getBallDimmed = useCallback((n: number): boolean => {
+    // Only dim in single mode when there are highlighted numbers
+    if (mode === "single" && singleHighlighted.length > 0) {
+      return !singleHighlighted.includes(n)
+    }
+    return false
+  }, [mode, singleHighlighted])
+
   const state: RollCallState = {
     mode,
     totalTasks,
@@ -308,6 +318,7 @@ export function useRollCallLogic(): [RollCallState, RollCallActions] {
     clearResult,
     getBallState,
     getBallColorIndex,
+    getBallDimmed,
   }
 
   return [state, actions]