refactor demo website

crashmax-dev · crashmax-dev · commit 86a0a1bd663e · 2022-05-01T18:20:29.000+08:00
diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <title>🎆 Fireworks.js</title>
-  <link rel="icon" href="./images/fireworks_emoji.png" type="image/png">
+  <title>fireworks-js</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎆</text></svg>">
   <link rel="stylesheet" href="./index.css">
 </head>
 
diff --git a/src/demo/config.ts b/src/demo/config.ts
@@ -0,0 +1,86 @@
+import type { FireworksOptions } from '../fireworks'
+
+export const mainContainer = document
+  .querySelector<HTMLDivElement>('.container')!
+
+export const fireworksContainer = document
+  .querySelector<HTMLDivElement>('.fireworks-container')!
+
+export const fireworksOptions: FireworksOptions = {
+  hue: {
+    min: 0,
+    max: 345
+  },
+  delay: {
+    min: 30,
+    max: 60
+  },
+  rocketsPoint: {
+    min: 50,
+    max: 50
+  },
+  opacity: 0.5, // fillStyle
+  acceleration: 1.02,
+  friction: 0.97,
+  gravity: 1.5,
+  particles: 90,
+  trace: 3,
+  traceSpeed: 10,
+  explosion: 6,
+  intensity: 30,
+  flickering: 50,
+  lineStyle: 'round',
+  lineWidth: {
+    explosion: {
+      min: 1,
+      max: 4
+    },
+    trace: {
+      min: 0.1,
+      max: 1
+    }
+  },
+  autoresize: true,
+  brightness: {
+    min: 50,
+    max: 80,
+    decay: {
+      min: 0.015,
+      max: 0.03
+    }
+  },
+  boundaries: {
+    x: 50,
+    y: 50,
+    width: fireworksContainer.clientWidth,
+    height: fireworksContainer.clientHeight,
+    visible: false
+  },
+  sound: {
+    enabled: false,
+    files: [
+      location.href + 'sounds/explosion0.mp3',
+      location.href + 'sounds/explosion1.mp3',
+      location.href + 'sounds/explosion2.mp3'
+    ],
+    volume: {
+      min: 2,
+      max: 4
+    }
+  },
+  mouse: {
+    click: true,
+    move: false,
+    max: 3
+  }
+}
+
+export const backgroundConfig = {
+  color: '#000000',
+  image: '',
+  size: 'cover',
+  position: '50% 50%',
+  repeat: 'no-repeat',
+  container: false,
+  fps: false
+}
diff --git a/src/demo/index.ts b/src/demo/index.ts
@@ -1,90 +1,9 @@
 import { Pane } from 'tweakpane'
 import * as EssentialsPlugin from '@tweakpane/plugin-essentials'
 import { Fireworks } from '../fireworks'
-import type { FireworksOptions } from '../fireworks'
+import { fireworksContainer, fireworksOptions, backgroundConfig, mainContainer } from './config'
 import type { FpsGraphBladeApi } from '@tweakpane/plugin-essentials/dist/types/fps-graph/api/fps-graph'
 
-const container = document.querySelector<HTMLDivElement>('.container')!
-const fireworksContainer = document.querySelector<HTMLDivElement>('.fireworks-container')!
-const fireworksOptions: FireworksOptions = {
-  hue: {
-    min: 0,
-    max: 345
-  },
-  delay: {
-    min: 30,
-    max: 60
-  },
-  rocketsPoint: {
-    min: 50,
-    max: 50
-  },
-  opacity: 0.5, // fillStyle
-  acceleration: 1.02,
-  friction: 0.97,
-  gravity: 1.5,
-  particles: 90,
-  trace: 3,
-  traceSpeed: 10,
-  explosion: 6,
-  intensity: 30,
-  flickering: 50,
-  lineStyle: 'round',
-  lineWidth: {
-    explosion: {
-      min: 1,
-      max: 4
-    },
-    trace: {
-      min: 0.1,
-      max: 1
-    }
-  },
-  autoresize: true,
-  brightness: {
-    min: 50,
-    max: 80,
-    decay: {
-      min: 0.015,
-      max: 0.03
-    }
-  },
-  boundaries: {
-    x: 50,
-    y: 50,
-    width: fireworksContainer.clientWidth,
-    height: fireworksContainer.clientHeight,
-    visible: false
-  },
-  sound: {
-    enabled: false,
-    files: [
-      location.href + 'sounds/explosion0.mp3',
-      location.href + 'sounds/explosion1.mp3',
-      location.href + 'sounds/explosion2.mp3'
-    ],
-    volume: {
-      min: 2,
-      max: 4
-    }
-  },
-  mouse: {
-    click: true,
-    move: false,
-    max: 10
-  }
-}
-
-const backgroundConfig = {
-  color: '#000000',
-  image: '',
-  size: 'cover',
-  position: '50% 50%',
-  repeat: 'no-repeat',
-  container: false,
-  fps: false
-}
-
 const fireworks = new Fireworks(fireworksContainer, fireworksOptions)
 fireworks.start()
 
@@ -246,7 +165,9 @@ const background = tweakpane.addFolder({
 background
   .addInput(backgroundConfig, 'container')
   .on('change', ({ value }) => {
-    container.style.display = value ? 'none' : 'block'
+    mainContainer.style.display = value ?
+      'none' :
+      'block'
   })
 
 background
