88 lines
4.2 KiB
HTML
88 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>$GODOT_PROJECT_NAME</title>
|
||
$GODOT_HEAD_INCLUDE
|
||
<style>
|
||
:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
|
||
* { box-sizing: border-box; }
|
||
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #b9d9df; }
|
||
#canvas { position: fixed; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #0a2437; }
|
||
#loading-shell { position: fixed; inset: 0; z-index: 10; display: grid; place-items: end center; padding: 0 24px max(9vh, 34px); background: #b9d9df url("auth-background.jpg") center / cover no-repeat; transition: opacity .18s ease; }
|
||
#loading-shell::before { content: ""; position: absolute; inset: 0; background: rgba(222, 242, 244, .22); }
|
||
.loading { position: relative; width: min(420px, 88vw); color: #174f72; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
|
||
.status { min-height: 24px; margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: 0; }
|
||
.track { height: 7px; overflow: hidden; border: 1px solid rgba(23, 79, 114, .28); border-radius: 4px; background: rgba(255, 255, 255, .78); box-shadow: 0 2px 8px rgba(15, 65, 89, .16); }
|
||
.bar { width: 0; height: 100%; background: #2b86b6; transition: width .2s ease; }
|
||
.failure { display: none; margin-top: 10px; color: #8f2634; font-size: 13px; line-height: 1.5; }
|
||
#loading-shell.done { opacity: 0; pointer-events: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<canvas id="canvas">当前浏览器不支持游戏画布。</canvas>
|
||
<div id="loading-shell" aria-live="polite">
|
||
<div class="loading">
|
||
<p class="status" id="status">正在加载小镇 0%</p>
|
||
<div class="track" aria-hidden="true"><div class="bar" id="bar"></div></div>
|
||
<div class="failure" id="failure" role="alert"></div>
|
||
</div>
|
||
</div>
|
||
<noscript>当前浏览器未启用 JavaScript，无法运行鲸鱼小镇。</noscript>
|
||
<script src="$GODOT_URL"></script>
|
||
<script>
|
||
const GODOT_CONFIG = $GODOT_CONFIG;
|
||
const GODOT_THREADS_ENABLED = $GODOT_THREADS_ENABLED;
|
||
const CORE_PACK_URL = '__WHALETOWN_CORE_PACK__';
|
||
const CORE_PACK_SIZE = __WHALETOWN_CORE_PACK_SIZE__;
|
||
GODOT_CONFIG.mainPack = CORE_PACK_URL;
|
||
GODOT_CONFIG.fileSizes[CORE_PACK_URL] = CORE_PACK_SIZE;
|
||
const shell = document.getElementById('loading-shell');
|
||
const status = document.getElementById('status');
|
||
const bar = document.getElementById('bar');
|
||
const failure = document.getElementById('failure');
|
||
const engine = new Engine(GODOT_CONFIG);
|
||
|
||
window.whaletownGodotReady = function () {
|
||
bar.style.width = '100%';
|
||
shell.classList.add('done');
|
||
window.setTimeout(function () { shell.style.display = 'none'; }, 220);
|
||
document.getElementById('canvas').focus();
|
||
};
|
||
window.whaletownPackProgress = function (downloaded, total) {
|
||
const downloadedMb = downloaded / 1048576;
|
||
if (total > 0) {
|
||
const totalMb = total / 1048576;
|
||
const percent = Math.min(100, Math.round(downloaded / total * 100));
|
||
bar.style.width = percent + '%';
|
||
status.textContent = '正在加载完整登录界面 ' + downloadedMb.toFixed(1) + ' / ' + totalMb.toFixed(1) + ' MB';
|
||
} else {
|
||
status.textContent = '正在加载完整登录界面 ' + downloadedMb.toFixed(1) + ' MB';
|
||
}
|
||
};
|
||
|
||
const missing = Engine.getMissingFeatures({ threads: GODOT_THREADS_ENABLED });
|
||
if (missing.length) {
|
||
failure.style.display = 'block';
|
||
failure.textContent = '当前浏览器缺少运行游戏所需能力：' + missing.join('、');
|
||
} else {
|
||
engine.startGame({
|
||
onProgress(current, total) {
|
||
if (total <= 0) return;
|
||
const percent = Math.min(100, Math.round(current / total * 100));
|
||
bar.style.width = percent + '%';
|
||
status.textContent = '正在加载小镇 ' + percent + '%';
|
||
},
|
||
}).then(function () {
|
||
status.textContent = '正在加载完整登录界面...';
|
||
bar.style.width = '0';
|
||
}).catch(function (error) {
|
||
failure.style.display = 'block';
|
||
failure.textContent = error && error.message ? error.message : '主程序加载失败，请刷新重试';
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|