Add Audio and attendee dress colors

README.md

@@ -1,6 +1,11 @@
 <img src="./src/images/wole-joko-logo.png" />
 
-A fun little app that mimics admitting people into an event hall and getting them well seated. 
+A fun little pure HTML/Javascript app that mimics admitting 
+people into an event hall and getting them well seated. 
+
+
+![the even hall](./auditorium.png "the event hall")
+![Chrome dev console](./chrome-dev-console.png "custom console logs")
 
 [See it live!](https://wole-joko.netlify.app/). Also, there's some [code documentation here](https://chalu.github.io/wole-joko/)
 

index.html

@@ -120,9 +120,60 @@
         margin-top: -12px;
         border-top-left-radius: 50%;
         border-top-right-radius: 50%;
+        background: #ccc;
+      }
+
+      [data-seating-side] .seat .attendee {
+        width: 8px;
+        height: 8px;
+        margin: 2px;
+        border-radius: 100%;
+      }
+
+      .row .seat .attendee.dress-white {
+        background: #f1f1f1;
+      }
+
+      .row .seat .attendee.dress-black {
+        background: #333;
+      }
+
+      .row .seat .attendee.dress-maroon {
+        background: maroon;
+      }
+
+      .row .seat .attendee.dress-lightblue {
         background: #6feaf6;
       }
 
+      .row .seat .attendee.dress-lighterblue {
+        background: #6fd5f6;
+      }
+
+      .row .seat .attendee.dress-mediumblue {
+        background: #6fc1f6;
+      }
+
+      .row .seat .attendee.dress-deeperblue {
+        background: #6fa0e6;
+      }
+
+      .row .seat .attendee.dress-orange {
+        background: #f6945a;
+      }
+
+      .row .seat .attendee.dress-purple {
+        background: #9f5af6;
+      }
+
+      .row .seat .attendee.dress-darkerorange {
+        background: #f67c41;
+      }
+
+      .row .seat .attendee.dress-darkersoftorange {
+        background: #f69841;
+      }
+
       [data-rows-left] .row .seat:nth-of-type(1) {
         margin-left: 0.8em;
       }
@@ -163,8 +214,8 @@
       </div>
     </div>
 
-    <audio loop autoplay>
-      <source src="https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-31172/zapsplat_public_places_cathedral_st_marys_sydney_cbd_internal_amb_traffic_outside_people_organist_tuning_sydney_australia002_32683.mp3" type="audio/mp3">
+    <audio preload="auto" loop>
+      <source src="cathedral_st_marys_sydney_cbd.mp3" type="audio/mp3">
     </audio>
 
     <script type="module" src="./src/js/index.js"></script>

src/js/attendee.js

@@ -1,6 +1,6 @@
 import Person from './person.js';
 import {
-  logs, rAF, select, intFromId
+  logs, rAF, select, intFromId, getRandomDressColorFromPallate
 } from './utils.js';
 
 const { info } = logs;
@@ -36,8 +36,13 @@ class Attendee extends Person {
       const row = select(`[data-rows-${hallSide}] [data-row-${rowIndex}]`);
       const seating = document.createElement('div');
       seating.classList.add('seat', `seat-${seatNum}`);
-      seating.setAttribute(`data-seating-attendee-${idNum}`, '');
+      // seating.setAttribute(`data-seating-attendee-${idNum}`, '');
       row.appendChild(seating);
+
+      const attendee = document.createElement('div');
+      attendee.classList.add('attendee', `dress-${getRandomDressColorFromPallate()}`);
+      attendee.setAttribute(`data-seating-attendee-${idNum}`, '');
+      seating.appendChild(attendee);
     });
 
     // make sure, then signal you are seated!

src/js/index.js

@@ -2,6 +2,18 @@ import { init, doorsOpen } from './auditorium.js';
 
 const startApp = () => {
   init().then(() => doorsOpen());
+
+  document.body.addEventListener('click', () => {
+    const audio = document.querySelector('audio');
+    if (!audio) return;
+
+    if (audio.currentTime <= 0 || audio.paused) {
+      audio.play();
+      return;
+    }
+
+    audio.pause();
+  });
 };
 
 document.addEventListener('DOMContentLoaded', startApp);

src/js/utils.js

@@ -131,3 +131,12 @@ const logr = (realm) => {
 };
 
 export const logs = logr('App');
+
+const DRESS_COLORS = [
+  'lightblue', 'lighterblue', 'mediumblue', 'deeperblue', 'orange',
+  'purple', 'darkerorange', 'darkersoftorange', 'white', 'black'
+];
+export const getRandomDressColorFromPallate = () => {
+  const index = Math.floor(Math.random() * DRESS_COLORS.length);
+  return DRESS_COLORS[index % DRESS_COLORS.length];
+};