Design/theming pass and major adjustments for presentation display, b…

…ugfixes

Ref #1. Ref #14. Ref #3.

README.md

@@ -65,6 +65,45 @@ When the service running, visit:
   development and testing. There's also a link to pull a data dump of current
   state information.
 
+## Stage Manager Instructions
+
+1. Preshow, open the `/sm` display and activate the **Preshow** cue.
+  - Optionally, use **Projector Blackout** if the projector needs to display dark.
+2. For a question cue, click the numbered button for the question that should be
+  dispatched.
+3. To display the results of a poll, click **Present Results**
+4. After a delay, click **Close Question** to encourage the audience to turn
+  their screens off again.
+  - Optionally, use **Projector Blackout**
+  - I'd recommend leaving the state on **Close** until the next question.
+5. Repeat from step 2 as needed.
+6. Be sure to end on the **Postshow** cue. This page will still be open on
+   participants' phones when they first turn them on after the show, this is a
+   "thank you" message.
+  - Keep **Postshow** engaged until time to repeat from step 1 at the next
+    performance.
+
+### Troubleshooting
+
+If something goes wrong:
+
+- Given how fast this application was built, it was primarily tested on Chrome.
+  If you're using a different browser, give Chrome a shot.
+- If the presenter/projector screen lags:
+  - Consider what browser it is using.
+  - Make sure it is plugged in (battery modes can throttle page activity)
+  - Try clicking into / focusing the window.
+  - Reload the presenter screen.
+  - If possible, connect the presenter screen to the internet using ethernet
+    instead of the venue's wifi.
+- Visit the `/debug` page to see a sample participant, presenter, and admin
+  display.
+  - Use the **Data dump** link on the debug display to get a status report of
+    the active data in the system.
+  - Use the **Reload all clients** button on the debug display to force all
+    clients to reload the page. This is a heavy hammer!
+- _@TODO: Is there a way to restart the dyno?_
+
 ## Editing
 
 Currently, questions are stored in [`vote-questions.js`][VQ] directly.

app.js

@@ -81,6 +81,8 @@ const connectionStartup = (socket) => {
 
   if (voteQuestions.active) {
     socket.emit('new question', voteQuestions.getQuestion());
+  } else {
+    socket.emit('clear question');
   }
 };
 
@@ -183,6 +185,13 @@ debuggers.on('connection', (socket) => {
     presenters.emit('reload');
     participants.emit('reload');
   });
+
+  socket.on('vote', (msg) => {
+    debug(`debugger vote for ${msg}`);
+    voteCount.vote(msg);
+    managers.emit('update vote count', voteCount.report());
+  });
+
 });
 
 // Events for vote counts and questions

public/js/admins.js

@@ -20,13 +20,15 @@
       element.classList.remove('active');
     });
 
-    document.getElementById('question-' + data.key).classList.add('active');
-    document.getElementById('response-' + data.answer).classList.add('correct');
-
     document.querySelectorAll('.response-value').forEach(function (el) {
       el.innerText = data.responses[el.id.slice(-1)];
+      el.classList.remove('correct');
     });
 
+
+    document.getElementById('question-' + data.key).classList.add('active');
+    document.getElementById('response-' + data.answer).classList.add('correct');
+
     document.getElementById('results').disabled = false;
     document.getElementById('blackout').disabled = true;
   });

public/js/debug.js

@@ -14,6 +14,14 @@
     });
   }
 
+  document.querySelectorAll('.voting-buttons button').forEach(function (el) {
+    el.addEventListener('click', function () {
+      socket.emit('vote', this.id);
+      console.log('submitted vote ' + this.id);
+    });
+  });
+
+
   document.getElementById('reload').addEventListener('click', function () {
     // eslint-disable-next-line no-alert
     var choice = window.confirm('Are you sure you want all clients to reload this page?');

public/js/participants.js

@@ -24,7 +24,7 @@
       // true/false questions don't have 4 buttons.) This also would set the
       // disabled flag appropriately if a new question is dispatched before the
       // previous question is cleared.
-      el.disabled = Boolean(!data.responses[el.id]);
+      el.disabled = !(Boolean(data.responses[el.id]));
 
       vote = null;
       el.classList.remove('active');

public/js/presenters.js

@@ -32,6 +32,12 @@
 
       // In case this wasn't properly scrubbed in a jump cue.
       el.classList.remove('correct');
+      el.classList.remove('disabled');
+
+      if (!Boolean(data.responses[el.id.slice(-1)])) {
+        el.classList.add('disabled');
+      }
+
 
       if (data.answer === el.id.slice(-1)) {
         el.classList.add('correct');
@@ -51,6 +57,7 @@
     document.querySelectorAll('.response-option, .results-display').forEach(function (el) {
       el.innerText = null;
       el.classList.remove('correct');
+      el.classList.remove('disabled');
     });
 
     document.querySelectorAll('.results-background').forEach(function (el) {

public/stylesheets/admins.scss

@@ -23,8 +23,10 @@ header {
 header {
   max-width: 400px;
 }
+
 .show-title:after {
   content: "Stage Manager Deck";
+  font-size: 0.625em;
   display: block;
   position: absolute;
   bottom: 0;

public/stylesheets/debug.scss

@@ -20,6 +20,16 @@ header {
   }
 }
 
+
+.voting-buttons {
+  .status-vote & { display: inline-block; }
+
+  button {
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+  }
+}
+
 iframe {
   width: 360px;
   height: 680px;

public/stylesheets/participants.scss

@@ -1,11 +1,28 @@
 @import 'style.scss';
 
+body {
+  background: #1d1820 url(/gfx/participants-background.gif) center center no-repeat;
+  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B";
+  font-style: normal;
+  font-weight: 500;
+}
+
+.container {
+  display: block; // No flexbox / vertical-center here because of the jump when toolbars disappear
+  max-width: 40em;
+  margin: 0 auto;
+  min-height: 0;
+  padding: 2em 1em;
+}
+
 .show-title {
   max-width: 25em;
 }
 
 h2 {
-  font-size: 1.375em;
+  text-align: left;
+  margin: 0.75em auto;
+  font-size: 1.5em;
 }
 
 .results-text {
@@ -19,11 +36,10 @@ h2 {
 .answer-text {
   color: #009900;
   font-size: 1.5em;
-  font-weight: bold;
+  font-weight: 800;
 }
 
 .citation-text {
-  font-style: italic;
   font-size: 0.875em;
 }
 
@@ -39,6 +55,7 @@ h2 {
     margin: 0.125em;
     padding: 0.5em;
     font-size: 2em;
+    font-weight: 800;
 
     &:empty,
     &:disabled {

public/stylesheets/presenters.scss

@@ -1,5 +1,11 @@
 @import 'style.scss';
 
+body {
+  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B";
+  font-style: normal;
+  font-weight: 500;
+}
+
 .blackout-container {
   position: absolute;
   top: 0;
@@ -20,49 +26,70 @@
 .container {
   position: relative;
   font-size: 1.5em;
+  padding: 0.5em;
 }
 
 .show-title {
   width: 80%;
   width: 80vw;
 }
 
+#question-text {
+  font-size: 2.5em;
+  margin: 0 auto 0.5em 0;
+}
+
+p {
+  font-size: 3em;
+}
+
 dl {
   display: flex;
   flex-wrap: wrap;
+  align-items: stretch;
 
   width: 80%;
   width: 80vw;
   font-size: 1.5em;
   margin: 0 auto;
 
+  font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B";
+  font-style: normal;
+  font-weight: 800;
+
   .status-vote & {
     display: block;
     text-align: center;
   }
 
   dt, dd {
     margin: 0 0 0.5em 0;
-    padding: 0.5em;
     text-align: left;
   }
 
   dt {
     flex: 1 0 auto;
     width: 25%;
-    font-size: 1.125em;
+    font-size: 1.75em;
+    align-self: center;
+
     .status-vote & {
       width: 100%;
       text-align: center;
     }
+
+    &.disabled, &.disabled + dd {
+      display: none;
+    }
   }
 
   dd {
     position: relative;
     flex: 3 0 auto;
     width: 75%;
-    background-color: #111;
-    border: 1px solid #444;
+    padding: 0.125em 0.75em;
+    background-color: #000;
+    border: 1px solid #26202b;
     .status-vote & {
       background-color: 0;
       display: none;
@@ -75,14 +102,16 @@ dl {
     top: 0;
     bottom: 0;
     left: 0;
-    background-color: #999;
+    background-color: #997fab;
     z-index: 1;
   }
 
   .results-display {
     display: block;
-    position: relative;
+    position: absolute;
     z-index: 10;
+    top: 50%;
+    transform: translateY(-50%);
   }
 }
 
@@ -94,10 +123,14 @@ dl {
 }
 
 .status-results .response-option.correct {
-  color: green;
+  color: #3F3;
   font-weight: bold;
 }
 
-.status-results .response-option.correct + dd .results-background {
-  background-color: #393;
+.status-results .response-option.correct + dd {
+  border-color: #030;
+
+  .results-background {
+    background-color: #060;
+  }
 }

views/debug-layout.twig

@@ -9,7 +9,15 @@
     <div class="debug-container">
       <header>
         <h1>{{title}}</h1>
-        <a href="/debug">3-up</a> | <a href="/debug/data">Data dump</a> | <button id="reload">Reload all clients</button>
+        <a href="/debug">3-up</a> | <a href="/debug/data">Data dump</a> |
+        <button id="reload">Reload all clients</button> |
+        <div id="voting-buttons" class="status-dependent vote voting-buttons">
+          Vote:
+          <button id="a">A</button>
+          <button id="b">B</button>
+          <button id="c">C</button>
+          <button id="d">D</button>
+        </div>
       </header>
       <main>
         {% block body %}{% endblock %}

views/participant.twig

@@ -1,6 +1,7 @@
 {% extends 'layout.twig' %}
 
 {% block css %}
+<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6795652/6119812/css/fonts.css" media="print" onload="this.media='all'" />
 <link rel='stylesheet' href='/stylesheets/participants.css' />
 {% endblock %}
 

views/present.twig

@@ -1,6 +1,7 @@
 {% extends 'layout.twig' %}
 
 {% block css %}
+<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6795652/6119812/css/fonts.css" media="print" onload="this.media='all'" />
 <link rel='stylesheet' href='/stylesheets/presenters.css' />
 {% endblock %}