netsim/js/ui.js

$(document).ready(function(){
	/* todo: this seems to cause noticeable lag but would be really nice to have
	$(window).on('resize orientationChange', function(e) {
		//game.scale.setGameSize($(window).width(), $(window).height());
		$('#pane').css('left', ($(window).width() * 0.7) + 'px');
		$('#pane').css('width', ($(window).width() * 0.3 - 40) + 'px');
		$('#pane').css('height', ($(window).height() - 40) + 'px');
	});*/
	$('[name="username"]').focus();
	$('[type="button"]').button();
});

function doPacketAnimation(src, dst, payload) {
	var pkt = grpPackets.create(devices[src].sprite.centerX - 16, devices[src].sprite.centerY - 16, 'packet');
	pkt.inputEnabled = true;
	pkt.events.onInputDown.add(onPacketClick, payload);
	var tween = game.add.tween(pkt);
	pkt.dst = dst;
	pkt.payload = payload;
	tween.to({x: devices[dst].sprite.centerX - 16, y: devices[dst].sprite.centerY - 16}, 3000, Phaser.Easing.Sinusoidal.InOut);
	tween.onComplete.add(donePacket, pkt);
	tween.start();
}

function createLaunchers() {
	grpLaunchers.callAll('kill');
	grpLaunchers.destroy(true);
	grpLaunchers = game.add.group();

	for (var i = 0; i < playerPackets.length; i++) {
		var edit = grpLaunchers.add( game.add.button(20, 120 + i * 60, 'edit', btnEdit) );
		edit.launcherIndex = i;
		var launch = grpLaunchers.add( game.add.button(80, 120 + i * 60, 'launch', btnLaunch) );
		launch.launcherIndex = i;
	}

	grpLaunchers.add( game.add.button(20, 135 + 60 * playerPackets.length, 'add', btnAdd) );
}

function createPacketEditor(index, packet) {
	var str = "Sent from: <select id=\"pktFrom\">";
	for (var i = 0; i < level.devices.length; i++) {
		if (level.devices[i].player) {
			str += "<option"+(packet.from == level.devices[i].id ? " selected" : "")+">"+level.devices[i].id+"</option>";
		}
	}
	str += "</select><br><fieldset><legend>Network Layer</legend>";
	str += "srcip: <input type=\"text\" id=\"srcip\" value=\""+payloadStr(packet,"network","srcip")+"\"><br>";
	str += "dstip: <input type=\"text\" id=\"dstip\" value=\""+payloadStr(packet,"network","dstip")+"\">";
	str += `</fieldset>
	<fieldset>
	<legend>Transport Layer</legend>
		payload: <input type=\"text\" id=\"payload\"></input><br>
		proto: <input type=\"text\" id=\"other\"></input>
	</fieldset>`;

	$("#editor").html(str);
	$('#editor').dialog({
		title: index < 0 ? "Add packet" : "Update packet",
		resizable:false,
		buttons:[{ text: index < 0 ? "Add" : "Update", click:function() { updatePlayerPacket(index < 0 ? playerPackets.length : index); createLaunchers(); $(this).dialog("close");}}]
	});
	$('select').selectmenu();
	$('#editor').show();
}

function updatePlayerPacket(index) {
	playerPackets[index] = {
		from: $("#pktFrom").val(),
		payload:{
			network:{
				srcip: $("#srcip").val(),
				dstip: $("#dstip").val()
			}
		}
	};

	savePlayerPackets();
}

function payloadStr(packet, layer, field) {
	return packet.hasOwnProperty("payload") && packet.payload.hasOwnProperty(layer) && packet.payload[layer].hasOwnProperty(field) ? packet.payload[layer][field] : "";
}

function savePlayerPackets() {
	$.post("./solns.ajax.php?level="+levelid+"&method=save", {
		json:JSON.stringify(playerPackets)
	});
}

function loadPlayerPackets() {
	$.getJSON("./solns.ajax.php?level="+levelid+"&method=load").done(function(data){
		playerPackets = data;
		createLaunchers();
	}).fail(function(jxr, txt, err) {
		console.log("lPP fail: "+txt+", "+err);
	});
}