new cool things (#58)

README.MD

@@ -1,5 +1,7 @@
 # Minecraft Web Client
 
+![banner](./docs-assets/banner.jpg)
+
 A true Minecraft client running in your browser! A port of the original game to the web, written in JavaScript using modern web technologies.
 
 This project is a work in progress, but I consider it to be usable. If you encounter any bugs or usability issues, please report them!

index.html

@@ -4,22 +4,59 @@
     <script>
       window.startLoad = Date.now()
     </script>
-    <script type="module">
-      const checkLoadEruda = () => {
-        if (window.location.hash === '#dev') {
-          // todo precache (check offline)?
-          import('https://cdn.skypack.dev/eruda').then(({ default: eruda }) => {
-            eruda.init()
-          })
+      <script async>
+        const loadingDiv = `
+        <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;">Loading...</div>
+          <div style="font-size: var(--font-size);color: rgb(176, 176, 176);">A true Minecraft client in your browser!</div>
+      </div>
+  </div>
+  `
+        const loadingDivElem = document.createElement('div')
+        loadingDivElem.innerHTML = loadingDiv
+        if (!window.pageLoaded) {
+          document.documentElement.appendChild(loadingDivElem)
         }
-      }
-      checkLoadEruda()
-      window.addEventListener('hashchange', (e) => {
-        setTimeout(() => {
-          checkLoadEruda()
+      </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()
+            })
+          }
+        }
+        checkLoadEruda()
+        window.addEventListener('hashchange', (e) => {
+          setTimeout(() => {
+            checkLoadEruda()
+          })
         })
-      })
-    </script>
+      </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>
     <title>Prismarine Web Client</title>
     <link rel="stylesheet" href="index.css">
     <link rel="favicon" href="favicon.ico">

package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@dimaka/interface": "0.0.3-alpha.0",
     "@floating-ui/react": "^0.26.1",
+    "@mui/base": "5.0.0-beta.34",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/wicg-file-system-access": "^2023.10.2",
@@ -45,14 +46,14 @@
     "esbuild": "^0.19.3",
     "esbuild-plugin-polyfill-node": "^0.3.0",
     "express": "^4.18.2",
-    "flying-squid": "github:zardoy/space-squid#everything",
+    "flying-squid": "npm:@zardoy/flying-squid@^0.0.9",
     "fs-extra": "^11.1.1",
     "iconify-icon": "^1.0.8",
     "jszip": "^3.10.1",
     "lit": "^2.8.0",
     "lodash-es": "^4.17.21",
     "minecraft-assets": "^1.12.2",
-    "minecraft-data": "3.58.0",
+    "minecraft-data": "3.60.0",
     "net-browserify": "github:zardoy/prismarinejs-net-browserify",
     "node-gzip": "^1.1.2",
     "peerjs": "^1.5.0",
@@ -126,9 +127,9 @@
       "diamond-square": "github:zardoy/diamond-square",
       "prismarine-block": "github:zardoy/prismarine-block#next-era",
       "prismarine-world": "github:zardoy/prismarine-world#next-era",
-      "minecraft-data": "3.58.0",
+      "minecraft-data": "3.60.0",
       "prismarine-provider-anvil": "github:zardoy/prismarine-provider-anvil#everything",
-      "minecraft-protocol": "github:zardoy/minecraft-protocol#custom-client-extra",
+      "minecraft-protocol": "github:zardoy/minecraft-protocol#everything",
       "react": "^18.2.0"
     }
   }