refactor(format): format ./src

src/Loop.ts

@@ -8,18 +8,18 @@ type LoopEvent = {
 type LoopState = 'readyToRecord' | 'recording' | 'readyToPlay' | 'playing';
 
 export class Loop {
-  constructor(private trackIndex: number) {
-    this.log('Loop created');
-  }
-
+  private static masterLoop: Loop | null = null;
   private state: LoopState = 'readyToRecord';
   private events: LoopEvent[] = [];
   private eventEmitter = new Phaser.Events.EventEmitter();
   private startRecordingTime?: number;
   private startPlayingTime = 0;
   private currentLoopIndex = 0;
   private loopTimeout: number | null = null;
-  private static masterLoop: Loop | null = null;
+
+  constructor(private trackIndex: number) {
+    this.log('Loop created');
+  }
 
   getStartPlayingTime() {
     return this.startPlayingTime;
@@ -141,7 +141,7 @@ export class Loop {
     } else {
       console.log(this.events);
       const masterLoopLength = Loop.masterLoop?.getLoopLength();
-      if (!masterLoopLength){
+      if (!masterLoopLength) {
         throw new Error('masterLoopLength is not set');
       }
       // check how many times the master loop fits in this loop so that it is always in sync

src/main.tsx

@@ -4,6 +4,6 @@ import App from './App.tsx'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <App/>
   </React.StrictMode>,
 )

src/samples/drums/hihat.ts

@@ -1,4 +1,3 @@
-
 // Improvements:
 //     Shorter Noise Burst: The noise buffer duration is now much shorter (0.05 seconds), which results in a sharper, crisper hi-hat sound.
 //     High-Pass Filter Tweaks: The cutoff frequency is set to 8000 Hz to eliminate more of the low-end and leave the high frequencies that give the hi-hat its metallic sound.

src/samples/play-sample.ts

@@ -22,12 +22,12 @@ const sampleToAudioFn: Record<Sample, () => void> = {
 export const playSample = (sample: Sample) => {
   try {
     sampleToAudioFn[sample]();
-  } catch(e) {
+  } catch (e) {
     console.error(`Error playing ${sample}`, e);
     resetAudioContext();
     sampleToAudioFn[sample]();
   }
 }
 
 export type Sample = 'hihat' | 'hihat-open' | 'ride' | 'crash'
-    | 'snare' | 'kick' | 'tom-low' | 'tom-high';
+  | 'snare' | 'kick' | 'tom-low' | 'tom-high';

src/samples/synth-frequencies.ts

@@ -10,7 +10,7 @@ export type NoteFreq = {
 
 function createNoteTable() {
   const noteFreq: Partial<NoteFreq>[] = [];
-  for (let i=0; i< 9; i++) {
+  for (let i = 0; i < 9; i++) {
     noteFreq[i] = {};
   }
 

src/scenes/DrumsScene.ts

@@ -5,8 +5,8 @@ import {LoopTracksScene} from './LoopTracksScene.ts';
 import {rotateArray} from '../utils/math.ts';
 
 type Pad = {
-    instrument: Sample,
-    button: Phaser.GameObjects.Rectangle,
+  instrument: Sample,
+  button: Phaser.GameObjects.Rectangle,
 }
 
 const padColors: Record<Sample, HexaColor> = {
@@ -20,15 +20,15 @@ const padColors: Record<Sample, HexaColor> = {
   'tom-high': '#9B59B6',
 };
 
-type DrumsType= 'drums' | 'other';
+type DrumsType = 'drums' | 'other';
 
 export class DrumsScene extends Phaser.Scene {
 
   constructor(private type: DrumsType = 'drums') {
     super();
   }
 
-  create({ type}: { type: DrumsType }) {
+  create({type}: { type: DrumsType }) {
     if (type) {
       this.type = type;
     }
@@ -58,9 +58,9 @@ export class DrumsScene extends Phaser.Scene {
       const width = isPortrait ? window.innerWidth / colNumber : (window.innerWidth - LoopTracksScene.sceneWidthHeight) / colNumber;
       const height = isPortrait ? (window.innerHeight - LoopTracksScene.sceneWidthHeight) / rowNumber : window.innerHeight / rowNumber;
 
-      const currentPads = isPortrait ?  rotateArray(pads, rowNumber, colNumber): pads;
+      const currentPads = isPortrait ? rotateArray(pads, rowNumber, colNumber) : pads;
 
-      currentPads.forEach(({ button }, index) => {
+      currentPads.forEach(({button}, index) => {
         const x = (index % colNumber) * width;
         const y = Math.floor(index / colNumber) * height;
         const offsetX = isPortrait ? 0 : LoopTracksScene.sceneWidthHeight;

src/scenes/GiberishScene.ts

@@ -4,8 +4,8 @@ import {LoopTracksScene} from './LoopTracksScene.ts';
 import {rotateArray} from '../utils/math.ts';
 
 type Pad = {
-    instrument: number,
-    button: Phaser.GameObjects.Rectangle,
+  instrument: number,
+  button: Phaser.GameObjects.Rectangle,
 }
 
 declare const Freeverb: any, Bus2: any, Gibberish: any, Synth: any, Add: any, Sine: any, Sequencer: any;
@@ -24,33 +24,33 @@ const testNote = () => {
   const beat = 22050
 
   // global reverb object
-  const verb = Freeverb({ input:Bus2(), roomSize:.975, damping:.5 }).connect()
+  const verb = Freeverb({input: Bus2(), roomSize: .975, damping: .5}).connect()
 
   /*** bassline ***/
   const bass = Synth({
-    gain:.15,
-    attack:44,
+    gain: .15,
+    attack: 44,
     decay: 5512,
-    Q:.8, // CAREFUL!!!
-    filterType:2,
-    saturation:2,
-    filterMult:3.25,
-    antialias:true,
-    cutoff: Add( 1, Sine({ frequency:.1, gain:.75 }) )
+    Q: .8, // CAREFUL!!!
+    filterType: 2,
+    saturation: 2,
+    filterMult: 3.25,
+    antialias: true,
+    cutoff: Add(1, Sine({frequency: .1, gain: .75}))
   })
-    .connect( Gibberish.output )
-    .connect( verb.input, .5 )
+    .connect(Gibberish.output)
+    .connect(verb.input, .5)
 
-  const bassNotes = [55,110,165,220]
-  bassSeq = Sequencer.make( [55,110,165,220], [beat/4], bass, 'note' ).start()
+  const bassNotes = [55, 110, 165, 220]
+  bassSeq = Sequencer.make([55, 110, 165, 220], [beat / 4], bass, 'note').start()
   noteSeq = Sequencer.make(
     [
-      bassNotes.map( v=>v*1.25 ),
-      bassNotes.map( v=>v*1.25*.8 ),
-      bassNotes.map( v=>v*1.25*.8*.8 ),
-      bassNotes.map( v=>v*1.25*.8*.8*1.25 ),
+      bassNotes.map(v => v * 1.25),
+      bassNotes.map(v => v * 1.25 * .8),
+      bassNotes.map(v => v * 1.25 * .8 * .8),
+      bassNotes.map(v => v * 1.25 * .8 * .8 * 1.25),
     ],
-    [beat*16],
+    [beat * 16],
     bassSeq,
     'values'
   );
@@ -65,7 +65,7 @@ export class GibberishScene extends Phaser.Scene {
     super();
   }
 
-  create({ numberOfPads = 8 }: { numberOfPads: number}) {
+  create({numberOfPads = 8}: { numberOfPads: number }) {
     this.createPads(numberOfPads);
     this.scene.get(LoopTracksScene.key).events.emit('track-selected');
   }
@@ -83,9 +83,9 @@ export class GibberishScene extends Phaser.Scene {
       const width = isPortrait ? window.innerWidth / colNumber : (window.innerWidth - LoopTracksScene.sceneWidthHeight) / colNumber;
       const height = isPortrait ? (window.innerHeight - LoopTracksScene.sceneWidthHeight) / rowNumber : window.innerHeight / rowNumber;
 
-      const currentPads = isPortrait ?  rotateArray(pads, rowNumber, colNumber): pads;
+      const currentPads = isPortrait ? rotateArray(pads, rowNumber, colNumber) : pads;
 
-      currentPads.forEach(({ button }, index) => {
+      currentPads.forEach(({button}, index) => {
         const x = (index % colNumber) * width;
         const y = Math.floor(index / colNumber) * height;
         const offsetX = isPortrait ? 0 : LoopTracksScene.sceneWidthHeight;

src/scenes/LoopTracksScene.ts

@@ -34,6 +34,7 @@ type Track = {
 
 export class LoopTracksScene extends Phaser.Scene {
   static key = 'LoopTracksScene';
+  static numTracks = 5;
   private static tracks: Track[]
   private static instance: LoopTracksScene;
 
@@ -42,8 +43,6 @@ export class LoopTracksScene extends Phaser.Scene {
     LoopTracksScene.instance = this;
   }
 
-  static numTracks = 5;
-
   static get sceneWidthHeight() {
     const width = window.innerWidth;
     const height = window.innerHeight;
@@ -61,6 +60,10 @@ export class LoopTracksScene extends Phaser.Scene {
     }
   }
 
+  public static getTrackSceneKey(index: number) {
+    return `track_scene_${index}`;
+  }
+
   create() {
     this.cameras.main
       .setOrigin(0, 0)
@@ -84,6 +87,33 @@ export class LoopTracksScene extends Phaser.Scene {
     }
   }
 
+  public getTrackScene(index: number) {
+    return this.scene.get(LoopTracksScene.getTrackSceneKey(index));
+  }
+
+  updateProgressArc(track: Track) {
+    const loopLength = track.loop.getLoopLength();
+    if (!loopLength) {
+      throw new Error('Loop length is not defined');
+    }
+
+    const elapsed = Date.now() - track.loop.getStartPlayingTime();
+    const progress = elapsed / loopLength; // 0 to 1 based on loop progress
+
+    // Clear previous arc and redraw
+    track.loopProgressArc.clear();
+    track.loopProgressArc.lineStyle(4, 0x00FF00, 1); // green color with 4px thickness
+
+    // Calculate the angle for the arc based on progress
+    const startAngle = Phaser.Math.DegToRad(-90); // start from the top
+    const endAngle = startAngle + Phaser.Math.DegToRad(360 * progress);
+
+    // Draw the arc around the button
+    track.loopProgressArc.beginPath();
+    track.loopProgressArc.arc(track.buttonText.x, track.buttonText.y, track.buttonSelectedCircle.width / 2, startAngle, endAngle, false); // radius slightly larger than button
+    track.loopProgressArc.strokePath();
+  }
+
   private createTracks() {
     LoopTracksScene.tracks = new Array(LoopTracksScene.numTracks).fill(null).map((_, index) => {
       return {
@@ -195,14 +225,6 @@ export class LoopTracksScene extends Phaser.Scene {
     }
   }
 
-  public static getTrackSceneKey(index: number) {
-    return `track_scene_${index}`;
-  }
-
-  public getTrackScene(index: number) {
-    return this.scene.get(LoopTracksScene.getTrackSceneKey(index));
-  }
-
   private updateControlsState() {
     LoopTracksScene.tracks.forEach((track, index) => {
       track.button.setFillStyle(hexToColor(trackColorsState.unselected));
@@ -228,7 +250,7 @@ export class LoopTracksScene extends Phaser.Scene {
             .setColor(track.loop.isRecording() ? controlColors.recording : controlColors.idle)
             .setFontSize(FontSize.big)
             .setPosition(
-              isPortrait ? track.controlIcon.x: track.controlIcon.x + 5,
+              isPortrait ? track.controlIcon.x : track.controlIcon.x + 5,
               track.controlIcon.y + 10
             )
           track.buttonSelectedCircle.setVisible(false);
@@ -243,27 +265,4 @@ export class LoopTracksScene extends Phaser.Scene {
       }
     });
   }
-
-  updateProgressArc(track: Track) {
-    const loopLength = track.loop.getLoopLength();
-    if (!loopLength) {
-      throw new Error('Loop length is not defined');
-    }
-
-    const elapsed = Date.now() - track.loop.getStartPlayingTime();
-    const progress = elapsed / loopLength; // 0 to 1 based on loop progress
-
-    // Clear previous arc and redraw
-    track.loopProgressArc.clear();
-    track.loopProgressArc.lineStyle(4, 0x00FF00, 1); // green color with 4px thickness
-
-    // Calculate the angle for the arc based on progress
-    const startAngle = Phaser.Math.DegToRad(-90); // start from the top
-    const endAngle = startAngle + Phaser.Math.DegToRad(360 * progress);
-
-    // Draw the arc around the button
-    track.loopProgressArc.beginPath();
-    track.loopProgressArc.arc(track.buttonText.x, track.buttonText.y,  track.buttonSelectedCircle.width/2, startAngle, endAngle, false); // radius slightly larger than button
-    track.loopProgressArc.strokePath();
-  }
 }

src/utils/colors.ts

@@ -2,7 +2,7 @@ import Phaser from 'phaser';
 
 export type HexaColor = `#${string}`;
 
-export const hexToColor = (hex: HexaColor, isDarkMode= false) => {
+export const hexToColor = (hex: HexaColor, isDarkMode = false) => {
   return Phaser.Display.Color.HexStringToColor(hex)
     .darken(isDarkMode ? 75 : 0)
     .color;

src/utils/fonts.ts

@@ -12,7 +12,7 @@ export const FontColor = {
   white: '#FFF',
 }
 
-export const loadFonts = async() =>  {
+export const loadFonts = async () => {
   const newFontFace = new FontFace(FontFamily.Icons, 'url(./fonts/material.woff2)');
   document.fonts.add(newFontFace);
   return newFontFace.load().catch(error => console.error(error));