more web ui refactoring

4 files changed, 133 insertions, 131 deletions

diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index 7dbfc59..e00c330 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -21,12 +21,12 @@ struct match_state *state;
 
 void set_user_active() {
 	EM_ASM(setUserActive());
-	EM_ASM(setPromptHandlerVisit());
+	EM_ASM({setPromptHandler($0)}, "visit");
 }
 
 void set_boat_active() {
 	EM_ASM(setBoatActive());
-	EM_ASM(setPromptHandlerNull());
+	EM_ASM({setPromptHandler()}, "");
 }
 
 void suggested(int rem, char *buf) {
@@ -68,9 +68,9 @@ EMSCRIPTEN_KEEPALIVE int is_match_over() {
 }
 
 void match_over() {
-	EM_ASM(setPromptHandlerInit());
+	EM_ASM({setPromptHandler($0)}, "init");
 	EM_ASM({promptSugg($0)}, "Press OK to play again.");
-	EM_ASM(setNoOneActive());
+	EM_ASM(setNoneActive());
 }
 
 EMSCRIPTEN_KEEPALIVE void draw_match() {
@@ -116,7 +116,7 @@ EMSCRIPTEN_KEEPALIVE void draw_match() {
 
 	if (l1->rem <= 0) {
 		EM_ASM({promptMsg($0)}, "Darts needed?");
-		EM_ASM(setPromptHandlerNumDarts());
+		EM_ASM({setPromptHandler($0)}, "num_darts");
 	} else if (l2->rem <= 0) {
 		EM_ASM({promptMsg($0)}, "Bot wins. :(");
 		match_over();
@@ -247,7 +247,7 @@ EMSCRIPTEN_KEEPALIVE void resp_numdarts(int n_darts) {
 		((double)l->start / (((l->n_visits - 1) * 3) + n_darts)) * 3);
 	EM_ASM({promptMsg($0)}, "You win! :)");
 	match_over();
-	EM_ASM(setPromptHandlerInit());
+	EM_ASM({setPromptHandler($0)}, "init");
 }
 
 void init_boat() {
@@ -278,6 +278,8 @@ EMSCRIPTEN_KEEPALIVE void start_match() {
 	state->l1 = leg_init(501, "User");
 	state->l2 = leg_init(501, "Bot");
 
+	EM_ASM({updateUserName($0)}, state->l1->name);
+	EM_ASM({updateBoatName($0)}, state->l2->name);
 	EM_ASM({updateUserRem($0)}, state->l1->rem);
 	EM_ASM({updateBoatStateRem($0)}, state->l2->rem);
 
@@ -297,5 +299,5 @@ EMSCRIPTEN_KEEPALIVE void change_delay(int delay) {
 }
 
 int main() {
-	EM_ASM(initMatch());
+	start_match();
 }
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 662fd3f..292c50d 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -1,92 +1,85 @@
-let user_rem;
-let oi_timeout;
-let prompt_handler;
-
-const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 1, 0];
-
-let prompt_handler_visit = {
-	append(val) {
-		let elem = document.getElementById('prompt');
-		if (elem.textContent.length < 3) {
-			elem.textContent += val;
-			promptUpdateRem();
-		}
-	},
-
-	backspace() {
-		let elem = document.getElementById('prompt');
-		elem.textContent = elem.textContent.slice(0, -1);
-		promptUpdateRem();
-	},
-
-	clear() {
-		document.getElementById('prompt').textContent = '';
-		promptUpdateRem();
-	},
-
-	submit(pts_is_rem) {
-		let elem = document.getElementById('prompt');
-		let pts = elem.textContent;
-		if (!pts) return;
-		promptClear();
-
-		if (pts_is_rem)
-			pts = user_rem - pts;
-
-		Module.ccall('user_visit', 'number', ['number'], [pts]);
-	},
-
-	submit_rem() {
-		this.submit(true);
-	}
+function _promptGet() {
+	return document.getElementById('prompt').textContent;
 }
 
-let prompt_handler_num_darts = {
-	append(val) {
-		let elem = document.getElementById('prompt');
-		if (elem.textContent.length < 3)
-			elem.textContent += val;
-	},
-
-	backspace() {
-		let elem = document.getElementById('prompt');
-		elem.textContent = elem.textContent.slice(0, -1);
-	},
-
-	clear() {
-		document.getElementById('prompt').textContent = '';
-	},
-
-	submit() {
-		let elem = document.getElementById('prompt');
-		let val = elem.textContent;
-		if (!val) return;
-		promptClear();
-
-		Module.ccall('resp_numdarts', null, ['number'], [val]);
-	}
+function _promptGetAndClear() {
+	let val = _promptGet();
+	promptClear();
+	return val;
 }
 
-let prompt_handler_init = {
-	submit() {
-		initMatch();
-	}
+function _promptDeleteLast() {
+	let elem = document.getElementById('prompt');
+	elem.textContent = elem.textContent.slice(0, -1);
 }
 
-function setPromptHandlerVisit() {
-	prompt_handler = prompt_handler_visit;
+function _promptClear() {
+	document.getElementById('prompt').textContent = '';
 }
 
-function setPromptHandlerInit() {
-	prompt_handler = prompt_handler_init;
-}
+let prompt_handler;
+let prompt_handlers = {
+	visit: {
+		append(val) {
+			let elem = document.getElementById('prompt');
+			if (elem.textContent.length < 3) {
+				elem.textContent += val;
+				promptUpdateRem();
+			}
+		},
+
+		backspace() {
+			_promptDeleteLast();
+			promptUpdateRem();
+		},
 
-function setPromptHandlerNumDarts() {
-	prompt_handler = prompt_handler_num_darts;
+		clear() {
+			_promptClear();
+			promptUpdateRem();
+		},
+
+		submit() {
+			let pts = _promptGetAndClear();
+			if (pts)
+				Module.ccall('user_visit', 'number', ['number'], [pts]);
+		},
+
+		submit_rem() {
+			let pts = _promptGetAndClear();
+			if (pts)
+				Module.ccall('user_visit', 'number', ['number'], [user_rem - pts]);
+		}
+	},
+	num_darts: {
+		append(val) {
+			let elem = document.getElementById('prompt');
+			if (elem.textContent.length < 3)
+				elem.textContent += val;
+		},
+
+		backspace() {
+			_promptDeleteLast();
+		},
+
+		clear() {
+			_promptClear();
+		},
+
+		submit() {
+			let n = _promptGetAndClear();
+			if (n)
+				Module.ccall('resp_numdarts', null, ['number'], [n]);
+		}
+	},
+	init: {
+		submit() {
+			Module.ccall('start_match');
+		}
+	}
 }
 
-function setPromptHandlerNull() {
-	prompt_handler = null;
+function setPromptHandler(ptr) {
+	prompt_handler = prompt_handlers[UTF8ToString(ptr)];
 }
 
 function promptAppend(...args) {
@@ -118,10 +111,7 @@ function clearMatchLog() {
 	document.getElementById('match').textContent = '';
 }
 
-function initMatch() {
-	Module.ccall('start_match');
-}
-
+let oi_timeout;
 function oi() {
 	document.getElementById('oi').style.visibility = 'visible';
 
@@ -137,37 +127,50 @@ function clearOi() {
 	}
 }
 
+let user_rem;
 function updateUserRem(rem) {
 	user_rem = rem;
 	updateUserStateRem(rem);
 }
 
 function updateUserStateRem(rem) {
-	let elem = document.getElementById('user-rem');
+	let elem = document.getElementById('p1-rem');
 	elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem;
 	Module.ccall('get_suggested', null, ['number', 'number'], [rem, 1]);
 }
 
 function updateBoatStateRem(rem) {
-	let elem = document.getElementById('boat-rem');
+	let elem = document.getElementById('p2-rem');
 	elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem;
 	Module.ccall('get_suggested', null, ['number', 'number'], [rem, 2]);
 }
 
+function updateUserName(p) {
+	document.getElementById('p1-name').textContent = UTF8ToString(p);
+}
+
+function updateBoatName(p) {
+	document.getElementById('p2-name').textContent = UTF8ToString(p);
+}
+
 function userSugg(p) {
-	document.getElementById('user-sugg').textContent = UTF8ToString(p);
+	document.getElementById('p1-sugg').textContent = UTF8ToString(p);
 }
 
 function boatSugg(p) {
-	document.getElementById('boat-sugg').textContent = UTF8ToString(p);
+	document.getElementById('p2-sugg').textContent = UTF8ToString(p);
 }
 
 function updateUserAvg(avg) {
-	document.getElementById('user-avg').textContent = avg.toFixed(2);
+	document.getElementById('p1-avg').textContent = avg.toFixed(2);
 }
 
 function updateBoatAvg(avg) {
-	document.getElementById('boat-avg').textContent = avg.toFixed(2);
+	document.getElementById('p2-avg').textContent = avg.toFixed(2);
+}
+
+function setPromptText(ptr) {
+	document.getElementById('prompt').textContent = UTF8ToString(ptr);
 }
 
 function promptMsg(p) {
@@ -179,29 +182,25 @@ function promptSugg(p) {
 }
 
 function promptUpdateRem() {
-	let elem = document.getElementById('user-rem');
-	let pts = document.getElementById('prompt').textContent;
+	let elem = document.getElementById('p1-rem');
+	let pts = _promptGet();
 
 	updateUserStateRem(pts ? user_rem - pts : user_rem);
 }
 
-function setBoatActive() {
-	document.getElementById('user-state').classList.remove('active');
-	document.getElementById('boat-state').classList.add('active');
-}
-
 function setUserActive() {
-	document.getElementById('boat-state').classList.remove('active');
-	document.getElementById('user-state').classList.add('active');
+	document.getElementById('p2-state').classList.remove('active');
+	document.getElementById('p1-state').classList.add('active');
 }
 
-function setNoOneActive() {
-	document.getElementById('user-state').classList.remove('active');
-	document.getElementById('boat-state').classList.remove('active');
+function setBoatActive() {
+	document.getElementById('p1-state').classList.remove('active');
+	document.getElementById('p2-state').classList.add('active');
 }
 
-function setPromptText(ptr) {
-	document.getElementById('prompt').textContent = UTF8ToString(ptr);
+function setNoneActive() {
+	document.getElementById('p1-state').classList.remove('active');
+	document.getElementById('p2-state').classList.remove('active');
 }
 
 function scheduleBoatThrowing(pts, ptr, delay_ms) {
@@ -220,6 +219,7 @@ function scheduleEndBoatThrowing(rem, avg, delay_ms) {
 		delay_ms);
 }
 
+const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 1, 0];
 function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) {
 	let elem = document.getElementById('match');
 
@@ -238,7 +238,7 @@ function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) {
 	elem.scrollTop = elem.scrollHeight;
 }
 
-function stdevChanged(val) {
+function setStdev(val) {
 	Module.ccall('change_stdev', null, ['number', 'number'], [val, val]);
 }
 
@@ -246,7 +246,7 @@ function updateStdev(val) {
 	document.getElementById('stdev').value = val;
 }
 
-function delayChanged(val) {
+function setDelay(val) {
 	Module.ccall('change_delay', null, ['number'], [val]);
 }
 
diff --git a/web/static/index.html b/web/static/index.html
index 7f3e5fc..1db6537 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -12,17 +12,17 @@
 		<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 id="user-avg"></div>
+				<div id="p1-state">
+					<div id="p1-name"></div>
+					<div id="p1-rem"></div>
+					<div id="p1-sugg"></div>
+					<div id="p1-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 id="p2-state">
+					<div id="p2-name"></div>
+					<div id="p2-rem"></div>
+					<div id="p2-sugg"></div>
+					<div id="p2-avg"></div>
 				</div>
 			</div>
 			<div id="keypad">
@@ -46,8 +46,8 @@
 			</div>
 			<div id="settings-bar">
 				<div>dartboat™</div>
-				<div class="input first"><span>delay</span><input id="delay" onchange="delayChanged(this.value)" maxlength="4" value="1000"></div>
-				<div class="input"><span>stdev</span><input id="stdev" onchange="stdevChanged(this.value)" maxlength="4" value=""></div>
+				<div class="input first"><span>delay</span><input id="delay" onchange="setDelay(this.value)" maxlength="4" value="1000"></div>
+				<div class="input"><span>stdev</span><input id="stdev" onchange="setStdev(this.value)" maxlength="4" value=""></div>
 				<div class="help-button" onclick="modal('help-modal')">?</div>
 			</div>
 			<div id="match"></div>
diff --git a/web/static/style.css b/web/static/style.css
index e099f86..fe686a2 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -66,7 +66,7 @@ div#rem-bar {
 	grid-template-columns: repeat(2, 1fr);
 }
 
-div#user-state, div#boat-state {
+div#p1-state, div#p2-state {
 	background-color: #222;
 	font-size: 1.5em;
 
@@ -78,35 +78,35 @@ div#user-state, div#boat-state {
 	align-items: center;
 }
 
-div#user-state.active, div#boat-state.active {
+div#p1-state.active, div#p2-state.active {
 	background-color: #2a390a;
 }
 
-div#user-rem, div#boat-rem {
+div#p1-rem, div#p2-rem {
 	font-size: 3em;
 	font-weight: bold;
 }
 
-div#user-name, div#boat-name {
+div#p1-name, div#p2-name {
 	color: #aaa;
 }
 
-div#user-sugg, div#boat-sugg {
+div#p1-sugg, div#p2-sugg {
 	color: #aaa;
 	font-size: 0.8em;
 }
 
-div#user-sugg:after, div#boat-sugg:after {
+div#p1-sugg:after, div#p2-sugg:after {
 	content: '\200b';
 }
 
-div#user-avg, div#boat-avg {
+div#p1-avg, div#p2-avg {
 	font-size: 0.8em;
 	align-self: left;
 	width: 100%;
 }
 
-div#user-avg:before, div#boat-avg:before {
+div#p1-avg:before, div#p2-avg:before {
 	content: 'avg: ';
 }