index.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>Prismarine Web Client</title>
    <link rel="favicon" href="favicon.png">
    <link rel="icon" type="image/png" href="favicon.png" />
    <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="Prismarine Web Client" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="favicon.png" />
    <meta name="format-detection" content="telephone=no">
    <link rel="manifest" href="manifest.json" crossorigin="use-credentials">
  </head>
  <body>
    <div id="react-root"></div>
    <div id="ui-root"></div>
    <!-- inject script -->
  </body>
</html>