Implement button module in React

index.html

@@ -13,33 +13,6 @@
 
         <h1>Keep Talking and Nobody Explodes</h1>
 
-        <section id="sectionButton">
-            <h2>Button</h2>
-            <div>
-                Colour:
-                <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:
-                <input type="radio" name="buttonText" value="Abort" id="buttonTextAbort" checked /> <label for="buttonTextAbort">Abort</label>
-                <input type="radio" name="buttonText" value="Detonate" id="buttonTextDetonate" /> <label for="buttonTextDetonate">Detonate</label>
-                <input type="radio" name="buttonText" value="Hold" id="buttonTextHold" /> <label for="buttonTextHold">Hold</label>
-                <input type="radio" name="buttonText" value="Press" id="buttonTextPress" /> <label for="buttonTextPress">Press</label>
-            </div>
-            <div class="instruction"></div>
-            <div>
-                If holding button, release when the timer contains the digit that corresponds to the strip colour:
-                <ul>
-                    <li><span class="button blue">Blue</span>: &nbsp; 4</li>
-                    <li><span class="button yellow">Yellow</span>: 5</li>
-                    <li><span class="button">Other</span>: &nbsp;1</li>
-                </ul>
-            </div>
-        </section>
-
         <section id="sectionKeypads">
             <h2>Keypads</h2>
             <button class="jsResetSection">Reset</button>

ktane.js

@@ -39,35 +39,6 @@ $('section').each(function () {
     id && $('#navList').append($('<li></li>').append($a));
 });
 
-(function () {
-    /**
-     * Button
-     */
-    var $section = $('#sectionButton'),
-            $instruction = $section.find('.instruction'),
-            instruction;
-
-    $section.find('input').on('click', function () {
-        var colour = $('input[name="buttonColour"]:checked').val(),
-                text = $('input[name="buttonText"]:checked').val();
-
-        if (text === 'Detonate') {
-            instruction = 'If 2+ \ud83d\udd0b, press and release.<br />Otherwise, hold button.'
-        } else if (colour === 'white') {
-            instruction = 'If <span class="litIndicator" title="Lit indicator">CAR</span>, hold button.<br />Otherwise, if 3+ \ud83d\udd0b and <span class="litIndicator" title="Lit indicator">FRK</span>, press and release.<br />Otherwise, hold button.'
-        } else if (colour === 'blue' && text === 'Abort'
-                || colour === 'yellow') {
-            instruction = 'Hold button.';
-        } else if (colour === 'red' && text === 'Hold') {
-            instruction = 'Press and release.';
-        } else {
-            instruction = 'If 3+ \ud83d\udd0b and <span class="litIndicator" title="Lit indicator">FRK</span>, press and release the button.<br />Otherwise, hold button.';
-        }
-
-        $instruction.html(instruction);
-    }).triggerHandler('click');
-})();
-
 (function () {
     /**
      * Keypads

src/App.css

@@ -112,17 +112,6 @@ nav {
     padding: 0.1em 0.5em;
 }
 
-#sectionButton {
-    line-height: 150%;
-}
-#sectionButton div {
-    margin-bottom: 1em;
-}
-#sectionButton .buttonWhite {
-    border-style: solid;
-    border-width: 1px;
-}
-
 #sectionKeypads ul {
     display: inline-block;
     list-style-type: none;

src/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import './App.css';
+import ButtonModule from "./components/ButtonModule";
 import WiresModule from "./components/WiresModule";
 
 function App() {
@@ -9,7 +10,8 @@ function App() {
          <h1>Keep Talking and Nobody Explodes</h1>
       </header>
 
-      <WiresModule id='sectionWires' />
+      <WiresModule id="sectionWires" />
+      <ButtonModule id="sectionButton" />
     </div>
   );
 }

src/components/ButtonModule.js

@@ -0,0 +1,112 @@
+import ButtonModuleColourInput from "./ButtonModuleColourInput";
+import ButtonModuleTextInput from "./ButtonModuleTextInput";
+import KtaneModule from "./KtaneModule";
+import React from "react";
+import "../css/ButtonModule.css";
+
+export default class ButtonModule extends KtaneModule {
+  constructor(props) {
+    super(props);
+
+    this.colourBlue = "blue";
+    this.colourWhite = "white";
+    this.colourYellow = "yellow";
+    this.colourRed = "red";
+    this.allColours = [this.colourBlue, this.colourWhite, this.colourYellow, this.colourRed];
+
+    this.textAbort = "Abort";
+    this.textDetonate = "Detonate";
+    this.textHold = "Hold";
+    this.textPress = "Press";
+    this.allText = [this.textAbort, this.textDetonate, this.textHold, this.textPress];
+
+    this.setColour = this.setColour.bind(this);
+    this.setText = this.setText.bind(this);
+  }
+
+  getInstruction() {
+    if (this.state.text === this.textDetonate) {
+      return <>If 2+ 🔋, press and release.<br />Otherwise, hold button.</>;
+    } else if (this.state.colour === this.colourWhite) {
+      return <>
+        If <span className="litIndicator" title="Lit indicator">CAR</span>, hold button.<br />
+        Otherwise, if 3+ 🔋 and <span className="litIndicator" title="Lit indicator">FRK</span>, press and release.<br />
+        Otherwise, hold button.
+      </>;
+    } else if ((this.state.colour === this.colourBlue && this.state.text === this.textAbort) || this.state.colour === this.colourYellow) {
+      return "Hold button.";
+    } else if (this.state.colour === this.colourRed && this.state.text === this.textHold) {
+      return "Press and release.";
+    } else {
+      return <>
+        If 3+ 🔋 and <span className="litIndicator" title="Lit indicator">FRK</span>, press and release the button.
+        <br />Otherwise, hold button.
+      </>;
+    }
+  }
+
+  getTitle() {
+    return "Button";
+  }
+
+  mainRender() {
+    return (
+      <>
+        <div>
+          Colour:
+          {
+            this.allColours.map(colour => (
+              <ButtonModuleColourInput
+                colour={colour}
+                key={colour}
+                onChange={this.setColour}
+                stateColour={this.state.colour}
+              />
+            ))
+          }
+        </div>
+
+        <div>
+          Text:
+          {
+            this.allText.map(text => (
+              <ButtonModuleTextInput
+                key={text}
+                onChange={this.setText}
+                stateText={this.state.text}
+                text={text}
+              />
+            ))
+          }
+        </div>
+
+        <div className="instruction">{this.getInstruction()}</div>
+
+        <div>
+          If holding button, release when the timer contains the digit that corresponds to the strip colour:
+          <ul>
+            <li><span className="button blue">Blue</span>: &nbsp; 4</li>
+            <li><span className="button yellow">Yellow</span>: 5</li>
+            <li><span className="button">Other</span>: &nbsp;1</li>
+          </ul>
+        </div>
+      </>
+    )
+  }
+
+  resetState() {
+    // @TODO Put string literals into constants
+    this.state = {
+      colour: "blue",
+      text: "Abort"
+    };
+  }
+
+  setColour(event) {
+    this.setState({colour: event.target.value});
+  }
+
+  setText(event) {
+    this.setState({text: event.target.value});
+  }
+}

src/components/ButtonModuleColourInput.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React, {Component} from "react";
+
+export default class ButtonModuleColourInput extends Component {
+  render() {
+    return (
+      <label>
+        <input
+          checked={this.props.stateColour === this.props.colour}
+          name="buttonColour"
+          onChange={this.props.onChange}
+          type="radio"
+          value={this.props.colour}
+        />
+        <span className={`button ${this.props.colour}`}>
+          {this.props.colour.charAt(0).toUpperCase() + this.props.colour.slice(1)}
+        </span>
+      </label>
+    )
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.stateColour !== nextProps.stateColour;
+  }
+}
+
+ButtonModuleColourInput.propTypes = {
+  colour: PropTypes.string,
+  onChange: PropTypes.func,
+  stateColour: PropTypes.string
+};

src/components/ButtonModuleTextInput.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React, {Component} from "react";
+
+export default class ButtonModuleTextInput extends Component {
+  render() {
+    return (
+      <label>
+        <input
+          checked={this.props.stateText === this.props.text}
+          onChange={this.props.onChange}
+          type="radio"
+          value={this.props.text}
+        />
+        {this.props.text}
+      </label>
+    )
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.stateText !== nextProps.stateText;
+  }
+}
+
+ButtonModuleTextInput.propTypes = {
+  onChange: PropTypes.func,
+  stateText: PropTypes.string,
+  text: PropTypes.string
+};

src/css/ButtonModule.css

@@ -0,0 +1,10 @@
+#sectionButton {
+    line-height: 150%;
+}
+#sectionButton div {
+    margin-bottom: 1em;
+}
+#sectionButton .buttonWhite {
+    border-style: solid;
+    border-width: 1px;
+}