Fixed frequency bars jitter [SG-122]

index.php

@@ -1,12 +1,12 @@
 <?php
 
-$version = '2.1.0';
+$version = '2.1.1';
 
 // 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')) {
     $config = require __DIR__ . '/config/env.php';
     if (array_key_exists('env', $config) && $config['env'] === 'dev') {
-        $version = time();
+        // $version = time();
         require __DIR__ . '/JsImportVersionAdder.php';
         (new JsImportVersionAdder())->addVersionToJsImports($version);
     }

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

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

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=1708879136";
-import {NoteInKeyGenerator} from "../../../../features/game-modes/note-in-key/note-in-key-generator.js?v=1708879136";
-import {availableNotesOnStrings} from "../../../configuration/config-data.js?v=1708879136";
-import {ModalHandler} from "../../../game-core/ui/modal-handler.js?v=1708879136";
+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";
 
 export class FretShapeSelector {
 

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=1708879136";
-import {NoteOnFretboardShuffler} from "./note-on-fretboard-shuffler.js?v=1708879136";
+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";
 
 export class NoteOnFretboardGenerator {
     constructor() {

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

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

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

@@ -1,6 +1,4 @@
-import {
-    GameProgressVisualizer
-} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=1708879136";
+import {GameProgressVisualizer} from "../../../features/game-core/game-progress/game-progress-visualizer.js?v=2.1.1";
 
 /**
  * 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=1708879136";
-import {ModalHandler} from "../../game-core/ui/modal-handler.js?v=1708879136";
-import {availableNotesOnStrings} from "../../configuration/config-data.js?v=1708879136";
+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";
 
 export class RangeSelector {
 

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

@@ -1,5 +1,5 @@
-import {DetectedNoteVisualizer} from "./detected-note-visualizer.js?v=1708879136";
-import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=1708879136";
+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";
 
 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,35 +1,43 @@
-import {FrequencyBarsVisualizer} from "./frequency-bars-visualizer.js?v=1708879136";
+import {FrequencyBarsVisualizer} from "./frequency-bars-visualizer.js?v=2.1.1";
 
 export class FrequencyBarsController {
+    frequencyData = null;
 
-    constructor(frequencyData) {
-        this.frequencyBarsVisualizer = new FrequencyBarsVisualizer();
-        this.frequencyData = frequencyData;
+    frequencyBarsVisualizer = null;
 
+    constructor() {
         // Listen for the updateFrequencyBarsFillStyle event
         document.addEventListener('updateFrequencyBarsFillStyle', (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) {
+            return;
+        }
         if (tuneOperator.analyser) {
             tuneOperator.analyser.getByteFrequencyData(this.frequencyData);
             this.frequencyBarsVisualizer.update(this.frequencyData);
         }
+        // console.log('updateFrequencyBars');
         // requestAnimationFrame(this.updateFrequencyBars.bind(this));
         requestAnimationFrame(() => this.updateFrequencyBars(tuneOperator));
     };
 
-    static addFrequencyBarsAndDetectedNoteToDom() {
+    addFrequencyBarsAndDetectedNoteToDom() {
         document.querySelector('#game-container').insertAdjacentHTML('beforeend',
             `<div id="detected-note-div">
                     <p id="detected-note"></p>
                 </div>
                 <canvas id="frequency-bars"></canvas>`);
+        this.frequencyBarsVisualizer = new FrequencyBarsVisualizer();
     }
-    static removeFrequencyBarsAndDetectedNoteFromDom() {
+
+    removeFrequencyBarsAndDetectedNoteFromDom() {
         document.querySelector('#frequency-bars')?.remove();
         document.querySelector('#detected-note-div')?.remove();
+        this.frequencyBarsVisualizer = null;
     }
 }

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=1708879136";
+import {CoreGameCoordinator} from "../game-start/core-game-coordinator.js?v=2.1.1";
 import {
     FretboardNoteGameCoordinator
-} from "../../game-modes/note-on-fretboard/fretboard-note-game-coordinator.js?v=1708879136";
-import {NoteInKeyGameCoordinator} from "../../game-modes/note-in-key/note-in-key-game-coordinator.js?v=1708879136";
-import {GameConfigurationManager} from "./game-configuration-manager.js?v=1708879136";
-import {MetronomePracticeCoordinator} from "../../game-modes/metronome/metronome-practice-coordinator.js?v=1708879136";
+} from "../../game-modes/note-on-fretboard/fretboard-note-game-coordinator.js?v=2.1.1";
+import {NoteInKeyGameCoordinator} from "../../game-modes/note-in-key/note-in-key-game-coordinator.js?v=2.1.1";
+import {GameConfigurationManager} from "./game-configuration-manager.js?v=2.1.1";
+import {MetronomePracticeCoordinator} from "../../game-modes/metronome/metronome-practice-coordinator.js?v=2.1.1";
 
 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=1708879136";
+import {GameProgressVisualizer} from "../game-progress/game-progress-visualizer.js?v=2.1.1";
 
 export class GameConfigurationManager {
 

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

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

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

@@ -1,4 +1,4 @@
-import {GameInitializer} from "./game-initialization/game-initializer.js?v=1708879136";
+import {GameInitializer} from "./game-initialization/game-initializer.js?v=2.1.1";
 
 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=1708879136";
+import {GameProgressVisualizer} from "./game-progress-visualizer.js?v=2.1.1";
 
 /**
  * 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=1708879136";
-import {TuneOperator} from "../tuner/tune-operator.js?v=1708879136";
-import {FrequencyBarsController} from "../frequency-bars/frequency-bars-controller.js?v=1708879136";
-import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=1708879136";
-import {ScreenWakeLocker} from "../wake-lock/screen-wake-locker.js?v=1708879136";
+import {MetronomeOperator} from "../metronome/metronome-operator.js?v=2.1.1";
+import {TuneOperator} from "../tuner/tune-operator.js?v=2.1.1";
+import {FrequencyBarsController} from "../frequency-bars/frequency-bars-controller.js?v=2.1.1";
+import {GameElementsVisualizer} from "../game-ui/game-elements-visualizer.js?v=2.1.1";
+import {ScreenWakeLocker} from "../wake-lock/screen-wake-locker.js?v=2.1.1";
 
 export class CoreGameCoordinator {
     metronomeOperator = new MetronomeOperator();
@@ -32,6 +32,7 @@ export class CoreGameCoordinator {
         this.boundCorrectNoteButtonEventHandler = this.correctNoteButtonEventHandler.bind(this);
 
         this.screenWakeLocker = new ScreenWakeLocker();
+        this.frequencyBarsController = new FrequencyBarsController();
     }
 
     startGame() {
@@ -77,7 +78,7 @@ export class CoreGameCoordinator {
         }
         if (this.noteDetectorEnabled) {
             this.tuneOperator.stop();
-            FrequencyBarsController.removeFrequencyBarsAndDetectedNoteFromDom();
+            this.frequencyBarsController.removeFrequencyBarsAndDetectedNoteFromDom();
         }
         // Stop game if there is a game coordinator (not the case when changing level before game start)
         if (this.gameCoordinator !== null) {
@@ -108,11 +109,11 @@ export class CoreGameCoordinator {
             this.tuneOperator.initGetUserMedia();
             return this.tuneOperator.start().then(() => {
                 // Show frequency bars
-                FrequencyBarsController.addFrequencyBarsAndDetectedNoteToDom();
+                this.frequencyBarsController.addFrequencyBarsAndDetectedNoteToDom();
                 console.log('frequency bars added')
-                // Set frequencyData instance variable
-                let frequencyData = new Uint8Array(this.tuneOperator.analyser.frequencyBinCount);
-                new FrequencyBarsController(frequencyData).updateFrequencyBars(this.tuneOperator);
+                // Set frequencyData variable
+                this.frequencyBarsController.frequencyData = new Uint8Array(this.tuneOperator.analyser.frequencyBinCount);
+                this.frequencyBarsController.updateFrequencyBars(this.tuneOperator);
             });
         }
         // If noteDetectorEnabled is false, return a resolved promise

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

@@ -1,4 +1,4 @@
-import {GameLevelTracker} from "../game-progress/game-level-tracker.js?v=1708879136";
+import {GameLevelTracker} from "../game-progress/game-level-tracker.js?v=2.1.1";
 
 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=1708879136";
+import {ModalHandler} from "../../../components/game-core/ui/modal-handler.js?v=2.1.1";
 
 export class LevelUpVisualizer {
     /**

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

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

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

@@ -1,6 +1,6 @@
-import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=1708879136";
-import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=1708879136";
-import {BpmInput} from "../../../components/configuration/bpm-input.js?v=1708879136";
+import {MetronomePracticeTimer} from "./metronome-practice-timer.js?v=2.1.1";
+import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=2.1.1";
+import {BpmInput} from "../../../components/configuration/bpm-input.js?v=2.1.1";
 
 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=1708879136";
-import {NoteInKeyGameInitializer} from "./note-in-key-game-initializer.js?v=1708879136";
+import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=2.1.1";
+import {NoteInKeyGameInitializer} from "./note-in-key-game-initializer.js?v=2.1.1";
 
 export class NoteInKeyGameCoordinator {
     string;

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=1708879136";
-import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=1708879136";
-import {GameConfigurationManager} from "../../game-core/game-initialization/game-configuration-manager.js?v=1708879136";
-import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=1708879136";
-import {NoteInKeyGenerator} from "./note-in-key-generator.js?v=1708879136";
-import {NoteInKeyNoteHandler} from "../../practice-note-combination/note-in-key-note-handler.js?v=1708879136";
-import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=1708879136";
-import {GameElementsVisualizer} from "../../game-core/game-ui/game-elements-visualizer.js?v=1708879136";
+import {NoteInKeyGameCoordinator} from "./note-in-key-game-coordinator.js?v=2.1.1";
+import {LevelUpVisualizer} from "../../game-core/game-ui/level-up-visualizer.js?v=2.1.1";
+import {GameConfigurationManager} from "../../game-core/game-initialization/game-configuration-manager.js?v=2.1.1";
+import {GameProgressVisualizer} from "../../game-core/game-progress/game-progress-visualizer.js?v=2.1.1";
+import {NoteInKeyGenerator} from "./note-in-key-generator.js?v=2.1.1";
+import {NoteInKeyNoteHandler} from "../../practice-note-combination/note-in-key-note-handler.js?v=2.1.1";
+import {NoteInKeyGameNoGuitar} from "./note-in-key-game-no-guitar.js?v=2.1.1";
+import {GameElementsVisualizer} from "../../game-core/game-ui/game-elements-visualizer.js?v=2.1.1";
 import {
     FretShapeSelector
-} from "../../../components/game-modes/note-in-key/roadmap-selector/fret-shape-selector.js?v=1708879136";
+} from "../../../components/game-modes/note-in-key/roadmap-selector/fret-shape-selector.js?v=2.1.1";
 
 
 export class NoteInKeyGameInitializer {

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

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

@@ -1,9 +1,9 @@
-import {ArrayShuffler} from "../../../components/shuffler/array-shuffler.js?v=1708879136";
+import {ArrayShuffler} from "../../../components/shuffler/array-shuffler.js?v=2.1.1";
 import {
     availableNotesOnStrings,
     shape1keyNote,
     shape2keyNote
-} from "../../../components/configuration/config-data.js?v=1708879136";
+} from "../../../components/configuration/config-data.js?v=2.1.1";
 
 export class NoteInKeyGenerator {
     diatonicNotesOnStrings;

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

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

src/features/game-modes/note-on-fretboard/initialization/note-on-fretboard-event-handler.js

@@ -1,6 +1,6 @@
-import {GameLevelTracker} from "../../../game-core/game-progress/game-level-tracker.js?v=1708879136";
-import {GameElementsVisualizer} from "../../../game-core/game-ui/game-elements-visualizer.js?v=1708879136";
-import {LevelUpVisualizer} from "../../../game-core/game-ui/level-up-visualizer.js?v=1708879136";
+import {GameLevelTracker} from "../../../game-core/game-progress/game-level-tracker.js?v=2.1.1";
+import {GameElementsVisualizer} from "../../../game-core/game-ui/game-elements-visualizer.js?v=2.1.1";
+import {LevelUpVisualizer} from "../../../game-core/game-ui/level-up-visualizer.js?v=2.1.1";
 
 export class NoteOnFretboardEventHandler{
 

src/features/game-modes/note-on-fretboard/initialization/note-on-fretboard-event-listener-adder.js

@@ -1,6 +1,6 @@
-import {GameProgressVisualizer} from "../../../game-core/game-progress/game-progress-visualizer.js?v=1708879136";
-import {NoteOnFretboardEventHandler} from "./note-on-fretboard-event-handler.js?v=1708879136";
-import {RangeSelector} from "../../../../components/game-modes/note-on-fretboard/range-selector.js?v=1708879136";
+import {GameProgressVisualizer} from "../../../game-core/game-progress/game-progress-visualizer.js?v=2.1.1";
+import {NoteOnFretboardEventHandler} from "./note-on-fretboard-event-handler.js?v=2.1.1";
+import {RangeSelector} from "../../../../components/game-modes/note-on-fretboard/range-selector.js?v=2.1.1";
 
 export class NoteOnFretboardEventListenerAdder {
 

src/features/game-modes/note-on-fretboard/initialization/note-on-fretboard-game-initializer.js

@@ -1,10 +1,8 @@
-import {BpmInput} from "../../../../components/configuration/bpm-input.js?v=1708879136";
-import {
-    GameConfigurationManager
-} from "../../../game-core/game-initialization/game-configuration-manager.js?v=1708879136";
-import {availableNotesOnStrings} from "../../../../components/configuration/config-data.js?v=1708879136";
-import {GameLevelTracker} from "../../../game-core/game-progress/game-level-tracker.js?v=1708879136";
-import {NoteOnFretboardEventListenerAdder} from "./note-on-fretboard-event-listener-adder.js?v=1708879136";
+import {BpmInput} from "../../../../components/configuration/bpm-input.js?v=2.1.1";
+import {GameConfigurationManager} from "../../../game-core/game-initialization/game-configuration-manager.js?v=2.1.1";
+import {availableNotesOnStrings} from "../../../../components/configuration/config-data.js?v=2.1.1";
+import {GameLevelTracker} from "../../../game-core/game-progress/game-level-tracker.js?v=2.1.1";
+import {NoteOnFretboardEventListenerAdder} from "./note-on-fretboard-event-listener-adder.js?v=2.1.1";
 
 export class NoteOnFretboardGameInitializer {
 

src/features/practice-note-combination/note-in-key-note-handler.js

@@ -1,6 +1,6 @@
-import {DetectedNoteVerifier} from "../detected-note/detected-note-verifier.js?v=1708879136";
-import {GameProgressVisualizer} from "../game-core/game-progress/game-progress-visualizer.js?v=1708879136";
-import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=1708879136";
+import {DetectedNoteVerifier} from "../detected-note/detected-note-verifier.js?v=2.1.1";
+import {GameProgressVisualizer} from "../game-core/game-progress/game-progress-visualizer.js?v=2.1.1";
+import {NoteDisplayer} from "../../components/game-core/ui/note-displayer.js?v=2.1.1";
 
 /**
  * Note displayer for "practice" mode, which means