play.html

<div class="wrapper">
<div id='item_list' style="z-index: 1; position: absolute; top: 0px; left: 0px; background: #000;display: none;"> Items:<br>
<select id="item_select"></select>
<button id='btn_haul' type="button" onclick="haul_cur_item()">Haul</button>
<button id='btn_equip' type="button" onclick="equip_cur_item()">Equip</button>
<button type="button" onclick="hide_item_list()">Cancel</button>
</div>
<canvas id="canvas" width="!!canvas_w!!" height="!!canvas_h!!"></canvas>

<div class="chat_window">
<label>Chat:</label>
<div class="messages" id="chat_messages">
</div>
<form name="message" action="">
    <input name="usermsg" type="text" id="usermsg" size="63" onkeypress="return input_box(event)" />
    <button type="button" onclick="send_message()">Send</button>
</form>
</div>


</div>
<div>
  <button type="button" onclick="view_dz+=1">Look up</button>
  <button type="button" onclick="view_dz=0">Reset</button>
  <button type="button" onclick="view_dz-=1">Look down</button>
  <br>
  <button type="button" onclick="haul_item()">Haul Item</button>
  <button type="button" onclick="drop_hauled_item()">Drop Haul</button>
  <button type="button" onclick="equip_item()">Equip item</button>
</div>
<br>

<img id="tilesheet" src="http://i.imgur.com/fUGSAWC.png" alt="tilesheet" style="display: none;">
<script src="map.js"></script>
<script>

setup_map("canvas","tilesheet",16,16,!!size!!)
var c = document.getElementById("canvas");
var view_dz=0;

var movement={
	Numpad8:[0,-1],
	Numpad7:[-1,-1],
	Numpad4:[-1,0],
	Numpad1:[-1,1],
	Numpad2:[0,1],
	Numpad3:[1,1],
	Numpad6:[1,0],
	Numpad9:[1,-1]
}
function isNil(value) {
  return value == undefined;
}
var cur_movement
document.onkeydown=function (key) {
	cur_movement=movement[key.code]
}
document.onkeyup=function (key) {
	cur_movement=null
}
function key_movement(){
	if(!isNil(cur_movement))
	{
		move_unit(cur_movement[0],cur_movement[1],view_dz,function () {
			setTimeout(key_movement, 100);
		})
	}
	else
	{
		setTimeout(key_movement, 100);
	}
}
key_movement()
function update_map() {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4) {
		if(this.status==200)
		{
			var json_map= JSON.parse(this.responseText);
			draw_map(json_map)
		}
		setTimeout(update_map, 100);
	}
	};
	xhttp.open("GET", "map?dz="+view_dz, true);
	xhttp.send();
}
var mouse_pos={x:0,y:0}
function move_unit(dx,dy,dz,on_done) {
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4 ) {
		if(!isNil(on_done))
			on_done(this.status == 200);
	}
	};
	xhttp.open("GET", "move_unit?dx="+dx+"&dy="+dy+"&dz="+dz, true);
	xhttp.send();
}
var mouseIsDown = false;
function update_mouse(e) {
	var cx=Math.floor(e.x/tile_x)-(canvas_tile_count-1)/2;
	var cy=Math.floor(e.y/tile_y)-(canvas_tile_count-1)/2;
	mouse_pos={x:cx,y:cy}
}
c.onmousedown = function(e){
	update_mouse(e)
    //dragOffset.x = e.x - mainLayer.trans.x;
    //dragOffset.y = e.y - mainLayer.trans.y;
    move_unit(mouse_pos.x,mouse_pos.y,view_dz)
    mouseIsDown = true;
}

c.onmouseup = function(e){

    mouseIsDown = false;
}
/* //TODO issue commands each X time
c.onmousemove = function(e){
    if(!mouseIsDown) return;
    update_mouse(e)
    return false;
}
*/
update_map();


function add_max(a,e,m)
{
	return a.concat(e).slice(-m)
}
/*
	item stuff
*/
function drop_hauled_item()
{
	var xhttp = new XMLHttpRequest();
	xhttp.open("GET", "drop_hauled_item", true);
	xhttp.send();
}
function equip_cur_item(id)
{
	var cur_id
	if(!isNil(id))
		cur_id=id
	else
	{
		var its=document.getElementById('item_select')
		var cur_id=Number(its.value)
	}
	var xhttp = new XMLHttpRequest();
	xhttp.open("GET", "equip_item?id="+cur_id, true);
	xhttp.send();
	hide_item_list()
}
function haul_cur_item(id)
{
	var cur_id
	if(!isNil(id))
		cur_id=id
	else
	{
		var its=document.getElementById('item_select')
		var cur_id=Number(its.value)
	}
	var xhttp = new XMLHttpRequest();
	xhttp.open("GET", "haul_item?id="+cur_id, true);
	xhttp.send();
	hide_item_list()
}
function hide_item_list()
{
	var itl=document.getElementById('item_list')
	itl.style.display='none'
}
function show_item_list(items)
{
	var itl=document.getElementById('item_list')
	itl.style.display='initial'
	var its=document.getElementById('item_select')
	for (a in its.options) { its.options.remove(0); }
	items.forEach(function (e,i) {
			its.options.add( new Option(e.name,[e.id], false) );
	})
}
function haul_item()
{
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4 ) {
		if(this.status == 200)
		{
			document.getElementById('btn_equip').style.display='none'
			document.getElementById('btn_haul').style.display='initial'
			var items=JSON.parse(this.responseText)
			if (items.length>1)
				show_item_list(items)
			else if (items.length==1)
				haul_cur_item(items[0].id)
		}
	}
	};
	xhttp.open("GET", "look_items", true);
	xhttp.send();
}
function equip_item()
{
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4 ) {
		if(this.status == 200)
		{
			document.getElementById('btn_equip').style.display='initial'
			document.getElementById('btn_haul').style.display='none'
			var items=JSON.parse(this.responseText)
			if (items.length>1)
				show_item_list(items)
			else if (items.length==1)
				equip_cur_item(items[0].id)
		}
	}
	};
	xhttp.open("GET", "look_items", true);
	xhttp.send();
}
/*
	chat stuff
*/
var message_log={last_seen:0,text:[]}
function input_box(e)
{
	if(e.keyCode==13)
	{
		send_message()
		return false;
	}
}
function send_message(){
	var el=document.getElementById('usermsg')

	var xhttp = new XMLHttpRequest();
	var msg=encodeURI(el.value)
	xhttp.open("GET", "send_message?msg="+msg, true);
	xhttp.send();
	el.value=""
}
function update_message_log(){
	element=document.getElementById("chat_messages")
	element.innerHTML=""
	message_log.text.forEach(function (el) {
		element.innerHTML+=el+"<br>"
	})
}
function get_message_log(){
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4) {
		if(this.status == 200)
		{
			var json_report= JSON.parse(this.responseText);
			message_log.last_seen=json_report.current_count
			var print_lines=10
			if(json_report.log.length>0)
			{
				message_log.text=add_max(message_log.text,json_report.log,print_lines)
				update_message_log()
			}
		}
		setTimeout(get_message_log, 200);
	}
	};
	xhttp.open("GET", "get_message_log?last_seen="+message_log.last_seen, true);
	xhttp.send();
}
get_message_log()
/*
	combat report stuff
*/
var combat_log={last_seen:0,text:[]}

function update_log(){
	element=document.getElementById("combat_log_div")
	element.innerHTML=""
	combat_log.text.forEach(function (el) {
		element.innerHTML+=el+"<br>"
	})
}
function get_combat_log(){

	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
	if (this.readyState == 4) {
		if(this.status == 200)
		{
			var json_report= JSON.parse(this.responseText);
			combat_log.last_seen=json_report.current_count
			var print_lines=10
			if(json_report.log.length>0)
			{
				combat_log.text=add_max(combat_log.text,json_report.log,print_lines)
				update_log()
			}
		}
		setTimeout(get_combat_log, 200);
	}
	};
	xhttp.open("GET", "get_report_log?last_seen="+combat_log.last_seen, true);
	xhttp.send();
}
get_combat_log()
</script>
<button onclick="location.href = 'new_unit';">Ask for new unit</button> 
<div id="combat_log_div">

</div>