Improve Focus, Remember Menus, T-State Logger Toggle (#47)

* * improved emulator focus (canvas focus on window focus, and on refresh) * remember what menu items are open * improved menu open/close * enable/disable the t-state logger (ie; writing to 0x86) * remove unnecessary console.log for uart and smooth * * cleanup unnecessary ids/divs
Zeal8bit · Oct 17, 2024 · 2898ee1 · 2898ee1
1 parent 4232227
commit 2898ee1
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 48 deletions.
diff --git a/hardemu/screen.js b/hardemu/screen.js
@@ -499,6 +499,8 @@ function Sprites(Tileset)
     }
 }
 
+var TStateLogger = false;
+
 function VideoChip(Zeal, PIO, scale) {
     const zeal = Zeal;
     const pio = PIO;
@@ -1097,7 +1099,7 @@ function VideoChip(Zeal, PIO, scale) {
                     const diff = current_states - tracked;
                     const micros = diff/10
                     const millis = micros/1000;
-                    console.log(`Elapsed T-states (${value}): ${diff} (${millis}ms)`);
+                    if(TStateLogger) console.log(`Elapsed T-states (${value}): ${diff} (${millis}ms)`);
                 } else {
                     previous_tstate[value] = current_states;
                 }

diff --git a/hardemu/uart.js b/hardemu/uart.js
@@ -179,7 +179,6 @@ function UART(Zeal, PIO) {
     this.opened = true;
     this.type = 'emulated';
     this.setActive = (state) => {
-        console.log(this.type, state);
         active = state;
         if(active) {
             /* Connect the TX pin to the PIO */

diff --git a/index.html b/index.html
@@ -233,7 +233,7 @@ <h4>Ready?</h4>
         </div>
 
         <section id="rightpanel">
-          <section class="menu" id="controls">
+          <section class="menu" id="menu-controls">
             <img id="continue" title="Continue (F9)" src="imgs/continue.png" class="cpuexec" alt="Continue" style="display: none;"/>
             <img id="pause" title="Pause (F9)" src="imgs/pause.png" alt="Pause" class="cpuexec hidden" />
             <img id="step" title="Step (F10)" src="imgs/step.png" alt="Step" />
@@ -242,10 +242,9 @@ <h4>Ready?</h4>
             <img id="clean" title="Clean" src="imgs/clean.png" alt="Clean">
           </section>
 
-          <section class="menu">
-            <section class="menutitle">
-                <img class="menuicon" src="imgs/down-arrow.png" />Breakpoints</section>
-            <section class="menucontent visible">
+          <section class="menu" id="menu-breakpoints">
+            <section class="menutitle">Breakpoints</section>
+            <section class="menucontent">
                 <section id="newbp">
                     <input type="text" id="bpaddr" />
                     <button id="addbp">Add</button>
@@ -258,9 +257,8 @@ <h4>Ready?</h4>
             </section>
           </section>
 
-          <section class="menu">
-            <section class="menutitle">
-                <img class="menuicon" src="imgs/right-arrow.png" />Settings</section>
+          <section class="menu" id="menu-settings">
+            <section class="menutitle">Settings</section>
             <section class="menucontent">
                 <label>
                   Switch theme:
@@ -269,9 +267,14 @@ <h4>Ready?</h4>
                       <option value="light">Light</option>
                   </select>
                 </label>
-                <div id="canvas-smooth">
-                  <label>Canvas Smoothing <input type="checkbox" id="canvas-smooth-val" /></label>
-                </div>
+                <label>
+                  Canvas Smoothing
+                  <input type="checkbox" id="canvas-smooth-val" />
+                </label>
+                <label>
+                  T-State Logger
+                  <input type="checkbox" id="t-state-logger-val" />
+                </label>
                 <div id="web-serial-settings">
                   <label>Web Serial:</label>
                   <button id="web-serial-connect">Connect Serial</button>

diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "dist-win64": "electron-builder --win --x64",
     "dist-mac": "electron-builder --mac",
     "dist-linux": "electron-builder --linux",
-    "dev": "live-server ./ --port=1145",
+    "dev": "live-server ./ --port=1145 --ignore=\".git,docs,roms\" --open=\"?r=latest\"",
     "get-prebuilt": "node ./tools/get-prebuilt.js"
   },
   "keywords": [],

diff --git a/view/css/emulator.css b/view/css/emulator.css
@@ -578,27 +578,18 @@ h3 {
     cursor: pointer;
 }
 
-#controls {
+#menu-controls {
     width: 100%;
     text-align: center;
 }
 
-#controls img {
+#menu-controls img {
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     cursor: pointer;
     width: 2em;
 }
 
-.menutitle {
-    font-variant: small-caps;
-    font-weight: bolder;
-    cursor: pointer;
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    user-select: none;
-}
-
 .menu {
     width: 100%;
     box-sizing: border-box;
@@ -611,12 +602,29 @@ h3 {
     border-bottom: var(--first-txt-color) solid 1px;
 }
 
-.menuicon {
-    display: inline-block;
-    width: 1em;
-    text-align: middle;
-    vertical-align: middle;
-    padding: 0 0.25em 0.2em 0.25em;
+.menutitle {
+    font-variant: small-caps;
+    font-weight: bolder;
+    cursor: pointer;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    user-select: none;
+
+    &::before {
+        /* <img class="menuicon" src="imgs/right-arrow.png" /> */
+        content: ' ';
+        width: 1em;
+        margin-inline: .5ch;
+        aspect-ratio: 1;
+        display: inline-block;
+        background-image: url('../../imgs/right-arrow.png');
+        background-position: center;
+        background-size: contain;
+
+    }
+    .visible &::before {
+        background-image: url('../../imgs/down-arrow.png');
+    }
 }
 
 .menucontent {
@@ -634,7 +642,7 @@ h3 {
         max-height 0.25s ease-out,
         padding-block 0.125ms ease-out 0.25s;
 
-    &.visible {
+    .visible & {
         padding-block: 0.5em;
         max-height: 300px;
         overflow-y: auto;

diff --git a/view/init.js b/view/init.js
@@ -57,3 +57,8 @@ const params = parseQueryParams(window.location.search);
 if (typeof electronAPI != 'undefined') {
     $(electronAPI.loaded);
 }
+
+$('#screen').focus();
+$(window).on('focus', () => {
+    $('#screen').focus();
+})
diff --git a/view/menus.js b/view/menus.js
@@ -25,6 +25,14 @@ function showContinueView() {
     $("#pause").hide();
 }
 
+function saveMenuState() {
+    const menus = {};
+    $('.menu').each(function() {
+        const id = $(this).attr('id');
+        menus[id] = $(this).hasClass('visible');
+    });
+    localStorage.setItem('menus', JSON.stringify(menus));
+}
 
 /**
  * Events for all menus and their content: breakpoints, CPU control, etc...
@@ -36,22 +44,9 @@ function showContinueView() {
 $(".menutitle").on('click', function(e) {
     e.preventDefault();
     e.stopPropagation();
-    /* Check if the content is shown or hidden */
-    const content = $(this).next(".menucontent");
-    const title = $(this).children(".menuicon");
-
-    const visible = content.hasClass('visible');
-    var new_src = visible ? right_arrow_src : down_arrow_src;
 
-    title.fadeOut(120, function () {
-        title.attr('src', new_src);
-        title.fadeIn(160);
-    });
-    if(visible) {
-        content.removeClass('visible');
-    } else {
-        content.addClass('visible');
-    }
+    $(this).parent().toggleClass('visible');
+    saveMenuState();
 });
 
 $("#theme").on("change", function() {
@@ -104,14 +99,19 @@ $('#web-serial-connect').on('click', (e) => {
 $('#canvas-smooth-val').on('change', (e) => {
     const smooth = e.currentTarget.checked;
     localStorage.setItem('canvas-smooth', JSON.stringify(smooth));
-    console.log('smooth', smooth);
     if(smooth) {
         $('#screen').addClass('no-pixels');
     } else {
         $('#screen').removeClass('no-pixels');
     }
 })
 
+$('#t-state-logger-val').on('change', (e) => {
+    const tstate = e.currentTarget.checked;
+    localStorage.setItem('t-state-logger', tstate);
+    TStateLogger = tstate;
+});
+
 $('#screen-capture').on('click', () => {
     console.log('capture screen');
     const canvas = document.getElementById('screen');
@@ -128,9 +128,19 @@ jQuery(() => {
     $('#continue').hide();
     $('#pause').show();
 
+    let menus = JSON.parse(localStorage.getItem('menus')) ?? {};
+    Object.entries(menus).map((entry) => {
+        const [k,v] = entry;
+        if(v) $(`#${k}`).addClass('visible');
+    });
+
+
     const smooth = JSON.parse(localStorage.getItem('canvas-smooth') ?? false);
     $('#canvas-smooth-val').attr('checked', smooth).trigger('change');
 
+    const tstate = JSON.parse(localStorage.getItem('t-state-logger') ?? false);
+    $('#t-state-logger-val').attr('checked', tstate).trigger('change');
+
     if(!navigator || !navigator.serial) {
         // disable web serial, only supported in latest Chrome, Edge and Opera
         $('#web-serial-settings').hide();