[webapp] Use useStore

.eslintrc.js

@@ -49,4 +49,12 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    {
+      files: ['packages/zombie/**/*'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
 };

packages/toolbox/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@mantou/ecs": "^0.0.1",
     "@mantou/gem": "^1.7.5",
-    "duoyun-ui": "^1.1.5",
+    "duoyun-ui": "^1.1.9",
     "jszip": "^3.10.0",
     "qoijs": "^1.0.0"
   },

packages/toolbox/src/pages/audio.ts

@@ -1,7 +1,7 @@
 import { GemElement, html, adoptedStyle, customElement, createCSSSheet, css } from '@mantou/gem';
 import { theme } from 'duoyun-ui/lib/theme';
 import { utf8ToB64 } from 'duoyun-ui/lib/encode';
-import { throttle } from 'duoyun-ui/lib/utils';
+import { throttle } from 'duoyun-ui/lib/timer';
 import { getInputItemType, getInputItemValue, normalizeFilename, sampleToChart, saveFile } from 'src/utils';
 import QOI from 'qoijs';
 import JSZip from 'jszip';
@@ -223,7 +223,7 @@ export class PAudioElement extends GemElement<State> {
                 </dy-action-text>
               `,
           )}
-        </dy-file-picer>
+        </dy-file-picker>
       </dy-drop-area>
       <dy-form @itemchange=${this.#onArgChange} .inline=${true}>
         ${Object.entries(args).map(([k, v]) =>

packages/toolbox/src/pages/font.ts

@@ -3,7 +3,7 @@ import { theme } from 'duoyun-ui/lib/theme';
 import { getCorSrc, getInputItemType, getInputItemValue, normalizeFilename, saveFile } from 'src/utils';
 import QOI from 'qoijs';
 import { Font, encodeFont } from '@mantou/ecs';
-import { sleep } from 'duoyun-ui/lib/utils';
+import { sleep } from 'duoyun-ui/lib/timer';
 
 import type { DuoyunFormItemElement } from 'duoyun-ui/elements/form';
 import type { DuoyunSelectElement } from 'duoyun-ui/elements/select';

packages/webapp/package.json

@@ -19,7 +19,7 @@
     "@nesbox/fceux": "^0.0.1",
     "@nesbox/mtapp": "^0.0.1",
     "@nesbox/wasm4": "^0.0.1",
-    "duoyun-ui": "^1.1.8",
+    "duoyun-ui": "^1.1.9",
     "front-matter": "^4.0.2",
     "graphql": "^16.2.0",
     "jszip": "^3.10.0",

packages/webapp/src/app.ts

@@ -16,9 +16,9 @@ import {
 import { hotkeys } from 'duoyun-ui/lib/hotkeys';
 import { Loadbar } from 'duoyun-ui/elements/page-loadbar';
 import { createPath } from '@mantou/gem/elements/route';
-import { routes, locationStore } from 'src/routes';
 import { DuoyunRouteElement } from 'duoyun-ui/elements/route';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
+import { routes, locationStore } from 'src/routes';
 
 import { preventDefault } from 'src/utils/common';
 import { paramKeys, queryKeys, viewTransitionName } from 'src/constants';
@@ -239,7 +239,7 @@ export class AppRootElement extends GemElement {
         .open=${!!configure.settingsState}
         @close=${toggleSettingsState}
       >
-        <m-settings slot="body"></m-settings>
+        <m-settings></m-settings>
       </dy-modal>
 
       <dy-modal

packages/webapp/src/configure.ts

@@ -1,7 +1,7 @@
-import { createStore, updateStore } from '@mantou/gem';
+import { useStore } from '@mantou/gem';
 import { isMac, getDisplayKey } from 'duoyun-ui/lib/hotkeys';
 import { Modify } from 'duoyun-ui/lib/types';
-import { createCacheStore } from 'duoyun-ui/lib/utils';
+import { useCacheStore } from 'duoyun-ui/lib/utils';
 
 import {
   dispatchGlobalEvent,
@@ -177,14 +177,14 @@ interface Configure {
 }
 
 addEventListener('focus', () => {
-  updateStore(configure, { windowHasFocus: true });
+  updateConfigureStore({ windowHasFocus: true });
 });
 
 addEventListener('blur', () => {
-  updateStore(configure, { windowHasFocus: false });
+  updateConfigureStore({ windowHasFocus: false });
 });
 
-export const [configure] = createCacheStore<Configure>(
+export const [configure, updateConfigureStore] = useCacheStore<Configure>(
   localStorageKeys.CONFIGURE_LOCAL_STORAGE_KEY,
   {
     windowHasFocus: document.hasFocus(),
@@ -201,41 +201,41 @@ export function getShortcut(command: keyof typeof defaultShortcuts, isDisplay =
 }
 
 export const deleteUser = () => {
-  updateStore(configure, { user: undefined, profile: undefined });
+  updateConfigureStore({ user: undefined, profile: undefined });
 };
 
 export const toggleScreencastMode = () => {
-  updateStore(configure, { screencastMode: !configure.screencastMode });
+  updateConfigureStore({ screencastMode: !configure.screencastMode });
 };
 
 export const toggleFriendListState = () => {
-  updateStore(configure, { friendListState: !configure.friendListState });
+  updateConfigureStore({ friendListState: !configure.friendListState });
 };
 
 export const toggleSettingsState = () => {
-  updateStore(configure, { settingsState: !configure.settingsState });
+  updateConfigureStore({ settingsState: !configure.settingsState });
   if (!configure.settingsState) dispatchGlobalEvent(globalEvents.CLOSE_SETTINGS, null);
 };
 
 export const toggleSideNavState = (sideNavState = !configure.sideNavState) => {
-  updateStore(configure, { sideNavState });
+  updateConfigureStore({ sideNavState });
 };
 
 export const toggleSearchState = () => {
-  updateStore(configure, {
+  updateConfigureStore({
     searchState: !configure.searchState,
     searchCommand: configure.searchState ? undefined : configure.searchCommand,
   });
 };
 
 export const setSearchCommand = (command: SearchCommand | null) => {
-  updateStore(configure, { searchCommand: command || undefined, searchState: true });
+  updateConfigureStore({ searchCommand: command || undefined, searchState: true });
 };
 
 export const setNesFile = (file?: File) => {
-  updateStore(configure, { openNesFile: file });
+  updateConfigureStore({ openNesFile: file });
 };
 
-export const navStore = createStore({
+export const [navStore, updateNavStore] = useStore({
   room: false,
 });

packages/webapp/src/elements/canvas.ts

@@ -13,9 +13,9 @@ import {
 import { BaseDirectory } from '@tauri-apps/api/fs';
 import { Time } from 'duoyun-ui/lib/time';
 
+import { logger } from 'src/logger';
 import { saveFile } from 'src/utils/common';
 import { VideoFilter } from 'src/constants';
-import { logger } from 'src/logger';
 import normalVert from 'src/shaders/normal.vert?raw';
 
 import 'duoyun-ui/elements/reflect';

packages/webapp/src/elements/fps.ts

@@ -5,9 +5,8 @@ import {
   customElement,
   createCSSSheet,
   css,
-  createStore,
   connectStore,
-  updateStore,
+  useStore,
 } from '@mantou/gem';
 
 import { theme } from 'src/theme';
@@ -20,7 +19,7 @@ export const fpsStyle = createCSSSheet(css`
   }
 `);
 
-const store = createStore({
+const [store, update] = useStore({
   min: 0,
   max: 0,
   fps: 0,
@@ -53,12 +52,7 @@ const tick = () => {
   });
   const avgFps = Math.round(sum / frames.length);
 
-  updateStore(store, {
-    fps,
-    avgFps,
-    min,
-    max,
-  });
+  update({ fps, avgFps, min, max });
 
   timer = requestAnimationFrame(tick);
 };

packages/webapp/src/elements/license.ts

@@ -5,16 +5,15 @@ import {
   customElement,
   createCSSSheet,
   css,
-  createStore,
   connectStore,
-  updateStore,
+  useStore,
 } from '@mantou/gem';
 
 import { getCorSrc } from 'src/utils/common';
 
 import 'duoyun-ui/elements/loading';
 
-const store = createStore({ license: '' });
+const [store, update] = useStore({ license: '' });
 
 const style = createCSSSheet(css`
   :host {
@@ -32,7 +31,7 @@ export class NesboxLicenseElement extends GemElement {
     fetch(getCorSrc('https://raw.githubusercontent.com/mantou132/nesbox/dev/LICENSE'))
       .then((res) => res.text())
       .then((license) => {
-        updateStore(store, {
+        update({
           license: license
             .split(/\n{2,}/)
             .map((line) => line.replaceAll('\n', ' '))

packages/webapp/src/gamepad.ts

@@ -99,7 +99,7 @@ function readGamepad() {
   }
 }
 
-export const listener = () => {
+export const listenerGamepad = () => {
   if ([...navigator.getGamepads()].find((e) => e?.connected)) {
     readGamepad();
   } else {
@@ -111,46 +111,43 @@ export const listener = () => {
 };
 
 export const startKeyboardSimulation = () => {
+  const map = Object.entries({
+    // scroll
+    w: GamepadBtnIndex.Up,
+    a: GamepadBtnIndex.Left,
+    s: GamepadBtnIndex.Down,
+    d: GamepadBtnIndex.Right,
+    // select/start
+    f: GamepadBtnIndex.Select,
+    h: GamepadBtnIndex.Start,
+    // detail/switch
+    j: GamepadBtnIndex.B,
+    k: GamepadBtnIndex.A,
+    space: GamepadBtnIndex.A,
+    // exit
+    4: GamepadBtnIndex.FrontLeftTop,
+    // settings
+    5: GamepadBtnIndex.FrontRightTop,
+    // page/tab navigation
+    6: GamepadBtnIndex.FrontLeftBottom,
+    7: GamepadBtnIndex.FrontRightBottom,
+  });
   addEventListener(
     'keydown',
-    hotkeys({
-      // scroll
-      w: () => dispatchPressEvent(GamepadBtnIndex.Up),
-      a: () => dispatchPressEvent(GamepadBtnIndex.Left),
-      s: () => dispatchPressEvent(GamepadBtnIndex.Down),
-      d: () => dispatchPressEvent(GamepadBtnIndex.Right),
-      // select/start
-      f: () => dispatchPressEvent(GamepadBtnIndex.Select),
-      h: () => dispatchPressEvent(GamepadBtnIndex.Start),
-      // detail/switch
-      j: () => dispatchPressEvent(GamepadBtnIndex.B),
-      k: () => dispatchPressEvent(GamepadBtnIndex.A),
-      space: () => dispatchPressEvent(GamepadBtnIndex.A),
-      // exit
-      4: () => dispatchPressEvent(GamepadBtnIndex.FrontLeftTop),
-      // settings
-      5: () => dispatchPressEvent(GamepadBtnIndex.FrontRightTop),
-      // page/tab navigation
-      6: () => dispatchPressEvent(GamepadBtnIndex.FrontLeftBottom),
-      7: () => dispatchPressEvent(GamepadBtnIndex.FrontRightBottom),
-    }),
+    hotkeys(
+      map.reduce(
+        (p, [key, btn]) => Object.assign(p, { [key]: () => dispatchPressEvent(btn) }),
+        {} as Record<string, () => void>,
+      ),
+    ),
   );
   addEventListener(
     'keyup',
-    hotkeys({
-      w: () => dispatchReleaseEvent(GamepadBtnIndex.Up),
-      a: () => dispatchReleaseEvent(GamepadBtnIndex.Left),
-      s: () => dispatchReleaseEvent(GamepadBtnIndex.Down),
-      d: () => dispatchReleaseEvent(GamepadBtnIndex.Right),
-      f: () => dispatchReleaseEvent(GamepadBtnIndex.Select),
-      h: () => dispatchReleaseEvent(GamepadBtnIndex.Start),
-      j: () => dispatchReleaseEvent(GamepadBtnIndex.B),
-      k: () => dispatchReleaseEvent(GamepadBtnIndex.A),
-      space: () => dispatchReleaseEvent(GamepadBtnIndex.A),
-      4: () => dispatchReleaseEvent(GamepadBtnIndex.FrontLeftTop),
-      5: () => dispatchReleaseEvent(GamepadBtnIndex.FrontRightTop),
-      6: () => dispatchReleaseEvent(GamepadBtnIndex.FrontLeftBottom),
-      7: () => dispatchReleaseEvent(GamepadBtnIndex.FrontRightBottom),
-    }),
+    hotkeys(
+      map.reduce(
+        (p, [key, btn]) => Object.assign(p, { [key]: () => dispatchReleaseEvent(btn) }),
+        {} as Record<string, () => void>,
+      ),
+    ),
   );
 };