Add filter for Who's on First

Also change #sectionDisplay to #sectionWof for consistency with the manual.

index.html

@@ -94,155 +94,12 @@
             </div>
         </section>
 
-        <section id="sectionDisplay">
+        <section id="sectionWof">
             <h2>Who's on First</h2>
 
-            <dl id="displayList">
-                <dt>&nbsp;</dt>     <dd>bottom-left</dd>
-                <dt>BLANK</dt>      <dd>middle-right</dd>
-                <dt>C</dt>          <dd>top-right</dd>
-                <dt>CEE</dt>        <dd>bottom-right</dd>
-                <dt>DISPLAY</dt>    <dd>bottom-right</dd>
-                <dt>FIRST</dt>      <dd>top-right</dd>
-                <dt>HOLD ON</dt>    <dd>bottom-right</dd>
-                <dt>LEAD</dt>       <dd>bottom-right</dd>
-                <dt>LED</dt>        <dd>middle-left</dd>
-                <dt>LEED</dt>       <dd>bottom-left</dd>
-                <dt>NO</dt>         <dd>bottom-right</dd>
-                <dt>NOTHING</dt>    <dd>middle-left</dd>
-                <dt>OKAY</dt>       <dd>top-right</dd>
-                <dt>READ</dt>       <dd>middle-right</dd>
-                <dt>RED</dt>        <dd>middle-right</dd>
-                <dt>REED</dt>       <dd>bottom-left</dd>
-                <dt>SAYS</dt>       <dd>bottom-right</dd>
-                <dt>SEE</dt>        <dd>bottom-right</dd>
-                <dt>U</dt>          <dd>top-left</dd>
-                <dt>UR</dt>         <dd>top-left</dd>
-                <dt>THEIR</dt>      <dd>middle-right</dd>
-                <dt>THERE</dt>      <dd>bottom-right</dd>
-                <dt>THEY ARE</dt>   <dd>middle-left</dd>
-                <dt>THEY'RE</dt>    <dd>bottom-left</dd>
-                <dt>YES</dt>        <dd>middle-left</dd>
-                <dt>YOU</dt>        <dd>middle-right</dd>
-                <dt>YOU ARE</dt>    <dd>bottom-right</dd>
-                <dt>YOUR</dt>       <dd>middle-right</dd>
-                <dt>YOU'RE</dt>     <dd>middle-right</dd>
-            </dl>
-
-            <table id="displayTable">
-                <tr>
-                    <th>"BLANK":</th>
-                    <td>WAIT, RIGHT, OKAY, MIDDLE, BLANK</td>
-                </tr>
-                <tr>
-                    <th>"DONE":</th>
-                    <td>SURE, UH HUH, NEXT, WHAT?, YOUR, UR, YOU'RE, HOLD, LIKE, YOU, U, YOU ARE, UH UH, DONE</td>
-                </tr>
-                <tr>
-                    <th>"FIRST":</th>
-                    <td>LEFT, OKAY, YES, MIDDLE, NO, RIGHT, NOTHING, UHHH, WAIT, READY, BLANK, WHAT, PRESS, FIRST</td>
-                </tr>
-                <tr>
-                    <th>"HOLD":</th>
-                    <td>YOU ARE, U, DONE, UH UH, YOU, UR, SURE, WHAT?, YOU'RE, NEXT, HOLD</td>
-                </tr>
-                <tr>
-                    <th>"LEFT":</th>
-                    <td>RIGHT, LEFT</td>
-                </tr>
-                <tr>
-                    <th>"LIKE":</th>
-                    <td>YOU'RE, NEXT, U, UR, HOLD, DONE, UH UH, WHAT?, UH HUH, YOU, LIKE</td>
-                </tr>
-                <tr>
-                    <th>"MIDDLE":</th>
-                    <td>BLANK, READY, OKAY, WHAT, NOTHING, PRESS, NO, WAIT, LEFT, MIDDLE</td>
-                </tr>
-                <tr>
-                    <th>"NEXT":</th>
-                    <td>WHAT?, UH HUH, UH UH, YOUR, HOLD, SURE, NEXT</td>
-                </tr>
-                <tr>
-                    <th>"NO":</th>
-                    <td>BLANK, UHHH, WAIT, FIRST, WHAT, READY, RIGHT, YES, NOTHING, LEFT, PRESS, OKAY, NO</td>
-                </tr>
-                <tr>
-                    <th>"NOTHING":</th>
-                    <td>UHHH, RIGHT, OKAY, MIDDLE, YES, BLANK, NO, PRESS, LEFT, WHAT, WAIT, FIRST, NOTHING</td>
-                </tr>
-                <tr>
-                    <th>"OKAY":</th>
-                    <td>MIDDLE, NO, FIRST, YES, UHHH, NOTHING, WAIT, OKAY</td>
-                </tr>
-                <tr>
-                    <th>"PRESS":</th>
-                    <td>RIGHT, MIDDLE, YES, READY, PRESS</td>
-                </tr>
-                <tr>
-                    <th>"READY":</th>
-                    <td>YES, OKAY, WHAT, MIDDLE, LEFT, PRESS, RIGHT, BLANK, READY</td>
-                </tr>
-                <tr>
-                    <th>"RIGHT":</th>
-                    <td>YES, NOTHING, READY, PRESS, NO, WAIT, WHAT, RIGHT</td>
-                </tr>
-                <tr>
-                    <th>"SURE":</th>
-                    <td>YOU ARE, DONE, LIKE, YOU'RE, YOU, HOLD, UH HUH, UR, SURE</td>
-                </tr>
-                <tr>
-                    <th>"U":</th>
-                    <td>UH HUH, SURE, NEXT, WHAT?, YOU'RE, UR, UH UH, DONE, U</td>
-                </tr>
-                <tr>
-                    <th>"UH HUH":</th>
-                    <td>UH HUH</td>
-                </tr>
-                <tr>
-                    <th>"UH UH":</th>
-                    <td>UR, U, YOU ARE, YOU'RE, NEXT, UH UH</td>
-                </tr>
-                <tr>
-                    <th>"UHHH":</th>
-                    <td>READY, NOTHING, LEFT, WHAT, OKAY, YES, RIGHT, NO, PRESS, BLANK, UHHH</td>
-                </tr>
-                <tr>
-                    <th>"UR":</th>
-                    <td>DONE, U, UR</td>
-                </tr>
-                <tr>
-                    <th>"WAIT":</th>
-                    <td>UHHH, NO, BLANK, OKAY, YES, LEFT, FIRST, PRESS, WHAT, WAIT</td>
-                </tr>
-                <tr>
-                    <th>"WHAT":</th>
-                    <td>UHHH, WHAT</td>
-                </tr>
-                <tr>
-                    <th>"WHAT?":</th>
-                    <td>YOU, HOLD, YOU'RE, YOUR, U, DONE, UH UH, LIKE, YOU ARE, UH HUH, UR, NEXT, WHAT?</td>
-                </tr>
-                <tr>
-                    <th>"YES":</th>
-                    <td>OKAY, RIGHT, UHHH, MIDDLE, FIRST, WHAT, PRESS, READY, NOTHING, YES</td>
-                </tr>
-                <tr>
-                    <th>"YOU ARE":</th>
-                    <td>YOUR, NEXT, LIKE, UH HUH, WHAT?, DONE, UH UH, HOLD, YOU, U, YOU'RE, SURE, UR</td>
-                </tr>
-                <tr>
-                    <th>"YOU":</th>
-                    <td>SURE, YOU ARE, YOUR, YOU'RE, NEXT, UH HUH, UR, HOLD, WHAT?, YOU</td>
-                </tr>
-                <tr>
-                    <th>"YOU'RE":</th>
-                    <td>YOU, YOU'RE</td>
-                </tr>
-                <tr>
-                    <th>"YOUR":</th>
-                    <td>UH UH, YOU ARE, UH HUH, YOUR</td>
-                </tr>
-            </table>
+            <div><input type="text" id="wofInput" /></div>
+            <dl id="wofList"></dl>
+            <table id="wofTable"></table>
         </section>
 
         <section id="sectionMemory">

ktane.css

@@ -225,20 +225,20 @@ h2 {
     transform: rotate(-135deg);
 }
 
-#sectionDisplay {
+#sectionWof {
     white-space: nowrap;
 }
-#sectionDisplay dl, #sectionDisplay table {
+#sectionWof dl, #sectionWof table {
     display: inline-block;
     margin-bottom: 1em;
 }
-#sectionDisplay.collapsed dl, #sectionDisplay.collapsed table {
+#sectionWof.collapsed dl, #sectionWof.collapsed table {
     display: none;
 }
-#sectionDisplay dl {
+#sectionWof dl {
     margin-right: 4em;
 }
-#sectionDisplay dt {
+#sectionWof dt {
     background-color: black;
     clear: left;
     color: white;
@@ -246,18 +246,21 @@ h2 {
     text-align: center;
     width: 6em;
 }
-#sectionDisplay dd {
+#sectionWof dd {
     margin-bottom: 0.4em;
     margin-left: 0;
 }
-#sectionDisplay dt, #sectionDisplay dd {
+#sectionWof dt, #sectionWof dd {
     display: inline-block;
     float: left;
 }
-#sectionDisplay table {
+#sectionWof dt.inactive + dd {
+    opacity: 0;
+}
+#sectionWof table {
     margin-left: 0.5em;
 }
-#sectionDisplay th {
+#sectionWof th {
     border: 1px solid black;
 }
 

ktane.js

@@ -206,6 +206,122 @@ $('.jsResetSection').on('click', function () {
     }).first().trigger('change');
 })();
 
+(function () {
+    /**
+     * Who's on First
+     */
+    var TL = 'top-left',
+        TR = 'top-right',
+        ML = 'middle-left',
+        MR = 'middle-right',
+        BL = 'bottom-left',
+        BR = 'bottom-right',
+        displays = {
+            '\u00a0': BL,
+            'BLANK': MR,
+            'C': TR,
+            'CEE': BR,
+            'DISPLAY': BR,
+            'FIRST': TR,
+            'HOLD ON': BR,
+            'LEAD': BR,
+            'LED': ML,
+            'LEED': BL,
+            'NO': BR,
+            'NOTHING': ML,
+            'OKAY': TR,
+            'READ': MR,
+            'RED': MR,
+            'REED': BL,
+            'SAYS': BR,
+            'SEE': BR,
+            'U': TL,
+            'UR': TL,
+            'THEIR': MR,
+            'THERE': BR,
+            'THEY ARE': ML,
+            'THEY\'RE': BL,
+            'YES': ML,
+            'YOU': MR,
+            'YOU ARE': BR,
+            'YOUR': MR,
+            'YOU\'RE': MR
+        },
+        sequence = {
+            'BLANK': 'WAIT, RIGHT, OKAY, MIDDLE, BLANK',
+            'DONE': 'SURE, UH HUH, NEXT, WHAT?, YOUR, UR, YOU\'RE, HOLD, LIKE, YOU, U, YOU ARE, UH UH, DONE',
+            'FIRST': 'LEFT, OKAY, YES, MIDDLE, NO, RIGHT, NOTHING, UHHH, WAIT, READY, BLANK, WHAT, PRESS, FIRST',
+            'HOLD': 'YOU ARE, U, DONE, UH UH, YOU, UR, SURE, WHAT?, YOU\'RE, NEXT, HOLD',
+            'LEFT': 'RIGHT, LEFT',
+            'LIKE': 'YOU\'RE, NEXT, U, UR, HOLD, DONE, UH UH, WHAT?, UH HUH, YOU, LIKE',
+            'MIDDLE': 'BLANK, READY, OKAY, WHAT, NOTHING, PRESS, NO, WAIT, LEFT, MIDDLE',
+            'NEXT': 'WHAT?, UH HUH, UH UH, YOUR, HOLD, SURE, NEXT',
+            'NO': 'BLANK, UHHH, WAIT, FIRST, WHAT, READY, RIGHT, YES, NOTHING, LEFT, PRESS, OKAY, NO',
+            'NOTHING': 'UHHH, RIGHT, OKAY, MIDDLE, YES, BLANK, NO, PRESS, LEFT, WHAT, WAIT, FIRST, NOTHING',
+            'OKAY': 'MIDDLE, NO, FIRST, YES, UHHH, NOTHING, WAIT, OKAY',
+            'PRESS': 'RIGHT, MIDDLE, YES, READY, PRESS',
+            'READY': 'YES, OKAY, WHAT, MIDDLE, LEFT, PRESS, RIGHT, BLANK, READY',
+            'RIGHT': 'YES, NOTHING, READY, PRESS, NO, WAIT, WHAT, RIGHT',
+            'SURE': 'YOU ARE, DONE, LIKE, YOU\'RE, YOU, HOLD, UH HUH, UR, SURE',
+            'U': 'UH HUH, SURE, NEXT, WHAT?, YOU\'RE, UR, UH UH, DONE, U',
+            'UH HUH': 'UH HUH',
+            'UH UH': 'UR, U, YOU ARE, YOU\'RE, NEXT, UH UH',
+            'UHHH': 'READY, NOTHING, LEFT, WHAT, OKAY, YES, RIGHT, NO, PRESS, BLANK, UHHH',
+            'UR': 'DONE, U, UR',
+            'WAIT': 'UHHH, NO, BLANK, OKAY, YES, LEFT, FIRST, PRESS, WHAT, WAIT',
+            'WHAT': 'UHHH, WHAT',
+            'WHAT?': 'YOU, HOLD, YOU\'RE, YOUR, U, DONE, UH UH, LIKE, YOU ARE, UH HUH, UR, NEXT, WHAT?',
+            'YES': 'OKAY, RIGHT, UHHH, MIDDLE, FIRST, WHAT, PRESS, READY, NOTHING, YES',
+            'YOU ARE': 'YOUR, NEXT, LIKE, UH HUH, WHAT?, DONE, UH UH, HOLD, YOU, U, YOU\'RE, SURE, UR',
+            'YOU': 'SURE, YOU ARE, YOUR, YOU\'RE, NEXT, UH HUH, UR, HOLD, WHAT?, YOU',
+            'YOU\'RE': 'YOU, YOU\'RE',
+            'YOUR': 'UH UH, YOU ARE, UH HUH, YOUR'
+        },
+        $list = $('#wofList'),
+        $table = $('#wofTable'),
+        $displays = {},
+        $rows = {};
+
+    $.each(displays, function (word, location) {
+        var $dt = $('<dt>' + word + '</dt>');
+        $list.append($dt)
+            .append($('<dd>' + location + '</dd>'));
+        $displays[word] = $dt;
+    });
+
+    $.each(sequence, function (word, sequence) {
+        var $row = $('<tr></tr>')
+            .append('<th>"' + word + '":</th>')
+            .append('<td>' + sequence + '</td>');
+        $table.append($row);
+        $rows[word] = $row;
+    });
+
+    $('#wofInput').on('keyup', function () {
+        var value = this.value.replace(/^ +| +|[^A-Za-z']$/, '').toUpperCase();
+        this.value = value;
+
+        $.each($displays, function (word, $dt) {
+            $dt.removeClass('inactive');
+        });
+        $.each($rows, function (word, $row) {
+            $row.removeClass('inactive');
+        });
+
+        if (!value) {
+            return;
+        }
+
+        $.each($displays, function (word, $dt) {
+            word.indexOf(value) !== 0 && $dt.addClass('inactive');
+        });
+
+        $.each($rows, function (word, $row) {
+            word.indexOf(value) !== 0 && $row.addClass('inactive');
+        });
+    });
+})();
+
 (function () {
     /**
      * Memory