chore: refactor

Author: crashmax-dev

packages/fireworks-js/src/fireworks.ts

@@ -6,7 +6,7 @@ import { RequestAnimationFrame } from './raf.js'
 import { Resize } from './resize.js'
 import { Sound } from './sound.js'
 import { Trace } from './trace.js'
-import { FireworksOptions, IBoundaries, Sizes } from './types.js'
+import type { FireworksOptions, IBoundaries, Sizes } from './types.js'
 
 export class Fireworks {
   private target: Element | HTMLCanvasElement
@@ -15,16 +15,17 @@ export class Fireworks {
   private ctx: CanvasRenderingContext2D
   private width: number
   private height: number
-  private opts: Options
-  private sound: Sound
-  private resize: Resize
-  private mouse: Mouse
   private traces: Trace[] = []
   private explosions: Explosion[] = []
   private waitStopRaf: (() => void) | null
-  private raf: RequestAnimationFrame
   private running = false
 
+  private readonly opts: Options
+  private readonly sound: Sound
+  private readonly resize: Resize
+  private readonly mouse: Mouse
+  private readonly raf: RequestAnimationFrame
+
   constructor(
     container: Element | HTMLCanvasElement,
     options: FireworksOptions = {}
@@ -37,10 +38,10 @@ export class Fireworks {
     this.updateOptions(options)
     this.createCanvas(this.target)
 
-    this.sound = new Sound(this)
-    this.resize = new Resize(this)
-    this.mouse = new Mouse(this, this.canvas)
-    this.raf = new RequestAnimationFrame(this, this.render.bind(this))
+    this.sound = new Sound(this.opts)
+    this.resize = new Resize(this.opts, this.updateSize.bind(this))
+    this.mouse = new Mouse(this.opts, this.canvas)
+    this.raf = new RequestAnimationFrame(this.opts, this.render.bind(this))
   }
 
   get isRunning(): boolean {
@@ -51,7 +52,7 @@ export class Fireworks {
     return __VERSION__
   }
 
-  get options(): Options {
+  get currentOptions(): Options {
     return this.opts
   }
 

packages/fireworks-js/src/mouse.ts

@@ -1,12 +1,12 @@
-import type { Fireworks } from './fireworks.js'
+import type { Options } from './options.js'
 
 export class Mouse {
   public active = false
   public x: number
   public y: number
 
   constructor(
-    private readonly fw: Fireworks,
+    private readonly options: Options,
     private readonly canvas: HTMLCanvasElement
   ) {
     this.pointerDown = this.pointerDown.bind(this)
@@ -15,7 +15,7 @@ export class Mouse {
   }
 
   private get mouseOptions() {
-    return this.fw.options.mouse
+    return this.options.mouse
   }
 
   mount(): void {

packages/fireworks-js/src/raf.ts

@@ -1,4 +1,4 @@
-import type { Fireworks } from './fireworks.js'
+import type { Options } from './options.js'
 
 export class RequestAnimationFrame {
   public tick = 0
@@ -9,7 +9,7 @@ export class RequestAnimationFrame {
   private now: number
 
   constructor(
-    private readonly fw: Fireworks,
+    private readonly options: Options,
     private readonly render: () => void
   ) {}
 
@@ -24,7 +24,7 @@ export class RequestAnimationFrame {
       if (delta >= interval - this.tolerance) {
         this.render()
         this.now = timestamp - (delta % interval)
-        this.tick += (delta * (this.fw.options.intensity * Math.PI)) / 1000
+        this.tick += (delta * (this.options.intensity * Math.PI)) / 1000
       }
     }
 

packages/fireworks-js/src/resize.ts

@@ -1,23 +1,26 @@
-import type { Fireworks } from './fireworks.js'
+import type { Options } from './options.js'
 
 export class Resize {
-  constructor(private readonly fw: Fireworks) {
+  constructor(
+    private readonly options: Options,
+    private readonly updateSize: () => void
+  ) {
     this.handleResize = this.handleResize.bind(this)
   }
 
   mount(): void {
-    if (this.fw.options.autoresize) {
+    if (this.options.autoresize) {
       window.addEventListener('resize', this.handleResize)
     }
   }
 
   unmount(): void {
-    if (this.fw.options.autoresize) {
+    if (this.options.autoresize) {
       window.removeEventListener('resize', this.handleResize)
     }
   }
 
   private handleResize(): void {
-    this.fw.updateSize()
+    this.updateSize()
   }
 }

packages/fireworks-js/src/sound.ts

@@ -1,5 +1,5 @@
-import type { Fireworks } from './fireworks.js'
 import { randomFloat, randomInt } from './helpers.js'
+import type { Options } from './options.js'
 
 declare global {
   interface Window {
@@ -8,20 +8,20 @@ declare global {
 }
 
 export class Sound {
-  private sounds: AudioBuffer[] = []
+  private buffers: AudioBuffer[] = []
   private audioContext: AudioContext
   private onInit = false
 
-  constructor(private readonly fw: Fireworks) {
+  constructor(private readonly options: Options) {
     this.init()
   }
 
   private get isEnabled() {
-    return this.fw.options.sound.enabled
+    return this.options.sound.enabled
   }
 
   private get soundOptions() {
-    return this.fw.options.sound
+    return this.options.sound
   }
 
   private init(): void {
@@ -40,7 +40,7 @@ export class Sound {
       this.audioContext
         .decodeAudioData(response)
         .then((buffer) => {
-          this.sounds.push(buffer)
+          this.buffers.push(buffer)
         })
         .catch((err) => {
           throw err
@@ -49,19 +49,19 @@ export class Sound {
   }
 
   play(): void {
-    if (this.isEnabled && this.sounds.length) {
-      const source = this.audioContext.createBufferSource()
-      const sound = this.sounds[randomInt(0, this.sounds.length - 1)]!
-      const vol = this.audioContext.createGain()
+    if (this.isEnabled && this.buffers.length) {
+      const bufferSource = this.audioContext.createBufferSource()
+      const soundBuffer = this.buffers[randomInt(0, this.buffers.length - 1)]!
+      const volume = this.audioContext.createGain()
 
-      source.buffer = sound
-      vol.gain.value = randomFloat(
+      bufferSource.buffer = soundBuffer
+      volume.gain.value = randomFloat(
         this.soundOptions.volume.min / 100,
         this.soundOptions.volume.max / 100
       )
-      vol.connect(this.audioContext.destination)
-      source.connect(vol)
-      source.start(0)
+      volume.connect(this.audioContext.destination)
+      bufferSource.connect(volume)
+      bufferSource.start(0)
     } else {
       this.init()
     }