+ ); + } + + // Generate labels + const labels = [ + { value: -20, angle: -36 }, + { value: 0, angle: 0 }, + { value: 20, angle: 36 }, + { value: 40, angle: 72 }, + ]; + + return ( +

+ {/* Gloss */} + + + {/* Marks */} +

{marks}

+ + {/* Labels */} +

+ {labels.map(({ value, angle }) => { + const radius = 120; + const radian = (angle * Math.PI) / 180; + const x = 50 + radius * Math.sin(radian); + const y = 50 - radius * Math.cos(radian); + + return ( + + {value} + + ); + })} +

+ + {/* Note display with color feedback */} +

+ {note ? formatNote(note) : '—'} +

+ + {/* Needle */} +

+ + {/* Center cap */} +

+ ); +} diff --git a/src/presentation/components/ErrorBoundary.tsx b/src/presentation/components/ErrorBoundary.tsx new file mode 100644 index 0000000..ba67d21 --- /dev/null +++ b/src/presentation/components/ErrorBoundary.tsx @@ -0,0 +1,52 @@ +import { Component, type ErrorInfo, type ReactNode } from 'react'; + +interface Props { + children: ReactNode; +} + +interface State { + hasError: boolean; + error: Error | null; +} + +export class ErrorBoundary extends Component { + public state: State = { + hasError: false, + error: null, + }; + + public static getDerivedStateFromError(error: Error): State { + return { hasError: true, error }; + } + + public componentDidCatch(error: Error, errorInfo: ErrorInfo) { + console.error('Uncaught error:', error, errorInfo); + } + + public render() { + if (this.state.hasError) { + return ( +

😵

Oops! Something went wrong.

+ The tuner crashed. This might be due to a temporary glitch. +

+ {this.state.error?.message} +

+ +

+ ); + } + + return this.props.children; + } +} diff --git a/src/presentation/components/ErrorMessage.tsx b/src/presentation/components/ErrorMessage.tsx new file mode 100644 index 0000000..9c8ae84 --- /dev/null +++ b/src/presentation/components/ErrorMessage.tsx @@ -0,0 +1,37 @@ +/** + * Error message component with Tailwind styling. + */ + +import { Button } from './Button'; + +interface ErrorMessageProps { + error: Error; + onRetry?: () => void; +} + +export function ErrorMessage({ error, onRetry }: ErrorMessageProps) { + const isPermissionError = error.message.includes('microphone') || error.message.includes('permission'); + + return ( +

+ ⚠️ +

+ {isPermissionError ? 'Microphone Access Required' : 'Error'} +

+ {error.message} +

+ {onRetry && ( +

+ +

+ )} +

+ ); +} diff --git a/src/presentation/components/FrequencyDisplay.tsx b/src/presentation/components/FrequencyDisplay.tsx new file mode 100644 index 0000000..eea3e6d --- /dev/null +++ b/src/presentation/components/FrequencyDisplay.tsx @@ -0,0 +1,15 @@ +/** + * Displays the detected frequency in Hz. + */ + +interface FrequencyDisplayProps { + frequency: number | null; +} + +export function FrequencyDisplay({ frequency }: FrequencyDisplayProps) { + return ( +

+ {frequency ? `${frequency.toFixed(1)} Hz` : '- - -'} +

+ ); +} diff --git a/src/presentation/components/Header.tsx b/src/presentation/components/Header.tsx new file mode 100644 index 0000000..dd16ccd --- /dev/null +++ b/src/presentation/components/Header.tsx @@ -0,0 +1,18 @@ +import { StatusIndicator } from "./StatusIndicator"; + +interface HeaderProps { + status: 'idle' | 'listening' | 'error'; +} + +export default function Header({ status }: HeaderProps) { + return

+ 🌍 + Tuner +

+ +

; +} \ No newline at end of file diff --git a/src/presentation/components/InstrumentSelector.tsx b/src/presentation/components/InstrumentSelector.tsx new file mode 100644 index 0000000..e14bb36 --- /dev/null +++ b/src/presentation/components/InstrumentSelector.tsx @@ -0,0 +1,43 @@ +/** + * Instrument selector component with Tailwind styling. + * Allows switching between guitar, piano, and ukulele. + */ + +import type { InstrumentType } from '../../domain/types'; + +interface InstrumentSelectorProps { + value: InstrumentType; + onChange: (type: InstrumentType) => void; +} + +const instruments: { type: InstrumentType; label: string; emoji: string }[] = [ + { type: 'guitar', label: 'Guitar', emoji: '🎸' }, + { type: 'piano', label: 'Piano', emoji: '🎹' }, + { type: 'ukulele', label: 'Ukulele', emoji: '🎻' }, +]; + +export function InstrumentSelector({ value, onChange }: InstrumentSelectorProps) { + return ( +

+ {instruments.map((instrument) => { + const isActive = value === instrument.type; + return ( + + ); + })} +

+ ); +} diff --git a/src/presentation/components/NoteDisplay.tsx b/src/presentation/components/NoteDisplay.tsx new file mode 100644 index 0000000..8e20dc9 --- /dev/null +++ b/src/presentation/components/NoteDisplay.tsx @@ -0,0 +1,20 @@ +/** + * Displays the detected note name and octave. + */ + +import type { Note } from '../../domain/types'; +import { formatNote } from '../../domain/note-converter'; + +interface NoteDisplayProps { + note: Note | null; +} + +export function NoteDisplay({ note }: NoteDisplayProps) { + return ( +

+ {note ? formatNote(note) : '--'} +

+ ); +} diff --git a/src/presentation/components/StatusIndicator.tsx b/src/presentation/components/StatusIndicator.tsx new file mode 100644 index 0000000..da33ae0 --- /dev/null +++ b/src/presentation/components/StatusIndicator.tsx @@ -0,0 +1,36 @@ +/** + *Status indicator component. + */ + +interface StatusIndicatorProps { + status: 'listening' | 'idle' | 'error'; +} + +const statusConfig = { + listening: { + label: 'Listening...', + dotClass: 'animate-pulse', + dotStyle: { background: 'var(--color-success)', boxShadow: '0 0 10px var(--color-success)' } + }, + idle: { + label: 'Ready', + dotClass: '', + dotStyle: { background: 'hsl(210, 15%, 70%)' } + }, + error: { + label: 'Error', + dotClass: '', + dotStyle: { background: 'var(--color-error)' } + } +}; + +export function StatusIndicator({ status }: StatusIndicatorProps) { + const config = statusConfig[status]; + + return ( +

+ {config.label} +

+ ); +} diff --git a/src/presentation/components/StringGuide.tsx b/src/presentation/components/StringGuide.tsx new file mode 100644 index 0000000..bc6add0 --- /dev/null +++ b/src/presentation/components/StringGuide.tsx @@ -0,0 +1,97 @@ +/** + * String-by-string tuning guide component. + * Shows all strings with visual status indicators. + */ + +import type { Tuning } from '../../domain/tunings'; + +interface StringGuideProps { + tuning: Tuning; + detectedFrequency: number | null; +} + +export function StringGuide({ tuning, detectedFrequency }: StringGuideProps) { + // Find the closest string to the detected frequency + const getStringStatus = (stringFreq: number) => { + if (!detectedFrequency) { + return { color: 'bg-gray-400/30', isClosest: false, diff: 0 }; + } + + const cents = 1200 * Math.log2(detectedFrequency / stringFreq); + const absCents = Math.abs(cents); + + // Determine if this is the closest string + const isClosest = tuning.strings.every(s => + Math.abs(detectedFrequency - stringFreq) <= Math.abs(detectedFrequency - s.frequency) + ); + + if (!isClosest) { + return { color: 'bg-gray-400/30', isClosest: false, diff: cents }; + } + + // Color based on tuning accuracy + let color = 'bg-gray-400/30'; + if (absCents <= 5) { + color = 'bg-green-500/80'; + } else if (absCents <= 15) { + color = 'bg-yellow-500/80'; + } else if (absCents <= 30) { + color = 'bg-orange-500/80'; + } else { + color = 'bg-red-500/80'; + } + + return { color, isClosest: true, diff: cents }; + }; + + return ( +

+ {tuning.strings.map((string, index) => { + const status = getStringStatus(string.frequency); + + return ( +

+ {/* String name */} +

+ {string.name} +

+ + {/* Visual string line */} +

+ {/* Status indicator */} + {status.isClosest && ( +

+ )} +

+ + {/* Frequency */} +

+ {string.frequency.toFixed(0)} Hz +

+ + {/* Cents indicator */} + {status.isClosest && detectedFrequency && ( +

+ {status.diff > 0 ? '+' : ''}{status.diff.toFixed(0)}¢ +

+ )} +

+ ); + })} +

+ ); +} diff --git a/src/presentation/components/TunerInterface.tsx b/src/presentation/components/TunerInterface.tsx new file mode 100644 index 0000000..d507484 --- /dev/null +++ b/src/presentation/components/TunerInterface.tsx @@ -0,0 +1,124 @@ +/** + * Main tuner interface with Tailwind styling. + */ + +import { useState, useEffect } from 'react'; +import { useTuner } from '../hooks/useTuner'; +import { useInstrument } from '../hooks/useInstrument'; +import { useTuning } from '../hooks/useTuning'; +import { Button } from './Button'; +import { FrequencyDisplay } from './FrequencyDisplay'; +import { CircularGauge } from './CircularGauge'; +import { InstrumentSelector } from './InstrumentSelector'; +import { TuningSelector } from './TuningSelector'; +import { ErrorMessage } from './ErrorMessage'; +import { StringGuide } from './StringGuide'; +import { WaveformDisplay } from './WaveformDisplay'; +import Header from './Header'; + +export function TunerInterface() { + const { instrument, setInstrument } = useInstrument(); + const { tuning, availableTunings, changeTuning } = useTuning(instrument); + const { isActive, error, start, stop, frequency, note, tuningState, audioService } = useTuner(tuning); + + // Persisted state for Pro Mode + const [isProMode, setIsProMode] = useState(() => { + const saved = localStorage.getItem('aero-tuner-pro-mode'); + return saved !== null ? JSON.parse(saved) : false; + }); + + useEffect(() => { + localStorage.setItem('aero-tuner-pro-mode', JSON.stringify(isProMode)); + }, [isProMode]); + + const handleToggle = () => { + if (isActive) { + stop(); + } else { + start(); + } + }; + + const instrumentConfig = { + name: tuning.name, + type: instrument + }; + + const status = error ? 'error' : isActive ? 'listening' : 'idle'; + + return ( + <> + {/* Header */} +

+ +

+ {/* Error */} + {error && } + + {/* Gauge */} + + + {/* Frequency */} + + + {/* String Guide (Pro Only) */} + {isProMode && ( + + )} + + {/* Instruments */} + + + {/* Button */} +

+ +

+ + {/* Waveform Display (Pro Only) */} + {isProMode && ( + + )} + + {/* Info */} +

+ {instrumentConfig.name} +

+ {isActive + ? 'Play a note on your instrument' + : 'Click Tune to begin'} +

+ + {/* Pro Controls */} +

+ {/* Tuning Selector (Pro Only) */} + {isProMode && ( + + )} + + {/* Mode Toggle */} + +

+ + ); +} diff --git a/src/presentation/components/TuningMeter.tsx b/src/presentation/components/TuningMeter.tsx new file mode 100644 index 0000000..92e4d99 --- /dev/null +++ b/src/presentation/components/TuningMeter.tsx @@ -0,0 +1,45 @@ +/** + * Visual gauge showing tuning accuracy. + * Displays deviation from target pitch. + */ + +import type { TuningState } from '../../domain/types'; + +interface TuningMeterProps { + tuningState: TuningState | null; +} + +export function TuningMeter({ tuningState }: TuningMeterProps) { + if (!tuningState) { + return ( +

+ Flat + In Tune + Sharp +

+ ); + } + + // Calculate meter position (-50 to +50 cents -> 0% to 100%) + const maxCents = 50; + const clampedCents = Math.max(-maxCents, Math.min(maxCents, tuningState.cents)); + const position = 50 + (clampedCents / maxCents) * 50; // 0-100% + + return ( +

+ Flat + {tuningState.cents > 0 ? '+' : ''}{tuningState.cents}¢ + Sharp +

+ ); +} diff --git a/src/presentation/components/TuningSelector.tsx b/src/presentation/components/TuningSelector.tsx new file mode 100644 index 0000000..ea87ba8 --- /dev/null +++ b/src/presentation/components/TuningSelector.tsx @@ -0,0 +1,47 @@ +/** + * Tuning selector component with Tailwind styling. + */ + +import type { Tuning } from '../../domain/tunings'; + +interface TuningSelectorProps { + tunings: Tuning[]; + selectedTuning: Tuning; + onChange: (tuning: Tuning) => void; +} + +export function TuningSelector({ tunings, selectedTuning, onChange }: TuningSelectorProps) { + // Don't show selector if there's only one tuning option + if (tunings.length <= 1) { + return null; + } + + return ( +

+ + Tuning + + +

+ ); +} diff --git a/src/presentation/components/WaveformDisplay.tsx b/src/presentation/components/WaveformDisplay.tsx new file mode 100644 index 0000000..03b6565 --- /dev/null +++ b/src/presentation/components/WaveformDisplay.tsx @@ -0,0 +1,120 @@ +/** + * Real-time waveform display component using Canvas. + */ + +import { useEffect, useRef } from 'react'; +import type { AudioCaptureService } from '../../infrastructure/audio-capture'; + +interface WaveformDisplayProps { + audioService: AudioCaptureService | null; + isActive: boolean; +} + +export function WaveformDisplay({ audioService, isActive }: WaveformDisplayProps) { + const canvasRef = useRef(null); + const rafIdRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas || !audioService || !isActive) { + return; + } + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const analyser = audioService.getAnalyser(); + if (!analyser) return; + + const bufferLength = analyser.fftSize; + const dataArray = new Float32Array(bufferLength); + + // Set canvas size + const resizeCanvas = () => { + const rect = canvas.getBoundingClientRect(); + canvas.width = rect.width * window.devicePixelRatio; + canvas.height = rect.height * window.devicePixelRatio; + ctx.scale(window.devicePixelRatio, window.devicePixelRatio); + }; + + resizeCanvas(); + window.addEventListener('resize', resizeCanvas); + + const draw = () => { + if (!isActive) return; + + // Get waveform data + analyser.getFloatTimeDomainData(dataArray); + + const width = canvas.width / window.devicePixelRatio; + const height = canvas.height / window.devicePixelRatio; + + // Clear canvas with gradient background + const bgGradient = ctx.createLinearGradient(0, 0, 0, height); + bgGradient.addColorStop(0, 'hsla(200, 60%, 30%, 0.2)'); + bgGradient.addColorStop(1, 'hsla(200, 60%, 20%, 0.3)'); + ctx.fillStyle = bgGradient; + ctx.fillRect(0, 0, width, height); + + // Draw waveform + const sliceWidth = width / bufferLength; + let x = 0; + + // Create gradient for waveform + const gradient = ctx.createLinearGradient(0, 0, 0, height); + gradient.addColorStop(0, 'hsl(180, 80%, 60%)'); + gradient.addColorStop(0.5, 'hsl(200, 80%, 50%)'); + gradient.addColorStop(1, 'hsl(220, 80%, 40%)'); + + ctx.strokeStyle = gradient; + ctx.lineWidth = 2; + ctx.shadowBlur = 4; + ctx.shadowColor = 'hsla(200, 80%, 50%, 0.5)'; + ctx.beginPath(); + + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i]; + const y = (v + 1) * height / 2; // Convert from [-1, 1] to [0, height] + + if (i === 0) { + ctx.moveTo(x, y); + } else { + ctx.lineTo(x, y); + } + + x += sliceWidth; + } + + ctx.stroke(); + ctx.shadowBlur = 0; + + rafIdRef.current = requestAnimationFrame(draw); + }; + + draw(); + + return () => { + window.removeEventListener('resize', resizeCanvas); + if (rafIdRef.current !== null) { + cancelAnimationFrame(rafIdRef.current); + rafIdRef.current = null; + } + }; + }, [audioService, isActive]); + + if (!isActive) { + return null; + } + + return ( +

+ ); +} diff --git a/src/presentation/hooks/useAudioCapture.ts b/src/presentation/hooks/useAudioCapture.ts new file mode 100644 index 0000000..c2ccc77 --- /dev/null +++ b/src/presentation/hooks/useAudioCapture.ts @@ -0,0 +1,73 @@ +/** + * Hook for managing audio capture lifecycle. + */ + +import { useEffect, useRef, useState, useCallback } from 'react'; +import { AudioCaptureService } from '../../infrastructure/audio-capture'; +import type { AudioDataCallback } from '../../infrastructure/audio-capture'; + +interface UseAudioCaptureResult { + isActive: boolean; + error: Error | null; + start: () => Promise; + stop: () => void; + onAudioData: (callback: AudioDataCallback) => void; + sampleRate: number; + audioService: AudioCaptureService | null; +} + +export function useAudioCapture(): UseAudioCaptureResult { + const serviceRef = useRef(null); + const [isActive, setIsActive] = useState(false); + const [error, setError] = useState(null); + const [sampleRate, setSampleRate] = useState(44100); + + // Initialize service + useEffect(() => { + serviceRef.current = new AudioCaptureService(); + + return () => { + if (serviceRef.current) { + serviceRef.current.stop(); + serviceRef.current = null; + } + }; + }, []); + + const start = async () => { + if (!serviceRef.current) return; + + try { + setError(null); + await serviceRef.current.start(); + setIsActive(true); + setSampleRate(serviceRef.current.getSampleRate()); + } catch (err) { + setError(err as Error); + setIsActive(false); + } + }; + + const stop = () => { + if (serviceRef.current) { + serviceRef.current.stop(); + setIsActive(false); + } + }; + + const onAudioData = useCallback((callback: AudioDataCallback) => { + if (serviceRef.current) { + serviceRef.current.onAudioData(callback); + } + }, []); + + return { + isActive, + error, + start, + stop, + onAudioData, + sampleRate, + audioService: serviceRef.current, + }; +} diff --git a/src/presentation/hooks/useFFTPitchDetection.ts b/src/presentation/hooks/useFFTPitchDetection.ts new file mode 100644 index 0000000..9161deb --- /dev/null +++ b/src/presentation/hooks/useFFTPitchDetection.ts @@ -0,0 +1,60 @@ +/** + * Hook for FFT-based pitch detection. + */ + +import { useEffect, useRef, useState } from 'react'; +import { FFTPitchDetector } from '../../infrastructure/fft-pitch-detector'; +import type { AudioCaptureService } from '../../infrastructure/audio-capture'; + +interface UseFFTPitchDetectionProps { + audioService: AudioCaptureService | null; + isActive: boolean; +} + +export function useFFTPitchDetection({ audioService, isActive }: UseFFTPitchDetectionProps): number | null { + const detectorRef = useRef(null); + const [frequency, setFrequency] = useState(null); + const rafIdRef = useRef(null); + + useEffect(() => { + // Clear frequency when inactive + if (!isActive || !audioService) { + setFrequency(null); + detectorRef.current = null; // Clear detector when inactive + return; + } + + const analyser = audioService.getAnalyser(); + const sampleRate = audioService.getSampleRate(); + + if (!analyser) { + setFrequency(null); + return; + } + + // Always create a fresh FFT pitch detector with the current analyser + // This is important because the analyser node can change when audio restarts + detectorRef.current = new FFTPitchDetector(analyser, sampleRate); + + // Start detection loop + const detect = () => { + if (detectorRef.current && audioService.isActive()) { + const detectedFrequency = detectorRef.current.detectPitch(); + setFrequency(detectedFrequency); + } + rafIdRef.current = requestAnimationFrame(detect); + }; + + detect(); + + // Cleanup + return () => { + if (rafIdRef.current !== null) { + cancelAnimationFrame(rafIdRef.current); + rafIdRef.current = null; + } + }; + }, [audioService, isActive]); + + return frequency; +} diff --git a/src/presentation/hooks/useInstrument.ts b/src/presentation/hooks/useInstrument.ts new file mode 100644 index 0000000..81188d8 --- /dev/null +++ b/src/presentation/hooks/useInstrument.ts @@ -0,0 +1,24 @@ +/** + * Hook for managing instrument selection. + */ + +import { useState } from 'react'; +import type { InstrumentType, InstrumentConfig } from '../../domain/types'; +import { getInstrumentConfig } from '../../domain/instruments'; + +interface UseInstrumentResult { + instrument: InstrumentType; + setInstrument: (type: InstrumentType) => void; + config: InstrumentConfig; +} + +export function useInstrument(initialInstrument: InstrumentType = 'guitar'): UseInstrumentResult { + const [instrument, setInstrument] = useState(initialInstrument); + const config = getInstrumentConfig(instrument); + + return { + instrument, + setInstrument, + config, + }; +} diff --git a/src/presentation/hooks/usePitchDetection.ts b/src/presentation/hooks/usePitchDetection.ts new file mode 100644 index 0000000..e22abef --- /dev/null +++ b/src/presentation/hooks/usePitchDetection.ts @@ -0,0 +1,49 @@ +/** + * Hook for pitch detection from audio data. + */ + +import { useEffect, useRef, useState } from 'react'; +import { PitchDetector } from '../../infrastructure/pitch-detector'; + +interface UsePitchDetectionProps { + isActive: boolean; + onAudioData: (callback: (data: Float32Array) => void) => void; + sampleRate: number; +} + +interface UsePitchDetectionResult { + frequency: number | null; +} + +export function usePitchDetection({ + isActive, + onAudioData, + sampleRate, +}: UsePitchDetectionProps): UsePitchDetectionResult { + const detectorRef = useRef(null); + const [frequency, setFrequency] = useState(null); + + // Initialize pitch detector with correct sample rate + useEffect(() => { + detectorRef.current = new PitchDetector(sampleRate); + }, [sampleRate]); + + // Set up audio data processing + useEffect(() => { + if (!isActive) { + setFrequency(null); + return; + } + + const handleAudioData = (data: Float32Array) => { + if (detectorRef.current) { + const detectedFrequency = detectorRef.current.detectPitch(data); + setFrequency(detectedFrequency); + } + }; + + onAudioData(handleAudioData); + }, [isActive, onAudioData]); + + return { frequency }; +} diff --git a/src/presentation/hooks/useTuner.ts b/src/presentation/hooks/useTuner.ts new file mode 100644 index 0000000..dd6896c --- /dev/null +++ b/src/presentation/hooks/useTuner.ts @@ -0,0 +1,66 @@ +/** + * Main tuner hook - orchestrates all tuner functionality. + * Combines audio capture, FFT pitch detection, and tuning calculation. + */ + +import { useMemo } from 'react'; +import { useAudioCapture } from './useAudioCapture'; +import { useFFTPitchDetection } from './useFFTPitchDetection'; +import { frequencyToNote } from '../../domain/note-converter'; +import { calculateTuningState } from '../../domain/tuning-calculator'; +import type { Tuning } from '../../domain/tunings'; +import type { Note, TuningState } from '../../domain/types'; + +import type { AudioCaptureService } from '../../infrastructure/audio-capture'; + +interface UseTunerResult { + isActive: boolean; + error: Error | null; + start: () => Promise; + stop: () => void; + frequency: number | null; + note: Note | null; + tuningState: TuningState | null; + audioService: AudioCaptureService | null; +} + +export function useTuner(tuning: Tuning): UseTunerResult { + const { isActive, error, start, stop, audioService } = useAudioCapture(); + const frequency = useFFTPitchDetection({ audioService, isActive }); + + // Convert detected frequency to note + const note = useMemo(() => { + if (!frequency) return null; + return frequencyToNote(frequency); + }, [frequency]); + + // Calculate tuning state based on nearest string in the tuning + const tuningState = useMemo(() => { + if (!frequency || !note) return null; + + // Find the closest string frequency in the tuning + let closestString = tuning.strings[0]; + let minDiff = Math.abs(frequency - closestString.frequency); + + for (const string of tuning.strings) { + const diff = Math.abs(frequency - string.frequency); + if (diff < minDiff) { + minDiff = diff; + closestString = string; + } + } + + return calculateTuningState(frequency, closestString.frequency); + }, [frequency, note, tuning]); + + return { + isActive, + error, + start, + stop, + frequency, + note, + tuningState, + audioService, + }; +} \ No newline at end of file diff --git a/src/presentation/hooks/useTuning.ts b/src/presentation/hooks/useTuning.ts new file mode 100644 index 0000000..54dc39a --- /dev/null +++ b/src/presentation/hooks/useTuning.ts @@ -0,0 +1,82 @@ +/** + * Hook for managing selected tuning state. + * Persists selection to localStorage. + */ + +import { useState, useEffect } from 'react'; +import type { InstrumentType } from '../../domain/types'; +import type { Tuning } from '../../domain/tunings'; +import { getDefaultTuning, getTuningsForInstrument, getTuningById } from '../../domain/tunings'; + +const STORAGE_KEY = 'tuner-selected-tunings'; + +export function useTuning(instrumentType: InstrumentType) { + const [selectedTuning, setSelectedTuning] = useState(() => { + // Try to load from localStorage + const stored = localStorage.getItem(STORAGE_KEY); + if (stored) { + try { + const tunings = JSON.parse(stored); + const tuningId = tunings[instrumentType]; + if (tuningId) { + const tuning = getTuningById(tuningId); + if (tuning) return tuning; + } + } catch { + // Fall through to default + } + } + return getDefaultTuning(instrumentType); + }); + + // Update tuning when instrument changes + useEffect(() => { + const stored = localStorage.getItem(STORAGE_KEY); + let tuningId: string | null = null; + + if (stored) { + try { + const tunings = JSON.parse(stored); + tuningId = tunings[instrumentType]; + } catch { + // Ignore parsing errors + } + } + + if (tuningId) { + const tuning = getTuningById(tuningId); + if (tuning) { + setSelectedTuning(tuning); + return; + } + } + + // Fall back to default + setSelectedTuning(getDefaultTuning(instrumentType)); + }, [instrumentType]); + + const changeTuning = (tuning: Tuning) => { + setSelectedTuning(tuning); + + // Persist to localStorage + const stored = localStorage.getItem(STORAGE_KEY); + let tunings: Record = {}; + + if (stored) { + try { + tunings = JSON.parse(stored); + } catch { + // Start fresh + } + } + + tunings[instrumentType] = tuning.id; + localStorage.setItem(STORAGE_KEY, JSON.stringify(tunings)); + }; + + return { + tuning: selectedTuning, + availableTunings: getTuningsForInstrument(instrumentType), + changeTuning, + }; +} diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..a9b5a59 --- /dev/null +++ b/tsconfig.app.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "types": ["vite/client"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1ffef60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..8a67f62 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2023", + "lib": ["ES2023"], + "module": "ESNext", + "types": ["node"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..e68bf9f --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,49 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import tailwindcss from '@tailwindcss/vite' +import { VitePWA } from 'vite-plugin-pwa' + +export default defineConfig({ + plugins: [ + react({ + babel: { + plugins: [['babel-plugin-react-compiler']], + }, + }), + tailwindcss(), + VitePWA({ + registerType: 'autoUpdate', + devOptions: { + enabled: true + }, + includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'], + manifest: { + name: 'AeroTuner', + short_name: 'AeroTuner', + description: 'A Frutiger Aero styled instrument tuner', + theme_color: '#ffffff', + background_color: '#ffffff', + display: 'standalone', + orientation: 'portrait', + icons: [ + { + src: 'pwa-192x192.png', + sizes: '192x192', + type: 'image/png' + }, + { + src: 'pwa-512x512.png', + sizes: '512x512', + type: 'image/png' + }, + { + src: 'pwa-512x512.png', + sizes: '512x512', + type: 'image/png', + purpose: 'any maskable' + } + ] + } + }) + ], +})