unknownbrackets/debugger.html

## debugger.html
<html>
<head>
	<style>
		html {
			height: 100%;
		}

		html, body {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}

		#ui {
			flex-grow: 1;
		}

		#log {
			background: black;
			border-radius: 1ex;
			color: #ccc;
			font: 12px Consolas, monospace;
			height: 30vh;
			max-width: 100%;
			overflow: auto;
			padding: 1ex;
			resize: vertical;
			white-space: pre-wrap;
		}

		.log-message--internal::before {
			content: "\00BB\00A0";
		}

		.log-message__timestamp {
			color: #fff;
		}

		.log-message--level-1 {
			color: #0f0;
		}

		.log-message--level-2 {
			color: #f00;
		}

		.log-message--level-3 {
			color: #ff0;
		}

		.log-message--level-4 {
			color: #0ff;
		}
	</style>
</head>
<body>
	<div id="ui">
		<button id="connect">Connect</button>
	</div>
	<div id="log"></div>
	<script>
		var socket = null;
		var possibleEndpoints = [];

		function addLog(message) {
			var log = document.getElementById('log');
			log.appendChild(message);
			if (log.childNodes.length >= 5000)
				log.removeChild(log.firstChild);
			message.scrollIntoView();
		}

		function log(text, level) {
			var message = document.createElement('span');
			message.appendChild(document.createTextNode(text + '\n'));
			message.className = 'log-message log-message--internal';
			if (level)
				message.className += ' log-message--level-' + level;
			addLog(message);
		}

		function handleLogEvent(data) {
			var timestamp = document.createElement('span');
			timestamp.textContent = data.header.substr(0, 10);
			timestamp.className = 'log-message__timestamp';

			var header = document.createElement('span');
			header.appendChild(timestamp);
			header.appendChild(document.createTextNode(data.header.substr(10) + ' '));
			header.className = 'log-message__header';

			var message = document.createElement('span');
			message.appendChild(header);
			message.appendChild(document.createTextNode(data.message));
			message.className = 'log-message log-message--channel-' + data.log + ' log-message--level-' + data.level;

			addLog(message);
		}

		function tryNextEndpoint() {
			return new Promise(function (resolve, reject) {
				if (possibleEndpoints.length == 0)
					return reject(new Error('Couldn\'t connect'));

				var endpoint = 'ws://' + possibleEndpoints[0].ip + ':' + possibleEndpoints[0].p + '/debugger';
				var possibleSocket = new WebSocket(endpoint, 'debugger.ppsspp.org');
				possibleEndpoints = possibleEndpoints.slice(1);

				possibleSocket.onopen = function () {
					resolve(possibleSocket);
				};
				possibleSocket.onclose = function (e) {
					resolve(tryNextEndpoint());
				}
				possibleSocket.onerror = function (e) {
					log('Debugger connection failed: ' + endpoint);
				}
			});
		}

		function connect() {
			if (socket) {
				socket.close(1000);
				socket = null;
				return;
			}

			connectButton.textContent = 'Connecting...';
			connectButton.disabled = true;

			fetch('http://report.ppsspp.org/match/list').then(function (response) {
				return response.json();
			}).then(function (listing) {
				possibleEndpoints = listing;
				return tryNextEndpoint();
			}).then(function (possibleSocket) {
				socket = possibleSocket;
				log('Debugger connected');
				connectButton.textContent = 'Disconnect';
				connectButton.disabled = false;

				socket.onmessage = function (e) {
					var data = JSON.parse(e.data);

					if (data.event == 'log') {
						handleLogEvent(data);
					} else if (data.event == 'error') {
						log('Debugger error: ' + data.message, data.level);
					} else {
						log('Unexpected event: ' + JSON.stringify(data));
					}
				};

				socket.onclose = function (e) {
					log('Debugger disconnected');
					connectButton.textContent = 'Connect';
					connectButton.disabled = false;
					socket = null;
				};
			}, function (err) {
				log('Debugger could not connect');
				socket = null;
				connectButton.textContent = 'Connect';
				connectButton.disabled = false;
			});
		}

		var connectButton = document.getElementById('connect');
		connectButton.onclick = connect;
		// Connect automatically.
		connect();
	</script>
</body>
</html>
	<html>
	<head>
	<style>
	html {
	height: 100%;
	}

	html, body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	}

	#ui {
	flex-grow: 1;
	}

	#log {
	background: black;
	border-radius: 1ex;
	color: #ccc;
	font: 12px Consolas, monospace;
	height: 30vh;
	max-width: 100%;
	overflow: auto;
	padding: 1ex;
	resize: vertical;
	white-space: pre-wrap;
	}

	.log-message--internal::before {
	content: "\00BB\00A0";
	}

	.log-message__timestamp {
	color: #fff;
	}

	.log-message--level-1 {
	color: #0f0;
	}

	.log-message--level-2 {
	color: #f00;
	}

	.log-message--level-3 {
	color: #ff0;
	}

	.log-message--level-4 {
	color: #0ff;
	}
	</style>
	</head>
	<body>
	<div id="ui">
	<button id="connect">Connect</button>
	</div>
	<div id="log"></div>
	<script>
	var socket = null;
	var possibleEndpoints = [];

	function addLog(message) {
	var log = document.getElementById('log');
	log.appendChild(message);
	if (log.childNodes.length >= 5000)
	log.removeChild(log.firstChild);
	message.scrollIntoView();
	}

	function log(text, level) {
	var message = document.createElement('span');
	message.appendChild(document.createTextNode(text + '\n'));
	message.className = 'log-message log-message--internal';
	if (level)
	message.className += ' log-message--level-' + level;
	addLog(message);
	}

	function handleLogEvent(data) {
	var timestamp = document.createElement('span');
	timestamp.textContent = data.header.substr(0, 10);
	timestamp.className = 'log-message__timestamp';

	var header = document.createElement('span');
	header.appendChild(timestamp);
	header.appendChild(document.createTextNode(data.header.substr(10) + ' '));
	header.className = 'log-message__header';

	var message = document.createElement('span');
	message.appendChild(header);
	message.appendChild(document.createTextNode(data.message));
	message.className = 'log-message log-message--channel-' + data.log + ' log-message--level-' + data.level;

	addLog(message);
	}

	function tryNextEndpoint() {
	return new Promise(function (resolve, reject) {
	if (possibleEndpoints.length == 0)
	return reject(new Error('Couldn\'t connect'));

	var endpoint = 'ws://' + possibleEndpoints[0].ip + ':' + possibleEndpoints[0].p + '/debugger';
	var possibleSocket = new WebSocket(endpoint, 'debugger.ppsspp.org');
	possibleEndpoints = possibleEndpoints.slice(1);

	possibleSocket.onopen = function () {
	resolve(possibleSocket);
	};
	possibleSocket.onclose = function (e) {
	resolve(tryNextEndpoint());
	}
	possibleSocket.onerror = function (e) {
	log('Debugger connection failed: ' + endpoint);
	}
	});
	}

	function connect() {
	if (socket) {
	socket.close(1000);
	socket = null;
	return;
	}

	connectButton.textContent = 'Connecting...';
	connectButton.disabled = true;

	fetch('http://report.ppsspp.org/match/list').then(function (response) {
	return response.json();
	}).then(function (listing) {
	possibleEndpoints = listing;
	return tryNextEndpoint();
	}).then(function (possibleSocket) {
	socket = possibleSocket;
	log('Debugger connected');
	connectButton.textContent = 'Disconnect';
	connectButton.disabled = false;

	socket.onmessage = function (e) {
	var data = JSON.parse(e.data);

	if (data.event == 'log') {
	handleLogEvent(data);
	} else if (data.event == 'error') {
	log('Debugger error: ' + data.message, data.level);
	} else {
	log('Unexpected event: ' + JSON.stringify(data));
	}
	};

	socket.onclose = function (e) {
	log('Debugger disconnected');
	connectButton.textContent = 'Connect';
	connectButton.disabled = false;
	socket = null;
	};
	}, function (err) {
	log('Debugger could not connect');
	socket = null;
	connectButton.textContent = 'Connect';
	connectButton.disabled = false;
	});
	}

	var connectButton = document.getElementById('connect');
	connectButton.onclick = connect;
	// Connect automatically.
	connect();
	</script>
	</body>
	</html>