diff options
Diffstat (limited to 'web/static')
| -rw-r--r-- | web/static/dartboat.js | 59 | ||||
| -rw-r--r-- | web/static/index.html | 26 | ||||
| -rw-r--r-- | web/static/style.css | 19 |
3 files changed, 63 insertions, 41 deletions
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; |