From e2fe11469394c9827a0cdea9966188c833d93197 Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Sat, 23 Apr 2022 21:11:50 -0700 Subject: web: implement prompt-aware keypad --- web/dartboat_wasm.c | 14 +++++++++----- web/static/dartboat.js | 14 ++++++++++++++ web/static/index.html | 36 +++++++++++++++++++++--------------- web/static/style.css | 18 +++++++++++++++--- 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 @@
-
+
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
CLEAR
-
0
-
OK
-
UNDO
-
REMAINING
+ +
+
(1) Play against bot
+
(2) Scoreboard (2-player)
+
dartboat™
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