diff options
| -rw-r--r-- | web/static/dartboat.js | 2 | ||||
| -rw-r--r-- | web/static/index.html | 6 | ||||
| -rw-r--r-- | web/static/style.css | 41 |
3 files changed, 27 insertions, 22 deletions
diff --git a/web/static/dartboat.js b/web/static/dartboat.js index f700510..e03151d 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -197,7 +197,7 @@ function clearVisits() { document.getElementById('visits').textContent = ''; } -const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 1, 0]; +const POINT_CLASSES = [180, 140, 100, 60, 40, 20, 0]; function drawVisit(visit_no, p1_pts, p1_rem, p2_pts, p2_rem, p2_darts) { let e = document.getElementById('visits'); diff --git a/web/static/index.html b/web/static/index.html index e2aeb36..f84afa1 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -48,9 +48,9 @@ <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] One-player scoreboard</div> - <div onclick="promptHandle('append', 2); promptHandle('submit')" class="key">[2] Two-player scoreboard</div> - <div onclick="promptHandle('append', 3); promptHandle('submit')" class="key">[3] Play against bot</div> + <div onclick="promptHandle('append', 1); promptHandle('submit')" class="key"><span class="keyboard-val">[1]</span> One-player scoreboard</div> + <div onclick="promptHandle('append', 2); promptHandle('submit')" class="key"><span class="keyboard-val">[2]</span> Two-player scoreboard</div> + <div onclick="promptHandle('append', 3); promptHandle('submit')" class="key"><span class="keyboard-val">[3]</span> Play against bot</div> </div> </div> <div id="settings-bar"> diff --git a/web/static/style.css b/web/static/style.css index 912a832..a4572d8 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -53,7 +53,7 @@ div#controls #keypad-init .key { div#oi { visibility: hidden; - background-color: #6c0d0d; + background-color: #640016; font-size: 3em; height: 1.2em; width: 3ch; @@ -104,7 +104,7 @@ div#p2-info { } div#p1-info.active, div#p2-info.active { - background-color: #2a390a; + background-color: #2d3d0b; } div#p1-rem, div#p2-rem { @@ -113,7 +113,7 @@ div#p1-rem, div#p2-rem { } div#p1-name, div#p2-name { - color: #aaa; + color: #ccc; } div#p1-sugg, div#p2-sugg { @@ -148,7 +148,7 @@ div#prompt { } div#prompt.active { - background-color: #3d2466; + background-color: #311d52; } div#prompt-msg-l, div#prompt-input, div#prompt-msg-r { @@ -161,7 +161,7 @@ div#prompt-msg-l, div#prompt-input, div#prompt-msg-r { div#prompt-msg-l, div#prompt-msg-r { flex: 1; - color: #aaa; + color: #ccc; padding: 0 0.4rem; } @@ -176,7 +176,7 @@ div#prompt-input { } div.key { - color: #aaa; + color: #ccc; background-color: #282828; font-size: 1.5em; @@ -187,7 +187,7 @@ div.key { @media (hover: hover) and (pointer: fine) { div.key:hover { - background-color: #2a390a; + background-color: #32440c; } } @@ -197,6 +197,7 @@ div.key:active { } div.key.active { + color: #eee; background-color: #3d2466; } @@ -211,6 +212,11 @@ div.key.active:active { background-color: #6e41b8; } +div.key span.keyboard-val { + display: contents; + color: #aaa; +} + div.key.num { font-size: 2.5em; font-weight: 700; @@ -257,7 +263,7 @@ div#settings-bar span { } div#settings-bar input { - color: #ddd; + color: #eee; background-color: #3d2466; font-family: inherit; font-size: 1em; @@ -322,16 +328,15 @@ div#visits div { } div#visits .visit-col1 { grid-column: 2; } -div#visits .visit-col3 { color: #888; grid-column: 4; } -div#visits .p0 { color: #f00; font-weight: bold; } -div#visits .p1 { color: #f00; } -div#visits .p20 { color: #f60; } -div#visits .p40 { color: #fa0; } -div#visits .p60 { color: #dd0; } -div#visits .p100 { color: #2c2; } -div#visits .p140 { color: #0f0; } -div#visits .p180 { color: #0f0; font-weight: bold; } -div#visits .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; } +div#visits .visit-col3 { color: #666; grid-column: 4; } +div#visits .p0 { color: #ee0016; } +div#visits .p20 { color: #ee6400; } +div#visits .p40 { color: #ee9600; } +div#visits .p60 { color: #cccc16; } +div#visits .p100 { color: #64cc16; } +div#visits .p140 { color: #64ee16; } +div#visits .p180 { color: #64ee16; font-weight: bold; } +div#visits .visit-col6 { color: #666; justify-content: left; font-family: monospace; white-space: pre; } .modal { background-color: rgba(0, 0, 0, 0.6); |