WIP: Operator Panel and styling

src/App.js

@@ -7,10 +7,30 @@ import Home from './Home/containers';
 import Play from './Play/containers';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { width: 0, height: 0 };
+    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
+  }
+
+  componentDidMount() {
+    this.updateWindowDimensions();
+    window.addEventListener('resize', this.updateWindowDimensions);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateWindowDimensions);
+  }
+
+  updateWindowDimensions() {
+    this.setState({ width: window.innerWidth, height: window.innerHeight });
+  }
+
   render() {
+    const { width, height } = this.state;
     return (
       <Router>
-        <div style={styles.container}>
+        <div style={[styles.container]}>
           <Route path="/" exact component={Home} />
           <Route path="/play" component={Play} />
         </div>
@@ -20,7 +40,9 @@ class App extends Component {
 }
 
 const styles = {
-  container: {},
+  container: {
+    height: '-webkit-fill-available',
+  },
 };
 
 export default App;

src/Home/containers/index.jsx

@@ -14,10 +14,9 @@ export default class index extends PureComponent {
 
 const styles = {
   container: {
-    flex: 1,
+    display: 'flex',
     flexDirection: 'column',
-    width: '100%',
-    justifyContent: 'space-between',
-    border: '1 blue',
+    // width: '100%',
+    alignItems: 'center',
   },
 };

src/Play/components/Equation.jsx

@@ -4,13 +4,11 @@ export default class Equation extends PureComponent {
   constructor(props) {
     super(props);
 
-    this.state = {
-      equation: '4x + 3 = 2x+1',
-    };
+    this.state = {};
   }
 
   render() {
-    const { equation } = this.state;
+    const { equation } = this.props;
     return <div>{equation}</div>;
   }
 }

src/Play/containers/OperatorPanel.jsx

@@ -1,11 +1,88 @@
 import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { AwesomeButton } from 'react-awesome-button';
+import 'react-awesome-button/dist/styles.css';
 
 export default class OperatorPanel extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: 0,
+      result: '',
+    };
+
+    this.addMirror = this.addMirror.bind(this);
+    this.substractMirror = this.substractMirror.bind(this);
+    this.multiplyMirror = this.multiplyMirror.bind(this);
+    this.divideMirror = this.divideMirror.bind(this);
+    this.exponentMirror = this.exponentMirror.bind(this);
+  }
+
+  addMirror() {
+    this.setState(state => ({
+      value: state.value + 2,
+    }));
+
+    this.props.onChangeEquation('new eq');
+  }
+
+  substractMirror() {
+    this.setState(state => ({
+      value: state.value - 2,
+    }));
+  }
+
+  multiplyMirror() {
+    this.setState(state => ({
+      value: state.value * 2,
+    }));
+  }
+
+  divideMirror() {
+    this.setState(state => ({
+      value: state.value / 2,
+    }));
+  }
+
+  exponentMirror() {
+    this.setState(state => ({
+      value: state.value ^ 2,
+    }));
+  }
+
   render() {
     return (
-      <div>
-
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <AwesomeButton type="primary" action={this.addMirror}>
+          +
+        </AwesomeButton>
+        <AwesomeButton type="primary" action={this.substractMirror}>
+          &minus;
+        </AwesomeButton>
+        <AwesomeButton type="primary" action={this.multiplyMirror}>
+          &times;
+        </AwesomeButton>
+        <AwesomeButton type="primary" action={this.divideMirror}>
+          &divide;
+        </AwesomeButton>
+        <AwesomeButton type="primary" action={this.exponentMirror}>
+          ^
+        </AwesomeButton>
       </div>
     );
   }
 }
+
+OperatorPanel.protoTypes = {
+  equation: PropTypes.string,
+  onChangeEquation: PropTypes.func,
+};

src/Play/containers/index.jsx

@@ -1,13 +1,77 @@
 import React, { PureComponent } from 'react';
+import { AwesomeButtonProgress } from 'react-awesome-button';
+
 import Equation from '../components/Equation';
-import MirrorOperations from '../components/MirrorOperations';
+import OperatorPanel from './OperatorPanel';
 
 export default class Play extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      equation: '4x + 3 = 2x+1',
+    };
+
+    this.renderPanel = this.renderPanel.bind(this);
+  }
+
+  submit() {
+    if (this.state.value === 6) {
+      this.setState({
+        result: 'CORRECT!',
+      });
+    } else {
+      this.setState({
+        result: 'INCORRECT, try again',
+      });
+    }
+  }
+
+  renderPanel() {
+    const { equation } = this.state;
+    return (
+      <OperatorPanel
+        equation={equation}
+        onChangeEquation={equation => {
+          this.setState({ equation });
+        }}
+      />
+    );
+  }
+
   render() {
+    const { equation } = this.state;
     return (
-      <div className="Play">
-        <Equation />
-        <MirrorOperations />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-around',
+        }}
+      >
+        <Equation equation={equation} />
+
+        <div
+          id="Panel"
+          style={{
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {this.renderPanel()}
+          <div style={{ marginTop: '10px' }}>
+            <AwesomeButtonProgress
+              type="secondary"
+              size="medium"
+              action={this.submit}
+            >
+              Submit
+            </AwesomeButtonProgress>
+          </div>
+        </div>
       </div>
     );
   }

src/index.css

@@ -1,14 +1,18 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+#root {
+  height: -webkit-fill-available;
+}

yarn.lock

@@ -6582,7 +6582,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -6732,6 +6732,13 @@ react-app-polyfill@^0.1.3:
     raf "3.4.0"
     whatwg-fetch "3.0.0"
 
+react-awesome-button@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-awesome-button/-/react-awesome-button-5.0.0.tgz#7a84805fec98c438e02713ce22f37ec12c599ff7"
+  dependencies:
+    prop-types "^15.6.0"
+    react "^16.2.0"
+
 react-dev-utils@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-6.1.1.tgz#a07e3e8923c4609d9f27e5af5207e3ca20724895"
@@ -6851,7 +6858,7 @@ [email protected]:
   optionalDependencies:
     fsevents "1.2.4"
 
-react@^16.6.3:
+react@^16.2.0, react@^16.6.3:
   version "16.6.3"
   resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
   dependencies: