Add Keypads module

index.html

@@ -50,6 +50,11 @@
             </div>
         </section>
 
+        <section id="sectionKeypads">
+            <h2>Keypads</h2>
+            <div><button class="jsResetSection">Reset</button></div>
+        </section>
+
         <section id="sectionSimon">
             <h2>Simon Says</h2>
 

ktane.css

@@ -116,6 +116,26 @@ h2 {
     border-width: 1px;
 }
 
+#sectionKeypads ul {
+    display: inline-block;
+    list-style-type: none;
+    margin-right: 2em;
+    padding-left: 0;
+}
+#sectionKeypads li {
+    border: 1px solid black;
+    border-bottom: 0;
+}
+#sectionKeypads li:last-child {
+    border-bottom: 1px solid black;
+}
+#sectionKeypads .selected {
+    background: #ff6;
+}
+#sectionKeypads ul[data-count='4'] .selected {
+    background: lightgreen;
+}
+
 #simonInputs {
     float: left;
     margin-right: 5em;

ktane.js

@@ -9,6 +9,7 @@ $('h2').on('dblclick', function () {
 
 ktane.resetInputs = function ($container) {
     $container.find('textarea').val('');
+    $container.find('.selected').removeClass('selected');
 
     return $container.find('input').each(function () {
         if (this.type === 'text') {
@@ -166,6 +167,54 @@ $('.jsResetSection').on('click', function () {
     });
 })();
 
+(function () {
+    /**
+     * Keypads
+     */
+    var columns = [
+        ['balloon', 'at', 'upsidedowny', 'squigglyn', 'squidknife', 'hookn', 'leftc'],
+        ['euro', 'balloon', 'leftc', 'cursive', 'hollowstar', 'hookn', 'questionmark'],
+        ['copyright', 'pumpkin', 'cursive', 'doublek', 'meltedthree', 'upsidedowny', 'hollowstar'],
+        ['six', 'paragraph', 'bt', 'squidknife', 'doublek', 'questionmark', 'smileyface'],
+        ['pitchfork', 'smileyface', 'bt', 'rightc', 'paragraph', 'dragon', 'filledstar'],
+        ['six', 'euro', 'tracks', 'ae', 'pitchfork', 'nwithhat', 'omega']
+    ],
+        $section = $('#sectionKeypads'),
+        $imageLists = {}; // name -> $('<img />')[]
+
+    $.each(columns, function (i, column) {
+        var $column = $('<ul data-count="0"></ul>');
+        $section.append($column);
+
+        $.each(column, function (i, name) {
+            var $img = $('<img data-name="' + name + '" src="keypads/' + name + '.png" width="64" height="64" />');
+            $column.append($('<li></li>').append($img));
+
+            name in $imageLists
+                ? $imageLists[name].push($img)
+                : $imageLists[name] = [$img];
+        });
+    });
+
+    $section.on('click', 'img', function () {
+        var $img = $(this),
+            name = $img.data('name'),
+            endState = !$img.hasClass('selected'),
+            offset = endState ? 1 : -1;
+
+        $.each($imageLists[name], function (i, $img) {
+            var $column = $img.parent().parent();
+            $img.toggleClass('selected', endState);
+            $column.attr('data-count', parseInt($column.attr('data-count'), 10) + offset);
+        });
+    });
+
+    $section.find('.jsResetSection').on('click', function () {
+        // Also need to reset the indices after removing .selected
+        $section.find('ul').attr('data-count', 0);
+    });
+})();
+
 (function () {
     /**
      * Simon