@medyll/idae-cadenzia 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @medyll/idae-cadenzia
 
+## 0.2.0
+
+### Minor Changes
+
+- - feat(ajouter): des constantes musicales et améliorer la gestion des accords avec des options d'armure ([0f48cd9](https://github.com/medyll/idae/commit/0f48cd947ceabadf13a7488110c8bbdc6b32e638)) - 2024-11-16 by @medyll
+  - feat(ajouter): le composant App et les composants associés pour la visualisation des accords ([e7c9517](https://github.com/medyll/idae/commit/e7c95178e328e56f514678bed4c96015e7ef7529)) - 2024-11-16 by @medyll
+
 ## 0.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medyll/idae-cadenzia",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/ChordTable.svelte

@@ -1,18 +1,23 @@
 <!-- components/ChordTable.svelte -->
 <script lang="ts">
 	import {
-		chordEntries,
-		updateCadences,
 		qualities,
+		armorOptions,
+		modes,
 		rootNotes,
-		modifiers,
-		toggleModifier
-	} from '../functions/functions.svelte.js'; 
+		modifiers
+	} from '$lib/constants/constants.js';
+	import { getScaleNotes, isChordInScale } from '$lib/functions/rules.js';
+
+	import type { ChordEntry } from '$lib/types/types.js';
+	import { chordEntries, updateCadences, toggleModifier } from '../functions/functions.svelte.js';
 
 	function addChordEntry() {
 		chordEntries.push({
 			chord: { root: 'C', quality: qualities.mode[0], modifier: undefined, duration: '1' },
-			timeSignature: chordEntries.length === 0 ? { numerator: 4, denominator: 4 } : undefined
+			timeSignature: chordEntries.length === 0 ? { numerator: 4, denominator: 4 } : undefined,
+			armor: '',
+			mode: undefined
 		});
 		updateCadences();
 	}
@@ -33,6 +38,15 @@
 			chordEntries[index].timeSignature = { numerator: 4, denominator: 4 };
 		}
 	}
+
+	function isNoteInScale(note: string, entry: ChordEntry): boolean {
+		const scaleNotes = getScaleNotes(entry.armor);
+		return scaleNotes.includes(note);
+	}
+
+	function isChordValid(entry: ChordEntry): boolean {
+		return isChordInScale(entry);
+	}
 </script>
 
 <table>
@@ -40,6 +54,7 @@
 		<tr>
 			<th>Measure</th>
 			<th>Time Signature</th>
+			<th>Armor</th>
 			<th>Root</th>
 			<th>Quality</th>
 			<th>Modifier</th>
@@ -51,7 +66,7 @@
 		{#each chordEntries as entry, i}
 			<tr>
 				<td>{i + 1}</td>
-				<td>
+				<td class="timeSignature">
 					{#if entry.timeSignature}
 						<input type="number" bind:value={entry.timeSignature.numerator} min="1" max="32" />
 						/
@@ -60,10 +75,34 @@
 						<button onclick={() => toggleTimeSignature(i)}>Add Time Signature</button>
 					{/if}
 				</td>
+				<td>
+					<div>
+						<label for="armor-{i}">Armor:</label>
+						<select id="armor-{i}" bind:value={entry.armor} onchange={handleChordChange}>
+							{#each armorOptions as armor}
+								<option value={armor.name}>
+									{armor.name}
+									{armor.value ? `(${armor.value})` : ''}
+								</option>
+							{/each}
+						</select>
+					</div>
+					<div>
+						<label for="mode-{i}">Mode:</label>
+						<select id="mode-{i}" bind:value={entry.mode} onchange={handleChordChange}>
+							<option value={undefined}>Select mode</option>
+							{#each modes as mode}
+								<option value={mode}>{mode}</option>
+							{/each}
+						</select>
+					</div>
+				</td>
 				<td>
 					<select bind:value={entry.chord.root} onchange={handleChordChange}>
 						{#each rootNotes as note}
-							<option value={note}>{note}</option>
+							<option value={note} class:not-in-scale={!isChordValid({...entry, chord: {...entry.chord, root: note}})}>
+								{note}
+							</option>
 						{/each}
 					</select>
 				</td>
@@ -71,7 +110,7 @@
 					{#each Object.entries(qualities) as [group, qualityOptions]}
 						<div>
 							{#each qualityOptions as quality}
-								<label>
+								<label class:not-in-scale={!isChordValid({...entry, chord: {...entry.chord, quality}})}>
 									<input
 										type="radio"
 										name={`quality-${group}-${i}`}
@@ -92,7 +131,7 @@
 				</td>
 				<td>
 					{#each modifiers as modifier}
-						<label>
+						<label class:not-in-scale={!isChordValid({...entry, chord: {...entry.chord, modifier}})}>
 							<input
 								type="radio"
 								name={`modifier-${i}`}
@@ -104,7 +143,7 @@
 						</label>
 					{/each}
 				</td>
-				<td>
+				<td class="duration">
 					<input
 						type="text"
 						bind:value={entry.chord.duration}
@@ -132,7 +171,27 @@
 	td {
 		border: 1px solid #ddd;
 		padding: 8px;
-		text-align: left;
+		text-align: center;
+	}
+	td.timeSignature {
+		& input[type='number'] {
+			width: 40px;
+			text-align: center;
+		}
+
+		& button {
+			padding: 5px 10px;
+			background-color: #f0f0f0;
+			border: 1px solid #ccc;
+			border-radius: 3px;
+		}
+	}
+
+	td.duration {
+		& input[type='text'] {
+			width: 60px;
+			text-align: center;
+		}
 	}
 	th {
 		background-color: #f2f2f2;
@@ -142,4 +201,12 @@
 	input[type='number'] {
 		width: 100%;
 	}
+
+	option.not-in-scale {
+		color: red;
+	}
+
+	label.not-in-scale {
+		color: red;
+	}
 </style>

package/src/lib/components/ChordVisualization.svelte

@@ -1,17 +1,13 @@
 <!-- components/ChordVisualization.svelte -->
 <script lang="ts">
-	import { chordEntries } from '$lib/functions/functions.svelte';
+	import { chordEntries, getArmorInfo } from '$lib/functions/functions.svelte';
 	import type { ChordEntry } from '$lib/types/types';
 
 	function getChordName(entry: ChordEntry) {
 		const { chord } = entry;
 		let name = chord.root;
 
-		if (chord.modifier) {
-			name += chord.modifier;
-		}
-
-		name += chord.mode ?? '';
+		name += chord.modifier ?? ''; 
 		name += chord.augDim ?? '';
 		name += chord.sus ?? '';
 		name += chord.sept ?? '';
@@ -35,15 +31,20 @@
 	{:else}
 		<div class="chord-sequence">
 			{#each chordEntries as entry, i}
-				{#if entry.timeSignature}
+				{#if entry.timeSignature || entry.armor || entry.mode}
 					<div class="signature">
-						- Signature: {entry.timeSignature.numerator}/{entry.timeSignature.denominator}
+						{#if entry.timeSignature}
+							- Signature: {entry.timeSignature.numerator}/{entry.timeSignature.denominator}
+						{/if}
+						{#if entry.armor}
+							- Armure:  {getArmorInfo(entry.armor)}
+						{/if} 
+                        {#if entry.mode}
+                            - Mode: {entry.mode}
+                        {/if}
 					</div>
 				{/if}
-				<div 
-					class="chord" 
-					style="--baseTime:{getDurationValue(entry.chord.duration)}"
-				>
+				<div class="chord" style="--baseTime:{getDurationValue(entry.chord.duration)}">
 					<span>{getChordName(entry)}</span>
 					<span>{entry.chord.duration}</span>
 				</div>
@@ -72,10 +73,10 @@
 		background-color: #fff;
 		border: 1px solid #ccc;
 		border-radius: 5px;
-		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
+		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 		text-align: center;
 		width: calc(200px * var(--baseTime, 1));
 		min-width: 30px; /* Ensure a minimum width for very short durations */
 		max-width: 100%; /* Prevent oversized chords */
 	}
-</style>
+</style>

package/src/lib/constants/constants.ts

@@ -0,0 +1,49 @@
+/* constants/constants.ts */
+import type { Cadence } from '$lib/types/types';
+
+// Definition of common musical cadences
+export const cadencePatterns: Cadence[] = [
+	{ name: 'Perfect', chords: ['V', 'I'] },
+	{ name: 'Plagal', chords: ['IV', 'I'] },
+	{ name: 'Deceptive', chords: ['V', 'VI'] },
+	{ name: 'Half', chords: ['I', 'V'] },
+	{ name: 'Italian', chords: ['IV', 'V', 'I'] },
+	{ name: 'German', chords: ['II', 'V', 'I'] },
+	{ name: 'Phrygian', chords: ['IV', 'V', 'III'] }
+];
+
+// Fundamental root notes in order
+export const rootNotes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
+
+// Different chord qualities grouped by category
+export const qualities = {
+	mode: ['maj', 'min'],
+	augDim: ['aug', 'dim'],
+	sus: ['sus4', 'sus2'],
+	sept: ['7', '5']
+};
+
+// Modifier symbols (sharp, flat, natural)
+export const modifiers = ['♯', '♭', '♮'];
+
+// Armor options with alteration value and key name
+export const armorOptions = [
+	{ value: '', name: 'C' },
+	{ value: '1♯', name: 'G' },
+	{ value: '2♯', name: 'D' },
+	{ value: '3♯', name: 'A' },
+	{ value: '4♯', name: 'E' },
+	{ value: '5♯', name: 'B' },
+	{ value: '6♯', name: 'F♯' },
+	{ value: '7♯', name: 'C♯' },
+	{ value: '1♭', name: 'F' },
+	{ value: '2♭', name: 'B♭' },
+	{ value: '3♭', name: 'E♭' },
+	{ value: '4♭', name: 'A♭' },
+	{ value: '5♭', name: 'D♭' },
+	{ value: '6♭', name: 'G♭' },
+	{ value: '7♭', name: 'C♭' }
+];
+
+// Musical modes
+export const modes = ['Ionian', 'Dorian', 'Phrygian', 'Lydian', 'Mixolydian', 'Aeolian', 'Locrian'];

package/src/lib/functions/functions.svelte.ts

@@ -1,31 +1,11 @@
 // functions/functions.svelte.ts
-import type { Chord, Cadence, ChordEntry } from '../types/types';
+import { rootNotes, cadencePatterns, armorOptions } from '$lib/constants/constants.js';
+import type { Chord, Cadence, ChordEntry } from '$lib/types/types';
 
 export const chords = $state<Chord[]>([]);
 export const suggestedCadences = $state<Cadence[]>([]);
 export const chordEntries = $state<ChordEntry[]>([]);
 
-export const cadencePatterns: Cadence[] = [
-	{ name: 'Perfect', chords: ['V', 'I'] },
-	{ name: 'Plagal', chords: ['IV', 'I'] },
-	{ name: 'Deceptive', chords: ['V', 'VI'] },
-	{ name: 'Half', chords: ['I', 'V'] },
-	{ name: 'Italian', chords: ['IV', 'V', 'I'] },
-	{ name: 'German', chords: ['II', 'V', 'I'] },
-	{ name: 'Phrygian', chords: ['IV', 'V', 'III'] }
-];
-
-export const rootNotes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
-
-export const qualities = {
-	mode: ['maj', 'min'],
-	augDim: ['aug', 'dim'],
-	sus: ['sus4', 'sus2'],
-	sept: ['7', '5']
-};
-
-export const modifiers = ['♯', '♭', '♮'];
-
 export function updateCadences() {
 	console.log('Current Chords:', $state.snapshot({ chords }));
 
@@ -35,6 +15,9 @@ export function updateCadences() {
 		return;
 	}
 
+	const lastEntry = chordEntries[chordEntries.length - 1];
+	const lastChordMode = lastEntry.mode;
+
 	const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII'];
 	const lastChord = chordEntries[chordEntries.length - 1].chord;
 
@@ -64,3 +47,8 @@ export function toggleModifier(chordIndex: number, modifier: string) {
 	chord.modifier = chord.modifier === modifier ? undefined : modifier;
 	updateCadences();
 }
+
+export function getArmorInfo(armorName: string) {
+	const armor = armorOptions.find((a) => a.name === armorName);
+	return armor ? `${armor.name}${armor.value ? ` (${armor.value})` : ''}` : '';
+}

package/src/lib/functions/rules.ts

@@ -0,0 +1,118 @@
+// functions/rules.ts
+import { rootNotes, armorOptions, modes } from '$lib/constants/constants.js';
+import type { ChordEntry } from '../types/types';
+
+// Function to get scale notes based on the armor
+export function getScaleNotes(armor: string): string[] {
+	const baseScale = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
+	const armorInfo = armorOptions.find((a) => a.name === armor);
+
+	if (!armorInfo) return baseScale;
+
+	const sharpCount = armorInfo.value.includes('♯') ? parseInt(armorInfo.value) : 0;
+	const flatCount = armorInfo.value.includes('♭') ? parseInt(armorInfo.value) : 0;
+
+	if (sharpCount > 0) {
+		const sharps = ['F', 'C', 'G', 'D', 'A', 'E', 'B'].slice(0, sharpCount);
+		return baseScale.map((note) => (sharps.includes(note) ? note + '♯' : note));
+	} else if (flatCount > 0) {
+		const flats = ['B', 'E', 'A', 'D', 'G', 'C', 'F'].slice(0, flatCount);
+		return baseScale.map((note) => (flats.includes(note) ? note + '♭' : note));
+	}
+
+	return baseScale;
+}
+
+// Function to check if a chord is in the scale
+export function isChordInScale(chordEntry: ChordEntry): boolean {
+	const scaleNotes = getScaleNotes(chordEntry.armor);
+	const { root, quality, modifier } = chordEntry.chord;
+	console.log({ scaleNotes });
+	// Check if the root note is in the scale
+	// if (!scaleNotes.includes(root)) return false;
+
+	// Get chord notes considering the quality and the modifier
+	const chordNotes = getChordNotes(root, quality, modifier);
+	return chordNotes.every((note) => scaleNotes.includes(note));
+}
+
+// Function to get the degrees of the scale
+export function getScaleDegrees(armor: string, mode: string): string[] {
+	const scaleNotes = getScaleNotes(armor);
+	const modeIndex = modes.indexOf(mode);
+	if (modeIndex === -1) return [];
+
+	const rotatedScale = [...scaleNotes.slice(modeIndex), ...scaleNotes.slice(0, modeIndex)];
+	return rotatedScale.map((note, index) => {
+		const degree = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII'][index];
+		return `${degree} (${note})`;
+	});
+}
+
+// Function to suggest valid chords based on armor and mode
+export function suggestValidChords(armor: string, mode: string): string[] {
+	const scaleNotes = getScaleNotes(armor);
+	const degrees = getScaleDegrees(armor, mode);
+	//  implement logic to suggest chords based on the scale notes and mode
+	return degrees;
+}
+
+// Helper function to get chord notes based on root and quality
+function getChordNotes(root: string, quality: string, modifier?: string): string[] {
+	const chromaticScale = ['C', 'C♯', 'D', 'D♯', 'E', 'F', 'F♯', 'G', 'G♯', 'A', 'A♯', 'B'];
+	let rootIndex = chromaticScale.indexOf(root);
+
+	// Apply modifier to root if present
+	if (modifier) {
+		if (modifier === '♯') rootIndex = (rootIndex + 1) % 12;
+		if (modifier === '♭') rootIndex = (rootIndex - 1 + 12) % 12;
+	}
+
+	const modifiedRoot = chromaticScale[rootIndex];
+
+	let intervals: number[] = [0]; // Root note is always included
+
+	// Base triad
+	if (quality.includes('min')) {
+		intervals.push(3, 7); // Minor triad
+	} else if (quality.includes('aug')) {
+		intervals.push(4, 8); // Augmented triad
+	} else if (quality.includes('dim')) {
+		intervals.push(3, 6); // Diminished triad
+	} else {
+		intervals.push(4, 7); // Major triad (default)
+	}
+
+	// Sevenths
+	if (quality.includes('7')) {
+		if (quality.includes('maj7')) {
+			intervals.push(11); // Major seventh
+		} else if (quality.includes('dim')) {
+			intervals.push(9); // Diminished seventh
+		} else {
+			intervals.push(10); // Minor seventh (dominant seventh)
+		}
+	}
+
+	// Sixths
+	if (quality.includes('6')) {
+		intervals.push(9); // Major sixth
+	}
+
+	// Suspended chords
+	if (quality.includes('sus4')) {
+		intervals = intervals.filter((i) => i !== 4).concat(5);
+	} else if (quality.includes('sus2')) {
+		intervals = intervals.filter((i) => i !== 4).concat(2);
+	}
+
+	// Add9, add11, add13
+	if (quality.includes('add9')) intervals.push(14);
+	if (quality.includes('add11')) intervals.push(17);
+	if (quality.includes('add13')) intervals.push(21);
+
+	// Remove duplicates and sort
+	intervals = [...new Set(intervals)].sort((a, b) => a - b);
+
+	return intervals.map((interval) => chromaticScale[(rootIndex + interval) % 12]);
+}

package/src/lib/index.ts

@@ -1,6 +1,8 @@
 // auto exports of entry components
 export * from '$lib/types/types.js';
+export * from '$lib/functions/rules.js';
 export * from '$lib/functions/functions.svelte.js';
+export * from '$lib/constants/constants.js';
 export { default as ChordVisualization } from '$lib/components/ChordVisualization.svelte';
 export { default as ChordTable } from '$lib/components/ChordTable.svelte';
 export { default as CadencePanel } from '$lib/components/CadencePanel.svelte';

package/src/lib/types/types.ts

@@ -1,7 +1,6 @@
 export type Chord = {
 	root: string;
 	quality: string;
-	mode?: string;
 	augDim?: string;
 	sus?: string;
 	sept?: string;
@@ -16,7 +15,9 @@ export type TimeSignature = {
 
 export type ChordEntry = {
 	chord: Chord;
-	timeSignature?: TimeSignature;
+	timeSignature?: { numerator: number; denominator: number };
+	armor: string;
+	mode?: string;
 };
 
 export type Cadence = {