diff options
Diffstat (limited to 'web/static')
| -rw-r--r-- | web/static/dartboat.js | 5 | ||||
| -rw-r--r-- | web/static/fonts/bootstrap-icons-sub.woff2 | bin | 1088 -> 1116 bytes | |||
| -rw-r--r-- | web/static/index.html | 2 | ||||
| -rw-r--r-- | web/static/style.css | 50 |
4 files changed, 57 insertions, 0 deletions
diff --git a/web/static/dartboat.js b/web/static/dartboat.js index 54cb29b..5c7f011 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -185,6 +185,11 @@ document.addEventListener('DOMContentLoaded', () => { e.currentTarget.style.display = 'none'; }; $$('.modal').forEach(x => x.addEventListener('click', f)); + + $('#info-slot-prev').addEventListener('click', () => + _scoreboard_prev_slot()); + $('#info-slot-next').addEventListener('click', () => + _scoreboard_next_slot()); }); document.addEventListener('keydown', e => { diff --git a/web/static/fonts/bootstrap-icons-sub.woff2 b/web/static/fonts/bootstrap-icons-sub.woff2 Binary files differindex 391919f..116a249 100644 --- a/web/static/fonts/bootstrap-icons-sub.woff2 +++ b/web/static/fonts/bootstrap-icons-sub.woff2 diff --git a/web/static/index.html b/web/static/index.html index 8da5baa..196db91 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -24,6 +24,8 @@ </div> <div id="info"> <div id="oi">oi!</div> + <div id="info-slot-prev" class="icon"></div> + <div id="info-slot-next" class="icon"></div> <div id="p1-info"> <div id="p1-info-inner"> <div id="p1-name"></div> diff --git a/web/static/style.css b/web/static/style.css index 5131eab..f8b6ea0 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -473,6 +473,56 @@ body { visibility: visible; } +#info #info-slot-prev, #info #info-slot-next { + visibility: hidden; + + color: #eee; + background-color: #583a90; + font-size: 2em; + height: 1.6em; + width: 1em; + + outline: #111 solid 2px; + + position: absolute; + + display: flex; + align-items: center; + justify-content: center; +} + +#info #info-slot-prev { + left: 0%; + right: 100%; + top: 50%; + bottom: 50%; + transform: translate(0%, -50%); +} + +#info #info-slot-next { + left: 100%; + right: 0%; + top: 50%; + bottom: 50%; + transform: translate(-100%, -50%); +} + +#info #info-slot-prev.visible, #info #info-slot-next.visible { + visibility: visible; +} + +@media (hover: hover) and (pointer: fine) { + #info #info-slot-prev:hover, #info #info-slot-next:hover { + color: #fff; + background-color: #6e49b4; + } +} + +#info #info-slot-prev:active, #info #info-slot-next:active { + color: #fff; + background-color: #7b51ca; +} + #info #p1-info, #info #p2-info { background-color: #222; font-size: 1.5em; |