From 0b02f05cdfa7ad6967557fa8228248ffabc515a2 Mon Sep 17 00:00:00 2001
From: David Vazgenovich Shakaryan <dvshakaryan@gmail.com>
Date: Thu, 21 Apr 2022 11:10:22 -0700
Subject: redesign web interface; minor bug fixes

---
 web/static/dartboat.js |  85 ++++++++++++++-----------
 web/static/index.html  |  16 ++++-
 web/static/style.css   | 168 ++++++++++++++++++++++++++++---------------------
 3 files changed, 155 insertions(+), 114 deletions(-)

(limited to 'web/static')

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index 5eb3283..015c541 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -17,20 +17,20 @@ function initMatch() {
 	updateDelay(delay_ms);
 	match_state = stcall('start_match', 'number');
 	match_active = true;
-	document.getElementById('user-rem').className = 'active';
+	document.getElementById('user-state').className = 'active';
 	document.getElementById('match').textContent = '';
-	promptSuggStr("");
+	promptSuggStr('');
 	stcall('draw_match');
 }
 
 function oi() {
-	document.getElementById('oi').textContent = 'oi!';
+	document.getElementById('oi').style.visibility = 'visible';
 
 	oi_timeout = setTimeout(function() { oi_timeout = null; clearOi() }, 3000);
 }
 
 function clearOi() {
-	document.getElementById('oi').textContent = '';
+	document.getElementById('oi').style.visibility = 'hidden';
 
 	if (oi_timeout) {
 		clearTimeout(oi_timeout);
@@ -39,11 +39,13 @@ function clearOi() {
 }
 
 function updateUserRem(rem) {
-	user_rem = document.getElementById('user-rem').textContent = rem;
+	user_rem = rem;
+	updateUserStateRem(rem);
 }
 
 function updateBoatRem(rem) {
-	boat_rem = document.getElementById('boat-rem').textContent = rem;
+	boat_rem = rem;
+	updateBoatStateRem(rem);
 }
 
 function promptMsg(p) {
@@ -54,32 +56,39 @@ function promptMsgStr(str) {
 	document.getElementById('prompt-msg').textContent = str;
 }
 
-function promptSugg(p) {
-	document.getElementById('prompt-sugg').textContent = UTF8ToString(p);
+function userSugg(p) {
+	document.getElementById('user-sugg').textContent = UTF8ToString(p);
+}
+
+function boatSugg(p) {
+	document.getElementById('boat-sugg').textContent = UTF8ToString(p);
 }
 
 function promptSuggStr(str) {
 	document.getElementById('prompt-sugg').textContent = str;
 }
 
+function updateUserStateRem(rem) {
+	let elem = document.getElementById('user-rem');
+	elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem;
+	Module.ccall('get_suggested', null, ['number', 'number'], [rem, 1]);
+}
+
+function updateBoatStateRem(rem) {
+	let elem = document.getElementById('boat-rem');
+	elem.textContent = rem < 0 || rem == 1 ? 'BUST' : rem;
+	Module.ccall('get_suggested', null, ['number', 'number'], [rem, 2]);
+}
+
 function promptUpdateRem() {
 	let elem = document.getElementById('user-rem');
 	let pts = document.getElementById('prompt').textContent;
-	if (pts) {
-		let nrem = user_rem - pts;
-		let nrem_str = nrem < 0 || nrem == 1 ? "BUST" : nrem;
-		elem.textContent = `${user_rem} » ${nrem_str}`;
-	} else {
-		elem.textContent = user_rem;
-	}
+
+	updateUserStateRem(pts ? user_rem - pts : user_rem);
 }
 
 function boatTempRem(pts, str) {
-	let elem = document.getElementById('boat-rem');
-	let nrem = boat_rem - pts;
-	let nrem_str = nrem < 0 || nrem == 1 ? "BUST" : nrem;
-	elem.textContent = `${nrem_str} « ${boat_rem}`;
-
+	updateBoatStateRem(boat_rem - pts);
 	document.getElementById('prompt').textContent = pts;
 	promptSuggStr(str);
 }
@@ -113,19 +122,19 @@ function promptBackspace() {
 }
 
 function setBoatActive() {
-	document.getElementById('user-rem').className = '';
-	document.getElementById('boat-rem').className = 'active';
-	promptMsgStr("Bot is throwing…");
+	document.getElementById('user-state').className = '';
+	document.getElementById('boat-state').className = 'active';
+	promptMsgStr('Bot is throwing…');
 	prompt_disable = true;
 }
 
 function setUserActive() {
-	document.getElementById('user-rem').className = 'active';
-	document.getElementById('boat-rem').className = '';
+	document.getElementById('user-state').className = 'active';
+	document.getElementById('boat-state').className = '';
 	prompt_disable = false;
 }
 
-function promptSubmit() {
+function promptSubmit(remaining) {
 	clearOi();
 	if (prompt_disable) return;
 	if (!match_active) {
@@ -138,6 +147,9 @@ function promptSubmit() {
 	if (!p_user) return;
 	promptClear();
 
+	if (remaining)
+		p_user = user_rem - p_user;
+
 	if (!stcall('user_visit', 'number', ['number'], [p_user])) {
 		oi();
 		return;
@@ -165,10 +177,6 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
 		stcall('draw_match');
 		setUserActive();
 	} else {
-		// backup to restore after bot is done
-		let user_sugg = document.getElementById('prompt-sugg').textContent;
-		promptSuggStr('');
-
 		setTimeout(function() { boatTempRem(p1, s1); }, delay_ms);
 
 		if (n > 1) {
@@ -183,8 +191,8 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
 				updateBoatRem(rem);
 				document.getElementById('prompt').textContent = '';
 				document.getElementById('match').textContent = '';
-				promptSuggStr(user_sugg);
 				stcall('draw_match');
+				promptSuggStr('');
 				setUserActive();
 			}, delay_ms * (n + 1));
 	}
@@ -192,8 +200,8 @@ function boatVisitRes(rem, n, p1, p2, p3, ptr1, ptr2, ptr3) {
 
 function matchOver() {
 	match_active = false;
-	promptSuggStr("Press OK to play again.");
-	document.getElementById('user-rem').className = '';
+	promptSuggStr('Press OK to play again.');
+	document.getElementById('user-state').className = '';
 }
 
 function drawVisitNames(n1, n2) {
@@ -209,16 +217,15 @@ function drawVisitNames(n1, n2) {
 function drawVisit(visit_no, u_pts, u_rem, b_pts, b_rem, b_darts) {
 	let elem = document.getElementById('match');
 
-	for (let [i, v] of [visit_no, u_pts, u_rem, b_rem, b_pts, b_darts].entries()) {
+	for (let [i, v] of [u_pts, u_rem, visit_no, b_rem, b_pts, b_darts].entries()) {
 		let div = document.createElement('div');
 		let vv = div.textContent = UTF8ToString(v);
-		if (i == 0) {
-			div.className = 'visit-no';
-		} else if (i == 1 || i == 4) {
+		if (i == 0 || i == 4) {
 			div.className = `p${POINT_CLASSES.find(x => x <= vv)}`;
 		} else if (i == 5) {
-			div.className = 'darts';
+			if (vv) div.textContent = `… ${vv}`;
 		}
+		div.className += ` visit-col${i+1}`;
 		elem.append(div);
 	}
 
@@ -252,6 +259,8 @@ function processKey(data) {
 		promptSubmit();
 	else if (key == 'Backspace')
 		promptBackspace();
+	else if (key == 'r')
+		promptSubmit(true);
 }
 
 function modal(id) {
diff --git a/web/static/index.html b/web/static/index.html
index 861adc5..a5863ca 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -10,10 +10,20 @@
 	</head>
 	<body>
 		<div id="main">
+				<div id="rem-bar">
+					<div id="oi">oi!</div>
+					<div id="user-state">
+						<div id="user-name">User</div>
+						<div id="user-rem"></div>
+						<div id="user-sugg"></div>
+					</div>
+					<div id="boat-state">
+						<div id="boat-name">Bot</div>
+						<div id="boat-rem"></div>
+						<div id="boat-sugg"></div>
+					</div>
+				</div>
 			<div id="keypad">
-				<div id="user-rem"></div>
-				<div id="oi"></div>
-				<div id="boat-rem"></div>
 				<div id="prompt-container">
 					<div id="prompt-msg"></div>
 					<div id="prompt"></div>
diff --git a/web/static/style.css b/web/static/style.css
index 6bd312f..5287cfc 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -3,7 +3,7 @@
 
 body {
 	color: #ddd;
-	background-color: #1a1a1a;
+	background-color: #000;
 	font-family: 'Lato', sans-serif;
 	user-select: none;
 
@@ -12,69 +12,108 @@ body {
 }
 
 div#main {
+	background-color: #1a1a1a;
+
 	height: calc(100vh - 2*2px);
-	width: calc(100vw - 2*2px);
-	margin: 2px;
+	width: min(80vh, calc(100vw - 2*2px));
+	margin: 0 auto;
+	padding: 2px;
 
 	display: grid;
-	grid-template-columns: min-content 2fr;
-	grid-template-rows: min-content 1fr;
-	grid-template-areas: "keypad settings-bar" "keypad match";
+	grid-template-columns: 1fr;
+	grid-template-rows: min-content min-content 2fr 2fr;
+	grid-template-areas: "settings-bar" "rem-bar" "match" "keypad";
 }
 
 div#keypad {
 	grid-area: keypad;
 
-	font-size: 2vh;
-
-	width: clamp(54vh, 30vw, 60vh);
+	font-size: clamp(1.5vh, 2vw, 2vh);
 
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: min-content 2fr;
+	grid-template-rows: 1.2fr;
 	grid-auto-rows: 1fr;
 }
 
 div#oi {
+	visibility: hidden;
+
+	background-color: #1a1a1a;
 	font-size: 2em;
+	height: 1.2em;
+	width: 3ch;
+
+	position: absolute;
+	left: 50%;
+	right: 50%;
+	top: 50%;
+	bottom: 50%;
+	transform: translate(-50%, -50%);
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-div#user-rem, div#boat-rem {
-	background-color: #333;
+div#rem-bar {
+	position: relative;
+	grid-column: 1 / span 3;
+
+	font-size: clamp(1.5vh, 2vw, 2vh);
+
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+}
+
+div#user-state, div#boat-state {
+	background-color: #222;
 	font-size: 1.5em;
 
 	margin: 2px;
 	padding: 0.4rem;
 
+	flex-direction: column;
 	display: flex;
 	align-items: center;
-	justify-content: left;
 }
 
-div#boat-rem {
-	grid-column: 3;
+div#user-state.active, div#boat-state.active {
+	background-color: #240;
+}
 
+div#user-rem, div#boat-rem {
+	font-size: 3em;
+	font-weight: bold;
+}
+
+div#boat-rem {
 	justify-content: right;
 }
 
-div#user-rem.active, div#boat-rem.active {
-	background-color: #240;
+div#user-name, div#boat-name {
+	color: #aaa;
+}
+
+div#user-sugg, div#boat-sugg {
+	color: #aaa;
+	font-size: 0.8em;
+}
+
+div#user-sugg:after, div#boat-sugg:after {
+	content: '\200b';
 }
 
 div#prompt-container {
 	grid-column: 1 / span 3;
 
-	background-color: #333;
+	background-color: #222;
 
 	margin: 2px;
 
-	display: grid;
-	grid-template-rows: 1fr 3fr 1fr;
-	grid-template-columns: 1fr;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 div#prompt-msg, div#prompt, div#prompt-sugg {
@@ -82,15 +121,22 @@ div#prompt-msg, div#prompt, div#prompt-sugg {
 
 	display: grid;
 	align-items: center;
-	justify-content: center;
 }
 
-div#prompt {
-	font-size: 5em;
+div#prompt-msg, div#prompt-sugg {
+	flex: 1;
+	color: #aaa;
+	padding: 0 0.4rem;
 }
 
 div#prompt-sugg {
-	color: #aaa;
+	text-align: right;
+}
+
+div#prompt {
+	text-align: center;
+	font-size: 3em;
+	width: 4ch;
 }
 
 div.key {
@@ -124,8 +170,8 @@ div.key.num {
 div#settings-bar {
 	grid-area: settings-bar;
 
-	background-color: #333;
-	font-size: 2vh;
+	background-color: #222;
+	font-size: clamp(1.5vh, 2vw, 2vh);
 
 	margin: 2px;
 	padding: 0.4rem;
@@ -145,7 +191,7 @@ div#settings-bar div.input.first {
 }
 
 div#settings-bar div.input {
-	background-color: #282828;
+	background-color: #333;
 
 	display: flex;
 	flex-wrap: wrap;
@@ -159,7 +205,7 @@ div#settings-bar span {
 
 div#settings-bar input {
 	color: #ddd;
-	background-color: #304;
+	background-color: #3d2466;
 	font-family: inherit;
 	font-size: 1em;
 	text-align: right;
@@ -170,68 +216,62 @@ div#settings-bar input {
 }
 
 div#settings-bar div.help-button {
-	background-color: #304;
-	font-weight: bold;
+	background-color: #3d2466;
+	font-weight: 700;
 
 	padding: 0 0.4em;
 }
 
 @media (hover: hover) and (pointer: fine) {
 	div#settings-bar input:hover {
-		background-color: #608;
+		background-color: #5c3699;
 	}
 
 	div#settings-bar div.help-button:hover {
-		background-color: #608;
+		background-color: #5c3699;
 	}
 }
 
-div#settings-bar input#stdev:focus {
+div#settings-bar input:focus {
 	color: #fff;
-	background-color: #80a;
+	background-color: #6e41b8;
+	outline: #5a0 solid 3px;
 }
 
 div#settings-bar div.help-button:active {
 	color: #fff;
-	background-color: #80a;
-}
-
-div#settings-bar input#stdev:focus {
-	outline: #5a0 solid 3px;
+	background-color: #6e41b8;
 }
 
 div#match {
 	grid-area: match;
 
-	background-color: #333;
-	font-size: 2vh;
+	background-color: #222;
+	font-size: clamp(1.5vh, 2vw, 2vh);
 
-	overflow-y: scroll;
+	overflow: auto;
+	scrollbar-gutter: stable both-edges;
 	margin: 2px;
 	padding: 0.4rem;
 
 	display: grid;
-	grid-template-columns: repeat(6, max-content);
+	grid-template-columns: 1.5ch repeat(5, 2fr) 1.5ch;
 	grid-auto-rows: min-content;
 	grid-row-gap: 0.3em;
-	grid-column-gap: 1.5em;
 }
 
 div#match div {
-	font-size: 1.5em;
-	font-family: monospace;
-	white-space: pre;
+	font-size: 2em;
 
-	min-width: 3ch;
+	min-width: 0;
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-div#match .user-name { color: #aaa; background-color: #444; grid-column: 2 / span 2; justify-content: center; }
-div#match .boat-name { color: #aaa; background-color: #444; grid-column: 4 / span 2; justify-content: center; }
-div#match .visit-no { color: #888; grid-column: 1; }
+div#match .visit-col1 { grid-column: 2; }
+div#match .visit-col3 { color: #888; grid-column: 4; }
 div#match .p0 { color: #f00; font-weight: bold; }
 div#match .p1 { color: #f00; }
 div#match .p20 { color: #f60; }
@@ -240,7 +280,7 @@ div#match .p60 { color: #dd0; }
 div#match .p100 { color: #2c2; }
 div#match .p140 { color: #0f0; }
 div#match .p180 { color: #0f0; font-weight: bold; }
-div#match .darts { color: #888; justify-content: left; }
+div#match .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; }
 
 .modal {
 	background-color: rgba(0, 0, 0, 0.6);
@@ -256,7 +296,7 @@ div#match .darts { color: #888; justify-content: left; }
 }
 
 .modal-content {
-	background-color: #333;
+	background-color: #222;
 	font-size: 1.4em;
 	font-family: 'Source Serif Pro', serif;
 
@@ -290,24 +330,7 @@ a:hover {
 	color: #7d0;
 }
 
-@media (max-aspect-ratio: 1/1) {
-	div#main {
-		grid-template-columns: 1fr;
-		grid-template-rows: min-content 1fr 3fr;
-		grid-template-areas: "settings-bar" "match" "keypad";
-	}
-
-	div#keypad, div#match, div#settings-bar {
-		font-size: clamp(1.5vh, 2vw, 2vh);
-	}
-
-	div#keypad {
-		width: auto;
-	}
-}
-
-/*
-@media (max-aspect-ratio: 3/5) {
+@media (max-aspect-ratio: 9/20) {
 	div#settings-bar div.input {
 		display: flex;
 		flex-direction: column;
@@ -321,4 +344,3 @@ a:hover {
 		font-size: 3em;
 	}
 }
-*/
-- 
cgit v1.2.3-70-g09d2