Merge pull request #7 from dsinn/simon

Simon Says module

index.html

@@ -13,11 +13,11 @@
             <h2>Wires</h2>
 
             <ul id="wireOptions">
-                <li><button class="buttonRed" data-colour="red"></button></li>
-                <li><button class="buttonYellow" data-colour="yellow"></button></li>
-                <li><button class="buttonBlue" data-colour="blue"></button></li>
-                <li><button class="buttonWhite" data-colour="white"></button></li>
-                <li><button class="buttonBlack" data-colour="black"></button></li>
+                <li><button class="button red" data-colour="red"></button></li>
+                <li><button class="button yellow" data-colour="yellow"></button></li>
+                <li><button class="button blue" data-colour="blue"></button></li>
+                <li><button class="button white" data-colour="white"></button></li>
+                <li><button class="button black" data-colour="black"></button></li>
             </ul>
 
             <ul id="wireList"></ul>
@@ -27,10 +27,10 @@
             <h2>Button</h2>
             <div>
                 Colour:
-                <input type="radio" name="buttonColour" value="blue" id="buttonColourBlue" checked /> <label for="buttonColourBlue" class="buttonBlue">Blue</label>
-                <input type="radio" name="buttonColour" value="white" id="buttonColourWhite" /> <label for="buttonColourWhite" class="buttonWhite">White</label>
-                <input type="radio" name="buttonColour" value="yellow" id="buttonColourYellow" /> <label for="buttonColourYellow" class="buttonYellow">Yellow</label>
-                <input type="radio" name="buttonColour" value="red" id="buttonColourRed" /> <label for="buttonColourRed" class="buttonRed">Red</label>
+                <input type="radio" name="buttonColour" value="blue" id="buttonColourBlue" checked /> <label for="buttonColourBlue" class="button blue">Blue</label>
+                <input type="radio" name="buttonColour" value="white" id="buttonColourWhite" /> <label for="buttonColourWhite" class="button white">White</label>
+                <input type="radio" name="buttonColour" value="yellow" id="buttonColourYellow" /> <label for="buttonColourYellow" class="button yellow">Yellow</label>
+                <input type="radio" name="buttonColour" value="red" id="buttonColourRed" /> <label for="buttonColourRed" class="button red">Red</label>
             </div>
             <div>
                 Text:
@@ -43,13 +43,57 @@
             <div>
                 If holding the button and the strip colour is
                 <ul>
-                    <li><span class="buttonBlue">Blue</span>: release when timer has a <strong>4</strong> in any position.</li>
-                    <li><span class="buttonYellow">Yellow</span>: release when timer has a <strong>5</strong> in any position.</li>
+                    <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>
                 </ul>
             </div>
         </section>
 
+        <section id="sectionSimon">
+            <h2>Simon Says</h2>
+
+            <div id="simonInputs">
+                <input type="checkbox" id="simonVowel" /> <label for="simonVowel">Vowel</label>
+
+                <ul>
+                    <li>
+                        <input type="radio" name="simonStrikes" value="0" id="simonStrikes0" checked />
+                        <label for="simonStrikes0">0 strikes</label>
+                    </li>
+                    <li>
+                        <input type="radio" name="simonStrikes" value="1" id="simonStrikes1" />
+                        <label for="simonStrikes1">1 strike</label>
+                    </li>
+                    <li>
+                        <input type="radio" name="simonStrikes" value="2" id="simonStrikes2" />
+                        <label for="simonStrikes2">2 strikes</label>
+                    </li>
+                </ul>
+            </div>
+
+            <div id="simonBoard">
+                <div class="simonRow">
+                    <div class="blue">&nbsp;</div><div class="yellow">&nbsp;</div>
+                </div>
+                <div class="simonRow">
+                    <div class="red">&nbsp;</div><div class="green">&nbsp;</div>
+                </div>
+                <div class="arrow" id="arrowRB"></div>
+                <div class="arrow" id="arrowBR"></div>
+                <div class="arrow" id="arrowBY"></div>
+                <div class="arrow" id="arrowYB"></div>
+                <div class="arrow" id="arrowYG"></div>
+                <div class="arrow" id="arrowGY"></div>
+                <div class="arrow" id="arrowGR"></div>
+                <div class="arrow" id="arrowRG"></div>
+                <div class="arrow" id="arrowRY"></div>
+                <div class="arrow" id="arrowYR"></div>
+                <div class="arrow" id="arrowBG"></div>
+                <div class="arrow" id="arrowGB"></div>
+            </div>
+        </section>
+
         <section id="sectionDisplay">
             <h2>Who's on First</h2>
 
@@ -264,15 +308,15 @@
         <section id="sectionSequence">
             <h2>Wire Sequence</h2>
             <ul id="sequenceOptions">
-                <li><button class="buttonRed" data-colour="red" data-letter="A">A</button></li>
-                <li><button class="buttonBlue" data-colour="blue" data-letter="A">A</button></li>
-                <li><button class="buttonBlack" data-colour="black" data-letter="A">A</button></li>
-                <li><button class="buttonRed" data-colour="red" data-letter="B">B</button></li>
-                <li><button class="buttonBlue" data-colour="blue" data-letter="B">B</button></li>
-                <li><button class="buttonBlack" data-colour="black" data-letter="B">B</button></li>
-                <li><button class="buttonRed" data-colour="red" data-letter="C">C</button></li>
-                <li><button class="buttonBlue" data-colour="blue" data-letter="C">C</button></li>
-                <li><button class="buttonBlack" data-colour="black" data-letter="C">C</button></li>
+                <li><button class="button red" data-colour="red" data-letter="A">A</button></li>
+                <li><button class="button blue" data-colour="blue" data-letter="A">A</button></li>
+                <li><button class="button black" data-colour="black" data-letter="A">A</button></li>
+                <li><button class="button red" data-colour="red" data-letter="B">B</button></li>
+                <li><button class="button blue" data-colour="blue" data-letter="B">B</button></li>
+                <li><button class="button black" data-colour="black" data-letter="B">B</button></li>
+                <li><button class="button red" data-colour="red" data-letter="C">C</button></li>
+                <li><button class="button blue" data-colour="blue" data-letter="C">C</button></li>
+                <li><button class="button black" data-colour="black" data-letter="C">C</button></li>
             </ul>
             <ul id="sequenceInstruction"></ul>
         </section>
@@ -305,4 +349,4 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
         <script src="ktane.js"></script>
     </body>
-</html>
+</html>

ktane.css

@@ -22,31 +22,39 @@ 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 {
+section .active { /* ugh, specificity */
     opacity: 1;
 }
 .inactive {
@@ -108,6 +116,115 @@ h2 {
     border-width: 1px;
 }
 
+#simonInputs {
+    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 */
+    position: relative;
+    transform: rotate(45deg);
+}
+#simonBoard > div > div {
+    border: 2px solid black;
+    display: inline-block;
+    height: 64px;
+    width: 64px;
+}
+#simonBoard > .simonRow:first-child > div {
+    border-top-width: 4px;
+}
+#simonBoard > .simonRow:first-child + div > div {
+    border-bottom-width: 4px;
+}
+#simonBoard > .simonRow > div:first-child {
+    border-left-width: 4px;
+}
+#simonBoard > .simonRow > div:last-child {
+    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;
 }

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><button class="button' + colour.charAt(0).toUpperCase() + colour.substring(1)
-                        + '" data-colour="' + colour + '" data-letter="' + letter + '"></button></li>');
+            $li = $('<li><button class="button ' + colour + '" data-colour="' + colour
+                    + '" data-letter="' + letter + '"></button></li>');
 
         $wireList.append($li);
         count[colour]++;
@@ -166,6 +166,46 @@ $('.jsResetSection').on('click', function () {
     });
 })();
 
+(function () {
+    /**
+     * Simon
+     */
+    var $checkbox = $('#simonVowel'),
+        $strikeButtons = $('#sectionSimon input[name="simonStrikes"]'),
+        $arrows = [],
+        mappings = [ // (hasVowel, strikes) -> list of visible arrows by ID
+            // No vowel
+            [
+                ['RB', 'BY', 'YR'],
+                ['GY', 'YG'],
+                ['RY', 'BG', 'GB', 'YR']
+            ],
+            // Vowel
+            [
+                ['RB', 'BR', 'GY', 'YG'],
+                ['RY', 'BG', 'GB', 'YR'],
+                ['RG', 'BR', 'GY', 'YB']
+            ]
+        ];
+
+    $('#simonBoard').find('.arrow').each(function (i, arrow) {
+        $arrows[arrow.id.replace(/^.*(?=..$)/, '')] = $(arrow);
+    });
+
+    $('#sectionSimon input').on('change', function () {
+        var hasVowel = +$checkbox.prop('checked'),
+            strikes = $strikeButtons.filter(':checked').val();
+
+        for (var id in $arrows) {
+            $arrows[id].removeClass('active');
+        }
+
+        $.each(mappings[hasVowel][strikes], function (i, id) {
+            $arrows[id].addClass('active');
+        });
+    }).first().trigger('change');
+})();
+
 (function () {
     /**
      * Memory
@@ -350,8 +390,8 @@ $('.jsResetSection').on('click', function () {
     $('#sequenceOptions button').on('click', function () {
         var colour = this.getAttribute('data-colour'),
                 letter = this.getAttribute('data-letter'),
-                $li = $('<li><button class="button' + colour.charAt(0).toUpperCase() + colour.substring(1)
-                        + '" data-colour="' + colour + '" data-letter="' + letter + '">' + letter + '</button></li>');
+                $li = $('<li><button class="button ' + colour + '" data-colour="' + colour + '" data-letter="' + letter
+                        + '">' + letter + '</button></li>');
 
         if (typeof occurrences[colour][count[colour]] !== 'undefined') {
             $li.append(occurrences[colour][count[colour]].indexOf(letter) === -1 ? 'Ignore' : 'Cut');