Implement size ShapeOptions

dali-lab · Mar 5, 2017 · 3803f66 · 3803f66
1 parent 045daa8
commit 3803f66
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 19 deletions.
diff --git a/app/components/Diagram.js b/app/components/Diagram.js
@@ -62,10 +62,9 @@ export default class Diagram extends Component {
     console.log(topLeftY);
     if (this.props.shape == 'Rect') {
       // Get the width of the shape if it's a square
-      let width = 30;
       // Center the square
-      topLeftX -= (width / 2); 
-      topLeftY -= (width / 2);
+      topLeftX -= (this.props.size / 2); 
+      topLeftY -= (this.props.size / 2);
 
       // Add this (x,y) location as an object to the blocks list in state
       let updatedBlocks = this.state.squares.slice();  // immutable lists in state

diff --git a/app/components/ShapeBar.js b/app/components/ShapeBar.js
@@ -16,10 +16,10 @@ export default class ShapeBar extends Component {
       <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='No option'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='No option'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='No option'/>
-        <ShapeOption onClick={this.props.onShapeOptionClick} shape={this.props.shape} option='No option'/>
+        <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'/>
       </div>);
   }
 }
diff --git a/app/containers/App.js b/app/containers/App.js
@@ -25,18 +25,56 @@ export default class App extends Component {
   // Handle ShapeOption Click
   onShapeOptionClick(component, e) {
     // Set the state of the app based on the option click
-    console.log("Before: This.state: %s\n", this.state.shape);
-
-    if (component.props.option == 'Rect') {
-      this.setState({
-        shape: 'Rect',
-        size: this.state.size,
-      });
-    } else if (component.props.option == 'Circle') {
-      this.setState({
-        shape: 'Circle',
-        size: this.state.size,
-      });
+    console.log("Before: Shape: %s, Size: %s\n", this.state.shape, this.state.size);
+
+    // Check for various known options
+
+    switch(component.props.option) {
+      // Two cases for shapes
+      case 'Rect':
+        this.setState({
+          shape: 'Rect',
+          size: this.state.size,
+        });
+        break;
+
+      case 'Circle':
+        this.setState({
+          shape: 'Circle',
+          size: this.state.size,
+        });
+        break;
+
+      case 'Small':
+        this.setState({
+          shape: this.state.shape,
+          size: 30,
+        });
+        break;
+
+      case 'Medium':
+        this.setState({
+          shape: this.state.shape,
+          size: 60,
+        });
+        break;
+
+      case 'Big':
+        this.setState({
+          shape: this.state.shape,
+          size: 90,
+        });
+        break;
+
+      case 'Fricken Huge':
+        this.setState({
+          shape: this.state.shape,
+          size: 120,
+        });
+        break;
+
+      default:
+        console.log("Unhandled Button: %s\n", component.props.option);
     }
 
     console.log("Handling Shape Option Click!\n");