fix: make it run on ios 15!

Author: zardoy

index.html

@@ -27,6 +27,7 @@
         <div style="font-size: var(--font-size);color: rgb(176, 176, 176);margin-top: 3px;text-align: center" class="subtitle">A true Minecraft client in your browser!</div>
         <!-- small text pre -->
         <div style="font-size: calc(var(--font-size) * 0.6);color: rgb(150, 150, 150);margin-top: 3px;text-align: center;white-space: pre-line;" class="advanced-info"></div>
+        <div style="font-size: calc(var(--font-size) * 0.6);color: rgb(255, 100, 100);margin-top: 10px;text-align: center;display: none;" class="ios-warning">Only iOS 15+ is supported due to performance optimizations</div>
     </div>
 </div>
 `
@@ -36,6 +37,13 @@
           if (!window.pageLoaded) {
             document.documentElement.appendChild(loadingDivElem)
           }
+
+          // iOS version detection
+          const getIOSVersion = () => {
+            const match = navigator.userAgent.match(/OS (\d+)_(\d+)_?(\d+)?/);
+            return match ? parseInt(match[1], 10) : null;
+          }
+
           // load error handling
           const onError = (errorOrMessage, log = false) => {
             let message = errorOrMessage instanceof Error ? (errorOrMessage.stack ?? errorOrMessage.message) : errorOrMessage
@@ -46,6 +54,13 @@
               const [errorMessage, ...errorStack] = message.split('\n')
               document.querySelector('.initial-loader').querySelector('.subtitle').textContent = errorMessage
               document.querySelector('.initial-loader').querySelector('.advanced-info').textContent = errorStack.join('\n')
+
+              // Show iOS warning if applicable
+              const iosVersion = getIOSVersion();
+              if (iosVersion !== null && iosVersion < 15) {
+                document.querySelector('.initial-loader').querySelector('.ios-warning').style.display = 'block';
+              }
+
               if (window.navigator.maxTouchPoints > 1) window.location.hash = '#dev' // show eruda
               // unregister all sw
               if (window.navigator.serviceWorker) {

patches/[email protected]

@@ -1,5 +1,5 @@
 diff --git a/fonts/pixelart-icons-font.css b/fonts/pixelart-icons-font.css
-index 3b2ebe839370d96bf93ef5ca94a827f07e49378d..103ab4d6b9f3b5c9f41d1407e3cbf4ac392fbf41 100644
+index 3b2ebe839370d96bf93ef5ca94a827f07e49378d..4f8d76be2ca6e4ddc43c68d0a6f0f69979165ab4 100644
 --- a/fonts/pixelart-icons-font.css
 +++ b/fonts/pixelart-icons-font.css
 @@ -1,16 +1,13 @@
@@ -10,10 +10,11 @@ index 3b2ebe839370d96bf93ef5ca94a827f07e49378d..103ab4d6b9f3b5c9f41d1407e3cbf4ac
 +  src:
    url("pixelart-icons-font.woff2?t=1711815892278") format("woff2"),
    url("pixelart-icons-font.woff?t=1711815892278") format("woff"),
-   url('pixelart-icons-font.ttf?t=1711815892278') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+-  url('pixelart-icons-font.ttf?t=1711815892278') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 -  url('pixelart-icons-font.svg?t=1711815892278#pixelart-icons-font') format('svg'); /* iOS 4.1- */
++  url('pixelart-icons-font.ttf?t=1711815892278') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  }
- 
+
  [class^="pixelart-icons-font-"], [class*=" pixelart-icons-font-"] {
    font-family: 'pixelart-icons-font' !important;
 -  font-size:24px;

pnpm-lock.yaml

@@ -16,12 +16,22 @@ export const loadThreeJsTextureFromUrlSync = (imageUrl: string) => {
   }
 }
 
+export const createCanvas = (width: number, height: number): OffscreenCanvas => {
+  if (typeof OffscreenCanvas !== 'undefined') {
+    return new OffscreenCanvas(width, height)
+  }
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  return canvas as unknown as OffscreenCanvas // todo-low
+}
+
 export const loadThreeJsTextureFromUrl = async (imageUrl: string) => {
   const loaded = new THREE.TextureLoader().loadAsync(imageUrl)
   return loaded
 }
 export const loadThreeJsTextureFromBitmap = (image: ImageBitmap) => {
-  const canvas = new OffscreenCanvas(image.width, image.height)
+  const canvas = createCanvas(image.width, image.height)
   const ctx = canvas.getContext('2d')!
   ctx.drawImage(image, 0, 0)
   const texture = new THREE.Texture(canvas)
@@ -83,7 +93,7 @@ export async function loadSkinImage (skinUrl: string): Promise<{ canvas: Offscre
   }
 
   const image = await loadImageFromUrl(skinUrl)
-  const skinCanvas = new OffscreenCanvas(64, 64)
+  const skinCanvas = createCanvas(64, 64)
   loadSkinToCanvas(skinCanvas, image)
   return { canvas: skinCanvas, image }
 }

renderer/viewer/lib/utils/skins.ts

@@ -18,7 +18,7 @@ import { isEntityAttackable } from 'mineflayer-mouse/dist/attackableEntity'
 import { Vec3 } from 'vec3'
 import { EntityMetadataVersions } from '../../../src/mcDataTypes'
 import { ItemSpecificContextProperties } from '../lib/basePlayerState'
-import { loadSkinImage, loadSkinFromUsername, stevePngUrl, steveTexture } from '../lib/utils/skins'
+import { loadSkinImage, loadSkinFromUsername, stevePngUrl, steveTexture, createCanvas } from '../lib/utils/skins'
 import { loadTexture } from '../lib/utils'
 import { getBlockMeshFromModel } from './holdingBlock'
 import * as Entity from './entity/EntityMesh'
@@ -96,7 +96,7 @@ function getUsernameTexture ({
   nameTagBackgroundColor = 'rgba(0, 0, 0, 0.3)',
   nameTagTextOpacity = 255
 }: any, { fontFamily = 'sans-serif' }: any) {
-  const canvas = new OffscreenCanvas(64, 64)
+  const canvas = createCanvas(64, 64)
   const ctx = canvas.getContext('2d')
   if (!ctx) throw new Error('Could not get 2d context')
 
@@ -550,7 +550,7 @@ export class Entities {
       let skinCanvas: OffscreenCanvas
       if (skinUrl === stevePngUrl) {
         skinTexture = await steveTexture
-        const canvas = new OffscreenCanvas(64, 64)
+        const canvas = createCanvas(64, 64)
         const ctx = canvas.getContext('2d')
         if (!ctx) throw new Error('Failed to get context')
         ctx.drawImage(skinTexture.image, 0, 0)

renderer/viewer/three/entities.ts

@@ -111,6 +111,22 @@ const appConfig = defineConfig({
             js: 'source-map',
             css: true,
         },
+        minify: {
+            // js: false,
+            jsOptions: {
+                minimizerOptions: {
+                    mangle: {
+                        safari10: true,
+                        keep_classnames: true,
+                        keep_fnames: true,
+                        keep_private_props: true,
+                    },
+                    compress: {
+                        unused: true,
+                    },
+                },
+            },
+        },
         distPath: SINGLE_FILE_BUILD ? {
             html: './single',
         } : undefined,

rsbuild.config.ts

@@ -17,7 +17,7 @@ export default () => {
   if (!isModalActive/*  || conflicts.length === 0 */) return null
 
   const clampText = (text: string) => {
-    if (typeof text !== "string") text = JSON.stringify(text)
+    if (typeof text !== 'string') text = JSON.stringify(text)
     return text.length > 30 ? text.slice(0, 30) + '...' : text
   }