From 16e63dc4e9c010fe9a4dbac739333cb330c1528d Mon Sep 17 00:00:00 2001 From: Sputnik Antolovich <inquiry@dermah.com> Date: Mon, 14 Oct 2019 13:03:33 +1100 Subject: [PATCH] Toggle audience participation --- pulsar/assets/js/audience/audience-app.js | 17 +++++++++++++++-- pulsar/assets/js/clicker/socket.js | 15 ++++++++++++++- .../pulsar_web/templates/clicker/index.html.eex | 9 ++++++++- 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/pulsar/assets/js/audience/audience-app.js b/pulsar/assets/js/audience/audience-app.js index fb4bea6..13a7e7d 100644 --- a/pulsar/assets/js/audience/audience-app.js +++ b/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); diff --git a/pulsar/assets/js/clicker/socket.js b/pulsar/assets/js/clicker/socket.js index 9f07bae..24721df 100644 --- a/pulsar/assets/js/clicker/socket.js +++ b/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", {}); }); diff --git a/pulsar/lib/pulsar_web/templates/clicker/index.html.eex b/pulsar/lib/pulsar_web/templates/clicker/index.html.eex index 9ff569e..cb9a651 100644 --- a/pulsar/lib/pulsar_web/templates/clicker/index.html.eex +++ b/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> \ No newline at end of file