@parent-tobias/chord-component 1.0.0

package/src/chord-data-service.ts

@@ -0,0 +1,275 @@
+/**
+ * Chord Data Service
+ *
+ * This service provides a unified interface for accessing chord data.
+ * It implements a caching strategy using IndexedDB:
+ * 1. First checks IndexedDB for cached data
+ * 2. Falls back to local default chord data if not found
+ * 3. Caches the data in IndexedDB for future use
+ * 4. Can be easily extended to fetch from a remote API
+ */
+
+import { indexedDBService } from './indexed-db-service.js';
+import { systemDefaultChords, type InstrumentDefault } from './default-chords.js';
+
+export interface ChordDataSource {
+  type: 'indexeddb' | 'local' | 'api';
+  timestamp?: number;
+}
+
+export interface ChordDataResult {
+  data: Record<string, InstrumentDefault>;
+  source: ChordDataSource;
+}
+
+class ChordDataService {
+  private useRemoteAPI: boolean = false;
+  private apiEndpoint: string = '';
+
+  /**
+   * Configure the service to use a remote API endpoint
+   */
+  configureAPI(endpoint: string) {
+    this.apiEndpoint = endpoint;
+    this.useRemoteAPI = true;
+  }
+
+  /**
+   * Disable remote API and use local data
+   */
+  disableAPI() {
+    this.useRemoteAPI = false;
+  }
+
+  /**
+   * Get chord data for a specific instrument
+   * This method implements the fallback chain: IndexedDB -> API -> Local
+   */
+  async getChordData(instrument: string): Promise<ChordDataResult> {
+    // Step 1: Try to get from IndexedDB cache
+    try {
+      const cachedData = await indexedDBService.getChordData(instrument);
+
+      if (cachedData && cachedData.chords) {
+        console.log(`[ChordDataService] Loaded ${instrument} from IndexedDB cache`);
+        return {
+          data: cachedData.chords,
+          source: { type: 'indexeddb', timestamp: cachedData.timestamp }
+        };
+      }
+    } catch (error) {
+      console.warn('[ChordDataService] IndexedDB error, falling back:', error);
+    }
+
+    // Step 2: Try to fetch from remote API if configured
+    if (this.useRemoteAPI && this.apiEndpoint) {
+      try {
+        const apiData = await this.fetchFromAPI(instrument);
+
+        if (apiData) {
+          console.log(`[ChordDataService] Loaded ${instrument} from remote API`);
+
+          // Cache the API data in IndexedDB for future use
+          await this.cacheChordData(instrument, apiData);
+
+          return {
+            data: apiData,
+            source: { type: 'api', timestamp: Date.now() }
+          };
+        }
+      } catch (error) {
+        console.warn('[ChordDataService] API fetch error, falling back to local:', error);
+      }
+    }
+
+    // Step 3: Fall back to local default data
+    console.log(`[ChordDataService] Loaded ${instrument} from local defaults`);
+    const localData = systemDefaultChords[instrument] || {};
+
+    // Cache the local data in IndexedDB for future use
+    await this.cacheChordData(instrument, localData);
+
+    return {
+      data: localData,
+      source: { type: 'local', timestamp: Date.now() }
+    };
+  }
+
+  /**
+   * Fetch chord data from remote API
+   * This is a placeholder that can be implemented when API is ready
+   */
+  private async fetchFromAPI(instrument: string): Promise<Record<string, InstrumentDefault> | null> {
+    if (!this.apiEndpoint) {
+      return null;
+    }
+
+    try {
+      const url = `${this.apiEndpoint}?instrument=${encodeURIComponent(instrument)}`;
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return data.chords || data; // Flexible response format
+    } catch (error) {
+      console.error('[ChordDataService] API fetch error:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Cache chord data in IndexedDB
+   */
+  private async cacheChordData(instrument: string, chords: Record<string, InstrumentDefault>): Promise<void> {
+    try {
+      await indexedDBService.setChordData(instrument, chords);
+      console.log(`[ChordDataService] Cached ${instrument} in IndexedDB`);
+    } catch (error) {
+      console.warn('[ChordDataService] Failed to cache in IndexedDB:', error);
+    }
+  }
+
+  /**
+   * Get all available instruments from local defaults
+   * In the future, this could also query the API
+   */
+  getAvailableInstruments(): string[] {
+    return Object.keys(systemDefaultChords);
+  }
+
+  /**
+   * Clear all cached data from IndexedDB
+   */
+  async clearCache(): Promise<void> {
+    await indexedDBService.clearAll();
+    console.log('[ChordDataService] Cache cleared');
+  }
+
+  /**
+   * Force refresh data from source (API or local) and update cache
+   */
+  async refreshData(instrument: string): Promise<ChordDataResult> {
+    // If using API, fetch fresh data
+    if (this.useRemoteAPI && this.apiEndpoint) {
+      try {
+        const apiData = await this.fetchFromAPI(instrument);
+
+        if (apiData) {
+          await this.cacheChordData(instrument, apiData);
+          return {
+            data: apiData,
+            source: { type: 'api', timestamp: Date.now() }
+          };
+        }
+      } catch (error) {
+        console.warn('[ChordDataService] Refresh from API failed:', error);
+      }
+    }
+
+    // Fall back to local data
+    const localData = systemDefaultChords[instrument] || {};
+    await this.cacheChordData(instrument, localData);
+
+    return {
+      data: localData,
+      source: { type: 'local', timestamp: Date.now() }
+    };
+  }
+
+  /**
+   * Check if a specific chord exists for an instrument
+   */
+  async hasChord(instrument: string, chordName: string): Promise<boolean> {
+    const result = await this.getChordData(instrument);
+    return chordName in result.data;
+  }
+
+  /**
+   * Get data for a specific chord
+   * @param instrument - The instrument name
+   * @param chordName - The chord name
+   * @param preferUser - If true, returns user override if it exists; if false, returns system default only
+   */
+  async getChord(instrument: string, chordName: string, preferUser: boolean = true): Promise<InstrumentDefault | null> {
+    // Check for user override first if preferUser is true
+    if (preferUser) {
+      try {
+        const userChord = await indexedDBService.getUserChord(instrument, chordName);
+        if (userChord) {
+          return {
+            fingers: userChord.fingers,
+            barres: userChord.barres,
+            position: userChord.position
+          };
+        }
+      } catch (error) {
+        console.warn('[ChordDataService] Failed to get user chord:', error);
+      }
+    }
+
+    // Fall back to system default
+    const result = await this.getChordData(instrument);
+    return result.data[chordName] || null;
+  }
+
+  /**
+   * Save a user-defined chord override
+   */
+  async saveUserChord(instrument: string, chordName: string, chordData: InstrumentDefault): Promise<void> {
+    await indexedDBService.saveUserChord(instrument, chordName, chordData);
+    console.log(`[ChordDataService] Saved user chord: ${instrument} - ${chordName}`);
+  }
+
+  /**
+   * Delete a user-defined chord override (revert to system default)
+   */
+  async deleteUserChord(instrument: string, chordName: string): Promise<void> {
+    await indexedDBService.deleteUserChord(instrument, chordName);
+    console.log(`[ChordDataService] Deleted user chord: ${instrument} - ${chordName}`);
+  }
+
+  /**
+   * Get all user-defined chords for an instrument
+   */
+  async getUserChordsByInstrument(instrument: string): Promise<Array<{ chordName: string, data: InstrumentDefault }>> {
+    const userChords = await indexedDBService.getUserChordsByInstrument(instrument);
+    return userChords.map(chord => ({
+      chordName: chord.chordName,
+      data: {
+        fingers: chord.fingers,
+        barres: chord.barres,
+        position: chord.position
+      }
+    }));
+  }
+
+  /**
+   * Get all user-defined chords across all instruments
+   */
+  async getAllUserChords(): Promise<Array<{ instrument: string, chordName: string, data: InstrumentDefault }>> {
+    const userChords = await indexedDBService.getAllUserChords();
+    return userChords.map(chord => ({
+      instrument: chord.instrument,
+      chordName: chord.chordName,
+      data: {
+        fingers: chord.fingers,
+        barres: chord.barres,
+        position: chord.position
+      }
+    }));
+  }
+
+  /**
+   * Clear all user-defined chord overrides
+   */
+  async clearUserChords(): Promise<void> {
+    await indexedDBService.clearUserChords();
+    console.log('[ChordDataService] Cleared all user chords');
+  }
+}
+
+// Export a singleton instance
+export const chordDataService = new ChordDataService();

package/src/chord-diagram.ts

@@ -0,0 +1,255 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { SVGuitarChord } from 'svguitar';
+
+import { instruments, chordOnInstrument, chordToNotes } from './music-utils.js';
+import { chordDataService } from './chord-data-service.js';
+import type { InstrumentDefault } from './default-chords.js';
+
+/**
+ * A web component that displays a chord diagram for various instruments.
+ * 
+ * @element chord-diagram
+ * 
+ * @attr {string} instrument - The instrument to display the chord for (default: 'Standard Ukulele')
+ * @attr {string} chord - The chord name to display (e.g., 'C', 'Am7', 'F#dim')
+ * 
+ * @example
+ * ```html
+ * <chord-diagram chord="C" instrument="Standard Ukulele"></chord-diagram>
+ * <chord-diagram chord="Am7" instrument="Standard Guitar"></chord-diagram>
+ * ```
+ */
+@customElement('chord-diagram')
+export class ChordDiagram extends LitElement {
+
+	static styles = css`
+	:host {
+		display: block;
+		width: 100%;
+		min-width: 100px;
+		max-width: 150px;
+		border: 1px solid #4a5568;
+		border-radius: 4px;
+		background: #2d3748;
+		padding: 0.5rem;
+		box-sizing: border-box;
+	}
+
+	.chord {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+	}
+
+	.chord span {
+		color: #f8f8f8;
+		font-size: 0.9rem;
+		font-weight: 500;
+		margin-bottom: 0.25rem;
+		text-align: center;
+	}
+
+	.diagram {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	.diagram :global(svg) {
+		max-width: 100%;
+		height: auto;
+	}
+
+	.error {
+		color: #fc8181;
+		font-size: 0.8rem;
+		text-align: center;
+		padding: 0.5rem;
+	}
+	`
+
+	/**
+	 * The instrument to display the chord for
+	 */
+	@property({
+		type: String
+	})
+	instrument = 'Standard Ukulele';
+
+	/**
+	 * The chord name to display
+	 */
+	@property({
+		type: String
+	})
+	chord = '';
+
+	@query('.diagram')
+	container?: HTMLElement;
+
+	@state()
+	private chordData: Record<string, InstrumentDefault> = {};
+
+	@state()
+	private isLoading = false;
+
+	@state()
+	private loadError: string | null = null;
+
+	async connectedCallback() {
+		super.connectedCallback();
+		await this.loadChordData();
+	}
+
+	async updated(changedProperties: Map<string, any>) {
+		super.updated(changedProperties);
+
+		// Reload chord data if instrument changes
+		if (changedProperties.has('instrument')) {
+			await this.loadChordData();
+		}
+	}
+
+	private async loadChordData() {
+		this.isLoading = true;
+		this.loadError = null;
+
+		try {
+			const result = await chordDataService.getChordData(this.instrument);
+			this.chordData = result.data;
+		} catch (error) {
+			console.error('Failed to load chord data:', error);
+			this.loadError = 'Failed to load chord data';
+			this.chordData = {};
+		} finally {
+			this.isLoading = false;
+		}
+	}
+
+	render() {
+		if (this.isLoading) {
+			return html`
+				<div class='chord'>
+					<div style="color: #90cdf4; font-size: 0.8rem; text-align: center; padding: 0.5rem;">
+						Loading...
+					</div>
+				</div>
+			`;
+		}
+
+		if (this.loadError) {
+			return html`
+				<div class='chord'>
+					<div class='error'>${this.loadError}</div>
+				</div>
+			`;
+		}
+
+		if (!this.chord) {
+			return html`
+				<div class='chord'>
+					<div class='error'>No chord specified</div>
+				</div>
+			`;
+		}
+
+		const instrumentObject = instruments.find(({name}) => name === this.instrument);
+		
+		if (!instrumentObject) {
+			return html`
+				<div class='chord'>
+					<span>${this.chord.replace(/(maj)$/, '')}</span>
+					<div class='error'>Unknown instrument: ${this.instrument}</div>
+				</div>
+			`;
+		}
+
+		const chordFinder = chordOnInstrument(instrumentObject);
+		
+		// Given the chord name (G7, Bbmin), we need the notes in the chord
+		const chordObject = chordToNotes(this.chord);
+
+		if (!chordObject || !chordObject.notes || chordObject.notes.length === 0) {
+			return html`
+				<div class='chord'>
+					<span>${this.chord.replace(/(maj)$/, '')}</span>
+					<div class='error'>Unknown chord: ${this.chord}</div>
+				</div>
+			`;
+		}
+
+		// Check if we have a default for this chord/instrument combination
+		const chartSettings = this.chordData[this.chord] ?
+			this.chordData[this.chord] :
+			{
+				barres: [],
+				fingers: chordFinder(chordObject) || []
+			};
+
+		// Auto-calculate position based on chord data (not stored with chord)
+		const arrayOfFrets: number[] = chartSettings.fingers.map(([, fret]): number =>
+			typeof fret === 'number' ? fret : Infinity
+		);
+		const barreFrets = chartSettings.barres.map((b: any) => typeof b.fret === 'number' ? b.fret : 0);
+		const allChordFrets = [...arrayOfFrets, ...barreFrets];
+
+		const minChordFret = allChordFrets.length > 0 ? Math.min(...allChordFrets.filter(f => f > 0)) : 1;
+		const maxChordFret = allChordFrets.length > 0 ? Math.max(...allChordFrets, 0) : 4;
+
+		let position = 1;
+		if (maxChordFret > 4) {
+			// For high chords, start from the lowest fret
+			position = Math.max(1, minChordFret);
+		}
+
+		// Determine fret range to display
+		let fretCount: number;
+		let displayPosition: number;
+
+		if (position > 1 || maxChordFret > 4) {
+			// High position chord - show from position
+			fretCount = Math.max(maxChordFret - position + 1, 4);
+			displayPosition = position;
+		} else {
+			// Low position chord - show from fret 1
+			fretCount = Math.max(maxChordFret, 4);
+			displayPosition = 1;
+		}
+
+		// Create a container div for SVGuitar
+		const divEl = document.createElement("div");
+
+		try {
+			const chart = new SVGuitarChord(divEl);
+			chart
+				.configure({
+					strings: instrumentObject.strings.length,
+					frets: fretCount,
+					position: displayPosition,
+					tuning: [...instrumentObject.strings]
+				})
+				.chord({
+					fingers: chartSettings.fingers,
+					barres: chartSettings.barres
+				})
+				.draw();
+
+			return html`
+				<div class='chord'>
+					<span>${this.chord.replace(/(maj)$/, '')}</span>
+					<div class='diagram'>${divEl.firstChild}</div>
+				</div>
+			`;
+		} catch (error) {
+			console.error('Error generating chord diagram:', error);
+			return html`
+				<div class='chord'>
+					<span>${this.chord.replace(/(maj)$/, '')}</span>
+					<div class='error'>Error generating diagram</div>
+				</div>
+			`;
+		}
+	}
+}