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");