Extension UI update (#42)

* add shared-controls * update submodules * refactor extension ui
Pistonite · Feb 2, 2025 · 35e4f51 · 35e4f51
1 parent 8005b51
commit 35e4f51
Show file tree

Hide file tree

Showing 52 changed files with 1,032 additions and 957 deletions.
diff --git a/.gitmodules b/.gitmodules
@@ -10,3 +10,7 @@
 	path = packages/item-assets
 	url = https://github.com/Pistonight/botw-item-assets
 	branch = main
+[submodule "shared-controls"]
+	path = packages/shared-controls
+	url = https://github.com/Pistonight/shared-controls
+	branch = main
diff --git a/Taskfile.yml b/Taskfile.yml
@@ -7,9 +7,6 @@ env:
 dotenv: [".env"]
 
 includes:
-  app:
-    taskfile: ./packages/app
-    dir: ./packages/app
 
   manual:
     aliases: [man]
@@ -37,6 +34,26 @@ includes:
 
   # new ones below
 
+  app:
+    taskfile: ./packages/app
+    dir: ./packages/app
+    internal: true
+
+  runtime-wasm:
+    taskfile: ./packages/runtime-wasm
+    dir: ./packages/runtime-wasm
+    internal: true
+
+  parser:
+    taskfile: ./packages/parser
+    dir: ./packages/parser
+    internal: true
+
+  item-system:
+    taskfile: ./packages/item-system
+    dir: ./packages/item-system
+    internal: true
+
   research:
     taskfile: ./packages/research-scripts
     dir: ./packages/research-scripts
@@ -51,15 +68,9 @@ includes:
     dir: ./packages/item-assets
     internal: true
 
-  item-system:
-    taskfile: ./packages/item-system
-    dir: ./packages/item-system
-    internal: true
 
-  parser:
-    taskfile: ./packages/parser
-    dir: ./packages/parser
-    internal: true
+
+
 
 tasks:
   install-cargo-extra-tools:
@@ -89,11 +100,13 @@ tasks:
       - parser:pull-artifacts
 
   check:
-    cmds:
-      - task: localization:check
-      - task: item-assets:check
-      - task: item-system:check
-      - task: parser:check
+    deps:
+      - localization:check
+      - item-assets:check
+      - item-system:check
+      - parser:check
+      - app:check
+
 
   test:
     cmds:

diff --git a/packages/app/.prettierignore b/packages/app/.prettierignore
@@ -0,0 +1,2 @@
+*.yaml
+*.yml
diff --git a/packages/app/README.md b/packages/app/README.md
@@ -15,14 +15,14 @@ If you are developing a production application, we recommend updating the config
 
 ```js
 export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
+    languageOptions: {
+        // other options...
+        parserOptions: {
+            project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+            tsconfigRootDir: import.meta.dirname,
+        },
     },
-  },
-})
+});
 ```
 
 - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
@@ -31,20 +31,20 @@ export default tseslint.config({
 
 ```js
 // eslint.config.js
-import react from 'eslint-plugin-react'
+import react from "eslint-plugin-react";
 
 export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+    // Set the react version
+    settings: { react: { version: "18.3" } },
+    plugins: {
+        // Add the react plugin
+        react,
+    },
+    rules: {
+        // other rules...
+        // Enable its recommended rules
+        ...react.configs.recommended.rules,
+        ...react.configs["jsx-runtime"].rules,
+    },
+});
 ```
diff --git a/packages/app/Taskfile.yml b/packages/app/Taskfile.yml
@@ -1,46 +1,32 @@
 version: '3'
 
+includes:
+  ecma:
+    taskfile: ../mono-dev/task/ecma.yaml
+    internal: true
+
 tasks:
   dev:
     desc: Run frontend app in watch mode
     cmds:
-      - pnpm exec vite --host
-
-  runtime-workex:
-    cmds:
-      - workex -p runtime src/runtime/protocol.ts --lib-path workex --no-lib
+      - task: ecma:vite-dev
 
-  build:
-    desc: Build production bundle
-    cmds:
-      - npx tsc
-      - npx vite build
+  # build:
+  #   desc: Build production bundle
+  #   cmds:
+  #     - npx tsc
+  #     - npx vite build
 
   check:
     desc: Check for errors
     cmds:
-      - task: eslint
-        vars:
-          ESLINT_ARGS: ""
-      - task: prettier
-        vars:
-          PRETTIER_ARGS: --check
+      - task: ecma:tsc-check-build
+      - task: ecma:eslint-check
+      - task: ecma:prettier-check
 
   fix:
     desc: Fix errors
     cmds:
-      - task: prettier
-        vars:
-          PRETTIER_ARGS: --write
-      - task: eslint
-        vars: 
-          ESLINT_ARGS: --fix
+      - task: ecma:eslint-fix
+      - task: ecma:prettier-fix
 
-  eslint:
-    cmds:
-      - npx eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --cache {{.ESLINT_ARGS}}
-
-  prettier:
-    cmds:
-      - npx prettier "./**/*.{mts,ts,tsx,json,js,jsx,cjs,mjs,css,html}" {{.PRETTIER_ARGS}}
-
diff --git a/packages/app/eslint.config.js b/packages/app/eslint.config.js
@@ -1,28 +1,6 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import { config } from "mono-dev/eslint";
 
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+export default config({
+    ignores: ["dist"],
+    tsconfigRootDir: import.meta.dirname,
+});
diff --git a/packages/app/icon.ts b/packages/app/icon.ts
@@ -1,5 +1,5 @@
-scale(1)
-unit(1)
+scale(1);
+unit(1);
 
 const color_core1 = "#F0C83D83";
 const color_core2 = "#FE8F0088";
@@ -17,14 +17,14 @@ function render_core(t: Point) {
     const side_cut = point(3, 0, 3).sized(8, 14, 8);
     const top_cut = point(3, 3, 0).sized(8, 8, 14);
 
-    const corner = point(0,0,0).sized(2,2,2);
+    const corner = point(0, 0, 0).sized(2, 2, 2);
     const corner2 = corner.translated("x", 12).union(corner);
     const corner4 = corner2.translated("y", 12).union(corner2);
     const corner8 = corner4.translated("z", 12).union(corner4);
 
-    const core = point(1,1,1).sized(12,12,12);
-    const core_in = point(2,2,2).sized(10,10,10);
-    const core_in2 = point(3,3,3).sized(8,8,8);
+    const core = point(1, 1, 1).sized(12, 12, 12);
+    const core_in = point(2, 2, 2).sized(10, 10, 10);
+    const core_in2 = point(3, 3, 3).sized(8, 8, 8);
 
     const center_pillar_out = point(0, 5, 5).sized(14, 4, 4);
     const center_pillar_in = point(0, 6, 6).sized(14, 2, 2);
@@ -35,11 +35,8 @@ function render_core(t: Point) {
         .translated(t)
         .render(color_shell3);
 
-    center_pillar_in
-        .difference(core)
-        .translated(t)
-        .render(color_light)
-
+    center_pillar_in.difference(core).translated(t).render(color_light);
+
     pillar4
         .difference(corner8)
         .difference(pillar_cut)
@@ -49,47 +46,39 @@ function render_core(t: Point) {
         .translated(t)
         .render(color_shell2);
 
-    core
-        .difference(corner8)
-        .translated(t)
-        .render(color_core1)
+    core.difference(corner8).translated(t).render(color_core1);
 
-    core_in.translated(t).render(color_core2)
-    core_in2.translated(t).render(color_core3)
+    core_in.translated(t).render(color_core2);
+    core_in2.translated(t).render(color_core3);
 
-    core.intersection(corner8)
-        .translated(t)
-        .render(color_shell2)
+    core.intersection(corner8).translated(t).render(color_shell2);
 }
 
 function render_ring(x: number, width: number) {
     const center_cut = point(0, 1, 1).sized(14, 16, 16);
     const middle_ring = point(x, 0, 0).sized(width, 18, 18);
 
-    middle_ring
-        .difference(center_cut)
-        .render(color_light)
+    middle_ring.difference(center_cut).render(color_light);
 }
 
 function render_hring() {
-    const center_cut = point(1,1,1).sized(16,18,18);
-    const ring = point(0, 0, 7).sized(18,20,3);
-    const ring2 = point(0, 0, 8).sized(18,20,1);
+    const center_cut = point(1, 1, 1).sized(16, 18, 18);
+    const ring = point(0, 0, 7).sized(18, 20, 3);
+    const ring2 = point(0, 0, 8).sized(18, 20, 1);
 
-    ring
-        .difference(center_cut)
+    ring.difference(center_cut)
         //.difference(ring2)
         .translated(-1, 0, 0)
-        .render(color_shell1)
+        .render(color_shell1);
 
     // ring2
     //     .difference(center_cut)
     //     .translated(-1, 0, 0)
     //     .render(color_shell2)
 }
 
-render_core(point(0,2,2))
+render_core(point(0, 2, 2));
 //render_ring(2, 1)
-render_ring(6, 2)
+render_ring(6, 2);
 //render_ring(11, 1)
-render_hring()
+render_hring();
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -1,33 +1,33 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-        <meta name="mobile-web-app-capable" content="yes">
-        <meta name="theme-color" content="#FF0000">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="theme-color" content="#FF0000" />
         <!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
         <!-- <link ref="manifest" href="/manifest.json" /> -->
-    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>IST Simulator</title>
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>IST Simulator</title>
         <style>
-:root {
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-body {
-    margin: 0;
-    width: 100vw;
-}
+            :root {
+                font-synthesis: none;
+                text-rendering: optimizeLegibility;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+            }
+            body {
+                margin: 0;
+                width: 100vw;
+            }
 
-#-root- {
-    width: 100vw;
-}
+            #-root- {
+                width: 100vw;
+            }
         </style>
-  </head>
-    <body style="height: 100vh;overflow: hidden">
-    <div id="-root-" style="height: 100vh"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    </head>
+    <body style="height: 100vh; overflow: hidden">
+        <div id="-root-" style="height: 100vh"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>