unoseistres/index.html

## index.html
<html>
	<head>


	 		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
		<script type="text/javascript">
		var sharonIndex=0;
		var myid;

			var socket = io.connect('http://104.131.93.171');

			socket.on('connect', function() {
				console.log("Connected");
				 myid = socket.io.engine.id;
			});

//æˆ‘æ”¹äº†é€™,based on ä¸ å Œsocketid,ç•«åˆ°ä¸ å Œæ¬„ä½
socket.on('imageback', function (data) {
//console.log(data.array);
//console.log("myid:"+myid);
myidarray=data.array;
//console.log("myidarray" + myidarray);

// //console.log(useridarray.clientid);


// socket.on('imageback', function (data) {
// //console.log(data.clientid);
// });


///////sharon
//sharon
(function () {

	var sharon,
		sharonImage,
		sharonCanvas;

	function sharonLoop () {

	  window.requestAnimationFrame(sharonLoop);

	  sharon.render();
	}

	function sprite (options) {

		var that = {},
			frameIndex = 0,
			numberOfFrames = options.numberOfFrames || 1;

		that.context = options.context;
		that.width = options.width;
		that.height = options.height;
		that.image = options.image;


				if (myid==data.array[5]){
		window.addEventListener('keydown', function(f) {
    if (f.type == 'keydown') {
        if (f.keyCode == 39) {
        	if(sharonIndex<3){
        		sharonIndex+=1;
        	}else{sharonIndex=0}
        	}

        if (f.keyCode == 37) {
        	if(sharonIndex>0){
        	sharonIndex-=1;
        	}else{sharonIndex=3}
        	}
		socket.emit('sharon',sharonIndex);
		//console.log(sharonIndex);
    }
    return false;
    //console.log(e.keyCode);

    //emit command


});
	}


		that.render = function () {
			var sharondraw=0;
			//socket放在這裡好ㄇ？
			socket.on('sharon', function (sharondata) {
			// //console.log("I got this" + sharondata);
			sharondraw=sharondata;
		  // Clear the canvas
		  that.context.clearRect(0, 0, that.width, that.height);

		  // Draw the animation
		  that.context.drawImage(
		    that.image,
		    //他現在有兩個問題 一個是我進去的時候他不會開始畫 嘴巴那邊會是白的 我一定要開始按按鍵後才會開始畫
		    //我設了sharondraw=0也沒用
		    //還有就是只要有新的client近來他就會reload, 會重新來 然後效率有點低 反映蠻慢的 顆顆
		    sharondraw * that.width / numberOfFrames,
		    0,
		    that.width / numberOfFrames,
		    that.height,
		    0,
		    0,
		    that.width / numberOfFrames,
		    that.height);
		  });
		};

		return that;
	}

	// Get sharonCanvas
	sharonCanvas = document.getElementById("sharon");
	sharonCanvas.width = 433;
	sharonCanvas.height = 433;

	// Create sprite sheet
	sharonImage = new Image();

	// Create sprite
	sharon = sprite({
		context: sharonCanvas.getContext("2d"),
		width: 2160,
		height: 433,
		image: sharonImage,
		numberOfFrames: 5,
		/* console.log("loaded sprite sheet"); */
	});

	// Load sprite sheet

	sharonImage.addEventListener("load", sharonLoop);
	sharonImage.src = "images/wavingseq.png";
/* console.log("loaded sprite sheet"; */


} ());


});

function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
}

var userid = function() {
//making dataURL into objects
var randomid;
randomid=makeid();
//console.log(randomid)
socket.emit('image',randomid);
};


			// Receive from any event
			socket.on('chatmessage', function (data) {
				console.log(data);
				document.getElementById('messages').innerHTML = "" + data +
 + "" + document.getElementById('messages').innerHTML;
			});


			socket.on ('backcolor', function(data){
			var co1 = data;
				console.log(data);
				backco(co1);

			});


			var sendmessage = function(message) {
				console.log("chatmessage: " + message);
				socket.emit('chatmessage', message);
			};

			var sendColor = function(body){
					console.log("coloring" + body);
					socket.emit('backcolor', body);

			};
			function backco(data){
				document.body.style.backgroundColor = data;
			};

/* socket.emit('image',randomid); */

		</script>
		<style>
		p{
		visibility: hidden;
		}

		body{
			background-color:;
		}
		#sharon{
			border: 5px solid black
		}


		</style>

	</head>
  <body onload="userid();">
  <!-- <script src="control.js"></script> -->

        <canvas id="sharon"></canvas>

         <p id="accel"> "accelerometer of phone"</p>

 <div id="messages">
 No Messages Yet
 </div>
 <input type="text" id="message" name="message">
 <input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">


<!--  //color selector  -->
<!--  <input type = "color" onchange="selectColor(this.value)">  -->
 </body>
</html>
	<html>
	<head>


	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
	var sharonIndex=0;
	var myid;

	var socket = io.connect('http://104.131.93.171');

	socket.on('connect', function() {
	console.log("Connected");
	myid = socket.io.engine.id;
	});

	//æˆ‘æ”¹äº†é€™,based on ä¸ å Œsocketid,ç•«åˆ°ä¸ å Œæ¬„ä½
	socket.on('imageback', function (data) {
	//console.log(data.array);
	//console.log("myid:"+myid);
	myidarray=data.array;
	//console.log("myidarray" + myidarray);

	// //console.log(useridarray.clientid);



	// socket.on('imageback', function (data) {
	// //console.log(data.clientid);
	// });



	///////sharon
	//sharon
	(function () {

	var sharon,
	sharonImage,
	sharonCanvas;

	function sharonLoop () {

	window.requestAnimationFrame(sharonLoop);

	sharon.render();
	}

	function sprite (options) {

	var that = {},
	frameIndex = 0,
	numberOfFrames = options.numberOfFrames \|\| 1;

	that.context = options.context;
	that.width = options.width;
	that.height = options.height;
	that.image = options.image;


	if (myid==data.array[5]){
	window.addEventListener('keydown', function(f) {
	if (f.type == 'keydown') {
	if (f.keyCode == 39) {
	if(sharonIndex<3){
	sharonIndex+=1;
	}else{sharonIndex=0}
	}

	if (f.keyCode == 37) {
	if(sharonIndex>0){
	sharonIndex-=1;
	}else{sharonIndex=3}
	}
	socket.emit('sharon',sharonIndex);
	//console.log(sharonIndex);
	}
	return false;
	//console.log(e.keyCode);

	//emit command





	});
	}


	that.render = function () {
	var sharondraw=0;
	//socket放在這裡好ㄇ？
	socket.on('sharon', function (sharondata) {
	// //console.log("I got this" + sharondata);
	sharondraw=sharondata;
	// Clear the canvas
	that.context.clearRect(0, 0, that.width, that.height);

	// Draw the animation
	that.context.drawImage(
	that.image,
	//他現在有兩個問題一個是我進去的時候他不會開始畫嘴巴那邊會是白的我一定要開始按按鍵後才會開始畫
	//我設了sharondraw=0也沒用
	//還有就是只要有新的client近來他就會reload, 會重新來然後效率有點低反映蠻慢的顆顆
	sharondraw * that.width / numberOfFrames,
	0,
	that.width / numberOfFrames,
	that.height,
	0,
	0,
	that.width / numberOfFrames,
	that.height);
	});
	};

	return that;
	}

	// Get sharonCanvas
	sharonCanvas = document.getElementById("sharon");
	sharonCanvas.width = 433;
	sharonCanvas.height = 433;

	// Create sprite sheet
	sharonImage = new Image();

	// Create sprite
	sharon = sprite({
	context: sharonCanvas.getContext("2d"),
	width: 2160,
	height: 433,
	image: sharonImage,
	numberOfFrames: 5,
	/* console.log("loaded sprite sheet"); */
	});

	// Load sprite sheet

	sharonImage.addEventListener("load", sharonLoop);
	sharonImage.src = "images/wavingseq.png";
	/* console.log("loaded sprite sheet"; */


	} ());



	});

	function makeid()
	{
	var text = "";
	var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

	for( var i=0; i < 5; i++ )
	text += possible.charAt(Math.floor(Math.random() * possible.length));

	return text;
	}

	var userid = function() {
	//making dataURL into objects
	var randomid;
	randomid=makeid();
	//console.log(randomid)
	socket.emit('image',randomid);
	};


	// Receive from any event
	socket.on('chatmessage', function (data) {
	console.log(data);
	document.getElementById('messages').innerHTML = "" + data +
	+ "" + document.getElementById('messages').innerHTML;
	});



	socket.on ('backcolor', function(data){
	var co1 = data;
	console.log(data);
	backco(co1);

	});


	var sendmessage = function(message) {
	console.log("chatmessage: " + message);
	socket.emit('chatmessage', message);
	};

	var sendColor = function(body){
	console.log("coloring" + body);
	socket.emit('backcolor', body);

	};
	function backco(data){
	document.body.style.backgroundColor = data;
	};

	/* socket.emit('image',randomid); */

	</script>
	<style>
	p{
	visibility: hidden;
	}

	body{
	background-color:;
	}
	#sharon{
	border: 5px solid black
	}


	</style>

	</head>
	<body onload="userid();">
	<!-- <script src="control.js"></script> -->

	<canvas id="sharon"></canvas>

	<p id="accel"> "accelerometer of phone"</p>

	<div id="messages">
	No Messages Yet
	</div>
	<input type="text" id="message" name="message">
	<input type="submit" value="submit" onclick="sendmessage(document.getElementById('message').value);">




	<!-- //color selector -->
	<!-- <input type = "color" onchange="selectColor(this.value)"> -->
	</body>
	</html>