var socket = io();

socket.on('connect', function () {
	console.log("connect!");
	socket.emit("getmap", 100, 100);
});

socket.on('getmap', function (map) {
	console.log(map);
	var domMap = $("#map");

	domMap.empty();
	for(var w=0;w<map.length;w++) {
		for(var h=0;h<map[w].length;h++) {
			var spClass = "ground";
			if(map[w][h]=="0")
				spClass = "water";
			else if(map[w][h]=="1")
				spClass = "groundBottom";
			else if(map[w][h]=="2")
				spClass = "groundTop";
			else if(map[w][h]=="3")
				spClass = "groundLeft";
			else if(map[w][h]=="4")
				spClass = "groundRight";
			else if(map[w][h]=="5")
				spClass = "groundBottomRight";
			else if(map[w][h]=="6")
				spClass = "groundBottomLeft";
			else if(map[w][h]=="7")
				spClass = "groundTopRight";
			else if(map[w][h]=="8")
				spClass = "groundTopLeft";
			else if(map[w][h]=="9")
				spClass = "corner_wg1";
			domMap.append('<img style="top:'+(w*32)+'px; left:'+(h*32)+'px" src="./img/plain.png" class="sprite '+spClass+'">');
		}
	}
});