add leg average to web interface

4 files changed, 90 insertions, 32 deletions

diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index 4eaa6ce..b2c306c 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -63,6 +63,9 @@ EMSCRIPTEN_KEEPALIVE bool user_visit(struct match_state *state, int points) {
 	v->rem = l->rem;
 	EM_ASM({updateUserRem($0)}, l->rem);
 
+	if (v->rem > 0)
+		EM_ASM({updateUserAvg($0)}, (double)(l->start-l->rem)/l->n_visits);
+
 	return true;
 }
 
@@ -85,11 +88,17 @@ EMSCRIPTEN_KEEPALIVE void boat_visit(struct match_state *state) {
 		*s2 = v->n_darts > 1 ? segment_name(v->darts[1]) : NULL,
 		*s3 = v->n_darts > 2 ? segment_name(v->darts[2]) : NULL;
 
-	EM_ASM({boatVisitRes($0, $1, $2, $3, $4, $5, $6, $7)},
+	double avg;
+	if (v->rem > 0)
+		avg = (double)(l->start - l->rem) / l->n_visits;
+	else
+		avg = ((double)l->start / (((l->n_visits - 1) * 3) + v->n_darts)) * 3;
+
+	EM_ASM({boatVisitRes($0, $1, $2, $3, $4, $5, $6, $7, $8)},
 		l->rem, v->n_darts, segment_points(v->darts[0]),
 		v->n_darts > 1 ? segment_points(v->darts[1]) : 0,
 		v->n_darts > 2 ? segment_points(v->darts[2]) : 0,
-		s1, s2, s3);
+		s1, s2, s3, avg);
 
 	free(s1);
 	free(s2);
@@ -138,15 +147,29 @@ EMSCRIPTEN_KEEPALIVE void draw_match(struct match_state *state) {
 	}
 
 	if (l1->rem <= 0) {
-		EM_ASM({promptMsg($0)}, "You win! :)");
-		EM_ASM(matchOver());
+		EM_ASM(promptNumDarts());
+		//EM_ASM({promptMsg($0)}, "You win! :)");
+		//EM_ASM(matchOver());
 	} else if (l2->rem <= 0) {
 		EM_ASM({promptMsg($0)}, "Bot wins. :(");
 		EM_ASM(matchOver());
 	} else {
 		EM_ASM({promptMsg($0)}, "Enter points:");
 	}
+}
+
+EMSCRIPTEN_KEEPALIVE int resp_numdarts(struct match_state *state, int n_darts) {
+	if (n_darts < 1 || n_darts > 4)
+		return 0;
+
+	struct leg *l = state->l1;
+
+	EM_ASM({updateUserAvg($0)},
+		((double)l->start / (((l->n_visits - 1) * 3) + n_darts)) * 3);
+	EM_ASM({promptMsg($0)}, "You win! :)");
+	EM_ASM(matchOver());
 
+	return 1;
 }
 
 void init_boat() {
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 015c541..c1a197a 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -1,5 +1,6 @@
 let match_active = false;
 let prompt_disable = false;
+let prompt_num_darts = false;
 let match_state, user_rem, boat_rem;
 let oi_timeout;
 let delay_ms = 1000;
@@ -80,6 +81,14 @@ function updateBoatStateRem(rem) {
 	Module.ccall('get_suggested', null, ['number', 'number'], [rem, 2]);
 }
 
+function updateUserAvg(avg) {
+	document.getElementById('user-avg').textContent = avg.toFixed(2);
+}
+
+function updateBoatAvg(avg) {
+	document.getElementById('boat-avg').textContent = avg.toFixed(2);
+}
+
 function promptUpdateRem() {
 	let elem = document.getElementById('user-rem');
 	let pts = document.getElementById('prompt').textContent;
@@ -100,7 +109,8 @@ function promptAppend(val) {
 	let elem = document.getElementById('prompt');
 	if (elem.textContent.length < 3) {
 		elem.textContent += val;
-		promptUpdateRem();
+		if (!prompt_num_darts)
+			promptUpdateRem();
 	}
 }
 
@@ -121,6 +131,11 @@ function promptBackspace() {
 	promptUpdateRem();
 }
 
+function promptNumDarts() {
+	promptMsgStr('Darts needed?');
+	prompt_num_darts = true;
+}
+
 function setBoatActive() {
 	document.getElementById('user-state').className = '';
 	document.getElementById('boat-state').className = 'active';
@@ -147,6 +162,15 @@ function promptSubmit(remaining) {
 	if (!p_user) return;
 	promptClear();
 
+	if (prompt_num_darts) {
+		if (!stcall('resp_numdarts', null, ['number'], [p_user])) {
+			oi();
+			return;
+		}
+		prompt_num_darts = false;
+		return;
+	}
+
 	if (remaining)
 		p_user = user_rem - p_user;
 
@@ -165,7 +189,7 @@ function promptSubmit(remaining) {
 	}
 }
 
-function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
+function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3, avg) {
 	// cannot convert in timeout func because strings are freed in c func
 	let s1 = UTF8ToString(ptr1);
 	let s2 = UTF8ToString(ptr2);
@@ -173,6 +197,7 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
 
 	if (delay_ms == 0) {
 		updateBoatRem(rem);
+		updateBoatAvg(avg);
 		document.getElementById('match').textContent = '';
 		stcall('draw_match');
 		setUserActive();
@@ -189,6 +214,7 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
 
 		setTimeout(function() {
 				updateBoatRem(rem);
+				updateBoatAvg(avg);
 				document.getElementById('prompt').textContent = '';
 				document.getElementById('match').textContent = '';
 				stcall('draw_match');
diff --git a/web/static/index.html b/web/static/index.html
index a5863ca..7f3e5fc 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -10,19 +10,21 @@
 	</head>
 	<body>
 		<div id="main">
-				<div id="rem-bar">
-					<div id="oi">oi!</div>
-					<div id="user-state">
-						<div id="user-name">User</div>
-						<div id="user-rem"></div>
-						<div id="user-sugg"></div>
-					</div>
-					<div id="boat-state">
-						<div id="boat-name">Bot</div>
-						<div id="boat-rem"></div>
-						<div id="boat-sugg"></div>
-					</div>
+			<div id="rem-bar">
+				<div id="oi">oi!</div>
+				<div id="user-state">
+					<div id="user-name">User</div>
+					<div id="user-rem"></div>
+					<div id="user-sugg"></div>
+					<div id="user-avg"></div>
 				</div>
+				<div id="boat-state">
+					<div id="boat-name">Bot</div>
+					<div id="boat-rem"></div>
+					<div id="boat-sugg"></div>
+					<div id="boat-avg"></div>
+				</div>
+			</div>
 			<div id="keypad">
 				<div id="prompt-container">
 					<div id="prompt-msg"></div>
diff --git a/web/static/style.css b/web/static/style.css
index 5287cfc..e099f86 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -2,8 +2,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap');
 
 body {
-	color: #ddd;
-	background-color: #000;
+	color: #eee;
+	background-color: #111;
 	font-family: 'Lato', sans-serif;
 	user-select: none;
 
@@ -39,7 +39,7 @@ div#keypad {
 div#oi {
 	visibility: hidden;
 
-	background-color: #1a1a1a;
+	background-color: #6c0d0d;
 	font-size: 2em;
 	height: 1.2em;
 	width: 3ch;
@@ -79,7 +79,7 @@ div#user-state, div#boat-state {
 }
 
 div#user-state.active, div#boat-state.active {
-	background-color: #240;
+	background-color: #2a390a;
 }
 
 div#user-rem, div#boat-rem {
@@ -87,10 +87,6 @@ div#user-rem, div#boat-rem {
 	font-weight: bold;
 }
 
-div#boat-rem {
-	justify-content: right;
-}
-
 div#user-name, div#boat-name {
 	color: #aaa;
 }
@@ -104,6 +100,16 @@ div#user-sugg:after, div#boat-sugg:after {
 	content: '\200b';
 }
 
+div#user-avg, div#boat-avg {
+	font-size: 0.8em;
+	align-self: left;
+	width: 100%;
+}
+
+div#user-avg:before, div#boat-avg:before {
+	content: 'avg: ';
+}
+
 div#prompt-container {
 	grid-column: 1 / span 3;
 
@@ -153,13 +159,13 @@ div.key {
 
 @media (hover: hover) and (pointer: fine) {
 	div.key:hover {
-		background-color: #240;
+		background-color: #2a390a;
 	}
 }
 
 div.key:active {
 	color: #fff;
-	background-color: #360;
+	background-color: #3b500e;
 }
 
 div.key.num {
@@ -235,7 +241,7 @@ div#settings-bar div.help-button {
 div#settings-bar input:focus {
 	color: #fff;
 	background-color: #6e41b8;
-	outline: #5a0 solid 3px;
+	outline: #7eab1e solid 2px;
 }
 
 div#settings-bar div.help-button:active {
@@ -299,12 +305,13 @@ div#match .visit-col6 { color: #888; justify-content: left; font-family: monospa
 	background-color: #222;
 	font-size: 1.4em;
 	font-family: 'Source Serif Pro', serif;
+	user-select: text;
 
 	width: calc(min(40em, 90vw) - 4em);
 	max-height: calc(calc(100vh - 10vw) - 4em);
 	margin: 5vw auto;
 	padding: 2em;
-	outline: #5a0 solid 3px;
+	outline: #7eab1e solid 2px;
 	overflow: scroll;
 }
 
@@ -323,11 +330,11 @@ div#match .visit-col6 { color: #888; justify-content: left; font-family: monospa
 }
 
 a {
-	color: #5a0;
+	color: #7eab1e;
 }
 
 a:hover {
-	color: #7d0;
+	color: #a8e428;
 }
 
 @media (max-aspect-ratio: 9/20) {