Merge pull request #745 from boomwwww/refactor/html-and-iife

MakinoharaShoko · web-flow · commit f19e8db0ee8c · 2025-08-29T00:11:57.000+08:00
refactor: format index.html and refactor load IIFE plugin
diff --git a/packages/webgal/index.html b/packages/webgal/index.html
diff --git a/packages/webgal/src/App.tsx b/packages/webgal/src/App.tsx
@@ -1,24 +1,22 @@
+import { useEffect } from 'react';
+import { initializeScript } from '@/Core/initializeScript';
+import Translation from '@/UI/Translation/Translation';
 import { Stage } from '@/Stage/Stage';
-import { Backlog } from '@/UI/Backlog/Backlog';
 import { BottomControlPanel } from '@/UI/BottomControlPanel/BottomControlPanel';
 import { BottomControlPanelFilm } from '@/UI/BottomControlPanel/BottomControlPanelFilm';
-import DevPanel from '@/UI/DevPanel/DevPanel';
-import { Extra } from '@/UI/Extra/Extra';
-import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
+import { Backlog } from '@/UI/Backlog/Backlog';
+import Title from '@/UI/Title/Title';
 import Logo from '@/UI/Logo/Logo';
+import { Extra } from '@/UI/Extra/Extra';
 import Menu from '@/UI/Menu/Menu';
-import { PanicOverlay } from '@/UI/PanicOverlay/PanicOverlay';
-import Title from '@/UI/Title/Title';
-import Translation from '@/UI/Translation/Translation';
-import { useEffect } from 'react';
-import { initializeScript } from './Core/initializeScript';
+import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
+import PanicOverlay from '@/UI/PanicOverlay/PanicOverlay';
+import DevPanel from '@/UI/DevPanel/DevPanel';
 
-function App() {
+export default function App() {
   useEffect(() => {
     initializeScript();
   }, []);
-
-  // Provider用于对各组件提供状态
   return (
     <div className="App">
       <Translation />
@@ -36,5 +34,3 @@ function App() {
     </div>
   );
 }
-
-export default App;
diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -1,25 +1,16 @@
-import * as PIXI from 'pixi.js';
-import { v4 as uuid } from 'uuid';
 import { webgalStore } from '@/store/store';
+import { IEffect, IFigureAssociatedAnimation, IFigureMetadata, ITransform } from '@/store/stageInterface';
 import { setStage, stageActions } from '@/store/stageReducer';
-import cloneDeep from 'lodash/cloneDeep';
-import {
-  baseTransform,
-  IEffect,
-  IFigureAssociatedAnimation,
-  IFigureMetadata,
-  ITransform,
-} from '@/store/stageInterface';
-import { logger } from '@/Core/util/logger';
+import { Live2D, WebGAL } from '@/Core/WebGAL';
+import { baseBlinkParam, baseFocusParam, BlinkParam, FocusParam } from '@/Core/live2DCore';
 import { isIOS } from '@/Core/initializeScript';
 import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
-import { Live2D, WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 import { addSpineBgImpl, addSpineFigureImpl } from '@/Core/controller/stage/pixi/spine';
-import { baseBlinkParam, baseFocusParam, BlinkParam, FocusParam } from '@/Core/live2DCore';
-import { isEqual } from 'lodash';
-// import { figureCash } from '@/Core/gameScripts/vocal/conentsCash'; // 如果要使用 Live2D，取消这里的注释
-// import { Live2DModel, SoundManager } from 'pixi-live2d-display-webgal'; // 如果要使用 Live2D，取消这里的注释
+import { SCREEN_CONSTANTS } from '@/Core/util/constants';
+import { logger } from '@/Core/util/logger';
+import { v4 as uuid } from 'uuid';
+import { cloneDeep, isEqual } from 'lodash';
+import * as PIXI from 'pixi.js';
 
 export interface IAnimationObject {
   setStartState: Function;
@@ -1077,7 +1068,6 @@ export default class PixiStage {
     } catch (error) {
       console.error('Failed to load figureCash:', error);
     }
-    Live2D.initLive2D();
   }
 }
 
diff --git a/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts b/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
@@ -1,5 +1,5 @@
 export function setEbg(url: string) {
-  const ebg = document.getElementById('ebg');
+  const ebg = document.querySelector('.html-body__effect-background') as HTMLElement;
   if (ebg) {
     ebg.style.backgroundImage = `url("${url}")`;
   }
diff --git a/packages/webgal/src/Core/live2DCore.ts b/packages/webgal/src/Core/live2DCore.ts
@@ -1,6 +1,4 @@
-/**
- * 眨眼参数，毫秒
- */
+/** 眨眼参数，毫秒 */
 export interface BlinkParam {
   blinkInterval: number; // 眨眼间隔
   blinkIntervalRandom: number; // 眨眼间隔随机范围
@@ -49,27 +47,38 @@ export class Live2DCore {
     }
   }
 
-  /**
-   * 初始化 Live 2D
-   * 出于某些原因，直接在此类的构造函数初始化
-   * 会导致加载 Live 2D 失败
-   */
-  public async initLive2D() {
-    try {
-      const { Live2DModel, SoundManager, config } = await import('pixi-live2d-display-webgal');
-      this.Live2DModel = Live2DModel;
-      this.SoundManager = SoundManager;
-      this.Config = config;
-      this.isAvailable = true;
-      console.info('live2d lib load success');
-      this.initConfig();
-    } catch (error) {
-      this.isAvailable = false;
-      console.info('live2d lib load failed', error);
-    }
+  public constructor() {
+    this.initLive2D();
+  }
+
+  public initLive2D() {
+    // @ts-expect-error live2dPromise is a global variable
+    (window.live2dPromise as Promise<[boolean, boolean]>)
+      .then(async ([live2d2dAvailable, live2d4Available]) => {
+        const _isAvailable = live2d2dAvailable && live2d4Available;
+        if (!_isAvailable) {
+          console.warn('live2d plugin load failed');
+          return;
+        }
+        const { Live2DModel, SoundManager, config } = await import('pixi-live2d-display-webgal');
+        this.Live2DModel = Live2DModel;
+        this.SoundManager = SoundManager;
+        this.Config = config;
+        this.isAvailable = true;
+        console.log('Live2D plugin load success');
+        this.initConfig();
+      })
+      .catch((error) => {
+        this.isAvailable = false;
+        console.warn('Live2D plugin load failed', error);
+      })
+      .finally(() => {
+        // @ts-expect-error live2dPromise is a global variable
+        delete window.live2dPromise;
+      });
   }
 
-  // 初始化配置
+  /** 初始化配置 */
   private initConfig() {
     this.Config.legacyExpressionBlendMode = this._legacyExpressionBlendMode;
   }
diff --git a/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts b/packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts
@@ -1,19 +1,14 @@
-import axios from 'axios';
-import { logger } from '../logger';
-import { getStorage, getStorageAsync, setStorage } from '../../controller/storage/storageController';
 import { webgalStore } from '@/store/store';
-import { initKey } from '@/Core/controller/storage/fastSaveLoad';
-import { WebgalParser } from '@/Core/parser/sceneParser';
+import { setGlobalVar } from '@/store/userDataReducer';
+import { setEnableAppreciationMode } from '@/store/GUIReducer';
 import { Live2D, WebGAL } from '@/Core/WebGAL';
+import { WebgalParser } from '@/Core/parser/sceneParser';
+import { getStorageAsync, setStorage } from '@/Core/controller/storage/storageController';
+import { initKey } from '@/Core/controller/storage/fastSaveLoad';
 import { getFastSaveFromStorage, getSavesFromStorage } from '@/Core/controller/storage/savesController';
-import { setGlobalVar } from '@/store/userDataReducer';
-import { setEnableAppreciationMode, setVisibility } from '@/store/GUIReducer';
+import { logger } from '@/Core/util/logger';
+import axios from 'axios';
 
-declare global {
-  interface Window {
-    renderPromise?: Function;
-  }
-}
 /**
  * 获取游戏信息
  * @param url 游戏信息路径
@@ -66,9 +61,8 @@ export const infoFetcher = (url: string) => {
         }
       }
     });
-
-    window?.renderPromise?.();
-    delete window.renderPromise;
+    // @ts-expect-error renderPromiseResolve is a global variable
+    window.renderPromiseResolve();
     setStorage();
   });
 };
diff --git a/packages/webgal/src/Core/util/syncWithEditor/syncWithOrigine.ts b/packages/webgal/src/Core/util/syncWithEditor/syncWithOrigine.ts
@@ -1,16 +1,15 @@
-import { resetStage } from '@/Core/controller/stage/resetStage';
-import { assetSetter, fileType } from '@/Core/util/gameAssetsAccess/assetSetter';
-import { sceneFetcher } from '@/Core/controller/scene/sceneFetcher';
-import { sceneParser } from '@/Core/parser/sceneParser';
-import { logger } from '../logger';
 import { webgalStore } from '@/store/store';
 import { setVisibility } from '@/store/GUIReducer';
-import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
-
 import { WebGAL } from '@/Core/WebGAL';
-import cloneDeep from 'lodash/cloneDeep';
+import { resetStage } from '@/Core/controller/stage/resetStage';
+import { sceneFetcher } from '@/Core/controller/scene/sceneFetcher';
 import { IScene } from '@/Core/controller/scene/sceneInterface';
 import { jumpFromBacklog } from '@/Core/controller/storage/jumpFromBacklog';
+import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
+import { sceneParser } from '@/Core/parser/sceneParser';
+import { logger } from '@/Core/util/logger';
+import { assetSetter, fileType } from '@/Core/util/gameAssetsAccess/assetSetter';
+import cloneDeep from 'lodash/cloneDeep';
 
 let syncFastTimeout: ReturnType<typeof setTimeout> | undefined;
 
@@ -20,7 +19,7 @@ export const syncWithOrigine = (sceneName: string, sentenceId: number, experment
   dispatch(setVisibility({ component: 'showTitle', visibility: false }));
   dispatch(setVisibility({ component: 'showMenuPanel', visibility: false }));
   dispatch(setVisibility({ component: 'isShowLogo', visibility: false }));
-  const title = document.getElementById('Title_enter_page');
+  const title = document.querySelector('.html-body__title-enter') as HTMLElement;
   if (title) {
     title.style.display = 'none';
   }
diff --git a/packages/webgal/src/Core/util/syncWithEditor/webSocketFunc.ts b/packages/webgal/src/Core/util/syncWithEditor/webSocketFunc.ts
@@ -1,14 +1,14 @@
-import { logger } from '../logger';
-import { syncWithOrigine } from '@/Core/util/syncWithEditor/syncWithOrigine';
 import { DebugCommand, IComponentVisibilityCommand, IDebugMessage } from '@/types/debugProtocol';
-import { WebGAL } from '@/Core/WebGAL';
 import { webgalStore } from '@/store/store';
+import { setFontOptimization, setVisibility } from '@/store/GUIReducer';
+import { WebGAL } from '@/Core/WebGAL';
 import { sceneParser, WebgalParser } from '@/Core/parser/sceneParser';
+import { ISentence } from '@/Core/controller/scene/sceneInterface';
 import { runScript } from '@/Core/controller/gamePlay/runScript';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
-import { setFontOptimization, setVisibility } from '@/store/GUIReducer';
 import { resetStage } from '@/Core/controller/stage/resetStage';
-import { ISentence } from '@/Core/controller/scene/sceneInterface';
+import { logger } from '@/Core/util/logger';
+import { syncWithOrigine } from './syncWithOrigine';
 
 export const webSocketFunc = () => {
   const loc: string = window.location.hostname;
@@ -69,7 +69,7 @@ export const webSocketFunc = () => {
       });
     }
     if (message.command === DebugCommand.REFETCH_TEMPLATE_FILES) {
-      const title = document.getElementById('Title_enter_page');
+      const title = document.querySelector('.html-body__title-enter') as HTMLElement;
       if (title) {
         title.style.display = 'none';
       }
@@ -102,7 +102,7 @@ export const webSocketFunc = () => {
       webgalStore.dispatch(setFontOptimization(command === 'true'));
     }
   };
-  socket.onerror = (e) => {
+  socket.onerror = () => {
     logger.info('当前没有连接到 Terre 编辑器');
   };
 };
diff --git a/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx b/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx
@@ -1,11 +1,11 @@
-import styles from './panicOverlay.module.scss';
 import { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
-import { PanicYoozle } from '@/UI/PanicOverlay/PanicYoozle/PanicYoozle';
+import PanicYoozle from './PanicYoozle/PanicYoozle';
+import styles from './panicOverlay.module.scss';
 
-export const PanicOverlay = () => {
+export default function PanicOverlay() {
   const GUIStore = useSelector((state: RootState) => state.GUI);
   const [showOverlay, setShowOverlay] = useState(false);
   const globalVars = useSelector((state: RootState) => state.userData.globalGameVar);
@@ -17,6 +17,6 @@ export const PanicOverlay = () => {
   }, [GUIStore.showPanicOverlay, hidePanic]);
   return ReactDOM.createPortal(
     <div className={showOverlay ? styles.panic_overlay_main : ''}>{showOverlay && <PanicYoozle />}</div>,
-    document.querySelector('div#panic-overlay')!,
+    document.querySelector('#html-body__panic-overlay')!,
   );
-};
+}
diff --git a/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx b/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx
@@ -1,7 +1,7 @@
-import styles from './panicYoozle.module.scss';
 import { useEffect } from 'react';
+import styles from './panicYoozle.module.scss';
 
-export const PanicYoozle = () => {
+export default function PanicYoozle() {
   useEffect(() => {
     const panicTitle = 'Yoozle Search';
     const originalTitle = document.title;
@@ -33,4 +33,4 @@ export const PanicYoozle = () => {
       </div>
     </div>
   );
-};
+}
diff --git a/packages/webgal/src/UI/Title/Title.tsx b/packages/webgal/src/UI/Title/Title.tsx
@@ -1,25 +1,20 @@
-import { FC, useEffect } from 'react';
-import styles from './title.module.scss';
-import { playBgm } from '@/Core/controller/stage/playBgm';
-import { continueGame, startGame } from '@/Core/controller/gamePlay/startContinueGame';
 import { useDispatch, useSelector } from 'react-redux';
-import { RootState, webgalStore } from '@/store/store';
+import { RootState } from '@/store/store';
+import { fullScreenOption } from '@/store/userDataInterface';
 import { setMenuPanelTag, setVisibility } from '@/store/GUIReducer';
 import { MenuPanelTag } from '@/store/guiInterface';
 import useTrans from '@/hooks/useTrans';
-// import { resize } from '@/Core/util/resize';
-import { hasFastSaveRecord, loadFastSaveGame } from '@/Core/controller/storage/fastSaveLoad';
 import useSoundEffect from '@/hooks/useSoundEffect';
 import useApplyStyle from '@/hooks/useApplyStyle';
-import { fullScreenOption } from '@/store/userDataInterface';
 import { keyboard } from '@/hooks/useHotkey';
 import useConfigData from '@/hooks/useConfigData';
+import { playBgm } from '@/Core/controller/stage/playBgm';
+import { continueGame, startGame } from '@/Core/controller/gamePlay/startContinueGame';
 import { showGlogalDialog } from '../GlobalDialog/GlobalDialog';
-/**
- * 标题页
- * @constructor
- */
-const Title: FC = () => {
+import styles from './title.module.scss';
+
+/** 标题页 */
+export default function Title() {
   const userDataState = useSelector((state: RootState) => state.userData);
   const GUIState = useSelector((state: RootState) => state.GUI);
   const dispatch = useDispatch();
@@ -40,7 +35,7 @@ const Title: FC = () => {
     <>
       {GUIState.showTitle && <div className={applyStyle('Title_backup_background', styles.Title_backup_background)} />}
       <div
-        id="enter_game_target"
+        className="title__enter-game-target"
         onClick={() => {
           playBgm(GUIState.titleBgm);
           dispatch(setVisibility({ component: 'isEnterGame', visibility: true }));
@@ -142,6 +137,4 @@ const Title: FC = () => {
       )}
     </>
   );
-};
-
-export default Title;
+}
diff --git a/packages/webgal/src/index.scss b/packages/webgal/src/index.scss
diff --git a/packages/webgal/src/main.tsx b/packages/webgal/src/main.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`export function setEbg(url: string) {`
`2`		`- const ebg = document.getElementById('ebg');`
	`2`	`+ const ebg = document.querySelector('.html-body__effect-background') as HTMLElement;`
`3`	`3`	`if (ebg) {`
`4`	`4`	ebg.style.backgroundImage = `url("${url}")`;
`5`	`5`	`}`