web: display darts for comp as player 1

1 files changed, 38 insertions, 14 deletions

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';
 	}