Add Simon functionality with ugly arrows

index.html

@@ -79,8 +79,19 @@
                 <div>
                     <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">
@@ -338,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

@@ -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;
 }

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');
+        });
     });
 })();