[showcase] kradle-ai fork example

.eslintrc.json

@@ -102,6 +102,7 @@
         // "@stylistic/multiline-ternary": "error", // not needed
         // "@stylistic/newline-per-chained-call": "error", // not sure if needed
         "@stylistic/new-parens": "error",
+        "@typescript-eslint/class-literal-property-style": "off",
         "@stylistic/no-confusing-arrow": "error",
         "@stylistic/wrap-iife": "error",
         "@stylistic/space-before-blocks": "error",

.github/workflows/build-single-file.yml

@@ -0,0 +1,31 @@
+name: build-single-file
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-and-bundle:
+    runs-on: ubuntu-latest
+    permissions: write-all
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@master
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build single-file version - minecraft.html
+        run: pnpm build-single-file && mv dist/single/index.html minecraft.html
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: minecraft.html
+          path: minecraft.html

.github/workflows/build-zip.yml

@@ -0,0 +1,43 @@
+name: Make Self Host Zip
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-and-bundle:
+    runs-on: ubuntu-latest
+    permissions: write-all
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@master
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build project
+        run: pnpm build
+
+      - name: Bundle server.js
+        run: |
+          pnpm esbuild server.js --bundle --platform=node --outfile=bundled-server.js --define:process.env.NODE_ENV="'production'"
+
+      - name: Create distribution package
+        run: |
+          mkdir -p package
+          cp -r dist package/
+          cp bundled-server.js package/server.js
+          cd package
+          zip -r ../self-host.zip .
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: self-host
+          path: self-host.zip

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
       - run: pnpm build-storybook
       - run: pnpm test-unit
       - run: pnpm lint
-      - run: pnpm tsx scripts/buildNpmReact.ts
+      # - run: pnpm tsx scripts/buildNpmReact.ts
       - run: nohup pnpm prod-start &
       - run: nohup pnpm test-mc-server &
       - uses: cypress-io/github-action@v5

.github/workflows/next-deploy.yml

@@ -32,6 +32,8 @@ jobs:
           echo "{\"latestTag\": \"$(git rev-parse --short $GITHUB_SHA)\", \"isCommit\": true}" > assets/release.json
       - name: Build Project Artifacts
         run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+        env:
+          CONFIG_JSON_SOURCE: BUNDLED
       - run: pnpm build-storybook
       - name: Copy playground files
         run: |

.github/workflows/preview.yml

@@ -52,6 +52,19 @@ jobs:
         with:
           node-version: 22
           cache: "pnpm"
+      - name: Update deployAlwaysUpdate packages
+        run: |
+          if [ -f package.json ]; then
+            PACKAGES=$(node -e "const pkg = require('./package.json'); if (pkg.deployAlwaysUpdate) console.log(pkg.deployAlwaysUpdate.join(' '))")
+            if [ ! -z "$PACKAGES" ]; then
+              echo "Updating packages: $PACKAGES"
+              pnpm up -L $PACKAGES
+            else
+              echo "No deployAlwaysUpdate packages found in package.json"
+            fi
+          else
+            echo "package.json not found"
+          fi
       - name: Install Global Dependencies
         run: pnpm add -g vercel
       - name: Pull Vercel Environment Information
@@ -61,6 +74,8 @@ jobs:
           echo "{\"latestTag\": \"$(git rev-parse --short ${{ github.event.pull_request.head.sha }})\", \"isCommit\": true}" > assets/release.json
       - name: Build Project Artifacts
         run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+        env:
+          CONFIG_JSON_SOURCE: BUNDLED
       - run: pnpm build-storybook
       - name: Copy playground files
         run: |

.github/workflows/publish.yml

@@ -30,6 +30,8 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - run: vercel build --token=${{ secrets.VERCEL_TOKEN }} --prod
+        env:
+          CONFIG_JSON_SOURCE: BUNDLED
       - run: pnpm build-storybook
       - name: Copy playground files
         run: |
@@ -43,24 +45,43 @@ jobs:
         with:
           run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} --prod
         id: deploy
+      # publish to github
+      - run: cp vercel.json .vercel/output/static/vercel.json
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: .vercel/output/static
+          force_orphan: true
+
+      - name: Build single-file version - minecraft.html
+        run: pnpm build-single-file && mv dist/single/index.html minecraft.html
+      - name: Build self-host version
+        run: pnpm build
+      - name: Bundle server.js
+        run: |
+          pnpm esbuild server.js --bundle --platform=node --outfile=bundled-server.js --define:process.env.NODE_ENV="'production'"
+
+      - name: Create zip package
+        run: |
+          mkdir -p package
+          cp -r dist package/
+          cp bundled-server.js package/server.js
+          cd package
+          zip -r ../self-host.zip .
+
       - run: |
           pnpx zardoy-release node --footer "This release URL: ${{ steps.deploy.outputs.stdout }}"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # has possible output: tag
         id: release
+
       # has output
-      - run: cp vercel.json .vercel/output/static/vercel.json
-      - uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: .vercel/output/static
-          force_orphan: true
       - name: Set publishing config
         run: pnpm config set '//registry.npmjs.org/:_authToken' "${NODE_AUTH_TOKEN}"
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - run: pnpm tsx scripts/buildNpmReact.ts ${{ steps.release.outputs.tag }}
-        if: steps.release.outputs.tag
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      # - run: pnpm tsx scripts/buildNpmReact.ts ${{ steps.release.outputs.tag }}
+      #   if: steps.release.outputs.tag
+      #   env:
+      #     NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -10,7 +10,7 @@ localSettings.mjs
 dist*
 .DS_Store
 .idea/
-world
+/world
 data*.json
 out
 *.iml

.prettierignore

@@ -0,0 +1 @@
+**

CONTRIBUTING.md

@@ -5,8 +5,6 @@ After forking the repository, run the following commands to get started:
 0. Ensure you have [Node.js](https://nodejs.org) installed. Enable corepack with `corepack enable` *(1).
 1. Install dependencies: `pnpm i`
 2. Start the project in development mode: `pnpm start` or build the project for production: `pnpm build`
-3. Read the [Tasks Categories](#tasks-categories) and [Workflow](#workflow) sections below
-4. Let us know if you are working on something and be sure to open a PR if you got any changes. Happy coding!
 
 *(1): If you are getting `Cannot find matching keyid` update corepack to the latest version with `npm i -g corepack`.
 *(2): If still something doesn't work ensure you have the right nodejs version with `node -v` (tested on 22.x)
@@ -95,7 +93,7 @@ Also there are [src/generatedClientPackets.ts](src/generatedClientPackets.ts) an
 - Use `start-prod` script to start the project in production mode after running the `build` script to build the project.
 - If CI is failing on the next branch for some reason, feel free to use the latest commit for release branch. We will update the base branch asap. Please, always make sure to allow maintainers do changes when opening PRs.
 
-## Tasks Categories
+## Tasks Categories (from usptream repo. not relevant to Kradle)
 
 (most important for now are on top).
 
@@ -166,7 +164,7 @@ Most of the tasks are straightforward to implement, just be sure to use a debugg
 
 New React components, improve UI (including mobile support).
 
-## Workflow
+## Workflow (from usptream repo. not relevant to Kradle)
 
 1. Locate the problem on the public test server & make an easily reproducible environment (you can also use local packets replay server or your custom server setup). Dm me for details on public test server / replay server
 2. Debug the code, find an issue in the code, isolate the problem

Dockerfile

@@ -9,6 +9,7 @@ RUN npm i -g [email protected]
 # Build arguments
 ARG DOWNLOAD_SOUNDS=false
 ARG DISABLE_SERVICE_WORKER=false
+ARG CONFIG_JSON_SOURCE=REMOTE
 # TODO need flat --no-root-optional
 RUN node ./scripts/dockerPrepare.mjs
 RUN pnpm i
@@ -22,8 +23,8 @@ RUN if [ "$DOWNLOAD_SOUNDS" = "true" ] ; then node scripts/downloadSoundsMap.mjs
 # ENTRYPOINT ["pnpm", "run", "run-all"]
 
 # only for prod
-RUN GITHUB_REPOSITORY=zardoy/minecraft-web-client \
-    DISABLE_SERVICE_WORKER=$DISABLE_SERVICE_WORKER \
+RUN DISABLE_SERVICE_WORKER=$DISABLE_SERVICE_WORKER \
+    CONFIG_JSON_SOURCE=$CONFIG_JSON_SOURCE \
     pnpm run build
 
 # ---- Run Stage ----

Makefile

@@ -0,0 +1,21 @@
+REGION=us-central1
+PROJECT_ID=mckradle-3c267
+DOCKER_URL=${REGION}-docker.pkg.dev/${PROJECT_ID}/${env}-arenas/web-viewer-client
+IMAGE_TAG=${DOCKER_URL}:$(shell git rev-parse --short HEAD)
+SERVICE_NAME=web-proxy
+
+ifndef env
+	override env = dev
+endif
+
+docker/login:
+	gcloud auth configure-docker ${REGION}-docker.pkg.dev
+
+docker/build:
+	docker buildx build --platform linux/amd64,linux/arm64 . -f Dockerfile --load -t ${IMAGE_TAG}
+
+docker/push:
+	docker push ${IMAGE_TAG}
+
+deploy:
+	gcloud run deploy ${SERVICE_NAME} --image ${IMAGE_TAG} --region ${REGION}

README.MD

@@ -1,6 +1,70 @@
 # Minecraft Web Client
 
-![banner](./docs-assets/banner.jpg)
+This is a browser implementation of Minecraft we embed inside the Kradle  frontend to view session. This repo contains 2 parts -
+
+## First: A Web Client
+
+The web client is [deployed to Vercel](https://vercel.com/kradle-f5bad6db/minecraft-web-client) and is accessible at https://mcraft.kradle.ai. The Kradle frontend at https://app.kradle.ai uses an `<iframe>` to embed the viewer. We make use of query parameters to provide the server details to autoconnect.
+
+## Second: A Websocket Proxy
+
+Your browser can't connect and communicate directly with a minecraft java server. For this reason, we use a proxy server that can translate those packets into websocket messages, and the other way around.
+
+The proxy is deployed on [GCP Cloud Run](https://console.cloud.google.com/run/detail/us-central1/web-proxy/metrics?project=mckradle-3c267) and is accessible at https://mcproxy.kradle.ai (You can check it's working by adding `/config.json` to the URL)
+
+A proxy instance is stateless and is also not linked to a single client or a to a single minecraft server. A single instance of the proxy is actually capable of multiplexing multiple clients to multiple minecraft servers. 
+
+This means the proxy is quite efficient, and when needed, it can easily scale horizontally based on the sessions being viewed (using gcloud run's autoscaling)
+
+## Local development
+
+It's recommended to clone this repo into a folder called `minecraft-web-client` and place it alongside the [`frontend` repo](https://github.com/kradle-ai/frontend). The frontend repo will automatically use it when you run `npm run dev` there.
+
+### `tl;dr`
+0. Ensure you have [Node.js](https://nodejs.org) installed. Enable corepack with `corepack enable` *(1).
+1. Install dependencies: `pnpm i`
+2. Start the project in development mode: `pnpm start` or build the project for production: `pnpm build`
+
+See [CONTRIBUTING](CONTRIBUTING.md) for a breakdown of the repo and troubleshooting tips on getting it setup (it's mostly copied as-is from the upstream repo).
+
+
+## Deploy
+**Web Client** 
+
+Vercel automatically deploys the `next` branch to production.
+
+**Proxy**
+
+You most likely won't need to make any changes to the proxy, and so you don't need to deploy it.
+
+In the rare occasion you do, here's how.
+
+0. Make sure your `gcloud` CLI locally is configured to use the gcloud `dev` environment. You'll need permissions to push a docker image to GCR.
+1. (only needed first time) Run `make docker/login`
+2. Run `make docker/build`
+3. Run `make docker/push`
+    * (if you run into issues, try `gcloud auth login` and `make docker/login`)
+4. Run `make deploy`
+
+
+> TODO: We could setup Google Cloud Run continuous deployments to automatically deploy the `next` branch - but we should try not to rebuild on every commit since the proxy doesn't change often.
+
+
+## Notes
+This repo was cloned and we made some minimal changes needed for a great iframe spectator experience (such as disabling chat and command access, inventory access, a simpler pause menu, making nightime more visible, etc.)
+
+There's still a ton of code bloat here that's not relevant. For example
+* Loading zip world files
+* Single player and P2P modes (which uses memfs, peerjs, and other bloat)
+* Use of local storage (this iframe should be mostly stateless to prevent potential discrepencies as we make changes)
+* Unused Github workflows
+* etc.
+
+
+
+---
+
+# Original docs from the [upstream repo](https://github.com/zardoy/minecraft-web-client)
 
 Minecraft **clone** rewritten in TypeScript using the best modern web technologies. Minecraft vanilla-compatible client and integrated server packaged into a single web app.
 
@@ -14,15 +78,17 @@ For building the project yourself / contributing, see [Development, Debugging &
 
 - Open any zip world file or even folder in read-write mode!
 - Connect to Java servers running in both offline (cracked) and online mode* (it's possible because of proxy servers, see below)
-- Integrated JS server capable of opening Java world saves in any way (folders, zip, web streaming, etc)
+- Integrated JS server clone capable of opening Java world saves in any way (folders, zip, web chunks streaming, etc)
 - Singleplayer mode with simple world generations!
 - Works offline
 - First-class touch (mobile) & controller support
 - First-class keybindings configuration
 - Advanced Resource pack support: Custom GUI, all textures. Server resource packs are supported with proper CORS configuration.
-- Builtin JEI with recipes & descriptions for every item (JEI is creative inventory replacement)
+- Builtin JEI with recipes & descriptions for almost every item (JEI is creative inventory replacement)
+- Custom protocol channel extensions (eg for custom block models in the world)
 - Play with friends over internet! (P2P is powered by Peer.js discovery servers)
 - ~~Google Drive support for reading / saving worlds back to the cloud~~
+- Support for custom rendering 3D engines. Modular architecture.
 - even even more!
 
 All components that are in [Storybook](https://mcraft.fun/storybook) are published as npm module and can be used in other projects: [`minecraft-react`](https://npmjs.com/minecraft-react)
@@ -143,6 +209,7 @@ General:
 
 - **`?setting=<setting_name>:<setting_value>`** - Set and lock the setting on load. You can set multiple settings by separating them with `&` e.g. `?setting=autoParkour:true&setting=renderDistance:4`
 - `?modal=<modal>` - Open specific modal on page load eg `keybindings`. Very useful on UI changes testing during dev. For path use `,` as separator. To get currently opened modal type this in the console: `activeModalStack.at(-1).reactType`
+- `?replayFileUrl=<url>` - Load and start a packet replay session from a URL with a integrated server. For debugging / previewing recorded sessions. The file must be CORS enabled.
 
 Server specific:
 

assets/manifest.json

@@ -1,6 +1,6 @@
 {
-    "name": "Prismarine Web Client",
-    "short_name": "Prismarine Web Client",
+    "name": "Minecraft Web Client",
+    "short_name": "Minecraft Web Client",
     "scope": "./",
     "start_url": "./",
     "icons": [