Untitled

<html>
<head>
	<script>
		var PPSSPP_IP = '192.168.0.74';
		var PPSSPP_PORT = 41588;
	</script>
	<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;

		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 connect() {
			if (socket) {
				socket.close(1000);
				socket = null;
				return;
			}

			socket = new WebSocket('ws://' + PPSSPP_IP + ':' + PPSSPP_PORT + '/debugger', 'debugger.ppsspp.org');
			connectButton.textContent = 'Connecting...';
			connectButton.disabled = true;

			var connected = false;
			socket.onopen = function () {
				log('Debugger connected');
				connectButton.textContent = 'Disconnect';
				connectButton.disabled = false;
				connected = true;
			}
			socket.onclose = function (e) {
				if (connected) {
					log('Debugger disconnected');
				}
				connectButton.textContent = 'Connect';
				connectButton.disabled = false;
				socket = null;
			}
			socket.onerror = function (e) {
				log('Debugger connection failed');
			}

			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: ' + data);
				}
			}
		}

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