web: allow controls side to be chosen by user

3 files changed, 30 insertions, 9 deletions

diff --git a/web/static/dartboat.js b/web/static/dartboat.js
index e09e8f6..8a1b19f 100644
--- a/web/static/dartboat.js
+++ b/web/static/dartboat.js
@@ -112,6 +112,11 @@ function boatAfloat() {
 		_init();
 }
 
+function flipControls() {
+	const enabled = $('#main').classList.toggle('right-controls');
+	$('#flip-controls-button').textContent = enabled ? '\u2190' : '\u2192';
+}
+
 document.addEventListener('DOMContentLoaded', () => {
 	let f;
 
@@ -119,9 +124,11 @@ document.addEventListener('DOMContentLoaded', () => {
 		promptHandle(...x.split(':', 2)));
 	$$('[data-command]').forEach(x => x.addEventListener('click', f));
 
-	f = e => _set_opt(toCString(e.target.dataset.setting),
+	f = e => _set_opt(toCString(e.target.dataset.opt),
 		toCString(e.target.value));
-	$$('[data-setting]').forEach(x => x.addEventListener('change', f));
+	$$('[data-opt]').forEach(x => x.addEventListener('change', f));
+
+	$('#flip-controls-button').addEventListener('click', flipControls);
 
 	f = e => $(`#${e.target.dataset.modal}`).style.display = 'block';
 	$$('[data-modal]').forEach(x => x.addEventListener('click', f));
diff --git a/web/static/index.html b/web/static/index.html
index 53796d8..bf7a890 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -67,9 +67,10 @@
 			</div>
 			<div id="settings-bar">
 				<div>dartboat™</div>
-				<div class="input first"><span>delay</span><input id="delay" data-setting="delay" maxlength="4" value=""></div>
-				<div class="input"><span>stdev</span><input id="stdev" data-setting="stdev" maxlength="4" value=""></div>
-				<div class="help-button" data-modal="help-modal">?</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>
 			<div id="visits"></div>
 		</div>
diff --git a/web/static/style.css b/web/static/style.css
index 893c144..3ff1680 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -307,19 +307,23 @@ div#settings-bar input {
 	border: 0;
 }
 
-div#settings-bar div.help-button {
+div#settings-bar div.button {
 	background-color: #3d2466;
 	font-weight: 700;
 
 	padding: 0 0.4em;
 }
 
+#flip-controls-button {
+	display: none;
+}
+
 @media (hover: hover) and (pointer: fine) {
 	div#settings-bar input:hover {
 		background-color: #5c3699;
 	}
 
-	div#settings-bar div.help-button:hover {
+	div#settings-bar div.button:hover {
 		background-color: #5c3699;
 	}
 }
@@ -330,7 +334,7 @@ div#settings-bar input:focus {
 	outline: #7eab1e solid 2px;
 }
 
-div#settings-bar div.help-button:active {
+div#settings-bar div.button:active {
 	color: #fff;
 	background-color: #6e41b8;
 }
@@ -434,7 +438,7 @@ a:hover {
 		padding: 0 0.4rem;
 	}
 
-	div#settings-bar .help-button {
+	div#settings-bar .button {
 		font-size: 3em;
 	}
 }
@@ -448,6 +452,15 @@ a:hover {
 		grid-template-areas: 'settings-bar settings-bar' 'info visits' 'controls visits';
 	}
 
+	div#main.right-controls {
+		grid-template-columns: 1fr 80vh;
+		grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls';
+	}
+
+	#flip-controls-button {
+		display: unset;
+	}
+
 	div#controls {
 		margin-top: 0;
 	}