feat(#26): Display selection in modal

src/index.ts

@@ -12,6 +12,7 @@ require('./assets/apple-touch-icon.png');
 require('./assets/favicon-16x16.png');
 require('./assets/favicon-32x32.png');
 require('./styles/main.scss');
+require('./styles/modal.scss');
 
 const wheelSpinningSound = new Audio(spinnerMp3);
 const tadaSound = new Audio(tadaMp3);
@@ -19,10 +20,12 @@ 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'));
 }
@@ -34,6 +37,13 @@ const fireworks = new Fireworks(fireworksContainer, {
   // },
 });
 
+// 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,
   right: 40,
@@ -66,8 +76,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';
 }
@@ -214,7 +222,8 @@ function drawWheel() {
         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);
@@ -291,17 +300,10 @@ function startSpinning() {
   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';
 }

src/styles/main.scss

@@ -136,7 +136,7 @@ text{
   margin-right: auto;
 }
 
-#question h1{
+#selection h1{
   font-size: 50px;
   font-weight: bold;
   font-family: Arial, sans-serif;

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/template.html

@@ -57,6 +57,17 @@ For example, https://wheel.jcreek.co.uk/?imgUrl=https://www.mammal.org.uk/wp-con
             <span class="footer-items"><a href="/privacy-policy.html">Privacy Policy</a></span>
         </footer>
 
-        <div id="fireworks-container"></div>
+        <div id="myModal" class="modal">
+            
+
+            <!-- Modal content -->
+            <div id="modal-content">
+              <h1 id="selection"></h1>
+            </div>
+            <div id="fireworks-container"></div>
+          
+          </div>
+
+        
     </body>
 </html>