Implement Simon Says module in React

index.html

@@ -13,50 +13,6 @@
 
         <h1>Keep Talking and Nobody Explodes</h1>
 
-        <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="simonBlue">&nbsp;</div><div class="simonYellow">&nbsp;</div>
-                </div>
-                <div class="simonRow">
-                    <div class="simonRed">&nbsp;</div><div class="simonGreen">&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="sectionWof">
             <h2>Who's on First</h2>
 

ktane.js

@@ -39,46 +39,6 @@ $('section').each(function () {
     id && $('#navList').append($('<li></li>').append($a));
 });
 
-(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 () {
     /**
      * Who's on First

src/App.css

@@ -108,127 +108,6 @@ nav {
     padding: 0.1em 0.5em;
 }
 
-#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;
-}
-.simonRed {
-    background: radial-gradient(#fb9a9a, #fc7373, red);
-}
-.simonYellow {
-    background: radial-gradient(#fbfb9a, #fcfc73, yellow);
-}
-.simonBlue {
-    background: radial-gradient(#9a9afb, #7373fc, blue);
-}
-.simonGreen {
-    background: radial-gradient(#98c998, #72b772, green);
-}
-
-.arrow {
-    background-color: black;
-    height: 10px;
-    width: 50px;
-    opacity: 0;
-    position: absolute;
-}
-.arrow::after {
-    content: '';
-    border-top: 10px solid transparent;
-    border-left: 20px solid black;
-    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);
-}
-
 #sectionWof {
     white-space: nowrap;
 }

src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 import ButtonModule from "./components/ButtonModule";
 import KeypadsModule from "./components/KeypadsModule";
+import SimonSaysModule from "./components/SimonSaysModule";
 import WiresModule from "./components/WiresModule";
 
 function App() {
@@ -14,6 +15,7 @@ function App() {
       <WiresModule id="sectionWires" />
       <ButtonModule id="sectionButton" />
       <KeypadsModule id="sectionKeypads" />
+      <SimonSaysModule id="sectionSimon" />
     </div>
   );
 }

src/components/KeypadsModule.js

@@ -114,10 +114,6 @@ export default class KeypadsModule extends KtaneModule {
     )
   }
 
-  resetState() {
-    this.setState(this.getInitialState());
-  }
-
   toggleHighlight(event) {
     this.keyColumnMap = this.keyColumnMap || this.computeKeyColumnMap();
 

src/components/SimonSaysModule.js

@@ -0,0 +1,87 @@
+import KtaneModule from "./KtaneModule";
+import React from "react";
+import "../css/SimonSaysModule.css";
+
+export default class SimonSaysModule extends KtaneModule {
+  constructor(props) {
+    super(props);
+
+    this.arrowsWithoutVowel = [
+      ["RB", "BY", "YR"],
+      ["GY", "YG"],
+      ["RY", "BG", "GB", "YR"],
+    ];
+    this.arrowsWithVowel = [
+      ["RB", "BR", "GY", "YG"],
+      ["RY", "BG", "GB", "YR"],
+      ["RG", "BR", "GY", "YB"],
+    ];
+
+    this.setStrikes = this.setStrikes.bind(this);
+    this.toggleVowel = this.toggleVowel.bind(this);
+  }
+
+  computeArrowsShown(state) {
+    return (state.hasVowel ? this.arrowsWithVowel : this.arrowsWithoutVowel)[this.state.strikes];
+  }
+
+  getInitialState() {
+    return {
+      hasVowel: false,
+      strikes: 0
+    };
+  }
+
+  getTitle() {
+    return "Simon Says";
+  }
+
+  mainRender() {
+    return (
+      <>
+        <div id="simonInputs">
+          <label>
+            <input type="checkbox" onChange={this.toggleVowel} /> Vowel
+          </label>
+
+          <ul>
+            {
+              [...Array(3).keys()].map(i => (
+                <li key={i}>
+                  <label>
+                    <input type="radio" checked={this.state.strikes === i} onChange={this.setStrikes} value={i} />
+                    {i} strikes
+                  </label>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+
+        <div id="simonBoard">
+          <div className="simonRow">
+            <div className="simonBlue">&nbsp;</div>
+            <div className="simonYellow">&nbsp;</div>
+          </div>
+          <div className="simonRow">
+            <div className="simonRed">&nbsp;</div>
+            <div className="simonGreen">&nbsp;</div>
+          </div>
+          {
+            this.computeArrowsShown(this.state).map(arrow => (
+              <div className="arrow" id={`arrow${arrow}`} key={arrow} />
+            ))
+          }
+        </div>
+      </>
+    )
+  }
+
+  setStrikes(event) {
+    this.setState({strikes: parseInt(event.currentTarget.value, 10)})
+  }
+
+  toggleVowel(event) {
+    this.setState(state => ({hasVowel: !state.hasVowel}));
+  }
+}

src/css/SimonSaysModule.css

@@ -0,0 +1,119 @@
+#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;
+}
+.simonRed {
+    background: radial-gradient(#fb9a9a, #fc7373, red);
+}
+.simonYellow {
+    background: radial-gradient(#fbfb9a, #fcfc73, yellow);
+}
+.simonBlue {
+    background: radial-gradient(#9a9afb, #7373fc, blue);
+}
+.simonGreen {
+    background: radial-gradient(#98c998, #72b772, green);
+}
+
+.arrow {
+    background-color: black;
+    height: 10px;
+    width: 50px;
+    position: absolute;
+}
+.arrow::after {
+    content: '';
+    border-top: 10px solid transparent;
+    border-left: 20px solid black;
+    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);
+}