@medyll/idae-cadenzia 0.78.0 → 0.80.0

package/src/lib/components/ChordTable.svelte

@@ -1,252 +1,252 @@
-<!-- components/ChordTable.svelte -->
-<script lang="ts">
-	import {
-		qualities,
-		armorOptions,
-		modes,
-		rootNotes,
-		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, handleChordChange } 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,
-			armor: '',
-			mode: undefined,
-			measureInfo: { start: 1, end: 1, beatStart: 0 }
-		});
-		updateCadences();
-	}
-
-	function removeChordEntry(index: number) {
-		chordEntries.splice(index, 1);
-		updateCadences();
-	}
-
- 
-
-	function toggleTimeSignature(index: number) {
-		if (chordEntries[index].timeSignature) {
-			chordEntries[index].timeSignature = undefined;
-		} else {
-			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>
-	<thead>
-		<tr>
-			<th>Measure</th>
-			<th>Time Signature</th>
-			<th>Armor</th>
-			<th>Root</th>
-			<th>Quality</th>
-			<th>Modifier</th>
-			<th>Duration</th>
-			<th>Action</th>
-		</tr>
-	</thead>
-	<tbody>
-		{#each chordEntries as entry, i}
-			<tr>
-				<td>
-					{#if entry.measureInfo.start === entry.measureInfo.end}
-						{entry.measureInfo.start}
-					{:else}
-						{entry.measureInfo.start} - {entry.measureInfo.end}
-					{/if}
-				</td>
-				<td class="timeSignature">
-					{#if entry.timeSignature}
-						<input 
-							type="number" 
-							bind:value={entry.timeSignature.numerator} 
-							min="1" 
-							max="32" 
-							onchange={() => handleChordChange(i, { timeSignature: entry.timeSignature })}
-						/>
-						/
-						<input 
-							type="number" 
-							bind:value={entry.timeSignature.denominator} 
-							min="1" 
-							max="32" 
-							onchange={() => handleChordChange(i, { timeSignature: entry.timeSignature })}
-						/>
-					{:else}
-						<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(i, { armor: entry.armor })}
-						>
-							{#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(i, { mode: entry.mode })}
-						>
-							<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(i, { chord: { ...entry.chord } })}
-					>
-						{#each rootNotes as note}
-							<option
-								value={note}
-								class:not-in-scale={!isChordValid({
-									...entry,
-									chord: { ...entry.chord, root: note }
-								})}
-							>
-								{note}
-							</option>
-						{/each}
-					</select>
-				</td>
-				<td>
-					{#each Object.entries(qualities) as [group, qualityOptions]}
-						<div>
-							{#each qualityOptions as quality}
-								<label
-									class:not-in-scale={!isChordValid({
-										...entry,
-										chord: { ...entry.chord, quality }
-									})}
-								>
-									<input
-										type="radio"
-										name={`quality-${group}-${i}`}
-										value={quality}
-										checked={entry.chord[group] === quality}
-										onchange={() => {
-											const updatedChord = { ...entry.chord, [group]: quality, quality };
-											handleChordChange(i, { chord: updatedChord });
-										}}
-									/>
-									{quality}
-								</label>
-							{/each}
-						</div>
-						<hr />
-					{/each}
-				</td>
-				<td>
-					{#each modifiers as modifier}
-						<label
-							class:not-in-scale={!isChordValid({ ...entry, chord: { ...entry.chord, modifier } })}
-						>
-							<input
-								type="radio"
-								name={`modifier-${i}`}
-								value={modifier}
-								checked={entry.chord.modifier === modifier}
-								onchange={() => toggleModifier(i, modifier)}
-							/>
-							{modifier}
-						</label>
-					{/each}
-				</td>
-				<td class="duration">
-					<input
-						type="text"
-						bind:value={entry.chord.duration}
-						onchange={() => handleChordChange(i, { chord: { ...entry.chord } })}
-						placeholder="e.g., 1, 1/2, 3/4"
-					/>
-				</td>
-				<td>
-					<button onclick={() => removeChordEntry(i)}>Remove</button>
-				</td>
-			</tr>
-		{/each}
-	</tbody>
-</table>
-
-<button onclick={addChordEntry}>Add Chord</button>
-
-<style>
-	table {
-		width: 100%;
-		border-collapse: collapse;
-		margin-bottom: 1em;
-	}
-	th,
-	td {
-		border: 1px solid #ddd;
-		padding: 8px;
-		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;
-	}
-	select,
-	input[type='text'],
-	input[type='number'] {
-		width: 100%;
-	}
-
-	option.not-in-scale {
-		color: red;
-	}
-
-	label.not-in-scale {
-		color: red;
-	}
-</style>
+<!-- components/ChordTable.svelte -->
+<script lang="ts">
+	import {
+		qualities,
+		armorOptions,
+		modes,
+		rootNotes,
+		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, handleChordChange } 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,
+			armor: '',
+			mode: undefined,
+			measureInfo: { start: 1, end: 1, beatStart: 0 }
+		});
+		updateCadences();
+	}
+
+	function removeChordEntry(index: number) {
+		chordEntries.splice(index, 1);
+		updateCadences();
+	}
+
+ 
+
+	function toggleTimeSignature(index: number) {
+		if (chordEntries[index].timeSignature) {
+			chordEntries[index].timeSignature = undefined;
+		} else {
+			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>
+	<thead>
+		<tr>
+			<th>Measure</th>
+			<th>Time Signature</th>
+			<th>Armor</th>
+			<th>Root</th>
+			<th>Quality</th>
+			<th>Modifier</th>
+			<th>Duration</th>
+			<th>Action</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each chordEntries as entry, i}
+			<tr>
+				<td>
+					{#if entry.measureInfo.start === entry.measureInfo.end}
+						{entry.measureInfo.start}
+					{:else}
+						{entry.measureInfo.start} - {entry.measureInfo.end}
+					{/if}
+				</td>
+				<td class="timeSignature">
+					{#if entry.timeSignature}
+						<input 
+							type="number" 
+							bind:value={entry.timeSignature.numerator} 
+							min="1" 
+							max="32" 
+							onchange={() => handleChordChange(i, { timeSignature: entry.timeSignature })}
+						/>
+						/
+						<input 
+							type="number" 
+							bind:value={entry.timeSignature.denominator} 
+							min="1" 
+							max="32" 
+							onchange={() => handleChordChange(i, { timeSignature: entry.timeSignature })}
+						/>
+					{:else}
+						<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(i, { armor: entry.armor })}
+						>
+							{#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(i, { mode: entry.mode })}
+						>
+							<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(i, { chord: { ...entry.chord } })}
+					>
+						{#each rootNotes as note}
+							<option
+								value={note}
+								class:not-in-scale={!isChordValid({
+									...entry,
+									chord: { ...entry.chord, root: note }
+								})}
+							>
+								{note}
+							</option>
+						{/each}
+					</select>
+				</td>
+				<td>
+					{#each Object.entries(qualities) as [group, qualityOptions]}
+						<div>
+							{#each qualityOptions as quality}
+								<label
+									class:not-in-scale={!isChordValid({
+										...entry,
+										chord: { ...entry.chord, quality }
+									})}
+								>
+									<input
+										type="radio"
+										name={`quality-${group}-${i}`}
+										value={quality}
+										checked={entry.chord[group] === quality}
+										onchange={() => {
+											const updatedChord = { ...entry.chord, [group]: quality, quality };
+											handleChordChange(i, { chord: updatedChord });
+										}}
+									/>
+									{quality}
+								</label>
+							{/each}
+						</div>
+						<hr />
+					{/each}
+				</td>
+				<td>
+					{#each modifiers as modifier}
+						<label
+							class:not-in-scale={!isChordValid({ ...entry, chord: { ...entry.chord, modifier } })}
+						>
+							<input
+								type="radio"
+								name={`modifier-${i}`}
+								value={modifier}
+								checked={entry.chord.modifier === modifier}
+								onchange={() => toggleModifier(i, modifier)}
+							/>
+							{modifier}
+						</label>
+					{/each}
+				</td>
+				<td class="duration">
+					<input
+						type="text"
+						bind:value={entry.chord.duration}
+						onchange={() => handleChordChange(i, { chord: { ...entry.chord } })}
+						placeholder="e.g., 1, 1/2, 3/4"
+					/>
+				</td>
+				<td>
+					<button onclick={() => removeChordEntry(i)}>Remove</button>
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<button onclick={addChordEntry}>Add Chord</button>
+
+<style>
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		margin-bottom: 1em;
+	}
+	th,
+	td {
+		border: 1px solid #ddd;
+		padding: 8px;
+		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;
+	}
+	select,
+	input[type='text'],
+	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,82 +1,82 @@
-<!-- components/ChordVisualization.svelte -->
-<script lang="ts">
-	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;
-
-		name += chord.modifier ?? ''; 
-		name += chord.augDim ?? '';
-		name += chord.sus ?? '';
-		name += chord.sept ?? '';
-
-		return name;
-	}
-
-	function getDurationValue(duration: string): number {
-		if (duration.includes('/')) {
-			const [numerator, denominator] = duration.split('/').map(Number);
-			return numerator / denominator;
-		}
-		return Number(duration);
-	}
-</script>
-
-<div class="visualization">
-	<h3>Chord Visualization</h3>
-	{#if chordEntries.length === 0}
-		<p>No chords to visualize.</p>
-	{:else}
-		<div class="chord-sequence">
-			{#each chordEntries as entry, i}
-				{#if entry.timeSignature || entry.armor || entry.mode}
-					<div class="signature">
-						{#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)}">
-					<span>{getChordName(entry)}</span>
-					<span>{entry.chord.duration}</span>
-				</div>
-			{/each}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.visualization {
-		margin-top: 20px;
-		padding: 10px;
-		background-color: #e0e0e0;
-	}
-	.signature {
-		flex-basis: 100%;
-		width: 100%;
-	}
-	.chord-sequence {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 10px; /* Space between chords */
-	}
-	.chord {
-		padding: 10px;
-		background-color: #fff;
-		border: 1px solid #ccc;
-		border-radius: 5px;
-		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>
+<!-- components/ChordVisualization.svelte -->
+<script lang="ts">
+	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;
+
+		name += chord.modifier ?? ''; 
+		name += chord.augDim ?? '';
+		name += chord.sus ?? '';
+		name += chord.sept ?? '';
+
+		return name;
+	}
+
+	function getDurationValue(duration: string): number {
+		if (duration.includes('/')) {
+			const [numerator, denominator] = duration.split('/').map(Number);
+			return numerator / denominator;
+		}
+		return Number(duration);
+	}
+</script>
+
+<div class="visualization">
+	<h3>Chord Visualization</h3>
+	{#if chordEntries.length === 0}
+		<p>No chords to visualize.</p>
+	{:else}
+		<div class="chord-sequence">
+			{#each chordEntries as entry, i}
+				{#if entry.timeSignature || entry.armor || entry.mode}
+					<div class="signature">
+						{#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)}">
+					<span>{getChordName(entry)}</span>
+					<span>{entry.chord.duration}</span>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.visualization {
+		margin-top: 20px;
+		padding: 10px;
+		background-color: #e0e0e0;
+	}
+	.signature {
+		flex-basis: 100%;
+		width: 100%;
+	}
+	.chord-sequence {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px; /* Space between chords */
+	}
+	.chord {
+		padding: 10px;
+		background-color: #fff;
+		border: 1px solid #ccc;
+		border-radius: 5px;
+		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>