web: use generic player slots in HTML/CSS

3 files changed, 29 insertions, 31 deletions

diff --git a/web/static/index.html b/web/static/index.html
index 196db91..85e3cd7 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -26,20 +26,20 @@
 				<div id="oi">oi!</div>
 				<div id="info-slot-prev" class="icon">&#xf27f;</div>
 				<div id="info-slot-next" class="icon">&#xf280;</div>
-				<div id="p1-info">
-					<div id="p1-info-inner">
-						<div id="p1-name"></div>
-						<div id="p1-rem"></div>
-						<div id="p1-sugg"></div>
-						<div id="p1-avg"></div>
+				<div id="info-slot-1" class="info-slot">
+					<div class="inner">
+						<div class="name"></div>
+						<div class="rem"></div>
+						<div class="sugg"></div>
+						<div class="avg"></div>
 					</div>
 				</div>
-				<div id="p2-info">
-					<div id="p2-info-inner">
-						<div id="p2-name"></div>
-						<div id="p2-rem"></div>
-						<div id="p2-sugg"></div>
-						<div id="p2-avg"></div>
+				<div id="info-slot-2" class="info-slot">
+					<div class="inner">
+						<div class="name"></div>
+						<div class="rem"></div>
+						<div class="sugg"></div>
+						<div class="avg"></div>
 					</div>
 				</div>
 			</div>
diff --git a/web/static/style.css b/web/static/style.css
index f8b6ea0..49daa96 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -523,7 +523,7 @@ body {
 	background-color: #7b51ca;
 }
 
-#info #p1-info, #info #p2-info {
+#info .info-slot {
 	background-color: #222;
 	font-size: 1.5em;
 
@@ -534,45 +534,43 @@ body {
 	align-items: center;
 }
 
-#info #p1-info.active, #info #p2-info.active {
+#info .info-slot.active {
 	background-color: #35481d;
 }
 
-#info #p1-info-inner, #info #p2-info-inner {
+#info .inner {
 	display: contents;
 	visibility: hidden;
 }
 
-#info #p1-info-inner.visible, #info #p2-info-inner.visible {
+#info .inner.visible {
 	visibility: visible;
 }
 
-#info #p1-rem, #info #p2-rem {
+#info .rem {
 	font-size: 3em;
 	font-weight: bold;
 }
 
-#info #p1-name, #info #p2-name {
+#info .name {
 	color: #ccc;
 }
 
-#info #p1-sugg, #info #p2-sugg {
+#info .sugg {
 	color: #aaa;
 	font-size: 0.8em;
 }
 
-#info #p1-name:after, #info #p2-name:after,
-#info #p1-rem:after, #info #p2-rem:after,
-#info #p1-sugg:after, #info #p2-sugg:after {
+#info .name:after, #info .rem:after, #info .sugg:after {
 	content: '\200b';
 }
 
-#info #p1-avg, #info #p2-avg {
+#info .avg {
 	font-size: 0.8em;
 	width: 100%;
 }
 
-#info #p1-avg:before, #info #p2-avg:before {
+#info .avg:before {
 	content: 'avg: ';
 }
 
diff --git a/web/web_scoreboard.c b/web/web_scoreboard.c
index 79bddb2..57090fb 100644
--- a/web/web_scoreboard.c
+++ b/web/web_scoreboard.c
@@ -28,7 +28,7 @@ static void flush_slot(int slot)
 
 	// FIXME: should be combined with flushing player info
 	char sel[32];
-	int len = sprintf(sel, "#p%d-", slot);
+	int len = sprintf(sel, "#info-slot-%d .", slot);
 	strcpy(sel + len, "name");
 	dom_set_content(sel, bufstr_flush(&bufs[pn-1].name));
 	strcpy(sel + len, "rem");
@@ -64,9 +64,9 @@ static void set_slot_active(int slot)
 	if (slot == -1)
 		sel = NULL;
 	else
-		sprintf(sel, "#p%d-info", slot);
+		sprintf(sel, "#info-slot-%d", slot);
 
-	dom_set_uniq_class(sel, "active", "[id$=-info]");
+	dom_set_uniq_class(sel, "active", ".info-slot");
 }
 
 EMSCRIPTEN_KEEPALIVE
@@ -143,7 +143,7 @@ void scoreboard_flush_player_info(int pn)
 	if (slot == -1) return;
 
 	char sel[32];
-	int len = sprintf(sel, "#p%d-", slot);
+	int len = sprintf(sel, "#info-slot-%d .", slot);
 
 	if (bufstr_changed(&bufs[pn-1].name)) {
 		strcpy(sel + len, "name");
@@ -225,11 +225,11 @@ void update_player_rem(int pn, int rem)
 void scoreboard_show_info(int num_players)
 {
 	set_slot_player(1, 1);
-	dom_add_class("#p1-info-inner", "visible");
+	dom_add_class("#info-slot-1 .inner", "visible");
 
 	if (num_players > 1) {
 		set_slot_player(2, 2);
-		dom_add_class("#p2-info-inner", "visible");
+		dom_add_class("#info-slot-2 .inner", "visible");
 	}
 
 	if (num_players > 2) {
@@ -248,7 +248,7 @@ static void clear_player_info(int pn)
 
 void scoreboard_hide_info()
 {
-	dom_set_uniq_class(NULL, "visible", "[id$=-info-inner]");
+	dom_set_uniq_class(NULL, "visible", ".info-slot .inner");
 	for (int pn = 1; pn < 4; ++pn) // FIXME
 		clear_player_info(pn);