From 12638b4131cf3a9827e26b0491b233bec9700fa9 Mon Sep 17 00:00:00 2001
From: Alexander Bass <alexander@alexanderbass.com>
Date: Sun, 6 Aug 2023 21:34:18 -0400
Subject: [PATCH] UI tweaks; add control info

---
 src/assets/froob.html | 80 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 71 insertions(+), 9 deletions(-)
diff --git a/src/assets/froob.html b/src/assets/froob.html
index 126c32a..8688583 100644
--- a/src/assets/froob.html
+++ b/src/assets/froob.html
@@ -7,29 +7,29 @@
 		<link rel="icon" href="data:," />
 		<style>
 			body {
-				margin-inline: auto;
 				background-color: green;
 				background-image: url("./background.png");
 				color: white;
 				font-family: Charter, bitstream charter, sitka text, Cambria, serif;
+				max-height: 100vh;
 			}
 			h1 {
 				margin: 0;
 				text-align: center;
-			}
-			h1 {
 				font-size: 3vw;
 			}
-			img,
 			canvas {
 				image-rendering: optimizeSpeed;
 				image-rendering: pixelated;
+				max-width: 100%;
+				max-height: 90vh;
 			}
 
 			#sidebyside {
-				justify-content: center;
 				display: flex;
-				gap: 20px;
+				gap: 0.5%;
+				justify-content: center;
+				max-height: inherit;
 			}
 			#gameOver {
 				height: 100vh;
@@ -71,27 +71,89 @@
 				font-size: 6vw;
 			}
 
+			#tryAgain {
+				text-decoration: underline;
+			}
+
 			#tryAgain:hover {
 				cursor: pointer;
 			}
 			#scoreCounter {
 				margin-top: 2vw;
 			}
+			#infobox {
+				font-family: sans-serif;
+				padding: 7px;
+
+				color: white;
+				background-color: #272727;
+				user-select: none;
+			}
+			#infobox h2 {
+				text-align: center;
+				margin: 0;
+				font-weight: normal;
+				font-size: medium;
+			}
+			#infobox ul {
+				margin: 0 0.5vw;
+				padding: 0;
+				list-style-type: none;
+			}
+			#infobox li {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+			kbd {
+				background-color: #eee;
+				border-radius: 3px;
+				text-align: center;
+				height: 1.8vw;
+				width: 1.8vw;
+				font-size: 1.5vw;
+				margin-block: 2px;
+				color: black;
+				border: 1px solid #b4b4b4;
+			}
+			.with-border {
+				margin: 4px;
+				border: 4px solid #525252;
+				outline: 4px solid #6b6b6b;
+			}
+
 			.hidden {
 				display: none;
 			}
+			#rightcolumn {
+				gap: 0.5%;
+				display: flex;
+				flex-direction: column;
+				flex-wrap: wrap;
+			}
 		</style>
 		<script type="module" src="main.js"></script>
 	</head>
 	<body>
 		<h1>Froobtris</h1>
 		<noscript
-			>This game requires javascript to do anything. You browser is either
-			incompatible with it, or you have disabled it.</noscript
+			>Froobtris requires JavaScript. You browser is either incompatible with
+			JavaScript, or you have disabled JavaScript.</noscript
 		>
 		<div id="sidebyside">
 			<div id="pfcontainer"></div>
-			<div id="sdcontainer"></div>
+			<div id="rightcolumn">
+				<div id="sdcontainer"></div>
+				<div id="infobox" class="with-border">
+					<h2>Controls</h2>
+					<ul>
+						<li><kbd>↑</kbd> Rotate</li>
+						<li><kbd>↓</kbd> Drop</li>
+						<li><kbd>←</kbd> Left</li>
+						<li><kbd>→</kbd> Right</li>
+					</ul>
+				</div>
+			</div>
 		</div>
 		<div id="overlay" class="hidden">
 			<div id="gameOver">
