Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* 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
}
|