Merge pull request #14 from dsinn/button-module-text

More concise button module text

index.html

@@ -45,11 +45,11 @@
             </div>
             <div id="buttonInstruction"></div>
             <div>
-                If holding the button and the strip colour is
+                If holding button, release when the timer contains the digit that corresponds to the strip colour:
                 <ul>
-                    <li><span class="button blue">Blue</span>: release when timer has a <strong>4</strong> in any position.</li>
-                    <li><span class="button yellow">Yellow</span>: release when timer has a <strong>5</strong> in any position.</li>
-                    <li>Other: release when timer has a <strong>1</strong> in any position.</li>
+                    <li><span class="button blue">Blue</span>: &nbsp; 4</li>
+                    <li><span class="button yellow">Yellow</span>: 5</li>
+                    <li><span class="button">Other</span>: &nbsp;1</li>
                 </ul>
             </div>
         </section>

ktane.css

@@ -50,6 +50,16 @@ button {
     background-color: black;
     color: white;
 }
+.litIndicator {
+    color: white;
+    border: 1px outset red;
+    text-shadow: 0px 0px 3px yellow,0px 0px 3px yellow;
+    background: black;
+    padding: 0 3px 3px;
+}
+.litIndicator:before {
+    content: '\2022\a0';
+}
 .button.white {
     border: 1px solid black;
 }
@@ -130,6 +140,10 @@ nav {
     border-style: solid;
     border-width: 1px;
 }
+#buttonInstruction {
+    background-color: #ddd;
+    padding: 0.5em;
+}
 
 #sectionKeypads ul {
     display: inline-block;

ktane.js

@@ -163,20 +163,20 @@ $('section').each(function () {
                 text = $('input[name="buttonText"]:checked').val();
 
         if (text === 'Detonate') {
-            instruction = 'If there is more than 1 battery, press and release; otherwise, hold the button.'
+            instruction = 'If 2+ \ud83d\udd0b, press and release.<br />Otherwise, hold button.'
         } else if (colour === 'white') {
-            instruction = 'If there is a lit indicator with label CAR, hold the button. Otherwise, if there are more than 2 batteries and a lit indicator with label FRK, press and release the button. If neither apply, hold the button.'
+            instruction = 'If <span class="litIndicator" title="Lit indicator">CAR</span>, hold button.<br />Otherwise, if 3+ \ud83d\udd0b and <span class="litIndicator" title="Lit indicator">FRK</span>, press and release.<br />Otherwise, hold button.'
         } else if (colour === 'blue' && text === 'Abort'
                 || colour === 'yellow') {
-            instruction = 'Hold the button.';
+            instruction = 'Hold button.';
         } else if (colour === 'red' && text === 'Hold') {
-            instruction = 'Press and release the button.';
+            instruction = 'Press and release.';
         } else {
-            instruction = 'If there are more than 2 batteries and a lit indicator with label FRK, press and release the button; otherwise, hold the button.';
+            instruction = 'If 3+ \ud83d\udd0b and <span class="litIndicator" title="Lit indicator">FRK</span>, press and release the button.<br />Otherwise, hold button.';
         }
 
         $instruction.html(instruction);
-    });
+    }).triggerHandler('click');
 })();
 
 (function () {