chore(examples/basic): launch example

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,62 @@
 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(fires.value))
+    }
+  },
+  'Launch'
+)
+
+const fires = el('input', {
+  value: '1',
+  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,
+  fires
+)
 
-async function stopFireworks(fireworks: Fireworks) {
-  console.time()
-  await new Promise((resolve) => setTimeout(resolve, 2000))
-  await fireworks.waitStop()
-  console.timeEnd()
-}
+document.body.appendChild(buttons)