minecraft-renderer 0.1.0

package/src/lib/simpleUtils.ts

@@ -0,0 +1,40 @@
+export async function getBufferFromStream (stream) {
+  return new Promise((resolve, reject) => {
+    let buffer = Buffer.from([])
+    stream.on('data', buf => {
+      buffer = Buffer.concat([buffer, buf])
+    })
+    stream.on('end', () => resolve(buffer))
+    stream.on('error', reject)
+  })
+}
+
+// used for custom blocks
+export function getBlockPosKey (pos: { x: number, y: number, z: number }) {
+  return `${pos.x},${pos.y},${pos.z}`
+}
+
+export function openURL (url, newTab = true) {
+  if (newTab) {
+    window.open(url, '_blank', 'noopener,noreferrer')
+  } else {
+    window.open(url, '_self')
+  }
+}
+
+export const isMobile = () => {
+  return window.matchMedia('(pointer: coarse)').matches || navigator.userAgent.includes('Mobile')
+}
+
+export function chunkPos (pos: { x: number, z: number }) {
+  const x = Math.floor(pos.x / 16)
+  const z = Math.floor(pos.z / 16)
+  return [x, z]
+}
+
+export function sectionPos (pos: { x: number, y: number, z: number }) {
+  const x = Math.floor(pos.x / 16)
+  const y = Math.floor(pos.y / 16)
+  const z = Math.floor(pos.z / 16)
+  return [x, y, z]
+}

package/src/lib/smoothSwitcher.ts

@@ -0,0 +1,168 @@
+import * as tweenJs from '@tweenjs/tween.js'
+import { AnimationController } from './animationController'
+
+export type StateProperties = Record<string, number>
+export type StateGetterFn = () => StateProperties
+export type StateSetterFn = (property: string, value: number) => void
+
+// Speed in units per second for each property type
+const DEFAULT_SPEEDS = {
+  x: 3000, // pixels/units per second
+  y: 3000,
+  z: 3000,
+  rotation: Math.PI, // radians per second
+  scale: 1, // scale units per second
+  default: 3000 // default speed for unknown properties
+}
+
+export class SmoothSwitcher {
+  private readonly animationController = new AnimationController()
+  // private readonly currentState: StateProperties = {}
+  private readonly defaultState: StateProperties
+  private readonly speeds: Record<string, number>
+  public currentStateName = ''
+  public transitioningToStateName = ''
+
+  constructor (
+    public getState: StateGetterFn,
+    public setState: StateSetterFn,
+    speeds?: Partial<Record<string, number>>
+  ) {
+
+    // Initialize speeds with defaults and overrides
+    this.speeds = { ...DEFAULT_SPEEDS }
+    if (speeds) {
+      Object.assign(this.speeds, speeds)
+    }
+
+    // Store initial values
+    this.defaultState = this.getState()
+  }
+
+  /**
+   * Calculate transition duration based on the largest property change
+   */
+  private calculateDuration (newState: Partial<StateProperties>): number {
+    let maxDuration = 0
+    const currentState = this.getState()
+
+    for (const [key, targetValue] of Object.entries(newState)) {
+      const currentValue = currentState[key]
+      const diff = Math.abs(targetValue! - currentValue)
+      const speed = this.getPropertySpeed(key)
+      const duration = (diff / speed) * 1000 // Convert to milliseconds
+
+      maxDuration = Math.max(maxDuration, duration)
+    }
+
+    // Ensure minimum duration of 50ms and maximum of 2000ms
+    return Math.min(Math.max(maxDuration, 200), 2000)
+  }
+
+  private getPropertySpeed (property: string): number {
+    // Check for specific property speed
+    if (property in this.speeds) {
+      return this.speeds[property]
+    }
+
+    // Check for property type (rotation, scale, etc.)
+    if (property.toLowerCase().includes('rotation')) return this.speeds.rotation
+    if (property.toLowerCase().includes('scale')) return this.speeds.scale
+    if (property.toLowerCase() === 'x' || property.toLowerCase() === 'y' || property.toLowerCase() === 'z') {
+      return this.speeds[property]
+    }
+
+    return this.speeds.default
+  }
+
+  /**
+   * Start a transition to a new state
+   * @param newState Partial state - only need to specify properties that change
+   * @param easing Easing function to use
+   */
+  startTransition (
+    newState: Partial<StateProperties>,
+    stateName?: string,
+    onEnd?: () => void,
+    easing: (amount: number) => number = tweenJs.Easing.Linear.None,
+    onCancelled?: () => void
+  ): void {
+    if (this.isTransitioning) {
+      this.animationController.forceFinish(false)
+    }
+
+    this.transitioningToStateName = stateName ?? ''
+    const state = this.getState()
+
+    const duration = this.calculateDuration(newState)
+    // console.log('duration', duration, JSON.stringify(state), JSON.stringify(newState))
+
+    void this.animationController.startAnimation(() => {
+      const group = new tweenJs.Group()
+      new tweenJs.Tween(state, group)
+        .to(newState, duration)
+        .easing(easing)
+        .onUpdate((obj) => {
+          for (const key of Object.keys(obj)) {
+            this.setState(key, obj[key])
+          }
+        })
+        .onComplete(() => {
+          this.animationController.forceFinish()
+          this.currentStateName = this.transitioningToStateName
+          this.transitioningToStateName = ''
+          onEnd?.()
+        })
+        .start()
+      return group
+    }, onCancelled)
+  }
+
+  /**
+   * Reset to default state
+   */
+  reset (): void {
+    this.startTransition(this.defaultState)
+  }
+
+
+  /**
+   * Update the animation (should be called in your render/update loop)
+   */
+  update (): void {
+    this.animationController.update()
+  }
+
+  /**
+   * Force finish the current transition
+   */
+  forceFinish (): void {
+    this.animationController.forceFinish()
+  }
+
+  /**
+   * Start a new transition to the specified state
+   */
+  transitionTo (
+    newState: Partial<StateProperties>,
+    stateName?: string,
+    onEnd?: () => void,
+    onCancelled?: () => void
+  ): void {
+    this.startTransition(newState, stateName, onEnd, tweenJs.Easing.Linear.None, onCancelled)
+  }
+
+  /**
+   * Get the current value of a property
+   */
+  getCurrentValue (property: string): number {
+    return this.getState()[property]
+  }
+
+  /**
+   * Check if currently transitioning
+   */
+  get isTransitioning (): boolean {
+    return this.animationController.isActive
+  }
+}

package/src/lib/spiral.ts

@@ -0,0 +1,29 @@
+export function generateSpiralMatrix(distance: number): [number, number][] {
+  const n = distance * 2 + 1
+  if (n <= 0) {
+    return []
+  }
+
+  const matrix: [number, number][] = []
+  let x = 0
+  let y = 0
+  let dx = 0
+  let dy = -1
+
+  for (let i = 0; i < n * n; i++) {
+    if (Math.abs(x) <= n / 2 && Math.abs(y) <= n / 2) {
+      matrix.push([x, y])
+    }
+
+    if (x === y || (x < 0 && x === -y) || (x > 0 && x === 1 - y)) {
+      const temp = dx
+      dx = -dy
+      dy = temp
+    }
+
+    x += dx
+    y += dy
+  }
+
+  return matrix
+}

package/src/lib/ui/newStats.ts

@@ -0,0 +1,120 @@
+/* eslint-disable unicorn/prefer-dom-node-text-content */
+import { isWebWorker } from '../../three/documentRenderer'
+
+const rightOffset = 0
+
+const stats = {}
+
+let lastY = 40
+export const addNewStat = (id: string, width = 80, x = rightOffset, y = lastY) => {
+  if (isWebWorker) return { updateText () {}, setVisibility () {} }
+
+  const pane = document.createElement('div')
+  pane.style.position = 'fixed'
+  pane.style.top = `${y ?? lastY}px`
+  pane.style.right = `${x}px`
+  // gray bg
+  pane.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'
+  pane.style.color = 'white'
+  pane.style.padding = '2px'
+  pane.style.fontFamily = 'monospace'
+  pane.style.fontSize = '12px'
+  pane.style.zIndex = '100'
+  pane.style.pointerEvents = 'none'
+  document.body.appendChild(pane)
+  stats[id] = pane
+  if (y === undefined && x === rightOffset) { // otherwise it's a custom position
+    // rightOffset += width
+    lastY += 20
+  }
+
+  return {
+    updateText (text: string) {
+      if (pane.innerText === text) return
+      pane.innerText = text
+    },
+    setVisibility (visible: boolean) {
+      pane.style.display = visible ? 'block' : 'none'
+    }
+  }
+}
+
+export const addNewStat2 = (id: string, { top, bottom, right, left, displayOnlyWhenWider }: { top?: number, bottom?: number, right?: number, left?: number, displayOnlyWhenWider?: number }) => {
+  if (isWebWorker) return { updateText () {}, setVisibility () {} }
+
+  if (top === undefined && bottom === undefined) top = 0
+  const pane = document.createElement('div')
+  pane.style.position = 'fixed'
+  if (top !== undefined) {
+    pane.style.top = `${top}px`
+  }
+  if (bottom !== undefined) {
+    pane.style.bottom = `${bottom}px`
+  }
+  if (left !== undefined) {
+    pane.style.left = `${left}px`
+  }
+  if (right !== undefined) {
+    pane.style.right = `${right}px`
+  }
+  // gray bg
+  pane.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'
+  pane.style.color = 'white'
+  pane.style.padding = '2px'
+  pane.style.fontFamily = 'monospace'
+  pane.style.fontSize = '12px'
+  pane.style.zIndex = '10000'
+  pane.style.pointerEvents = 'none'
+  document.body.appendChild(pane)
+  stats[id] = pane
+
+  const resizeCheck = () => {
+    if (!displayOnlyWhenWider) return
+    pane.style.display = window.innerWidth > displayOnlyWhenWider ? 'block' : 'none'
+  }
+  window.addEventListener('resize', resizeCheck)
+  resizeCheck()
+
+  return {
+    updateText (text: string) {
+      pane.innerText = text
+    },
+    setVisibility (visible: boolean) {
+      pane.style.display = visible ? 'block' : 'none'
+    }
+  }
+}
+
+export const updateStatText = (id, text) => {
+  if (isWebWorker || !stats[id]) return
+  stats[id].innerText = text
+}
+
+export const updatePanesVisibility = (visible: boolean) => {
+  if (isWebWorker) return
+  // eslint-disable-next-line guard-for-in
+  for (const id in stats) {
+    stats[id].style.display = visible ? 'block' : 'none'
+  }
+}
+
+export const removeAllStats = () => {
+  if (isWebWorker) return
+  // eslint-disable-next-line guard-for-in
+  for (const id in stats) {
+    removeStat(id)
+  }
+}
+
+export const removeStat = (id) => {
+  if (isWebWorker || !stats[id]) return
+  stats[id].remove()
+  delete stats[id]
+}
+
+if (typeof customEvents !== 'undefined' && !isWebWorker) {
+  customEvents.on('gameLoaded', () => {
+    const chunksLoaded = addNewStat('chunks-loaded', 80, 0, 0)
+    const chunksTotal = addNewStat('chunks-read', 80, 0, 0)
+  })
+}

package/src/lib/utils/proxy.ts

@@ -0,0 +1,23 @@
+import { subscribeKey } from 'valtio/utils'
+
+// eslint-disable-next-line max-params
+export function watchProperty<T extends Record<string, any>, K> (asyncGetter: (value: T[keyof T]) => Promise<K>, valtioProxy: T, key: keyof T, readySetter: (res: K) => void, cleanup?: (res: K) => void) {
+  let i = 0
+  let lastRes: K | undefined
+  const request = async () => {
+    const req = ++i
+    const res = await asyncGetter(valtioProxy[key])
+    if (req === i) {
+      if (lastRes) {
+        cleanup?.(lastRes)
+      }
+      readySetter(res)
+      lastRes = res
+    } else {
+      // rejected
+      cleanup?.(res)
+    }
+  }
+  void request()
+  return subscribeKey(valtioProxy, key, request)
+}

package/src/lib/utils/skins.ts

@@ -0,0 +1,63 @@
+import { loadSkinToCanvas } from 'skinview-utils'
+import * as THREE from 'three'
+import stevePng from 'mc-assets/dist/other-textures/latest/entity/player/wide/steve.png'
+import { loadThreeJsTextureFromUrl } from '../../three/threeJsUtils'
+import { createCanvas, loadImageFromUrl } from '../utils'
+
+export const stevePngUrl = stevePng
+export const steveTexture = loadThreeJsTextureFromUrl(stevePngUrl)
+
+const config = {
+  apiEnabled: true,
+}
+
+export const setSkinsConfig = (newConfig: Partial<typeof config>) => {
+  Object.assign(config, newConfig)
+}
+
+export async function loadSkinFromUsername (username: string, type: 'skin' | 'cape'): Promise<string | undefined> {
+  if (!config.apiEnabled) return
+
+  if (type === 'cape') return
+  const url = `https://playerdb.co/api/player/minecraft/${username}`
+  const response = await fetch(url)
+  if (!response.ok) return
+
+  const data: {
+    data: {
+      player: {
+        skin_texture: string
+      }
+    }
+  } = await response.json()
+  return data.data.player.skin_texture
+}
+
+export const parseSkinTexturesValue = (value: string) => {
+  const decodedData: {
+    textures: {
+      SKIN: {
+        url: string
+      }
+    }
+  } = JSON.parse(Buffer.from(value, 'base64').toString())
+  return decodedData.textures?.SKIN?.url
+}
+
+export async function loadSkinImage (skinUrl: string): Promise<{ canvas: OffscreenCanvas, image: ImageBitmap }> {
+  if (!skinUrl.startsWith('data:')) {
+    skinUrl = await fetchAndConvertBase64Skin(skinUrl.replace('http://', 'https://'))
+  }
+
+  const image = await loadImageFromUrl(skinUrl)
+  const skinCanvas = createCanvas(64, 64)
+  loadSkinToCanvas(skinCanvas, image)
+  return { canvas: skinCanvas, image }
+}
+
+const fetchAndConvertBase64Skin = async (skinUrl: string) => {
+  const response = await fetch(skinUrl, { })
+  const arrayBuffer = await response.arrayBuffer()
+  const base64 = Buffer.from(arrayBuffer).toString('base64')
+  return `data:image/png;base64,${base64}`
+}

package/src/lib/utils.ts

@@ -0,0 +1,76 @@
+export const loadScript = async function (scriptSrc: string, highPriority = true): Promise<HTMLScriptElement> {
+  const existingScript = document.querySelector<HTMLScriptElement>(`script[src="${scriptSrc}"]`)
+  if (existingScript) {
+    return existingScript
+  }
+
+  return new Promise((resolve, reject) => {
+    const scriptElement = document.createElement('script')
+    scriptElement.src = scriptSrc
+
+    if (highPriority) {
+      scriptElement.fetchPriority = 'high'
+    }
+    scriptElement.async = true
+
+    scriptElement.addEventListener('load', () => {
+      resolve(scriptElement)
+    })
+
+    scriptElement.onerror = (error) => {
+      reject(new Error(typeof error === 'string' ? error : (error as any).message))
+      scriptElement.remove()
+    }
+
+    document.head.appendChild(scriptElement)
+  })
+}
+
+const detectFullOffscreenCanvasSupport = () => {
+  if (typeof OffscreenCanvas === 'undefined') return false
+  try {
+    const canvas = new OffscreenCanvas(1, 1)
+    // Try to get a WebGL context - this will fail on iOS where only 2D is supported (iOS 16)
+    const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')
+    return gl !== null
+  } catch (e) {
+    return false
+  }
+}
+
+const hasFullOffscreenCanvasSupport = detectFullOffscreenCanvasSupport()
+
+export const createCanvas = (width: number, height: number): OffscreenCanvas => {
+  if (hasFullOffscreenCanvasSupport) {
+    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 async function loadImageFromUrl(imageUrl: string): Promise<ImageBitmap> {
+  const response = await fetch(imageUrl)
+  const blob = await response.blob()
+  return createImageBitmap(blob)
+}
+
+export const versionToNumber = (ver: string) => {
+  const [x, y = '0', z = '0'] = ver.split('.')
+  return +`${x.padStart(2, '0')}${y.padStart(2, '0')}${z.padStart(2, '0')}`
+}
+
+export const versionToMajor = (version: string) => {
+  const [x, y = '0'] = version.split('.')
+  return `${x.padStart(2, '0')}.${y.padStart(2, '0')}`
+}
+
+export const versionsMapToMajor = <T>(versionsMap: Record<string, T>) => {
+  const majorVersions = {} as Record<string, T>
+  for (const [ver, data] of Object.entries(versionsMap)) {
+    const major = versionToMajor(ver)
+    majorVersions[major] = data
+  }
+  return majorVersions
+}