Toggle audience participation

pulsar/assets/js/audience/audience-app.js

@@ -34,13 +34,25 @@ new p5(p => {
   let fireflyPower;
   let fireflyDecay;
 
-  channel.on("pulse", ({ type, size, energy, amplitude, decay }) => {
+  let inputAllowed = false;
+
+  const instrumentMap = [
+    "bass/synth",
+    "drums",
+    "percussion",
+    "horns",
+    "melody"
+  ];
+
+  channel.on("pulse", ({ type, size, energy, amplitude, decay, value }) => {
     if (type === "waveform") {
       energyData = energy;
       totalAmp = amplitude;
     } else if (type === "firefly") {
       fireflyPower = size;
       fireflyDecay = decay;
+    } else if (type === "inputAllowed") {
+      inputAllowed = value;
     } else {
       pulseSize = widthPc(size * 100);
     }
@@ -107,7 +119,8 @@ new p5(p => {
 
     p.textAlign(p.CENTER);
     p.fill(255);
-    p.text(`You are ${instrument}`, p.width / 2, 15);
+    inputAllowed &&
+      p.text(`You are ${instrumentMap[instrument]}`, p.width / 2, 15);
     p.push();
     p.translate(p.width / 2, p.height / 2);
 

pulsar/assets/js/clicker/socket.js

@@ -58,18 +58,31 @@ socket.connect();
 let channel = socket.channel("audience:lobby", {});
 let slideChannel = socket.channel("slides:lobby", {});
 let broadcasting = true;
+let allowAudience = false;
 
 const clearButton = document.querySelector("#clear-button");
 const leftButton = document.querySelector("#left-button");
 const rightButton = document.querySelector("#right-button");
 const fireflyButton = document.querySelector("#firefly-button");
 
-var broadcastCheckbox = document.querySelector("#broadcasting");
+const broadcastCheckbox = document.querySelector("#broadcasting");
+const audienceCheckbox = document.querySelector("#allow-audience");
 
 broadcastCheckbox.onchange = function() {
   broadcasting = broadcastCheckbox.checked;
 };
 
+const audienceEnableBroadcast = () => {
+  channel.push("pulse", { type: "inputAllowed", value: allowAudience });
+};
+
+audienceCheckbox.onchange = function() {
+  allowAudience = audienceCheckbox.checked;
+  audienceEnableBroadcast();
+};
+
+// setInterval(() => audienceEnableBroadcast(), 2000);
+
 clearButton.addEventListener("click", e => {
   channel.push("clear", {});
 });

pulsar/lib/pulsar_web/templates/clicker/index.html.eex

@@ -5,10 +5,17 @@
     <button id="left-button">◀️</button>
     <button id="right-button">▶️</button>
   </div>
+
+  <button id="firefly-button">🌅</button>
+
   <div>
     <input id="broadcasting" type="checkbox" checked="true" />
     <label for="broadcasting">Broadcast</label>
   </div>
 
-  <button id="firefly-button">🌅</button>
+  <div>
+    <input id="allow-audience" type="checkbox"/>
+    <label for="allow-audience">Audience</label>
+  </div>
+
 </div>