diff --git a/index.html b/index.html index c0fd16c..2431659 100755 --- a/index.html +++ b/index.html @@ -50,6 +50,11 @@ +
+

Keypads

+
+
+

Simon Says

diff --git a/keypads/ae.png b/keypads/ae.png new file mode 100644 index 0000000..3f523bd Binary files /dev/null and b/keypads/ae.png differ diff --git a/keypads/at.png b/keypads/at.png new file mode 100644 index 0000000..674dede Binary files /dev/null and b/keypads/at.png differ diff --git a/keypads/balloon.png b/keypads/balloon.png new file mode 100644 index 0000000..7fb016c Binary files /dev/null and b/keypads/balloon.png differ diff --git a/keypads/bt.png b/keypads/bt.png new file mode 100644 index 0000000..4ffd5c0 Binary files /dev/null and b/keypads/bt.png differ diff --git a/keypads/copyright.png b/keypads/copyright.png new file mode 100644 index 0000000..3ee2e59 Binary files /dev/null and b/keypads/copyright.png differ diff --git a/keypads/cursive.png b/keypads/cursive.png new file mode 100644 index 0000000..9f5bd48 Binary files /dev/null and b/keypads/cursive.png differ diff --git a/keypads/doublek.png b/keypads/doublek.png new file mode 100644 index 0000000..2d770ce Binary files /dev/null and b/keypads/doublek.png differ diff --git a/keypads/dragon.png b/keypads/dragon.png new file mode 100644 index 0000000..a571ab1 Binary files /dev/null and b/keypads/dragon.png differ diff --git a/keypads/euro.png b/keypads/euro.png new file mode 100644 index 0000000..ee7a615 Binary files /dev/null and b/keypads/euro.png differ diff --git a/keypads/filledstar.png b/keypads/filledstar.png new file mode 100644 index 0000000..67cdcdd Binary files /dev/null and b/keypads/filledstar.png differ diff --git a/keypads/hollowstar.png b/keypads/hollowstar.png new file mode 100644 index 0000000..7ef26e8 Binary files /dev/null and b/keypads/hollowstar.png differ diff --git a/keypads/hookn.png b/keypads/hookn.png new file mode 100644 index 0000000..4b46379 Binary files /dev/null and b/keypads/hookn.png differ diff --git a/keypads/leftc.png b/keypads/leftc.png new file mode 100644 index 0000000..b0cade5 Binary files /dev/null and b/keypads/leftc.png differ diff --git a/keypads/meltedthree.png b/keypads/meltedthree.png new file mode 100644 index 0000000..fc1d4a2 Binary files /dev/null and b/keypads/meltedthree.png differ diff --git a/keypads/nwithhat.png b/keypads/nwithhat.png new file mode 100644 index 0000000..3bf01ee Binary files /dev/null and b/keypads/nwithhat.png differ diff --git a/keypads/omega.png b/keypads/omega.png new file mode 100644 index 0000000..fe0df61 Binary files /dev/null and b/keypads/omega.png differ diff --git a/keypads/paragraph.png b/keypads/paragraph.png new file mode 100644 index 0000000..51b85cb Binary files /dev/null and b/keypads/paragraph.png differ diff --git a/keypads/pitchfork.png b/keypads/pitchfork.png new file mode 100644 index 0000000..2ed159a Binary files /dev/null and b/keypads/pitchfork.png differ diff --git a/keypads/pumpkin.png b/keypads/pumpkin.png new file mode 100644 index 0000000..210c7d3 Binary files /dev/null and b/keypads/pumpkin.png differ diff --git a/keypads/questionmark.png b/keypads/questionmark.png new file mode 100644 index 0000000..5fe397c Binary files /dev/null and b/keypads/questionmark.png differ diff --git a/keypads/rightc.png b/keypads/rightc.png new file mode 100644 index 0000000..24c550b Binary files /dev/null and b/keypads/rightc.png differ diff --git a/keypads/six.png b/keypads/six.png new file mode 100644 index 0000000..0054a6e Binary files /dev/null and b/keypads/six.png differ diff --git a/keypads/smileyface.png b/keypads/smileyface.png new file mode 100644 index 0000000..9350efc Binary files /dev/null and b/keypads/smileyface.png differ diff --git a/keypads/squidknife.png b/keypads/squidknife.png new file mode 100644 index 0000000..ad6299b Binary files /dev/null and b/keypads/squidknife.png differ diff --git a/keypads/squigglyn.png b/keypads/squigglyn.png new file mode 100644 index 0000000..a6a3a38 Binary files /dev/null and b/keypads/squigglyn.png differ diff --git a/keypads/tracks.png b/keypads/tracks.png new file mode 100644 index 0000000..dd2987d Binary files /dev/null and b/keypads/tracks.png differ diff --git a/keypads/upsidedowny.png b/keypads/upsidedowny.png new file mode 100644 index 0000000..7f7f6ca Binary files /dev/null and b/keypads/upsidedowny.png differ diff --git a/ktane.css b/ktane.css index 4b809be..fd27b0b 100755 --- a/ktane.css +++ b/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; diff --git a/ktane.js b/ktane.js index 9739d91..208dcae 100755 --- a/ktane.js +++ b/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 -> $('')[] + + $.each(columns, function (i, column) { + var $column = $(''); + $section.append($column); + + $.each(column, function (i, name) { + var $img = $(''); + $column.append($('
  • ').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