web: more use of generic JS functions

3 files changed, 18 insertions, 22 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;