From abe6abebf502b2c3aebdbe5a8311fe6e2a35053f Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Sun, 24 Apr 2022 05:32:56 -0700
Subject: web: change colours

---
 web/static/dartboat.js |  2 +-
 web/static/index.html  |  6 +++---
 web/static/style.css   | 41 +++++++++++++++++++++++------------------
 3 files changed, 27 insertions(+), 22 deletions(-)

(limited to 'web')

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);
-- 
cgit v1.2.3-70-g09d2