web: display darts for comp as player 1

3 files changed, 48 insertions, 15 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 = [