From e2fe11469394c9827a0cdea9966188c833d93197 Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Sat, 23 Apr 2022 21:11:50 -0700
Subject: web: implement prompt-aware keypad

---
 web/static/dartboat.js | 14 ++++++++++++++
 web/static/index.html  | 36 +++++++++++++++++++++---------------
 web/static/style.css   | 18 +++++++++++++++---
 3 files changed, 50 insertions(+), 18 deletions(-)

(limited to 'web/static')

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;
 
-- 
cgit v1.2.3-70-g09d2