jafstar/moveThing.html

## moveThing.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simplest Chat Room</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>

//DOCUMENT READY/////////////////////////////////////////////////
$(document).ready(function() {

  $('#shell').append('<div class="thing"></div>');

});

//CONNECT/////////////////////////////////////////////
  var socket = io.connect('http://theDomain.com');

//HELLO WORLD////////////////////////////////////////
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });


//SIMPLE CHAT ROOM//////////////////////////////////////
  function sendMsg(){
	var theMsg = $('#theMsg').val();
	 socket.emit('newMsg', { theMsg: theMsg });
	 $('#theMsg').attr('value','');
  }

  socket.on('writeMsg', function(data) {
    console.log(data.theMsg);
	$('#messages ul').append('<li>'+data.theMsg+'</li>');
  });


//MOVE THING ///////////////////////////////////////////////////////////////

  function moveThing(direction,distance){
	//var theThing = $('.thing').position();
	console.log('the dir :' + direction);
	console.log('the dist:' + distance);
	socket.emit('newDir', { theDir: direction , theDist: distance});
  }


  socket.on('writeDir', function(data) {

	var newDist = data.theDist;
	var newDir = data.theDir;

	console.log('the new direction is: ' + newDir);
	console.log('the new distance is: ' + newDist);

	switch(newDir){

		case 'left':
		$('.thing').css({left:newDist});
		break;

		case 'right':
		$('.thing').css({left:650+newDist});
		break;

		case 'top':
		$('.thing').css({top:newDist});
		break;

		case 'bottom':
		$('.thing').css({top:650+newDist});
		break;

	}

  });


//KEYBOARD LISTENER/////////////////////////////////////////
$(document).keydown(function(e) {

var dist = 50;

switch(e.keyCode) {
		//LEFT
		case 37:
			console.log('LEFT key pressed');
			$('.thing').css({left:dist});
			moveThing('left',dist);
			break;

		//UP
		case 38:
			console.log('UP key pressed');
			$('.thing').css({top:dist});
				moveThing('top',dist);
			break;

		//RIGHT
		case 39:
			console.log('RIGHT key pressed');
			moveThing('right',dist);
			$('.thing').css({left:dist+650});
			break;

		//DOWN
		case 40:
			console.log('DOWN key pressed');
			$('.thing').css({top:dist+650});
				moveThing('bottom',dist);
			break;
		}
	});


</script>


</head>

<body>
<div id="shell">

<div id="messages">
	<ul>
		<li>Welcome to the chat room</li>
	</ul>
</div>
<input type="text" id="theMsg">
<input type="button" value="Send" id="theBtn" onclick="sendMsg()">

</div>

<style>
	.thing {
		width: 50px;
		height: 50px;
		position: absolute;
		left: 50%;
		top: 50%;
		background: #FF3300;
	}

</style>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Simplest Chat Room</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>

	//DOCUMENT READY/////////////////////////////////////////////////
	$(document).ready(function() {

	$('#shell').append('<div class="thing"></div>');

	});

	//CONNECT/////////////////////////////////////////////
	var socket = io.connect('http://theDomain.com');

	//HELLO WORLD////////////////////////////////////////
	socket.on('news', function (data) {
	console.log(data);
	socket.emit('my other event', { my: 'data' });
	});


	//SIMPLE CHAT ROOM//////////////////////////////////////
	function sendMsg(){
	var theMsg = $('#theMsg').val();
	socket.emit('newMsg', { theMsg: theMsg });
	$('#theMsg').attr('value','');
	}

	socket.on('writeMsg', function(data) {
	console.log(data.theMsg);
	$('#messages ul').append('<li>'+data.theMsg+'</li>');
	});



	//MOVE THING ///////////////////////////////////////////////////////////////

	function moveThing(direction,distance){
	//var theThing = $('.thing').position();
	console.log('the dir :' + direction);
	console.log('the dist:' + distance);
	socket.emit('newDir', { theDir: direction , theDist: distance});
	}


	socket.on('writeDir', function(data) {

	var newDist = data.theDist;
	var newDir = data.theDir;

	console.log('the new direction is: ' + newDir);
	console.log('the new distance is: ' + newDist);

	switch(newDir){

	case 'left':
	$('.thing').css({left:newDist});
	break;

	case 'right':
	$('.thing').css({left:650+newDist});
	break;

	case 'top':
	$('.thing').css({top:newDist});
	break;

	case 'bottom':
	$('.thing').css({top:650+newDist});
	break;

	}

	});


	//KEYBOARD LISTENER/////////////////////////////////////////
	$(document).keydown(function(e) {

	var dist = 50;

	switch(e.keyCode) {
	//LEFT
	case 37:
	console.log('LEFT key pressed');
	$('.thing').css({left:dist});
	moveThing('left',dist);
	break;

	//UP
	case 38:
	console.log('UP key pressed');
	$('.thing').css({top:dist});
	moveThing('top',dist);
	break;

	//RIGHT
	case 39:
	console.log('RIGHT key pressed');
	moveThing('right',dist);
	$('.thing').css({left:dist+650});
	break;

	//DOWN
	case 40:
	console.log('DOWN key pressed');
	$('.thing').css({top:dist+650});
	moveThing('bottom',dist);
	break;
	}
	});



	</script>


	</head>

	<body>
	<div id="shell">

	<div id="messages">
	<ul>
	<li>Welcome to the chat room</li>
	</ul>
	</div>
	<input type="text" id="theMsg">
	<input type="button" value="Send" id="theBtn" onclick="sendMsg()">

	</div>

	<style>
	.thing {
	width: 50px;
	height: 50px;
	position: absolute;
	left: 50%;
	top: 50%;
	background: #FF3300;
	}

	</style>

	</body>
	</html>