@worldmesh/runtime 0.1.0

package/dist/ui/overlay.js

@@ -0,0 +1,370 @@
+import { isTouchDevice } from '../controls/touch.js';
+const STYLE_ID = 'worldmesh-overlay-style';
+const CSS = `
+.wm-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #f2f6fb;
+  z-index: 2147483000;
+}
+.wm-overlay * { box-sizing: border-box; }
+.wm-crosshair {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  margin: -3px 0 0 -3px;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.85);
+  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.45);
+  opacity: 0;
+  transition: opacity .15s ease;
+}
+.wm-overlay[data-locked="true"] .wm-crosshair { opacity: 1; }
+.wm-lock {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  background: rgba(8,11,16,0.72);
+  backdrop-filter: blur(6px);
+  pointer-events: auto;
+  cursor: pointer;
+  text-align: center;
+  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+.wm-overlay[data-locked="true"] .wm-lock { display: none; }
+.wm-lock-content {
+  margin: auto 0;
+  width: 100%;
+  max-width: 440px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 0;
+  box-sizing: border-box;
+}
+.wm-lock-title {
+  font-size: clamp(22px, 5vw, 34px);
+  font-weight: 600;
+  letter-spacing: .01em;
+  margin: 0;
+}
+.wm-lock-cta {
+  font-size: 13.5px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  padding: 12px 28px;
+  border: 1px solid rgba(255,255,255,0.35);
+  border-radius: 999px;
+  background: rgba(255,255,255,0.1);
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: all .15s ease;
+}
+.wm-lock-cta:hover, .wm-lock-cta:active {
+  background: rgba(255,255,255,0.22);
+  border-color: rgba(255,255,255,0.6);
+  transform: scale(1.02);
+}
+.wm-keys {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 14px;
+  width: 100%;
+  max-width: 420px;
+  font-size: 13px;
+  opacity: .9;
+  box-sizing: border-box;
+  padding: 0 4px;
+}
+.wm-keys-item {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+}
+.wm-key {
+  flex-shrink: 0;
+  min-width: 20px;
+  padding: 2.5px 6px;
+  border-radius: 5px;
+  border: 1px solid rgba(255,255,255,0.28);
+  background: rgba(255,255,255,0.08);
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 1.25;
+}
+.wm-key-desc {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: rgba(255,255,255,0.85);
+}
+.wm-prompt {
+  position: absolute;
+  left: 50%;
+  top: 58%;
+  transform: translateX(-50%);
+  padding: 10px 18px;
+  border-radius: 999px;
+  background: rgba(8,11,16,0.85);
+  border: 1px solid rgba(255,255,255,0.3);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
+  font-size: 14px;
+  display: none;
+  white-space: nowrap;
+  pointer-events: auto;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: transform .12s ease, border-color .12s ease;
+}
+.wm-prompt:hover, .wm-prompt:active {
+  transform: translateX(-50%) scale(1.04);
+  border-color: rgba(255,255,255,0.6);
+}
+.wm-overlay[data-locked="true"] .wm-prompt[data-visible="true"] { display: block; }
+.wm-badge {
+  position: absolute;
+  left: max(14px, env(safe-area-inset-left));
+  bottom: max(12px, env(safe-area-inset-bottom));
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.72);
+  text-decoration: none;
+  pointer-events: auto;
+  padding: 6px 10px;
+  border-radius: 7px;
+  background: rgba(8,11,16,0.45);
+  border: 1px solid rgba(255,255,255,0.12);
+}
+.wm-badge:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
+.wm-badge-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #6cf0ff;
+  box-shadow: 0 0 8px #6cf0ff;
+}
+.wm-hint {
+  position: absolute;
+  right: max(14px, env(safe-area-inset-right));
+  bottom: max(12px, env(safe-area-inset-bottom));
+  font-size: 11px;
+  letter-spacing: .1em;
+  color: rgba(255,255,255,0.5);
+  opacity: 0;
+  transition: opacity .2s ease;
+}
+.wm-overlay[data-locked="true"] .wm-hint { opacity: 1; }
+
+@media (max-width: 400px) {
+  .wm-lock {
+    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
+  }
+  .wm-lock-content {
+    gap: 12px;
+  }
+  .wm-lock-title {
+    font-size: 20px;
+  }
+  .wm-lock-cta {
+    padding: 10px 22px;
+    font-size: 12px;
+  }
+  .wm-keys {
+    gap: 6px 8px;
+  }
+  .wm-keys-item {
+    gap: 5px;
+  }
+  .wm-key {
+    font-size: 10px;
+    padding: 2px 5px;
+  }
+  .wm-key-desc {
+    font-size: 11px;
+  }
+}
+
+@media (max-height: 520px) {
+  .wm-lock {
+    padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
+  }
+  .wm-lock-content {
+    gap: 10px;
+  }
+  .wm-lock-title {
+    font-size: 18px;
+  }
+  .wm-lock-cta {
+    padding: 8px 20px;
+    font-size: 12px;
+  }
+  .wm-keys {
+    gap: 4px 10px;
+  }
+  .wm-key {
+    font-size: 9.5px;
+    padding: 2px 4px;
+  }
+  .wm-key-desc {
+    font-size: 11px;
+  }
+}
+`;
+const KEY_LEGEND = [
+    ['WASD / ↑←↓→', 'Move'],
+    ['Mouse / Drag', 'Look'],
+    ['Space / ▲', 'Jump'],
+    ['Shift', 'Sprint'],
+    ['E', 'Interact'],
+    ['V', 'Camera'],
+    ['1 – 0', 'Face'],
+    ['Esc / ⏸', 'Menu / Pause'],
+];
+/**
+ * The shared chrome of a WorldMesh world. Every world shows the same
+ * click/tap-to-enter panel, the same control legend and the same interact prompt,
+ * which is what makes an unfamiliar world navigable on sight across desktop and mobile.
+ */
+export class Overlay {
+    root;
+    prompt;
+    onEnter;
+    constructor(options) {
+        injectStyles();
+        this.onEnter = options.onEnter;
+        const isTouch = isTouchDevice();
+        this.root = document.createElement('div');
+        this.root.className = 'wm-overlay';
+        this.root.dataset.locked = 'false';
+        if (options.crosshair !== false) {
+            const crosshair = document.createElement('div');
+            crosshair.className = 'wm-crosshair';
+            this.root.appendChild(crosshair);
+        }
+        const lock = document.createElement('div');
+        lock.className = 'wm-lock';
+        const content = document.createElement('div');
+        content.className = 'wm-lock-content';
+        const title = document.createElement('h1');
+        title.className = 'wm-lock-title';
+        title.textContent = options.title ?? 'WorldMesh';
+        content.appendChild(title);
+        const cta = document.createElement('button');
+        cta.type = 'button';
+        cta.className = 'wm-lock-cta';
+        cta.textContent = isTouch ? 'Tap to enter' : 'Click to enter';
+        content.appendChild(cta);
+        const handleEnter = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const touchInitiated = ('pointerType' in e && e.pointerType === 'touch') ||
+                e.type === 'touchend' ||
+                isTouch;
+            this.onEnter(touchInitiated);
+        };
+        cta.addEventListener('click', handleEnter);
+        cta.addEventListener('pointerup', handleEnter);
+        lock.addEventListener('click', handleEnter);
+        if (options.controlsHint !== false) {
+            const keys = document.createElement('div');
+            keys.className = 'wm-keys';
+            const legend = isTouch
+                ? [...KEY_LEGEND.filter(([key]) => key !== '1 – 0'), ['Touch', 'On-screen controls']]
+                : KEY_LEGEND;
+            for (const [key, label] of legend) {
+                const row = document.createElement('div');
+                row.className = 'wm-keys-item';
+                const badge = document.createElement('span');
+                badge.className = 'wm-key';
+                badge.textContent = key;
+                const text = document.createElement('span');
+                text.className = 'wm-key-desc';
+                text.textContent = label;
+                row.append(badge, text);
+                keys.appendChild(row);
+            }
+            content.appendChild(keys);
+        }
+        lock.appendChild(content);
+        this.root.appendChild(lock);
+        this.prompt = document.createElement('div');
+        this.prompt.className = 'wm-prompt';
+        this.prompt.dataset.visible = 'false';
+        this.prompt.addEventListener('click', (e) => {
+            e.stopPropagation();
+            options.onInteract?.();
+        });
+        this.root.appendChild(this.prompt);
+        if (options.badge !== false) {
+            const badge = document.createElement('a');
+            badge.className = 'wm-badge';
+            badge.href = options.hubUrl ?? 'https://worldmesh.net';
+            const dot = document.createElement('span');
+            dot.className = 'wm-badge-dot';
+            const label = document.createElement('span');
+            label.textContent = 'WorldMesh';
+            badge.append(dot, label);
+            this.root.appendChild(badge);
+        }
+        const hint = document.createElement('div');
+        hint.className = 'wm-hint';
+        hint.textContent = isTouch ? 'Tap ⏸ to pause' : 'ESC to release cursor';
+        this.root.appendChild(hint);
+        document.body.appendChild(this.root);
+    }
+    setLocked(locked) {
+        this.root.dataset.locked = String(locked);
+    }
+    setPrompt(text) {
+        if (!text) {
+            this.prompt.dataset.visible = 'false';
+            return;
+        }
+        this.prompt.textContent = text;
+        this.prompt.dataset.visible = 'true';
+    }
+    dispose() {
+        this.root.remove();
+    }
+}
+function injectStyles() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=overlay.js.map

package/dist/ui/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../src/ui/overlay.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@worldmesh/runtime",
+  "version": "0.1.0",
+  "description": "The shared WorldMesh navigation runtime: controls, movement, camera, player, abilities and portals.",
+  "keywords": [
+    "worldmesh",
+    "three",
+    "threejs",
+    "3d",
+    "webgl",
+    "controls",
+    "movement",
+    "first-person",
+    "third-person",
+    "portals"
+  ],
+  "homepage": "https://github.com/eliaswillnat/worldmesh/tree/main/packages/runtime#readme",
+  "bugs": "https://github.com/eliaswillnat/worldmesh/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eliaswillnat/worldmesh.git",
+    "directory": "packages/runtime"
+  },
+  "author": "Elias Willnat",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean && node scripts/check-version.mjs",
+    "build": "tsc -p tsconfig.build.json",
+    "watch": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+    "typecheck": "tsc -p tsconfig.json",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "three": ">=0.160.0"
+  },
+  "devDependencies": {
+    "@types/three": "^0.169.0",
+    "three": "^0.169.0"
+  }
+}

package/src/abilities/abilities.ts

@@ -0,0 +1,30 @@
+import type { Abilities } from '../types.js';
+
+export const DEFAULT_ABILITIES: Abilities = {
+  doubleJump: false,
+  flying: false,
+  crouching: false,
+  dash: false,
+  climbing: false,
+  swimming: false,
+  vehicles: false,
+};
+
+const RESERVED: (keyof Abilities)[] = ['climbing', 'swimming', 'vehicles'];
+
+/**
+ * Merge a world's declared abilities over the defaults. Abilities are pure
+ * configuration: the shared controller reads these flags, so a world never
+ * has to fork the movement code to add one.
+ */
+export function resolveAbilities(declared: Partial<Abilities> = {}): Abilities {
+  const abilities: Abilities = { ...DEFAULT_ABILITIES, ...declared };
+  for (const key of RESERVED) {
+    if (abilities[key]) {
+      console.warn(
+        `[worldmesh] ability "${key}" is reserved in the standard but not implemented yet; it will have no effect.`,
+      );
+    }
+  }
+  return abilities;
+}

package/src/camera/cameraRig.ts

@@ -0,0 +1,106 @@
+import { Euler, PerspectiveCamera, Vector3, type Camera } from 'three';
+import type { CollisionWorld } from '../movement/collision.js';
+import type { ViewMode, ViewOptions } from '../types.js';
+
+const HALF_PI = Math.PI / 2;
+const PITCH_LIMIT = HALF_PI - 0.01;
+
+export interface CameraRigOptions extends ViewOptions {
+  camera: Camera;
+  collision: CollisionWorld;
+}
+
+/**
+ * Owns yaw/pitch and both camera modes. Worlds get first- and third-person
+ * for free, with the same toggle key everywhere, because this lives in the
+ * runtime rather than in each world's main.ts.
+ */
+export class CameraRig {
+  yaw: number;
+  pitch: number;
+  mode: ViewMode;
+  distance: number;
+  sensitivity: number;
+
+  private camera: Camera;
+  private collision: CollisionWorld;
+  private minDistance: number;
+  private maxDistance: number;
+  private euler = new Euler(0, 0, 0, 'YXZ');
+  private target = new Vector3();
+  private offset = new Vector3();
+  /** Smoothed boom length so the camera does not pop when it clears a wall. */
+  private currentBoom: number;
+
+  constructor(options: CameraRigOptions) {
+    this.camera = options.camera;
+    this.collision = options.collision;
+    this.mode = options.mode ?? 'first';
+    this.distance = options.distance ?? 5;
+    this.currentBoom = this.distance;
+    this.minDistance = options.minDistance ?? 2;
+    this.maxDistance = options.maxDistance ?? 12;
+    this.sensitivity = options.sensitivity ?? 0.0022;
+    this.yaw = options.yaw ?? 0;
+    this.pitch = options.pitch ?? 0;
+  }
+
+  look(dx: number, dy: number): void {
+    this.yaw -= dx * this.sensitivity;
+    this.pitch -= dy * this.sensitivity;
+    this.pitch = Math.max(-PITCH_LIMIT, Math.min(PITCH_LIMIT, this.pitch));
+  }
+
+  zoom(wheel: number): void {
+    if (this.mode !== 'third' || wheel === 0) return;
+    this.distance = clamp(this.distance + wheel * 0.01, this.minDistance, this.maxDistance);
+  }
+
+  setMode(mode: ViewMode): void {
+    this.mode = mode;
+    if (mode === 'third') this.currentBoom = this.distance;
+  }
+
+  toggleMode(): ViewMode {
+    this.setMode(this.mode === 'first' ? 'third' : 'first');
+    return this.mode;
+  }
+
+  /** Point the camera at the player. `feet` is the player's base position. */
+  update(dt: number, feet: Vector3, eyeHeight: number): void {
+    this.euler.set(this.pitch, this.yaw, 0);
+    this.camera.quaternion.setFromEuler(this.euler);
+    this.target.set(feet.x, feet.y + eyeHeight, feet.z);
+
+    if (this.mode === 'first') {
+      this.camera.position.copy(this.target);
+      this.currentBoom = this.distance;
+      return;
+    }
+
+    // Boom backwards along the view direction, pulled in by anything in the way.
+    this.offset.set(0, 0, 1).applyQuaternion(this.camera.quaternion);
+    const wanted = this.collision.castDistance(this.target, this.offset, this.distance + 0.3) - 0.3;
+    const boom = clamp(wanted, 0.4, this.distance);
+    // Snap in fast, ease out slowly: popping into geometry is worse than lag.
+    const rate = boom < this.currentBoom ? 1 : 1 - Math.exp(-8 * dt);
+    this.currentBoom += (boom - this.currentBoom) * rate;
+    this.camera.position.copy(this.target).addScaledVector(this.offset, this.currentBoom);
+  }
+
+  /** Horizontal forward vector, for spawn orientation helpers. */
+  getForward(out = new Vector3()): Vector3 {
+    return out.set(-Math.sin(this.yaw), 0, -Math.cos(this.yaw));
+  }
+
+  resize(width: number, height: number): void {
+    if (this.camera instanceof PerspectiveCamera) {
+      this.camera.aspect = width / height;
+      this.camera.updateProjectionMatrix();
+    }
+  }
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}