added color picker

fennadew · Apr 12, 2018 · 1ce855e · 1ce855e
1 parent ced1002
commit 1ce855e
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 45 deletions.
diff --git a/public/javascripts/main.js b/public/javascripts/main.js
@@ -9,22 +9,23 @@ const app = {
 const domElements = {
     canvas: document.getElementById('drawing-canvas'),
     context: document.getElementById('drawing-canvas').getContext("2d"),
+    colorPicker: document.getElementById('colorChoice'),
     init() {
-        this.canvas.setAttribute('width', window.innerWidth);
-        this.canvas.setAttribute('height', window.innerHeight);
+        this.canvas.setAttribute('width', window.innerWidth / 2);
+        this.canvas.setAttribute('height', window.innerHeight / 2);
 
         window.addEventListener('resize', () => {
-            this.canvas.setAttribute('width', window.innerWidth);
-            this.canvas.setAttribute('height', window.innerHeight);
+            this.canvas.setAttribute('width', window.innerWidth / 2);
+            this.canvas.setAttribute('height', window.innerHeight / 2);
         });
     }
 };
 
 const socketIo = {
     socket: io(),
     init() {
-        this.socket.on('mouse', function (obj) {
-            drawEvents.redraw(obj);
+        this.socket.on('mouse', function (drawing) {
+            drawEvents.redraw(drawing);
         });
     }
 };
@@ -34,6 +35,7 @@ const socketIo = {
 
 const drawEvents = {
     painting: false,
+    color: domElements.colorPicker.value,
     lastEvent: {},
     init() {
         domElements.canvas.addEventListener('mousedown', (e) => {
@@ -50,22 +52,25 @@ const drawEvents = {
                     mouseX: e.pageX - e.target.offsetLeft,
                     mouseY: e.pageY - e.target.offsetTop
                 };
-                var line = {
-                    start: {x: this.lastEvent.mouseX, y: this.lastEvent.mouseY},
-                    end: {x: event.mouseX, y: event.mouseY},
-                }
-                this.redraw(line);
-                socketIo.socket.emit('mouse', line);
+                const drawing = {
+                    start: {
+                        x: this.lastEvent.mouseX,
+                        y: this.lastEvent.mouseY
+                    },
+                    end: {
+                        x: event.mouseX,
+                        y: event.mouseY
+                    },
+                    color: this.color
+                };
+                this.redraw(drawing);
+                socketIo.socket.emit('mouse', drawing);
 
                 this.lastEvent.mouseX = event.mouseX;
                 this.lastEvent.mouseY = event.mouseY;
 
             }
 
-            // this.lastEvent.mouseX = event.mouseX;
-            // this.lastEvent.mouseY = event.mouseY;
-
-
         });
 
         domElements.canvas.addEventListener('mouseup', (e) => {
@@ -75,43 +80,27 @@ const drawEvents = {
         domElements.canvas.addEventListener('mouseleave', (e) => {
             this.painting = false;
         });
+
+        domElements.colorPicker.addEventListener('change', (e) => {
+            this.color = domElements.colorPicker.value
+        });
     },
     redraw(obj) {
+        // With help from http://drawwithme.herokuapp.com/ (did the sockets myself! The only thing that didnt work was drawing at the same time. I used this example for fixing it.)
         domElements.context.lineJoin = "round";
+        domElements.context.strokeStyle = this.color;
         domElements.context.lineWidth = 5;
 
         domElements.context.beginPath();
 
-            domElements.context.moveTo(obj.start.x, obj.start.y);
+        domElements.context.moveTo(obj.start.x, obj.start.y);
 
         domElements.context.lineTo(obj.end.x, obj.end.y);
         domElements.context.closePath();
         domElements.context.stroke();
     }
-    // if (saveDraw.clickDrag[i] && i) {
-    //     domElements.context.moveTo(saveDraw.clickX[i - 1], saveDraw.clickY[i - 1]);
-    // } else {
-    //     domElements.context.moveTo(saveDraw.clickX[i] - 1, saveDraw.clickY[i]);
-    // }
-
-
 };
 
-const saveDraw = {
-    computers: {},
-    clickX: [],
-    clickY: [],
-    clickDrag: [],
-    addClick(x, y, dragging) {
-        const obj = {
-            x: x,
-            y: y,
-            dragging: dragging
-        }
-        socketIo.socket.emit('mouse', obj);
-    },
-}
-
 
 app.init();
 

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
diff --git a/public/stylesheets/style.css.map b/public/stylesheets/style.css.map
diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass
@@ -1,12 +1,107 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain) */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video
+  margin: 0
+  padding: 0
+  border: 0
+  font-size: 100%
+  font: inherit
+  vertical-align: baseline
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section
+  display: block
+
+body
+  line-height: 1
+
+ol, ul
+  list-style: none
+
+blockquote, q
+  quotes: none
+
+blockquote:before, blockquote:after,
+q:before, q:after
+  content: ''
+  content: none
+
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+
 html, body
   height: 100%
 
 body
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
+  padding: 0
+  margin: 0
+  background: aquamarine
 
 a
   color: #00B7FF
 
+fieldset div
+  display: flex
+  flex-wrap: nowrap
+  align-items: center
+  justify-content: space-between
+  margin-top: 30%
+label, input
+  display: block
+
+input[type="color"]
+  display: block
+  cursor: pointer
+  -webkit-appearance: none
+  border: none
+  background: transparent
+  outline: none
+  width: 32px
+  height: 32px
+  -webkit-border-radius: 50%
+  -moz-border-radius: 50%
+  border-radius: 50%
+
+input[type="color"]::-webkit-color-swatch-wrapper
+  padding: 0
+  border: none
+
+input[type="color"]::-webkit-color-swatch
+  border: none
+  -webkit-border-radius: 50%
+  -moz-border-radius: 50%
+  border-radius: 50%
+
+form
+  width: 50%
+  margin: auto
 canvas
-  width: 100%
-  height: 100%
+  position: absolute
+  left: 0
+  right: 0
+  top: 0
+  bottom: 0
+  width: 50%
+  height: 50%
+  margin: auto
+  background: white
+  box-shadow: 7px 6px 25px 0px rgba(0,0,0,0.15)
+
diff --git a/views/index.ejs b/views/index.ejs
@@ -5,6 +5,14 @@
     <link rel='stylesheet' href='/stylesheets/style.css'/>
 </head>
 <body>
+<form>
+    <fieldset>
+        <div>
+        <label>Pick a color</label>
+        <input type="color" id="colorChoice">
+        </div>
+    </fieldset>
+</form>
 <canvas id="drawing-canvas"></canvas>
 <script src="/socket.io/socket.io.js"></script>
 <script src="/javascripts/main.js"></script>