Skip to content

Commit f19e8db

Browse files
MakinoharaShokoMakinoharaShoko
authored
Merge pull request #745 from boomwwww/refactor/html-and-iife
refactor: format index.html and refactor load IIFE plugin
2 parents a067bc3 + 7d44254 commit f19e8db

13 files changed

Lines changed: 446 additions & 501 deletions

File tree

‎packages/webgal/index.html‎

Lines changed: 336 additions & 288 deletions
Large diffs are not rendered by default.

‎packages/webgal/src/App.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1+
import { useEffect } from 'react';
2+
import { initializeScript } from '@/Core/initializeScript';
3+
import Translation from '@/UI/Translation/Translation';
14
import { Stage } from '@/Stage/Stage';
2-
import { Backlog } from '@/UI/Backlog/Backlog';
35
import { BottomControlPanel } from '@/UI/BottomControlPanel/BottomControlPanel';
46
import { BottomControlPanelFilm } from '@/UI/BottomControlPanel/BottomControlPanelFilm';
5-
import DevPanel from '@/UI/DevPanel/DevPanel';
6-
import { Extra } from '@/UI/Extra/Extra';
7-
import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
7+
import { Backlog } from '@/UI/Backlog/Backlog';
8+
import Title from '@/UI/Title/Title';
89
import Logo from '@/UI/Logo/Logo';
10+
import { Extra } from '@/UI/Extra/Extra';
911
import Menu from '@/UI/Menu/Menu';
10-
import { PanicOverlay } from '@/UI/PanicOverlay/PanicOverlay';
11-
import Title from '@/UI/Title/Title';
12-
import Translation from '@/UI/Translation/Translation';
13-
import { useEffect } from 'react';
14-
import { initializeScript } from './Core/initializeScript';
12+
import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
13+
import PanicOverlay from '@/UI/PanicOverlay/PanicOverlay';
14+
import DevPanel from '@/UI/DevPanel/DevPanel';
1515

16-
function App() {
16+
export default function App() {
1717
useEffect(() => {
1818
initializeScript();
1919
}, []);
20-
21-
// Provider用于对各组件提供状态
2220
return (
2321
<div className="App">
2422
<Translation />
@@ -36,5 +34,3 @@ function App() {
3634
</div>
3735
);
3836
}
39-
40-
export default App;

‎packages/webgal/src/Core/controller/stage/pixi/PixiController.ts‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
1-
import * as PIXI from 'pixi.js';
2-
import { v4 as uuid } from 'uuid';
31
import { webgalStore } from '@/store/store';
2+
import { IEffect, IFigureAssociatedAnimation, IFigureMetadata, ITransform } from '@/store/stageInterface';
43
import { setStage, stageActions } from '@/store/stageReducer';
5-
import cloneDeep from 'lodash/cloneDeep';
6-
import {
7-
baseTransform,
8-
IEffect,
9-
IFigureAssociatedAnimation,
10-
IFigureMetadata,
11-
ITransform,
12-
} from '@/store/stageInterface';
13-
import { logger } from '@/Core/util/logger';
4+
import { Live2D, WebGAL } from '@/Core/WebGAL';
5+
import { baseBlinkParam, baseFocusParam, BlinkParam, FocusParam } from '@/Core/live2DCore';
146
import { isIOS } from '@/Core/initializeScript';
157
import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
16-
import { Live2D, WebGAL } from '@/Core/WebGAL';
17-
import { SCREEN_CONSTANTS } from '@/Core/util/constants';
188
import { addSpineBgImpl, addSpineFigureImpl } from '@/Core/controller/stage/pixi/spine';
19-
import { baseBlinkParam, baseFocusParam, BlinkParam, FocusParam } from '@/Core/live2DCore';
20-
import { isEqual } from 'lodash';
21-
// import { figureCash } from '@/Core/gameScripts/vocal/conentsCash'; // 如果要使用 Live2D，取消这里的注释
22-
// import { Live2DModel, SoundManager } from 'pixi-live2d-display-webgal'; // 如果要使用 Live2D，取消这里的注释
9+
import { SCREEN_CONSTANTS } from '@/Core/util/constants';
10+
import { logger } from '@/Core/util/logger';
11+
import { v4 as uuid } from 'uuid';
12+
import { cloneDeep, isEqual } from 'lodash';
13+
import * as PIXI from 'pixi.js';
2314

2415
export interface IAnimationObject {
2516
setStartState: Function;
@@ -1077,7 +1068,6 @@ export default class PixiStage {
10771068
} catch (error) {
10781069
console.error('Failed to load figureCash:', error);
10791070
}
1080-
Live2D.initLive2D();
10811071
}
10821072
}
10831073

‎packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export function setEbg(url: string) {
2-
const ebg = document.getElementById('ebg');
2+
const ebg = document.querySelector('.html-body__effect-background') as HTMLElement;
33
if (ebg) {
44
ebg.style.backgroundImage = `url("${url}")`;
55
}

‎packages/webgal/src/Core/live2DCore.ts‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
/**
2-
* 眨眼参数，毫秒
3-
*/
1+
/** 眨眼参数，毫秒 */
42
export interface BlinkParam {
53
blinkInterval: number; // 眨眼间隔
64
blinkIntervalRandom: number; // 眨眼间隔随机范围
@@ -49,27 +47,38 @@ export class Live2DCore {
4947
}
5048
}
5149

52-
/**
53-
* 初始化 Live 2D
54-
* 出于某些原因，直接在此类的构造函数初始化
55-
* 会导致加载 Live 2D 失败
56-
*/
57-
public async initLive2D() {
58-
try {
59-
const { Live2DModel, SoundManager, config } = await import('pixi-live2d-display-webgal');
60-
this.Live2DModel = Live2DModel;
61-
this.SoundManager = SoundManager;
62-
this.Config = config;
63-
this.isAvailable = true;
64-
console.info('live2d lib load success');
65-
this.initConfig();
66-
} catch (error) {
67-
this.isAvailable = false;
68-
console.info('live2d lib load failed', error);
69-
}
50+
public constructor() {
51+
this.initLive2D();
52+
}
53+
54+
public initLive2D() {
55+
// @ts-expect-error live2dPromise is a global variable
56+
(window.live2dPromise as Promise<[boolean, boolean]>)
57+
.then(async ([live2d2dAvailable, live2d4Available]) => {
58+
const _isAvailable = live2d2dAvailable && live2d4Available;
59+
if (!_isAvailable) {
60+
console.warn('live2d plugin load failed');
61+
return;
62+
}
63+
const { Live2DModel, SoundManager, config } = await import('pixi-live2d-display-webgal');
64+
this.Live2DModel = Live2DModel;
65+
this.SoundManager = SoundManager;
66+
this.Config = config;
67+
this.isAvailable = true;
68+
console.log('Live2D plugin load success');
69+
this.initConfig();
70+
})
71+
.catch((error) => {
72+
this.isAvailable = false;
73+
console.warn('Live2D plugin load failed', error);
74+
})
75+
.finally(() => {
76+
// @ts-expect-error live2dPromise is a global variable
77+
delete window.live2dPromise;
78+
});
7079
}
7180

72-
// 初始化配置
81+
/** 初始化配置 */
7382
private initConfig() {
7483
this.Config.legacyExpressionBlendMode = this._legacyExpressionBlendMode;
7584
}

‎packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
1-
import axios from 'axios';
2-
import { logger } from '../logger';
3-
import { getStorage, getStorageAsync, setStorage } from '../../controller/storage/storageController';
41
import { webgalStore } from '@/store/store';
5-
import { initKey } from '@/Core/controller/storage/fastSaveLoad';
6-
import { WebgalParser } from '@/Core/parser/sceneParser';
2+
import { setGlobalVar } from '@/store/userDataReducer';
3+
import { setEnableAppreciationMode } from '@/store/GUIReducer';
74
import { Live2D, WebGAL } from '@/Core/WebGAL';
5+
import { WebgalParser } from '@/Core/parser/sceneParser';
6+
import { getStorageAsync, setStorage } from '@/Core/controller/storage/storageController';
7+
import { initKey } from '@/Core/controller/storage/fastSaveLoad';
88
import { getFastSaveFromStorage, getSavesFromStorage } from '@/Core/controller/storage/savesController';
9-
import { setGlobalVar } from '@/store/userDataReducer';
10-
import { setEnableAppreciationMode, setVisibility } from '@/store/GUIReducer';
9+
import { logger } from '@/Core/util/logger';
10+
import axios from 'axios';
1111

12-
declare global {
13-
interface Window {
14-
renderPromise?: Function;
15-
}
16-
}
1712
/**
1813
* 获取游戏信息
1914
* @param url 游戏信息路径
@@ -66,9 +61,8 @@ export const infoFetcher = (url: string) => {
6661
}
6762
}
6863
});
69-
70-
window?.renderPromise?.();
71-
delete window.renderPromise;
64+
// @ts-expect-error renderPromiseResolve is a global variable
65+
window.renderPromiseResolve();
7266
setStorage();
7367
});
7468
};

‎packages/webgal/src/Core/util/syncWithEditor/syncWithOrigine.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { resetStage } from '@/Core/controller/stage/resetStage';
2-
import { assetSetter, fileType } from '@/Core/util/gameAssetsAccess/assetSetter';
3-
import { sceneFetcher } from '@/Core/controller/scene/sceneFetcher';
4-
import { sceneParser } from '@/Core/parser/sceneParser';
5-
import { logger } from '../logger';
61
import { webgalStore } from '@/store/store';
72
import { setVisibility } from '@/store/GUIReducer';
8-
import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
9-
103
import { WebGAL } from '@/Core/WebGAL';
11-
import cloneDeep from 'lodash/cloneDeep';
4+
import { resetStage } from '@/Core/controller/stage/resetStage';
5+
import { sceneFetcher } from '@/Core/controller/scene/sceneFetcher';
126
import { IScene } from '@/Core/controller/scene/sceneInterface';
137
import { jumpFromBacklog } from '@/Core/controller/storage/jumpFromBacklog';
8+
import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
9+
import { sceneParser } from '@/Core/parser/sceneParser';
10+
import { logger } from '@/Core/util/logger';
11+
import { assetSetter, fileType } from '@/Core/util/gameAssetsAccess/assetSetter';
12+
import cloneDeep from 'lodash/cloneDeep';
1413

1514
let syncFastTimeout: ReturnType<typeof setTimeout> | undefined;
1615

@@ -20,7 +19,7 @@ export const syncWithOrigine = (sceneName: string, sentenceId: number, experment
2019
dispatch(setVisibility({ component: 'showTitle', visibility: false }));
2120
dispatch(setVisibility({ component: 'showMenuPanel', visibility: false }));
2221
dispatch(setVisibility({ component: 'isShowLogo', visibility: false }));
23-
const title = document.getElementById('Title_enter_page');
22+
const title = document.querySelector('.html-body__title-enter') as HTMLElement;
2423
if (title) {
2524
title.style.display = 'none';
2625
}

‎packages/webgal/src/Core/util/syncWithEditor/webSocketFunc.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { logger } from '../logger';
2-
import { syncWithOrigine } from '@/Core/util/syncWithEditor/syncWithOrigine';
31
import { DebugCommand, IComponentVisibilityCommand, IDebugMessage } from '@/types/debugProtocol';
4-
import { WebGAL } from '@/Core/WebGAL';
52
import { webgalStore } from '@/store/store';
3+
import { setFontOptimization, setVisibility } from '@/store/GUIReducer';
4+
import { WebGAL } from '@/Core/WebGAL';
65
import { sceneParser, WebgalParser } from '@/Core/parser/sceneParser';
6+
import { ISentence } from '@/Core/controller/scene/sceneInterface';
77
import { runScript } from '@/Core/controller/gamePlay/runScript';
88
import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
9-
import { setFontOptimization, setVisibility } from '@/store/GUIReducer';
109
import { resetStage } from '@/Core/controller/stage/resetStage';
11-
import { ISentence } from '@/Core/controller/scene/sceneInterface';
10+
import { logger } from '@/Core/util/logger';
11+
import { syncWithOrigine } from './syncWithOrigine';
1212

1313
export const webSocketFunc = () => {
1414
const loc: string = window.location.hostname;
@@ -69,7 +69,7 @@ export const webSocketFunc = () => {
6969
});
7070
}
7171
if (message.command === DebugCommand.REFETCH_TEMPLATE_FILES) {
72-
const title = document.getElementById('Title_enter_page');
72+
const title = document.querySelector('.html-body__title-enter') as HTMLElement;
7373
if (title) {
7474
title.style.display = 'none';
7575
}
@@ -102,7 +102,7 @@ export const webSocketFunc = () => {
102102
webgalStore.dispatch(setFontOptimization(command === 'true'));
103103
}
104104
};
105-
socket.onerror = (e) => {
105+
socket.onerror = () => {
106106
logger.info('当前没有连接到 Terre 编辑器');
107107
};
108108
};

‎packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import styles from './panicOverlay.module.scss';
21
import { useEffect, useState } from 'react';
32
import ReactDOM from 'react-dom';
43
import { useSelector } from 'react-redux';
54
import { RootState } from '@/store/store';
6-
import { PanicYoozle } from '@/UI/PanicOverlay/PanicYoozle/PanicYoozle';
5+
import PanicYoozle from './PanicYoozle/PanicYoozle';
6+
import styles from './panicOverlay.module.scss';
77

8-
export const PanicOverlay = () => {
8+
export default function PanicOverlay() {
99
const GUIStore = useSelector((state: RootState) => state.GUI);
1010
const [showOverlay, setShowOverlay] = useState(false);
1111
const globalVars = useSelector((state: RootState) => state.userData.globalGameVar);
@@ -17,6 +17,6 @@ export const PanicOverlay = () => {
1717
}, [GUIStore.showPanicOverlay, hidePanic]);
1818
return ReactDOM.createPortal(
1919
<div className={showOverlay ? styles.panic_overlay_main : ''}>{showOverlay && <PanicYoozle />}</div>,
20-
document.querySelector('div#panic-overlay')!,
20+
document.querySelector('#html-body__panic-overlay')!,
2121
);
22-
};
22+
}

‎packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import styles from './panicYoozle.module.scss';
21
import { useEffect } from 'react';
2+
import styles from './panicYoozle.module.scss';
33

4-
export const PanicYoozle = () => {
4+
export default function PanicYoozle() {
55
useEffect(() => {
66
const panicTitle = 'Yoozle Search';
77
const originalTitle = document.title;
@@ -33,4 +33,4 @@ export const PanicYoozle = () => {
3333
</div>
3434
</div>
3535
);
36-
};
36+
}

0 commit comments

Comments
 (0)