index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/tari.svg" />
    <script type="module" crossorigin src="/assets/glApp.js"></script>
    <title>Tari Universe | Testnet</title>
    <style>
      #canvas {
        position: absolute;
        pointer-events: auto;
      }
  </style>
</head>
  <body>
    <main>
      <canvas id="canvas"></canvas>
      <div id="root"></div>
      <script type="module" src="src/main.tsx"></script>
      <script>
        let time;

        function preload() {
          glApp.preload(
              {
                canvas: document.getElementById('canvas'),
                orbitTarget: document.getElementById('canvas'),
                ASSETS_PATH: '/assets/',
              },
              () => {
                init();
              },
          );
        }

        function init() {
          glApp.init();
          time = performance.now() / 1000;
          window.addEventListener('resize', onResize);

          glApp.properties.bgColor2 = '#E5E5E5';

          onResize();
          animate();
        }

        function animate() {
          requestAnimationFrame(animate);

          let newTime = performance.now() / 1000;
          let dt = newTime - time;
          time = newTime;

          update(dt);
        }

        function update(dt) {
          glApp.render(dt);
        }

        function onResize() {
          const sidebarOffset = 348 + 20; // sidebar + padding
          glApp.properties.cameraOffsetX =  sidebarOffset / window.innerWidth;
          glApp.setSize(window.innerWidth, window.innerHeight);
        }


        document.addEventListener("contextmenu", (e) => {
          if (window.location.hostname !== "localhost") {
            e.preventDefault();
          }
        });

        document.addEventListener('DOMContentLoaded', preload);
      </script>
    </main>
</body>
</html>