adding help button

assets/css/style.css

@@ -103,7 +103,7 @@ canvas {
 	padding: 20px;
 }
 
-#contact, #maomao {
+#contact, #maomao, #help {
 	background: #a3acbe;
 	position: relative;
 	height: inherit;
@@ -113,6 +113,8 @@ canvas {
 	padding: 10px;
 	overflow: auto!important;
 }
+
+
 .prompt-container {
   display: flex;
   align-items: center;
@@ -369,6 +371,12 @@ button:hover {
 	left: 0px;
 }
 
+#help-button {
+	position: absolute;
+	bottom: -28px;
+	right: 0px;
+}
+
 #on-screen-controller-button {
 	background-color: #ededed;
 	font-size: 16.9px;
@@ -380,7 +388,7 @@ button:hover {
 	margin-right: 2px;
 	position: absolute;
 	bottom: -28px;
-	right: 0px;
+	right: 100px;
 }
 
 #on-screen-controller-button:hover {

assets/js/app.js

@@ -18,6 +18,7 @@ canvas.height = canvas.width
 
 var audio = null
 var contact = new Contact()
+var controls = new Controls()
 var maomao = new Maomao()
 var terminal = new Terminal()
 var games = new Games()

assets/js/controls.js

@@ -0,0 +1,5 @@
+class Controls extends Window {
+	constructor() {
+		super('help')
+	}
+}

index.html

@@ -18,6 +18,7 @@
 		<script type="text/javascript" src="./assets/js/resume.js" defer></script>
 		<script type="text/javascript" src="./assets/js/portfolio.js" defer></script>
 		<script type="text/javascript" src="./assets/js/contact.js" defer></script>
+		<script type="text/javascript" src="./assets/js/controls.js" defer></script>
 		<script type="text/javascript" src="./assets/js/dialog.js" defer></script>
 		<script type="text/javascript" src="./assets/js/indicator.js" defer></script>
 		<script type="text/javascript" src="./assets/js/keystroke.js" defer></script>
@@ -47,6 +48,7 @@
 
 				<canvas id="canvas"></canvas>
 
+				<button id="help-button" onclick="controls.show()">❓ Help</button>
 				<button id="on-screen-controller-button" onclick="toggleController()">🎮 Toggle On Screen Controller</button>
 				<span class="indicator" id='resume-indicator'></span>	
 				<span class="indicator" id='portfolio-indicator'></span>	
@@ -142,6 +144,38 @@
 					</div>
 				</div>
 
+				<!-- Controls -->
+				<div class="window-container" id="help-container">
+					<div class="window-bar">
+						<div style="float:inline-start;">
+							❓ Help
+						</div>
+						<div style="float:inline-end;">
+							<button class="close-button" onclick="controls.hide()">X</button>
+						</div>
+						<div style="clear:both;"></div>
+					</div>
+					<div id="help">
+						<div class="games-inner-container">
+							<b>Movement:</b><br>
+							There are multiple methods of movement:
+							<ul>
+								<li>WASD</li>
+								<li>Arrow Keys</li>
+								<li>VIM Keys [HJKL]</li>
+								<li>Point and Click</li>
+							</ul>
+							<b>Interaction:</b><br>
+							<ul>
+								<li>Enter Key - Use Enter Key to interact</li>
+								<li>Click - Use your mouse to click to interact</li>
+							</ul>
+							<b>Quick Access:</b><br>
+							Use the buttons at the top of the screen to view my portfolio, resume, contact info, or play the games I have made.
+						</div>
+					</div>
+				</div>
+
 				<!-- Contact -->
 				<div class="window-container" id="contact-container">
 					<div class="window-bar">