diff options
Diffstat (limited to 'web/static')
| -rw-r--r-- | web/static/dartboat.js | 11 | ||||
| -rw-r--r-- | web/static/index.html | 7 | ||||
| -rw-r--r-- | web/static/style.css | 21 |
3 files changed, 30 insertions, 9 deletions
diff --git a/web/static/dartboat.js b/web/static/dartboat.js index e09e8f6..8a1b19f 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -112,6 +112,11 @@ function boatAfloat() { _init(); } +function flipControls() { + const enabled = $('#main').classList.toggle('right-controls'); + $('#flip-controls-button').textContent = enabled ? '\u2190' : '\u2192'; +} + document.addEventListener('DOMContentLoaded', () => { let f; @@ -119,9 +124,11 @@ document.addEventListener('DOMContentLoaded', () => { promptHandle(...x.split(':', 2))); $$('[data-command]').forEach(x => x.addEventListener('click', f)); - f = e => _set_opt(toCString(e.target.dataset.setting), + f = e => _set_opt(toCString(e.target.dataset.opt), toCString(e.target.value)); - $$('[data-setting]').forEach(x => x.addEventListener('change', f)); + $$('[data-opt]').forEach(x => x.addEventListener('change', f)); + + $('#flip-controls-button').addEventListener('click', flipControls); f = e => $(`#${e.target.dataset.modal}`).style.display = 'block'; $$('[data-modal]').forEach(x => x.addEventListener('click', f)); diff --git a/web/static/index.html b/web/static/index.html index 53796d8..bf7a890 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -67,9 +67,10 @@ </div> <div id="settings-bar"> <div>dartboat™</div> - <div class="input first"><span>delay</span><input id="delay" data-setting="delay" maxlength="4" value=""></div> - <div class="input"><span>stdev</span><input id="stdev" data-setting="stdev" maxlength="4" value=""></div> - <div class="help-button" data-modal="help-modal">?</div> + <div class="input first"><span>delay</span><input id="delay" data-opt="delay" maxlength="4" value=""></div> + <div class="input"><span>stdev</span><input id="stdev" data-opt="stdev" maxlength="4" value=""></div> + <div class="button" id="flip-controls-button">→</div> + <div class="button" data-modal="help-modal">?</div> </div> <div id="visits"></div> </div> diff --git a/web/static/style.css b/web/static/style.css index 893c144..3ff1680 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -307,19 +307,23 @@ div#settings-bar input { border: 0; } -div#settings-bar div.help-button { +div#settings-bar div.button { background-color: #3d2466; font-weight: 700; padding: 0 0.4em; } +#flip-controls-button { + display: none; +} + @media (hover: hover) and (pointer: fine) { div#settings-bar input:hover { background-color: #5c3699; } - div#settings-bar div.help-button:hover { + div#settings-bar div.button:hover { background-color: #5c3699; } } @@ -330,7 +334,7 @@ div#settings-bar input:focus { outline: #7eab1e solid 2px; } -div#settings-bar div.help-button:active { +div#settings-bar div.button:active { color: #fff; background-color: #6e41b8; } @@ -434,7 +438,7 @@ a:hover { padding: 0 0.4rem; } - div#settings-bar .help-button { + div#settings-bar .button { font-size: 3em; } } @@ -448,6 +452,15 @@ a:hover { grid-template-areas: 'settings-bar settings-bar' 'info visits' 'controls visits'; } + div#main.right-controls { + grid-template-columns: 1fr 80vh; + grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls'; + } + + #flip-controls-button { + display: unset; + } + div#controls { margin-top: 0; } |