feat(#3): Add fireworks and sound to selection reveal

package.json

@@ -38,8 +38,10 @@
     "workbox-cli": "^6.5.4"
   },
   "dependencies": {
+    "@fireworks-js/web": "^2.5.1",
     "@types/d3": "^7.4.0",
     "d3": "^7.6.1",
+    "fireworks-js": "^2.5.1",
     "html-webpack-plugin": "^5.5.0",
     "react-dev-utils": "^12.0.1",
     "webpack-manifest-plugin": "^5.0.0",

src/index.ts

@@ -1,7 +1,9 @@
 import * as d3 from 'd3';
+import { Fireworks } from 'fireworks-js';
 import loadServiceWorker from './loadServiceWorker';
 import audioControls from './audioControls';
 import spinnerMp3 from './assets/spinner-sound.mp3';
+import tadaMp3 from './assets/tada-fanfare.mp3';
 
 require('./assets/favicon.ico');
 require('./assets/android-chrome-192x192.png');
@@ -12,10 +14,26 @@ require('./assets/favicon-32x32.png');
 require('./styles/main.scss');
 
 const wheelSpinningSound = new Audio(spinnerMp3);
+const tadaSound = new Audio(tadaMp3);
 if (window.localStorage.audioMuteSetting) {
   wheelSpinningSound.muted = window.localStorage.audioMuteSetting;
+  tadaSound.muted = window.localStorage.audioMuteSetting;
 }
 
+const fireworksContainer = document.getElementById('fireworks-container');
+function fireworksContainerOnClick() {
+  fireworksContainer.style.display = 'none';
+  document.getElementById('chart').click();
+  document.getElementsByClassName('chartholder')[0].dispatchEvent(new Event('click'));
+}
+fireworksContainer.onclick = fireworksContainerOnClick;
+
+const fireworks = new Fireworks(fireworksContainer, {
+  // sound: {
+  //   enabled: !wheelSpinningSound.muted,
+  // },
+});
+
 const padding = {
   top: 20,
   right: 40,
@@ -163,11 +181,16 @@ function drawWheel() {
     // all slices have been seen, all done
     // console.log(`OldPick: ${oldpick.length}`, `Data length: ${data.length}`);
     if (oldpick.length === data.length) {
+      fireworksContainer.style.display = 'none';
+      fireworks.clear();
       stopSpinning();
       return;
     }
 
+    audioControls.stopAudio(tadaSound);
     audioControls.playAudio(wheelSpinningSound);
+    fireworksContainer.style.display = 'none';
+    fireworks.stop();
     const ps = 360 / data.length;
     const rng = Math.floor(Math.random() * 1440 + 360);
 
@@ -195,6 +218,14 @@ function drawWheel() {
         oldrotation = rotation;
 
         audioControls.stopAudio(wheelSpinningSound);
+        audioControls.playAudio(tadaSound);
+        fireworksContainer.style.display = 'block';
+        const sizes = {
+          width: window.innerWidth,
+          height: window.innerHeight,
+        };
+        fireworks.updateSize(sizes);
+        fireworks.start();
 
         /* Get the result value from object "data" */
         // console.log(data[picked].value);
@@ -216,8 +247,10 @@ function startOver() {
 
 function toggleMute() {
   audioControls.toggleMute(wheelSpinningSound);
+  audioControls.toggleMute(tadaSound);
   this.textContent = wheelSpinningSound.muted ? 'Unmute' : 'Mute';
   window.localStorage.audioMuteSetting = wheelSpinningSound.muted;
+  // TODO - toggle muting the fireworks from here
 }
 
 function startSpinning() {

src/styles/main.scss

@@ -182,6 +182,15 @@ text{
   margin-bottom: 50px;
 }
 
+#fireworks-container {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
 #image{
   width: 100%;
 }

src/template.html

@@ -56,5 +56,7 @@ For example, https://wheel.jcreek.co.uk/?imgUrl=https://www.mammal.org.uk/wp-con
             <span> | </span>
             <span class="footer-items"><a href="/privacy-policy.html">Privacy Policy</a></span>
         </footer>
+
+        <div id="fireworks-container"></div>
     </body>
 </html>