first re-build

.github/workflows/emscripten.yml

@@ -32,12 +32,6 @@ jobs:
         with:
           python-version: '3.12'
 
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-
       - name: Install cached emscripten
         id: cache
         uses: actions/cache@v3
@@ -60,16 +54,28 @@ jobs:
           cd ebuild
           emmake cmake .. -DUSE_SDL_GUI=ON -DEMSCRIPTEN=ON
           emmake make -j$(nproc)
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
 
       - name: Install UI dependencies
         run: |
           cd ruk-ui
-          npm install
+          pnpm install
       
       - name: build
         run: |
           cd ruk-ui
-          npm run build
+          pnpm run build
 
       - name: Setup Pages
         id: pages

ruk-ui/README.md

@@ -1,47 +1,24 @@
-# Svelte + TS + Vite
+<h1 align="center">
+  <img src="docs/res/RuK.png#gh-light-mode-only" width="288px"/><br/>
+  <img src="docs/res/RuK_dark.png#gh-dark-mode-only" width="288px"/><br/>
+</h1>
+<p align="center">A simple <b>SuperH Emulator</b> that aim to help understanding SH4.<br/><br/>
 
-This template should help get you started developing with Svelte and TypeScript in Vite.
+## RuK UI
 
-## Recommended IDE Setup
+Some of the UI logics ported to JavaScript to work with and EMScripten.
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
-
-## Need an official Svelte framework?
-
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
-
-## Technical considerations
-
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+It is used to build an UI layer atop of the CP-Emu.
 
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
 
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+### Recommended IDE Setup
 
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+### Building 
 
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+The code is statically pre-built in the "ebuild" folder. You can build it yourself with
+Node and pnpm :
 
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
-```
+`pnpm install`
+`pnpm run build`

ruk-ui/index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte + TS</title>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
+
+    <!-- The emulator will get dropped on ready -->
+    <!-- <script async="" type="text/javascript" src="calcemu.js"></script> -->
   </body>
 </html>

ruk-ui/src/App.svelte

@@ -1,47 +1,116 @@
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
-  import Counter from './lib/Counter.svelte'
+  import { onMount } from 'svelte';
+  import RuKLogo from './assets/RuK.svg'
+  import Background from './assets/background.svelte'
+  
+  import { dropEmulator } from './lib/emu/loader.js';
+  import Buttons from './lib/emu/buttons.svelte';
+  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 { loadFileIntoFSPromise } from './lib/emu/fetchers';
+  import { get } from 'svelte/store';
+  import CalculatorSkin from './assets/calculatorSkin.svelte';
+
+  onMount(async () => {
+    dropEmulator();
+  })
+
+  const doRomLoad = async (e: CustomEvent) => {
+    console.log(e.detail);
+    state.set("loading");
+
+    var file = e.detail.target.files[0];
+    if (file) {
+        // loaded_filename = null;
+        loadFileIntoFSPromise(file, file.name).then(() => {
+            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]);
+            }
+            // runNow();
+        })
+        .catch(error => {
+            console.error('Error loading file:', error);
+        });
+    }
+  }
+
+  export let ide = true;
 </script>
 
 <main>
-  <div>
-    <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-      <img src={viteLogo} class="logo" alt="Vite Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
-  </div>
-  <h1>Vite + Svelte</h1>
+  <Background />
+
+  <div class="container">
+
+    <div class="logo">
+      <img src={RuKLogo} alt="RuK Logo" />
+      <span>RuK UI</span>
+    </div>
+
+    <div class="calc-container">
+      <div id="classpad" style="--zoomFactor: 1.5">
+        <CalculatorSkin />
+      </div>
+      <Calculator />
+      <Buttons />
+    </div>
+
+    <Toolbar on:romChanged={doRomLoad} />
+    <div style="display: none;">
+      <Emscripten />
+    </div>
 
-  <div class="card">
-    <Counter />
   </div>
 
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
 
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
+
+
 </main>
 
 <style>
+
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    position: relative;
+  }
+
   .logo {
-    height: 6em;
-    padding: 1.5em;
+    display: flex;
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    align-items: center;
+  }
+
+  .logo img {
+    height: 4em;
+    margin-right: 1rem;
     will-change: filter;
     transition: filter 300ms;
   }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
+
+  .logo span {
+    display: block;
+    font-size: 2em;
+    font-weight: bold;
   }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
+
+  .calc-container {
+    position: relative;
   }
-  .read-the-docs {
-    color: #888;
+
+  #classpad {
+    width: 432px;
   }
+ 
 </style>

ruk-ui/src/app.css

@@ -1,4 +1,20 @@
 :root {
+  --bs-body-color: #ffffff;
+  --bs-body-bg: #000000;
+  --bs-dark-rgb: 20, 20, 90;
+  --bs-light-rgb: 199, 201, 219;
+  --bs-neon: #0c66e9;
+  --cp-white: #f4f4f5;
+  --cp-text: #a1a1aa;
+  --cp-bg: #1f2325;
+  --cp-accent: #00dc68;
+  --cp-accent-hover: #2bfd87;
+  --cp-disabled: #3f3f46;
+  --cp-text-black: #003719;
+
+  --grain: url(/noise.svg);
+
+
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
@@ -13,38 +29,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+html, body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  padding: 0;
+  width: 100%;
+  height: 100%;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
 button {
   border-radius: 8px;
@@ -66,10 +57,6 @@ button:focus-visible {
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
   a:hover {
     color: #747bff;
   }