fix bug with loading sequence from URL, simplify changing progression@

marginalhours · Dec 4, 2023 · 7a52d1a · 7a52d1a
1 parent d81fae3
commit 7a52d1a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 60 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -9,17 +9,18 @@
 		randomizeTonic,
 		randomizeProgression,
 		setTonic,
-		previousProgression,
-		nextProgression,
 		trySetProgressionFromURL
 	} from './progressionStore';
 	import { relativeChordToString } from '$lib/music/relativeChord';
-	import Chevron from './Chevron.svelte';
 
-	const onKeyDown = (e: KeyboardEvent) => {
+	const onKeyUp = (e: KeyboardEvent) => {
 		if (e.code == 'Space') {
 			randomizeApp();
 			e.preventDefault();
+		} else if (e.code == 'KeyP') {
+			randomizeProgression();
+		} else if (e.code == 'KeyT') {
+			randomizeTonic();
 		}
 	};
 
@@ -67,21 +68,7 @@
 			<button class="randomize-button" on:click={randomizeProgression}>randomize</button>
 		</h2>
 		<div class="progression-section-chords">
-			<button
-				on:click={previousProgression}
-				class="progression-control progression-control-previous"
-				title="Previous progression"
-			>
-				<Chevron />
-			</button>
 			{$progression.map((p) => relativeChordToString(p)).join(' - ')}
-			<button
-				on:click={nextProgression}
-				class="progression-control progression-control-next"
-				title="Next progression"
-			>
-				<Chevron />
-			</button>
 		</div>
 	</section>
 	<section class="tonic-section">
@@ -106,7 +93,7 @@
 	</section>
 </main>
 
-<svelte:window on:keydown={onKeyDown} on:hashchange={onHashChange} on:load={onLoad} />
+<svelte:window on:keyup={onKeyUp} on:hashchange={onHashChange} on:load={onLoad} />
 
 <style>
 	main {
@@ -144,24 +131,6 @@
 		position: relative;
 	}
 
-	.progression-control {
-		cursor: pointer;
-		margin: 0 1em;
-		opacity: 0.7;
-		transition: opacity 100ms ease-in-out;
-		border: none;
-		background: none;
-	}
-
-	.progression-control:hover {
-		cursor: pointer;
-		opacity: 1;
-	}
-
-	.progression-control-previous {
-		transform: scaleX(-1);
-	}
-
 	.progression-section-chords {
 		display: flex;
 	}

diff --git a/src/routes/progressionStore.ts b/src/routes/progressionStore.ts
@@ -33,6 +33,8 @@ const progressions = [
 const trySetProgressionFromURL = () => {
 	if (hasProgressionInUrlHash()) {
 		progression.set(progressionFromURLHash());
+	} else {
+		window.location.hash = chooseWithout(progressions, '');
 	}
 };
 
@@ -55,19 +57,12 @@ const progressionFromURLHash = () => {
 };
 
 const tonic = writable<PitchWithFlats>('C');
-const progressionIndex = writable<number>(0);
 
 // In fact this is mostly backed by the URL which is nice because hackable
 const progression = writable<RelativeChord[]>(
 	hasProgressionInUrlHash() ? progressionFromURLHash() : progressionFromString(progressions[0])
 );
 
-progressionIndex.subscribe((index) => {
-	if (browser) {
-		window.location.hash = progressions[index];
-	}
-});
-
 // Mutators
 
 const setTonic = (newTonic: Pitch) => {
@@ -79,20 +74,7 @@ const randomizeTonic = () => {
 };
 
 const randomizeProgression = () => {
-	progressionIndex.update((current) =>
-		chooseWithout(
-			progressions.map((_, index) => index),
-			current
-		)
-	);
-};
-
-const previousProgression = () => {
-	progressionIndex.update((current) => (progressions.length + current - 1) % progressions.length);
-};
-
-const nextProgression = () => {
-	progressionIndex.update((current) => (progressions.length + current + 1) % progressions.length);
+	window.location.hash = chooseWithout(progressions, window.location.hash);
 };
 
 const randomizeApp = () => {
@@ -106,8 +88,6 @@ export {
 	setTonic,
 	randomizeTonic,
 	randomizeProgression,
-	previousProgression,
-	nextProgression,
 	trySetProgressionFromURL,
 	randomizeApp
 };