From 3473a93fbb19846453d901505a720c2ccacb08d7 Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Sun, 24 Apr 2022 01:52:28 -0700
Subject: web: minor style updates

---
 web/dartboat_wasm.c    | 22 +++++++++-------------
 web/static/dartboat.js | 12 ++++++++----
 web/static/style.css   | 26 +++++++++++++++-----------
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index 836c87f..1f81b1c 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -90,13 +90,16 @@ EMSCRIPTEN_KEEPALIVE void draw_match() {
 	struct leg *l2 = state->l2;
 
 	char visit_no[10], u_pts[10], u_rem[10], b_pts[10], b_rem[10], b_darts[100];
-	visit_no[0] = u_pts[0] = u_rem[0] = b_pts[0] = b_rem[0] = b_darts[0] = 0;
 
+	sprintf(u_rem, "%d", l1->start);
+	sprintf(b_rem, "%d", l2->start);
 	EM_ASM({drawVisit($0, $1, $2, $3, $4, $5)},
-		"0", "", "501", "", "501", "");
+		"0", "", u_rem, "", state->mode == M_P ? "" : b_rem, "");
 
 	int n_visits = l1->n_visits > l2->n_visits ? l1->n_visits : l2->n_visits;
 	for (int i = 0; i < n_visits; ++i) {
+		visit_no[0] = u_pts[0] = u_rem[0] = b_pts[0] = b_rem[0] = b_darts[0] = 0;
+
 		sprintf(visit_no, "%d", i + 1);
 
 		struct visit *v = l1->visits + i;
@@ -117,13 +120,6 @@ EMSCRIPTEN_KEEPALIVE void draw_match() {
 
 		EM_ASM({drawVisit($0, $1, $2, $3, $4, $5)},
 			visit_no, u_pts, u_rem, b_pts, b_rem, b_darts);
-
-		visit_no[0] = 0;
-		u_pts[0] = 0;
-		u_rem[0] = 0;
-		b_pts[0] = 0;
-		b_rem[0] = 0;
-		b_darts[0] = 0;
 	}
 
 	if (l1->rem <= 0) {
@@ -367,6 +363,7 @@ EMSCRIPTEN_KEEPALIVE void free_match() {
 
 EMSCRIPTEN_KEEPALIVE void match_init() {
 	for (int i = 1; i < 3; ++i) {
+		EM_ASM({hidePlayerInfo($0)}, i);
 		EM_ASM({updatePlayerName($0, $1)}, i, "");
 		EM_ASM({updatePlayerRem($0, $1)}, i, "");
 		EM_ASM({updatePlayerSugg($0, $1)}, i, "");
@@ -397,10 +394,9 @@ EMSCRIPTEN_KEEPALIVE void start_match(int mode) {
 		state->l1 = leg_init(501, "Player 1");
 		state->l2 = leg_init(501, "Player 2");
 	}
-	if (mode == M_P)
-		EM_ASM(hidePlayer2());
-	else
-		EM_ASM(unhidePlayer2());
+	EM_ASM({showPlayerInfo($0)}, 1);
+	if (mode != M_P)
+		EM_ASM({showPlayerInfo($0)}, 2);
 	state->active_p = 1;
 	state->active_l = state->l1;
 
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 4967f18..35dac17 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -163,12 +163,16 @@ function setPlayerActive(n) {
 		e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
 }
 
-function hidePlayer2(n) {
-	document.getElementById('p2-info').style.visibility = 'hidden';
+function hidePlayerInfo(n) {
+	let elems = document.getElementById(`p${n}-info`).children;
+	for (let i = 0; i < elems.length; ++i)
+		elems[i].style.visibility = 'hidden';
 }
 
-function unhidePlayer2(n) {
-	document.getElementById('p2-info').style.removeProperty('visibility');
+function showPlayerInfo(n) {
+	let elems = document.getElementById(`p${n}-info`).children;
+	for (let i = 0; i < elems.length; ++i)
+		elems[i].style.removeProperty('visibility');
 }
 
 function updatePlayerRem(n, ptr) {
diff --git a/web/static/style.css b/web/static/style.css
index dc017f6..63d8e3b 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -30,10 +30,13 @@ div#controls {
 
 	font-size: clamp(1.5vh, 2vw, 2vh);
 
+	margin-top: 2px;
+
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: minmax(5em, auto);
 	grid-auto-rows: 1fr;
+	gap: 2px;
 }
 
 div#controls .keypad {
@@ -56,7 +59,7 @@ div#oi {
 	height: 1.2em;
 	width: 3ch;
 
-	outline: #1a1a1a solid 4px;
+	outline: #1a1a1a solid 2px;
 
 	position: absolute;
 	left: 50%;
@@ -76,6 +79,8 @@ div#info {
 
 	font-size: clamp(1.5vh, 2vw, 2vh);
 
+	margin: 2px 0;
+
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 }
@@ -84,7 +89,6 @@ div#p1-info, div#p2-info {
 	background-color: #222;
 	font-size: 1.5em;
 
-	margin: 2px;
 	padding: 0.4rem;
 
 	flex-direction: column;
@@ -92,6 +96,14 @@ div#p1-info, div#p2-info {
 	align-items: center;
 }
 
+div#p1-info {
+	margin-right: 1px;
+}
+
+div#p2-info {
+	margin-left: 1px;
+}
+
 div#p1-info.active, div#p2-info.active {
 	background-color: #2a390a;
 }
@@ -131,8 +143,6 @@ div#prompt-container {
 
 	background-color: #222;
 
-	margin: 2px;
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -167,8 +177,6 @@ div.key {
 	background-color: #282828;
 	font-size: 1.5em;
 
-	margin: 2px;
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -212,10 +220,8 @@ div.key.ok {
 div#settings-bar {
 	grid-area: settings-bar;
 
-	background-color: #222;
 	font-size: clamp(1.5vh, 2vw, 2vh);
 
-	margin: 2px;
 	padding: 0.4rem;
 
 	display: flex;
@@ -233,7 +239,7 @@ div#settings-bar div.input.first {
 }
 
 div#settings-bar div.input {
-	background-color: #333;
+	background-color: #222;
 
 	display: flex;
 	flex-wrap: wrap;
@@ -288,12 +294,10 @@ div#settings-bar div.help-button:active {
 div#visits {
 	grid-area: visits;
 
-	background-color: #222;
 	font-size: clamp(1.5vh, 2vw, 2vh);
 
 	overflow: auto;
 	scrollbar-gutter: stable both-edges;
-	margin: 2px;
 	padding: 0.4rem;
 
 	display: grid;
-- 
cgit v1.2.3-70-g09d2