🆕Fresh designs and some refactoring

client/drawer.js

@@ -10,7 +10,7 @@ var initDrawer = function initDrawer() {
 
   var ShapeTypes = {line: 'line', path: 'path', rect: 'rect', circle: 'circle'};
   var LineTypes = {round: 'round'};
-  var Colors = {black: 'black', red: 'red', blue: 'blue', green: 'green', purple: 'purple', yellow: 'yellow'};
+  var Colors = {black: 'black', red: 'red', blue: 'blue', green: 'green', purple: 'purple', yellow: 'yellow', white: 'white', aliceblue: 'aliceblue'};
 
   //returns 4 digit guid string
   var getGuid = function getGuid() {
@@ -258,4 +258,4 @@ var initDrawer = function initDrawer() {
   return new Drawer(canvas, data);
 };
 
-export default initDrawer;
+export default initDrawer;

client/src/app/Board.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ToolBar from './Toolbar.jsx';
-import Nav from './Nav.jsx';
+// import Nav from './Nav.jsx';
 import Render from '../../render.js';
 import initDrawer from '../../drawer.js';
 
@@ -100,41 +100,35 @@ class Board extends React.Component {
       position: 'fixed'
     };
     const canvas = {
-      
+
       borderRadius: '5px',
     };
     const tools = {
       listStyleType: 'none',
       marginTop: '85px',
       position: 'fixed'
     };
-    const nav = {
-      marginLeft: '-25px',
-      color: 'red'
-    };
+    // const nav = {
+    //   // marginLeft: '-25px',
+    //   color: 'red'
+    // };
     const header = {
       margin: '0 0 0 0',
-      color: '#ffd800'
     };
 
     return (
-      <div>
-        <h1><a style={header} href="/">New Drawmie</a></h1>
         <div>
+          <h1>{ `Drawmie ${window.location.hash}` }</h1>
           <div className="container-fluid" style={tools}>
             <ToolBar draw={ this.state.draw } />
           </div>
-            <Nav style={nav}/>
+            {/* <Nav /> */}
           <div className="container-fluid" style={container} >
             <canvas id="draw-canvas" style={canvas} ref="canvas" width={window.document.body.offsetWidth * .80} height={window.document.body.offsetHeight * .77} />
           </div>
         </div>
-      </div>
     );
   }
 }
 
 export default Board;
-
-
-

client/src/app/Nav.jsx

@@ -1,11 +1,11 @@
-import React from 'react';
-
-var Nav = (props) => (
-  <nav className="navbar">
-    <div className="col-md-6 col-md-offset-3">
-      <h1>Drawmie                     I Dare You</h1>
-    </div>
-  </nav>
-);
-
-export default Nav;
+// import React from 'react';
+//
+// var Nav = (props) => (
+//   <nav className="navbar">
+//     <div className="col-md-6 col-md-offset-3">
+//       <h1>{ `Drawmie ${window.location.hash}` }</h1>
+//     </div>
+//   </nav>
+// );
+//
+// export default Nav;

client/src/app/Toolbar.jsx

@@ -1,40 +1,55 @@
 import React from 'react';
 import { ButtonGroup, Button } from 'react-bootstrap';
 
+const wellStyles = {maxWidth: 250, margin: '0 auto 10px'};
+
 
 var ToolBar = ({ draw }) => (
   <div>
-    <div>
-      <ButtonGroup vertical>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.toggleIsSelecting()}>Selector</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeShapeType(draw.ShapeTypes.rect)}>Rect</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeShapeType(draw.ShapeTypes.line)}>Line</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeShapeType(draw.ShapeTypes.circle)}>Circle</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeShapeType(draw.ShapeTypes.path)}>Path</Button>
-      </ButtonGroup>
-    </div>
-    <div>
-      <ButtonGroup vertical>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.toggleStrokeFill('stroke')}>Stroke</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.toggleStrokeFill('fill')}>Fill</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeColor(draw.Colors.black)}>Black</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeColor(draw.Colors.red)}>Red</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeColor(draw.Colors.yellow)}>Yellow</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeColor(draw.Colors.green)}>Green</Button>
-        <Button className="tools" bsSize="large"
-                onClick={() => draw.changeColor(draw.Colors.purple)}>Purple</Button>
-      </ButtonGroup>
+    <div className="well" style={wellStyles}>
+    <center><h5>Fill Style</h5></center>
+      <div>
+        <ButtonGroup vertical>
+          <Button className="tools" bsSize="large" block
+            onClick={() => draw.toggleStrokeFill('stroke')}>Stroke</Button>
+          <Button className="tools" bsSize="large" block
+            onClick={() => draw.toggleStrokeFill('fill')}>Filled</Button>
+        </ButtonGroup>
+        <br />
+        <center><h5>Shape</h5></center>
+        <ButtonGroup vertical>
+          <Button className="tools" bsSize="large"
+            onClick={() => draw.toggleIsSelecting()}>Drag</Button>
+          <Button className="tools" bsSize="large"
+            onClick={() => draw.changeShapeType(draw.ShapeTypes.rect)}>Rect</Button>
+          <Button className="tools" bsSize="large"
+            onClick={() => draw.changeShapeType(draw.ShapeTypes.line)}>Line</Button>
+          <Button className="tools" bsSize="large"
+            onClick={() => draw.changeShapeType(draw.ShapeTypes.circle)}>Circle</Button>
+          <Button className="tools" bsSize="large"
+            onClick={() => draw.changeShapeType(draw.ShapeTypes.path)}>Draw</Button>
+        </ButtonGroup>
+        <br />
+        <center><h5>Color</h5></center>
+        <ButtonGroup vertical className='color-picker'>
+          <Button className="tools button-black" bsSize="large"
+            onClick={() => draw.changeColor(draw.Colors.black)}></Button>
+          <Button className="tools button-white" bsSize="large"
+            onClick={() => draw.changeColor(draw.Colors.white)}></Button>
+          <Button className="tools" bsSize="large" bsStyle="danger"
+            onClick={() => draw.changeColor(draw.Colors.red)}></Button>
+          <Button className="tools button-yellow" bsSize="large"
+            onClick={() => draw.changeColor(draw.Colors.yellow)}></Button>
+          <Button className="tools button-alice" bsSize="large"
+          onClick={() => draw.changeColor(draw.Colors.aliceblue)}></Button>
+          <Button className="tools" bsSize="large" bsStyle="success"
+            onClick={() => draw.changeColor(draw.Colors.green)}></Button>
+          <Button className="tools button-purple" bsSize="large"
+            onClick={() => draw.changeColor(draw.Colors.purple)}></Button>
+          <Button className="tools button-blue" bsSize="large"
+            onClick={() => draw.changeColor(draw.Colors.blue)}></Button>
+        </ButtonGroup>
+      </div>
     </div>
   </div>
 );

client/styles.css

@@ -3,21 +3,66 @@ html, body {
   padding: 0;
   width: 100%;
   height: 100%;
+  background: #00c6ff; /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, aliceblue , #0072ff); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, aliceblue , #0072ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 }
 
 h1 {
   font-size: 3.5em;
-}
-body {
-  background-color: #3e506d;
+  font-family: 'Permanent Marker', cursive;
+  /*color: white;*/
 }
 
 canvas {
   background-color: aliceblue;
+  border: 1px solid black;
 }
 
 .headers {
-  color:#ffd800;
+  color:white;
+}
+
+.button-black {
+    color: #fff;
+    background-color: black;
+    border-color: black;
+}
+
+.button-blue {
+    color: #fff;
+    background-color: blue;
+    border-color: blue;
+}
+
+.button-yellow {
+    color: black;
+    background-color: yellow;
+    border-color: yellow;
+}
+
+.button-white {
+    color: black;
+    background-color: white;
+    border-color: white;
+}
+
+.color-picker {
+  width: 50%;
+  left: 24%;
+  margin: 0 auto;
+}
+
+.button-alice {
+  color: black;
+  background-color: aliceblue;
+  border-color: aliceblue;
+}
+
+.button-purple {
+    color: #fff;
+    background-color: purple;
+    border-color: purple;
 }
 
 .drawmie-input {