add base app

ruk-ui/src/App.svelte

@@ -8,15 +8,85 @@
   import Calculator from './lib/emu/calculator.svelte';
   import Emscripten from './lib/emu/emscripten.svelte';
   import Toolbar from './lib/ui/toolbar.svelte';
-  import { loadedFilename, state } from './lib/stores/app';
+  import { autorun, copyScreenFeedback, debugging, loadedFilename, state, traceback } 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';
 
   onMount(async () => {
+    setupListeners();
+
+    state.subscribe((s) => {
+      console.log(s)
+    })
+
     dropEmulator();
   })
 
+  const doFullscreen = (e: CustomEvent) => {
+    window.Module.requestFullscreen(true, false);
+  }
+
+  const doCopyScreen = (e: CustomEvent) => {
+    const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+    if (canvas) {
+      canvas.toBlob(function(blob: any) {
+        const item = new ClipboardItem({ 'image/png': blob });
+        navigator.clipboard.write([item]).then(() => {
+          copyScreenFeedback.set("Copied to clipboard !");
+
+          setTimeout(() => {
+            copyScreenFeedback.set(null);
+          }, 4000);
+          
+        }).catch(() => {
+
+        })
+      });
+    }
+  }
+
+  const doSaveScreen = (e: CustomEvent) => {
+    const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+    if (canvas) {
+      const link = document.createElement('a');
+      link.href = canvas.toDataURL('image/png');
+      link.download = 'ClassPad_Screen.png';
+      link.click();
+    }
+  }
+
+  const doDump = (e: CustomEvent) => {
+    // TODO 
+  }
+
+  const doDebug = (e: CustomEvent) => {
+    debugging.set(true);
+
+    // TODO 
+  }
+  
+
+  const doRun = async (e: CustomEvent) => {
+    let fileName = get(loadedFilename);
+    if (fileName) {
+      state.set("running");
+      try {
+        window.Module.ccall('startInterpreter', null, ["string"], [fileName]);
+      } catch (error) {
+        traceback.set(error)
+        state.set("crashed")
+      }
+    } else {
+      state.set("crashed");
+      traceback.set({
+        name: "INVALID_FILE_NAME",
+        message: `fileName is empty`
+      })
+    }
+  }
+
   const doRomLoad = async (e: CustomEvent) => {
     console.log(e.detail);
     state.set("loading");
@@ -28,10 +98,10 @@
             console.log(file.name)
             loadedFilename.set(file.name);
 
-            // loaded_filename = file.name;
-            let fileName = get(loadedFilename);
-            if (fileName) {
-              window.Module.ccall('startInterpreter', null, ["string"], [fileName]);
+            if ($autorun) {
+              doRun(e);
+            } else {
+              state.set("loaded");
             }
             // runNow();
         })
@@ -62,7 +132,15 @@
       <Buttons />
     </div>
 
-    <Toolbar on:romChanged={doRomLoad} />
+    <Toolbar
+      on:romChanged={doRomLoad}
+      on:doRun={doRun}
+      on:doDump={doDump}
+      on:doDebug={doDebug}
+      on:doFullscreen={doFullscreen}
+      on:doCopyScreen={doCopyScreen}
+      on:doSaveScreen={doSaveScreen}
+    />
     <div style="display: none;">
       <Emscripten />
     </div>

ruk-ui/src/assets/icons/bomb.svelte

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 22a7.5 7.5 0 1 0 0-15a7.5 7.5 0 0 0 0 15" opacity="0.5"/><path fill="currentColor" d="M17.981 2.353a.558.558 0 0 1 1.038 0l.654 1.66c.057.143.17.257.315.314l1.659.654c.47.186.47.852 0 1.038l-1.66.654a.56.56 0 0 0-.314.315l-.654 1.659a.558.558 0 0 1-1.038 0l-.654-1.66a.56.56 0 0 0-.315-.314l-1.659-.654a.558.558 0 0 1 0-1.038l1.66-.654a.56.56 0 0 0 .314-.315z"/><path fill="currentColor" d="m16.477 6.462l-2.23 2.231a7.6 7.6 0 0 1 1.06 1.06l2.23-2.23l-.21-.535a.56.56 0 0 0-.315-.315z" opacity="0.7"/><path fill="currentColor" d="M12 16.75a.75.75 0 0 0 0-1.5h-2a.75.75 0 0 0 0 1.5zm2-4.25c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5s.448-1.5 1-1.5s1 .672 1 1.5M9 14c.552 0 1-.672 1-1.5S9.552 11 9 11s-1 .672-1 1.5s.448 1.5 1 1.5"/></svg>

ruk-ui/src/assets/icons/debug.svelte

@@ -1,4 +1,9 @@
+<script lang="ts">
+    export let active: boolean = false;
+</script>
+
 <svg
+    class:active
     xmlns="http://www.w3.org/2000/svg"
     width="1em"
     height="1em"
@@ -22,4 +27,10 @@
         d="M12 14.25a.75.75 0 0 1 .75.75v7h-1.5v-7a.75.75 0 0 1 .75-.75"
         clip-rule="evenodd"
     ></path></svg
-    >
+    >
+
+<style>
+    .active {
+        color: var(--cp-accent);
+    }
+</style>

ruk-ui/src/assets/icons/unhappy.svelte

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3.464 3.464C2 4.93 2 7.286 2 12s0 7.071 1.464 8.535C4.93 22 7.286 22 12 22s7.071 0 8.535-1.465C22 19.072 22 16.714 22 12s0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464" opacity="0.5"/><path fill="currentColor" d="M7.55 9.6a.75.75 0 0 1 .9-1.2l2 1.5a.75.75 0 0 1 0 1.2l-2 1.5a.75.75 0 1 1-.9-1.2l1.2-.9zm9.05-1.05a.75.75 0 0 1-.15 1.05l-1.2.9l1.2.9a.75.75 0 1 1-.9 1.2l-2-1.5a.75.75 0 0 1 0-1.2l2-1.5a.75.75 0 0 1 1.05.15m-1.07 7.98a.75.75 0 0 1-1.06 0l-.47-.47c-.561.53-1.44.53-2 0c-.56.53-1.439.53-2 0l-.47.47a.75.75 0 1 1-1.06-1.06l.5-.5a1.457 1.457 0 0 1 2.03-.03c.56-.53 1.44-.53 2 0a1.457 1.457 0 0 1 2.03.03l.5.5a.75.75 0 0 1 0 1.06"/></svg>

ruk-ui/src/global.d.ts

@@ -8,6 +8,7 @@ declare interface Window {
             },
             unlink:  (fileName: String) => boolean,
             createDataFile: (parent: string, fileName: string, data: any, canRead?: boolean, canWrite?: boolean, canOwn?: boolean) => void
-        }
+        },
+        requestFullscreen: (a: boolean, b: boolean) => void
     };
 }

ruk-ui/src/lib/components/popover.svelte

@@ -0,0 +1,87 @@
+<script>
+    import { onMount } from 'svelte';
+  
+    let parent;
+    export let visible = false;
+  
+    /** @type {HTMLDivElement} */
+    let popover;
+    let position = { x: 0, y: 0 };
+  
+    onMount(() => {
+        parent = popover.parentElement;
+        if (parent) {
+            const rect = parent.getBoundingClientRect();
+            const popoverRect = popover.getBoundingClientRect();
+
+            position = {
+                x: rect.left + window.scrollX,
+                y: rect.top + window.scrollY // + (rect.height - popoverRect.height) / 2
+            };
+        
+            // Adjust the position based on the width and height of the popover
+            if (position.x + popoverRect.width > window.innerWidth) {
+                position.x -= popoverRect.width;
+            } else {
+                position.x += rect.width;
+            }
+
+            // position.y += (rect.height - popoverRect.height) / 2;
+
+        }
+      
+    });
+  </script>
+
+
+<div
+    bind:this={popover}
+    class="popover {visible ? 'visible' : ''}"
+    style="--x: {position.x}px; --y: {position.y}px;"
+>
+    <div class="tip"></div>
+    <slot></slot>
+</div>
+
+
+  <style>
+    .popover {
+        position: absolute;
+        background: #2f2f2f;
+        border: 2px solid #2f2f2f;
+
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        transform: translate(var(--x), var(--y));
+
+        box-sizing: border-box;
+        max-width: calc(100vw - 16px);
+        height: auto;
+        max-height: calc(100dvh - 16px);
+        display: flex;
+        position: fixed;
+        inset: 0 auto auto 0;
+        overflow: visible;
+        opacity: 1 !important;
+        display: none;
+    }
+
+    .popover.visible {
+        display: block;
+    }
+
+    .tip {
+        position: absolute;
+        top: 0px;
+        translate: 0px -6px;
+        inset-inline: auto 100%;
+        inset-block-start: 50%;
+        clip-path: polygon(50% 50%, 105% 100%, 105% 0);
+        width: 10px;
+        height: 10px;
+        background: #2f2f2f;
+        border: 1px solid #2f2f2f;
+    }
+  </style>