From acc0777de1e13272b77730a1fbdf965c4a9c6d83 Mon Sep 17 00:00:00 2001
From: Dominic DiTaranto <me@domdit.com>
Date: Fri, 2 Jan 2026 13:57:35 -0500
Subject: [PATCH] adding help button

---
 assets/css/style.css  | 12 ++++++++++--
 assets/js/app.js      |  1 +
 assets/js/controls.js |  5 +++++
 index.html            | 34 ++++++++++++++++++++++++++++++++++
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/controls.js

diff --git a/assets/css/style.css b/assets/css/style.css
index 442a6cc..92b0d0c 100644
--- a/assets/css/style.css
+++ b/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 {
diff --git a/assets/js/app.js b/assets/js/app.js
index 72ae904..9dc8251 100644
--- a/assets/js/app.js
+++ b/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()
diff --git a/assets/js/controls.js b/assets/js/controls.js
new file mode 100644
index 0000000..26c8c6e
--- /dev/null
+++ b/assets/js/controls.js
@@ -0,0 +1,5 @@
+class Controls extends Window {
+	constructor() {
+		super('help')
+	}
+}
diff --git a/index.html b/index.html
index 91e6693..043783c 100644
--- a/index.html
+++ b/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">