feat: rearrange chord-finder page

src/routes/tools/chord-finder/+page.svelte

@@ -14,11 +14,13 @@
 </script>
 
 <div class="h-full w-screen">
-	<Board
-		fingers={Object.values(fingers)}
-		on:click={({ detail: { fret, line } }) => {
-			updateFingerPosition({ fret, line });
-		}}
-	></Board>
+	<div class="relative flex h-full flex-col items-center">
+		<Board
+			fingers={Object.values(fingers)}
+			on:click={({ detail: { fret, line } }) => {
+				updateFingerPosition({ fret, line });
+			}}
+		></Board>
+	</div>
 	<!-- <MetronomeProvider><RandomBox {components} /></MetronomeProvider> -->
 </div>

src/routes/tools/chord-finder/Board.svelte

@@ -1,46 +1,69 @@
 <script lang="ts">
-	import PitchNotation from '$/lib/notation/PitchNotation.svelte';
+	import FingerBoard, { type FingerInfo } from '$/lib/guitar/finger-board/FingerBoard.svelte';
 	import { identifyChordsFromPitches } from '$/utils/music/chords';
-	import { stringifyFinaleJazzChordSigns } from '$/utils/music/font';
 	import {
 		getPitchFromNumber,
 		getPitchesFromFingerPositions,
 		sortPitches
 	} from '$/utils/music/pitch';
-	import FingerBoard, { type FingerInfo } from '$/lib/guitar/finger-board/FingerBoard.svelte';
 	import ChordNotation from '$lib/notation/ChordNotation.svelte';
 	export let fingers: FingerInfo[] = [];
 
 	$: pitches = sortPitches(getPitchesFromFingerPositions(fingers.map((finger) => finger.position)));
 	$: chords = identifyChordsFromPitches(pitches);
-	$: {
-		console.log(chords?.bass, chords?.chords[0].symbols);
-	}
-	export let isFingerboardHidden = false;
 </script>
 
-{#if chords != undefined}
-	{#each chords.chords as chord}
-		<div class="mb-[0.5em] block h-fit select-none text-center text-[80px] leading-[1.2em]">
-			<ChordNotation
-				root={getPitchFromNumber(chord.symbols.root).note}
-				quality={chord.symbols.quality}
-				extension={chord.symbols.extension ?? undefined}
-				tensions={chord.tones.tensions}
-				bass={getPitchFromNumber(chords.bass).note}
-			/>
+<div class="relative flex h-full flex-col items-center justify-center">
+	{#if chords != undefined}
+		{@const primaryChord = chords.chords.at(0)}
+		<div class="flex flex-col items-center gap-8 lg:flex-row lg:gap-28">
+			{#if primaryChord}
+				<div class="inline-block h-fit select-none text-center text-[80px] leading-[1.2em]">
+					<ChordNotation
+						root={getPitchFromNumber(primaryChord.symbols.root).note}
+						quality={primaryChord.symbols.quality}
+						extension={primaryChord.symbols.extension}
+						tensions={primaryChord.tones.tensions}
+						bass={getPitchFromNumber(chords.bass).note}
+					/>
+				</div>
+			{/if}
+			<div class="flex flex-col">
+				{#each chords.chords.slice(1) as chord, idx}
+					{#if idx === 0}
+						<div class="inline-block h-fit select-none text-center text-[60px] leading-[1.2em]">
+							<ChordNotation
+								root={getPitchFromNumber(chord.symbols.root).note}
+								quality={chord.symbols.quality}
+								extension={chord.symbols.extension}
+								tensions={chord.tones.tensions}
+								bass={getPitchFromNumber(chords.bass).note}
+							/>
+						</div>
+					{:else}
+						<div class="block h-fit select-none text-center text-[40px] leading-[1.2em]">
+							<ChordNotation
+								root={getPitchFromNumber(chord.symbols.root).note}
+								quality={chord.symbols.quality}
+								extension={chord.symbols.extension}
+								tensions={chord.tones.tensions}
+								bass={getPitchFromNumber(chords.bass).note}
+							/>
+						</div>
+					{/if}
+				{/each}
+			</div>
 		</div>
-	{/each}
-{/if}
-<p>
+	{/if}
+</div>
+<!-- <p>
 	{#each pitches as pitch}
 		<PitchNotation note={pitch.note} octave={pitch.octave}></PitchNotation>
 	{/each}
-	<span class="font-chord">
-		{stringifyFinaleJazzChordSigns(['MinorSixth'])}
-		{String.fromCodePoint(225 + 29)}
-	</span>
-</p>
-{#if !isFingerboardHidden}
-	<FingerBoard {fingers} fretRange={{ start: 0, end: 12, visibility: 'all' }} on:click />
-{/if}
+</p> -->
+<FingerBoard
+	class="mb-28 w-screen lg:w-[calc(100vw-14rem)]"
+	{fingers}
+	fretRange={{ start: 0, end: 12, visibility: 'all' }}
+	on:click
+/>

src/utils/music/chords.ts

@@ -45,12 +45,10 @@ export function identifyChordsFromPitches(pitches: Pitch[]) {
 	const numberedNotes = [
 		...new Set(pitches.map((pitch) => ((numberingPitch(pitch) % 12) + 12) % 12))
 	].toSorted();
-	console.log(numberedNotes);
 	for (const root of numberedNotes) {
 		const intervals = new Set(
 			numberedNotes.map((n) => (n >= root ? n - root : n - root + 12)).filter((n) => n !== 0)
 		);
-		console.log([...intervals]);
 		identifiedChords.push(identifyChordFromIntervals(bassNumber, root, intervals));
 	}
 	identifiedChords.sort(
@@ -103,7 +101,6 @@ function identifyChordFromIntervals(
 
 	// now we found 3rd! it's very critical to determine its quality
 	if (third !== bassInterval) {
-		console.log(third, bassInterval);
 		intervals.delete(bassInterval);
 		intervals.delete(bassInterval + 12);
 	}