web: use generic JS functions for manipulating DOM

6 files changed, 91 insertions, 97 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 359abbd..b420543 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -29,37 +29,37 @@ function toCString(str) { // caller must free
 	return ptr;
 }
 
-function promptGet() { // caller must free
-	return toCString($('#prompt-input').textContent);
+function elemGetContent(sel) { // caller must free
+	return toCString($(UTF8ToString(sel)).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 elemSetContent(sel, str) {
+	$(UTF8ToString(sel)).textContent = str ? UTF8ToString(str) : '';
 }
 
-function setPromptActive() {
-	$('#prompt').classList.add('active')
+function elemHasClass(sel, c) {
+	return $(UTF8ToString(sel)).classList.contains(UTF8ToString(c));
 }
 
-function setPromptInactive() {
-	$('#prompt').classList.remove('active')
+function elemAddClass(sel, c) {
+	$(UTF8ToString(sel)).classList.add(UTF8ToString(c));
 }
 
-function setPromptMsgL(ptr) {
-	$('#prompt-msg-l').textContent = ptr ? UTF8ToString(ptr) : '';
+function elemRemoveClass(sel, c) {
+	$(UTF8ToString(sel)).classList.remove(UTF8ToString(c));
 }
 
-function setPromptMsgR(ptr) {
-	$('#prompt-msg-r').textContent = ptr ? UTF8ToString(ptr) : '';
+function elemToggleClass(sel, c) {
+	$(UTF8ToString(sel)).classList.toggle(UTF8ToString(c));
 }
 
-function setPromptInput(ptr) {
-	$('#prompt-input').textContent = ptr ? UTF8ToString(ptr) : '';
+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 setKeypad(keypad) {
@@ -68,22 +68,6 @@ function setKeypad(keypad) {
 		e.style.display = e.id === keypad_id ? '' : 'none');
 }
 
-function isKeyActive(k) {
-	return $(`#key-${UTF8ToString(k)}`).classList.contains('active');
-}
-
-function toggleKey(k) {
-	$(`#key-${UTF8ToString(k)}`).classList.toggle('active');
-}
-
-function deactivateKey(k) {
-	$(`#key-${UTF8ToString(k)}`).classList.remove('active');
-}
-
-function setKeyLabel(k, ptr) {
-	$(`#key-${UTF8ToString(k)}`).textContent = UTF8ToString(ptr);
-}
-
 function setPlayerActive(n) {
 	$$('[id$=-info]').forEach(e =>
 		e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
@@ -97,26 +81,6 @@ function hidePlayerInfo(n) {
 	$(`#p${n}-info-inner`).style.visibility = 'hidden';
 }
 
-function updatePlayerName(n, ptr) {
-	$(`#p${n}-name`).textContent = ptr ? UTF8ToString(ptr) : '';
-}
-
-function updatePlayerRem(n, ptr) {
-	$(`#p${n}-rem`).textContent = ptr ? UTF8ToString(ptr) : '';
-}
-
-function updatePlayerSugg(n, ptr) {
-	$(`#p${n}-sugg`).textContent = ptr ? UTF8ToString(ptr) : '';
-}
-
-function updatePlayerAvg(n, avg) {
-	$(`#p${n}-avg`).textContent = avg.toFixed(2);
-}
-
-function clearVisits() {
-	$('#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) {
 	const e = $('#visits');
@@ -136,8 +100,10 @@ function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) {
 	e.scrollTop = e.scrollHeight;
 }
 
-function svgDrawElemv(layer, elemc, elemv, off_name, off_n_attrs, off_attr_names,
-	off_attr_vals, off_content) {
+function svgAppendElemv(sel, elemc, elemv, off_name, off_n_attrs,
+	off_attr_names,	off_attr_vals, off_content) {
+	target = $(UTF8ToString(sel));
+
 	for (let ptr = elemv; ptr < elemv + 4*elemc; ptr += 4) {
 		const struct = HEAP32[ptr>>2];
 
@@ -156,14 +122,10 @@ function svgDrawElemv(layer, elemc, elemv, off_name, off_n_attrs, off_attr_names
 		const content = HEAP32[(struct + off_content)>>2];
 		if (content) e.textContent = UTF8ToString(content);
 
-		$(`#dartboard .${layer ? 'overlay' : 'base'}`).appendChild(e);
+		target.appendChild(e);
 	}
 }
 
-function svgClearPoints() {
-	$('#dartboard .overlay').textContent = '';
-}
-
 function updateDelay(val) {
 	$('#delay').value = val;
 }
diff --git a/web/web_control.c b/web/web_control.c
index 25f2ccb..f44315f 100644
--- a/web/web_control.c
+++ b/web/web_control.c
@@ -40,7 +40,7 @@ void update_user_rem_from_pts(int pts)
 EMSCRIPTEN_KEEPALIVE
 void end_boat_visit(int rem, double avg)
 {
-	EM_ASM(svgClearPoints());
+	svg_clear_points();
 	update_player_rem(2, rem);
 	scoreboard_set_player_avg(2, avg);
 	prompt_set_input(NULL);
diff --git a/web/web_prompt.c b/web/web_prompt.c
index 201bd7b..7607009 100644
--- a/web/web_prompt.c
+++ b/web/web_prompt.c
@@ -3,6 +3,7 @@
 #include "web_match.h"
 #include "web_scoreboard.h"
 
+#include <stdio.h>
 #include <stdlib.h>
 #include <string.h>
 
@@ -57,11 +58,14 @@ static inline void free_flushed_str(char *flushed, char *buffered)
 void prompt_flush()
 {
 	if (buffered_str_changed(prompt_buffered.msgl, prompt_flushed.msgl))
-		EM_ASM({setPromptMsgL($0)}, prompt_buffered.msgl);
+		EM_ASM({elemSetContent($0, $1)},
+			"#prompt-msg-l", prompt_buffered.msgl);
 	if (buffered_str_changed(prompt_buffered.msgr, prompt_flushed.msgr))
-		EM_ASM({setPromptMsgR($0)}, prompt_buffered.msgr);
+		EM_ASM({elemSetContent($0, $1)},
+			"#prompt-msg-r", prompt_buffered.msgr);
 	if (buffered_str_changed(prompt_buffered.input, prompt_flushed.input))
-		EM_ASM({setPromptInput($0)}, prompt_buffered.input);
+		EM_ASM({elemSetContent($0, $1)},
+			"#prompt-input", prompt_buffered.input);
 
 	free_flushed_str(prompt_flushed.msgl, prompt_buffered.msgl);
 	free_flushed_str(prompt_flushed.msgr, prompt_buffered.msgr);
@@ -75,9 +79,9 @@ void set_prompt_mode(enum prompt_mode mode)
 	pm = mode;
 
 	if (pm != PM_DARTBOARD)
-		EM_ASM(setPromptActive());
+		EM_ASM({elemAddClass($0, $1)}, "#prompt", "active");
 	else
-		EM_ASM(setPromptInactive());
+		EM_ASM({elemRemoveClass($0, $1)}, "#prompt", "active");
 
 	EM_ASM({setKeypad($0)}, pm == PM_DARTBOARD ? "dartboard" :
 		pm == PM_SELECT_MODE ? "select_mode" : "default");
@@ -88,8 +92,8 @@ void prompt_visit()
 	set_prompt_mode(PM_VISIT);
 	prompt_set_msgl("Enter points:");
 	prompt_set_msgr(NULL);
-	EM_ASM({setKeyLabel($0, $1)}, "submit", "OK");
-	EM_ASM({setKeyLabel($0, $1)}, "rem", "REMAINING");
+	EM_ASM({elemSetContent($0, $1)}, "#key-submit", "OK");
+	EM_ASM({elemSetContent($0, $1)}, "#key-rem", "REMAINING");
 }
 
 void prompt_bot_visit()
@@ -104,8 +108,8 @@ void prompt_num_darts()
 	set_prompt_mode(PM_NUM_DARTS);
 	prompt_set_msgl("Darts needed?");
 	prompt_set_msgr(NULL);
-	EM_ASM({setKeyLabel($0, $1)}, "submit", "OK");
-	EM_ASM({setKeyLabel($0, $1)}, "rem", "REMAINING");
+	EM_ASM({elemSetContent($0, $1)}, "#key-submit", "OK");
+	EM_ASM({elemSetContent($0, $1)}, "#key-rem", "REMAINING");
 }
 
 void prompt_end_match()
@@ -116,8 +120,8 @@ void prompt_end_match()
 		state->mode == M_PVC && state->legs[1]->rem <= 0 ? "Bot wins. :(" :
 			"You win! :)");
 	prompt_set_msgr(NULL);
-	EM_ASM({setKeyLabel($0, $1)}, "submit", "END MATCH");
-	EM_ASM({setKeyLabel($0, $1)}, "rem", "REMATCH");
+	EM_ASM({elemSetContent($0, $1)}, "#key-submit", "OK");
+	EM_ASM({elemSetContent($0, $1)}, "#key-rem", "REMATCH");
 }
 
 void prompt_select_mode()
@@ -126,7 +130,7 @@ void prompt_select_mode()
 		EM_ASM({hidePlayerInfo($0)}, pn);
 		clear_player_info(pn);
 	}
-	EM_ASM(clearVisits());
+	EM_ASM({elemSetContent($0, $1)}, "#visits", NULL);
 
 	set_prompt_mode(PM_SELECT_MODE);
 	prompt_set_msgl("Select match mode:");
@@ -135,22 +139,28 @@ void prompt_select_mode()
 
 bool is_key_active(char *k)
 {
-	return (EM_ASM_INT({return isKeyActive($0)}, k));
+	char sel[64];
+	sprintf(sel, "#key-%s", k);
+	return EM_ASM_INT({return elemHasClass($0, $1)}, sel, "active");
 }
 
 void toggle_key(char *k)
 {
-	EM_ASM({toggleKey($0)}, k);
+	char sel[64];
+	sprintf(sel, "#key-%s", k);
+	EM_ASM({elemToggleClass($0, $1)}, sel, "active");
 }
 
 void deactivate_key(char *k)
 {
-	EM_ASM({deactivateKey($0)}, k);
+	char sel[64];
+	sprintf(sel, "#key-%s", k);
+	EM_ASM({elemRemoveClass($0, $1)}, sel, "active");
 }
 
 char *prompt_get()
 {
-	return (char *)EM_ASM_INT({return promptGet()});
+	return (char *)EM_ASM_INT({return elemGetContent($0)}, "#prompt-input");
 }
 
 void prompt_handle_pre(char *command)
diff --git a/web/web_scoreboard.c b/web/web_scoreboard.c
index 6be1cd4..34ee4c5 100644
--- a/web/web_scoreboard.c
+++ b/web/web_scoreboard.c
@@ -12,8 +12,7 @@
 #include <emscripten/emscripten.h>
 
 struct player_info {
-	char *name, *rem, *sugg;
-	double avg;
+	char *name, *rem, *sugg, *avg;
 };
 
 struct player_info buffered_info[2], flushed_info[2];
@@ -46,7 +45,9 @@ void scoreboard_set_player_sugg(int pn, char *str)
 
 void scoreboard_set_player_avg(int pn, double avg)
 {
-	buffered_info[pn-1].avg = avg;
+	char *str = malloc(8);
+	sprintf(str, "%.2f", avg);
+	buffer_str(str, &buffered_info[pn-1].avg, flushed_info[pn-1].avg);
 }
 
 static inline bool buffered_str_changed(char *buffered, char *flushed)
@@ -63,24 +64,38 @@ static inline void free_flushed_str(char *flushed, char *buffered)
 
 void scoreboard_flush_player_info(int pn)
 {
+	char sel[64];
+	int len = sprintf(sel, "#p%d-", pn);
+
 	if (buffered_str_changed(buffered_info[pn-1].name,
-			flushed_info[pn-1].name))
-		EM_ASM({updatePlayerName($0, $1)}, pn, buffered_info[pn-1].name);
+			flushed_info[pn-1].name)) {
+		strcpy(sel + len, "name");
+		EM_ASM({elemSetContent($0, $1)}, sel, buffered_info[pn-1].name);
+	}
 
 	if (buffered_str_changed(buffered_info[pn-1].rem,
-			flushed_info[pn-1].rem))
-		EM_ASM({updatePlayerRem($0, $1)}, pn, buffered_info[pn-1].rem);
+			flushed_info[pn-1].rem)) {
+		strcpy(sel + len, "rem");
+		EM_ASM({elemSetContent($0, $1)}, sel, buffered_info[pn-1].rem);
+	}
 
 	if (buffered_str_changed(buffered_info[pn-1].sugg,
-			flushed_info[pn-1].sugg))
-		EM_ASM({updatePlayerSugg($0, $1)}, pn, buffered_info[pn-1].sugg);
+			flushed_info[pn-1].sugg)) {
+		strcpy(sel + len, "sugg");
+		EM_ASM({elemSetContent($0, $1)}, sel, buffered_info[pn-1].sugg);
+	}
 
-	if (buffered_info[pn-1].avg != flushed_info[pn-1].avg)
-		EM_ASM({updatePlayerAvg($0, $1)}, pn, buffered_info[pn-1].avg);
+	if (buffered_str_changed(buffered_info[pn-1].avg,
+			flushed_info[pn-1].avg)) {
+		strcpy(sel + len, "avg");
+		EM_ASM({elemSetContent($0, $1)}, sel, buffered_info[pn-1].avg);
+	}
 
 	free_flushed_str(flushed_info[pn-1].name, buffered_info[pn-1].name);
 	free_flushed_str(flushed_info[pn-1].rem, buffered_info[pn-1].rem);
 	free_flushed_str(flushed_info[pn-1].sugg, buffered_info[pn-1].sugg);
+	free_flushed_str(flushed_info[pn-1].avg, buffered_info[pn-1].avg);
+
 	flushed_info[pn-1] = buffered_info[pn-1];
 }
 
@@ -144,7 +159,7 @@ void clear_player_info(int pn)
 
 void draw_visits()
 {
-	EM_ASM({clearVisits()});
+	EM_ASM({elemSetContent($0, $1)}, "#visits", NULL);
 
 	char visit_no[10], p1_pts[10], p1_rem[10],
 		p2_pts[10], p2_rem[10], p2_darts[100];
diff --git a/web/web_svg.c b/web/web_svg.c
index 9b8f25d..6524754 100644
--- a/web/web_svg.c
+++ b/web/web_svg.c
@@ -206,10 +206,10 @@ int draw_numbers(int elemc, struct elem **elemv)
 	return elemc;
 }
 
-void draw_elemv(int layer, int elemc, struct elem **elemv)
+void append_elemv(char *sel, int elemc, struct elem **elemv)
 {
-	EM_ASM({svgDrawElemv($0, $1, $2, $3, $4, $5, $6, $7)},
-		layer, elemc, elemv,
+	EM_ASM({svgAppendElemv($0, $1, $2, $3, $4, $5, $6, $7)},
+		sel, elemc, elemv,
 		offsetof(struct elem, name), offsetof(struct elem, n_attrs),
 		offsetof(struct elem, attr_names), offsetof(struct elem, attr_vals),
 		offsetof(struct elem, content));
@@ -237,20 +237,26 @@ void svg_draw_board()
 	elemc = draw_spider(elemc, elemv);
 	elemc = draw_numbers(elemc, elemv);
 
-	draw_elemv(0, elemc, elemv);
+	append_elemv("#dartboard .base", elemc, elemv);
 
 	for (int i = 0; i < elemc; ++i)
 		free(elemv[i]);
 	free(elemv);
 }
 
-void svg_draw_point(double x, double y) {
+void svg_draw_point(double x, double y)
+{
 	struct elem *e = gen_circle(8, "#33f");
 	elem_add_attr(e, "stroke", "#ff0");
 	elem_add_attr(e, "stroke-width", "2");
 	elem_add_attr_double(e, "cx", x);
 	elem_add_attr_double(e, "cy", y);
 
-	draw_elemv(1, 1, &e);
+	append_elemv("#dartboard .overlay", 1, &e);
 	elem_free(e);
 }
+
+void svg_clear_points()
+{
+	EM_ASM({elemSetContent($0, $1)}, "#dartboard .overlay", NULL);
+}
diff --git a/web/web_svg.h b/web/web_svg.h
index aae0b0e..5fb80b1 100644
--- a/web/web_svg.h
+++ b/web/web_svg.h
@@ -3,5 +3,6 @@
 
 void svg_draw_board();
 void svg_draw_point(double x, double y);
+void svg_clear_points();
 
 #endif