web: display darts for comp as player 1

6 files changed, 75 insertions, 23 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index a46ffc9..54cb29b 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -55,6 +55,15 @@ function elemScrollToBottom(sel) {
 	e.scrollTop = e.scrollHeight;
 }
 
+function elemScrollToCenterChild(sel, sel_child) {
+	const e = $(UTF8ToString(sel));
+	const child = $(UTF8ToString(sel_child));
+	if (!child) return;
+
+	e.scrollLeft = child.offsetLeft + child.offsetWidth/2 -
+		e.offsetLeft - e.offsetWidth/2;
+}
+
 function targetAppendElemv(target, elemc, elemv,
 	off_type, off_ns, off_name, off_content,
 	off_n_attrs, off_attr_names, off_attr_vals,
diff --git a/web/static/style.css b/web/static/style.css
index 6256709..5131eab 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -539,19 +539,30 @@ body {
 	padding: 0.4rem;
 
 	display: grid;
-	grid-template-columns: repeat(5, min(calc(calc(100% - 2ch) / 5), 5ch)) min-content;
+	grid-template-columns:
+		min-content
+		repeat(5, min(calc(calc(100% - 2ch) / 5), 5ch))
+		min-content;
 	grid-auto-rows: min-content;
 	row-gap: 0.2em;
 }
 
 #visits > * {
-	min-width: 0;
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
+#visits .visit-p1-name { grid-column: 2 / span 2; }
+#visits .visit-p2-name { grid-column: 5 / span 2; }
+#visits .visit-p1-darts { grid-column: 1; }
+#visits .visit-p1-pts { grid-column: 2; }
+#visits .visit-p1-rem { grid-column: 3; }
+#visits .visit-n { grid-column: 4; }
+#visits .visit-p2-rem { grid-column: 5; }
+#visits .visit-p2-pts { grid-column: 6; }
+#visits .visit-p2-darts { grid-column: 7; }
+
 #visits .p0 { color: #e00018; }
 #visits .p20 { color: #e06000; }
 #visits .p40 { color: #e09800; }
@@ -561,14 +572,7 @@ body {
 #visits .p180 { color: #20e018; font-weight: bold; }
 #visits .throws-first { color: #999; }
 #visits .throws-first:before { content: '\f151'; font-size: 0.6em; }
-#visits .visit-p1-name { grid-column: 1 / span 2; }
-#visits .visit-p2-name { grid-column: 4 / span 2; }
-#visits .visit-p1-pts { grid-column: 1; }
-#visits .visit-p1-rem { grid-column: 2; }
-#visits .visit-n { grid-column: 3; }
-#visits .visit-p2-rem { grid-column: 4; }
-#visits .visit-p2-pts { grid-column: 5; }
-#visits .visit-p2-darts { grid-column: 6; }
+
 #visits .visit-p1-name, #visits .visit-p2-name {
 	color: #555;
 	border-bottom: 2px solid #555;
@@ -576,29 +580,49 @@ body {
 #visits .visit-n {
 	color: #555;
 }
-#visits .visit-p2-darts {
+#visits .visit-p1-darts, #visits .visit-p2-darts {
 	color: #555;
 	font-size: 0.75em;
-	justify-content: left;
 	white-space: nowrap;
 }
+#visits .visit-p1-darts {
+	justify-content: right;
+}
+#visits .visit-p1-darts:not(:empty):after {
+	content: '\2003';
+}
+#visits .visit-p2-darts {
+	justify-content: left;
+}
 #visits .visit-p2-darts:not(:empty):before {
 	content: '\2003';
 }
 
 @media (max-aspect-ratio: 8/5) {
 	#visits {
-		grid-template-columns: 1ch 1fr repeat(5, min(calc(calc(100% - 2ch) / 5), 5ch)) 1fr 1ch;
+		grid-template-columns:
+			min-content
+			calc(calc(100% - 27ch) / 2)
+			repeat(5, min(calc(calc(100% - 2ch) / 5), 5ch))
+			calc(calc(100% - 27ch) / 2)
+			min-content;
 	}
 	#visits .visit-p1-name, #visits .visit-p2-name {
 		display: none;
 	}
+	#visits .visit-p1-spacer { grid-column: 1; width: 1ch }
+	#visits .visit-p2-spacer { grid-column: 9; width: 1ch }
+	#visits .visit-p1-darts { grid-column: 1; }
 	#visits .visit-p1-pts { grid-column: 3; }
 	#visits .visit-p1-rem { grid-column: 4; }
 	#visits .visit-n { grid-column: 5; }
 	#visits .visit-p2-rem { grid-column: 6; }
 	#visits .visit-p2-pts { grid-column: 7; }
 	#visits .visit-p2-darts { grid-column: 9; }
+
+	#visits .visit-p1-darts:not(:empty):after {
+		content: '\2003…';
+	}
 	#visits .visit-p2-darts:not(:empty):before {
 		content: '…\2003';
 	}
diff --git a/web/static/sw.js b/web/static/sw.js
index b9a92e6..4a207b8 100644
--- a/web/static/sw.js
+++ b/web/static/sw.js
@@ -1,5 +1,5 @@
 const CACHE_PREFIX = 'dartboat-'
-const CACHE_VERSION = '18';
+const CACHE_VERSION = '19';
 const CACHE_NAME = `${CACHE_PREFIX}${CACHE_VERSION}`;
 
 const CACHE_FILES = [
diff --git a/web/web_dom.c b/web/web_dom.c
index 07602f8..162684a 100644
--- a/web/web_dom.c
+++ b/web/web_dom.c
@@ -149,6 +149,11 @@ inline void dom_scroll_to_bottom(char *sel)
 	EM_ASM({elemScrollToBottom($0)}, sel);
 }
 
+inline void dom_scroll_to_center_child(char *sel, char *sel_child)
+{
+	EM_ASM({elemScrollToCenterChild($0, $1)}, sel, sel_child);
+}
+
 inline void dom_enable_exit_dialogue(bool enable)
 {
 	EM_ASM({enableExitDialogue($0)}, enable);
diff --git a/web/web_dom.h b/web/web_dom.h
index 12d173d..8813d1a 100644
--- a/web/web_dom.h
+++ b/web/web_dom.h
@@ -31,6 +31,7 @@ void dom_toggle_class(char *sel, char *class);
 void dom_set_uniq_class(char *sel, char *class, char *sel_set);
 
 void dom_scroll_to_bottom(char *sel);
+void dom_scroll_to_center_child(char *sel, char *sel_child);
 
 void dom_enable_exit_dialogue(bool enable);
 
diff --git a/web/web_scoreboard.c b/web/web_scoreboard.c
index d1bfa7e..fa1a672 100644
--- a/web/web_scoreboard.c
+++ b/web/web_scoreboard.c
@@ -167,6 +167,17 @@ static const char *points_class(int pts)
 		"p0";
 }
 
+static void buf_darts(char *buf, size_t size, struct visit *v)
+{
+	char *ptr = buf;
+	for (int j = 0; j < v->n_darts; ++j) {
+		char *n = segment_name(v->darts[j]);
+		ptr += snprintf(ptr, size - (ptr - buf),
+			j == 0 ? "%s" : "-%s", n);
+		free(n);
+	}
+}
+
 void draw_visits()
 {
 	dom_set_content("#visits", NULL);
@@ -174,13 +185,15 @@ void draw_visits()
 	int n_visits = state->legs[0]->n_visits > state->legs[1]->n_visits ?
 		state->legs[0]->n_visits : state->legs[1]->n_visits;
 
-	struct dom_elem **elemv = malloc(6 * (n_visits + 1) * sizeof(*elemv));
+	struct dom_elem **elemv = malloc(7 * (n_visits + 1) * sizeof(*elemv));
 	int elemc = 0;
 
+	elemv[elemc++] = create_div("", "visit-p1-spacer");
 	elemv[elemc++] = create_div(state->legs[0]->name, "visit-p1-name");
 	if (match_num_players() != 1)
 		elemv[elemc++] = create_div(state->legs[1]->name,
 			"visit-p2-name");
+	elemv[elemc++] = create_div("", "visit-p2-spacer");
 
 	char buf[32], buf2[32];
 	snprintf(buf, sizeof(buf), "%d", state->legs[0]->start);
@@ -204,6 +217,11 @@ void draw_visits()
 			goto p2;
 		v = state->legs[0]->visits + i;
 
+		if (v->n_darts) {
+			buf_darts(buf, sizeof(buf), v);
+			elemv[elemc++] = create_div(buf, "visit-p1-darts");
+		}
+
 		snprintf(buf, sizeof(buf), "%d", v->points);
 		snprintf(buf2, sizeof(buf2), "%s %s",
 			"visit-p1-pts", points_class(v->points));
@@ -229,13 +247,7 @@ p2:
 		elemv[elemc++] = create_div(buf, buf2);
 
 		if (v->n_darts) {
-			char *ptr = buf;
-			for (int j = 0; j < v->n_darts; ++j) {
-				char *n = segment_name(v->darts[j]);
-				ptr += snprintf(ptr, sizeof(buf) - (ptr - buf),
-					j == 0 ? "%s" : "-%s", n);
-				free(n);
-			}
+			buf_darts(buf, sizeof(buf), v);
 			elemv[elemc++] = create_div(buf, "visit-p2-darts");
 		}
 	}
@@ -246,4 +258,5 @@ p2:
 	free(elemv);
 
 	dom_scroll_to_bottom("#visits");
+	dom_scroll_to_center_child("#visits", ".visit-n");
 }