Commit fd8a0eb5 authored by Monika's avatar Monika
Browse files

draw line when racket/mouse is pushed

parent 0cb85ec8
......@@ -32,7 +32,6 @@ $(function () {
ball.create();
// Prompt for setting a username
var user = new ClientPlayer($('.pages'));
user.setLoginCallback(function () {
......@@ -62,6 +61,28 @@ $(function () {
socket.emit('move racket', d);
});
var startX = 0;
var startY = 0;
$( "#playground" ).mousedown(function(event) {
startX = event.pageX - $playground.offset().left;
startY = event.pageY - $playground.offset().top;
});
$( "#playground" ).mouseup(function(event) {
var endX = event.pageX - $playground.offset().left;
var endY = event.pageY - $playground.offset().top;
var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
newLine.setAttribute('id','line');
newLine.setAttribute('x1', startX);
newLine.setAttribute('y1', startY);
newLine.setAttribute('x2', endX);
newLine.setAttribute('y2', endY);
$("#map").html(newLine);
$('#map').fadeIn().delay(2000).fadeOut( "slow", function() {
$("#map").html("");
});
});
// Whenever the server emits 'login', log the login message
socket.on('login', function (data) {
connected = true;
......
......@@ -2,10 +2,15 @@
function ClientRacket($el){
var attributes = {
'el': $el
'el': $el,
'vx': 0,
'vy': 0
};
return {
setVector : function(vx, vy){
attributes.vx = vx;
attributes.vy = vy;
}
}
}
......@@ -51,6 +51,8 @@
</div>
<div class="score"><span class="team0">0</span>:<span class="team1">0</span></div>
<div id="ball"></div>
<svg id="map" width="968" height="776" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
<div id="table"></div>
</div>
</div>
......
......@@ -126,4 +126,9 @@ body {
left: 100px;
background: url(images/ball.png) no-repeat;
z-index: 2;
}
line {
stroke:rgb(1,1,1);
stroke-width:3;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment