From bb3fc1de66f46646f43965c7e5af87917b76c5ae Mon Sep 17 00:00:00 2001
From: "Carter J. Bastian" <carter.bastian1@gmail.com>
Date: Sun, 5 Mar 2017 13:44:05 -0500
Subject: [PATCH] Implement color indication of selected ShapeOptions

---
 app/components/ShapeBar.js    | 14 +++++++-------
 app/components/ShapeOption.js | 11 +++++++++--
 app/containers/App.js         |  9 ++++++++-
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/components/ShapeBar.js b/app/components/ShapeBar.js
index e9131e7..326ac8f 100644
--- a/app/components/ShapeBar.js
+++ b/app/components/ShapeBar.js
@@ -6,7 +6,7 @@ var electron = require('electron');
 import ShapeOption from './ShapeOption';
 
 export default class ShapeBar extends Component {
-  // Props: onShapeOptionClick, shape
+  // Props: onShapeOptionClick, shape, strSize
   constructor(props) {
     super(props);
   };
@@ -14,12 +14,12 @@ export default class ShapeBar extends Component {
   render() {
     return (
       <div style={{position: 'absolute', backgroundColor: 'red', width: '100%', height: '10%', margin: 0, padding: 0}}>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Rect'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Circle'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Small'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Medium'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Big'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='Fricken Huge'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Rect'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Circle'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Small'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Medium'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Big'/>
+        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} strSize={this.props.strSize} option='Fricken Huge'/>
       </div>);
   }
 }
diff --git a/app/components/ShapeOption.js b/app/components/ShapeOption.js
index 65c02bb..8c7284e 100644
--- a/app/components/ShapeOption.js
+++ b/app/components/ShapeOption.js
@@ -6,15 +6,22 @@ var electron = require('electron');
 const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
 
 export default class Canvas extends Component {
-  // Props: onClick, shape, and option
+  // Props: onClick, shape, size, and option
   constructor(props) {
     super(props);
   };
 
   render() {
+    // If this ShapeOption is currently set, render it with a different color
+    let buttonColor = 'grey';
+
+    if (this.props.option == this.props.shape
+        || this.props.option == this.props.strSize)
+      buttonColor = 'aquamarine';
+
     return (
       <div onClick={this.props.onClick.bind(null, this)}
-          style={{position: 'relative', float: 'left', backgroundColor: 'grey', width: '10%', height: '90%', marginLeft: '5%', marginTop: '0.5%'}}>
+          style={{position: 'relative', float: 'left', backgroundColor: buttonColor, width: '10%', height: '90%', marginLeft: '5%', marginTop: '0.5%'}}>
         <p>{this.props.option}</p>
       </div>);
   }
diff --git a/app/containers/App.js b/app/containers/App.js
index 6310376..cbd6dc6 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -16,6 +16,7 @@ export default class App extends Component {
 
     this.state = {
       shape: 'Rect',
+      strSize: 'Small',
       size: 30,
     };
 
@@ -34,6 +35,7 @@ export default class App extends Component {
       case 'Rect':
         this.setState({
           shape: 'Rect',
+          strSize: this.state.strSize,
           size: this.state.size,
         });
         break;
@@ -41,6 +43,7 @@ export default class App extends Component {
       case 'Circle':
         this.setState({
           shape: 'Circle',
+          strSize: this.state.strSize,
           size: this.state.size,
         });
         break;
@@ -48,6 +51,7 @@ export default class App extends Component {
       case 'Small':
         this.setState({
           shape: this.state.shape,
+          strSize: component.props.option,
           size: 30,
         });
         break;
@@ -55,6 +59,7 @@ export default class App extends Component {
       case 'Medium':
         this.setState({
           shape: this.state.shape,
+          strSize: component.props.option,
           size: 60,
         });
         break;
@@ -62,6 +67,7 @@ export default class App extends Component {
       case 'Big':
         this.setState({
           shape: this.state.shape,
+          strSize: component.props.option,
           size: 90,
         });
         break;
@@ -69,6 +75,7 @@ export default class App extends Component {
       case 'Fricken Huge':
         this.setState({
           shape: this.state.shape,
+          strSize: component.props.option,
           size: 120,
         });
         break;
@@ -83,7 +90,7 @@ export default class App extends Component {
   render() {
     return (
       <div style={{position: 'absolute', width: '100%', height: '100%', margin: 0, padding: 0}}>
-        <ShapeBar onShapeOptionClick={this.onShapeOptionClick} shape={this.state.shape}/>
+        <ShapeBar onShapeOptionClick={this.onShapeOptionClick} shape={this.state.shape} strSize={this.state.strSize}/>
         <Canvas shape={this.state.shape} size={this.state.size}/>
       </div>);
   }