testing debug panel

TheRainbowPhoenix · Aug 18, 2024 · 8257b92 · 8257b92
1 parent f44c614
commit 8257b92
Show file tree

Hide file tree

Showing 16 changed files with 1,497 additions and 944 deletions.
diff --git a/ebuild/ruk.js b/ebuild/ruk.js
diff --git a/ebuild/ruk.js.map b/ebuild/ruk.js.map
diff --git a/ebuild/style.css b/ebuild/style.css
diff --git a/ruk-ui/src/App.svelte b/ruk-ui/src/App.svelte
@@ -9,11 +9,12 @@
   import Emscripten from './lib/emu/emscripten.svelte';
   import Toolbar from './lib/elements/toolbar.svelte';
   import Tracing from './lib/elements/tracing.svelte';
-  import { autorun, copyScreenFeedback, debugging, lastDump, loadedFilename, state, traceback, tracing } from './lib/stores/app';
+  import { autorun, copyScreenFeedback, debugging, debugPane, lastDump, loadedFilename, state, traceback, tracing } from './lib/stores/app';
   import { loadFileIntoFSPromise } from './lib/emu/fetchers';
   import { get } from 'svelte/store';
   import CalculatorSkin from './assets/calculatorSkin.svelte';
   import { setupListeners } from './lib/emu/listeners';
+  import Debug from './lib/elements/debug.svelte';
 
   onMount(async () => {
     setupListeners();
@@ -81,9 +82,13 @@
   };
 
   const doDebug = (e: CustomEvent) => {
-    debugging.set(true);
+    if ($state === "loaded" || $state === "ready") {
+      debugging.set(true);
+    }
 
-    // TODO 
+    if (!$debugPane) {
+      debugPane.set(true);
+    }
   }
   
 
@@ -138,7 +143,7 @@
 
   <div class="container">
 
-    <div class="logo">
+    <div class="logo" class:compact={$debugPane}>
       <img src={RuKLogo} alt="RuK Logo" />
       <span>RuK UI</span>
     </div>
@@ -151,7 +156,7 @@
       <Buttons />
     </div>
 
-    <div class="tools-container">
+    <!-- <div class="tools-container"> -->
       <Toolbar
         on:romChanged={doRomLoad}
         on:doRun={doRun}
@@ -162,10 +167,12 @@
         on:doSaveScreen={doSaveScreen}
       />
 
+      <Debug />
+
       <Tracing
         on:doRefresh={doRefresh}
       />
-    </div>
+    <!-- </div> -->
     <div style="display: none;">
       <Emscripten />
     </div>
@@ -182,9 +189,24 @@
   .container {
     display: flex;
     justify-content: center;
-    align-items: center;
-    min-height: 100vh;
+
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: .5rem;
+
+    flex-direction: row;
+    align-items: flex-start;
+    min-height: 960px;
+    gap: .75rem;
+    flex-shrink: 1;
+    visibility: visible;
     position: relative;
+    overflow: hidden;
+    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+    font-weight: normal;
+    color: var(--cp-text);
+    min-height: 960px;
   }
 
   .logo {
@@ -193,22 +215,46 @@
     top: 2rem;
     left: 2rem;
     align-items: center;
+    z-index: 120;
+  }
+
+  .logo.compact {
+    top: .5rem;
+    left: .5rem;
+    align-items: center;
   }
 
   .logo img {
     height: 4em;
     margin-right: 1rem;
     will-change: filter;
-    transition: filter 300ms;
+    transition: filter 300ms, height .25s ease-in;
+  }
+
+  .logo.compact img {
+    height: 3em;
+    margin-right: 0rem;
+    transition: height .25s ease-in;
   }
 
   .logo span {
+    opacity: 1;
     display: block;
     font-size: 2em;
     font-weight: bold;
+    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
+    transition: clip-path .25s ease-in, opacity .3s ease-in;
+  }
+
+  .logo.compact span {
+    opacity: 0;
+    clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
+    transition: clip-path .25s ease-in, opacity .3s ease-in;
+
   }
 
   .calc-container {
+    flex: 0 0 440px;
     position: relative;
   }
 

diff --git a/ruk-ui/src/app.css b/ruk-ui/src/app.css
@@ -34,8 +34,16 @@ html, body {
   padding: 0;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
 }
 
+#app, main {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+
 
 button {
   border-radius: 8px;

diff --git a/ruk-ui/src/assets/icons/ffowards.svelte b/ruk-ui/src/assets/icons/ffowards.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let on: boolean = false;
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+{#if on}
+    <path fill="currentColor" fill-rule="evenodd" d="M2 6.426v11.148c0 1.847 1.6 3.015 2.903 2.118L11 15.232V8.768l-6.097-4.46C3.601 3.411 2 4.58 2 6.426" clip-rule="evenodd" opacity="0.5"/><path fill="currentColor" d="M11 7.123v9.754c0 1.616 1.467 2.638 2.661 1.853l7.418-4.877c1.228-.807 1.228-2.899 0-3.706L13.66 5.27C12.467 4.485 11 5.507 11 7.123"/>>
+{:else}
+    <g fill="none" stroke="currentColor" stroke-width="1.5"><path d="m11 8.768l-6.097-4.46C3.601 3.411 2 4.58 2 6.426v11.148c0 1.847 1.6 3.015 2.903 2.118L11 15.232" opacity="0.5"/><path d="M21.079 10.147c1.228.807 1.228 2.899 0 3.706L13.66 18.73c-1.194.785-2.661-.237-2.661-1.853V7.123c0-1.616 1.467-2.638 2.661-1.853z"/></g>
+{/if}
+</svg>