From 302cff7f89b4b7e110fabc0e9a409d5ebbc46370 Mon Sep 17 00:00:00 2001 From: Daniel Sinn Date: Sun, 29 Nov 2015 16:14:01 -0500 Subject: [PATCH 1/7] Initial template for the Simon module * Make colour classes more reusable --- index.html | 73 +++++++++++++++++++++++++++++++++++++++--------------- ktane.css | 50 +++++++++++++++++++++++++++++++------ ktane.js | 4 +-- 3 files changed, 98 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 7a4e456..ec9498e 100755 --- a/index.html +++ b/index.html @@ -13,11 +13,11 @@

Wires

@@ -27,10 +27,10 @@

Button

Colour: - - - - + + + +
Text: @@ -43,13 +43,46 @@
If holding the button and the strip colour is
    -
  • Blue: release when timer has a 4 in any position.
    • -
  • Yellow: release when timer has a 5 in any position.
    • +
  • Blue: release when timer has a 4 in any position.
    • +
  • Yellow: release when timer has a 5 in any position.
  • Other: release when timer has a 1 in any position.
+
+

Simon Says

+ +
+ + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ +
+
+
 
 
+
+
+
 
 
+
+
+ +
+

Display

@@ -264,15 +297,15 @@

Wire Sequence

    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    diff --git a/ktane.css b/ktane.css index ebf9b72..91d6330 100755 --- a/ktane.css +++ b/ktane.css @@ -22,29 +22,37 @@ button { border-width: 1px; } -.buttonRed, .buttonYellow, .buttonBlue, .buttonWhite, .buttonBlack { - color: black; +.button { padding: 0.2em; } -.buttonRed { +.red { background-color: red; color: white; } -.buttonYellow { +.yellow { background-color: yellow; + color: black; } -.buttonBlue { +.blue { background-color: blue; color: white; } -.buttonWhite { +.green { + background-color: green; + color: white; +} +.white { background-color: white; border-color: black; + color: black; } -.buttonBlack { +.black { background-color: black; color: white; } +.button.white { + border: 1px solid black; +} .active { opacity: 1; @@ -108,6 +116,34 @@ h2 { border-width: 1px; } +#simonInputs { + float: left; + margin-right: 5em; +} +#simonBoard { + display: inline-block; + padding-bottom: 40px; /* Compensate for height increase as a result of rotation */ + transform: rotate(45deg); +} +#simonBoard > div > div { + border: 2px solid black; + display: inline-block; + height: 64px; + width: 64px; +} +#simonBoard > div:first-child > div { + border-top-width: 4px; +} +#simonBoard > div:last-child > div { + border-bottom-width: 4px; +} +#simonBoard > div > div:first-child { + border-left-width: 4px; +} +#simonBoard > div > div:last-child { + border-right-width: 4px; +} + #sectionDisplay { white-space: nowrap; } diff --git a/ktane.js b/ktane.js index 45c63aa..fcd99e1 100755 --- a/ktane.js +++ b/ktane.js @@ -350,8 +350,8 @@ $('.jsResetSection').on('click', function () { $('#sequenceOptions button').on('click', function () { var colour = this.getAttribute('data-colour'), letter = this.getAttribute('data-letter'), - $li = $('
    • '); + $li = $('
    • '); if (typeof occurrences[colour][count[colour]] !== 'undefined') { $li.append(occurrences[colour][count[colour]].indexOf(letter) === -1 ? 'Ignore' : 'Cut'); From f7fc253724f17b6a93daa408b910f087846b3f67 Mon Sep 17 00:00:00 2001 From: Daniel Sinn Date: Sun, 29 Nov 2015 17:30:44 -0500 Subject: [PATCH 2/7] Attach events to Simon module; still waiting on arrows --- index.html | 2 +- ktane.js | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index ec9498e..26dc6ad 100755 --- a/index.html +++ b/index.html @@ -58,7 +58,7 @@
    • - +
    • diff --git a/ktane.js b/ktane.js index fcd99e1..b69cc9d 100755 --- a/ktane.js +++ b/ktane.js @@ -166,6 +166,22 @@ $('.jsResetSection').on('click', function () { }); })(); +(function () { + /** + * Simon + */ + var $checkbox = $('#simonVowel'), + $strikeButtons = $('#sectionSimon input[name="simonStrikes"]'); + + $('#sectionSimon input').on('change', function () { + var hasVowel = $checkbox.prop('checked'), + strikes = $strikeButtons.filter(':checked').val(); + + // Do something with arrows and stuff! + console.log({vowel: hasVowel, strikes: strikes}); + }); +})(); + (function () { /** * Memory From 4738021e9ef1fb075dab536cc9c04630c7d10457 Mon Sep 17 00:00:00 2001 From: Daniel Sinn Date: Sun, 29 Nov 2015 17:31:29 -0500 Subject: [PATCH 3/7] Quick-fix extra padding on Simon collapse --- ktane.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ktane.css b/ktane.css index 91d6330..c8dafcb 100755 --- a/ktane.css +++ b/ktane.css @@ -120,6 +120,9 @@ h2 { float: left; margin-right: 5em; } +.collapsed #simonBoard { + display: none; +} #simonBoard { display: inline-block; padding-bottom: 40px; /* Compensate for height increase as a result of rotation */ From 709571da3aa1ff2a8925cde4ac4280241abdae3f Mon Sep 17 00:00:00 2001 From: Daniel Sinn Date: Mon, 30 Nov 2015 01:20:52 -0500 Subject: [PATCH 4/7] Missed one place in the button colour refactor --- ktane.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ktane.js b/ktane.js index db22287..b35d0a6 100755 --- a/ktane.js +++ b/ktane.js @@ -42,8 +42,8 @@ $('.jsResetSection').on('click', function () { $('#wireOptions button').on('click', function () { var colour = this.getAttribute('data-colour'), letter = this.getAttribute('data-letter'), - $li = $('
      • '); + $li = $('
      • '); $wireList.append($li); count[colour]++; From a147fceea1be7da89722d4bd647e27171a0cbfbf Mon Sep 17 00:00:00 2001 From: Daniel Sinn Date: Mon, 14 Dec 2015 18:21:00 -0500 Subject: [PATCH 5/7] Add Simon functionality with ugly arrows --- index.html | 15 ++++++++-- ktane.css | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++- ktane.js | 33 +++++++++++++++++++--- 3 files changed, 121 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 2a3675a..aa87bce 100755 --- a/index.html +++ b/index.html @@ -79,8 +79,19 @@
       
       
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
      +
    -
    @@ -338,4 +349,4 @@ - \ No newline at end of file + diff --git a/ktane.css b/ktane.css index c8dafcb..b096ad0 100755 --- a/ktane.css +++ b/ktane.css @@ -54,7 +54,7 @@ button { border: 1px solid black; } -.active { +section .active { /* ugh, specificity */ opacity: 1; } .inactive { @@ -126,6 +126,7 @@ h2 { #simonBoard { display: inline-block; padding-bottom: 40px; /* Compensate for height increase as a result of rotation */ + position: relative; transform: rotate(45deg); } #simonBoard > div > div { @@ -147,6 +148,83 @@ h2 { border-right-width: 4px; } +.arrow { + background-color: magenta; + height: 10px; + width: 50px; + opacity: 0; + position: absolute; +} +.arrow::after { + content: ''; + border-top: 10px solid transparent; + border-left: 20px solid magenta; + border-bottom: 10px solid transparent; + height: 0; + width: 0; + margin-left: 50px; + position: absolute; + top: -5px; +} +#arrowRB { + top: 70px; + left: 10px; + transform: rotate(-90deg); +} +#arrowBR { + top: 60px; + left: 10px; + transform: rotate(90deg); +} +#arrowBY { + top: 30px; + left: 45px; +} +#arrowYB { + top: 30px; + left: 45px; + transform: rotate(180deg); +} +#arrowYG { + top: 60px; + left: 80px; + transform: rotate(90deg); +} +#arrowGY { + top: 70px; + left: 80px; + transform: rotate(-90deg); +} +#arrowGR { + top: 100px; + left: 45px; + transform: rotate(180deg); +} +#arrowRG { + top: 100px; + left: 45px; +} +#arrowRY { + top: 66px; + left: 44px; + transform: rotate(-45deg); +} +#arrowYR { + top: 66px; + left: 44px; + transform: rotate(135deg); +} +#arrowBG { + top: 64px; + left: 44px; + transform: rotate(45deg); +} +#arrowGB { + top: 64px; + left: 44px; + transform: rotate(-135deg); +} + #sectionDisplay { white-space: nowrap; } diff --git a/ktane.js b/ktane.js index b35d0a6..4ca36dd 100755 --- a/ktane.js +++ b/ktane.js @@ -171,14 +171,39 @@ $('.jsResetSection').on('click', function () { * Simon */ var $checkbox = $('#simonVowel'), - $strikeButtons = $('#sectionSimon input[name="simonStrikes"]'); + $strikeButtons = $('#sectionSimon input[name="simonStrikes"]'), + $board = $('#simonBoard'), + $arrows = [], + mappings = [ // (hasVowel, strikes) -> list of visible arrows + // No vowel + [ + ['RB', 'BY', 'YR'], + ['GY', 'YG'], + ['RY', 'BG', 'GB', 'YR'] + ], + // Vowel + [ + ['RB', 'BR', 'GY', 'YG'], + ['RY', 'BG', 'GB', 'YR'], + ['RG', 'BR', 'GY', 'YB'] + ] + ]; + + $board.find('.arrow').each(function (i, arrow) { + $arrows[arrow.id.replace(/^.*(?=..$)/, '')] = $(arrow); + }); $('#sectionSimon input').on('change', function () { - var hasVowel = $checkbox.prop('checked'), + var hasVowel = +$checkbox.prop('checked'), strikes = $strikeButtons.filter(':checked').val(); - // Do something with arrows and stuff! - console.log({vowel: hasVowel, strikes: strikes}); + for (var i in $arrows) { + $arrows[i].removeClass('active'); + } + + $.each(mappings[hasVowel][strikes], function (i, id) { + $arrows[id].addClass('active'); + }); }); })(); From c31e1ccfe49a1f45adc7935afb88b7ceb196f232 Mon Sep 17 00:00:00 2001 From: Daniel Sinn Date: Mon, 14 Dec 2015 18:36:51 -0500 Subject: [PATCH 6/7] Make Simon show arrows at the beginning --- ktane.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ktane.js b/ktane.js index 4ca36dd..c74b82c 100755 --- a/ktane.js +++ b/ktane.js @@ -172,7 +172,6 @@ $('.jsResetSection').on('click', function () { */ var $checkbox = $('#simonVowel'), $strikeButtons = $('#sectionSimon input[name="simonStrikes"]'), - $board = $('#simonBoard'), $arrows = [], mappings = [ // (hasVowel, strikes) -> list of visible arrows // No vowel @@ -189,7 +188,7 @@ $('.jsResetSection').on('click', function () { ] ]; - $board.find('.arrow').each(function (i, arrow) { + $('#simonBoard').find('.arrow').each(function (i, arrow) { $arrows[arrow.id.replace(/^.*(?=..$)/, '')] = $(arrow); }); @@ -204,7 +203,7 @@ $('.jsResetSection').on('click', function () { $.each(mappings[hasVowel][strikes], function (i, id) { $arrows[id].addClass('active'); }); - }); + }).first().trigger('change'); })(); (function () { From c183207bfc2ecab8470553822f77c3d53937a9fc Mon Sep 17 00:00:00 2001 From: Daniel Sinn Date: Tue, 15 Dec 2015 00:57:02 -0500 Subject: [PATCH 7/7] Fix Simon board borders and small JS inconsistency --- index.html | 4 ++-- ktane.css | 8 ++++---- ktane.js | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index aa87bce..c0fd16c 100755 --- a/index.html +++ b/index.html @@ -73,10 +73,10 @@
    -
    +
     
     
    -
    +
     
     
    diff --git a/ktane.css b/ktane.css index b096ad0..4b809be 100755 --- a/ktane.css +++ b/ktane.css @@ -135,16 +135,16 @@ h2 { height: 64px; width: 64px; } -#simonBoard > div:first-child > div { +#simonBoard > .simonRow:first-child > div { border-top-width: 4px; } -#simonBoard > div:last-child > div { +#simonBoard > .simonRow:first-child + div > div { border-bottom-width: 4px; } -#simonBoard > div > div:first-child { +#simonBoard > .simonRow > div:first-child { border-left-width: 4px; } -#simonBoard > div > div:last-child { +#simonBoard > .simonRow > div:last-child { border-right-width: 4px; } diff --git a/ktane.js b/ktane.js index c74b82c..9739d91 100755 --- a/ktane.js +++ b/ktane.js @@ -173,7 +173,7 @@ $('.jsResetSection').on('click', function () { var $checkbox = $('#simonVowel'), $strikeButtons = $('#sectionSimon input[name="simonStrikes"]'), $arrows = [], - mappings = [ // (hasVowel, strikes) -> list of visible arrows + mappings = [ // (hasVowel, strikes) -> list of visible arrows by ID // No vowel [ ['RB', 'BY', 'YR'], @@ -196,8 +196,8 @@ $('.jsResetSection').on('click', function () { var hasVowel = +$checkbox.prop('checked'), strikes = $strikeButtons.filter(':checked').val(); - for (var i in $arrows) { - $arrows[i].removeClass('active'); + for (var id in $arrows) { + $arrows[id].removeClass('active'); } $.each(mappings[hasVowel][strikes], function (i, id) {