web: use short alias for selectors; make key label function generic

2 files changed, 50 insertions, 57 deletions

diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index 8c871f1..83e2a42 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -60,13 +60,13 @@ void set_active_player(int pn)
 
 	if (state->mode == M_PVC && pn == 2) {
 		EM_ASM({promptMsgL($0)}, "Bot is throwing…");
-		EM_ASM({setKeyLabelSubmit($0)}, "OK");
-		EM_ASM({setKeyLabelRem($0)}, "REMAINING");
+		EM_ASM({setKeyLabel($0, $1)}, "submit", "OK");
+		EM_ASM({setKeyLabel($0, $1)}, "rem", "REMAINING");
 		set_prompt_mode(PM_NONE);
 	} else {
 		EM_ASM({promptMsgL($0)}, "Enter points:");
-		EM_ASM({setKeyLabelSubmit($0)}, "OK");
-		EM_ASM({setKeyLabelRem($0)}, "REMAINING");
+		EM_ASM({setKeyLabel($0, $1)}, "submit", "OK");
+		EM_ASM({setKeyLabel($0, $1)}, "rem", "REMAINING");
 		set_prompt_mode(PM_VISIT);
 	}
 	EM_ASM({promptMsgR($0)}, "");
@@ -238,8 +238,8 @@ void prompt_num_darts()
 	set_prompt_mode(PM_NUM_DARTS);
 	EM_ASM({promptMsgL($0)}, "Darts needed?");
 	EM_ASM({promptMsgR($0)}, "");
-	EM_ASM({setKeyLabelSubmit($0)}, "OK");
-	EM_ASM({setKeyLabelRem($0)}, "REMAINING");
+	EM_ASM({setKeyLabel($0, $1)}, "submit", "OK");
+	EM_ASM({setKeyLabel($0, $1)}, "rem", "REMAINING");
 }
 
 void prompt_end_match()
@@ -250,8 +250,8 @@ void prompt_end_match()
 		state->mode == M_PVC && state->legs[1]->rem <= 0 ? "Bot wins. :(" :
 			"You win! :)");
 	EM_ASM({promptMsgR($0)}, "");
-	EM_ASM({setKeyLabelSubmit($0)}, "END MATCH");
-	EM_ASM({setKeyLabelRem($0)}, "REMATCH");
+	EM_ASM({setKeyLabel($0, $1)}, "submit", "END MATCH");
+	EM_ASM({setKeyLabel($0, $1)}, "rem", "REMATCH");
 }
 
 void prompt_select_mode()
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 4c2be26..0f01507 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -1,12 +1,15 @@
+const $ = document.querySelector.bind(document);
+const $$ = document.querySelectorAll.bind(document);
+
 let oi_timeout;
 function oi() {
-	document.getElementById('oi').style.visibility = 'visible';
+	$('#oi').style.visibility = 'visible';
 
 	oi_timeout = setTimeout(() => { oi_timeout = null; clearOi(); }, 3000);
 }
 
 function clearOi() {
-	document.getElementById('oi').style.visibility = 'hidden';
+	$('#oi').style.visibility = 'hidden';
 
 	if (oi_timeout) {
 		clearTimeout(oi_timeout);
@@ -27,104 +30,96 @@ function toCString(str) { // caller must free
 }
 
 function promptGet() { // caller must free
-	return toCString(document.getElementById('prompt-input').textContent);
+	return toCString($('#prompt-input').textContent);
+}
+
+function promptHandle(command, data) {
+	const str_c = toCString(command);
+	const str_d = data && toCString(data);
+	_prompt_handle(str_c, str_d);
+
+	_free(str_c);
+	if (str_d) _free(str_d);
 }
 
 function setPromptActive() {
-	document.getElementById('prompt').classList.add('active')
+	$('#prompt').classList.add('active')
 }
 
 function setPromptInactive() {
-	document.getElementById('prompt').classList.remove('active')
+	$('#prompt').classList.remove('active')
 }
 
 function setPromptInput(ptr) {
-	document.getElementById('prompt-input').textContent = UTF8ToString(ptr);
+	$('#prompt-input').textContent = UTF8ToString(ptr);
 }
 
-function promptMsgL(p) {
-	document.getElementById('prompt-msg-l').textContent = UTF8ToString(p);
+function promptMsgL(ptr) {
+	$('#prompt-msg-l').textContent = UTF8ToString(ptr);
 }
 
-function promptMsgR(p) {
-	document.getElementById('prompt-msg-r').textContent = UTF8ToString(p);
-}
-
-function promptHandle(command, data) {
-	const str_c = toCString(command);
-	const str_d = data && toCString(data);
-	_prompt_handle(str_c, str_d);
-
-	_free(str_c);
-	if (str_d) _free(str_d);
+function promptMsgR(ptr) {
+	$('#prompt-msg-r').textContent = UTF8ToString(ptr);
 }
 
 function setKeypad(keypad) {
-	let keypad_id = `keypad-${UTF8ToString(keypad)}`;
-	document.querySelectorAll('.keypad').forEach(e => {
-		e.style.display = e.id === keypad_id ? '' : 'none';
-	});
+	const keypad_id = `keypad-${UTF8ToString(keypad)}`;
+	$$('.keypad').forEach(e => {
+		e.style.display = e.id === keypad_id ? '' : 'none'; });
 }
 
 function isKeyActive(k) {
-	return document.getElementById(`key-${UTF8ToString(k)}`).classList
-		.contains('active');
+	return $(`#key-${UTF8ToString(k)}`).classList.contains('active');
 }
 
 function toggleKey(k) {
-	document.getElementById(`key-${UTF8ToString(k)}`).classList
-		.toggle('active');
+	$(`#key-${UTF8ToString(k)}`).classList.toggle('active');
 }
 
 function deactivateKey(k) {
-	document.getElementById(`key-${UTF8ToString(k)}`).classList
-		.remove('active');
-}
-
-function setKeyLabelSubmit(ptr) {
-	document.getElementById('key-submit').textContent = UTF8ToString(ptr);
+	$(`#key-${UTF8ToString(k)}`).classList.remove('active');
 }
 
-function setKeyLabelRem(ptr) {
-	document.getElementById('key-rem').textContent = UTF8ToString(ptr);
+function setKeyLabel(k, ptr) {
+	$(`#key-${UTF8ToString(k)}`).textContent = UTF8ToString(ptr);
 }
 
 function setPlayerActive(n) {
-	document.querySelectorAll('[id$=-info]').forEach(e =>
+	$$('[id$=-info]').forEach(e =>
 		e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
 }
 
 function showPlayerInfo(n) {
-	document.getElementById(`p${n}-info-inner`).style.visibility = 'visible';
+	$(`#p${n}-info-inner`).style.visibility = 'visible';
 }
 
 function hidePlayerInfo(n) {
-	document.getElementById(`p${n}-info-inner`).style.visibility = 'hidden';
+	$(`#p${n}-info-inner`).style.visibility = 'hidden';
 }
 
 function updatePlayerName(n, ptr) {
-	document.getElementById(`p${n}-name`).textContent = UTF8ToString(ptr);
+	$(`#p${n}-name`).textContent = UTF8ToString(ptr);
 }
 
 function updatePlayerRem(n, ptr) {
-	document.getElementById(`p${n}-rem`).textContent = UTF8ToString(ptr);
+	$(`#p${n}-rem`).textContent = UTF8ToString(ptr);
 }
 
 function updatePlayerSugg(n, ptr) {
-	document.getElementById(`p${n}-sugg`).textContent = UTF8ToString(ptr);
+	$(`#p${n}-sugg`).textContent = UTF8ToString(ptr);
 }
 
 function updatePlayerAvg(n, avg) {
-	document.getElementById(`p${n}-avg`).textContent = avg.toFixed(2);
+	$(`#p${n}-avg`).textContent = avg.toFixed(2);
 }
 
 function clearVisits() {
-	document.getElementById('visits').textContent = '';
+	$('#visits').textContent = '';
 }
 
 const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 0];
 function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) {
-	let e = document.getElementById('visits');
+	let e = $('#visits');
 
 	for (let [i, ptr] of [
 		p1_pts, p1_rem, visit_no, p2_rem, p2_pts, p2_darts].entries()) {
@@ -147,7 +142,7 @@ function setDelay(val, update_opts = true) {
 }
 
 function updateDelay(val) {
-	document.getElementById('delay').value = val;
+	$('#delay').value = val;
 }
 
 function setStdev(val, update_opts = true) {
@@ -156,8 +151,7 @@ function setStdev(val, update_opts = true) {
 }
 
 function updateStdev(val) {
-	document.getElementById('stdev').value = parseFloat(
-		val.toFixed(2).slice(0, 4));
+	$('#stdev').value = parseFloat(val.toFixed(2).slice(0, 4));
 }
 
 function readOpts() {
@@ -172,8 +166,7 @@ function readOpts() {
 
 document.addEventListener('click', e => {
 	const modal = e.target.dataset.modal;
-	if (modal)
-		document.getElementById(modal).style.display = 'block';
+	if (modal) $(`#${modal}`).style.display = 'block';
 
 	if (e.target.classList.contains('modal'))
 		e.target.style.display = 'none';