diff --git a/public/javascripts/main.js b/public/javascripts/main.js
index 2abc8184..c614762b 100644
--- a/public/javascripts/main.js
+++ b/public/javascripts/main.js
@@ -9,13 +9,14 @@ 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);
});
}
};
@@ -23,8 +24,8 @@ const domElements = {
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
index ca127c8d..9de4c444 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -1,14 +1,108 @@
+/* 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; }
+ 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); }
/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/public/stylesheets/style.css.map b/public/stylesheets/style.css.map
index faf3e3aa..c3561c72 100644
--- a/public/stylesheets/style.css.map
+++ b/public/stylesheets/style.css.map
@@ -5,5 +5,5 @@
"style.sass"
],
"names": [],
- "mappings": "AAAA,AAAA,IAAI,EAAE,IAAI,CAAC;EACT,MAAM,EAAE,IAAI,GAAG;;AAEjB,AAAA,IAAI,CAAC;EACH,IAAI,EAAE,kDAAkD,GAAG;;AAE7D,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,OAAO,GAAG;;AAEnB,AAAA,MAAM,CAAC;EACL,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI,GAAG"
+ "mappings": "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"
}
\ No newline at end of file
diff --git a/public/stylesheets/style.sass b/public/stylesheets/style.sass
index f00fa480..60e880a2 100644
--- 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
index 27a2cdc2..af917f39 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -5,6 +5,14 @@
+