feat: options are no longer singleton

Author: crashmax-dev

packages/fireworks-js/src/fireworks.ts

@@ -1,7 +1,7 @@
 import { Explosion } from './explosion.js'
 import { floor, randomFloat, randomInt } from './helpers.js'
 import { Mouse } from './mouse.js'
-import { opts } from './options.js'
+import { Options } from './options.js'
 import { RequestAnimationFrame } from './raf.js'
 import { Resize } from './resize.js'
 import { Sound } from './sound.js'
@@ -15,6 +15,7 @@ export class Fireworks {
   private ctx: CanvasRenderingContext2D
   private width: number
   private height: number
+  private opts: Options
   private sound: Sound
   private resize: Resize
   private mouse: Mouse
@@ -31,13 +32,15 @@ export class Fireworks {
     this.target = container
     this.container = container
 
-    this.createCanvas(this.target)
+    this.opts = new Options()
+
     this.updateOptions(options)
+    this.createCanvas(this.target)
 
-    this.sound = new Sound()
+    this.sound = new Sound(this)
     this.resize = new Resize(this)
-    this.mouse = new Mouse(this.canvas)
-    this.raf = new RequestAnimationFrame(this.render.bind(this))
+    this.mouse = new Mouse(this, this.canvas)
+    this.raf = new RequestAnimationFrame(this, this.render.bind(this))
   }
 
   get isRunning(): boolean {
@@ -48,6 +51,10 @@ export class Fireworks {
     return __VERSION__
   }
 
+  get options(): Options {
+    return this.opts
+  }
+
   start(): void {
     if (this.running) return
 
@@ -122,7 +129,7 @@ export class Fireworks {
   }
 
   updateOptions(options: FireworksOptions): void {
-    opts.updateOptions(options)
+    this.opts.update(options)
   }
 
   updateSize({
@@ -136,7 +143,7 @@ export class Fireworks {
     this.canvas.height = height
 
     this.updateBoundaries({
-      ...opts.boundaries,
+      ...this.opts.boundaries,
       width,
       height
     })
@@ -165,7 +172,7 @@ export class Fireworks {
   private render(): void {
     if (!this.ctx || !this.running) return
 
-    const { opacity, lineStyle, lineWidth } = opts
+    const { opacity, lineStyle, lineWidth } = this.opts
     this.ctx.globalCompositeOperation = 'destination-out'
     this.ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`
     this.ctx.fillRect(0, 0, this.width, this.height)
@@ -188,7 +195,7 @@ export class Fireworks {
       traceSpeed,
       acceleration,
       mouse
-    } = opts
+    } = this.opts
 
     this.traces.push(
       new Trace({
@@ -214,9 +221,10 @@ export class Fireworks {
   private initTrace(): void {
     if (this.waitStopRaf) return
 
+    const { delay, mouse } = this.opts
     if (
-      this.raf.tick > randomInt(opts.delay.min, opts.delay.max) ||
-      (this.mouse.active && opts.mouse.max > this.traces.length)
+      this.raf.tick > randomInt(delay.min, delay.max) ||
+      (this.mouse.active && mouse.max > this.traces.length)
     ) {
       this.createTrace()
       this.raf.tick = 0
@@ -245,7 +253,7 @@ export class Fireworks {
       friction,
       gravity,
       decay
-    } = opts
+    } = this.opts
 
     let particlesLength = floor(particles)
     while (particlesLength--) {

packages/fireworks-js/src/mouse.ts

@@ -1,16 +1,23 @@
-import { opts } from './options.js'
+import type { Fireworks } from './fireworks.js'
 
 export class Mouse {
   public active = false
   public x: number
   public y: number
 
-  constructor(private readonly canvas: HTMLCanvasElement) {
+  constructor(
+    private readonly fw: Fireworks,
+    private readonly canvas: HTMLCanvasElement
+  ) {
     this.pointerDown = this.pointerDown.bind(this)
     this.pointerUp = this.pointerUp.bind(this)
     this.pointerMove = this.pointerMove.bind(this)
   }
 
+  private get mouseOptions() {
+    return this.fw.options.mouse
+  }
+
   subscribe(): void {
     this.canvas.addEventListener('pointerdown', this.pointerDown)
     this.canvas.addEventListener('pointerup', this.pointerUp)
@@ -24,15 +31,16 @@ export class Mouse {
   }
 
   private usePointer(event: PointerEvent, active: boolean): void {
-    if (opts.mouse.click || opts.mouse.move) {
+    const { click, move } = this.mouseOptions
+    if (click || move) {
       this.x = event.pageX - this.canvas.offsetLeft
       this.y = event.pageY - this.canvas.offsetTop
       this.active = active
     }
   }
 
   private pointerDown(event: PointerEvent): void {
-    this.usePointer(event, opts.mouse.click)
+    this.usePointer(event, this.mouseOptions.click)
   }
 
   private pointerUp(event: PointerEvent): void {

packages/fireworks-js/src/options.ts

@@ -9,7 +9,7 @@ import type {
   MinMax
 } from './types.js'
 
-class Options implements FireworksOptions {
+export class Options implements FireworksOptions {
   public hue: MinMax
   public rocketsPoint: MinMax
   public opacity: number
@@ -109,10 +109,7 @@ class Options implements FireworksOptions {
     }
   }
 
-  updateOptions<T extends FireworksOptions>(options: T): void {
+  update<T extends FireworksOptions>(options: T): void {
     Object.assign(this, deepMerge(this, options))
   }
 }
-
-const opts = new Options()
-export { opts }

packages/fireworks-js/src/raf.ts

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

packages/fireworks-js/src/resize.ts

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

packages/fireworks-js/src/sound.ts

@@ -1,5 +1,5 @@
+import type { Fireworks } from './fireworks.js'
 import { randomFloat, randomInt } from './helpers.js'
-import { opts } from './options.js'
 
 declare global {
   interface Window {
@@ -12,12 +12,20 @@ export class Sound {
   private audioContext: AudioContext
   private onInit = false
 
-  constructor() {
+  constructor(private readonly fw: Fireworks) {
     this.init()
   }
 
+  private get isEnabled() {
+    return this.fw.options.sound.enabled
+  }
+
+  private get soundOptions() {
+    return this.fw.options.sound
+  }
+
   private init(): void {
-    if (!this.onInit && opts.sound.enabled) {
+    if (!this.onInit && this.isEnabled) {
       this.onInit = true
       this.audioContext = new (window.AudioContext ||
         window.webkitAudioContext)()
@@ -26,7 +34,7 @@ export class Sound {
   }
 
   private async loadSounds(): Promise<void> {
-    for (const file of opts.sound.files) {
+    for (const file of this.soundOptions.files) {
       const response = await (await fetch(file)).arrayBuffer()
 
       this.audioContext
@@ -41,15 +49,15 @@ export class Sound {
   }
 
   play(): void {
-    if (opts.sound.enabled && this.sounds.length) {
+    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()
 
       source.buffer = sound
       vol.gain.value = randomFloat(
-        opts.sound.volume.min / 100,
-        opts.sound.volume.max / 100
+        this.soundOptions.volume.min / 100,
+        this.soundOptions.volume.max / 100
       )
       vol.connect(this.audioContext.destination)
       source.connect(vol)