Challenge and Code: Interactive Instructions

evens-or-odds/src/components/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { startGame, cancelGame } from '../actions/settings';
+import Instructions from './Instructions';
 
 class App extends Component {
   render() {
@@ -21,6 +22,8 @@ class App extends Component {
               <h3>A new game awaits</h3>
               <br />
               <button onClick={this.props.startGame}>Start Game</button>
+              <hr />
+              <Instructions />
             </div>
           )
         }

evens-or-odds/src/components/Instructions.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { expandInstructions, collapseInstructions } from '../actions/settings';
+
+const Instructions = props => {
+  const { instructionsExpanded, expandInstructions, collapseInstructions } = props;
+
+  if (instructionsExpanded) {
+    return (
+      <div>
+        <h3>Instructions</h3>
+        <p>Welcome to evens or odds. The game goes like this</p>
+        <p>The deck is shuffled. Then choose. will the next card be even or odd?</p>
+        <p>Make a choive on every draw, and see how many you get right!</p>
+        <p>(Face cards don't count)</p>
+        <br />
+        <button onClick={collapseInstructions}>Show less</button>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <h3>Instructions</h3>
+      <p>Welcome to evens or odds. The game goes like this...</p>
+      <button onClick={expandInstructions}>Read more</button>
+    </div>
+  )
+}
+
+export default connect(
+  state => ({ instructionsExpanded: state.instructionsExpanded }),
+  { expandInstructions, collapseInstructions }
+)(Instructions);