@medyll/idae-cadenzia 0.1.0

package/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

package/.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @medyll/idae-cadenzia
+
+## 0.1.0
+
+### Minor Changes
+
+- - 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

package/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

package/eslint.config.js

@@ -0,0 +1,33 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+);

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@medyll/idae-cadenzia",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run",
+    "package:pre": "node scripts/package-pre.js"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/eslint": "^9.6.0",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.0.0",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.0.3",
+    "vitest": "^2.0.4"
+  },
+  "scope": "@medyll"
+}

package/scripts/package-pre.js

@@ -0,0 +1,4 @@
+// Created scripts/package-pre.js
+
+import { MakeLibIndex } from '../../shared/scripts/indexIfy.js';
+new MakeLibIndex().makeIndexFile();

package/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/src/demo.spec.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});

package/src/lib/components/App.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import ChordTable from './ChordTable.svelte';
+  import CadencePanel from './CadencePanel.svelte';
+  import ChordVisualization from './ChordVisualization.svelte';
+  import { chords, suggestedCadences } from '../functions/functions.svelte.js';
+
+  function handleNewFile() {
+    console.log('New file');
+    chords.length = 0;
+    suggestedCadences.length = 0;
+  }
+
+  function handleOpenFile() {
+    console.log('Open file');
+    // Implement logic to open a file here
+  }
+
+  function handleSaveFile() {
+    console.log('Save file');
+    // Implement logic to save a file here
+  }
+</script>
+
+<main>
+  <h1>Music Composer</h1>
+  <div>
+    <button onclick={handleNewFile}>New</button>
+    <button onclick={handleOpenFile}>Open</button>
+    <button onclick={handleSaveFile}>Save</button>
+  </div>
+
+  <ChordTable />
+  <CadencePanel   />
+  <ChordVisualization  />
+</main>
+
+<style>
+  main {
+    font-family: Arial, sans-serif;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  button {
+    margin-right: 10px;
+  }
+</style>

package/src/lib/components/CadencePanel.svelte

@@ -0,0 +1,25 @@
+<!-- components/CadencePanel.svelte -->
+<script lang="ts">
+    import { suggestedCadences } from '../functions/functions.svelte.js';
+</script>
+
+<div class="cadence-panel">
+    <h3>Suggested Cadences:</h3>
+    {#if suggestedCadences.length === 0}
+        <p>No cadences available at the moment.</p>
+    {:else}
+        <ul>
+            {#each suggestedCadences as cadence}
+                <li>{cadence.name}: {cadence.chords.join(' - ')}</li>
+            {/each}
+        </ul>
+    {/if}
+</div>
+
+<style>
+    .cadence-panel {
+        background-color: #f0f0f0;
+        padding: 10px;
+        margin-top: 20px;
+    }
+</style>

package/src/lib/components/ChordTable.svelte

@@ -0,0 +1,145 @@
+<!-- components/ChordTable.svelte -->
+<script lang="ts">
+	import {
+		chordEntries,
+		updateCadences,
+		qualities,
+		rootNotes,
+		modifiers,
+		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
+		});
+		updateCadences();
+	}
+
+	function removeChordEntry(index: number) {
+		chordEntries.splice(index, 1);
+		updateCadences();
+	}
+
+	function handleChordChange() {
+		updateCadences();
+	}
+
+	function toggleTimeSignature(index: number) {
+		if (chordEntries[index].timeSignature) {
+			chordEntries[index].timeSignature = undefined;
+		} else {
+			chordEntries[index].timeSignature = { numerator: 4, denominator: 4 };
+		}
+	}
+</script>
+
+<table>
+	<thead>
+		<tr>
+			<th>Measure</th>
+			<th>Time Signature</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>{i + 1}</td>
+				<td>
+					{#if entry.timeSignature}
+						<input type="number" bind:value={entry.timeSignature.numerator} min="1" max="32" />
+						/
+						<input type="number" bind:value={entry.timeSignature.denominator} min="1" max="32" />
+					{:else}
+						<button onclick={() => toggleTimeSignature(i)}>Add Time Signature</button>
+					{/if}
+				</td>
+				<td>
+					<select bind:value={entry.chord.root} onchange={handleChordChange}>
+						{#each rootNotes as note}
+							<option value={note}>{note}</option>
+						{/each}
+					</select>
+				</td>
+				<td>
+					{#each Object.entries(qualities) as [group, qualityOptions]}
+						<div>
+							{#each qualityOptions as quality}
+								<label>
+									<input
+										type="radio"
+										name={`quality-${group}-${i}`}
+										value={quality}
+										checked={entry.chord[group] === quality}
+										onchange={() => {
+											entry.chord[group] = quality;
+											entry.chord.quality = quality;
+											handleChordChange();
+										}}
+									/>
+									{quality}
+								</label>
+							{/each}
+						</div>
+						<hr />
+					{/each}
+				</td>
+				<td>
+					{#each modifiers as modifier}
+						<label>
+							<input
+								type="radio"
+								name={`modifier-${i}`}
+								value={modifier}
+								checked={entry.chord.modifier === modifier}
+								onchange={() => toggleModifier(i, modifier)}
+							/>
+							{modifier}
+						</label>
+					{/each}
+				</td>
+				<td>
+					<input
+						type="text"
+						bind:value={entry.chord.duration}
+						onchange={handleChordChange}
+						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: left;
+	}
+	th {
+		background-color: #f2f2f2;
+	}
+	select,
+	input[type='text'],
+	input[type='number'] {
+		width: 100%;
+	}
+</style>

package/src/lib/components/ChordVisualization.svelte

@@ -0,0 +1,81 @@
+<!-- components/ChordVisualization.svelte -->
+<script lang="ts">
+	import { chordEntries } 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.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}
+					<div class="signature">
+						- Signature: {entry.timeSignature.numerator}/{entry.timeSignature.denominator}
+					</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>

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

@@ -0,0 +1,66 @@
+// functions/functions.svelte.ts
+import type { Chord, Cadence, ChordEntry } from '../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 }));
+
+	if (chordEntries.length === 0) {
+		suggestedCadences.length = 0;
+		console.log('No chords, no suggestions');
+		return;
+	}
+
+	const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII'];
+	const lastChord = chordEntries[chordEntries.length - 1].chord;
+
+	const rootIndex = rootNotes.indexOf(lastChord.root.toUpperCase());
+	let lastChordRoman = rootIndex !== -1 ? romanNumerals[rootIndex] : null;
+
+	if (lastChord.modifier === '♯') {
+		lastChordRoman += '#';
+	} else if (lastChord.modifier === '♭') {
+		lastChordRoman += 'b';
+	}
+
+	console.log('Last Chord Roman:', lastChordRoman);
+
+	const suggestions = cadencePatterns.filter((cadence) => {
+		return cadence.chords[0] === lastChordRoman;
+	});
+
+	suggestedCadences.length = 0;
+	suggestedCadences.push(...suggestions);
+
+	console.log('Suggested Cadences:', $state.snapshot({ suggestedCadences }));
+}
+
+export function toggleModifier(chordIndex: number, modifier: string) {
+	const chord = chordEntries[chordIndex].chord;
+	chord.modifier = chord.modifier === modifier ? undefined : modifier;
+	updateCadences();
+}

package/src/lib/index.ts

@@ -0,0 +1,7 @@
+// auto exports of entry components
+export * from '$lib/types/types.js';
+export * from '$lib/functions/functions.svelte.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';
+export { default as App } from '$lib/components/App.svelte';

package/src/lib/types/types.ts

@@ -0,0 +1,25 @@
+export type Chord = {
+	root: string;
+	quality: string;
+	mode?: string;
+	augDim?: string;
+	sus?: string;
+	sept?: string;
+	modifier?: string;
+	duration: string;
+};
+
+export type TimeSignature = {
+	numerator: number;
+	denominator: number;
+};
+
+export type ChordEntry = {
+	chord: Chord;
+	timeSignature?: TimeSignature;
+};
+
+export type Cadence = {
+	name: string;
+	chords: string[];
+};

package/src/routes/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import App from "../lib/components/App.svelte";
+
+</script>
+
+
+<App />

package/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+import { sveltekit } from '@sveltejs/kit/vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+});