release

Dockerfile

@@ -17,7 +17,7 @@ RUN pnpm i
 # ENTRYPOINT ["pnpm", "run", "run-all"]
 
 # only for prod
-RUN pnpm run build
+RUN GITHUB_REPOSITORY=zardoy/minecraft-web-client pnpm run build
 
 # ---- Run Stage ----
 FROM node:18-alpine

README.MD

@@ -38,11 +38,13 @@ Whatever offline mode you used (zip, folder, just single player), you can always
 
 ![docs-assets/singleplayer-future-city-1-10-2.jpg](./docs-assets/singleplayer-future-city-1-10-2.jpg)
 
-### Servers
+### Servers & Proxy
 
 You can play almost on any Java server, vanilla servers are fully supported.
 See the [Mineflayer](https://github.com/PrismarineJS/mineflayer) repo for the list of supported versions (should support majority of versions).
-There is a builtin proxy, but you can also host your one! Just clone the repo, run `pnpm i` (following CONTRIBUTING.MD) and run `pnpm prod-start`, then you can specify `http://localhost:8080` in the proxy field.
+There is a builtin proxy, but you can also host your one! Just clone the repo, run `pnpm i` (following CONTRIBUTING.MD) and run `pnpm prod-start`, then you can specify `http://localhost:8080` in the proxy field. Or you can deploy it to the cloud service:
+
+[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?name=minecraft-web-client&type=git&repository=zardoy%2Fminecraft-web-client&branch=next&builder=dockerfile&env%5B%5D=&ports=8080%3Bhttp%3B%2F)
 
 Proxy servers are used to connect to Minecraft servers which use TCP protocol. When you connect connect to a server with a proxy, websocket connection is created between you (browser client) and the proxy server located in Europe, then the proxy connects to the Minecraft server and sends the data to the client (you) without any packet deserialization to avoid any additional delays. That said all the Minecraft protocol packets are processed by the client, right in your browser.
 
@@ -139,7 +141,7 @@ Server specific:
 Single player specific:
 
 - `?loadSave=<save_name>` - Load the save on load with the specified folder name (not title)
-- `?singleplayer=1` - Create empty world on load. Nothing will be saved
+- `?singleplayer=1` or `?sp=1` - Create empty world on load. Nothing will be saved
 - `?version=<version>` - Set the version for the singleplayer world (when used with `?singleplayer=1`)
 - `?noSave=true` - Disable auto save on unload / disconnect / export whenever a world is loaded. Only manual save with `/save` command will work.
 - `?serverSetting=<key>:<value>` - Set local server [options](https://github.com/zardoy/space-squid/tree/everything/src/modules.ts#L51). For example `?serverSetting=noInitialChunksSend:true` will disable initial chunks loading on the loading screen.

README.NPM.MD

@@ -6,7 +6,7 @@ Minecraft UI components for React extracted from [mcraft.fun](https://mcraft.fun
 pnpm i minecraft-react
 ```
 
-![demo](https://github-production-user-asset-6210df.s3.amazonaws.com/46503702/346295584-80f3ed4a-cab6-45d2-8896-5e20233cc9b1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240706%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240706T195400Z&X-Amz-Expires=300&X-Amz-Signature=5b063823a57057c4042c15edd1db3edd107e00940fd0e66a2ba1df4e564a2809&X-Amz-SignedHeaders=host&actor_id=46503702&key_id=0&repo_id=432411890)
+![demo](./docs-assets/npm-banner.jpeg)
 
 ## Usage
 

prismarine-viewer/viewer/lib/mesher/models.ts

@@ -126,7 +126,7 @@
   }))
 }
 
 function renderLiquid (world: World, cursor: Vec3, texture: any | undefined, type: number, biome: string, water: boolean, attr: Record<string, any>) {
   const heights: number[] = []
   for (let z = -1; z <= 1; z++) {
     for (let x = -1; x <= 1; x++) {
@@ -238,7 +238,7 @@
 
 let needSectionRecomputeOnChange = false
 
 function renderElement (world: World, cursor: Vec3, element: BlockElement, doAO: boolean, attr: MesherGeometryOutput, globalMatrix: any, globalShift: any, block: Block, biome: string) {
   const position = cursor
   // const key = `${position.x},${position.y},${position.z}`
   // if (!globalThis.allowedBlocks.includes(key)) return
@@ -484,7 +484,7 @@
           }
         }
         if (invisibleBlocks.has(block.name)) continue
-        if (block.name.includes('_sign') || block.name === 'sign') {
+        if ((block.name.includes('_sign') || block.name === 'sign') && !world.config.disableSignsMapsSupport) {
           const key = `${cursor.x},${cursor.y},${cursor.z}`
           const props: any = block.getProperties()
           const facingRotationMap = {

prismarine-viewer/viewer/lib/mesher/shared.ts

@@ -7,7 +7,9 @@ export const defaultMesherConfig = {
   smoothLighting: true,
   outputFormat: 'threeJs' as 'threeJs' | 'webgpu',
   textureSize: 1024, // for testing
-  debugModelVariant: undefined as undefined | number[]
+  debugModelVariant: undefined as undefined | number[],
+  clipWorldBelowY: undefined as undefined | number,
+  disableSignsMapsSupport: false
 }
 
 export type MesherConfig = typeof defaultMesherConfig

prismarine-viewer/viewer/lib/viewer.ts

@@ -99,7 +99,7 @@ export class Viewer {
 
   setBlockStateId (pos: Vec3, stateId: number) {
     if (!this.world.loadedChunks[`${Math.floor(pos.x / 16) * 16},${Math.floor(pos.z / 16) * 16}`]) {
-      console.warn('[should be unreachable] setBlockStateId called for unloaded chunk', pos)
+      console.debug('[should be unreachable] setBlockStateId called for unloaded chunk', pos)
     }
     this.world.setBlockStateId(pos, stateId)
   }

prismarine-viewer/viewer/lib/worldrendererCommon.ts

@@ -321,6 +321,10 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
     console.log('texture loaded')
   }
 
+  get worldMinYRender () {
+    return Math.floor(Math.max(this.worldConfig.minY, this.mesherConfig.clipWorldBelowY ?? -Infinity) / 16) * 16
+  }
+
   addColumn (x: number, z: number, chunk: any, isLightUpdate: boolean) {
     if (!this.active) return
     if (this.workers.length === 0) throw new Error('workers not initialized yet')
@@ -330,7 +334,7 @@ export abstract class WorldRendererCommon<WorkerSend = any, WorkerReceive = any>
       // todo optimize
       worker.postMessage({ type: 'chunk', x, z, chunk })
     }
-    for (let y = this.worldConfig.minY; y < this.worldConfig.worldHeight; y += 16) {
+    for (let y = this.worldMinYRender; y < this.worldConfig.worldHeight; y += 16) {
       const loc = new Vec3(x, y, z)
       this.setSectionDirty(loc)
       if (this.neighborChunkUpdates && (!isLightUpdate || this.mesherConfig.smoothLighting)) {

scripts/build.js

@@ -52,6 +52,7 @@ exports.getSwAdditionalEntries = () => {
         '*.png',
         '*.woff',
         'mesher.js',
+        'manifest.json',
         'worldSaveWorker.js',
         `textures/entity/squid/squid.png`,
         // everything but not .map

scripts/dockerPrepare.mjs

@@ -2,6 +2,11 @@
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
+import { execSync } from 'child_process'
+
+// write release tag
+const commitShort = execSync('git rev-parse --short HEAD').toString().trim()
+fs.writeFileSync('./assets/release.json', JSON.stringify({ latestTag: `${commitShort} (docker)` }), 'utf8')
 
 const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'))
 delete packageJson.optionalDependencies

src/botUtils.ts

@@ -1,4 +1,5 @@
 import { versionToNumber } from 'prismarine-viewer/viewer/prepare/utils'
+import * as nbt from 'prismarine-nbt'
 
 export const displayClientChat = (text: string) => {
   const message = {
@@ -18,3 +19,22 @@ export const displayClientChat = (text: string) => {
     sender: 'minecraft:chat'
   })
 }
+
+export const parseFormattedMessagePacket = (arg) => {
+  if (typeof arg === 'object') {
+    try {
+      return {
+        formatted: nbt.simplify(arg),
+        plain: ''
+      }
+    } catch (err) {
+      console.warn('Failed to parse formatted message', arg, err)
+      return {
+        plain: JSON.stringify(arg)
+      }
+    }
+  }
+  return {
+    plain: String(arg)
+  }
+}

src/flyingSquidEvents.ts

@@ -1,4 +1,7 @@
+import { saveServer } from './flyingSquidUtils'
+import { watchUnloadForCleanup } from './gameUnload'
 import { showModal } from './globalState'
+import { options } from './optionsStorage'
 import { chatInputValueGlobal } from './react/Chat'
 import { showNotification } from './react/NotificationProvider'
 
@@ -10,4 +13,15 @@ export default () => {
       showModal({ reactType: 'chat' })
     })
   })
+
+  if (options.singleplayerAutoSave) {
+    const autoSaveInterval = setInterval(() => {
+      if (options.singleplayerAutoSave) {
+        void saveServer(true)
+      }
+    }, 2000)
+    watchUnloadForCleanup(() => {
+      clearInterval(autoSaveInterval)
+    })
+  }
 }

src/index.ts

@@ -102,6 +102,7 @@ import packetsPatcher from './packetsPatcher'
 import { mainMenuState } from './react/MainMenuRenderApp'
 import { ItemsRenderer } from 'mc-assets/dist/itemsRenderer'
 import './mobileShim'
+import { parseFormattedMessagePacket } from './botUtils'
 
 window.debug = debug
 window.THREE = THREE
@@ -402,7 +403,9 @@ async function connect (connectOptions: ConnectOptions) {
       setLoadingScreenStatus(`Loading data for ${version}`)
       if (!document.fonts.check('1em mojangles')) {
         // todo instead re-render signs on load
-        await document.fonts.load('1em mojangles').catch(() => { })
+        await document.fonts.load('1em mojangles').catch(() => {
+          console.error('Failed to load font, signs wont be rendered correctly')
+        })
       }
       await window._MC_DATA_RESOLVER.promise // ensure data is loaded
       await downloadSoundsIfNeeded()
@@ -457,7 +460,7 @@ async function connect (connectOptions: ConnectOptions) {
       flyingSquidEvents()
     }
 
-    if (connectOptions.authenticatedAccount) username = 'not-used'
+    if (connectOptions.authenticatedAccount) username = 'you'
     let initialLoadingText: string
     if (singleplayer) {
       initialLoadingText = 'Local server is still starting'
@@ -637,14 +640,7 @@ async function connect (connectOptions: ConnectOptions) {
 
   bot.on('kicked', (kickReason) => {
     console.log('You were kicked!', kickReason)
-    let kickReasonString = typeof kickReason === 'string' ? kickReason : JSON.stringify(kickReason)
-    let kickReasonFormatted = undefined as undefined | Record<string, any>
-    if (typeof kickReason === 'object') {
-      try {
-        kickReasonFormatted = nbt.simplify(kickReason)
-        kickReasonString = ''
-      } catch {}
-    }
+    const { formatted: kickReasonFormatted, plain: kickReasonString } = parseFormattedMessagePacket(kickReason)
     setLoadingScreenStatus(`The Minecraft server kicked you. Kick reason: ${kickReasonString}`, true, undefined, undefined, kickReasonFormatted)
     destroyAll()
   })
@@ -932,7 +928,7 @@ watchValue(miscUiState, async s => {
     const qs = new URLSearchParams(window.location.search)
     const moreServerOptions = {} as Record<string, any>
     if (qs.has('version')) moreServerOptions.version = qs.get('version')
-    if (qs.get('singleplayer') === '1') {
+    if (qs.get('singleplayer') === '1' || qs.get('sp') === '1') {
       loadSingleplayer({}, {
         worldFolder: undefined,
         ...moreServerOptions

src/microsoftAuthflow.ts

@@ -31,6 +31,7 @@ export default async ({ tokenCaches, proxyBaseUrl, setProgressText = (text) => {
   const authFlow = {
     async getMinecraftJavaToken () {
       setProgressText('Authenticating with Microsoft account')
+      if (!window.crypto && !isPageSecure()) throw new Error('Crypto API is available only in secure contexts. Be sure to use https!')
       let result = null
       await fetch(authEndpoint, {
         method: 'POST',
@@ -43,49 +44,52 @@ export default async ({ tokenCaches, proxyBaseUrl, setProgressText = (text) => {
           connectingServer,
           connectingServerVersion: connectingVersion
         }),
-      }).then(async response => {
-        if (!response.ok) {
-          throw new Error(`Auth server error (${response.status}): ${await response.text()}`)
-        }
+      })
+        .catch(e => {
+          throw new Error(`Failed to connect to auth server (network error): ${e.message}`)
+        })
+        .then(async response => {
+          if (!response.ok) {
+            throw new Error(`Auth server error (${response.status}): ${await response.text()}`)
+          }
 
-        const reader = response.body!.getReader()
-        const decoder = new TextDecoder('utf8')
+          const reader = response.body!.getReader()
+          const decoder = new TextDecoder('utf8')
 
-        const processText = ({ done, value = undefined as Uint8Array | undefined }) => {
-          if (done) {
-            return
-          }
+          const processText = ({ done, value = undefined as Uint8Array | undefined }) => {
+            if (done) {
+              return
+            }
 
-          const processChunk = (chunkStr) => {
-            try {
-              const json = JSON.parse(chunkStr)
+            const processChunk = (chunkStr) => {
+              let json: any
+              try {
+                json = JSON.parse(chunkStr)
+              } catch (err) {}
+              if (!json) return
               if (json.user_code) {
                 onMsaCodeCallback(json)
                 // this.codeCallback(json)
               }
               if (json.error) throw new Error(json.error)
               if (json.token) result = json
               if (json.newCache) setCacheResult(json.newCache)
-            } catch (err) {
             }
-          }
 
-          const strings = decoder.decode(value)
+            const strings = decoder.decode(value)
 
-          for (const chunk of strings.split('\n\n')) {
-            processChunk(chunk)
-          }
+            for (const chunk of strings.split('\n\n')) {
+              processChunk(chunk)
+            }
 
+            return reader.read().then(processText)
+          }
           return reader.read().then(processText)
-        }
-        return reader.read().then(processText)
-      })
-      if (!window.crypto && !isPageSecure()) throw new Error('Crypto API is available only in secure contexts. Be sure to use https!')
+        })
       const restoredData = await restoreData(result)
-      if (!restoredData?.certificates?.profileKeys?.privatePEM) {
-        throw new Error(`Authentication server issue: it didn't return auth data. Most probably because the auth request was rejected by the end authority and retrying won't help until the issue is resolved.`)
+      if (restoredData?.certificates?.profileKeys?.privatePEM) {
+        restoredData.certificates.profileKeys.private = restoredData.certificates.profileKeys.privatePEM
       }
-      restoredData.certificates.profileKeys.private = restoredData.certificates.profileKeys.privatePEM
       return restoredData
     }
   }

src/optionsGuiScheme.tsx

@@ -74,7 +74,7 @@ export const guiOptionsScheme: {
       },
       smoothLighting: {},
       newVersionsLighting: {
-        text: 'Lighting in newer versions',
+        text: 'Lighting in Newer Versions',
       },
       lowMemoryMode: {
         text: 'Low Memory Mode',
@@ -98,6 +98,19 @@ export const guiOptionsScheme: {
         ],
       },
     },
+    {
+      custom () {
+        return <Category>Resource Packs</Category>
+      },
+      serverResourcePacks: {
+        text: 'Download From Server',
+        values: [
+          'prompt',
+          'always',
+          'never'
+        ],
+      }
+    }
   ],
   main: [
     {

src/optionsStorage.ts

@@ -52,6 +52,9 @@ const defaultOptions = {
 
   // antiAliasing: false,
 
+  clipWorldBelowY: undefined as undefined | number, // will be removed
+  disableSignsMapsSupport: false,
+  singleplayerAutoSave: false,
   showChunkBorders: false, // todo rename option
   frameLimit: false as number | false,
   alwaysBackupWorldBeforeLoading: undefined as boolean | undefined | null,
@@ -157,7 +160,7 @@ subscribe(options, () => {
   localStorage.options = JSON.stringify(saveOptions)
 })
 
-type WatchValue = <T extends Record<string, any>>(proxy: T, callback: (p: T) => void) => void
+type WatchValue = <T extends Record<string, any>>(proxy: T, callback: (p: T, isChanged: boolean) => void) => void
 
 export const watchValue: WatchValue = (proxy, callback) => {
   const watchedProps = new Set<string>()
@@ -166,10 +169,10 @@ export const watchValue: WatchValue = (proxy, callback) => {
       watchedProps.add(p.toString())
       return Reflect.get(target, p, receiver)
     },
-  }))
+  }), false)
   for (const prop of watchedProps) {
     subscribeKey(proxy, prop, () => {
-      callback(proxy)
+      callback(proxy, true)
     })
   }
 }

src/react/AddServerOrConnect.tsx

@@ -22,15 +22,15 @@ interface Props {
   initialData?: BaseServerInfo
   parseQs?: boolean
   onQsConnect?: (server: BaseServerInfo) => void
-  defaults?: Pick<BaseServerInfo, 'proxyOverride' | 'usernameOverride'>
+  placeholders?: Pick<BaseServerInfo, 'proxyOverride' | 'usernameOverride'>
   accounts?: string[]
   authenticatedAccounts?: number
   versions?: string[]
 }
 
 const ELEMENTS_WIDTH = 190
 
-export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQs, onQsConnect, defaults, accounts, versions, authenticatedAccounts }: Props) => {
+export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQs, onQsConnect, placeholders, accounts, versions, authenticatedAccounts }: Props) => {
   const qsParams = parseQs ? new URLSearchParams(window.location.search) : undefined
   const qsParamName = qsParams?.get('name')
   const qsParamIp = qsParams?.get('ip')
@@ -111,8 +111,8 @@ export default ({ onBack, onConfirm, title = 'Add a Server', initialData, parseQ
           />
         </div>
 
-        <InputWithLabel label="Proxy Override" value={proxyOverride} disabled={lockConnect && qsParamProxy !== null} onChange={({ target: { value } }) => setProxyOverride(value)} placeholder={defaults?.proxyOverride} />
-        <InputWithLabel label="Username Override" value={usernameOverride} disabled={!noAccountSelected || lockConnect && qsParamUsername !== null} onChange={({ target: { value } }) => setUsernameOverride(value)} placeholder={defaults?.usernameOverride} />
+        <InputWithLabel label="Proxy Override" value={proxyOverride} disabled={lockConnect && qsParamProxy !== null} onChange={({ target: { value } }) => setProxyOverride(value)} placeholder={placeholders?.proxyOverride} />
+        <InputWithLabel label="Username Override" value={usernameOverride} disabled={!noAccountSelected || lockConnect && qsParamUsername !== null} onChange={({ target: { value } }) => setUsernameOverride(value)} placeholder={placeholders?.usernameOverride} />
         <label style={{
           display: 'flex',
           flexDirection: 'column',