From d0a2eaecd6c1ef61fbb841d726c183923b903f0c Mon Sep 17 00:00:00 2001 From: David Vazgenovich Shakaryan Date: Wed, 11 May 2022 00:49:19 -0700 Subject: web: add prettier icons The icons come from the lovely people at Bootstrap, who've shared them under a permissive licence. To avoid loading a large file consisting almost entirely of icons we'll never display, I've generated the icon font myself, limiting it to only the glyphs we use. --- web/COPYING_icons | 21 +++++++++++++++++++++ web/static/dartboat.js | 2 +- web/static/icons.woff2 | Bin 0 -> 1124 bytes web/static/index.html | 4 ++-- web/static/style.css | 18 ++++++++++++++++-- web/web_scoreboard.c | 3 ++- 6 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 web/COPYING_icons create mode 100644 web/static/icons.woff2 (limited to 'web') diff --git a/web/COPYING_icons b/web/COPYING_icons new file mode 100644 index 0000000..47f06b6 --- /dev/null +++ b/web/COPYING_icons @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2019-2021 The Bootstrap Authors + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/web/static/dartboat.js b/web/static/dartboat.js index ace2900..f2593f7 100644 --- a/web/static/dartboat.js +++ b/web/static/dartboat.js @@ -144,7 +144,7 @@ function boatAfloat() { function flipControls(store_opt = true) { const enabled = $('#main').classList.toggle('controls-on-right'); - $('#flip-controls-button').textContent = enabled ? '\u2190' : '\u2192'; + $('#flip-controls-button').textContent = enabled ? '\uf1c2' : '\uf1c3'; if (store_opt) localStorage.setItem('dartboat_controls_on_right', enabled); } diff --git a/web/static/icons.woff2 b/web/static/icons.woff2 new file mode 100644 index 0000000..5dd9215 Binary files /dev/null and b/web/static/icons.woff2 differ diff --git a/web/static/index.html b/web/static/index.html index 1e5b9a5..7aa2b73 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -14,8 +14,8 @@
dartboat™
delay
stdev
-
→
-
?
+
+
oi!
diff --git a/web/static/style.css b/web/static/style.css index f501429..cec45ba 100644 --- a/web/static/style.css +++ b/web/static/style.css @@ -1,5 +1,10 @@ @import url('https://fonts.googleapis.com/css2?family=Inter&family=Lato:wght@400;700&family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400&display=swap'); +@font-face { + font-family: 'icons'; + src: url('icons.woff2') format('woff2'); +} + html { height: 100vh; } @@ -48,6 +53,10 @@ body { } } +.icon { + font-family: icons; +} + /* titlebar */ #titlebar { @@ -97,7 +106,11 @@ body { background-color: #3d2466; font-weight: 700; - padding: 0 0.4em; + height: 100%; + padding: 0em 0.2em; + + display: flex; + align-items: center; } @media (hover: hover) and (pointer: fine) { @@ -430,7 +443,8 @@ body { #visits .p100 { color: #78c018; } #visits .p140 { color: #20e018; } #visits .p180 { color: #20e018; font-weight: bold; } -#visits .throws-first { color: #aaa; } +#visits .throws-first { color: #999; } +#visits .throws-first:before { content: '\f151'; font-size: 0.75em; } #visits .visit-p1-name { grid-column: 1 / span 2; } #visits .visit-p2-name { grid-column: 4 / span 2; } #visits .visit-p1-pts { grid-column: 1; } diff --git a/web/web_scoreboard.c b/web/web_scoreboard.c index cd50d2c..e90409c 100644 --- a/web/web_scoreboard.c +++ b/web/web_scoreboard.c @@ -185,7 +185,8 @@ void draw_visits() char buf[32], buf2[32]; snprintf(buf, sizeof(buf), "%d", state->legs[0]->start); if (match_opts->throws_first == 1) - elemv[elemc++] = create_div("∗", "visit-p1-pts throws-first"); + elemv[elemc++] = create_div("", // content added via CSS + "visit-p1-pts throws-first icon"); elemv[elemc++] = create_div(buf, "visit-p1-rem"); elemv[elemc++] = create_div("0", "visit-n"); if (state->mode != M_P) { -- cgit v1.2.3-70-g09d2