misc web ui cleanup

3 files changed, 115 insertions, 114 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index a47b845..87c6020 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -1,5 +1,33 @@
+let oi_timeout;
+function oi() {
+	document.getElementById('oi').style.visibility = 'visible';
+
+	oi_timeout = setTimeout(() => { oi_timeout = null; clearOi(); }, 3000);
+}
+
+function clearOi() {
+	document.getElementById('oi').style.visibility = 'hidden';
+
+	if (oi_timeout) {
+		clearTimeout(oi_timeout);
+		oi_timeout = null;
+	}
+}
+
+function scheduleCCall(f, ms, ...args) {
+	let types = [];
+	let vals = [];
+
+	for (let i = 0; i < args.length/2; i++)
+		vals[i] = (types[i] = UTF8ToString(args[i*2])) == 'string' ?
+			UTF8ToString(args[i*2+1]) : args[i*2+1];
+
+	let func = UTF8ToString(f);
+	setTimeout(() => Module.ccall(func, null, types, vals), ms);
+}
+
 function _promptGet() {
-	return document.getElementById('prompt').textContent;
+	return document.getElementById('prompt-input').textContent;
 }
 
 function _promptGetAndClear() {
@@ -9,33 +37,33 @@ function _promptGetAndClear() {
 }
 
 function _promptDeleteLast() {
-	let elem = document.getElementById('prompt');
-	elem.textContent = elem.textContent.slice(0, -1);
+	let e = document.getElementById('prompt-input');
+	e.textContent = e.textContent.slice(0, -1);
 }
 
 function _promptClear() {
-	document.getElementById('prompt').textContent = '';
+	document.getElementById('prompt-input').textContent = '';
 }
 
 let prompt_handler;
 let prompt_handlers = {
 	visit: {
 		append(val) {
-			let elem = document.getElementById('prompt');
-			if (elem.textContent.length < 3) {
-				elem.textContent += val;
-				promptUpdateRem();
+			let e = document.getElementById('prompt-input');
+			if (e.textContent.length < 3) {
+				e.textContent += val;
+				this._update_rem();
 			}
 		},
 
 		backspace() {
 			_promptDeleteLast();
-			promptUpdateRem();
+			this._update_rem();
 		},
 
 		clear() {
 			_promptClear();
-			promptUpdateRem();
+			this._update_rem();
 		},
 
 		submit() {
@@ -48,13 +76,19 @@ let prompt_handlers = {
 			let rem = _promptGetAndClear();
 			if (rem)
 				Module.ccall('user_visit_to_rem', 'number', ['number'], [rem]);
+		},
+
+		_update_rem(val) {
+			Module.ccall('update_user_rem_from_pts', null,
+				['number'], [val || _promptGet()]);
 		}
 	},
+
 	num_darts: {
 		append(val) {
-			let elem = document.getElementById('prompt');
-			if (elem.textContent.length < 3)
-				elem.textContent += val;
+			let e = document.getElementById('prompt-input');
+			if (e.textContent.length < 3)
+				e.textContent += val;
 		},
 
 		backspace() {
@@ -71,6 +105,7 @@ let prompt_handlers = {
 				Module.ccall('resp_numdarts', null, ['number'], [n]);
 		}
 	},
+
 	init: {
 		submit() {
 			Module.ccall('start_match');
@@ -107,29 +142,21 @@ function promptSubmitRem(...args) {
 	prompt_handler?.submit_rem?.(...args);
 }
 
-function clearMatchLog() {
-	document.getElementById('match').textContent = '';
+function setPromptInput(ptr) {
+	document.getElementById('prompt-input').textContent = UTF8ToString(ptr);
 }
 
-let oi_timeout;
-function oi() {
-	document.getElementById('oi').style.visibility = 'visible';
-
-	oi_timeout = setTimeout(function() { oi_timeout = null; clearOi() }, 3000);
+function promptMsgL(p) {
+	document.getElementById('prompt-msg-l').textContent = UTF8ToString(p);
 }
 
-function clearOi() {
-	document.getElementById('oi').style.visibility = 'hidden';
-
-	if (oi_timeout) {
-		clearTimeout(oi_timeout);
-		oi_timeout = null;
-	}
+function promptMsgR(p) {
+	document.getElementById('prompt-msg-r').textContent = UTF8ToString(p);
 }
 
 function setPlayerActive(n) {
-	document.querySelectorAll('[id$=-state]').forEach(e =>
-		e.classList[n && e.id == `p${n}-state` ? 'add' : 'remove']('active'));
+	document.querySelectorAll('[id$=-info]').forEach(e =>
+		e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
 }
 
 function updatePlayerRem(n, ptr) {
@@ -148,89 +175,63 @@ function updatePlayerAvg(n, avg) {
 	document.getElementById(`p${n}-avg`).textContent = avg.toFixed(2);
 }
 
-function setPromptText(ptr) {
-	document.getElementById('prompt').textContent = UTF8ToString(ptr);
-}
-
-function promptMsg(p) {
-	document.getElementById('prompt-msg').textContent = UTF8ToString(p);
-}
-
-function promptSugg(p) {
-	document.getElementById('prompt-sugg').textContent = UTF8ToString(p);
-}
-
-function promptUpdateRem() {
-	Module.ccall('update_user_rem_from_pts', null, ['number'], [_promptGet()]);
-}
-
-function scheduleCCall(f, ms, ...args) {
-	let types = [];
-	let vals = [];
-
-	for (let i = 0; i < args.length/2; i++)
-		vals[i] = (types[i] = UTF8ToString(args[i*2])) == 'string' ?
-			UTF8ToString(args[i*2+1]) : args[i*2+1];
-
-	let func = UTF8ToString(f);
-	setTimeout(function() { Module.ccall(func, null, types, vals) }, ms);
+function clearVisits() {
+	document.getElementById('visits').textContent = '';
 }
 
 const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 1, 0];
-function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) {
-	let elem = document.getElementById('match');
+function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) {
+	let e = document.getElementById('visits');
 
-	for (let [i, ptr] of [u_pts, u_rem, visit_no, b_rem, b_pts, b_darts].entries()) {
-		let div = document.createElement('div');
+	for (let [i, ptr] of [
+		p1_pts, p1_rem, visit_no, p2_rem, p2_pts, p2_darts].entries()) {
+
+		let div = e.appendChild(document.createElement('div'));
 		let v = div.textContent = UTF8ToString(ptr);
+		div.classList.add(`visit-col${i+1}`);
 		if (i == 0 || i == 4)
-			div.className = `p${POINT_CLASSES.find(x => x <= v)}`;
+			div.classList.add(`p${POINT_CLASSES.find(x => x <= v)}`);
 		else if (i == 5 && v)
 			div.textContent = `… ${v}`;
-		div.className += ` visit-col${i+1}`;
-		elem.append(div);
 	}
 
-	elem.scrollTop = elem.scrollHeight;
-}
-
-function setStdev(val) {
-	Module.ccall('change_stdev', null, ['number', 'number'], [val, val]);
-}
-
-function updateStdev(val) {
-	document.getElementById('stdev').value = val;
+	e.scrollTop = e.scrollHeight;
 }
 
 function setDelay(val) {
-	Module.ccall('change_delay', null, ['number'], [val]);
+	Module.ccall('set_delay', null, ['number'], [val]);
 }
 
 function updateDelay(val) {
 	document.getElementById('delay').value = val;
 }
 
-function processKey(data) {
-	if (data.altKey || data.ctrlKey || data.metaKey || data.target.type == 'text')
-		return;
-	let key = data.key;
+function setStdev(val) {
+	Module.ccall('set_stdev', null, ['number', 'number'], [val, val]);
+}
 
-	if (isFinite(key))
-		promptAppend(key);
-	else if (key == 'Enter')
-		promptSubmit();
-	else if (key == 'Backspace')
-		promptBackspace();
-	else if (key == 'r')
-		promptSubmitRem();
+function updateStdev(val) {
+	document.getElementById('stdev').value = val;
 }
 
 function modal(id) {
 	document.getElementById(id).style.display = 'block';
 }
 
-window.onclick = function(e) {
+document.addEventListener('click', e => {
 	if (e.target.classList.contains('modal')) e.target.style.display = 'none';
-}
+});
 
-document.addEventListener('keydown', processKey);
+document.addEventListener('keydown', e => {
+	if (e.altKey || e.ctrlKey || e.metaKey || e.target.type == 'text')
+		return;
+
+	if (isFinite(e.key))
+		promptAppend(e.key);
+	else if (e.key == 'Enter')
+		promptSubmit();
+	else if (e.key == 'Backspace')
+		promptBackspace();
+	else if (e.key == 'r')
+		promptSubmitRem();
+});
diff --git a/web/static/index.html b/web/static/index.html
index 1db6537..fdfa0ee 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -12,13 +12,13 @@
 		<div id="main">
 			<div id="rem-bar">
 				<div id="oi">oi!</div>
-				<div id="p1-state">
+				<div id="p1-info">
 					<div id="p1-name"></div>
 					<div id="p1-rem"></div>
 					<div id="p1-sugg"></div>
 					<div id="p1-avg"></div>
 				</div>
-				<div id="p2-state">
+				<div id="p2-info">
 					<div id="p2-name"></div>
 					<div id="p2-rem"></div>
 					<div id="p2-sugg"></div>
@@ -27,9 +27,9 @@
 			</div>
 			<div id="keypad">
 				<div id="prompt-container">
-					<div id="prompt-msg"></div>
-					<div id="prompt"></div>
-					<div id="prompt-sugg"></div>
+					<div id="prompt-msg-l"></div>
+					<div id="prompt-input"></div>
+					<div id="prompt-msg-r"></div>
 				</div>
 				<div onclick="promptAppend(1)" class="key num">1</div>
 				<div onclick="promptAppend(2)" class="key num">2</div>
@@ -50,7 +50,7 @@
 				<div class="input"><span>stdev</span><input id="stdev" onchange="setStdev(this.value)" maxlength="4" value=""></div>
 				<div class="help-button" onclick="modal('help-modal')">?</div>
 			</div>
-			<div id="match"></div>
+			<div id="visits"></div>
 		</div>
 		<div id="help-modal" class="modal">
 			<div class="modal-content">
diff --git a/web/static/style.css b/web/static/style.css
index fe686a2..70a0c70 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -22,7 +22,7 @@ div#main {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: min-content min-content 2fr 2fr;
-	grid-template-areas: "settings-bar" "rem-bar" "match" "keypad";
+	grid-template-areas: "settings-bar" "rem-bar" "visits" "keypad";
 }
 
 div#keypad {
@@ -66,7 +66,7 @@ div#rem-bar {
 	grid-template-columns: repeat(2, 1fr);
 }
 
-div#p1-state, div#p2-state {
+div#p1-info, div#p2-info {
 	background-color: #222;
 	font-size: 1.5em;
 
@@ -78,7 +78,7 @@ div#p1-state, div#p2-state {
 	align-items: center;
 }
 
-div#p1-state.active, div#p2-state.active {
+div#p1-info.active, div#p2-info.active {
 	background-color: #2a390a;
 }
 
@@ -122,24 +122,24 @@ div#prompt-container {
 	justify-content: center;
 }
 
-div#prompt-msg, div#prompt, div#prompt-sugg {
+div#prompt-msg-l, div#prompt-input, div#prompt-msg-r {
 	font-size: 1.5em;
 
 	display: grid;
 	align-items: center;
 }
 
-div#prompt-msg, div#prompt-sugg {
+div#prompt-msg-l, div#prompt-msg-r {
 	flex: 1;
 	color: #aaa;
 	padding: 0 0.4rem;
 }
 
-div#prompt-sugg {
+div#prompt-msg-r {
 	text-align: right;
 }
 
-div#prompt {
+div#prompt-input {
 	text-align: center;
 	font-size: 3em;
 	width: 4ch;
@@ -249,8 +249,8 @@ div#settings-bar div.help-button:active {
 	background-color: #6e41b8;
 }
 
-div#match {
-	grid-area: match;
+div#visits {
+	grid-area: visits;
 
 	background-color: #222;
 	font-size: clamp(1.5vh, 2vw, 2vh);
@@ -266,7 +266,7 @@ div#match {
 	grid-row-gap: 0.3em;
 }
 
-div#match div {
+div#visits div {
 	font-size: 2em;
 
 	min-width: 0;
@@ -276,17 +276,17 @@ div#match div {
 	justify-content: center;
 }
 
-div#match .visit-col1 { grid-column: 2; }
-div#match .visit-col3 { color: #888; grid-column: 4; }
-div#match .p0 { color: #f00; font-weight: bold; }
-div#match .p1 { color: #f00; }
-div#match .p20 { color: #f60; }
-div#match .p40 { color: #fa0; }
-div#match .p60 { color: #dd0; }
-div#match .p100 { color: #2c2; }
-div#match .p140 { color: #0f0; }
-div#match .p180 { color: #0f0; font-weight: bold; }
-div#match .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; }
+div#visits .visit-col1 { grid-column: 2; }
+div#visits .visit-col3 { color: #888; grid-column: 4; }
+div#visits .p0 { color: #f00; font-weight: bold; }
+div#visits .p1 { color: #f00; }
+div#visits .p20 { color: #f60; }
+div#visits .p40 { color: #fa0; }
+div#visits .p60 { color: #dd0; }
+div#visits .p100 { color: #2c2; }
+div#visits .p140 { color: #0f0; }
+div#visits .p180 { color: #0f0; font-weight: bold; }
+div#visits .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; }
 
 .modal {
 	background-color: rgba(0, 0, 0, 0.6);