From e297ac65f8f0cde103880c73d0c92ad3cb50f161 Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Tue, 3 May 2022 13:21:24 -0700
Subject: web: more use of generic JS functions

---
 web/static/dartboat.js | 26 +++++++-------------------
 web/static/index.html  |  4 ++--
 web/static/style.css   | 10 +++++++++-
 web/web_control.c      |  8 ++++----
 web/web_prompt.c       | 16 +++++++++-------
 web/web_scoreboard.c   | 19 +++++++++++++++++++
 web/web_scoreboard.h   |  4 ++++
 7 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index b420543..99513e2 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -53,6 +53,13 @@ function elemToggleClass(sel, c) {
 	$(UTF8ToString(sel)).classList.toggle(UTF8ToString(c));
 }
 
+function elemSetUniqClass(sel, c, sel_set) {
+	selstr = sel && UTF8ToString(sel);
+	cstr = UTF8ToString(c);
+	$$(UTF8ToString(sel_set)).forEach(e =>
+		e.classList[sel && e.matches(selstr) ? 'add' : 'remove'](cstr));
+}
+
 function promptHandle(command, data) {
 	const str_c = toCString(command);
 	const str_d = data && toCString(data);
@@ -62,25 +69,6 @@ function promptHandle(command, data) {
 	if (str_d) _free(str_d);
 }
 
-function setKeypad(keypad) {
-	const keypad_id = `keypad-${UTF8ToString(keypad)}`;
-	$$('.keypad').forEach(e =>
-		e.style.display = e.id === keypad_id ? '' : 'none');
-}
-
-function setPlayerActive(n) {
-	$$('[id$=-info]').forEach(e =>
-		e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
-}
-
-function showPlayerInfo(n) {
-	$(`#p${n}-info-inner`).style.visibility = 'visible';
-}
-
-function hidePlayerInfo(n) {
-	$(`#p${n}-info-inner`).style.visibility = 'hidden';
-}
-
 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');
diff --git a/web/static/index.html b/web/static/index.html
index 1a8d1b5..53796d8 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -35,7 +35,7 @@
 					<div id="prompt-input"></div>
 					<div id="prompt-msg-r"></div>
 				</div>
-				<div id="keypad-default" class="keypad" style="display: none">
+				<div id="keypad-default" class="keypad">
 					<div data-command="append:1" class="key num">1</div>
 					<div data-command="append:2" class="key num">2</div>
 					<div data-command="append:3" class="key num">3</div>
@@ -56,7 +56,7 @@
 					<div data-command="append:2;submit" class="key"><span class="keyboard-val">[2]</span> One-player scoreboard</div>
 					<div data-command="append:3;submit" class="key"><span class="keyboard-val">[3]</span> Two-player scoreboard</div>
 				</div>
-				<div id="keypad-dartboard" class="keypad" style="display: none">
+				<div id="keypad-dartboard" class="keypad">
 					<div id="dartboard-container">
 						<svg id="dartboard" viewBox="0 0 451 451">
 							<g class="base" transform="translate(225.5 225.5) scale(1 -1)"></g>
diff --git a/web/static/style.css b/web/static/style.css
index a7ad76a..43c5b8b 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -41,6 +41,10 @@ div#controls {
 }
 
 div#controls .keypad {
+	display: none;
+}
+
+div#controls .keypad.visible {
 	display: contents;
 }
 
@@ -125,11 +129,15 @@ div#p1-info.active, div#p2-info.active {
 	background-color: #304010;
 }
 
-div#p1-info-inner, div #p2-info-inner {
+div#p1-info-inner, div#p2-info-inner {
 	display: contents;
 	visibility: hidden;
 }
 
+div#p1-info-inner.visible, div#p2-info-inner.visible {
+	visibility: visible;
+}
+
 div#p1-rem, div#p2-rem {
 	font-size: 3em;
 	font-weight: bold;
diff --git a/web/web_control.c b/web/web_control.c
index f44315f..94e58b7 100644
--- a/web/web_control.c
+++ b/web/web_control.c
@@ -17,7 +17,7 @@ void set_active_player(int pn)
 {
 	state->active_player = pn;
 	state->active_leg = state->legs[pn-1];
-	EM_ASM({setPlayerActive($0)}, pn);
+	scoreboard_set_player_active(pn);
 
 	if (state->mode == M_PVC && pn == 2)
 		prompt_bot_visit();
@@ -186,7 +186,7 @@ void user_undo()
 					state->active_leg->visits[
 						state->active_leg->n_visits-2].rem) /
 				(state->active_leg->n_visits-1)));
-		EM_ASM({setPlayerActive($0)}, state->active_player);
+		scoreboard_set_player_active(state->active_player);
 		handle_next();
 		return;
 	}
@@ -253,13 +253,13 @@ void start_match(int mode)
 	state->legs[0] = leg_init(501, mode == M_PVP ? "Player 1" : "User");
 	state->legs[1] = leg_init(501, mode == M_PVC ? "Bot" : "Player 2");
 
-	EM_ASM({showPlayerInfo($0)}, 1);
+	show_player_info(1);
 	update_player_name(1, state->legs[0]->name);
 	update_player_rem(1, state->legs[0]->rem);
 	update_player_avg(1, 0);
 
 	if (mode != M_P) {
-		EM_ASM({showPlayerInfo($0)}, 2);
+		show_player_info(2);
 		update_player_name(2, state->legs[1]->name);
 		update_player_rem(2, state->legs[1]->rem);
 		update_player_avg(2, 0);
diff --git a/web/web_prompt.c b/web/web_prompt.c
index 7607009..e96e567 100644
--- a/web/web_prompt.c
+++ b/web/web_prompt.c
@@ -83,8 +83,10 @@ void set_prompt_mode(enum prompt_mode mode)
 	else
 		EM_ASM({elemRemoveClass($0, $1)}, "#prompt", "active");
 
-	EM_ASM({setKeypad($0)}, pm == PM_DARTBOARD ? "dartboard" :
-		pm == PM_SELECT_MODE ? "select_mode" : "default");
+	EM_ASM({elemSetUniqClass($0, $1, $2)},
+		(pm == PM_DARTBOARD ? "#keypad-dartboard" :
+			pm == PM_SELECT_MODE ? "#keypad-select_mode" : "#keypad-default"),
+		"visible", ".keypad");
 }
 
 void prompt_visit()
@@ -114,22 +116,22 @@ void prompt_num_darts()
 
 void prompt_end_match()
 {
-	EM_ASM(setPlayerActive()); // sets all inactive
+	scoreboard_set_player_active(-1); // sets all inactive
 	set_prompt_mode(PM_END_MATCH);
 	prompt_set_msgl(
 		state->mode == M_PVC && state->legs[1]->rem <= 0 ? "Bot wins. :(" :
 			"You win! :)");
 	prompt_set_msgr(NULL);
-	EM_ASM({elemSetContent($0, $1)}, "#key-submit", "OK");
+	EM_ASM({elemSetContent($0, $1)}, "#key-submit", "END MATCH");
 	EM_ASM({elemSetContent($0, $1)}, "#key-rem", "REMATCH");
 }
 
 void prompt_select_mode()
 {
-	for (int pn = 1; pn < 3; ++pn) {
-		EM_ASM({hidePlayerInfo($0)}, pn);
+	EM_ASM({elemSetUniqClass($0, $1, $2)},
+		NULL, "visible", "[id$=-info-inner]");
+	for (int pn = 1; pn < 3; ++pn)
 		clear_player_info(pn);
-	}
 	EM_ASM({elemSetContent($0, $1)}, "#visits", NULL);
 
 	set_prompt_mode(PM_SELECT_MODE);
diff --git a/web/web_scoreboard.c b/web/web_scoreboard.c
index 34ee4c5..b9b4688 100644
--- a/web/web_scoreboard.c
+++ b/web/web_scoreboard.c
@@ -17,6 +17,18 @@ struct player_info {
 
 struct player_info buffered_info[2], flushed_info[2];
 
+void scoreboard_set_player_active(int pn)
+{
+	char sel[64], *psel = sel;
+
+	if (pn == -1)
+		psel = NULL;
+	else
+		sprintf(sel, "#p%d-info", pn);
+
+	EM_ASM({elemSetUniqClass($0, $1, $2)}, psel, "active", "[id$=-info]");
+}
+
 static inline void buffer_str(char *str, char **buffer, char *flushed)
 {
 	if (str == *buffer || (str && *buffer && !strcmp(str, *buffer)))
@@ -149,6 +161,13 @@ void update_player_rem(int pn, int rem)
 		update_player_sugg(pn, rem);
 }
 
+void show_player_info(int pn)
+{
+	char sel[64];
+	sprintf(sel, "#p%d-info-inner", pn);
+	EM_ASM({elemAddClass($0, $1)}, sel, "visible");
+}
+
 void clear_player_info(int pn)
 {
 	scoreboard_set_player_name(pn, NULL);
diff --git a/web/web_scoreboard.h b/web/web_scoreboard.h
index 76ba1a9..6525654 100644
--- a/web/web_scoreboard.h
+++ b/web/web_scoreboard.h
@@ -5,6 +5,8 @@
 
 void scoreboard_flush();
 
+void scoreboard_set_player_active(int pn);
+
 void scoreboard_flush_player_info(int pn);
 void scoreboard_set_player_avg(int pn, double avg);
 
@@ -12,6 +14,8 @@ void update_player_name(int pn, char *str);
 void update_player_sugg(int pn, int rem);
 void update_player_avg(int pn, int n_darts);
 void update_player_rem(int pn, int rem);
+
+void show_player_info(int pn);
 void clear_player_info(int pn);
 
 void draw_visits();
-- 
cgit v1.2.3-70-g09d2