web: support visit log for 3+ player matches

The new match modes are for testing. They'll eventually be removed in
favour of true configurability.

2 files changed, 57 insertions, 30 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 5c7f011..ecbee74 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -50,6 +50,10 @@ function elemSetUniqClass(sel, c, sel_set) {
 		sel && e.matches(selstr) ? 'add' : 'remove'](cstr));
 }
 
+function rootSetStylePropertyInt(prop, val) {
+	document.documentElement.style.setProperty(UTF8ToString(prop), val);
+}
+
 function elemScrollToBottom(sel) {
 	const e = $(UTF8ToString(sel));
 	e.scrollTop = e.scrollHeight;
diff --git a/web/static/style.css b/web/static/style.css
index 49daa96..f0209f8 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -46,6 +46,10 @@
 	src: url('fonts/Inter-num.woff2') format('woff2');
 }
 
+:root {
+	--num-players: 0;
+}
+
 html {
 	font-size: clamp(1.5vh, 2.5vw, 2vh);
 
@@ -601,15 +605,16 @@ body {
 	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 .visit-name { grid-column: span 2; }
+#visits:not(.dense) .visit-p1-name { grid-column: 2 / span 2; }
+#visits:not(.dense) .visit-p2-name { grid-column: 5 / span 2; }
+#visits:not(.dense) .visit-p1-darts { grid-column: 1; }
+#visits:not(.dense) .visit-p1-pts { grid-column: 2; }
+#visits:not(.dense) .visit-p1-rem { grid-column: 3; }
+#visits:not(.dense) .visit-n { grid-column: 4; }
+#visits:not(.dense) .visit-p2-rem { grid-column: 5; }
+#visits:not(.dense) .visit-p2-pts { grid-column: 6; }
+#visits:not(.dense) .visit-p2-darts { grid-column: 7; }
 
 #visits .p0 { color: #e00018; }
 #visits .p20 { color: #e06000; }
@@ -619,35 +624,45 @@ body {
 #visits .p140 { color: #20e018; }
 #visits .p180 { color: #20e018; font-weight: bold; }
 #visits .throws-first { color: #999; }
-#visits .throws-first:before { content: '\f151'; font-size: 0.6em; }
+#visits .throws-first:before { content: '\f151'; font-size: 0.6em;
+	font-family: 'bootstrap-icons-sub';
+	vertical-align: -0.125em;
+}
 
-#visits .visit-p1-name, #visits .visit-p2-name {
+#visits .visit-name {
+	margin: 0 0.2rem;
+}
+#visits .visit-name, #visits .visit-p1-name, #visits .visit-p2-name {
 	color: #555;
 	border-bottom: 2px solid #555;
 }
 #visits .visit-n {
 	color: #555;
 }
-#visits .visit-p1-darts, #visits .visit-p2-darts {
+#visits .visit-dense-darts, .visit-p1-darts, #visits .visit-p2-darts {
 	color: #555;
 	font-size: 0.75em;
 	white-space: nowrap;
 }
-#visits .visit-p1-darts {
+#visits .visit-dense-darts {
+	margin-top: calc(1.5 * -0.2em / 0.75);
+	grid-column: span 2;
+}
+#visits:not(.dense) .visit-p1-darts {
 	justify-content: right;
 }
-#visits .visit-p1-darts:not(:empty):after {
+#visits:not(.dense) .visit-p1-darts:not(:empty):after {
 	content: '\2003';
 }
-#visits .visit-p2-darts {
+#visits:not(.dense) .visit-p2-darts {
 	justify-content: left;
 }
-#visits .visit-p2-darts:not(:empty):before {
+#visits:not(.dense) .visit-p2-darts:not(:empty):before {
 	content: '\2003';
 }
 
 @media (max-aspect-ratio: 8/5) {
-	#visits {
+	#visits:not(.dense) {
 		grid-template-columns:
 			min-content
 			calc(calc(100% - 27ch) / 2)
@@ -655,27 +670,35 @@ body {
 			calc(calc(100% - 27ch) / 2)
 			min-content;
 	}
-	#visits .visit-p1-name, #visits .visit-p2-name {
+	#visits:not(.dense) .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 {
+	#visits:not(.dense) .visit-p1-spacer { grid-column: 1; width: 1ch }
+	#visits:not(.dense) .visit-p2-spacer { grid-column: 9; width: 1ch }
+	#visits:not(.dense) .visit-p1-darts { grid-column: 1; }
+	#visits:not(.dense) .visit-p1-pts { grid-column: 3; }
+	#visits:not(.dense) .visit-p1-rem { grid-column: 4; }
+	#visits:not(.dense) .visit-n { grid-column: 5; }
+	#visits:not(.dense) .visit-p2-rem { grid-column: 6; }
+	#visits:not(.dense) .visit-p2-pts { grid-column: 7; }
+	#visits:not(.dense) .visit-p2-darts { grid-column: 9; }
+
+	#visits:not(.dense) .visit-p1-darts:not(:empty):after {
 		content: '\2003…';
 	}
-	#visits .visit-p2-darts:not(:empty):before {
+	#visits:not(.dense) .visit-p2-darts:not(:empty):before {
 		content: '…\2003';
 	}
 }
 
+#visits.dense {
+	grid-template-columns: min-content repeat(var(--num-players), min-content min-content);
+}
+
+#visits.dense > * {
+	min-width: 5ch;
+}
+
 /* modals */
 
 .modal {