Skip to content

Commit 92d38ff

Browse files
author
Hardy--Lee
committed
feat: redesign all ui
1 parent 22084e9 commit 92d38ff

File tree

116 files changed

+5397
-4644
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

116 files changed

+5397
-4644
lines changed

‎packages/webgal/index.html‎

Lines changed: 38 additions & 239 deletions
Original file line numberDiff line numberDiff line change
@@ -2,207 +2,48 @@
22
<html lang="zh-Hans">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/x-icon" href="/icons/favicon.ico" />
6-
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
7-
<link rel="manifest" href="/manifest.json" />
5+
<link rel="icon" type="image/x-icon" href="./icons/favicon.ico" />
6+
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
7+
<link rel="manifest" href="./manifest.json" />
8+
<link rel="stylesheet" href="./src/index.scss" />
9+
<link rel="stylesheet" href="./game/userStyleSheet.css" />
810
<title>WebGAL</title>
9-
<style>
10-
.html-body__effect-background {
11-
height: 100vh;
12-
width: 100vw;
13-
filter: blur(50px);
14-
background-position: center;
15-
background-repeat: no-repeat;
16-
background-size: cover;
17-
position: absolute;
18-
top: 0;
19-
left: 0;
20-
}
21-
22-
.html-body__title-enter {
23-
width: 2560px;
24-
height: 1440px;
25-
overflow: hidden;
26-
position: absolute;
27-
top: 0;
28-
z-index: 14;
29-
opacity: 1;
30-
transition: opacity 1.5s;
31-
}
32-
33-
.title-enter__initial-background {
34-
height: 100%;
35-
width: 100%;
36-
position: absolute;
37-
background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
38-
top: 0;
39-
opacity: 1;
40-
transition: opacity 1s;
41-
}
42-
43-
.title-enter__white-background {
44-
width: 100%;
45-
height: 100%;
46-
position: absolute;
47-
top: 0;
48-
opacity: 0;
49-
background: linear-gradient(
50-
165deg,
51-
rgba(255, 255, 255, 0.25) 0%,
52-
rgba(255, 255, 255, 1) 50%,
53-
rgba(255, 255, 255, 0.25) 100%
54-
);
55-
transition: opacity 1s;
56-
}
57-
58-
.title-enter__container {
59-
width: 100%;
60-
position: absolute;
61-
top: 0;
62-
height: 100%;
63-
opacity: 1;
64-
font-size: 175%;
65-
transition: opacity 1s;
66-
z-index: 15;
67-
font-family: '思源宋体', Georgia, serif;
68-
}
69-
70-
.title-enter-container__center-text {
71-
width: 100%;
72-
height: 100%;
73-
display: flex;
74-
justify-content: center;
75-
align-items: center;
76-
}
77-
78-
.title-enter-container__center-text > div {
79-
letter-spacing: 0.25em;
80-
padding: 2em 2em 2em 2em;
81-
text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
82-
transition: text-shadow 1s;
83-
font-size: 175%;
84-
animation: title-enter-container__center-text--blink 4s infinite;
85-
}
86-
87-
@keyframes title-enter-container__center-text--blink {
88-
0% {
89-
text-shadow: 0 0 15px rgba(0, 0, 0, 0.65);
90-
}
91-
50% {
92-
text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
93-
}
94-
100% {
95-
text-shadow: 0 0 15px rgba(0, 0, 0, 0.65);
96-
}
97-
}
98-
99-
.title-enter-container__link-to-github {
100-
position: absolute;
101-
bottom: 1em;
102-
color: #999;
103-
font-size: 75%;
104-
display: flex;
105-
justify-content: center;
106-
width: 100%;
107-
flex-flow: column;
108-
align-items: center;
109-
}
110-
111-
.title-enter-container__link-to-github > div {
112-
padding: 0 0 0.25em 0;
113-
}
114-
</style>
11511
</head>
11612
<body>
117-
<!-- 背景模糊 -->
118-
<div class="html-body__effect-background"></div>
119-
<!-- 落地页 -->
120-
<div class="html-body__title-enter">
121-
<div class="title-enter__initial-background"></div>
122-
<div class="title-enter__white-background"></div>
123-
<div class="title-enter__container">
124-
<div class="title-enter-container__center-text">
125-
<div>PRESS THE SCREEN TO START</div>
126-
</div>
127-
<div class="title-enter-container__link-to-github">
128-
<div>Powered by <a> WebGAL </a> Framework</div>
13+
<!--先盖一层 LOGO 挡住下面正在加载的组件-->
14+
<div id="launchScreen" class="launch_screen">
15+
<div class="launch_screen_logo_container">
16+
<img id="gameLogo" alt="Game Logo" class="launch_screen_logo" />
17+
</div>
18+
<div class="launch_screen_loading_container">
19+
<div id="launchScreenLoadingBar" class="launch_screen_loading_bar">
20+
PLAY
12921
</div>
13022
</div>
13123
</div>
13224
<!-- 紧急回避页挂载点 -->
133-
<div id="html-body__panic-overlay"></div>
25+
<div id="panicOverlay"></div>
13426
<!-- 应用挂载点 -->
13527
<div id="root"></div>
136-
<!-- 在窗口大小改变时进行强制缩放 -->
28+
<!-- 加载 Logo -->
29+
<script type="module">
30+
import defaultLogo from './src/assets/logo/logo.png';
31+
(() => {
32+
function loadLogo(src) {
33+
const img = document.getElementById('gameLogo');
34+
img.onerror = function () {
35+
// 路径不存在时回退到默认 logo
36+
img.onerror = null; // 防止死循环
37+
img.src = defaultLogo;
38+
};
39+
img.src = src;
40+
}
41+
loadLogo('./game/logo.png');
42+
})();
43+
</script>
13744
<script>
13845
(() => {
13946
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
140-
const resize = () => {
141-
const targetHeight = 1440; // 目标高度
142-
const targetWidth = 2560; // 目标宽度
143-
144-
const h = window.innerHeight; // 窗口高度
145-
const w = window.innerWidth; // 窗口宽度
146-
const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
147-
const zoomW = w / targetWidth; // 以窗口宽度为基准的变换比
148-
const zoomH2 = w / targetHeight; // 竖屏时以窗口高度为基础的变换比
149-
const zoomW2 = h / targetWidth; // 竖屏时以窗口宽度为基础的变换比
150-
let mh = (targetHeight - h) / 2; // y轴移动距离
151-
let mw = (targetWidth - w) / 2; // x轴移动距离
152-
let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
153-
let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
154-
let transform = '';
155-
let effectBackgroundTransform = '';
156-
const root = document.querySelector('#root'); // 获取根元素
157-
const titleEnter = document.querySelector('.html-body__title-enter');
158-
const effectBackground = document.querySelector('.html-body__effect-background');
159-
const elements = [root, titleEnter];
160-
if (w > h) {
161-
if (effectBackground) {
162-
effectBackground.style.height = `100vh`;
163-
effectBackground.style.width = `100vw`;
164-
effectBackgroundTransform = '';
165-
}
166-
mw = -mw;
167-
mh = -mh;
168-
if (w * (9 / 16) >= h) {
169-
transform = `translate(${mw}px, ${mh}px) ` + `scale(${zoomH}, ${zoomH}) `;
170-
}
171-
if (w * (9 / 16) < h) {
172-
transform = `translate(${mw}px, ${mh}px) ` + `scale(${zoomW}, ${zoomW}) `;
173-
}
174-
} else {
175-
// 旋转
176-
if (effectBackground) {
177-
effectBackground.style.height = `${targetHeight}px `;
178-
effectBackground.style.width = `${targetWidth}px `;
179-
}
180-
mw2os = -mw2os;
181-
if (h * (9 / 16) >= w) {
182-
effectBackgroundTransform =
183-
`rotate(90deg) ` + `translate(${mw2os}px, ${mh2os}px) ` + `scale(${zoomH2 * 1.75}, ${zoomH2 * 1.75}) `;
184-
transform = `rotate(90deg) ` + `translate(${mw2os}px, ${mh2os}px) ` + `scale(${zoomH2},${zoomH2}) `;
185-
}
186-
if (h * (9 / 16) < w) {
187-
effectBackgroundTransform =
188-
`rotate(90deg) ` + ` translate(${mw2os}px, ${mh2os}px) ` + `scale(${zoomW2 * 1.75}, ${zoomW2 * 1.75}) `;
189-
transform = `rotate(90deg) ` + `translate(${mw2os}px, ${mh2os}px) ` + `scale(${zoomW2},${zoomW2}) `;
190-
}
191-
// iOS 不强制旋转
192-
if (isIOS) {
193-
const zoomWi = w / targetWidth;
194-
transform = `translate(${-mw}px, ${-mh}px) ` + `scale(${zoomWi},${zoomWi}) `;
195-
}
196-
}
197-
if (effectBackground) {
198-
effectBackground.style.transform = effectBackgroundTransform;
199-
}
200-
for (const element of elements) {
201-
if (element) {
202-
element.style.transform = transform;
203-
}
204-
}
205-
};
20647
if (!isIOS) {
20748
// 非 IOS
20849
// 创建一个新的 meta 标签
@@ -211,17 +52,6 @@
21152
metaTag.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
21253
// 将该标签添加到 head 中
21354
document.head.appendChild(metaTag);
214-
resize();
215-
window.onload = resize;
216-
window.onresize = resize;
217-
// 监听键盘 F11 键按下事件，全屏时触发页面调整
218-
document.onkeydown = (e) => {
219-
if (e && e.key === 'F11') {
220-
setTimeout(() => {
221-
resize();
222-
}, 100);
223-
}
224-
};
22555
} else {
22656
// IOS
22757
const metaTag = document.createElement('meta');
@@ -272,51 +102,20 @@
272102
bubbles: true,
273103
cancelable: true,
274104
});
275-
const target = document.querySelector('.title__enter-game-target');
105+
const target = document.getElementById('enter_game_target');
276106
if (target) {
277107
target.dispatchEvent(event);
278108
}
279109
});
280-
/** 点击屏幕，进入引擎主界面 */
110+
281111
const enter = () => {
282-
const initialBackground = document.querySelector('.title-enter__initial-background');
283-
if (initialBackground) {
284-
initialBackground.style.opacity = '0';
285-
}
286-
const container = document.querySelector('.title-enter__container');
287-
if (container) {
288-
container.style.opacity = '0';
289-
}
290-
const whiteBackground = document.querySelector('.title-enter__white-background');
291-
setTimeout(() => {
292-
if (whiteBackground) {
293-
whiteBackground.style.opacity = '1';
294-
}
295-
}, 50); // 在50ms后开始显示白色渐变
296-
const titleEnter = document.querySelector('.html-body__title-enter');
297-
setTimeout(() => {
298-
if (titleEnter) titleEnter.style.opacity = '0';
299-
}, 500); // 500ms后开始降低落地页透明度
300-
if (!isIOS && titleEnter) {
301-
titleEnter.style.pointerEvents = 'none'; // 落地页不再响应点击
302-
titleEnter.style.background = 'linear-gradient( #a1c4fd 0%, #c2e9fb 100%)'; // 改变标题渐变效果
303-
}
304-
setTimeout(() => {
305-
if (titleEnter) {
306-
titleEnter.style.display = 'none';
307-
}
308-
}, 2000); // 将落地页设置为不显示
112+
// 玩家任何时候都可以点击关闭 launchScreen，不需要阻止
309113
enterPromiseResolve();
310114
};
311-
const titleEnter = document.querySelector('.html-body__title-enter');
312-
if (titleEnter) {
313-
titleEnter.onclick = enter;
314-
}
315-
const linkToGithub = document.querySelector('.title-enter-container__link-to-github');
316-
const aTag = linkToGithub?.querySelector('a');
317-
if (aTag) {
318-
aTag.href = 'https://github.com/OpenWebGAL/WebGAL';
319-
aTag.onclick = (event) => event.stopPropagation();
115+
116+
const launchScreen = document.getElementById('launchScreen');
117+
if (launchScreen) {
118+
launchScreen.onclick = enter;
320119
}
321120
})();
322121
</script>
@@ -358,6 +157,6 @@
358157
})();
359158
</script>
360159
<!-- main文件 -->
361-
<script type="module" src="/src/main.tsx"></script>
160+
<script type="module" src="./src/main.tsx"></script>
362161
</body>
363162
</html>

‎packages/webgal/src/App.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@ import { useEffect } from 'react';
22
import { initializeScript } from '@/Core/initializeScript';
33
import Translation from '@/UI/Translation/Translation';
44
import { Stage } from '@/Stage/Stage';
5-
import { BottomControlPanel } from '@/UI/BottomControlPanel/BottomControlPanel';
6-
import { BottomControlPanelFilm } from '@/UI/BottomControlPanel/BottomControlPanelFilm';
7-
import { Backlog } from '@/UI/Backlog/Backlog';
85
import Title from '@/UI/Title/Title';
9-
import Logo from '@/UI/Logo/Logo';
106
import { Extra } from '@/UI/Extra/Extra';
117
import Menu from '@/UI/Menu/Menu';
128
import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
@@ -19,16 +15,12 @@ export default function App() {
1915
}, []);
2016
return (
2117
<div className="App">
22-
<Translation />
2318
<Stage />
24-
<BottomControlPanel />
25-
<BottomControlPanelFilm />
26-
<Backlog />
2719
<Title />
28-
<Logo />
2920
<Extra />
3021
<Menu />
3122
<GlobalDialog />
23+
<Translation />
3224
<PanicOverlay />
3325
<DevPanel />
3426
</div>

‎packages/webgal/src/Core/Modules/gamePlay.ts‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,31 @@ import { PerformController } from '@/Core/Modules/perform/performController';
44
/**
55
* 游戏运行时变量
66
*/
7-
export class Gameplay {
8-
public isAuto = false;
9-
public isFast = false;
7+
export class Gameplay extends EventTarget {
108
public autoInterval: ReturnType<typeof setInterval> | null = null;
119
public fastInterval: ReturnType<typeof setInterval> | null = null;
1210
public autoTimeout: ReturnType<typeof setTimeout> | null = null;
1311
public pixiStage: PixiStage | null = null;
1412
public performController = new PerformController();
13+
// 自动播放
14+
private _isAuto = false;
15+
public get isAuto() {
16+
return this._isAuto;
17+
}
18+
public set isAuto(value: boolean) {
19+
this._isAuto = value;
20+
this.dispatchEvent(new CustomEvent('isAutoChange', { detail: value }));
21+
}
22+
// 快进
23+
private _isFast = false;
24+
public get isFast() {
25+
return this._isFast;
26+
}
27+
public set isFast(value: boolean) {
28+
this._isFast = value;
29+
this.dispatchEvent(new CustomEvent('isFastChange', { detail: value }));
30+
}
31+
1532
public resetGamePlay() {
1633
this.isAuto = false;
1734
this.isFast = false;

0 commit comments

Comments
 (0)