jafstar/town.html

## town.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Town JS</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="/nowjs/now.js"></script>


<script type="text/javascript">

//VARS
var context;
var text;

//WINDOW INFO
var winW = $(window).width();
var winH = $(window).height();

$(window).resize(function() {
  winW = $(window).width();
  console.log("new window width: " + winW);
});

//SETTINGS
var w = 3000;
var h = 500;
var v = 21;
var scroll;
var scrollX = Math.ceil(w/winW * Math.floor(v/3));
var pos = 0;

//PLAYER
var img = new Image();
img.src = 'https://s3.amazonaws.com/jafar/smile.png';
$(img).append('#player');


//INIT VIEW
var viewport = {
  id: now.core.clientId,
  width: w,
  height: h,
  x: winW/2,
  y: 100
}

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

//GET CANVAS
context = $('#map')[0].getContext('2d');
text = $('#text');

//KEYBOARD CONTROLS
$(window).keydown(function(e) {

	//KEYBOARD SWITCH
    switch(e.which) {

      //LEFT
      case 37:
        if(movePlayer(viewport.x)){viewport.x -= v}else{viewport.x = w - 150; window.scrollTo(w,0);};
        moveScroll('left');
        now.moveActor(viewport.x, viewport.y,now.core.clientId,null);
        e.preventDefault();
        break;

      //RIGHT
      case 39:
        if(movePlayer(viewport.x)){viewport.x += v}else{viewport.x = 0 + 150; window.scrollTo(0,0);};
        moveScroll('right');
        now.moveActor(viewport.x, viewport.y,now.core.clientId,null);
        e.preventDefault();
        break;

      //UP
      case 38:
        viewport.y -= v;
        moveScroll('up');
        now.moveActor(viewport.x, viewport.y,now.core.clientId,now.name);
        e.preventDefault();
        break;

      //DOWN
      case 40:
        viewport.y += v;
        moveScroll('down');
        now.moveActor(viewport.x, viewport.y,now.core.clientId,now.name);
        e.preventDefault();
        break;

      //ENTER
      case 13:
        now.distributeMessage(viewport.x, viewport.y,now.core.clientId,$("#chat").val());
        now.moveActor(viewport.x, viewport.y,now.core.clientId,$("#chat").val());

        $("#chat").val("");
        e.preventDefault();
      }
  });

  //INITIALIZE ACTORS/////////////////////////////////////////////////////
  now.ready(function() {
    now.moveActor(viewport.x, viewport.y,now.core.clientId,now.name);
  });

//CHAT///////////////////////////////////////////

now.msgActors = function(message) {


  //context.clearRect(0, 0, w, h);
  //context.beginPath();
 // for(var i in message) {
    var posX = message.x;
    var posY = message.y;
    var newMsg = message.msg;
    var plyID = message.id;
   //var plyNAME = actors[i].name;

    //UPDATE message
    if(plyID === now.core.clientId) {
       // console.log(newMsg);
        //SHOW NEW MESSAGE
        $("#bubble").html('');
        $("#bubble").show(250);
        $("#bubble").html(newMsg).delay(4500).hide(250);
    }else{
       // console.log(message.id);
       // console.log(newMsg);

       if(newMsg != null){
      //         console.log("noooot Nuuuuul");
               $("div[rel='"+plyID+"']").empty();
             text.append('<div class="msg" rel="'+plyID+'">'+ newMsg +'</div>');
             $("div[rel='"+plyID+"']").css('left',posX + 25);
             $("div[rel='"+plyID+"']").css('top',posY -10);
              $("div[rel='"+plyID+"']").delay(4500).hide(250);
              //$("div[rel='"+plyID+"']").delay(4500).html('');

            }
   }

  //END FOR
 //  }
}


//MAIN MSGs
now.receiveMessage = function(message){

    //ADD MSGs
    $("#messages").append(message+"<br />");

    //SCROLL MSGs
    var objDiv = document.getElementById("messages");
    objDiv.scrollTop = objDiv.scrollHeight;
  }


//NAME PLAYERS
now.name =  ("Guest " + Math.floor(Math.random()*100));


//END DOC
});

function movePlayer(distance){
  //console.log($('#player').offset().left - $(window).scrollLeft());
  pos = $('#player').offset().left - $(window).scrollLeft();

    if(pos < 0 || pos > (winW + 1) ) {
      console.log('man overboard!');
      return false;
    } else {
      return true;
    }
}


//MOVE SCROLL BAR WINDOW
function moveScroll(direction){

	//DIRECTION SWITCH
	switch(direction) {

		//LEFT
		case 'left':
		scroll = -scrollX;
		break;

		//RIGHT
		case 'right':
		scroll = scrollX;
		break;

		//UP
		case 'up':
		scroll = 0;
		break;

		//DOWN
		case 'down':
		scroll = 0;
		break;
	}

	window.scrollBy(scroll,1);
}


//POSITION ACTORS
now.positionActors = function(actors){

  //console.log(actors);
  context.clearRect(0, 0, w, h);
  context.beginPath();

  for(var i in actors) {

    var posX = actors[i].x;
    var posY = actors[i].y;
   // var plyID = actors[i].id;


    //UPDATE ACTORS
    if(i === now.core.clientId) {
     // console.log("my side");
      context.drawImage(img,posX,posY);
      $('#player').css('left',posX);
      $('#player').css('top',posY);
    } else {
     context.drawImage(img,posX,posY);
     // console.log("else  side");
      /*
      context.fillStyle = 'red';
      context.fillRect(posX + 25,posY- 55  , 125, 55);
      context.font = "13px arial";
      context.fillStyle = '#FFFFFF';
      context.fillText(plyNAME,posX + 25,posY - 40);
      */

         $("div[rel='"+i+"']").css('left',posX + 25);
         $("div[rel='"+i+"']").css('top',posY -10);

       //plyNAME = null;
       // context.clearRect(posX + 25,posY- 55, 125, 55);

    }


  //END FOR
  }

//END FUNC
}


</script>
<style>

* {
  margin: 0px;
  padding: 0px;
}
body {
	background: #CCC;

}

#map {
	background: transparent;
	border: 2px solid #000;
  position: absolute;
  top: 0px;
  z-index: 1;
  left: 0px;
}
#text {
  width: 3000px;
  height: 500px;
	background: transparent;
	border: 2px solid #Ff0000;
  position: absolute;
  top: 0px;
  z-index: 2;
  left: 0px;
}

#bg {
	width: 2600px;
	height: 500px;
  background: url('https://s3.amazonaws.com/jafar/sanfran.jpg') no-repeat;
  position: absolute;
	border: 2px solid #000;
  top: 0px;
  left: 0px;
  z-index: -1;
}

#player {
  position: absolute;
  left: 0px;

  background: #000;
  width: 25px;
  height: 25px;
}


#messages {
  width: 500px;
  background: #FFF;
  height: 120px;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 20px;
  padding: 20px;
  border: 1px solid #CCC;
  float: left;
  position: absolute;
  bottom: 50px;
  right: 0px;
  z-index: 10;
}


input#chat {
  padding: 15px;
  font: 22px arial;
  margin:  0px;
  position: fixed;
  top: 550px;
  left: 0px;
  background: #dcdcdc;
  z-index: 500;
  width: 100%;

}

#bubble{
  width: 120px;
  height: 50px;
  color: #FFF;
  font: 14px; arial;
  position: relative;
  left: 30px;
}

.msg {
  width: 120px;
  height: 50px;
  background: #FF000;
  position: absolute;

  z-index: 999;
}


</style>

</head>
<body>


<input type="text" name="chat" id="chat" tabindex="1" />

<div id="messages"></div>


  <canvas id="map" tabindex="0" height="500" width="3000"></canvas>
  <div id="text"></div>

  <div id="bg"></div>
 <div id="player">
  <div id="bubble"></div>
</div>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>The Town JS</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
	<script type="text/javascript" src="/nowjs/now.js"></script>


	<script type="text/javascript">

	//VARS
	var context;
	var text;

	//WINDOW INFO
	var winW = $(window).width();
	var winH = $(window).height();

	$(window).resize(function() {
	winW = $(window).width();
	console.log("new window width: " + winW);
	});

	//SETTINGS
	var w = 3000;
	var h = 500;
	var v = 21;
	var scroll;
	var scrollX = Math.ceil(w/winW * Math.floor(v/3));
	var pos = 0;

	//PLAYER
	var img = new Image();
	img.src = 'https://s3.amazonaws.com/jafar/smile.png';
	$(img).append('#player');


	//INIT VIEW
	var viewport = {
	id: now.core.clientId,
	width: w,
	height: h,
	x: winW/2,
	y: 100
	}

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

	//GET CANVAS
	context = $('#map')[0].getContext('2d');
	text = $('#text');

	//KEYBOARD CONTROLS
	$(window).keydown(function(e) {

	//KEYBOARD SWITCH
	switch(e.which) {

	//LEFT
	case 37:
	if(movePlayer(viewport.x)){viewport.x -= v}else{viewport.x = w - 150; window.scrollTo(w,0);};
	moveScroll('left');
	now.moveActor(viewport.x, viewport.y,now.core.clientId,null);
	e.preventDefault();
	break;

	//RIGHT
	case 39:
	if(movePlayer(viewport.x)){viewport.x += v}else{viewport.x = 0 + 150; window.scrollTo(0,0);};
	moveScroll('right');
	now.moveActor(viewport.x, viewport.y,now.core.clientId,null);
	e.preventDefault();
	break;

	//UP
	case 38:
	viewport.y -= v;
	moveScroll('up');
	now.moveActor(viewport.x, viewport.y,now.core.clientId,now.name);
	e.preventDefault();
	break;

	//DOWN
	case 40:
	viewport.y += v;
	moveScroll('down');
	now.moveActor(viewport.x, viewport.y,now.core.clientId,now.name);
	e.preventDefault();
	break;

	//ENTER
	case 13:
	now.distributeMessage(viewport.x, viewport.y,now.core.clientId,$("#chat").val());
	now.moveActor(viewport.x, viewport.y,now.core.clientId,$("#chat").val());

	$("#chat").val("");
	e.preventDefault();
	}
	});

	//INITIALIZE ACTORS/////////////////////////////////////////////////////
	now.ready(function() {
	now.moveActor(viewport.x, viewport.y,now.core.clientId,now.name);
	});

	//CHAT///////////////////////////////////////////

	now.msgActors = function(message) {


	//context.clearRect(0, 0, w, h);
	//context.beginPath();
	// for(var i in message) {
	var posX = message.x;
	var posY = message.y;
	var newMsg = message.msg;
	var plyID = message.id;
	//var plyNAME = actors[i].name;

	//UPDATE message
	if(plyID === now.core.clientId) {
	// console.log(newMsg);
	//SHOW NEW MESSAGE
	$("#bubble").html('');
	$("#bubble").show(250);
	$("#bubble").html(newMsg).delay(4500).hide(250);
	}else{
	// console.log(message.id);
	// console.log(newMsg);

	if(newMsg != null){
	// console.log("noooot Nuuuuul");
	$("div[rel='"+plyID+"']").empty();
	text.append('<div class="msg" rel="'+plyID+'">'+ newMsg +'</div>');
	$("div[rel='"+plyID+"']").css('left',posX + 25);
	$("div[rel='"+plyID+"']").css('top',posY -10);
	$("div[rel='"+plyID+"']").delay(4500).hide(250);
	//$("div[rel='"+plyID+"']").delay(4500).html('');

	}
	}

	//END FOR
	// }
	}


	//MAIN MSGs
	now.receiveMessage = function(message){

	//ADD MSGs
	$("#messages").append(message+"<br />");

	//SCROLL MSGs
	var objDiv = document.getElementById("messages");
	objDiv.scrollTop = objDiv.scrollHeight;
	}


	//NAME PLAYERS
	now.name = ("Guest " + Math.floor(Math.random()*100));


	//END DOC
	});

	function movePlayer(distance){
	//console.log($('#player').offset().left - $(window).scrollLeft());
	pos = $('#player').offset().left - $(window).scrollLeft();

	if(pos < 0 \|\| pos > (winW + 1) ) {
	console.log('man overboard!');
	return false;
	} else {
	return true;
	}
	}



	//MOVE SCROLL BAR WINDOW
	function moveScroll(direction){

	//DIRECTION SWITCH
	switch(direction) {

	//LEFT
	case 'left':
	scroll = -scrollX;
	break;

	//RIGHT
	case 'right':
	scroll = scrollX;
	break;

	//UP
	case 'up':
	scroll = 0;
	break;

	//DOWN
	case 'down':
	scroll = 0;
	break;
	}

	window.scrollBy(scroll,1);
	}


	//POSITION ACTORS
	now.positionActors = function(actors){

	//console.log(actors);
	context.clearRect(0, 0, w, h);
	context.beginPath();

	for(var i in actors) {

	var posX = actors[i].x;
	var posY = actors[i].y;
	// var plyID = actors[i].id;


	//UPDATE ACTORS
	if(i === now.core.clientId) {
	// console.log("my side");
	context.drawImage(img,posX,posY);
	$('#player').css('left',posX);
	$('#player').css('top',posY);
	} else {
	context.drawImage(img,posX,posY);
	// console.log("else side");
	/*
	context.fillStyle = 'red';
	context.fillRect(posX + 25,posY- 55 , 125, 55);
	context.font = "13px arial";
	context.fillStyle = '#FFFFFF';
	context.fillText(plyNAME,posX + 25,posY - 40);
	*/

	$("div[rel='"+i+"']").css('left',posX + 25);
	$("div[rel='"+i+"']").css('top',posY -10);

	//plyNAME = null;
	// context.clearRect(posX + 25,posY- 55, 125, 55);

	}


	//END FOR
	}

	//END FUNC
	}


	</script>
	<style>

	* {
	margin: 0px;
	padding: 0px;
	}
	body {
	background: #CCC;

	}

	#map {
	background: transparent;
	border: 2px solid #000;
	position: absolute;
	top: 0px;
	z-index: 1;
	left: 0px;
	}
	#text {
	width: 3000px;
	height: 500px;
	background: transparent;
	border: 2px solid #Ff0000;
	position: absolute;
	top: 0px;
	z-index: 2;
	left: 0px;
	}

	#bg {
	width: 2600px;
	height: 500px;
	background: url('https://s3.amazonaws.com/jafar/sanfran.jpg') no-repeat;
	position: absolute;
	border: 2px solid #000;
	top: 0px;
	left: 0px;
	z-index: -1;
	}

	#player {
	position: absolute;
	left: 0px;

	background: #000;
	width: 25px;
	height: 25px;
	}



	#messages {
	width: 500px;
	background: #FFF;
	height: 120px;
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 20px;
	padding: 20px;
	border: 1px solid #CCC;
	float: left;
	position: absolute;
	bottom: 50px;
	right: 0px;
	z-index: 10;
	}


	input#chat {
	padding: 15px;
	font: 22px arial;
	margin: 0px;
	position: fixed;
	top: 550px;
	left: 0px;
	background: #dcdcdc;
	z-index: 500;
	width: 100%;

	}

	#bubble{
	width: 120px;
	height: 50px;
	color: #FFF;
	font: 14px; arial;
	position: relative;
	left: 30px;
	}

	.msg {
	width: 120px;
	height: 50px;
	background: #FF000;
	position: absolute;

	z-index: 999;
	}


	</style>

	</head>
	<body>


	<input type="text" name="chat" id="chat" tabindex="1" />

	<div id="messages"></div>



	<canvas id="map" tabindex="0" height="500" width="3000"></canvas>
	<div id="text"></div>

	<div id="bg"></div>
	<div id="player">
	<div id="bubble"></div>
	</div>


	</body>
	</html>