Added random selection when both patterns selected [SG-122]

index.php

@@ -1,6 +1,6 @@
 <?php
 
-$version = '2.1.6';
+$version = '2.2.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/assets/styles/style.css

@@ -68,11 +68,22 @@
         padding: 4px 12px 4px 8px;
         background: #1f2425;
         border: 3px solid #3c4143;
+        /*border: 3px solid  saddlebrown;*/
+        /*box-shadow: inset 0 -10px 20px 0 rgba(0, 0, 0, 0.7), inset 0 10px 20px 0 rgba(0, 0, 0, 0.7);*/
+        /*background: #525252;*/
+        /*background: saddlebrown;*/
+        /*border: 0px solid #3c4143;*/
+        /*padding: 5px 14px 5px 10px;*/
+        /*box-shadow: inset 0 -10px 20px 0 rgba(0, 0, 0, 0.4), inset 0 10px 20px 0 rgba(0, 0, 0, 0.4);*/
         border-radius: 20px;
         cursor: pointer;
         min-height: 40px;
     }
 
+    .checkbox-button:hover {
+        /*box-shadow: 0 0 10px 0 #3c4143;*/
+    }
+
     .checkbox-button span {
         font-size: 16px;
     }
@@ -119,6 +130,7 @@
 
     input {
         accent-color: saddlebrown;
+        accent-color: #005d72;
     }
 
     #bpm-input {
@@ -479,7 +491,7 @@
     }
 
     #sensitivity-range-slider {
-        width: 200px;
+        width: 350px;
         max-width: 100%;
         direction: rtl;
     }

src/components/configuration/mic-sensitivity-option.js

@@ -1,6 +1,6 @@
 import {
     GameConfigurationManager
-} from "../../features/game-core/game-initialization/game-configuration-manager.js?v=2.1.6";
+} from "../../features/game-core/game-initialization/game-configuration-manager.js?v=2.2.0";
 
 export class MicSensitivityOption {
     static addMicSensitivityOption() {

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

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

src/components/game-modes/note-in-key/roadmap-selector/fret-pattern-selector.js

@@ -1,7 +1,7 @@
-import {DualRangeSlider} from "./dual-range-slider.js?v=2.1.6";
-import {NoteInKeyGenerator} from "../../../../features/game-modes/note-in-key/note-in-key-generator.js?v=2.1.6";
-import {availableNotesOnStrings} from "../../../configuration/config-data.js?v=2.1.6";
-import {ModalHandler} from "../../../game-core/ui/modal-handler.js?v=2.1.6";
+import {DualRangeSlider} from "./dual-range-slider.js?v=2.2.0";
+import {NoteInKeyGenerator} from "../../../../features/game-modes/note-in-key/note-in-key-generator.js?v=2.2.0";
+import {availableNotesOnStrings} from "../../../configuration/config-data.js?v=2.2.0";
+import {ModalHandler} from "../../../game-core/ui/modal-handler.js?v=2.2.0";
 
 export class FretPatternSelector {
 

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

@@ -1,5 +1,5 @@
-import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=2.1.6";
-import {NoteOnFretboardShuffler} from "./note-on-fretboard-shuffler.js?v=2.1.6";
+import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=2.2.0";
+import {NoteOnFretboardShuffler} from "./note-on-fretboard-shuffler.js?v=2.2.0";
 
 export class NoteOnFretboardGenerator {
     constructor() {

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=2.1.6";
-import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=2.1.6";
-import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=2.1.6";
-import {NoteOnFretboardGenerator} from "./note-on-fretboard-generator.js?v=2.1.6";
-import {NoteOnFretboardProgressUpdater} from "./note-on-fretboard-progress-updater.js?v=2.1.6";
+import {DetectedNoteVerifier} from "../../../features/detected-note/detected-note-verifier.js?v=2.2.0";
+import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=2.2.0";
+import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=2.2.0";
+import {NoteOnFretboardGenerator} from "./note-on-fretboard-generator.js?v=2.2.0";
+import {NoteOnFretboardProgressUpdater} from "./note-on-fretboard-progress-updater.js?v=2.2.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=2.1.6";
+import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=2.2.0";
 
 /**
  * Progress update for games that use the metronome and have challenging

src/components/game-modes/note-on-fretboard/range-selector.js

@@ -1,6 +1,6 @@
-import {DualRangeSlider} from "../note-in-key/roadmap-selector/dual-range-slider.js?v=2.1.6";
-import {ModalHandler} from "../../game-core/ui/modal-handler.js?v=2.1.6";
-import {availableNotesOnStrings} from "../../configuration/config-data.js?v=2.1.6";
+import {DualRangeSlider} from "../note-in-key/roadmap-selector/dual-range-slider.js?v=2.2.0";
+import {ModalHandler} from "../../game-core/ui/modal-handler.js?v=2.2.0";
+import {availableNotesOnStrings} from "../../configuration/config-data.js?v=2.2.0";
 
 export class RangeSelector {
 

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

@@ -1,5 +1,5 @@
-import {DetectedNoteVisualizer} from "./detected-note-visualizer.js?v=2.1.6";
-import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=2.1.6";
+import {DetectedNoteVisualizer} from "./detected-note-visualizer.js?v=2.2.0";
+import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=2.2.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=2.1.6";
+import {FrequencyBarsVisualizer} from "./frequency-bars-visualizer.js?v=2.2.0";
 
 export class FrequencyBarsController {
     frequencyData = null;

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

@@ -1,11 +1,11 @@
-import {CoreGameCoordinator} from "../game-start/core-game-coordinator.js?v=2.1.6";
+import {CoreGameCoordinator} from "../game-start/core-game-coordinator.js?v=2.2.0";
 import {
     FretboardNoteGameCoordinator
-} from "../../game-modes/note-on-fretboard/fretboard-note-game-coordinator.js?v=2.1.6";
-import {NoteInKeyGameCoordinator} from "../../game-modes/note-in-key/note-in-key-game-coordinator.js?v=2.1.6";
-import {GameConfigurationManager} from "./game-configuration-manager.js?v=2.1.6";
-import {MetronomePracticeCoordinator} from "../../game-modes/metronome/metronome-practice-coordinator.js?v=2.1.6";
-import {MicSensitivityOption} from "../../../components/configuration/mic-sensitivity-option.js?v=2.1.6";
+} from "../../game-modes/note-on-fretboard/fretboard-note-game-coordinator.js?v=2.2.0";
+import {NoteInKeyGameCoordinator} from "../../game-modes/note-in-key/note-in-key-game-coordinator.js?v=2.2.0";
+import {GameConfigurationManager} from "./game-configuration-manager.js?v=2.2.0";
+import {MetronomePracticeCoordinator} from "../../game-modes/metronome/metronome-practice-coordinator.js?v=2.2.0";
+import {MicSensitivityOption} from "../../../components/configuration/mic-sensitivity-option.js?v=2.2.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=2.1.6";
+import {GameProgressVisualizer} from "../game-progress/game-progress-visualizer.js?v=2.2.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=2.1.6";
-import {CoreGameCoordinationInitializer} from "./core-game-coordination-initializer.js?v=2.1.6";
-import {VisibilityChangeHandler} from "./visibility-change-handler.js?v=2.1.6";
-import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=2.1.6";
+import {GameConfigurationManager} from "./game-configuration-manager.js?v=2.2.0";
+import {CoreGameCoordinationInitializer} from "./core-game-coordination-initializer.js?v=2.2.0";
+import {VisibilityChangeHandler} from "./visibility-change-handler.js?v=2.2.0";
+import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=2.2.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=2.1.6";
+import {GameInitializer} from "./game-initialization/game-initializer.js?v=2.2.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=2.1.6";
+import {GameProgressVisualizer} from "./game-progress-visualizer.js?v=2.2.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=2.1.6";
-import {TuneOperator} from "../tuner/tune-operator.js?v=2.1.6";
-import {FrequencyBarsController} from "../frequency-bars/frequency-bars-controller.js?v=2.1.6";
-import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=2.1.6";
-import {ScreenWakeLocker} from "../wake-lock/screen-wake-locker.js?v=2.1.6";
+import {MetronomeOperator} from "../metronome/metronome-operator.js?v=2.2.0";
+import {TuneOperator} from "../tuner/tune-operator.js?v=2.2.0";
+import {FrequencyBarsController} from "../frequency-bars/frequency-bars-controller.js?v=2.2.0";
+import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=2.2.0";
+import {ScreenWakeLocker} from "../wake-lock/screen-wake-locker.js?v=2.2.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=2.1.6";
+import {GameLevelTracker} from "../game-progress/game-level-tracker.js?v=2.2.0";
 
 export class GameElementsVisualizer {
     static hideGameElementsAndDisplayInstructions() {

src/features/game-core/game-ui/level-up-visualizer.js

@@ -1,4 +1,4 @@
-import {ModalHandler} from "../../../components/game-core/ui/modal-handler.js?v=2.1.6";
+import {ModalHandler} from "../../../components/game-core/ui/modal-handler.js?v=2.2.0";
 
 export class LevelUpVisualizer {
     /**

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

@@ -1,5 +1,5 @@
-import {MetronomePracticeInitializer} from "./metronome-practice-initializer.js?v=2.1.6";
-import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=2.1.6";
+import {MetronomePracticeInitializer} from "./metronome-practice-initializer.js?v=2.2.0";
+import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=2.2.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=2.1.6";
-import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=2.1.6";
-import {BpmInput} from "../../../components/configuration/bpm-input.js?v=2.1.6";
+import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=2.2.0";
+import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=2.2.0";
+import {BpmInput} from "../../../components/configuration/bpm-input.js?v=2.2.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 {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=2.1.6";
-import {NoteInKeyGameInitializer} from "./note-in-key-game-initializer.js?v=2.1.6";
+import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=2.2.0";
+import {NoteInKeyGameInitializer} from "./note-in-key-game-initializer.js?v=2.2.0";
 
 export class NoteInKeyGameCoordinator {
     string;
@@ -83,6 +83,9 @@ export class NoteInKeyGameCoordinator {
     reloadKeyAndString() {
         console.log('reload key and string in note in key game');
 
+        // Reset selected fretboard pattern
+        this.noteInKeyGenerator.selectedFretboardPattern = null;
+
         // Get new string and key
         const {keyString, keyNote} = this.noteInKeyGenerator.getNewStringAndKey();
         this.keyString = keyString;

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

@@ -1,14 +1,14 @@
-import {NoteInKeyGameCoordinator} from "./note-in-key-game-coordinator.js?v=2.1.6";
-import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=2.1.6";
-import {GameConfigurationManager} from "../../game-core/game-initialization/game-configuration-manager.js?v=2.1.6";
-import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=2.1.6";
-import {NoteInKeyGenerator} from "./note-in-key-generator.js?v=2.1.6";
-import {NoteInKeyNoteHandler} from "../../practice-note-combination/note-in-key-note-handler.js?v=2.1.6";
-import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=2.1.6";
-import {GameElementsVisualizer} from "../../game-core/game-ui/game-elements-visualizer.js?v=2.1.6";
+import {NoteInKeyGameCoordinator} from "./note-in-key-game-coordinator.js?v=2.2.0";
+import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=2.2.0";
+import {GameConfigurationManager} from "../../game-core/game-initialization/game-configuration-manager.js?v=2.2.0";
+import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=2.2.0";
+import {NoteInKeyGenerator} from "./note-in-key-generator.js?v=2.2.0";
+import {NoteInKeyNoteHandler} from "../../practice-note-combination/note-in-key-note-handler.js?v=2.2.0";
+import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=2.2.0";
+import {GameElementsVisualizer} from "../../game-core/game-ui/game-elements-visualizer.js?v=2.2.0";
 import {
     FretPatternSelector
-} from "../../../components/game-modes/note-in-key/roadmap-selector/fret-pattern-selector.js?v=2.1.6";
+} from "../../../components/game-modes/note-in-key/roadmap-selector/fret-pattern-selector.js?v=2.2.0";
 
 
 export class NoteInKeyGameInitializer {
@@ -333,16 +333,17 @@ export class NoteInKeyGameInitializer {
                 // If the checkbox was not checked before
                 if (input.checked) {
                     // When one game mode is selected, uncheck all game modes
-                    for (const disabledOption of customPatternOption) {
-                        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
-                    input.checked = true;
-                    input.dispatchEvent(new Event('change'));
-
-                    // If the fretrange has not been defined yet and the user selects a pattern, define open popup to define
+                    // for (const disabledOption of customPatternOption) {
+                    //     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
+                    // input.checked = true;
+                    // input.dispatchEvent(new Event('change'));
+
+                    // If the fret range has not been defined yet, and the user selects a pattern,
+                    // automatically open popup on the selected pattern
                     if (!localStorage.getItem(`note-in-key-fret-range-${input.dataset.fretboardNr}`)) {
                         FretPatternSelector.openFretPatternSelectorModal(parseInt(input.dataset.fretboardNr));
                     }
@@ -351,6 +352,7 @@ export class NoteInKeyGameInitializer {
             });
         }
         document.querySelector('#select-custom-pattern-option').addEventListener('click', () => {
+            // If both are checked, it defaults to the first one
             const checkedPatternInput = document.querySelector('.custom-pattern-option input[type="checkbox"]:checked');
             let fretboardNr = 1;
             if (checkedPatternInput) {

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=2.1.6";
+import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=2.2.0";
 
 export class NoteInKeyGameNoGuitar {
     static diatonicNotesOnStrings;