From 51ea12cfa3b34f551bcfd65ca06db226e3f84c32 Mon Sep 17 00:00:00 2001
From: Steven Hugg <hugg@fasterlight.com>
Date: Tue, 20 Aug 2019 11:42:39 -0400
Subject: [PATCH] moved PLATFORMS menu, now it shows title

---
 index.html          | 41 ++++++++++++++++++++++-------------------
 src/baseplatform.ts |  5 +++++
 src/ui.ts           | 26 +++++++++++++++++---------
 3 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index 73ca4680..1cfc216a 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,7 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
 
 <div id="controls_top" class="disable-select">
  <div id="controls_dynamic" style="visibility:hidden">
+  <!-- main menu -->
   <span class="dropdown">
     <a class="btn dropdown-toggle toolbarMenuButton" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Menu">
       <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
@@ -136,26 +137,10 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
     </ul>
   </span>
 
-  <select id="preset_select" name="" title="Project Select" style="width:18em;visibility:hidden;height:2.3em">
-  </select>
-
-  <img id="compile_spinner" src="images/spinner.gif" style="visibility:hidden;margin-left:8px;margin-right:8px;height:2em">
-  <span id="toolbar" class="hidden-xs"></span>
-  <span class="btn_group view_group hidden-sm hidden-xs" id="speed_bar" style="display:none">
-    <button id="dbg_slowest" class="btn" title="Slowest"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>
-    <button id="dbg_slower" class="btn" title="Slower"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
-    <span class="label"><span id="fps_label">60.00</span> fps</span>
-    <button id="dbg_faster" class="btn" title="Faster"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
-    <button id="dbg_fastest" class="btn" title="Faster"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button>
-  </span>
-  <span id="verilog_bar" style="display:none">
-    <span class="label"><span id="settle_label"></span> evals/clk</span>
-  </span>
-
+  <!-- PLATFORMS menu -->
   <span class="dropdown">
-    <!-- PLATFORMS menu -->
-    <a class="btn dropdown-toggle hidden-xs toolbarMenuButton" id="platformsMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      <span>PLATFORMS</span> <span class="caret"></span>
+    <a class="btn dropdown-toggle hidden-xs toolbarMenuButton" id="platformsMenuButton" style="min-width:90px" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="platform_name">PLATFORMS</span> <span class="caret"></span>
     </a>
     <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="platformsMenuButton">
           <li class="dropdown dropdown-submenu">
@@ -200,6 +185,24 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
           </li>
     </ul>
   </span>
+
+  <!-- project selector -->
+  <select id="preset_select" name="" title="Project Select" style="width:18em;visibility:hidden;height:2.3em">
+  </select>
+
+  <img id="compile_spinner" src="images/spinner.gif" style="visibility:hidden;margin-left:8px;margin-right:8px;height:2em">
+  <span id="toolbar" class="hidden-xs"></span>
+  <span class="btn_group view_group hidden-sm hidden-xs" id="speed_bar" style="display:none">
+    <button id="dbg_slowest" class="btn" title="Slowest"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>
+    <button id="dbg_slower" class="btn" title="Slower"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
+    <span class="label"><span id="fps_label">60.00</span> fps</span>
+    <button id="dbg_faster" class="btn" title="Faster"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
+    <button id="dbg_fastest" class="btn" title="Faster"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button>
+  </span>
+  <span id="verilog_bar" style="display:none">
+    <span class="label"><span id="settle_label"></span> evals/clk</span>
+  </span>
+
   <!-- 8bitworkshop logo -->
   <span class="logo-gradient hidden-xs hidden-sm hidden-md pull-right" style="margin-left:auto" onclick="window.open('/','_8bitws');">8bitworkshop</span>
   <!-- BOOKS menu -->
diff --git a/src/baseplatform.ts b/src/baseplatform.ts
index 11eff15c..d8026ead 100644
--- a/src/baseplatform.ts
+++ b/src/baseplatform.ts
@@ -54,6 +54,10 @@ export class DebugSymbols {
   }
 }
 
+export interface PlatformMetadata {
+  name : string; // TODO
+}
+
 export interface Platform {
   start() : void;
   reset() : void;
@@ -65,6 +69,7 @@ export interface Platform {
   resume() : void;
   loadROM(title:string, rom:any); // TODO: Uint8Array
   loadBIOS?(title:string, rom:Uint8Array);
+  getMetadata?() : PlatformMetadata;
 
   loadState?(state : EmuState) : void;
   saveState?() : EmuState;
diff --git a/src/ui.ts b/src/ui.ts
index 52fa770f..ac0712c7 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -1580,7 +1580,12 @@ function showWelcomeMessage() {
           element: "#platformsMenuButton",
           placement: 'right',
           title: "Welcome to 8bitworkshop!",
-          content: "You are currently on the \"<b>" + platform_id + "</b>\" platform. You can choose a different one from the menu."
+          content: "You're currently on the \"<b>" + platform_id + "</b>\" platform. You can choose a different one from the menu."
+        },
+        {
+          element: "#preset_select",
+          title: "Project Selector",
+          content: "You can choose different code examples, create your own files, or import projects from GitHub."
         },
         {
           element: "#workspace",
@@ -1594,11 +1599,6 @@ function showWelcomeMessage() {
           title: "Emulator",
           content: "We'll load your compiled code into the emulator whenever you make changes."
         },
-        {
-          element: "#preset_select",
-          title: "File Selector",
-          content: "Pick a code example from the book, or access your own files and files shared by others."
-        },
         {
           element: "#debug_bar",
           placement: 'bottom',
@@ -1754,6 +1754,7 @@ function installGAHooks() {
 function startPlatform() {
   if (!PLATFORMS[platform_id]) throw Error("Invalid platform '" + platform_id + "'.");
   platform = new PLATFORMS[platform_id]($("#emuscreen")[0]);
+  setPlatformUI();
   stateRecorder = new StateRecorderImpl(platform);
   PRESETS = platform.getPresets();
   if (!qs['file']) {
@@ -1857,6 +1858,16 @@ function loadImportedURL(url : string) {
   }, 'text');
 }
 
+function setPlatformUI() {
+  var name = platform.getMetadata && platform.getMetadata().name;
+  var menuitem = $("#item_platform_"+platform_id);
+  if (menuitem.length) {
+    menuitem.addClass("dropdown-item-checked");
+    name = name || menuitem.text() || name;
+  }
+  $(".platform_name").text(name || platform_id);
+}
+
 // start
 export function startUI(loadplatform : boolean) {
   installErrorHandler();
@@ -1885,9 +1896,6 @@ export function startUI(loadplatform : boolean) {
     repo_id = '';
     delete qs['repo'];
   }
-  // update UI
-  $("#item_platform_"+platform_id).addClass("dropdown-item-checked");
-  $("#platform_name").text(platform_id);
   setupSplits();
   // create store
   store_id = repo_id || getBasePlatform(platform_id);