All files / web/src/components/toys/number-line drawComputations.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Pure computation helpers extracted from NumberLine.tsx draw().
 *
 * These functions compute derived render state from refs/inputs
 * without side effects. Called once per draw frame.
 */

import type { NumberLineState } from './types'
import type { RenderIndicator } from './renderNumberLine'
import type { SieveTickTransform } from './primes/renderSieveOverlay'
import { computeSieveTickTransforms, SWEEP_MAX_N } from './primes/renderSieveOverlay'
import { PRIME_TOUR_STOPS } from './primes/primeTourStops'

// ── Tour highlight computation ──────────────────────────────────────

export interface TourHighlightResult {
  highlightSet: Set<number> | undefined
  highlightedArcSet: Set<string> | undefined
  dimAmount: number
}

export function computeTourHighlights(tourState: {
  phase: string
  stopIndex: number | null
  dwellStartMs: number
  virtualDwellMs: number
  opacity: number
}): TourHighlightResult {
  const tourStop = tourState.stopIndex !== null ? PRIME_TOUR_STOPS[tourState.stopIndex] : null
  const dimAmount = tourStop?.dimOthers ?? 0

  let highlightSet: Set<number> | undefined
  let highlightedArcSet: Set<string> | undefined

  if (tourStop?.highlightPhases && tourStop.highlightPhases.length > 0) {
    const dwellElapsed =
      tourState.phase === 'dwelling'
        ? performance.now() - tourState.dwellStartMs
        : tourState.phase === 'fading'
          ? Infinity
          : -1

    const values: number[] = []
    const arcPairs: [number, number][] = []
    for (const phase of tourStop.highlightPhases) {
      if (phase.delayMs <= dwellElapsed) {
        values.push(...phase.values)
        if (phase.arcs) arcPairs.push(...phase.arcs)
      }
    }
    highlightSet = values.length > 0 ? new Set(values) : undefined
    if (arcPairs.length > 0) {
      highlightedArcSet = new Set(arcPairs.map(([a, b]) => (a < b ? `${a}-${b}` : `${b}-${a}`)))
    }
  } else if (tourStop?.highlightValues?.length) {
    highlightSet = new Set(tourStop.highlightValues)
  }

  return { highlightSet, highlightedArcSet, dimAmount }
}

// ── Sieve tick transforms ───────────────────────────────────────────

export interface SieveComputeResult {
  sieveTransforms: Map<number, SieveTickTransform> | undefined
  sieveUniformity: number
  sieveDwellElapsed: number
}

export function computeSieveState(
  tourState: { phase: string; stopIndex: number | null; virtualDwellMs: number },
  state: NumberLineState,
  cssWidth: number,
  cssHeight: number
): SieveComputeResult {
  const tourStop = tourState.stopIndex !== null ? PRIME_TOUR_STOPS[tourState.stopIndex] : null

  if (tourState.phase === 'idle' || tourStop?.id !== 'ancient-trick') {
    return { sieveTransforms: undefined, sieveUniformity: 0, sieveDwellElapsed: 0 }
  }

  const sieveDwellElapsed =
    tourState.phase === 'dwelling'
      ? tourState.virtualDwellMs
      : tourState.phase === 'fading'
        ? Infinity
        : 0

  const viewportRight = state.center + cssWidth / (2 * state.pixelsPerUnit)
  const sieveMaxN = Math.max(SWEEP_MAX_N, Math.ceil(viewportRight) + 5)
  const sieveTransforms = computeSieveTickTransforms(
    sieveMaxN,
    sieveDwellElapsed,
    cssHeight,
    viewportRight
  )
  const rawT = Math.min(1, sieveDwellElapsed / 2000)
  const sieveUniformity = rawT * (2 - rawT)

  return { sieveTransforms, sieveUniformity, sieveDwellElapsed }
}

// ── Indicator fade lifecycle ────────────────────────────────────────

export function computeIndicatorFade(
  indicator: {
    numbers: number[]
    range?: { from: number; to: number }
    startMs: number
    holdMs: number
  } | null
): { renderIndicator: RenderIndicator | undefined; expired: boolean } {
  if (!indicator) return { renderIndicator: undefined, expired: false }

  const elapsed = performance.now() - indicator.startMs
  const FADE_IN = 200
  const HOLD = indicator.holdMs
  const FADE_OUT = 1000
  const total = FADE_IN + HOLD + FADE_OUT
  let alpha: number
  if (elapsed < FADE_IN) {
    alpha = elapsed / FADE_IN
  } else if (elapsed < FADE_IN + HOLD) {
    alpha = 1
  } else if (elapsed < total) {
    alpha = 1 - (elapsed - FADE_IN - HOLD) / FADE_OUT
  } else {
    return { renderIndicator: undefined, expired: true }
  }

  if (alpha > 0) {
    return {
      renderIndicator: {
        numbers: indicator.numbers,
        range: indicator.range,
        alpha,
      },
      expired: false,
    }
  }
  return { renderIndicator: undefined, expired: true }
}

// ── Effective hovered value ─────────────────────────────────────────

export function computeEffectiveHovered(
  tourState: { phase: string; stopIndex: number | null },
  hoveredValue: number | null
): number | null {
  if (tourState.phase !== 'idle' && tourState.phase !== 'fading' && tourState.stopIndex !== null) {
    return PRIME_TOUR_STOPS[tourState.stopIndex]?.hoverValue ?? hoveredValue
  }
  return hoveredValue
}