Skip to content

Commit 46bfc90

Browse files
author
Hardy--Lee
committed
feat: redesign all ui
fix: fast save preview position fix: save load scss path fix: minor issue feat: custom stage resolution fix: spine stage resolution
1 parent fd35764 commit 46bfc90

File tree

121 files changed

+5469
-4714
lines changed

Some content is hidden

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

121 files changed

+5469
-4714
lines changed

‎packages/webgal/index.html‎

Lines changed: 33 additions & 235 deletions
Original file line numberDiff line numberDiff line change
@@ -5,204 +5,44 @@
55
<link rel="icon" type="image/x-icon" href="/icons/favicon.ico" />
66
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
77
<link rel="manifest" href="/manifest.json" />
8+
<link rel="stylesheet" href="/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>
30+
(() => {
31+
function loadLogo(src) {
32+
const img = document.getElementById('gameLogo');
33+
img.onerror = function () {
34+
// 路径不存在时回退到默认 logo
35+
img.onerror = null; // 防止死循环
36+
img.src = './src/assets/logo/logo.png';
37+
};
38+
img.src = src;
39+
}
40+
loadLogo('/game/logo.png');
41+
})();
42+
</script>
13743
<script>
13844
(() => {
13945
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-
};
20646
if (!isIOS) {
20747
// 非 IOS
20848
// 创建一个新的 meta 标签
@@ -211,17 +51,6 @@
21151
metaTag.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no';
21252
// 将该标签添加到 head 中
21353
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-
};
22554
} else {
22655
// IOS
22756
const metaTag = document.createElement('meta');
@@ -272,51 +101,20 @@
272101
bubbles: true,
273102
cancelable: true,
274103
});
275-
const target = document.querySelector('.title__enter-game-target');
104+
const target = document.getElementById('enter_game_target');
276105
if (target) {
277106
target.dispatchEvent(event);
278107
}
279108
});
280-
/** 点击屏幕，进入引擎主界面 */
109+
281110
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); // 将落地页设置为不显示
111+
// 玩家任何时候都可以点击关闭 launchScreen，不需要阻止
309112
enterPromiseResolve();
310113
};
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();
114+
115+
const launchScreen = document.getElementById('launchScreen');
116+
if (launchScreen) {
117+
launchScreen.onclick = enter;
320118
}
321119
})();
322120
</script>

0 commit comments

Comments
 (0)