Added roadmaps and options for always the same 2 keys [SG-122]

index.php

@@ -1,6 +1,6 @@
 <?php
 
-$version = '1.4.0';
+$version = '1.5.0';
 
 // If config/env.php exists, contains the 'env' key, and it's set to 'dev' add version to js imports
 if (file_exists(__DIR__ . '/config/env.php')) {

src/components/game-core/ui/note-displayer.js

@@ -1,4 +1,4 @@
-import {TrebleClefVisualizer} from "../../../features/treble-clef/treble-clef-visualizer.js?v=1.4.0";
+import {TrebleClefVisualizer} from "../../../features/treble-clef/treble-clef-visualizer.js?v=1.5.0";
 
 export class NoteDisplayer {
 

src/components/game-modes/note-on-fretboard/note-on-fretboard-generator.js

@@ -1,5 +1,5 @@
-import {NoteShuffler} from "../../shuffler/note-shuffler.js?v=1.4.0";
-import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=1.4.0";
+import {NoteShuffler} from "../../shuffler/note-shuffler.js?v=1.5.0";
+import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=1.5.0";
 
 export class NoteOnFretboardGenerator {
     constructor() {
@@ -95,7 +95,7 @@ export class NoteOnFretboardGenerator {
         if (noteName.includes('♯') && Math.random() < 0.5) {
             // Get the note index from the note above the current note and wrap around if it's the last one
             const noteAboveIndex = (this.noteShuffler.notes.indexOf(noteName) + 1) % this.noteShuffler.notes.length;
-            return this.noteShuffler.notes[noteAboveIndex].replace('♯', '♭');
+            return this.noteShuffler.notes[noteAboveIndex] + '♭';
         }
 
         return noteName;

src/components/game-modes/note-on-fretboard/note-on-fretboard-note-handler.js

@@ -1,8 +1,8 @@
-import {DetectedNoteVerifier} from "../../../features/detected-note/detected-note-verifier.js?v=1.4.0";
-import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=1.4.0";
-import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=1.4.0";
-import {NoteOnFretboardGenerator} from "./note-on-fretboard-generator.js?v=1.4.0";
-import {NoteOnFretboardProgressUpdater} from "./note-on-fretboard-progress-updater.js?v=1.4.0";
+import {DetectedNoteVerifier} from "../../../features/detected-note/detected-note-verifier.js?v=1.5.0";
+import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=1.5.0";
+import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=1.5.0";
+import {NoteOnFretboardGenerator} from "./note-on-fretboard-generator.js?v=1.5.0";
+import {NoteOnFretboardProgressUpdater} from "./note-on-fretboard-progress-updater.js?v=1.5.0";
 
 /**
  * Note display coordinator when playing the "game" which

src/components/game-modes/note-on-fretboard/note-on-fretboard-progress-updater.js

@@ -1,4 +1,4 @@
-import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=1.4.0";
+import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=1.5.0";
 
 /**
  * Progress update for games that use the metronome and have challenging

src/components/shuffler/note-shuffler.js

@@ -26,7 +26,7 @@ export class NoteShuffler {
         for (const string of this.strings) {
             for (const note of this.notes) {
                 // Not adding open strings
-                if (note !== string) {
+                if (note !== string && !(string === 'E2' && note === 'E')) {
                     const noteCombination = `${string}|${note}`;
                     this.notesList.push(noteCombination); // Add the note combination to the notesList
                 }
@@ -104,6 +104,9 @@ export class NoteShuffler {
         // the same note.
         // this.shuffledCombinations = "B|F♯,B|C♯,G|F♯,G|E,B|G,A|D,G|C,A|C♯,B|D,A|F,G|D♯,G|B,A|G,D|A♯,E|F,B|E,E|B,G|G♯,D|C♯,E|G,D|G♯,E|A♯,G|D,B|C,D|F,E|C♯,A|B,D|E,E|A,A|A♯,E|C,D|A,B|G♯,E|D♯,B|F,B|A♯,D|G,G|C♯,D|B,E|D,D|C,A|G♯,A|C,D|F♯,A|E,B|D♯,G|A♯,B|A,E|G♯,A|D♯,G|F,E|F♯,G|A,D|D♯,A|F♯".split(",");
         console.debug('Shuffled combinations: ' + this.shuffledCombinations, `Amount: ${this.shuffledCombinations.length}`);
+        this.shuffledCombinations.forEach((combination, index) => {
+            console.debug(`${index}: ${combination}`);
+        });
         return this.shuffledCombinations.length;
     }
 

src/features/detected-note/detected-note-verifier.js

@@ -1,5 +1,5 @@
-import {DetectedNoteVisualizer} from "./detected-note-visualizer.js?v=1.4.0";
-import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=1.4.0";
+import {DetectedNoteVisualizer} from "./detected-note-visualizer.js?v=1.5.0";
+import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=1.5.0";
 
 export class DetectedNoteVerifier {
     // Variable is set in note-combination-coordinator each time new note is displayed

src/features/game-core/frequency-bars/frequency-bars-controller.js

@@ -1,4 +1,4 @@
-import {FrequencyBarsVisualizer} from "./frequency-bars-visualizer.js?v=1.4.0";
+import {FrequencyBarsVisualizer} from "./frequency-bars-visualizer.js?v=1.5.0";
 
 export class FrequencyBarsController {
 

src/features/game-core/game-initialization/core-game-coordination-initializer.js

@@ -1,10 +1,10 @@
-import {CoreGameCoordinator} from "../game-start/core-game-coordinator.js?v=1.4.0";
+import {CoreGameCoordinator} from "../game-start/core-game-coordinator.js?v=1.5.0";
 import {
     FretboardNoteGameCoordinator
-} from "../../game-modes/note-on-fretboard/fretboard-note-game-coordinator.js?v=1.4.0";
-import {NoteInKeyGameCoordinator} from "../../game-modes/note-in-key/note-in-key-game-coordinator.js?v=1.4.0";
-import {GameConfigurationManager} from "./game-configuration-manager.js?v=1.4.0";
-import {MetronomePracticeCoordinator} from "../../game-modes/metronome/metronome-practice-coordinator.js?v=1.4.0";
+} from "../../game-modes/note-on-fretboard/fretboard-note-game-coordinator.js?v=1.5.0";
+import {NoteInKeyGameCoordinator} from "../../game-modes/note-in-key/note-in-key-game-coordinator.js?v=1.5.0";
+import {GameConfigurationManager} from "./game-configuration-manager.js?v=1.5.0";
+import {MetronomePracticeCoordinator} from "../../game-modes/metronome/metronome-practice-coordinator.js?v=1.5.0";
 
 export class CoreGameCoordinationInitializer {
 

src/features/game-core/game-initialization/game-configuration-manager.js

@@ -1,4 +1,4 @@
-import {GameProgressVisualizer} from "../game-progress/game-progress-visualizer.js?v=1.4.0";
+import {GameProgressVisualizer} from "../game-progress/game-progress-visualizer.js?v=1.5.0";
 
 export class GameConfigurationManager {
 

src/features/game-core/game-initialization/game-initializer.js

@@ -1,7 +1,7 @@
-import {GameConfigurationManager} from "./game-configuration-manager.js?v=1.4.0";
-import {CoreGameCoordinationInitializer} from "./core-game-coordination-initializer.js?v=1.4.0";
-import {VisibilityChangeHandler} from "./visibility-change-handler.js?v=1.4.0";
-import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=1.4.0";
+import {GameConfigurationManager} from "./game-configuration-manager.js?v=1.5.0";
+import {CoreGameCoordinationInitializer} from "./core-game-coordination-initializer.js?v=1.5.0";
+import {VisibilityChangeHandler} from "./visibility-change-handler.js?v=1.5.0";
+import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=1.5.0";
 
 export class GameInitializer {
     constructor() {

src/features/game-core/game-loader.js

@@ -1,4 +1,4 @@
-import {GameInitializer} from "./game-initialization/game-initializer.js?v=1.4.0";
+import {GameInitializer} from "./game-initialization/game-initializer.js?v=1.5.0";
 
 export class GameLoader {
     constructor() {

src/features/game-core/game-progress/game-progress-updater.js

@@ -1,4 +1,4 @@
-import {GameProgressVisualizer} from "./game-progress-visualizer.js?v=1.4.0";
+import {GameProgressVisualizer} from "./game-progress-visualizer.js?v=1.5.0";
 
 /**
  * Progress update for games that use the metronome and have challenging

src/features/game-core/game-start/core-game-coordinator.js

@@ -1,8 +1,8 @@
-import {MetronomeOperator} from "../metronome/metronome-operator.js?v=1.4.0";
-import {TuneOperator} from "../tuner/tune-operator.js?v=1.4.0";
-import {FrequencyBarsController} from "../frequency-bars/frequency-bars-controller.js?v=1.4.0";
-import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=1.4.0";
-import {ScreenWakeLocker} from "../wake-lock/screen-wake-locker.js?v=1.4.0";
+import {MetronomeOperator} from "../metronome/metronome-operator.js?v=1.5.0";
+import {TuneOperator} from "../tuner/tune-operator.js?v=1.5.0";
+import {FrequencyBarsController} from "../frequency-bars/frequency-bars-controller.js?v=1.5.0";
+import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=1.5.0";
+import {ScreenWakeLocker} from "../wake-lock/screen-wake-locker.js?v=1.5.0";
 
 export class CoreGameCoordinator {
     metronomeOperator = new MetronomeOperator();

src/features/game-core/game-ui/game-elements-visualizer.js

@@ -1,4 +1,4 @@
-import {GameLevelTracker} from "../game-progress/game-level-tracker.js?v=1.4.0";
+import {GameLevelTracker} from "../game-progress/game-level-tracker.js?v=1.5.0";
 
 export class GameElementsVisualizer {
     static hideGameElementsAndDisplayInstructions() {

src/features/game-modes/metronome/metronome-practice-coordinator.js

@@ -1,5 +1,5 @@
-import {MetronomePracticeInitializer} from "./metronome-practice-initializer.js?v=1.4.0";
-import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=1.4.0";
+import {MetronomePracticeInitializer} from "./metronome-practice-initializer.js?v=1.5.0";
+import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=1.5.0";
 
 export class MetronomePracticeCoordinator {
 

src/features/game-modes/metronome/metronome-practice-initializer.js

@@ -1,6 +1,6 @@
-import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=1.4.0";
-import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=1.4.0";
-import {BpmInput} from "../../../components/configuration/bpm-input.js?v=1.4.0";
+import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=1.5.0";
+import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=1.5.0";
+import {BpmInput} from "../../../components/configuration/bpm-input.js?v=1.5.0";
 
 export class MetronomePracticeInitializer {
     // Changed in metronome-practice-coordinator

src/features/game-modes/note-in-key/note-in-key-game-coordinator.js

@@ -1,5 +1,5 @@
-import {NoteInKeyGameInitializer} from "./note-in-key-game-initializer.js?v=1.4.0";
-import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=1.4.0";
+import {NoteInKeyGameInitializer} from "./note-in-key-game-initializer.js?v=1.5.0";
+import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=1.5.0";
 
 export class NoteInKeyGameCoordinator {
     string;
@@ -40,6 +40,8 @@ export class NoteInKeyGameCoordinator {
         // Start no guitar game if no guitar option is checked
         NoteInKeyGameNoGuitar.playNoGuitarNoteInKey(this.noteInKeyGenerator.diatonicNotesOnStrings, this.keyString, this.keyNote);
 
+        document.querySelector('#scale-roadmaps').style.display = 'none';
+
         // Start the timer
         this.timerInterval = setInterval(() => {
             this.timer += 1;
@@ -57,6 +59,7 @@ export class NoteInKeyGameCoordinator {
         if (document.querySelector('#fretboard')) {
             document.querySelector('#fretboard').style.display = 'none';
         }
+        document.querySelector('#scale-roadmaps').style.display = null;
     }
 
     destroy() {
@@ -77,12 +80,24 @@ export class NoteInKeyGameCoordinator {
 
     reloadKeyAndString() {
         console.log('reload key and string in note in key game');
-        // Get new string and key
-        let {keyString, keyNote} = this.noteInKeyGenerator.getNewStringAndKey();
-        this.keyNote = keyNote;
-        this.keyString = keyString;
+
+        // Select the checked checkbox if there is one
+        const checkedCheckbox = document.querySelector('.always-same-key-option input[type="checkbox"]:checked');
+
+        // If a checkbox is checked
+        if (checkedCheckbox) {
+            // Use the data-string and data-key attributes of the checked checkbox
+            this.keyString = checkedCheckbox.getAttribute('data-string');
+            this.keyNote = checkedCheckbox.getAttribute('data-key');
+        }else{
+            // Get new string and key
+            const { keyString, keyNote } = this.noteInKeyGenerator.getNewStringAndKey();
+            this.keyString = keyString;
+            this.keyNote = keyNote;
+        }
+
         // Prepare the attribute containing the notes on strings that may be displayed (diatonic to key, difficulty)
-        this.noteInKeyGenerator.loadShuffledCombinations(keyString, keyNote);
+        this.noteInKeyGenerator.loadShuffledCombinations(this.keyString, this.keyNote);
         console.log('key reloaded');
         // Display current key and string
         document.getElementById('current-key-and-string').innerHTML =

src/features/game-modes/note-in-key/note-in-key-game-initializer.js

@@ -1,10 +1,10 @@
-import {NoteInKeyGameCoordinator} from "./note-in-key-game-coordinator.js?v=1.4.0";
-import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=1.4.0";
-import {GameConfigurationManager} from "../../game-core/game-initialization/game-configuration-manager.js?v=1.4.0";
-import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=1.4.0";
-import {NoteInKeyGenerator} from "./note-in-key-generator.js?v=1.4.0";
-import {PracticeNoteDisplayer} from "../../practice-note-combination/practice-note-displayer.js?v=1.4.0";
-import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=1.4.0";
+import {NoteInKeyGameCoordinator} from "./note-in-key-game-coordinator.js?v=1.5.0";
+import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=1.5.0";
+import {GameConfigurationManager} from "../../game-core/game-initialization/game-configuration-manager.js?v=1.5.0";
+import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=1.5.0";
+import {NoteInKeyGenerator} from "./note-in-key-generator.js?v=1.5.0";
+import {PracticeNoteDisplayer} from "../../practice-note-combination/practice-note-displayer.js?v=1.5.0";
+import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=1.5.0";
 
 export class NoteInKeyGameInitializer {
     // Possible keys
@@ -87,7 +87,6 @@ export class NoteInKeyGameInitializer {
     reloadKeyAndStringEventHandler() {
         console.trace('reloadKeyAndStringEventHandler');
         const gameIsRunning = this.noteInKeyGameCoordinator.gameIsRunning;
-        console.log(this, this.noteInKeyGameCoordinator.gameIsRunning);
         // Pause game
         document.dispatchEvent(new Event('game-stop'));
         // Load new key on string
@@ -119,6 +118,7 @@ export class NoteInKeyGameInitializer {
         // Remove string options
         document.querySelector('#note-in-key-game-strings-div').remove();
         document.querySelector('#string-option-title').remove();
+        document.querySelector('#scale-roadmaps').remove();
 
         document.querySelector('#note-and-string-container').remove();
 
@@ -207,6 +207,15 @@ export class NoteInKeyGameInitializer {
                         <!--<span class="normal-font-size"></span>-->
                         <img src="src/assets/images/no-guitar-icon.svg" class="button-icon">
                     </label>
+                    <label class='checkbox-button option-for-game-mode always-same-key-option' id="g-key-option">
+                        <input type='checkbox' data-string="E" data-key="G">
+                        <span class="normal-font-size">G key</span>
+                    </label>
+                    <label class='checkbox-button option-for-game-mode always-same-key-option' id="d-key-option">
+                        <input type='checkbox' data-string="A" data-key="D">
+                        <span class="normal-font-size">D key</span>
+                    </label>
+                    
                     `;
         document.querySelector('#game-mode-options').insertAdjacentHTML('afterend', `
                     <span class="normal-font-size label-text options-title-span" id="string-option-title">Strings</span>
@@ -249,6 +258,9 @@ export class NoteInKeyGameInitializer {
                 this.reloadKeyAndStringEventHandler();
             });
 
+        // Add event listeners for always the same key options
+        this.addAlwaysSameKeyEventListeners();
+
         document.querySelector('#header-center-container').innerHTML =
             `<img src="src/assets/images/reload-icon.svg" id="reload-key-btn"> Reload key`;
 
@@ -297,6 +309,16 @@ export class NoteInKeyGameInitializer {
             on how to find the chords to any song on guitar from Andrew Clarke that motivated me
             to create this tool.</p>
             `;
+        document.querySelector('#game-start-instruction').insertAdjacentHTML('afterend',
+            `<div id="scale-roadmaps">
+                <details open>
+                    <summary><h3>Full scale roadmaps</h3></summary>
+                    <img src="src/assets/images/roadmaps/G-heptatonic-scale-numbered.svg" class="roadmap-image"
+                    alt="roadmap">
+                    <img src="src/assets/images/roadmaps/D-heptatonic-scale-numbered.svg" class="roadmap-image">
+                    </details>`);
+
+
         document.querySelector('main').insertAdjacentHTML('beforeend',
             `<div id="note-and-string-container" style="display: none">
                 <div>
@@ -309,4 +331,29 @@ export class NoteInKeyGameInitializer {
                 </div>
             </div>`);
     }
+
+    addAlwaysSameKeyEventListeners() {
+        const alwaysSameKeyOptions = document.querySelectorAll('.always-same-key-option');
+        const self = this;
+        // If one of the key options is checked, the other should be unchecked
+        for (const option of alwaysSameKeyOptions) {
+            option.addEventListener('change', () => {
+                console.log(option.querySelector('input').checked);
+                // If the checkbox was not checked before
+                if (option.querySelector('input').checked) {
+
+                    // When one game mode is selected, uncheck all game modes
+                    for (const disabledOption of alwaysSameKeyOptions) {
+                        disabledOption.querySelector('input').checked = false;
+                        // Fire change event so that option value is stored in local storage
+                        disabledOption.querySelector('input').dispatchEvent(new Event('change'));
+                    }
+                    // The radio button that was clicked should be checked only if it was not checked before
+                    option.querySelector('input').checked = true;
+                    option.querySelector('input').dispatchEvent(new Event('change'));
+                }
+                this.reloadKeyAndStringEventHandler();
+            });
+        }
+    }
 }

src/features/game-modes/note-in-key/note-in-key-game-no-guitar.js

@@ -1,4 +1,4 @@
-import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=1.4.0";
+import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=1.5.0";
 
 export class NoteInKeyGameNoGuitar {
     static diatonicNotesOnStrings;

src/features/game-modes/note-in-key/note-in-key-generator.js

@@ -1,4 +1,4 @@
-import {ArrayShuffler} from "../../../components/shuffler/array-shuffler.js?v=1.4.0";
+import {ArrayShuffler} from "../../../components/shuffler/array-shuffler.js?v=1.5.0";
 
 export class NoteInKeyGenerator {
     diatonicNotesOnStrings;

src/features/game-modes/note-on-fretboard/fretboard-note-game-coordinator.js

@@ -1,7 +1,7 @@
-import {FretboardNoteGameInitializer} from "./fretboard-note-game-initializer.js?v=1.4.0";
+import {FretboardNoteGameInitializer} from "./fretboard-note-game-initializer.js?v=1.5.0";
 import {
     NoteOnFretboardNoteHandler
-} from "../../../components/game-modes/note-on-fretboard/note-on-fretboard-note-handler.js?v=1.4.0";
+} from "../../../components/game-modes/note-on-fretboard/note-on-fretboard-note-handler.js?v=1.5.0";
 
 /**
  * Game mode "note-on-fretboard" core logic