From f9f580248fc216a1cf2ea5d9f0eaf66a5f5ef027 Mon Sep 17 00:00:00 2001
From: Steven Hugg <hugg@fasterlight.com>
Date: Fri, 17 May 2019 00:42:52 -0400
Subject: [PATCH] added control instructions

---
 css/ui.css | 16 ++++++++++++++++
 index.html |  8 ++++++++
 src/ui.ts  |  7 ++++++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/css/ui.css b/css/ui.css
index 69b4588c..cb0c2403 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -516,3 +516,19 @@ div.asset_toolbar {
   padding:8px;
   margin:8px;
 }
+.control-insns {
+  margin-top:1em;
+}
+.control-key {
+  border: 2px solid rgba(0,0,0,0.2);
+  border-radius: 0.6em;
+  padding: 0.2em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  background-color: #eee;
+  margin-left: 1em;
+  color: #666;
+}
+.control-def {
+  color: #ccc;
+}
diff --git a/index.html b/index.html
index 92522fa9..51a925e4 100644
--- a/index.html
+++ b/index.html
@@ -225,6 +225,14 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
       <button id="replay_max" class="btn" title="End of replay"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button>
      </div>
     </div>
+    <!-- control instructions -->
+    <div id="emucontrols-nes" class="text-center small control-insns" style="display:none">
+      <span class="control-def"><span class="control-key">&#x2190;&#x2191;&#x2193;&#x2192;</span> Joypad</span>
+      <span class="control-def"><span class="control-key">X</span> Button A</span>
+      <span class="control-def"><span class="control-key">Z</span> Button B</span>
+      <span class="control-def"><span class="control-key small">Space</span> Select</span>
+      <span class="control-def"><span class="control-key small">Enter</span> Start</span>
+    </div>
     <div id="javatari-div" style="float:center;margin:10px;display:none">
       <div id="javatari-screen" style="margin: 0 auto; box-shadow: 2px 2px 10px rgb(60, 60, 60);"></div>
       <div id="javatari-console-panel" style="margin: 0 auto; box-shadow: 2px 2px 10px rgb(60, 60, 60);"></div>
diff --git a/src/ui.ts b/src/ui.ts
index 44709748..4bd074f7 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -12,7 +12,7 @@ import { PLATFORMS, EmuHalt, Toolbar } from "./emu";
 import * as Views from "./views";
 import { createNewPersistentStore } from "./store";
 import { getFilenameForPath, getFilenamePrefix, highlightDifferences, invertMap, byteArrayToString, compressLZG,
-         byteArrayToUTF8, isProbablyBinary, getWithBinary, getBasePlatform, hex } from "./util";
+         byteArrayToUTF8, isProbablyBinary, getWithBinary, getBasePlatform, getRootBasePlatform, hex } from "./util";
 import { StateRecorderImpl } from "./recorder";
 import { GHSession, GithubService, getRepos, parseGithubURL } from "./services";
 
@@ -1643,6 +1643,10 @@ function addPageFocusHandlers() {
   });
 }
 
+function showInstructions() {
+  $("#emucontrols-" + getRootBasePlatform(platform_id)).show();
+}
+
 function startPlatform() {
   if (!PLATFORMS[platform_id]) throw Error("Invalid platform '" + platform_id + "'.");
   platform = new PLATFORMS[platform_id]($("#emulator")[0]);
@@ -1669,6 +1673,7 @@ function startPlatform() {
   setupDebugControls();
   updateSelector();
   addPageFocusHandlers();
+  showInstructions();
   return true;
 }