add debug log

static/scorch.css

@@ -16,11 +16,12 @@ main {
 	height: 100%;
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: auto 1fr auto;
+	grid-template-rows: auto 1fr auto auto;
 	grid-template-areas:
 		"h h h"
 		"a b c"
-		"f f f";
+		"f f f"
+		"d d d";
 }
 
 #header {
@@ -61,3 +62,7 @@ main {
 	padding-right: 1em;
 	padding-top: 8px;
 }
+
+#debugContainer {
+	grid-area: d;
+}

static/scorch.js

@@ -29,9 +29,14 @@ function send_event(event_title, data) {
 		console.log("Socket is still opening!");
 		return;
 	}
+	log_debug_message('debug', "Sending `" + event_title + "` event with following data: " + JSON.stringify(data));
 	this.send(data);
 }
 
+function onopen(event) {
+	log_debug_message('debug', 'Websocket connected to server.');
+}
+
 function onmessage(event) {
 	let data;
 	let event_title;
@@ -64,10 +69,12 @@ function onmessage(event) {
 		console.log("Unknown socket event: " + event_title);
 		return;
 	}
+	log_debug_message('debug', "Received `" + event_title + "` event with following data: " + JSON.stringify(data));
 	socket.events[event_title](data);
 }
 
 async function onclose(event) {
+	log_debug_message('debug', 'Websocket lost connection to server.')
 	if (event.wasClean) { return; } // no need to reconnect
 	console.log(event);
 	console.log('Websocket lost connection to server. Re-trying...');
@@ -80,6 +87,7 @@ function sleep(ms) {
 }
 
 function onerror(event) {
+	log_debug_message('error', 'Websocket encountered an error.')
 	console.log("Websocket error!")
 	console.log(event);
 }
@@ -152,3 +160,18 @@ function select_track(select) {
 }
 
 /* DOM */
+function show_debug(checkbox) {
+	if (checkbox.checked) {
+		document.querySelector('#debugLog').style.display = 'inherit';
+	} else {
+		document.querySelector('#debugLog').style.display = 'none';
+	}
+}
+
+function log_debug_message(log_level, message) {
+	let msg = new Date().toTimeString().replace(/ .*/, '') + ' ' + message;
+	let li = document.createElement('li');
+	li.className = log_level;
+	li.textContent = msg;
+	document.querySelector('#debugLog').appendChild(li);
+}

templates/index.html

@@ -44,6 +44,11 @@
 					</div>
 				</span>
 			</div>
+			<div id="debugContainer">
+				<input type="checkbox" name="showDebug" id="showDebug" onchange="show_debug(this)">
+				<label for="showDebug">Show Debug Log</label>
+				<pre><ul id="debugLog" style="display:none"></ul></pre>
+			</div>
 		</main>
 	</body>
 </html>