Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Sketchpad now delivering drawing to other sketchpads. "Clear" feature…

… not working across sketchpads currently.
  • Loading branch information...
commit 414184827db1b8707fad4066011870c658b3da81 1 parent 9c6449e
@yoniholmes yoniholmes authored
View
22 TODO.md
@@ -41,3 +41,25 @@ Browser
Server
+
+----
+
+Decisions:
+
+Team A, B
+Users can come and join at any point
+Best of 5 (or x) rounds
+
+
+Drawer
+- sends instruction/s
+- index, action, coords
+
+Server
+- store the instructions into an array
+- pump them out as and when to subscribers
+
+
+Receiver
+- on log in, subscribe to drawing stream
+- maintain local array of drawing
View
3  src/html/guess-word.html
@@ -1,5 +1,8 @@
<h1>Guess word</h1>
+<canvas id="myCanvas" width="400" height="300"></canvas>
+<button type="button" id="fetchDrawing">Update</button>
+
<form id="enterGuess" method="post" action="#">
<p>Please enter a guess...</p>
<input type="text" id="guess" value="" />
View
20 src/js/pictionary.js
@@ -48,9 +48,9 @@
pages.add('/view-word', '/src/html/view-word.html', function() {
$('.word').text(word);
pad = PIC.createPad('#myCanvas');
- pad.onChange(function (move) {
+ pad.onStep(function (step) {
comms.send({
- draw: move
+ step: step
});
})
comms.connect(function () {
@@ -65,7 +65,9 @@
});
pages.add('/guess-word', '/src/html/guess-word.html', function() {
- $('#guess').val(guess);
+ pad = PIC.createPad('#myCanvas');
+
+ $('#guess').val(guess);
$('#enterGuess').submit(function (e) {
e.preventDefault();
guess = $('#guess').val();
@@ -76,6 +78,11 @@
$('#feedback').text('Please try again...');
}
});
+
+ $('#fetchDrawing').click(function () {
+ comms.send('Can i have a drawing please?')
+
+ })
});
pages.add('/watch-team', '/src/html/watch-team.html');
@@ -96,20 +103,21 @@
comms.message(function (data) {
if (data.users) {
- console.log('We got a message!', data)
var users = '';
for (u in data.users) {
users += data.users[u] + ' ';
}
$('#others').text(users)
}
-
+ if (data.step) {
+ pad.step(data.step);
+ }
if (data.teams) {
teams = data.teams;
pages.open('/overview')
}
if (data.draw) {
- pad.add(data.draw);
+ //pad.add(data.draw);
}
})
View
220 src/js/sketchpad.js
@@ -1,122 +1,126 @@
var PIC = window.PIC || {};
-PIC.createPad = function (padSelector) {
+PIC.createPad = function (selector) {
- var $canvas = $(padSelector),
- $doc = $(document),
- context = $canvas[0].getContext('2d'),
- penX = 0,
- penY = 0,
- isPenDown = false,
- path = {},
- onChangeCallbacks = [];
-
- $canvas.clear = function() {
- context.clearRect(0,0,10000,10000);
- };
+ var pen, pad, callbacks;
- // The path inst is the array that stores the pad's drawing history
- path.inst = [];
+ callbacks = [];
- // Add instruction to the pad. Accepted values: 'up', 'down', 'move, x, y'
- path.add = function (word, x, y) {
- var ins = {}
- ins.ins = word;
- if (x && y) {
- ins.x = x;
- ins.y = y;
- }
- this.inst.push(ins);
- this.render();
+ pen = (function () {
- for (var i=0; i<onChangeCallbacks.length; i++) {
- onChangeCallbacks[i](arguments)
- }
- };
-
- // Clear the canvas and redraw the pad's entire sketch history
- path.render = function () {
- var i, len, ins;
+ var $canvas, $doc, context, history, padX, padY, isDown, step;
+
+ $canvas = $(selector).first();
+ $doc = $(document);
+ history = [];
+ padX = $canvas.offset().left;
+ padY = $canvas.offset().top;
+ isDown = false;
+ context = $canvas[0].getContext('2d');
+ step = function (actionName) {
+ return function (x, y) {
+ var newStep = {}, i;
+
+ newStep.action = actionName;
+ if (x && y) {
+ newStep.x = x;
+ newStep.y = y;
+ }
+ history.push(newStep);
+ pen.draw();
+
+
+ for (i = 0; i < callbacks.length; i++) {
+ callbacks[i](newStep);
+ }
+ };
+ };
+
+ // Setup
+ context.lineWidth = 4;
+ context.lineCap = 'round';
+ context.lineJoin = 'round';
+
+ // Events
+ $canvas.mousedown(function (e) {
+ pen.down();
+ pen.move(e.pageX - padX, e.pageY - padY - 0.001);
+ pen.move(e.pageX - padX, e.pageY - padY);
- $canvas.clear();
+ $doc.bind('mousemove', function (e) {
+ pen.move(e.pageX - padX, e.pageY - padY);
+ });
+ });
+ $doc.mouseup(function (e) {
+ pen.up();
+ $doc.unbind('mousemove');
+ });
- for (i=0, len=this.inst.length; i < len; i++) {
- ins = this.inst[i]
- switch( ins.ins ) {
- case 'down':
- context.beginPath();
- isPenDown = true;
- break;
- case 'move':
- if (isPenDown) {
- context.lineTo(ins.x, ins.y);
- } else {
- context.moveTo(ins.x, ins.y);
+ return {
+ up: step('up'),
+ down: step('down'),
+ move: step('move'),
+ clear: function () {
+ context.clearRect(0, 0, 10000, 10000);
+ },
+ draw: function () {
+ var i, step, x, y;
+ isDown = false;
+ pen.clear();
+
+ for (i = 0; i < history.length; i++) {
+ step = history[i];
+ switch (step.action) {
+ case 'down':
+ context.beginPath();
+ isDown = true;
+ break;
+ case 'move':
+ context[isDown ? 'lineTo' : 'moveTo'](step.x, step.y);
+ break;
+ case 'up':
+ context.stroke();
+ isDown = false;
+ break;
}
- break;
- case 'up':
+ }
+ if (isDown) {
context.stroke();
- isPenDown = false;
- break;
+ }
+ },
+ history: function (newHistory) {
+ if (newHistory) {
+ history = newHistory
+ }
+ return history;
}
- }
- if (isPenDown) {
- context.stroke();
- }
- };
-
- path.clear = function () {
- this.inst = [];
- };
+ };
+ }());
- // Setup the line styling
- context.lineWidth = 4;
- context.lineCap = 'round';
- context.lineJoin = 'round';
- // Mouse events
- $canvas.mousedown(function (e) {
- var coords = $canvas.offset();
- path.add('move', e.pageX - coords.left, e.pageY - coords.top);
- path.add('down');
- $doc.bind('mousemove', function (e) {
- coords = $canvas.offset();
- path.add('move', e.pageX - coords.left, e.pageY - coords.top);
- })
- })
- $doc.mouseup(function (e) {
- path.add('up');
- $doc.unbind('mousemove');
- })
-
-
- // Return the sketchpad's API
- return {
- penDown: function (x, y) {
- path.add('down', x, y);
- path.render();
- },
- penUp: function (x, y) {
- path.add('up');
- path.render();
- },
- moveTo: function (x, y) {
- path.add('move', x, y);
- path.render();
- },
- reset: function () {
- $canvas.clear();
- path.clear();
- },
- getPath: function () {
- return path.inst;
- },
- onChange: function (callback) {
- // need to work out how to, on change, to send that info to other
- // users's pads.
- onChangeCallbacks.push(callback);
- }
- }
-}
-
+ pad = (function () {
+
+ return {
+ history: function () {
+
+ },
+ step: function (step) {
+ pen.history(pen.history().concat([step]));
+ pen.draw();
+ },
+ clear: function () {
+
+ },
+ onStep: function (callback) {
+ callbacks.push(callback);
+ },
+ reset: function () {
+ pen.clear();
+ pen.history([]);
+ }
+ };
+ }());
+
+ return pad;
+};
View
14 src/server/sockets.js
@@ -6,6 +6,7 @@ var io = require('socket.io'),
b: {}
},
users = {},
+ drawing = [];
getCookies = function (str) {
var cookies = [];
str.split(';').forEach(function( cookie ) {
@@ -22,6 +23,7 @@ exports.start = function (server) {
socket.on('connection', function (client) {
client.on('message', function (data) {
+
var cookies = {},
uid;
@@ -50,7 +52,17 @@ exports.start = function (server) {
})
}
- socket.broadcast(data)
+ if (data.chat) {
+ socket.broadcast(data)
+ }
+
+ if (data.step) {
+ socket.broadcast(data, client.sessionId);
+ }
+
+ if (data === 'Can i have a drawing please?') {
+ client.send({drawing: drawing})
+ }
})
client.on('disconnect', function () {} )
Please sign in to comment.
Something went wrong with that request. Please try again.