web: add landscape layout

3 files changed, 44 insertions, 10 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 9eeb337..c69f7cb 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -23,7 +23,7 @@ div#main {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: min-content min-content minmax(0, 2fr) minmax(0, 3fr);
-	grid-template-areas: "settings-bar" "info" "visits" "controls";
+	grid-template-areas: 'settings-bar' 'info' 'visits' 'controls';
 }
 
 div#controls {
@@ -345,7 +345,7 @@ div#visits {
 	padding: 0.4rem;
 
 	display: grid;
-	grid-template-columns: 2ch repeat(5, 2fr) 2ch;
+	grid-template-columns: 2ch 1fr repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) 1fr 2ch;
 	grid-auto-rows: min-content;
 	grid-row-gap: 0.3em;
 }
@@ -360,9 +360,10 @@ div#visits div {
 	justify-content: center;
 }
 
-div#visits .visit-col1 { grid-column: 2; }
-div#visits .visit-col2 { grid-column: 3; }
-div#visits .visit-col3 { color: #666; grid-column: 4; }
+div#visits .visit-col1 { grid-column: 3; }
+div#visits .visit-col2 { grid-column: 4; }
+div#visits .visit-col3 { color: #666; grid-column: 5; }
+div#visits .visit-col6 { color: #666; grid-column: 9; }
 div#visits .p0 { color: #e00018; }
 div#visits .p20 { color: #e06000; }
 div#visits .p40 { color: #e09800; }
@@ -370,8 +371,9 @@ div#visits .p60 { color: #e0e018; }
 div#visits .p100 { color: #78c018; }
 div#visits .p140 { color: #20e018; }
 div#visits .p180 { color: #20e018; font-weight: bold; }
-div#visits .visit-col6 { color: #666; justify-content: left; font-family: monospace; white-space: pre; }
-div#visits .visit-col6:not(:empty):before { content: '…'; }
+div#visits .visit-col6 { color: #666; justify-content: left; white-space: nowrap; }
+div#visits .visit-col6:not(:empty):before { content: '…\2003'; }
+div#visits .visit-name1, div#visits .visit-name2 { display: none; }
 
 .modal {
 	background-color: #000a;
@@ -436,3 +438,29 @@ a:hover {
 		font-size: 3em;
 	}
 }
+
+@media (min-aspect-ratio: 1.6) {
+	div#main {
+		width: 100vw;
+
+		grid-template-columns: 1fr 80vh;
+		grid-template-rows: min-content min-content minmax(0, 3fr);
+		grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls';
+	}
+
+	div#controls {
+		margin-top: 0;
+	}
+
+	div#visits {
+		background-color: #111;
+		grid-template-columns: repeat(5, min(calc(calc(100% - 4ch) / 5), 10ch)) min-content;
+	}
+	div#visits .visit-col1 { grid-column: 1; }
+	div#visits .visit-col2 { grid-column: 2; }
+	div#visits .visit-col3 { grid-column: 3; }
+	div#visits .visit-col6 { justify-content: center; grid-column: 6; }
+	div#visits .visit-col6:not(:empty):before { content: '\2003'; }
+	div#visits .visit-name1 { display: flex; background-color: #222; grid-column: 1 / span 2; }
+	div#visits .visit-name2 { display: flex; background-color: #222; grid-column: 4 / span 2; }
+}
diff --git a/web/web_scoreboard.c b/web/web_scoreboard.c
index 6207d4a..8746cc9 100644
--- a/web/web_scoreboard.c
+++ b/web/web_scoreboard.c
@@ -177,6 +177,11 @@ void draw_visits()
 	struct dom_elem **elemv = malloc(6 * (n_visits + 1) * sizeof(*elemv));
 	int elemc = 0;
 
+	elemv[elemc++] = create_div(state->legs[0]->name, "visit-name1");
+	if (state->mode != M_P)
+		elemv[elemc++] = create_div(state->legs[1]->name,
+			"visit-name2");
+
 	char buf[32], buf2[32];
 	snprintf(buf, sizeof(buf), "%d", state->legs[0]->start);
 	elemv[elemc++] = create_div(buf, "visit-col2");
@@ -213,10 +218,11 @@ void draw_visits()
 		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]);
-				snprintf(buf + (j * 5), sizeof(buf) - (j * 5),
-					" %4s", n);
+				ptr += snprintf(ptr, sizeof(buf) - (ptr - buf),
+					j == 0 ? "%s" : "-%s", n);
 				free(n);
 			}
 			elemv[elemc++] = create_div(buf, "visit-col6");
diff --git a/web/web_svg.c b/web/web_svg.c
index 0a6c00f..b52705f 100644
--- a/web/web_svg.c
+++ b/web/web_svg.c
@@ -185,7 +185,7 @@ void svg_draw_board()
 
 void svg_draw_point(double x, double y)
 {
-	struct dom_elem *e = gen_circle(8, "#33f");
+	struct dom_elem *e = gen_circle(6, "#33f");
 	dom_elem_add_attr(e, "stroke", "#ff0");
 	dom_elem_add_attr(e, "stroke-width", "2");
 	dom_elem_add_attrd(e, "cx", x);