icfp15/js/gui.js

var mineGui_mine, mineGui_curmap, mineGui_curndx, mineGui_moves = "";
var mineGui_movesBackup = [];
var mineGui_customNdx = 1;
var mineGui_canvas = true;

var mineGui_imgSources = {
	'sprites': 'sprites.png'
};
var mineGui_spriteOffset = {
	'R': 5,
	'#': 7,
	'*': 6,
	'\\': 2,
	'L': 3,
	'O': 4,
	'.': 0,
	' ': 1
};

var mineGui_images = {};
var mineGui_imagesNeed = 0;

function mineGui_loadImg(key, src) {
	var img;
	++mineGui_imagesNeed;
	mineGui_images[key] = img = new Image();
	img.onload = function() {
		if (0 == --mineGui_imagesNeed) {
			mineGui_show();
		}
	};
	img.src = src;
}

function mineGui_start() {
	var div = document.getElementById("mineGui");
	var selMap = document.getElementById("mineGui_selectMap");
	var inpMoves = document.getElementById("mineGui_moves");
	var customMapInput = document.getElementById("mineGui_data")
	var validMoves = {L:1,U:1,R:1,D:1,A:1,W:1};
	var k;
	document.getElementById("mineGui_addData").onclick = mineGui_addCustomMap;
	selMap.onchange = function() {
		var k = selMap.options[selMap.selectedIndex].text;
		mineGui_setMap(mineMaps[k], selMap.selectedIndex);
		selMap.blur();
	};
	var inpValidate = function() {
		if (inpMoves.value == mineGui_moves) return;
		mineGui_moves = "";
		var txt = inpMoves.value.toUpperCase(), i;
		for (i = 0; i < txt.length; ++i) {
			if (validMoves[txt[i]]) mineGui_moves += txt[i];
		}
		mineGui_updateMine();
	};
	var delayInpValidate = function(event) {
// 		console.log("input", event, event.type);
		window.setTimeout(inpValidate, 0);
	};
	inpMoves.onchange = delayInpValidate;
	inpMoves.onpaste = delayInpValidate;
	inpMoves.onkeypress = delayInpValidate;
	document.body.onkeydown = function (event) {
// 		console.log("body", event);
// 		console.log("isChar", event.isChar,
// 					"; char '"+String.fromCharCode(event.charCode)+
// 					"'; key '"+String.fromCharCode(event.keyCode)+"'")
		if (document.activeElement === customMapInput) return;
		if (event.ctrlKey || event.altKey || event.metaKey) return;
		var handled = true;
		
		// ascii keys are reported as uppercase ascii code
		var cmd = String.fromCharCode(event.keyCode);
		if (validMoves[cmd]) {
			mineGui_move(cmd);
		} else if (cmd == 'C') { // clear
			mineGui_moves = "";
			mineGui_updateMine();
		} else if (cmd == 'T') { // toggle text/canvas
			mineGui_canvas = !mineGui_canvas;
			console.log("canvas show", mineGui_canvas);
			mineGui_show();
		} else switch (event.keyCode) {
		case 8: // backspace -> undo
			mineGui_moves = mineGui_moves.slice(0,-1);
			mineGui_updateMine();
			break;
		case 33: // page up
			if (selMap.selectedIndex > 0) {
				selMap.selectedIndex--;
				selMap.onchange();
			}
			break;
		case 34: // page down
			if (selMap.selectedIndex+1 < selMap.options.length) {
				selMap.selectedIndex++;
				selMap.onchange();
			}
			break;
		case 37: // left
			if (mineGui_mine.validMove('L')) mineGui_move('L');
			break;
		case 38: // up
			if (mineGui_mine.validMove('U')) mineGui_move('U');
			break;
		case 39: // right
			if (mineGui_mine.validMove('R')) mineGui_move('R');
			break;
		case 40: // down
			if (mineGui_mine.validMove('D')) mineGui_move('D');
			break;
		default:
			handled = false;
			break;
		}
		if (handled) {
// 			console.log("body handled", event, event.type);
			event.preventDefault();
			return true;
		}
	};
	for (k in mineGui_imgSources) {
		if (mineGui_imgSources.hasOwnProperty(k)) {
			mineGui_loadImg(k, mineGui_imgSources[k]);
		}
	}
	for (k in mineMaps) {
		if (mineMaps.hasOwnProperty(k)) {
			var entry = document.createElement("option");
			entry.textContent = k;
			selMap.appendChild(entry);
		}
		//entry.add
	}
	selMap.selectedIndex = 0;
	selMap.onchange();
}

function mineGui_addCustomMap() {
	var map = document.getElementById("mineGui_data").value;
	var mine;
	var selMap = document.getElementById("mineGui_selectMap");
	document.getElementById("mineGui_addDataResult").textContent = "";
	try {
		mine = new Mine(map);
	} catch (e) {
		document.getElementById("mineGui_addDataResult").textContent = "Adding map failed: " + e;
		return;
	}
	mineMaps["custom" + mineGui_customNdx] = map;
	var entry = document.createElement("option");
	entry.textContent = "custom" + mineGui_customNdx;
	selMap.appendChild(entry);
	mineGui_customNdx++;

	window.setTimeout(function() {
		selMap.selectedIndex = selMap.options.length - 1;
		selMap.onchange();
	}, 0);
}

function mineGui_move(cmd) {
	for (i = 0; i < cmd.length; ++i) {
		if (mineGui_mine.state != Mine.ALIVE) break;
		mineGui_moves += cmd[i];
		mineGui_mine.move(cmd[i]);
	}
	mineGui_show();
}

function mineGui_setMap(map, ndx) {
	mineGui_movesBackup[mineGui_curndx] = mineGui_moves;
	mineGui_curmap = map;
	mineGui_curndx = ndx;
	mineGui_moves = mineGui_movesBackup[mineGui_curndx];
	if (!mineGui_moves) mineGui_moves = "";
	mineGui_updateMine();
}

function mineGui_updateMine() {
	// redo moves
	mineGui_mine = new Mine(mineGui_curmap);
	var cmd = mineGui_moves;
	mineGui_moves = "";
	for (i = 0; i < cmd.length; ++i) {
		if (mineGui_mine.state != Mine.ALIVE) break;
		mineGui_moves += cmd[i];
		mineGui_mine.move(cmd[i]);
	}
	mineGui_show();
}

function mineGui_show() {
	var waterLevel = Math.max(mineGui_mine.meta.Water, 0);
	var map = mineGui_mine.toString().split(/\n/);
	var canv = document.getElementById("mineGui_mineCanvas");
	var mapNode = document.getElementById("mineGui_mineMap");
	if (mineGui_canvas && 0 == mineGui_imagesNeed) {
		canv.style.display = '';
		canv.style.visibility = 'visible';
		mapNode.style.display = 'none';
		mapNode.style.visibility = 'hidden';
		canv.width = 16*mineGui_mine.width;
		canv.height = 16*mineGui_mine.height;
		var ctx = canv.getContext("2d");
		ctx.globalAlpha=1.0;
		ctx.fillStyle = "black";
		ctx.fillRect(0,0,canv.width, canv.height);
		var sprites = mineGui_images.sprites;
		
		for (var y = 0; y < mineGui_mine.height; ++y) {
			for (var x = 0; x < mineGui_mine.width; ++x) {
				ctx.drawImage(sprites, mineGui_spriteOffset[map[y][x]] * 16, 0, 16, 16, 16*x, 16*y, 16, 16);
			}
		}
		ctx.fillStyle = "#0000FF";
		ctx.globalAlpha = 0.3;
		y = 16*(mineGui_mine.height - waterLevel);
		ctx.fillRect(0,y,canv.width, canv.height-y);
	} else {
		canv.style.display = 'none';
		canv.style.visibility = 'hidden';
		mapNode.style.display = '';
		mapNode.style.visibility = 'visible';
	}
	
	if (waterLevel > 0) {
		document.getElementById("mineGui_mineMapWater").textContent = map.splice(-waterLevel).join("\n");
	} else {
		document.getElementById("mineGui_mineMapWater").textContent = "";
	}
	document.getElementById("mineGui_mineMapDry").textContent = map.join("\n");
	
	document.getElementById("mineGui_moves").value = mineGui_moves;
	var state = "";
	switch (mineGui_mine.state) {
	case Mine.ALIVE:
		state = "Still mining";
		break;
	case Mine.LOST:
		state = "Robot broken - " + mineGui_mine.reason;
		break;
	case Mine.ABORTED:
		state = "Aborted";
		break;
	case Mine.WON:
		state = "Won - " + mineGui_mine.reason;
		break;
	}
	document.getElementById("mineGui_meta").textContent = mineGui_mine.metaText();
	document.getElementById("mineGui_state").textContent = state;
	document.getElementById("mineGui_score").textContent = mineGui_mine.score;
	document.getElementById("mineGui_scoreMoves").textContent = mineGui_mine.moves;
	document.getElementById("mineGui_scoreLambdas").textContent = mineGui_mine.found_lambdas;
	document.getElementById("mineGui_belowWater").textContent = mineGui_mine.moves_below_water;
}