fix: clef selector

Author: krmax44

src/games/training/TrainingSettings.vue

@@ -10,7 +10,7 @@
 						<input
 							type="checkbox"
 							id="treble"
-							:value="allClefs[0]"
+							value="treble"
 							v-model="settings.clefs"
 						/>
 						<label for="treble">Treble</label>
@@ -20,7 +20,7 @@
 						<input
 							type="checkbox"
 							id="bass"
-							:value="allClefs[1]"
+							value="bass"
 							v-model="settings.clefs"
 						/>
 						<label for="bass">Bass</label>
@@ -30,7 +30,7 @@
 						<input
 							type="checkbox"
 							id="treble8"
-							:value="allClefs[2]"
+							value="treble8vb"
 							v-model="settings.clefs"
 						/>
 						<label for="treble8">Treble (one octave lower)</label>
@@ -93,7 +93,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import Clef from '@/utils/Clef';
-import { clefs } from '../../utils/noteConstants';
 
 export default Vue.extend({
 	data() {
@@ -102,8 +101,7 @@ export default Vue.extend({
 				clefs: [],
 				tasks: [],
 				keyLabels: true
-			},
-			allClefs: clefs
+			}
 		};
 	},
 	props: {

src/games/training/index.vue

@@ -52,10 +52,26 @@ import TaskSingleNote from '@/tasks/TaskSingleNote';
 import TaskChord from '@/tasks/TaskChord';
 import { randomPattern } from '@/tasks/PatternTasks';
 import Clef from '@/utils/Clef';
+import { clefs } from '@/utils/noteConstants';
+
+type TaskNames = ('singleNotes' | 'patterns' | 'chords')[];
+
+interface Settings {
+	clefs: string[];
+	tasks: TaskNames;
+	keyLabels: boolean;
+}
+
+const defaultSettings: Settings = {
+	clefs: [],
+	tasks: ['singleNotes'],
+	keyLabels: true
+};
 
 function randomTask(
 	target: HTMLElement,
-	{ tasks: viableTasks, clefs } = defaultSettings
+	clefs: Clef[],
+	viableTasks: TaskNames
 ): Task {
 	const tasks = {
 		singleNotes: () => TaskSingleNote,
@@ -68,18 +84,6 @@ function randomTask(
 	return new Task(target, clefs);
 }
 
-interface Settings {
-	clefs: Clef[];
-	tasks: ('singleNotes' | 'patterns' | 'chords')[];
-	keyLabels: boolean;
-}
-
-const defaultSettings: Settings = {
-	clefs: [],
-	tasks: ['singleNotes'],
-	keyLabels: true
-};
-
 export default Vue.extend({
 	data() {
 		return {
@@ -122,13 +126,21 @@ export default Vue.extend({
 		newTask() {
 			this.task = randomTask(
 				this.$refs.noteRenderer as HTMLElement,
-				this.settings
+				this.clefs,
+				this.settings.tasks
 			);
 			this.task.render();
 		}
 	},
+	computed: {
+		clefs() {
+			return clefs.filter(c => this.settings.clefs.includes(c.id));
+		}
+	},
 	created() {
-		this.settings.clefs = this.$store.state.instrument.clefs;
+		this.settings.clefs = this.$store.state.instrument.clefs.map(
+			(c: Clef) => c.id
+		);
 	},
 	mounted() {
 		this.newTask();
@@ -154,7 +166,7 @@ export default Vue.extend({
 				return;
 			}
 
-			if (!this.settings.clefs.map(c => c.name).includes(this.task.clef.name)) {
+			if (!this.clefs.map(c => c.id).includes(this.task.clef.id)) {
 				this.newTask();
 			}
 		},

src/utils/Clef.ts

@@ -1,4 +1,4 @@
-export type ClefName = 'treble' | 'bass' | 'treble-8vb';
+export type ClefName = 'treble' | 'bass';
 export type ClefAnnotation = '8va' | '8vb';
 
 const annotations = {
@@ -17,4 +17,8 @@ export default class Clef {
 	get octaveShift() {
 		return this.annotation ? annotations[this.annotation] : 0;
 	}
+
+	get id() {
+		return this.name + (this.annotation || '');
+	}
 }

src/utils/noteConstants.ts

@@ -8,3 +8,4 @@ export const bass = new Clef('bass', 36, 65); // C2 - F4
 export const treblevb8 = new Clef('treble', 43, 71, '8vb');
 
 export const clefs: Clef[] = [treble, bass, treblevb8];
+export const clefIds = clefs.map(c => c.id);