From 56fddda9a111b181763c32027c1afbd9b43b867a Mon Sep 17 00:00:00 2001 From: Dominique Loiseau <5888729+domi7777@users.noreply.github.com> Date: Thu, 7 Nov 2024 12:31:18 +0100 Subject: [PATCH] refactor(format): format ./src --- src/Loop.ts | 12 +++--- src/main.tsx | 2 +- src/samples/drums/hihat.ts | 1 - src/samples/play-sample.ts | 4 +- src/samples/synth-frequencies.ts | 2 +- src/scenes/DrumsScene.ts | 12 +++--- src/scenes/GiberishScene.ts | 46 +++++++++++----------- src/scenes/LoopTracksScene.ts | 67 ++++++++++++++++---------------- src/utils/colors.ts | 2 +- src/utils/fonts.ts | 2 +- 10 files changed, 74 insertions(+), 76 deletions(-) diff --git a/src/Loop.ts b/src/Loop.ts index 978e33d..50c5f8a 100644 --- a/src/Loop.ts +++ b/src/Loop.ts @@ -8,10 +8,7 @@ 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(); @@ -19,7 +16,10 @@ export class Loop { 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 diff --git a/src/main.tsx b/src/main.tsx index e63eef4..d5e2cc9 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,6 +4,6 @@ import App from './App.tsx' ReactDOM.createRoot(document.getElementById('root')!).render( - + , ) diff --git a/src/samples/drums/hihat.ts b/src/samples/drums/hihat.ts index f36db74..6d007aa 100644 --- a/src/samples/drums/hihat.ts +++ b/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. diff --git a/src/samples/play-sample.ts b/src/samples/play-sample.ts index 6afc9ea..829cfc2 100644 --- a/src/samples/play-sample.ts +++ b/src/samples/play-sample.ts @@ -22,7 +22,7 @@ const sampleToAudioFn: Record void> = { export const playSample = (sample: Sample) => { try { sampleToAudioFn[sample](); - } catch(e) { + } catch (e) { console.error(`Error playing ${sample}`, e); resetAudioContext(); sampleToAudioFn[sample](); @@ -30,4 +30,4 @@ export const playSample = (sample: Sample) => { } export type Sample = 'hihat' | 'hihat-open' | 'ride' | 'crash' - | 'snare' | 'kick' | 'tom-low' | 'tom-high'; + | 'snare' | 'kick' | 'tom-low' | 'tom-high'; diff --git a/src/samples/synth-frequencies.ts b/src/samples/synth-frequencies.ts index 3d8c7a2..e5b2cf9 100644 --- a/src/samples/synth-frequencies.ts +++ b/src/samples/synth-frequencies.ts @@ -10,7 +10,7 @@ export type NoteFreq = { function createNoteTable() { const noteFreq: Partial[] = []; - for (let i=0; i< 9; i++) { + for (let i = 0; i < 9; i++) { noteFreq[i] = {}; } diff --git a/src/scenes/DrumsScene.ts b/src/scenes/DrumsScene.ts index 0c52db0..95419a8 100644 --- a/src/scenes/DrumsScene.ts +++ b/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 = { @@ -20,7 +20,7 @@ const padColors: Record = { 'tom-high': '#9B59B6', }; -type DrumsType= 'drums' | 'other'; +type DrumsType = 'drums' | 'other'; export class DrumsScene extends Phaser.Scene { @@ -28,7 +28,7 @@ export class DrumsScene extends Phaser.Scene { 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; diff --git a/src/scenes/GiberishScene.ts b/src/scenes/GiberishScene.ts index 8855964..cc7336a 100644 --- a/src/scenes/GiberishScene.ts +++ b/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; diff --git a/src/scenes/LoopTracksScene.ts b/src/scenes/LoopTracksScene.ts index 806d0d5..188451e 100644 --- a/src/scenes/LoopTracksScene.ts +++ b/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(); - } } diff --git a/src/utils/colors.ts b/src/utils/colors.ts index 6a095af..a4e8be2 100644 --- a/src/utils/colors.ts +++ b/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; diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts index 48068fe..aff549d 100644 --- a/src/utils/fonts.ts +++ b/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));