148 lines
6.8 KiB
HTML
148 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="darkreader-lock">
|
|
<script>
|
|
window.startLoad = Date.now()
|
|
// g663 fix: forbid change of string prototype
|
|
Object.defineProperty(String.prototype, 'format', {
|
|
writable: false,
|
|
configurable: false
|
|
});
|
|
Object.defineProperty(String.prototype, 'replaceAll', {
|
|
writable: false,
|
|
configurable: false
|
|
});
|
|
</script>
|
|
<!-- // #region initial loader -->
|
|
<script async>
|
|
const loadingDiv = /* html */ `
|
|
<div class="initial-loader" style="position: fixed;transition:opacity 0.2s;inset: 0;background:black;display: flex;justify-content: center;align-items: center;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;gap: 15px;" ontransitionend="this.remove()">
|
|
<div>
|
|
<img src="./loading-bg.jpg" alt="Prismarine Web Client" style="position:fixed;inset:0;width:100%;height:100%;z-index: -2;object-fit: cover;filter: blur(3px);">
|
|
<div style="position: fixed;inset: 0;z-index: -1;background-color: rgba(0, 0, 0, 0.8);"></div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: calc(var(--font-size) * 1.8);color: lightgray;" class="title">Loading...</div>
|
|
<div style="font-size: var(--font-size);color: rgb(176, 176, 176);margin-top: 3px;text-align: center" class="subtitle">A true Minecraft client in your browser!</div>
|
|
<!-- small text pre -->
|
|
<div style="font-size: calc(var(--font-size) * 0.6);color: rgb(150, 150, 150);margin-top: 3px;text-align: center;white-space: pre-line;" class="advanced-info"></div>
|
|
</div>
|
|
</div>
|
|
`
|
|
const insertLoadingDiv = () => {
|
|
const loadingDivElem = document.createElement('div')
|
|
loadingDivElem.innerHTML = loadingDiv
|
|
if (!window.pageLoaded) {
|
|
document.documentElement.appendChild(loadingDivElem)
|
|
}
|
|
// load error handling
|
|
const onError = (errorOrMessage, log = false) => {
|
|
let message = errorOrMessage instanceof Error ? (errorOrMessage.stack ?? errorOrMessage.message) : errorOrMessage
|
|
if (log) console.log(message)
|
|
if (typeof message !== 'string') message = String(message)
|
|
if (document.querySelector('.initial-loader') && document.querySelector('.initial-loader').querySelector('.title').textContent !== 'Error') {
|
|
document.querySelector('.initial-loader').querySelector('.title').textContent = 'Error'
|
|
const [errorMessage, ...errorStack] = message.split('\n')
|
|
document.querySelector('.initial-loader').querySelector('.subtitle').textContent = errorMessage
|
|
document.querySelector('.initial-loader').querySelector('.advanced-info').textContent = errorStack.join('\n')
|
|
if (window.navigator.maxTouchPoints > 1) window.location.hash = '#dev' // show eruda
|
|
// unregister all sw
|
|
if (window.navigator.serviceWorker) {
|
|
window.navigator.serviceWorker.getRegistrations().then(registrations => {
|
|
registrations.forEach(registration => {
|
|
registration.unregister()
|
|
})
|
|
})
|
|
}
|
|
window.lastError = errorOrMessage instanceof Error ? errorOrMessage : new Error(errorOrMessage)
|
|
}
|
|
}
|
|
window.addEventListener('unhandledrejection', (e) => onError(e.reason, true))
|
|
window.addEventListener('error', (e) => onError(e.error ?? e.message))
|
|
}
|
|
insertLoadingDiv()
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// move loading div to the end of body
|
|
const loadingDivElem = document.querySelector('.initial-loader');
|
|
const newContainer = document.body; // replace with your new container
|
|
if (loadingDivElem) newContainer.appendChild(loadingDivElem);
|
|
})
|
|
</script>
|
|
<script type="module" async>
|
|
const checkLoadEruda = () => {
|
|
if (window.location.hash === '#dev') {
|
|
// todo precache (check offline)?
|
|
import('https://cdn.skypack.dev/eruda').then(({ default: eruda }) => {
|
|
eruda.init()
|
|
})
|
|
Promise.all([import('https://cdn.skypack.dev/stacktrace-gps'), import('https://cdn.skypack.dev/error-stack-parser')]).then(async ([{ default: StackTraceGPS }, { default: ErrorStackParser }]) => {
|
|
if (!window.lastError) return
|
|
|
|
let stackFrames = [];
|
|
if (window.lastError instanceof Error) {
|
|
stackFrames = ErrorStackParser.parse(window.lastError);
|
|
}
|
|
console.log('stackFrames', stackFrames)
|
|
const gps = new StackTraceGPS()
|
|
const mappedFrames = await Promise.all(
|
|
stackFrames.map(frame => gps.pinpoint(frame))
|
|
);
|
|
console.log('mappedFrames', mappedFrames)
|
|
|
|
const stackTrace = mappedFrames
|
|
.map(frame => `at ${frame.functionName} (${frame.fileName}:${frame.lineNumber}:${frame.columnNumber})`)
|
|
.join('\n');
|
|
console.log('stackTrace', stackTrace)
|
|
})
|
|
}
|
|
}
|
|
checkLoadEruda()
|
|
window.addEventListener('hashchange', (e) => {
|
|
setTimeout(() => {
|
|
checkLoadEruda()
|
|
})
|
|
})
|
|
</script>
|
|
<style>
|
|
html {
|
|
background: black;
|
|
}
|
|
.initial-loader {
|
|
--font-size: 20px;
|
|
}
|
|
@media screen and (min-width: 550px) {
|
|
.initial-loader {
|
|
--font-size: 30px;
|
|
}
|
|
}
|
|
@media screen and (min-width: 950px) {
|
|
.initial-loader {
|
|
--font-size: 50px;
|
|
}
|
|
}
|
|
</style>
|
|
<!-- // #endregion -->
|
|
<!-- <script type="module">
|
|
window.loadPluginScript = async ({ pluginName, script }) => {
|
|
window.loadedPlugins[pluginName] = await import(script)
|
|
}
|
|
</script> -->
|
|
<title>Minecraft Web Client</title>
|
|
<!-- <link rel="canonical" href="https://mcraft.fun"> -->
|
|
<meta name="description" content="Minecraft web client running in your browser">
|
|
<meta name="keywords" content="Play, Minecraft, Online, Web, Java, Server, Single player, Javascript, PrismarineJS, Voxel, WebGL, Three.js">
|
|
<meta name="date" content="2024-07-11" scheme="YYYY-MM-DD">
|
|
<meta name="language" content="English">
|
|
<meta name="theme-color" content="#349474">
|
|
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'>
|
|
<meta property="og:title" content="Minecraft Web Client" />
|
|
<meta property="og:type" content="website" />
|
|
<meta name="format-detection" content="telephone=no">
|
|
</head>
|
|
<body>
|
|
<div id="react-root"></div>
|
|
<div id="ui-root"></div>
|
|
<!-- inject script -->
|
|
</body>
|
|
</html>
|