From d50ac287e7cc00793657422dbfa36d9c71e659be Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Sat, 23 Apr 2022 07:25:41 -0700
Subject: web: add undo ability; simplify prompt handlers

Undo currently works only for ongoing matches.
---
 web/static/dartboat.js | 59 ++++++++++++++++++++++++++------------------------
 web/static/index.html  | 26 ++++++++++++----------
 web/static/style.css   | 19 +++++++++++++++-
 3 files changed, 63 insertions(+), 41 deletions(-)

(limited to 'web/static')

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 07c8997..6a0d07b 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -32,7 +32,7 @@ function _promptGet() {
 
 function _promptGetAndClear() {
 	let val = _promptGet();
-	promptClear();
+	promptHandle('clear');
 	return val;
 }
 
@@ -78,6 +78,19 @@ let prompt_handlers = {
 				Module.ccall('user_visit_to_rem', 'number', ['number'], [rem]);
 		},
 
+		undo() {
+			let cl = document.getElementById('key_undo').classList;
+			if (cl.contains('active'))
+				Module.ccall('user_undo');
+			cl.toggle('active');
+		},
+
+		pre(action) {
+			clearOi();
+			if (action != 'undo')
+				document.getElementById('key_undo').classList.remove('active');
+		},
+
 		_update_rem(val) {
 			Module.ccall('update_user_rem_from_pts', null,
 				['number'], [val || _promptGet()]);
@@ -103,12 +116,20 @@ let prompt_handlers = {
 			let n = _promptGetAndClear();
 			if (n)
 				Module.ccall('resp_numdarts', null, ['number'], [n]);
+		},
+
+		pre(action) {
+			clearOi();
 		}
 	},
 
 	init: {
 		submit() {
 			Module.ccall('start_match');
+		},
+
+		pre(action) {
+			clearOi();
 		}
 	}
 }
@@ -117,29 +138,9 @@ function setPromptHandler(ptr) {
 	prompt_handler = prompt_handlers[UTF8ToString(ptr)];
 }
 
-function promptAppend(...args) {
-	clearOi();
-	prompt_handler?.append?.(...args);
-}
-
-function promptClear(...args) {
-	clearOi();
-	prompt_handler?.clear?.(...args);
-}
-
-function promptBackspace(...args) {
-	clearOi();
-	prompt_handler?.backspace?.(...args);
-}
-
-function promptSubmit(...args) {
-	clearOi();
-	prompt_handler?.submit?.(...args);
-}
-
-function promptSubmitRem(...args) {
-	clearOi();
-	prompt_handler?.submit_rem?.(...args);
+function promptHandle(action, ...args) {
+	prompt_handler?.pre?.(action);
+	prompt_handler?.[action]?.(...args);
 }
 
 function setPromptInput(ptr) {
@@ -239,11 +240,13 @@ document.addEventListener('keydown', e => {
 		return;
 
 	if (isFinite(e.key))
-		promptAppend(e.key);
+		promptHandle('append', e.key);
 	else if (e.key == 'Enter')
-		promptSubmit();
+		promptHandle('submit');
 	else if (e.key == 'Backspace')
-		promptBackspace();
+		promptHandle('backspace');
 	else if (e.key == 'r')
-		promptSubmitRem();
+		promptHandle('submit_rem');
+	else if (e.key == 'u')
+		promptHandle('undo');
 });
diff --git a/web/static/index.html b/web/static/index.html
index fdfa0ee..d2d6bb4 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -31,18 +31,20 @@
 					<div id="prompt-input"></div>
 					<div id="prompt-msg-r"></div>
 				</div>
-				<div onclick="promptAppend(1)" class="key num">1</div>
-				<div onclick="promptAppend(2)" class="key num">2</div>
-				<div onclick="promptAppend(3)" class="key num">3</div>
-				<div onclick="promptAppend(4)" class="key num">4</div>
-				<div onclick="promptAppend(5)" class="key num">5</div>
-				<div onclick="promptAppend(6)" class="key num">6</div>
-				<div onclick="promptAppend(7)" class="key num">7</div>
-				<div onclick="promptAppend(8)" class="key num">8</div>
-				<div onclick="promptAppend(9)" class="key num">9</div>
-				<div onclick="promptClear()" class="key">CLEAR</div>
-				<div onclick="promptAppend(0)" class="key num">0</div>
-				<div onclick="promptSubmit()" class="key">OK</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">REM</div>
 			</div>
 			<div id="settings-bar">
 				<div>dartboat™</div>
diff --git a/web/static/style.css b/web/static/style.css
index e418ef7..b644439 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -21,7 +21,7 @@ div#main {
 
 	display: grid;
 	grid-template-columns: 1fr;
-	grid-template-rows: min-content min-content 2fr 2fr;
+	grid-template-rows: min-content min-content 2fr 3fr;
 	grid-template-areas: "settings-bar" "rem-bar" "visits" "keypad";
 }
 
@@ -170,11 +170,28 @@ div.key:active {
 	background-color: #3b500e;
 }
 
+div.key.active {
+	background-color: #3d2466;
+}
+
+div.key.active:hover {
+	background-color: #5c3699;
+}
+
+div.key.active:active {
+	color: #fff;
+	background-color: #6e41b8;
+}
+
 div.key.num {
 	font-size: 2.5em;
 	font-weight: 700;
 }
 
+div.key.ok {
+	grid-row-end: span 2;
+}
+
 div#settings-bar {
 	grid-area: settings-bar;
 
-- 
cgit v1.2.3-70-g09d2