From d0a2eaecd6c1ef61fbb841d726c183923b903f0c Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
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/static/dartboat.js |   2 +-
 web/static/icons.woff2 | Bin 0 -> 1124 bytes
 web/static/index.html  |   4 ++--
 web/static/style.css   |  18 ++++++++++++++++--
 4 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 web/static/icons.woff2

(limited to 'web/static')

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 @@
 				<div>dartboat™</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">&rarr;</div>
-				<div class="button" data-modal="help-modal">?</div>
+				<div class="button icon" id="flip-controls-button">&#xf1c3;</div>
+				<div class="button icon" data-modal="help-modal">&#xf50b;</div>
 			</div>
 			<div id="info">
 				<div id="oi">oi!</div>
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; }
-- 
cgit v1.2.3-70-g09d2