From c5f001a4f47c63b5822dcdc0b57d49de70dfaa67 Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Sun, 24 Apr 2022 03:08:33 -0700
Subject: web: make active prompt more prominent

---
 web/static/dartboat.js |  2 ++
 web/static/index.html  |  2 +-
 web/static/style.css   | 21 +++++++++++++--------
 3 files changed, 16 insertions(+), 9 deletions(-)

(limited to 'web')

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 35dac17..f700510 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -135,6 +135,8 @@ prompt_handlers.init = {
 function setPromptHandler(ptr) {
 	let str = UTF8ToString(ptr);
 	prompt_handler = prompt_handlers[str];
+	document.getElementById('prompt').classList[
+		prompt_handler ? 'add' : 'remove']('active');
 
 	document.querySelectorAll('.keypad').forEach(e => e.style.display = 'none');
 	document.getElementById(`keypad-${str === 'init' ? 'init' : 'default'}`)
diff --git a/web/static/index.html b/web/static/index.html
index 0502644..e2aeb36 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -26,7 +26,7 @@
 				</div>
 			</div>
 			<div id="controls">
-				<div id="prompt-container">
+				<div id="prompt">
 					<div id="prompt-msg-l"></div>
 					<div id="prompt-input"></div>
 					<div id="prompt-msg-r"></div>
diff --git a/web/static/style.css b/web/static/style.css
index 63d8e3b..912a832 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -14,10 +14,9 @@ body {
 div#main {
 	background-color: #1a1a1a;
 
-	height: calc(100vh - 2*2px);
-	width: min(80vh, calc(100vw - 2*2px));
+	height: 100vh;
+	width: min(80vh, 100vw);
 	margin: 0 auto;
-	padding: 2px;
 
 	display: grid;
 	grid-template-columns: 1fr;
@@ -30,7 +29,7 @@ div#controls {
 
 	font-size: clamp(1.5vh, 2vw, 2vh);
 
-	margin-top: 2px;
+	margin: 2px 0;
 
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
@@ -79,7 +78,7 @@ div#info {
 
 	font-size: clamp(1.5vh, 2vw, 2vh);
 
-	margin: 2px 0;
+	margin-bottom: 2px;
 
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
@@ -138,7 +137,7 @@ div#p1-avg:before, div#p2-avg:before {
 	content: 'avg: ';
 }
 
-div#prompt-container {
+div#prompt {
 	grid-column: 1 / span 3;
 
 	background-color: #222;
@@ -148,6 +147,10 @@ div#prompt-container {
 	justify-content: center;
 }
 
+div#prompt.active {
+	background-color: #3d2466;
+}
+
 div#prompt-msg-l, div#prompt-input, div#prompt-msg-r {
 	font-size: 1.5em;
 	white-space: pre-line;
@@ -197,8 +200,10 @@ div.key.active {
 	background-color: #3d2466;
 }
 
-div.key.active:hover {
-	background-color: #5c3699;
+@media (hover: hover) and (pointer: fine) {
+	div.key.active:hover {
+		background-color: #5c3699;
+	}
 }
 
 div.key.active:active {
-- 
cgit v1.2.3-70-g09d2