web: implement prompt-aware keypad

4 files changed, 59 insertions, 23 deletions

diff --git a/web/dartboat_wasm.c b/web/dartboat_wasm.c
index ccde71a..006ec1e 100644
--- a/web/dartboat_wasm.c
+++ b/web/dartboat_wasm.c
@@ -79,12 +79,17 @@ EMSCRIPTEN_KEEPALIVE int is_match_over() {
 }
 
 void match_over() {
-	EM_ASM({setPromptHandler($0)}, "init");
-	EM_ASM({promptMsgL($0)}, "Enter match mode:");
-	EM_ASM({promptMsgR($0)}, "1 to play against bot\n2 to play against player");
+	EM_ASM({setPromptHandler($0)}, "match_over");
+	EM_ASM({promptMsgR($0)}, "Press OK to end match.");
 	EM_ASM(setPlayerActive());
 }
 
+EMSCRIPTEN_KEEPALIVE void match_init() {
+	EM_ASM({setPromptHandler($0)}, "init");
+	EM_ASM({promptMsgR($0)}, "");
+	EM_ASM({promptMsgL($0)}, "Select match mode:");
+}
+
 EMSCRIPTEN_KEEPALIVE void draw_match() {
 	struct leg *l1 = state->l1;
 	struct leg *l2 = state->l2;
@@ -333,7 +338,6 @@ EMSCRIPTEN_KEEPALIVE void resp_numdarts(int n_darts) {
 		((double)l->start / (((l->n_visits - 1) * 3) + n_darts)) * 3);
 	EM_ASM({promptMsgL($0)}, "You win! :)");
 	match_over();
-	EM_ASM({setPromptHandler($0)}, "init");
 }
 
 void init_boat() {
@@ -403,5 +407,5 @@ EMSCRIPTEN_KEEPALIVE void set_delay(int delay) {
 int main() {
 	EM_ASM(read_opts());
 	init_boat();
-	match_over();
+	match_init();
 }
diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 7324ad0..016742b 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -124,6 +124,12 @@ let prompt_handlers = {
 		}
 	},
 
+	match_over: {
+		submit() {
+			Module.ccall('match_init');
+		},
+	},
+
 	init: {
 		append(val) {
 			let e = document.getElementById('prompt-input');
@@ -153,6 +159,14 @@ let prompt_handlers = {
 
 function setPromptHandler(ptr) {
 	prompt_handler = prompt_handlers[UTF8ToString(ptr)];
+
+	if (UTF8ToString(ptr) === "init") {
+		document.querySelectorAll('.keypad').forEach(e => e.style.display = 'none');
+		document.getElementById('keypad-init').style.removeProperty('display');
+	} else {
+		document.querySelectorAll('.keypad').forEach(e => e.style.display = 'none');
+		document.getElementById('keypad-default').style.removeProperty('display');
+	}
 }
 
 function promptHandle(action, ...args) {
diff --git a/web/static/index.html b/web/static/index.html
index dbd2b6e..59df139 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -25,26 +25,32 @@
 					<div id="p2-avg"></div>
 				</div>
 			</div>
-			<div id="keypad">
+			<div id="controls">
 				<div id="prompt-container">
 					<div id="prompt-msg-l"></div>
 					<div id="prompt-input"></div>
 					<div id="prompt-msg-r"></div>
 				</div>
-				<div onclick="promptHandle('append', 1)" class="key num">1</div>
-				<div onclick="promptHandle('append', 2)" class="key num">2</div>
-				<div onclick="promptHandle('append', 3)" class="key num">3</div>
-				<div onclick="promptHandle('append', 4)" class="key num">4</div>
-				<div onclick="promptHandle('append', 5)" class="key num">5</div>
-				<div onclick="promptHandle('append', 6)" class="key num">6</div>
-				<div onclick="promptHandle('append', 7)" class="key num">7</div>
-				<div onclick="promptHandle('append', 8)" class="key num">8</div>
-				<div onclick="promptHandle('append', 9)" class="key num">9</div>
-				<div onclick="promptHandle('clear')" class="key">CLEAR</div>
-				<div onclick="promptHandle('append', 0)" class="key num">0</div>
-				<div onclick="promptHandle('submit')" class="key ok">OK</div>
-				<div onclick="promptHandle('undo')" class="key" id="key_undo">UNDO</div>
-				<div onclick="promptHandle('submit_rem')" class="key">REMAINING</div>
+				<div id="keypad-default" class="keypad" style="display: none">
+					<div onclick="promptHandle('append', 1)" class="key num">1</div>
+					<div onclick="promptHandle('append', 2)" class="key num">2</div>
+					<div onclick="promptHandle('append', 3)" class="key num">3</div>
+					<div onclick="promptHandle('append', 4)" class="key num">4</div>
+					<div onclick="promptHandle('append', 5)" class="key num">5</div>
+					<div onclick="promptHandle('append', 6)" class="key num">6</div>
+					<div onclick="promptHandle('append', 7)" class="key num">7</div>
+					<div onclick="promptHandle('append', 8)" class="key num">8</div>
+					<div onclick="promptHandle('append', 9)" class="key num">9</div>
+					<div onclick="promptHandle('clear')" class="key">CLEAR</div>
+					<div onclick="promptHandle('append', 0)" class="key num">0</div>
+					<div onclick="promptHandle('submit')" class="key ok">OK</div>
+					<div onclick="promptHandle('undo')" class="key" id="key_undo">UNDO</div>
+					<div onclick="promptHandle('submit_rem')" class="key">REMAINING</div>
+				</div>
+				<div id="keypad-init" class="keypad">
+					<div onclick="promptHandle('append', 1); promptHandle('submit')" class="key">(1) Play against bot</div>
+					<div onclick="promptHandle('append', 2); promptHandle('submit')" class="key">(2) Scoreboard (2-player)</div>
+				</div>
 			</div>
 			<div id="settings-bar">
 				<div>dartboat™</div>
diff --git a/web/static/style.css b/web/static/style.css
index 8da0cbc..62cdcaa 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -22,11 +22,11 @@ div#main {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: min-content min-content 2fr 3fr;
-	grid-template-areas: "settings-bar" "rem-bar" "visits" "keypad";
+	grid-template-areas: "settings-bar" "rem-bar" "visits" "controls";
 }
 
-div#keypad {
-	grid-area: keypad;
+div#controls {
+	grid-area: controls;
 
 	font-size: clamp(1.5vh, 2vw, 2vh);
 
@@ -36,6 +36,18 @@ div#keypad {
 	grid-auto-rows: 1fr;
 }
 
+div#controls .keypad {
+	display: contents;
+}
+
+div#controls #keypad-init .key {
+	grid-column: 1 / -1;
+
+	padding-left: 0.4rem;
+
+	justify-content: left;
+}
+
 div#oi {
 	visibility: hidden;