web: prevent player info boxes flashing on load

3 files changed, 24 insertions, 19 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 653e0ce..371af93 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -97,26 +97,22 @@ function setPlayerActive(n) {
 		e.classList[n && e.id == `p${n}-info` ? 'add' : 'remove']('active'));
 }
 
-function hidePlayerInfo(n) {
-	let elems = document.getElementById(`p${n}-info`).children;
-	for (let i = 0; i < elems.length; ++i)
-		elems[i].style.visibility = 'hidden';
-}
-
 function showPlayerInfo(n) {
-	let elems = document.getElementById(`p${n}-info`).children;
-	for (let i = 0; i < elems.length; ++i)
-		elems[i].style.removeProperty('visibility');
+	document.getElementById(`p${n}-info-inner`).style.visibility = 'visible';
 }
 
-function updatePlayerRem(n, ptr) {
-	document.getElementById(`p${n}-rem`).textContent = UTF8ToString(ptr);
+function hidePlayerInfo(n) {
+	document.getElementById(`p${n}-info-inner`).style.visibility = 'hidden';
 }
 
 function updatePlayerName(n, ptr) {
 	document.getElementById(`p${n}-name`).textContent = UTF8ToString(ptr);
 }
 
+function updatePlayerRem(n, ptr) {
+	document.getElementById(`p${n}-rem`).textContent = UTF8ToString(ptr);
+}
+
 function updatePlayerSugg(n, ptr) {
 	document.getElementById(`p${n}-sugg`).textContent = UTF8ToString(ptr);
 }
diff --git a/web/static/index.html b/web/static/index.html
index 7fda38c..b7f915e 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -13,16 +13,20 @@
 			<div id="info">
 				<div id="oi">oi!</div>
 				<div id="p1-info">
-					<div id="p1-name"></div>
-					<div id="p1-rem"></div>
-					<div id="p1-sugg"></div>
-					<div id="p1-avg"></div>
+					<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>
 				</div>
 				<div id="p2-info">
-					<div id="p2-name"></div>
-					<div id="p2-rem"></div>
-					<div id="p2-sugg"></div>
-					<div id="p2-avg"></div>
+					<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>
 				</div>
 			</div>
 			<div id="controls">
diff --git a/web/static/style.css b/web/static/style.css
index e22c4ce..7247a6b 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -107,6 +107,11 @@ div#p1-info.active, div#p2-info.active {
 	background-color: #304010;
 }
 
+div#p1-info-inner, div #p2-info-inner {
+	display: contents;
+	visibility: hidden;
+}
+
 div#p1-rem, div#p2-rem {
 	font-size: 3em;
 	font-weight: bold;