feat(overlay): apply new game overlay

renderer/hooks/useCurrent.ts

@@ -16,6 +16,8 @@ const useCurrent = () => {
   const theme = () => themeList()[themeName()];
 
   onMount(() => {
+    window.setIndex = (index: number) => setIndex(index);
+
     const interval = setInterval(() => {
       if (typeof window.index === 'number') {
         setIndex(window.index);
@@ -36,5 +38,6 @@ export default useCurrent;
 declare global {
   interface Window {
     index?: number;
+    setIndex?: (index: number) => void;
   }
 }

renderer/hooks/usePlayingGame.ts

@@ -4,9 +4,9 @@ const usePlayingGame = () => {
   const [gameList, setGameList] = createSignal<number[]>([]);
 
   (async () => {
-    const result = await window.ipcRenderer.invoke('get-registered-process-list') as number[];
+    const result = await window.ipcRenderer.invoke('get-registered-process-list');
 
-    setGameList(result || []);
+    setGameList(result.map((it) => it.pid) || []);
   })();
 
   window.ipcRenderer.on('registered-process-list', (_, data: number[]) => {

renderer/main/App.tsx

@@ -97,7 +97,7 @@ const App = () => {
   const proximityHandles = useProximityStyle();
 
   return (
-    <Show when={view()?.enabled}>
+    <Show when={window.enabled || view()?.enabled}>
       <PlayingInfoProvider>
         <AnchoredView
           class={userCSSSelectors.wrapper}
@@ -116,3 +116,9 @@ const App = () => {
 };
 
 export default App;
+
+declare global {
+  interface Window {
+    enabled?: boolean;
+  }
+}

renderer/settings/containers/GameListContainer.tsx

@@ -118,6 +118,7 @@ const GameListContainer = () => {
 
     const value = list[key][index];
     list[key].splice(index, 1);
+    list[viewName] ??= [];
     list[viewName].push(value);
 
     setGameList(list, false);

src/Application.ts

@@ -26,6 +26,7 @@ import { OverlayManager } from './overlay';
 
 import { DEFAULT_CONFIG } from '../common/constants';
 import { getTranslation } from '../common/intl';
+
 import { Config, GameList, LyricMapper, StyleConfig } from '../common/schema';
 import { getLyricProvider } from '../common/provider';
 import { pure } from '../utils/pure';
@@ -104,7 +105,7 @@ class Application {
         const gamePathList = Object.keys(gameList.get() ?? {});
 
         if (typeof filePath === 'string' && gamePathList.includes(filePath)) {
-          await this.overlayManager.createProcess(processId);
+          await this.overlayManager.createProcess(processId, filePath);
         }
       }, processId, name, filePath);
 
@@ -346,6 +347,10 @@ class Application {
     this.overlayManager.on('unregister-process', () => {
       this.broadcast('registered-process-list', this.overlayManager.registeredProcessList);
     });
+
+    gameList.watch(() => {
+      this.overlayManager.updateGameView();
+    });
   }
 
   initAutoUpdater() {
@@ -529,7 +534,11 @@ class Application {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
     this.broadcastPlugin(event as keyof PluginEventMap, ...args as any);
 
-    this.lyricWindowProviders.forEach((it) => it.window.webContents.send(event, ...args));
+    this.lyricWindowProviders.forEach((it) => {
+      if (it.window.isDestroyed()) return;
+
+      it.window.webContents.send(event, ...args);
+    });
     if (this.overlayManager.windowProvider && !this.overlayManager.windowProvider.window.isDestroyed()) this.overlayManager.windowProvider.window.webContents.send(event, ...args);
     if (this.lyricSearchWindowProvider && !this.lyricSearchWindowProvider.window.isDestroyed()) this.lyricSearchWindowProvider.window.webContents.send(event, ...args);
     if (this.settingWindowProvider && !this.settingWindowProvider.window.isDestroyed()) this.settingWindowProvider.window.webContents.send(event, ...args);
@@ -579,6 +588,7 @@ class Application {
       if (config.views.length < this.lyricWindowProviders.length) {
         isChanged = true;
         this.lyricWindowProviders.forEach((it, index) => {
+          if (it.window.isDestroyed()) return;
           if (index >= config.views.length) it.close();
         });
       }

src/overlay.ts

@@ -16,7 +16,7 @@ let nodeWindowManager: typeof import('node-window-manager') | undefined;
 export class OverlayManager extends EventEmitter {
   private overlay: IOverlay | null = null;
   private provider: OverlayWindowProvider | null = null;
-  private registeredPidList: number[] = [];
+  private registeredProcesses: { pid: number; path: string; }[] = [];
   private scaleFactor = 1.0;
   private markQuit = false;
 
@@ -40,7 +40,7 @@ export class OverlayManager extends EventEmitter {
   }
 
   public get registeredProcessList() {
-    return this.registeredPidList;
+    return this.registeredProcesses;
   }
 
   public injectOverlay() {
@@ -79,7 +79,7 @@ export class OverlayManager extends EventEmitter {
     this.overlay?.stop();
   }
 
-  public async createProcess(pid: number): Promise<boolean> {
+  public async createProcess(pid: number, path: string): Promise<boolean> {
     if (!wql || !nodeWindowManager) return Promise.resolve(false);
     const windowManager = nodeWindowManager.windowManager;
 
@@ -104,7 +104,7 @@ export class OverlayManager extends EventEmitter {
 
         console.log('[Alspotron] try to inject process:', pid);
         let isFirstRun = false;
-        if (this.registeredPidList.length === 0) {
+        if (this.registeredProcesses.length === 0) {
           const window = windowManager.getWindows().find((window) => window.processId === pid);
           if (window) this.scaleFactor = window.getMonitor().getScaleFactor();
 
@@ -114,12 +114,16 @@ export class OverlayManager extends EventEmitter {
         }
 
         for (const window of this.overlay.getTopWindows(true)) {
-          if (window.processId === pid && !this.registeredPidList.includes(pid)) {
+          if (window.processId === pid && !this.registeredProcesses.some((it) => it.pid === pid)) {
             this.overlay.injectProcess(window);
 
-            this.registeredPidList.push(pid);
+            this.registeredProcesses.push({
+              pid,
+              path,
+            });
             this.emit('register-process', pid);
-            this.provider?.setAttachedProcess(this.registeredPidList[0]);
+            this.provider?.setAttachedProcess(this.registeredProcesses[0].pid);
+            this.setGamePath(path);
           }
         }
 
@@ -141,13 +145,31 @@ export class OverlayManager extends EventEmitter {
   }
 
   public deleteProcess(pid: number) {
-    const index = this.registeredPidList.findIndex((it) => it === pid);
-    if (index >= 0) this.registeredPidList.splice(index, 1);
+    const index = this.registeredProcesses.findIndex((it) => it.pid === pid);
+    if (index >= 0) this.registeredProcesses.splice(index, 1);
 
     this.emit('unregister-process', pid, index >= 0);
 
-    if (this.registeredPidList.length <= 0) this.stopOverlay();
-    else this.provider?.setAttachedProcess(this.registeredPidList[0]);
+    if (this.registeredProcesses.length <= 0) this.stopOverlay();
+    else this.provider?.setAttachedProcess(this.registeredProcesses[0].pid);
+  }
+
+  public updateGameView() {
+    if (this.registeredProcesses.length <= 0) return;
+
+    this.setGamePath(this.registeredProcesses[0].path);
+  }
+
+  public setGamePath(path: string) {
+    const list = gameList.get();
+    const viewName = Object.keys(list).find((key) => list[key].some((it) => it.path === path));
+    if (!viewName) return;
+
+    const views = config.get().views;
+    const index = views.findIndex((it) => it.name === viewName);
+    console.log('[Alspotron] set game path:', path, index);
+
+    this.provider?.setIndex(index, true);
   }
 
   private init() {
@@ -182,10 +204,10 @@ export class OverlayManager extends EventEmitter {
   private onProcessCreation(pid: number, _?: string, filePath?: string) {
     if (!wql || !nodeWindowManager) return;
 
-    const gamePathList = Object.keys(gameList.get() ?? {});
+    const gamePathList = Object.values(gameList.get() ?? {}).flat();
 
-    if (typeof filePath === 'string' && gamePathList.includes(filePath)) {
-      this.createProcess(pid);
+    if (typeof filePath === 'string' && gamePathList.some((it) => it.path === filePath)) {
+      this.createProcess(pid, filePath);
     }
   }
 
@@ -210,7 +232,7 @@ export class OverlayManager extends EventEmitter {
       transparent,
       resizable: true,
       maxWidth: window.getBounds().width,
-      maxHeight:  window.getBounds().height,
+      maxHeight: window.getBounds().height,
       minWidth: 100,
       minHeight: 100,
       nativeHandle: window.getNativeWindowHandle().readUInt32LE(0),
@@ -243,7 +265,7 @@ export class OverlayManager extends EventEmitter {
     let isFocused = false;
     let throttle: NodeJS.Timeout | null = null;
     const onUpdate = () => {
-      const targetWindow = windowManager.getWindows().find((window) => window.processId === this.registeredPidList[0]);
+      const targetWindow = windowManager.getWindows().find((window) => window.processId === this.registeredProcesses[0].pid);
       const newScaleFactor = targetWindow?.getMonitor().getScaleFactor();
 
       if (typeof newScaleFactor === 'number') this.scaleFactor = newScaleFactor;

src/window/lyric.ts

@@ -48,7 +48,7 @@ export class LyricWindowProvider extends EventEmitter implements WindowProvider
       focusable: config.get().streamingMode,
       skipTaskbar: !config.get().streamingMode,
     }));
-    this.window.webContents.executeJavaScript(`window.index = ${index};`);
+    this.window.webContents.executeJavaScript(`window.index = ${index};window.setIndex?.(${index});`);
 
     Menu.setApplicationMenu(null);
 
@@ -73,6 +73,12 @@ export class LyricWindowProvider extends EventEmitter implements WindowProvider
     config.watch(this.onUpdateWindowConfig);
   }
 
+  setIndex(index: number, force = false) {
+    this.index = index;
+    this.window.webContents.executeJavaScript(`window.index = ${index};window.setIndex?.(${index});${force ? 'window.enabled = true' : ''}`);
+    this.updateWindowConfig();
+  }
+
   close() {
     screen.removeListener('display-metrics-changed', this.onUpdateWindowConfig);
     screen.removeListener('display-added', this.onUpdateWindowConfig);