feat: migrate to mc-assets & Rsbuild better resource pack support (#164)

The complete migration from `minecraft-assets` to [`mc-assets`](https://npmjs.com/mc-assets).

Now all block states & block models are processed dynamically! So it is now easily possible to implement custom models

- no post-install work anymore: the building is now 3x faster and 4x faster in docker
- drop 10x total deploy size
- display world ~1.5x faster
- fix snow & repeater state parser (they didn't render correctly)

rsbuild pipeline!

- the initial app load is faster ~1.2
- much fewer requests are made & cached
- dev reloads are fast now

Resource pack changes:

- now textures are reloaded much more quickly on the fly
- add hotkey to quickly reload textures (for debugging) assigned to F3+T (open dev widget is now assigned to F3+Y)
- add a way to disable resource pack instead of uninstalling it
- items render from resource pack are now support
- resource pack widgets & icons are now supported

.eslintignore

@@ -1 +1,4 @@
 node_modules
+rsbuild.config.ts
+*.module.css.d.ts
+generated

.vscode/launch.json

@@ -29,7 +29,7 @@
             "type": "chrome",
             "name": "Launch Chrome",
             "request": "launch",
-            "url": "http://localhost:8080/",
+            "url": "http://localhost:3000/",
             "pathMapping": {
                 "/": "${workspaceFolder}/dist"
             },
@@ -50,7 +50,7 @@
             "name": "Attach Firefox",
             "request": "attach",
             // comment if using webpack
-            "url": "http://localhost:8080/",
+            "url": "http://localhost:3000/",
             "webRoot": "${workspaceFolder}/",
             "skipFiles": [
                 // "<node_internals>/**/*vendors*"

Dockerfile

@@ -1,12 +1,14 @@
 # ---- Build Stage ----
 FROM node:18-alpine AS build
 # Without git installing the npm packages fails
-RUN apk add --no-cache git python3 make g++ cairo-dev pango-dev jpeg-dev giflib-dev librsvg-dev
+RUN apk add git
 WORKDIR /app
 COPY . /app
 # install pnpm
 RUN npm i -g [email protected]
-RUN pnpm install
+# TODO need flat --no-root-optional
+RUN node ./scripts/dockerPrepare.mjs
+RUN pnpm i
 
 # TODO for development
 # EXPOSE 9090
@@ -29,4 +31,4 @@ RUN npm i -g [email protected]
 RUN npm init -yp
 RUN pnpm i express github:zardoy/prismarinejs-net-browserify compression cors
 EXPOSE 8080
-ENTRYPOINT ["node", "server.js"]
+ENTRYPOINT ["node", "server.js", "--prod"]

README.MD

@@ -16,7 +16,7 @@ You can try this out at [mcraft.fun](https://mcraft.fun/), [pcm.gg](https://pcm.
 - Works offline
 - Play with friends over internet! (P2P is powered by Peer.js discovery servers)
 - First-class touch (mobile) & controller support
-- Resource pack support
+- FULL Resource pack support: Custom GUI, all textures & custom models! Server resource packs are also supported.
 - Builtin JEI with recipes & guides for every item (also replaces creative inventory)
 - even even more!
 

README.NPM.MD

@@ -1,6 +1,6 @@
 # Minecraft React
 
-Minecraft UI components for React.
+Minecraft UI components for React extracted from [mcraft.fun](https://mcraft.fun) project.
 
 ```bash
 pnpm i minecraft-react

index.html

@@ -6,7 +6,7 @@
     </script>
     <!-- // #region initial loader -->
     <script async>
-      const loadingDiv = `
+      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);">
@@ -18,22 +18,31 @@
     </div>
 </div>
 `
-      const loadingDivElem = document.createElement('div')
-      loadingDivElem.innerHTML = loadingDiv
-      if (!window.pageLoaded) {
-        document.documentElement.appendChild(loadingDivElem)
-      }
-        // load error handling
-        const onError = (message) => {
-          console.log(message)
-          if (document.querySelector('.initial-loader') && document.querySelector('.initial-loader').querySelector('.title').textContent !== 'Error') {
-            document.querySelector('.initial-loader').querySelector('.title').textContent = 'Error'
-            document.querySelector('.initial-loader').querySelector('.subtitle').textContent = message
-            if (window.navigator.maxTouchPoints > 1) window.location.hash = '#dev' // show eruda
+      const insertLoadingDiv = () => {
+          const loadingDivElem = document.createElement('div')
+          loadingDivElem.innerHTML = loadingDiv
+          if (!window.pageLoaded) {
+            document.documentElement.appendChild(loadingDivElem)
+          }
+          // load error handling
+          const onError = (message) => {
+            console.log(message)
+            if (document.querySelector('.initial-loader') && document.querySelector('.initial-loader').querySelector('.title').textContent !== 'Error') {
+              document.querySelector('.initial-loader').querySelector('.title').textContent = 'Error'
+              document.querySelector('.initial-loader').querySelector('.subtitle').textContent = message
+              if (window.navigator.maxTouchPoints > 1) window.location.hash = '#dev' // show eruda
+            }
           }
+          window.addEventListener('unhandledrejection', (e) => onError(e.reason))
+          window.addEventListener('error', (e) => onError(e.message))
         }
-        window.addEventListener('unhandledrejection', (e) => onError(e.reason))
-        window.addEventListener('error', (e) => onError(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
+          newContainer.appendChild(loadingDivElem);
+        })
     </script>
     <script type="module" async>
       const checkLoadEruda = () => {
@@ -76,13 +85,12 @@
       }
     </script> -->
     <title>Prismarine Web Client</title>
-    <link rel="stylesheet" href="index.css">
     <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="2023-09-11" scheme="YYYY-MM-DD">
+    <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'>