diff --git a/app/components/Diagram.js b/app/components/Diagram.js index 0c3ed87..403353c 100644 --- 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 index 4f85869..e9131e7 100644 --- a/app/components/ShapeBar.js +++ b/app/components/ShapeBar.js @@ -16,10 +16,10 @@ export default class ShapeBar extends Component {
- - - - + + + +
); } } diff --git a/app/containers/App.js b/app/containers/App.js index ac59025..6310376 100644 --- 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");