Skip to content

Commit

Permalink
show both major & minor scales at top in Scales
Browse files Browse the repository at this point in the history
  • Loading branch information
TeemuKoivisto committed Jun 30, 2024
1 parent 6f15762 commit 9af65fc
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 6 deletions.
2 changes: 1 addition & 1 deletion packages/chords-and-scales/src/scales.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
[1, 2, 3, 5, 6]
],
[["Major Pentatonic Blues"], [1, 2, -3, 3, 5, 6]],
[["Scottish Pentatonic"], [1, 2, 4, 5, 6]],
[
["Suspended Pentatonic", "Egyptian"],
[1, 2, 4, 5, -7]
],
[["Scottish Pentatonic"], [1, 2, 4, 5, 6]],
[["Harmonic Major"], [1, 2, 3, 4, 5, -6, 7]],
[
["Double Harmonic", "Byzantine", "Arabic"],
Expand Down
65 changes: 60 additions & 5 deletions packages/client/src/components/scales/Scales.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
createScale,
createScaleUnsafe,
createTrichords,
normalizeKey,
scalesFromJSON
} from '@/chords-and-scales'
Expand Down Expand Up @@ -33,8 +34,36 @@
trichords: scl.trichords,
chords: []
}))
$: leftList = scalesList.filter((_, i) => i < scalesList.length / 2)
$: rightList = scalesList.filter((_, i) => i >= scalesList.length / 2)
let leftList: ListItem[] = []
let rightList: ListItem[] = []
$: {
let where = 'Major'
leftList = []
rightList = []
// Show both Major and Minor keys in split list view so you don't have to scroll
scalesList.forEach(v => {
if (v.key === 'Minor') {
where = v.key
} else if (v.key === 'Ionian') {
where = 'modes'
} else if (v.key === 'Enigmatic Major') {
where = 'rest'
}
if (where === 'Major') {
leftList.push(v)
} else if (where === 'Minor') {
rightList.push(v)
} else if (where === 'modes') {
leftList.push(v)
} else {
if (rightList.length > leftList.length) {
leftList.push(v)
} else {
rightList.push(v)
}
}
})
}
let shownKey = ''
let oldKeyAndScale = [$scaleData.key, $scaleData.scale]
Expand All @@ -48,7 +77,7 @@
function handleKeyChange({
currentTarget: { value }
}: Event & { currentTarget: EventTarget & HTMLInputElement }) {
shownKey = `${value.charAt(0).toUpperCase()}${value.charAt(1).toLowerCase()}`
shownKey = normalizeKey(value)
scalesList = scalesList.map(d => {
const created = createScale(shownKey, d.key)
let scl = shownKey && 'data' in created ? created.data : undefined
Expand Down Expand Up @@ -142,7 +171,7 @@
/>
</div>
<div class="body max-h-[30rem] overflow-scroll" class:hidden={$hidden}>
<ul class="list odd w-full">
<ul class="list split-list odd w-full">
{#each leftList as scale}
<li>
<div class="text-xs font-bold">{scale.raw.names[0]}</div>
Expand All @@ -159,7 +188,7 @@
</li>
{/each}
</ul>
<ul class="list even w-full">
<ul class="list split-list even w-full">
{#each rightList as scale}
<li>
<div class="text-xs font-bold">{scale.raw.names[0]}</div>
Expand All @@ -176,6 +205,23 @@
</li>
{/each}
</ul>
<ul class="list full-list odd w-full">
{#each scalesList as scale}
<li>
<div class="text-xs font-bold">{scale.raw.names[0]}</div>
<Intervals
scale={scale.scale}
intervals={scale.raw.intervals}
on:click={() => handleIntervalsClicked(scale)}
/>
<Trichords
trichords={scale.trichords}
chords={scale.chords}
on:click={() => handleTrichordsClicked(scale)}
/>
</li>
{/each}
</ul>
</div>
</fieldset>
</div>
Expand All @@ -191,6 +237,12 @@
grid-template-rows: auto;
@media (width <= 600px) {
grid-template-columns: 1fr;
& > .split-list {
display: none;
}
& > .full-list {
display: flex;
}
}
&.hidden {
display: none;
Expand Down Expand Up @@ -224,6 +276,9 @@
}
}
}
.full-list {
display: none;
}
.error {
@apply text-xs text-red-500;
}
Expand Down

0 comments on commit 9af65fc

Please sign in to comment.