misc web ui cleanup

4 files changed, 131 insertions, 130 deletions

diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index 5a043d1..04d8825 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -68,7 +68,7 @@ EMSCRIPTEN_KEEPALIVE int is_match_over() {
 
 void match_over() {
 	EM_ASM({setPromptHandler($0)}, "init");
-	EM_ASM({promptSugg($0)}, "Press OK to play again.");
+	EM_ASM({promptMsgR($0)}, "Press OK to play again.");
 	EM_ASM(setPlayerActive());
 }
 
@@ -114,13 +114,13 @@ EMSCRIPTEN_KEEPALIVE void draw_match() {
 	}
 
 	if (l1->rem <= 0) {
-		EM_ASM({promptMsg($0)}, "Darts needed?");
+		EM_ASM({promptMsgL($0)}, "Darts needed?");
 		EM_ASM({setPromptHandler($0)}, "num_darts");
 	} else if (l2->rem <= 0) {
-		EM_ASM({promptMsg($0)}, "Bot wins. :(");
+		EM_ASM({promptMsgL($0)}, "Bot wins. :(");
 		match_over();
 	} else {
-		EM_ASM({promptMsg($0)}, "Enter points:");
+		EM_ASM({promptMsgL($0)}, "Enter points:");
 	}
 }
 
@@ -161,7 +161,7 @@ EMSCRIPTEN_KEEPALIVE void boat_visit() {
 	if (state->l1->rem <= 0 || state->l2->rem <= 0)
 		return;
 
-	EM_ASM({promptMsg($0)}, "Bot is throwing…");
+	EM_ASM({promptMsgL($0)}, "Bot is throwing…");
 
 	struct leg *l = state->l2;
 	comp_visit(l);
@@ -220,7 +220,7 @@ EMSCRIPTEN_KEEPALIVE bool user_visit(int points) {
 		EM_ASM({updatePlayerAvg($0, $1)}, P_USER,
 			(double)(l->start-l->rem)/l->n_visits);
 
-	EM_ASM({clearMatchLog()});
+	EM_ASM({clearVisits()});
 	draw_match();
 
 	if (!is_match_over()) {
@@ -243,16 +243,16 @@ EMSCRIPTEN_KEEPALIVE void draw_boat_throwing(int pts, char *str) {
 	int rem = state->l2->n_visits > 1 ? state->l2->visits[state->l2->n_visits-2].rem : state->l2->start;
 
 	update_boat_rem(rem - pts);
-	EM_ASM({setPromptText($0)}, buf);
-	EM_ASM({promptSugg($0)}, str);
+	EM_ASM({setPromptInput($0)}, buf);
+	EM_ASM({promptMsgR($0)}, str);
 }
 
 EMSCRIPTEN_KEEPALIVE void end_boat_throwing(int rem, int avg) {
 	update_boat_rem(rem);
 	EM_ASM({updatePlayerAvg($0, $1)}, P_BOAT, avg);
-	EM_ASM({setPromptText($0)}, "");
-	EM_ASM(clearMatchLog());
-	EM_ASM({promptSugg($0)}, "");
+	EM_ASM({setPromptInput($0)}, "");
+	EM_ASM(clearVisits());
+	EM_ASM({promptMsgR($0)}, "");
 	draw_match();
 
 	if (!is_match_over())
@@ -269,7 +269,7 @@ EMSCRIPTEN_KEEPALIVE void resp_numdarts(int n_darts) {
 
 	EM_ASM({updatePlayerAvg($0, $1)}, P_USER,
 		((double)l->start / (((l->n_visits - 1) * 3) + n_darts)) * 3);
-	EM_ASM({promptMsg($0)}, "You win! :)");
+	EM_ASM({promptMsgL($0)}, "You win! :)");
 	match_over();
 	EM_ASM({setPromptHandler($0)}, "init");
 }
@@ -307,18 +307,18 @@ EMSCRIPTEN_KEEPALIVE void start_match() {
 	update_user_rem(state->l1->rem);
 	update_boat_rem(state->l2->rem);
 
-	EM_ASM(clearMatchLog());
+	EM_ASM(clearVisits());
 	set_user_active();
-	EM_ASM({promptSugg($0)}, "");
+	EM_ASM({promptMsgR($0)}, "");
 	draw_match();
 }
 
-EMSCRIPTEN_KEEPALIVE void change_stdev(float hstdev, float vstdev) {
+EMSCRIPTEN_KEEPALIVE void set_stdev(float hstdev, float vstdev) {
 	horizontal_stdev = hstdev;
 	vertical_stdev = vstdev;
 }
 
-EMSCRIPTEN_KEEPALIVE void change_delay(int delay) {
+EMSCRIPTEN_KEEPALIVE void set_delay(int delay) {
 	delay_ms = delay;
 }
 
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);