fix#25): Ensure wheel is not too small

feat(#25): Improve max wheel size on smaller viewports

.eslintrc.json

@@ -27,6 +27,7 @@
               "ts": "never",
               "tsx": "never"
             }
-        ]
+        ],
+        "quotes": [2, "single", { "avoidEscape": true }]
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SelectionWheel",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "A fun and simple selection wheel.",
   "main": "index.js",
   "scripts": {
@@ -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/audioControls.ts

@@ -0,0 +1,17 @@
+export default {
+  pauseAudio(audio: HTMLAudioElement) {
+    audio.pause();
+  },
+  playAudio(audio: HTMLAudioElement) {
+    audio.play();
+  },
+  stopAudio(audio: HTMLAudioElement) {
+    audio.pause();
+    // eslint-disable-next-line no-param-reassign
+    audio.currentTime = 0;
+  },
+  toggleMute(audio: HTMLAudioElement) {
+    // eslint-disable-next-line no-param-reassign
+    audio.muted = !audio.muted;
+  },
+};

src/index.ts

@@ -1,10 +1,50 @@
 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');
 require('./assets/android-chrome-512x512.png');
+require('./assets/apple-touch-icon.png');
+require('./assets/favicon-16x16.png');
+require('./assets/favicon-32x32.png');
 require('./styles/main.scss');
+require('./styles/buttons.scss');
+require('./styles/modal.scss');
+require('./styles/spinner.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 modal = document.getElementById('myModal');
+
+const fireworksContainer = document.getElementById('fireworks-container');
+function fireworksContainerOnClick() {
+  fireworksContainer.style.display = 'none';
+  modal.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,
+  // },
+});
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = (event) => {
+  if (event.target === modal) {
+    modal.style.display = 'none';
+  }
+};
 
 const padding = {
   top: 20,
@@ -26,6 +66,8 @@ const color = d3.scaleOrdinal(d3.schemeCategory10);
 let data = [];
 const testData = ['Person 1', 'Person 2', 'Person 3', 'Person 4'];
 
+let imageUrlForSpinner = '';
+
 // eslint-disable-next-line no-unused-vars
 function rotTween(to) {
   const i = d3.interpolate(oldrotation % 360, rotation);
@@ -36,8 +78,6 @@ function stopSpinning() {
   // console.log('done');
   const chartElement = document.getElementById('chart');
   chartElement.remove();
-  const questionElement = document.getElementById('question');
-  questionElement.remove();
   document.getElementById('input-lines').style.display = 'block';
   document.getElementById('startSpinning').style.display = 'block';
 }
@@ -57,22 +97,39 @@ function makeArrowAndCircle(
     .attr('d', `M-${r * 0.15},0L0,${r * 0.05}L0,-${r * 0.05}Z`)
     .style('fill', 'black');
   // draw spin circle
-  container
+  if (imageUrlForSpinner.length > 0) {
-    .append('circle')
+    const defs = svg.append('svg:defs');
-    .attr('cx', 0)
+
-    .attr('cy', 0)
+    defs.append('svg:pattern')
-    .attr('r', 60)
+      .attr('id', 'image')
-    .style('fill', 'white')
+      .attr('width', 1)
-    .style('cursor', 'pointer');
+      .attr('height', 1)
-  // spin text
+      .attr('patternContentUnits', 'objectBoundingBox')
-  container
+      .append('svg:image')
-    .append('text')
+      .attr('xlink:href', imageUrlForSpinner)
-    .attr('x', 0)
+      .attr('width', 1)
-    .attr('y', 10)
+      .attr('height', 1)
-    .attr('text-anchor', 'middle')
+      .attr('x', 0)
-    .text('SPIN')
+      .attr('y', 0)
-    .style('font-weight', 'bold')
+      .attr('preserveAspectRatio', 'xMaxYMax slice');
-    .style('font-size', '30px');
+
+    container
+      .append('circle')
+      .attr('cx', 0)
+      .attr('cy', 0)
+      .attr('r', 60)
+      .style('fill', 'white')
+      .style('fill', 'url(#image)')
+      .style('cursor', 'pointer');
+  } else {
+    container
+      .append('circle')
+      .attr('cx', 0)
+      .attr('cy', 0)
+      .attr('r', 60)
+      .style('fill', 'white')
+      .style('cursor', 'pointer');
+  }
 }
 
 function drawWheel() {
@@ -134,9 +191,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);
 
@@ -158,10 +222,22 @@ function drawWheel() {
       .on('end', () => {
         // mark question as seen
         d3.select(`.slice:nth-child(${picked + 1}) path`).attr('fill', '#111');
+        d3.select(`.slice:nth-child(${picked + 1}) text`).attr('fill', '#ffffff');
         // populate question
-        d3.select('#question h1').text(data[picked].label.trim());
+        modal.style.display = 'block';
+        d3.select('#selection').text(data[picked].label.trim());
         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);
 
@@ -177,6 +253,15 @@ function drawWheel() {
 
 function startOver() {
   stopSpinning();
+  audioControls.stopAudio(wheelSpinningSound);
+}
+
+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() {
@@ -208,19 +293,19 @@ function startSpinning() {
   startOverElement.setAttribute('role', 'button');
   startOverElement.onclick = startOver;
   startOverElement.textContent = 'Start over';
+  const muteElement = document.createElement('button');
+  muteElement.setAttribute('id', 'mute');
+  muteElement.setAttribute('class', 'button button-black');
+  muteElement.setAttribute('role', 'button');
+  muteElement.onclick = toggleMute;
+  muteElement.textContent = wheelSpinningSound.muted ? 'Unmute' : 'Mute';
   chartElement.appendChild(startOverElement);
+  chartElement.appendChild(muteElement);
   document.getElementById('spinner-container').appendChild(chartElement);
-  const questionElement = document.createElement('div');
-  questionElement.setAttribute('id', 'question');
-  questionElement.setAttribute('class', 'spinner-items');
-  const h1Element = document.createElement('h1');
-  questionElement.appendChild(h1Element);
-  document.getElementById('spinner-container').appendChild(questionElement);
 
   drawWheel();
 
   document.getElementById('chart').style.display = 'block';
-  document.getElementById('question').style.display = 'block';
   document.getElementById('input-lines').style.display = 'none';
   document.getElementById('startSpinning').style.display = 'none';
 }
@@ -237,6 +322,11 @@ textArea.addEventListener('keyup', () => {
   window.localStorage.TextEditorData = textArea.value;
 });
 
+const urlParams = new URLSearchParams(window.location.search);
+if (urlParams.has('imgUrl')) {
+  imageUrlForSpinner = urlParams.get('imgUrl');
+}
+
 if (process.env.NODE_ENV === 'production') {
   loadServiceWorker();
 }

src/serviceWorker.js

@@ -7,9 +7,6 @@ import { registerRoute, NavigationRoute, Route } from 'workbox-routing';
 // eslint-disable-next-line no-underscore-dangle, no-restricted-globals
 precacheAndRoute(self.__WB_MANIFEST);
 
-// Enable navigation preload - this should reduce navigation latency
-navigationPreload.enable();
-
 const navigationRoute = new NavigationRoute(new NetworkFirst({
   cacheName: 'navigations',
 }));

src/styles/buttons.scss

@@ -0,0 +1,82 @@
+.button {
+  appearance: none;
+  border: 1px solid rgba(27, 31, 35, 0.15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 6px 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.button:focus:not(:focus-visible):not(.focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+.button:disabled {
+  border-color: rgba(27, 31, 35, 0.1);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: default;
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button-green {
+  background-color: #2ea44f;
+}
+
+.button-green:hover {
+  background-color: #2c974b;
+}
+
+.button-green:focus {
+  box-shadow: rgba(46, 164, 79, 0.4) 0 0 0 3px;
+  outline: none;
+}
+
+.button-green:disabled {
+  background-color: #94d3a2;
+}
+
+.button-green:active {
+  background-color: #298e46;
+  box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
+}
+
+.button-black {
+  background-color: #423e37;
+}
+
+.button-black:hover {
+  background-color: #2e2b26;
+}
+
+.button-blue {
+  background-color: #388697;
+}
+
+.button-blue:hover {
+  background-color: #275d69;
+}
+
+.button-white {
+  background-color: #ffffff;
+  color: black;
+}

src/styles/main.scss

@@ -1,4 +1,4 @@
-body { 
+body {
   margin: 0;
   font-family: Arial, sans-serif;
 }
@@ -17,7 +17,7 @@ body {
 
 .topbar-container h1 {
   color: white;
-  font-family: 'Fuzzy Bubbles', cursive;
+  font-family: "Fuzzy Bubbles", cursive;
   font-weight: 700;
   margin-block-start: 0.2em;
   margin-block-end: 0.2em;
@@ -81,64 +81,6 @@ body {
   order: 0;
 }
 
-#input-lines {
-  max-width: 100%;
-}
-
-#start-over {
-  position: absolute;
-  top: 100px;
-  left: auto;
-}
-
-#spinner-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: flex-start;
-  align-content: center;
-}
-
-.spinner-items:nth-child(1) {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 1;
-  flex-basis: 800px;
-  align-self: auto;
-  order: 0;
-}
-
-.spinner-items:nth-child(2) {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 1;
-  flex-basis: auto;
-  align-self: auto;
-  order: 0;
-  width: 100%;
-}
-
-text{
-  font-family: Arial, sans-serif;
-  font-size:35px;
-  pointer-events:none;
-}
-#chart{ 
-  max-width:800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-#question h1{
-  font-size: 50px;
-  font-weight: bold;
-  font-family: Arial, sans-serif;
-  -webkit-transform:translate(0,-50%);
-          transform:translate(0,-50%);
-  text-align: center;
-}
-
 #install-app-btn-container {
   display: none;
 }
@@ -149,23 +91,25 @@ text{
   bottom: 0;
   width: 100%;
   text-align: center;
-  color: #423E37;
+  color: #423e37;
   padding-bottom: 10px;
   background-color: white;
 }
 
 .footer-container hr {
   max-width: 500px;
-  border-top: 0.5px solid #423E37;
+  border-top: 0.5px solid #423e37;
   margin-left: auto;
   margin-right: auto;
 }
 
-.footer-container a, #privacy-container a {
+.footer-container a,
-  color: #423E37;
+#privacy-container a {
+  color: #423e37;
 }
 
-.footer-container a:hover, #privacy-container a:hover {
+.footer-container a:hover,
+#privacy-container a:hover {
   color: #81796c;
 }
 
@@ -175,87 +119,3 @@ text{
   max-width: 800px;
   margin-bottom: 50px;
 }
-
-/* Buttons */
-
-.button {
-  appearance: none;
-  border: 1px solid rgba(27, 31, 35, .15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-  box-sizing: border-box;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  padding: 6px 16px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.button:focus:not(:focus-visible):not(.focus-visible) {
-  box-shadow: none;
-  outline: none;
-}
-
-.button:disabled {
-  border-color: rgba(27, 31, 35, .1);
-  color: rgba(255, 255, 255, .8);
-  cursor: default;
-}
-
-.button:focus {
-  outline: none;
-}
-
-.button-green {
-  background-color: #2ea44f;
-}
-
-.button-green:hover {
-  background-color: #2c974b;
-}
-
-.button-green:focus {
-  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
-  outline: none;
-}
-
-.button-green:disabled {
-  background-color: #94d3a2;
-}
-
-.button-green:active {
-  background-color: #298e46;
-  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
-}
-
-.button-black {
-  background-color: #423E37;
-}
-
-.button-black:hover {
-  background-color: #2e2b26;
-}
-
-.button-blue {
-  background-color: #388697;
-}
-
-.button-blue:hover {
-  background-color: #275d69;
-}
-
-.button-white {
-  background-color: #FFFFFF;
-  color: black;
-}

src/styles/modal.scss

@@ -0,0 +1,55 @@
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+//   padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0, 0, 0); /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+#modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: 0.8s;
+  animation-name: animatetop;
+  animation-duration: 0.4s;
+  top: 30%;
+  transform: translateY(-30%);
+  text-align: center;
+  border-radius: 10px;
+}
+
+@-webkit-keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0;
+  }
+  to {
+    top: 30%;
+    opacity: 1;
+  }
+}
+
+@keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0;
+  }
+  to {
+    top: 30%;
+    opacity: 1;
+  }
+}

src/styles/spinner.scss

@@ -0,0 +1,92 @@
+#input-lines {
+  max-width: 100%;
+}
+
+#start-over {
+  position: absolute;
+  top: 100px;
+  left: auto;
+}
+
+#mute {
+  position: absolute;
+  top: 140px;
+  left: auto;
+}
+
+#spinner-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  align-content: center;
+}
+
+.spinner-items:nth-child(1) {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: 800px;
+  align-self: auto;
+  order: 0;
+}
+
+@media screen and ( max-height: 920px )
+{
+    .spinner-items:nth-child(1){
+        flex-basis: 650px;
+        flex-grow: 0;
+    }
+}
+
+.spinner-items:nth-child(2) {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: auto;
+  align-self: auto;
+  order: 0;
+  width: 100%;
+}
+
+text {
+  font-family: Arial, sans-serif;
+  font-size: 35px;
+  pointer-events: none;
+}
+
+#chart {
+  max-width: calc(90%);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media screen and ( min-width: 800px ) and ( max-height: 800px )
+{
+    #chart{
+        max-width: 650px;
+    }
+}
+
+#selection h1 {
+  font-size: 50px;
+  font-weight: bold;
+  font-family: Arial, sans-serif;
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  text-align: center;
+}
+
+#fireworks-container {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#image {
+  width: 100%;
+}

src/template.html

@@ -40,7 +40,13 @@
 
         <div id="input-container">
             <textarea id="input-lines" class="input-items" rows="15" cols="60" name="text"
-            placeholder="Enter names to be shuffled, one per line. Leave this area empty in order to use a default set of generated names."></textarea>
+            placeholder="Enter names to be shuffled, one per line. Leave this area empty in order to use a default set of generated names.
+
+Click or tap on the wheel to spin it.
+
+You can also customise the centre of the spinner with an image. Just put ?imgUrl= at the end of the web address and the URL of the image you want to use.
+
+For example, https://wheel.jcreek.co.uk/?imgUrl=https://www.mammal.org.uk/wp-content/uploads/2021/09/red-fox-300x300.jpg"></textarea>
             <button id="startSpinning" class="input-items button button-green" role="button">Start spinning</button>
         </div>
 
@@ -50,5 +56,18 @@
             <span> | </span>
             <span class="footer-items"><a href="/privacy-policy.html">Privacy Policy</a></span>
         </footer>
+
+        <div id="myModal" class="modal">
+            
+
+            <!-- Modal content -->
+            <div id="modal-content">
+              <h1 id="selection"></h1>
+            </div>
+            <div id="fireworks-container"></div>
+          
+          </div>
+
+        
     </body>
 </html>