Merge pull request #91 from crashmax-dev/launch-fire

feat: added launch rockets method

Author: crashmax-dev

examples/basic/package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@zero-dependency/dom": "^0.10.0",
     "fireworks-js": "workspace:*"
   },
   "devDependencies": {

examples/basic/src/index.ts

@@ -1,23 +1,64 @@
 import { Fireworks } from 'fireworks-js'
+import { el } from '@zero-dependency/dom'
 import './style.css'
 
 const app = document.querySelector<HTMLDivElement>('#app')!
 const fireworks = new Fireworks(app)
 
-const button = document.createElement('button')
-button.textContent = 'Start'
-button.style.position = 'absolute'
-button.style.zIndex = '999'
-button.addEventListener('click', () => {
-  fireworks.start()
-  stopFireworks(fireworks)
+const start = el(
+  'button',
+  {
+    onclick: () => {
+      fireworks.start()
+    }
+  },
+  'Start'
+)
+
+const stop = el(
+  'button',
+  {
+    onclick: () => {
+      fireworks.waitStop()
+    }
+  },
+  'Stop'
+)
+
+const launch = el(
+  'button',
+  {
+    onclick: () => {
+      fireworks.launch(Number(count.value))
+    }
+  },
+  'Launch'
+)
+
+const count = el('input', {
+  value: '1',
+  min: '1',
+  max: '15',
+  type: 'number',
+  placeholder: 'count',
+  style: {
+    width: '2rem'
+  }
 })
 
-document.body.appendChild(button)
+const buttons = el(
+  'div',
+  {
+    style: {
+      position: 'absolute',
+      display: 'flex',
+      gap: '4px'
+    }
+  },
+  start,
+  stop,
+  launch,
+  count
+)
 
-async function stopFireworks(fireworks: Fireworks) {
-  console.time()
-  await new Promise((resolve) => setTimeout(resolve, 2000))
-  await fireworks.waitStop()
-  console.timeEnd()
-}
+document.body.appendChild(buttons)

packages/fireworks-js/src/fireworks.ts

@@ -110,6 +110,17 @@ export class Fireworks {
     this.ctx.clearRect(0, 0, this.width, this.height)
   }
 
+  launch(count = 1): void {
+    for (let i = 0; i < count; i++) {
+      this.createTrace()
+    }
+
+    if (!this.waitStopRaf) {
+      this.start()
+      this.waitStop()
+    }
+  }
+
   updateOptions(options: FireworksOptions): void {
     opts.updateOptions(options)
   }
@@ -154,24 +165,23 @@ export class Fireworks {
   private render(): void {
     if (!this.ctx || !this.running) return
 
+    const { opacity, lineStyle, lineWidth } = opts
     this.ctx.globalCompositeOperation = 'destination-out'
-    this.ctx.fillStyle = `rgba(0, 0, 0, ${opts.opacity})`
+    this.ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`
     this.ctx.fillRect(0, 0, this.width, this.height)
     this.ctx.globalCompositeOperation = 'lighter'
-    this.ctx.lineCap = opts.lineStyle
+    this.ctx.lineCap = lineStyle
     this.ctx.lineJoin = 'round'
+    this.ctx.lineWidth = randomFloat(lineWidth.trace.min, lineWidth.trace.max)
 
     this.initTrace()
     this.drawTrace()
     this.drawExplosion()
   }
 
-  private initTrace(): void {
-    if (this.waitStopRaf) return
-
+  private createTrace(): void {
     const {
       hue,
-      delay,
       rocketsPoint,
       boundaries,
       traceLength,
@@ -180,40 +190,40 @@ export class Fireworks {
       mouse
     } = opts
 
+    this.traces.push(
+      new Trace({
+        x: (this.width * randomInt(rocketsPoint.min, rocketsPoint.max)) / 100,
+        y: this.height,
+        dx:
+          (this.mouse.x && mouse.move) || this.mouse.active
+            ? this.mouse.x
+            : randomInt(boundaries.x, boundaries.width - boundaries.x * 2),
+        dy:
+          (this.mouse.y && mouse.move) || this.mouse.active
+            ? this.mouse.y
+            : randomInt(boundaries.y, boundaries.height * 0.5),
+        ctx: this.ctx,
+        hue: randomInt(hue.min, hue.max),
+        speed: traceSpeed,
+        acceleration,
+        traceLength: floor(traceLength)
+      })
+    )
+  }
+
+  private initTrace(): void {
+    if (this.waitStopRaf) return
+
     if (
-      this.raf.tick > randomInt(delay.min, delay.max) ||
-      (this.mouse.active && mouse.max > this.traces.length)
+      this.raf.tick > randomInt(opts.delay.min, opts.delay.max) ||
+      (this.mouse.active && opts.mouse.max > this.traces.length)
     ) {
-      this.traces.push(
-        new Trace({
-          x: (this.width * randomInt(rocketsPoint.min, rocketsPoint.max)) / 100,
-          y: this.height,
-          dx:
-            (this.mouse.x && mouse.move) || this.mouse.active
-              ? this.mouse.x
-              : randomInt(boundaries.x, boundaries.width - boundaries.x * 2),
-          dy:
-            (this.mouse.y && mouse.move) || this.mouse.active
-              ? this.mouse.y
-              : randomInt(boundaries.y, boundaries.height * 0.5),
-          ctx: this.ctx,
-          hue: randomInt(hue.min, hue.max),
-          speed: traceSpeed,
-          acceleration,
-          traceLength: floor(traceLength)
-        })
-      )
-
+      this.createTrace()
       this.raf.tick = 0
     }
   }
 
   private drawTrace(): void {
-    this.ctx.lineWidth = randomFloat(
-      opts.lineWidth.trace.min,
-      opts.lineWidth.trace.max
-    )
-
     let traceLength = this.traces.length
     while (traceLength--) {
       this.traces[traceLength]!.draw()