Added mic sensitivity slider [SG-122]

samuelgfeller · Feb 29, 2024 · e45b9ce · e45b9ce
1 parent dff51a3
commit e45b9ce
Show file tree

Hide file tree

Showing 32 changed files with 188 additions and 128 deletions.
diff --git a/index.php b/index.php
@@ -1,6 +1,6 @@
 <?php
 
-$version = '2.1.1';
+$version = '2.1.3';
 
 // 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')) {

diff --git a/src/assets/styles/style.css b/src/assets/styles/style.css
@@ -31,10 +31,12 @@
         /*background: white;*/
         color: #919191;
     }
-    h2,h3, h4{
+
+    h2, h3, h4 {
         color: #c0c0c0;
     }
-    a{
+
+    a {
         color: saddlebrown;
     }
 
@@ -88,7 +90,7 @@
         animation: enableScroll 0.5s ease 0.5s forwards;
     }
 
-    #config-inner-div{
+    #config-inner-div {
         overflow: hidden;
         height: 100%;
     }
@@ -115,7 +117,7 @@
         cursor: pointer;
     }
 
-    input{
+    input {
         accent-color: saddlebrown;
     }
 
@@ -130,11 +132,13 @@
         padding: 5px 10px;
         width: 90px;
     }
+
     .icon {
         width: 30px;
         /*height: 30px;*/
         filter: invert(70%);
     }
+
     #game-start-instruction .icon {
         width: 20px;
         margin: 0 5px;
@@ -172,7 +176,8 @@
         height: 100%;
         width: 45%;
     }
-    .note-value-span{
+
+    .note-value-span {
         height: 100%;
         /*Set line height to more than 100% to compensate ♭ char that takes up more space than regular letters*/
         line-height: 130%;
@@ -184,7 +189,8 @@
         font-weight: bold;
         color: #bcbcbc;
     }
-    #string-span.treble-clef-enabled{
+
+    #string-span.treble-clef-enabled {
         height: 200px;
         line-height: 200px;
     }
@@ -202,7 +208,7 @@
         height: 100%;
     }
 
-    .text{
+    .text {
         color: #c0c0c0;
     }
 
@@ -225,7 +231,7 @@
         margin-top: 20px;
     }
 
-    .roadmap-image{
+    .roadmap-image {
         width: 100%;
         margin: 10px auto;
         /*filter: invert(90%);*/
@@ -376,7 +382,7 @@
         z-index: -1;
     }
 
-    #game-progress-div{
+    #game-progress-div {
         width: 90%;
     }
 
@@ -417,18 +423,16 @@
     }
 
 
-
     /*#current-key-and-string .icon {*/
     /*    width: 20px;*/
     /*    margin-right: 20px§;*/
     /*    cursor: pointer;*/
     /*    filter: invert(60%);*/
     /*}*/
-
     /*.option-for-game-mode {*/
     /*    display: none;*/
     /*}*/
-    .options-title-span{
+    .options-title-span {
         width: 100%;
     }
 
@@ -441,7 +445,8 @@
         text-align: center;
         color: #c0c0c0;
     }
-    .label-text{
+
+    .label-text {
         /*font-family: SF-Pro-Text, CenturyGothic, Geneva, AppleGothic, sans-serif;*/
         font-size: 13px;
         text-align: center;
@@ -466,11 +471,25 @@
         padding: 10px 20px;
         border-radius: 10px;
     }
-    .btn-container button:hover, .btn:hover{
+
+    .btn-container button:hover, .btn:hover {
         background-color: #181818;
         cursor: pointer;
     }
 
+    #sensitivity-range-slider {
+        width: 200px;
+        max-width: 100%;
+    }
+
+    #mic-sensitivity-option#mic-sensitivity-option {
+        flex-wrap: nowrap;
+    }
+
+    #mic-sensitivity-option span {
+        font-size: 15px;
+    }
+
     /*summary::marker{*/
     /*    content: none;*/
     /*}*/
@@ -501,6 +520,7 @@
         /*justify-content: center;*/
         /*column-gap: 60px;*/
     }
+
     #start-stop-btn {
         margin-right: 0;
     }
@@ -517,24 +537,29 @@
         width: 200px;
         height: auto;
     }
+
     #string-span.treble-clef-enabled {
         height: 260px;
         line-height: 260px;
     }
+
     #note-and-string-container > div {
         /* Treble clef staff is 200px wide */
         width: 200px;
     }
 }
+
 @media (max-height: 500px) {
     #detected-note {
         margin-top: 0;
     }
 }
+
 @media (min-width: 641px) and (min-height: 600px) {
     .note-value-span.note-value-span {
         font-size: 130px;
     }
+
     #game-container.no-guitar .note-value-span.note-value-span {
         font-size: 100px;
     }
@@ -548,7 +573,8 @@
     #game-container {
         gap: 40px;
     }
-    .roadmap-image{
+
+    .roadmap-image {
         width: 70%;
     }
 
@@ -563,6 +589,7 @@
     /*    gap: 0;*/
     /*}*/
 }
+
 @media (max-height: 660px) {
     #game-container {
         gap: 20px;
@@ -573,6 +600,7 @@
     #game-container {
         gap: 50px;
     }
+
     #game-container.no-guitar {
         gap: 20px;
     }

diff --git a/src/components/configuration/mic-sensitivity-option.js b/src/components/configuration/mic-sensitivity-option.js
@@ -0,0 +1,25 @@
+import {
+    GameConfigurationManager
+} from "../../features/game-core/game-initialization/game-configuration-manager.js?v=2.1.3";
+
+export class MicSensitivityOption {
+    static addMicSensitivityOption() {
+        if (!document.getElementById('mic-sensitivity-option-title')
+            && !document.getElementById('mic-sensitivity-option')) {
+            document.querySelector('#config-inner-div').insertAdjacentHTML('beforeend', `
+            <span class="normal-font-size label-text options-title-span" id="mic-sensitivity-option-title">Mic sensitivity</span>
+            <div id="mic-sensitivity-option">
+                <span>High</span>
+                <input type="range" min="1" max="70" step="1" value="15" id="sensitivity-range-slider"/>
+                <span>Low</span>
+            </div>
+            `);
+            GameConfigurationManager.setupGameModeOptionsStateAndValue([document.querySelector('#mic-sensitivity-option')]);
+        }
+    }
+
+    static removeMicSensitivityOption() {
+        document.getElementById('mic-sensitivity-option-title')?.remove();
+        document.getElementById('mic-sensitivity-option')?.remove();
+    }
+}
diff --git a/src/components/game-core/ui/note-displayer.js b/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.1";
+import {TrebleClefVisualizer} from "../../../features/treble-clef/treble-clef-visualizer.js?v=2.1.3";
 
 export class NoteDisplayer {
 
@@ -95,7 +95,7 @@ export class NoteDisplayer {
      * @param color
      */
     static updateFrequencyBarsFillStyle(color) {
-        const event = new CustomEvent('updateFrequencyBarsFillStyle', {detail: color});
+        const event = new CustomEvent('update-frequency-bars-fill-style', {detail: color});
         document.dispatchEvent(event);
     }
 

diff --git a/src/components/game-modes/note-in-key/roadmap-selector/fret-shape-selector.js b/src/components/game-modes/note-in-key/roadmap-selector/fret-shape-selector.js
@@ -1,7 +1,7 @@
-import {DualRangeSlider} from "./dual-range-slider.js?v=2.1.1";
-import {NoteInKeyGenerator} from "../../../../features/game-modes/note-in-key/note-in-key-generator.js?v=2.1.1";
-import {availableNotesOnStrings} from "../../../configuration/config-data.js?v=2.1.1";
-import {ModalHandler} from "../../../game-core/ui/modal-handler.js?v=2.1.1";
+import {DualRangeSlider} from "./dual-range-slider.js?v=2.1.3";
+import {NoteInKeyGenerator} from "../../../../features/game-modes/note-in-key/note-in-key-generator.js?v=2.1.3";
+import {availableNotesOnStrings} from "../../../configuration/config-data.js?v=2.1.3";
+import {ModalHandler} from "../../../game-core/ui/modal-handler.js?v=2.1.3";
 
 export class FretShapeSelector {
 

diff --git a/src/components/game-modes/note-on-fretboard/note-on-fretboard-generator.js b/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.1";
-import {NoteOnFretboardShuffler} from "./note-on-fretboard-shuffler.js?v=2.1.1";
+import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=2.1.3";
+import {NoteOnFretboardShuffler} from "./note-on-fretboard-shuffler.js?v=2.1.3";
 
 export class NoteOnFretboardGenerator {
     constructor() {

diff --git a/src/components/game-modes/note-on-fretboard/note-on-fretboard-note-handler.js b/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.1";
-import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=2.1.1";
-import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=2.1.1";
-import {NoteOnFretboardGenerator} from "./note-on-fretboard-generator.js?v=2.1.1";
-import {NoteOnFretboardProgressUpdater} from "./note-on-fretboard-progress-updater.js?v=2.1.1";
+import {DetectedNoteVerifier} from "../../../features/detected-note/detected-note-verifier.js?v=2.1.3";
+import {NoteDisplayer} from "../../game-core/ui/note-displayer.js?v=2.1.3";
+import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=2.1.3";
+import {NoteOnFretboardGenerator} from "./note-on-fretboard-generator.js?v=2.1.3";
+import {NoteOnFretboardProgressUpdater} from "./note-on-fretboard-progress-updater.js?v=2.1.3";
 
 /**
  * Note display coordinator when playing the "game" which

diff --git a/src/components/game-modes/note-on-fretboard/note-on-fretboard-progress-updater.js b/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.1";
+import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=2.1.3";
 
 /**
  * Progress update for games that use the metronome and have challenging

diff --git a/src/components/game-modes/note-on-fretboard/note-on-fretboard-shuffler.js b/src/components/game-modes/note-on-fretboard/note-on-fretboard-shuffler.js
@@ -18,7 +18,6 @@ export class NoteOnFretboardShuffler {
     shuffleNotesList(notesOnStrings) {
         // Generate all possible note combinations for each string
         this.noteCombinationsToBeShuffled = this.getNoteCombinationsFromSelectedRange(notesOnStrings);
-
         return this.shuffleNotes();
     }
 
@@ -33,16 +32,13 @@ export class NoteOnFretboardShuffler {
         // If a fretboard range is set, only add the notes within the range
         const selectedRange = JSON.parse(localStorage.getItem(`note-on-fretboard-range`));
 
-        if (!selectedRange) {
-            return notesOnStrings;
-        }
         let notesInsideSelectedRange = [];
 
         for (let string in notesOnStrings) {
             for (const noteIndex in notesOnStrings[string]) {
                 // Note index is the fret position
-                if (parseInt(noteIndex) >= parseInt(selectedRange.lowerLimit)
-                    && parseInt(noteIndex) <= parseInt(selectedRange.upperLimit)) {
+                if (!selectedRange || (parseInt(noteIndex) >= parseInt(selectedRange.lowerLimit)
+                    && parseInt(noteIndex) <= parseInt(selectedRange.upperLimit))) {
                     // Create a note combination by concatenating the string and note
                     const noteCombination = `${string}|${notesOnStrings[string][noteIndex]}`;
                     notesInsideSelectedRange.push(noteCombination); // Add the note combination to the notesList

diff --git a/src/components/game-modes/note-on-fretboard/range-selector.js b/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.1";
-import {ModalHandler} from "../../game-core/ui/modal-handler.js?v=2.1.1";
-import {availableNotesOnStrings} from "../../configuration/config-data.js?v=2.1.1";
+import {DualRangeSlider} from "../note-in-key/roadmap-selector/dual-range-slider.js?v=2.1.3";
+import {ModalHandler} from "../../game-core/ui/modal-handler.js?v=2.1.3";
+import {availableNotesOnStrings} from "../../configuration/config-data.js?v=2.1.3";
 
 export class RangeSelector {
 

diff --git a/src/features/detected-note/detected-note-verifier.js b/src/features/detected-note/detected-note-verifier.js
@@ -1,5 +1,5 @@
-import {DetectedNoteVisualizer} from "./detected-note-visualizer.js?v=2.1.1";
-import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=2.1.1";
+import {DetectedNoteVisualizer} from "./detected-note-visualizer.js?v=2.1.3";
+import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=2.1.3";
 
 export class DetectedNoteVerifier {
     // Variable is set in note-combination-coordinator each time new note is displayed

diff --git a/src/features/game-core/frequency-bars/frequency-bars-controller.js b/src/features/game-core/frequency-bars/frequency-bars-controller.js
@@ -1,17 +1,19 @@
-import {FrequencyBarsVisualizer} from "./frequency-bars-visualizer.js?v=2.1.1";
+import {FrequencyBarsVisualizer} from "./frequency-bars-visualizer.js?v=2.1.3";
 
 export class FrequencyBarsController {
     frequencyData = null;
 
     frequencyBarsVisualizer = null;
 
     constructor() {
-        // Listen for the updateFrequencyBarsFillStyle event
-        document.addEventListener('updateFrequencyBarsFillStyle', (event) => {
-            this.frequencyBarsVisualizer.canvasContext.fillStyle = event.detail;
-        });
+        this.frequencyBarsFillStyleEventHandlerVar = this.frequencyBarsFillStyleEventHandler.bind(this);
     }
 
+    frequencyBarsFillStyleEventHandler(event) {
+        this.frequencyBarsVisualizer.canvasContext.fillStyle = event.detail;
+    }
+
+
     updateFrequencyBars(tuneOperator) {
         // requestAnimationFrame calls the function on the next frame but shouldn't if the game is paused
         if (!this.frequencyBarsVisualizer) {
@@ -33,11 +35,13 @@ export class FrequencyBarsController {
                 </div>
                 <canvas id="frequency-bars"></canvas>`);
         this.frequencyBarsVisualizer = new FrequencyBarsVisualizer();
+        document.addEventListener('update-frequency-bars-fill-style', this.frequencyBarsFillStyleEventHandlerVar);
     }
 
     removeFrequencyBarsAndDetectedNoteFromDom() {
         document.querySelector('#frequency-bars')?.remove();
         document.querySelector('#detected-note-div')?.remove();
         this.frequencyBarsVisualizer = null;
+        document.removeEventListener('update-frequency-bars-fill-style', this.frequencyBarsFillStyleEventHandlerVar);
     }
 }