@parent-tobias/chord-component 1.0.0

package/src/chord-list.ts

@@ -0,0 +1,145 @@
+import { LitElement, css, html, type PropertyValues } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './chord-diagram.js';
+
+/**
+ * A web component that displays a list of chord diagrams for a specific instrument.
+ * 
+ * @element chord-list
+ * 
+ * @attr {string} instrument - The instrument to display chords for (default: 'Standard Ukulele')
+ * @attr {string|string[]} chords - JSON string or array of chord names to display
+ * 
+ * @example
+ * ```html
+ * <chord-list instrument="Standard Ukulele" chords='["C", "F", "G", "Am"]'></chord-list>
+ * <chord-list instrument="Standard Guitar" chords='["E", "A", "D"]'></chord-list>
+ * ```
+ */
+@customElement('chord-list')
+export class ChordList extends LitElement {
+	
+	/**
+	 * The instrument to display chords for
+	 */
+	@property({
+		type: String
+	})
+	instrument = 'Standard Ukulele';
+
+	/**
+	 * The chord names to display - can be a JSON string or array
+	 */
+	@property()
+	chords: string | string[] = '[]';
+	
+	/**
+	 * Parsed chord names from the chords property
+	 */
+	private get parsedChords(): string[] {
+		try {
+			if (Array.isArray(this.chords)) {
+				return this.chords;
+			}
+			if (typeof this.chords === 'string') {
+				return JSON.parse(this.chords);
+			}
+			return [];
+		} catch {
+			return [];
+		}
+	}
+
+	/**
+	 * Number of chords in the list (reactive state)
+	 */
+	@state()
+	numChords = 0;
+	
+	static styles = css`
+	:host {
+		display: block;
+		width: 100%;
+		height: fit-content;
+		container-type: inline-size;
+	}
+
+	header {
+		margin-bottom: 0.5rem;
+	}
+
+	header h3 {
+		margin: 0;
+		font-size: 1rem;
+		color: #f8f8f8;
+		font-weight: 600;
+	}
+
+	.list {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+		gap: 0.5rem;
+		align-items: start;
+	}
+
+	.empty-state {
+		color: #a0aec0;
+		font-size: 0.9rem;
+		text-align: center;
+		padding: 1rem;
+		font-style: italic;
+	}
+
+	/* Responsive adjustments for different container widths */
+	@container (max-width: 400px) {
+		.list {
+			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+			gap: 0.3rem;
+		}
+	}
+
+	@container (min-width: 600px) {
+		.list {
+			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+		}
+	}
+
+	@container (min-width: 800px) {
+		.list {
+			grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+		}
+	}
+	`
+
+	updated(changedProperties: PropertyValues<this>) {
+		if (changedProperties.has("chords")) {
+			this.numChords = this.parsedChords.length;
+		}
+	}
+
+	render() {
+		const chordNames = this.parsedChords;
+		
+		if (chordNames.length === 0) {
+			return html`
+				<header>
+					<h3>${this.instrument}</h3>
+				</header>
+				<div class='empty-state'>
+					No chords to display
+				</div>
+			`;
+		}
+
+		return html`
+			<header>
+				<h3>${this.instrument} (${this.numChords} chord${this.numChords !== 1 ? 's' : ''})</h3>
+			</header>
+			<div class='list'>
+				${chordNames.map((chord) =>
+					html`<chord-diagram chord=${chord} instrument='${this.instrument}'></chord-diagram>`
+				)}
+			</div>
+		`;
+	}
+}

package/src/default-chords.ts

@@ -0,0 +1,333 @@
+import type { Finger, Barre } from 'svguitar';
+
+interface Dictionary<T> {
+  [key: string]: T
+}
+
+export type InstrumentDefault = {
+  barres: Barre[]
+  fingers: Finger[]
+  position?: number  // Starting fret position (1 = first fret, etc.)
+}
+
+type Instrument = Dictionary<InstrumentDefault>
+
+export const systemDefaultChords: Dictionary<Instrument> = {
+  "Standard Ukulele": {
+    "Cm": {
+      "barres": [],
+      "fingers": [
+        [3,3],
+        [2,3],
+        [1,3]
+      ]
+    },
+    "Cm7": {
+      "barres": [{
+        "fromString": 4,
+        "toString": 1,
+        "fret": 3,
+        "text": "1"
+      }],
+      "fingers": []
+    },
+    "Cdim": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,3],
+        [2,2],
+        [1,3]
+      ]
+    },
+    "C": {
+      "barres": [],
+      "fingers": [
+        [4,0],
+        [3,0],
+        [2,0],
+        [1,3]
+      ]
+    },
+    "C7": {
+      "barres": [],
+      "fingers": [
+        [4,0],
+        [3,0],
+        [2,0],
+        [1,1]
+      ]
+    },
+    "Cmaj7": {
+      "barres": [],
+      "fingers": [
+        [4,0],
+        [3,0],
+        [2,0],
+        [1,2]
+      ]
+    },
+    "Dm": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,2],
+        [2,1],
+        [1,0]
+      ]
+    },
+    "Dm7": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,2],
+        [2,1],
+        [1,3]
+      ]
+    },
+    "D": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,2],
+        [2,2],
+        [1,0]
+      ]
+    },
+    "D7": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,2],
+        [2,2],
+        [1,3]
+      ]
+    },
+    "Em": {
+      "barres": [],
+      "fingers": [
+        [4,0],
+        [3,4],
+        [2,3],
+        [1,2]
+      ]
+    },
+    "E": {
+      "barres": [],
+      "fingers": [
+        [4,4],
+        [3,4],
+        [2,4],
+        [1,2]
+      ]
+    },
+    "E7": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,4],
+        [2,4],
+        [1,2]
+      ]
+    },
+    "F": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,0],
+        [2,1],
+        [1,0]
+      ]
+    },
+    "F7": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,3],
+        [2,1],
+        [1,3]
+      ]
+    },
+    "Fm": {
+      "barres": [],
+      "fingers": [
+        [4,1],
+        [3,0],
+        [2,1],
+        [1,3]
+      ]
+    },
+    "G": {
+      "barres": [],
+      "fingers": [
+        [4,0],
+        [3,2],
+        [2,3],
+        [1,2]
+      ]
+    },
+    "G7": {
+      "barres": [],
+      "fingers": [
+        [4,0],
+        [3,2],
+        [2,1],
+        [1,2]
+      ]
+    },
+    "Gm": {
+      "barres": [],
+      "fingers": [
+        [4,0],
+        [3,2],
+        [2,3],
+        [1,1]
+      ]
+    },
+    "Am": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,0],
+        [2,0],
+        [1,0]
+      ]
+    },
+    "A": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,1],
+        [2,0],
+        [1,0]
+      ]
+    },
+    "A7": {
+      "barres": [],
+      "fingers": [
+        [4,0],
+        [3,1],
+        [2,0],
+        [1,0]
+      ]
+    },
+    "Bm": {
+      "barres": [],
+      "fingers": [
+        [4,4],
+        [3,2],
+        [2,2],
+        [1,2]
+      ]
+    },
+    "B": {
+      "barres": [],
+      "fingers": [
+        [4,4],
+        [3,3],
+        [2,2],
+        [1,2]
+      ]
+    },
+    "B7": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,3],
+        [2,2],
+        [1,2]
+      ]
+    }
+  },
+  "Standard Guitar": {
+    "C": {
+      "barres": [],
+      "fingers": [
+        [5,3],
+        [4,2],
+        [2,1]
+      ]
+    },
+    "Cm": {
+      "barres": [{
+        "fromString": 5,
+        "toString": 1,
+        "fret": 3,
+        "text": "1"
+      }],
+      "fingers": [
+        [4,5],
+        [3,5],
+        [2,4]
+      ]
+    },
+    "D": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,3],
+        [1,2]
+      ]
+    },
+    "Dm": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,3],
+        [1,1]
+      ]
+    },
+    "E": {
+      "barres": [],
+      "fingers": [
+        [5,2],
+        [4,2],
+        [3,1]
+      ]
+    },
+    "Em": {
+      "barres": [],
+      "fingers": [
+        [5,2],
+        [4,2]
+      ]
+    },
+    "F": {
+      "barres": [{
+        "fromString": 6,
+        "toString": 1,
+        "fret": 1,
+        "text": "1"
+      }],
+      "fingers": [
+        [5,3],
+        [4,3],
+        [3,2]
+      ]
+    },
+    "G": {
+      "barres": [],
+      "fingers": [
+        [6,3],
+        [1,3],
+        [5,2]
+      ]
+    },
+    "A": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,2],
+        [2,2]
+      ]
+    },
+    "Am": {
+      "barres": [],
+      "fingers": [
+        [4,2],
+        [3,2],
+        [2,1]
+      ]
+    }
+  }
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+export { ChordDiagram } from './chord-diagram.js';
+export { ChordList } from './chord-list.js';
+export { ChordEditor } from './chord-editor.js';
+export * from './music-utils.js';
+export * from './default-chords.js';
+export { chordDataService } from './chord-data-service.js';
+export { indexedDBService } from './indexed-db-service.js';