@worldmesh/runtime 0.2.0 → 0.2.2

package/src/ui/overlay.ts

@@ -101,6 +101,49 @@ const CSS = `
   border-color: rgba(255,255,255,0.6);
   transform: scale(1.02);
 }
+.wm-vr-launch {
+  position: absolute;
+  top: max(16px, env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: auto;
+  font-size: 13px;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  padding: 10px 22px;
+  border: 1px solid rgba(255,255,255,0.4);
+  border-radius: 999px;
+  background: rgba(8,11,16,0.72);
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 600;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+.wm-vr-launch:hover, .wm-vr-launch:active {
+  background: rgba(8,11,16,0.9);
+  border-color: rgba(255,255,255,0.7);
+}
+.wm-overlay:not([data-locked="true"]) .wm-vr-launch,
+.wm-overlay[data-xr="true"] .wm-vr-launch,
+.wm-overlay[data-xr="true"] .wm-vr-menu {
+  display: none;
+}
+.wm-vr-menu {
+  font-size: 13px;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  padding: 10px 22px;
+  border: 1px solid rgba(255,255,255,0.35);
+  border-radius: 999px;
+  background: rgba(255,255,255,0.08);
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  touch-action: manipulation;
+}
 .wm-keys {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -201,6 +244,55 @@ const CSS = `
   transition: opacity .2s ease;
 }
 .wm-overlay[data-locked="true"] .wm-hint { opacity: 1; }
+.wm-room-full {
+  position: absolute;
+  inset: 0;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  background: rgba(8, 11, 16, 0.22);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  pointer-events: auto;
+  z-index: 6;
+  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));
+}
+.wm-overlay[data-room-full="true"] .wm-room-full { display: flex; }
+.wm-overlay[data-room-full="true"] .wm-lock { display: none; }
+.wm-room-full-label {
+  margin: 0;
+  padding: 14px 36px;
+  border-radius: 4px;
+  background: rgba(160, 12, 18, 0.92);
+  color: #fff;
+  font-family: Urbanist, ui-sans-serif, system-ui, sans-serif;
+  font-size: clamp(22px, 4.4vw, 36px);
+  font-weight: 700;
+  letter-spacing: .02em;
+  text-align: center;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+}
+.wm-room-full-retry {
+  font-size: 13.5px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  padding: 12px 28px;
+  border: 1px solid rgba(255,255,255,0.45);
+  border-radius: 999px;
+  background: rgba(255,255,255,0.12);
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+.wm-room-full-retry:hover, .wm-room-full-retry:active {
+  background: rgba(255,255,255,0.22);
+  border-color: rgba(255,255,255,0.7);
+}
 
 @media (max-width: 400px) {
   .wm-lock {
@@ -278,13 +370,20 @@ export class Overlay {
   readonly root: HTMLDivElement;
   private prompt: HTMLDivElement;
   private lock: HTMLDivElement;
+  private vrLaunch: HTMLButtonElement;
+  private vrMenu: HTMLButtonElement;
+  private roomFull: HTMLDivElement;
+  private roomFullLabel: HTMLParagraphElement;
+  private roomFullRetry: HTMLButtonElement;
   private onEnter: (touch?: boolean) => void;
+  private onRoomFullRetry: (() => void) | null = null;
   private deferLockPanel: boolean;
 
   constructor(
     options: UiOptions & {
       onEnter: (touch?: boolean) => void;
       onInteract?: () => void;
+      onEnterVr?: () => void;
     },
   ) {
     injectStyles();
@@ -299,7 +398,7 @@ export class Overlay {
     this.root.dataset.locked = options.moveBeforeLock ? 'true' : 'false';
     if (this.deferLockPanel) this.root.dataset.deferLock = 'true';
 
-    if (options.crosshair !== false) {
+    if (options.crosshair === true) {
       const crosshair = document.createElement('div');
       crosshair.className = 'wm-crosshair';
       this.root.appendChild(crosshair);
@@ -345,6 +444,18 @@ export class Overlay {
       handleEnter(event);
     });
 
+    const vrMenu = document.createElement('button');
+    vrMenu.type = 'button';
+    vrMenu.className = 'wm-vr-menu';
+    vrMenu.textContent = 'Enter VR';
+    vrMenu.hidden = true;
+    vrMenu.addEventListener('click', (event) => {
+      event.stopPropagation();
+      options.onEnterVr?.();
+    });
+    this.vrMenu = vrMenu;
+    content.appendChild(vrMenu);
+
     if (options.controlsHint !== false) {
       const keys = document.createElement('div');
       keys.className = 'wm-keys';
@@ -382,6 +493,8 @@ export class Overlay {
       const badge = document.createElement('a');
       badge.className = 'wm-badge';
       badge.href = options.hubUrl ?? 'https://worldmesh.net';
+      // Shown inside a hub's door: back to the hub replaces the whole page, not the frame.
+      if (window.parent !== window) badge.target = '_top';
       const dot = document.createElement('span');
       dot.className = 'wm-badge-dot';
       const label = document.createElement('span');
@@ -395,9 +508,53 @@ export class Overlay {
     hint.textContent = isTouch ? 'Tap ⏸ to open the menu' : 'Esc to open the menu';
     this.root.appendChild(hint);
 
+    const vrLaunch = document.createElement('button');
+    vrLaunch.type = 'button';
+    vrLaunch.className = 'wm-vr-launch';
+    vrLaunch.textContent = 'Enter VR';
+    vrLaunch.hidden = true;
+    vrLaunch.addEventListener('click', (event) => {
+      event.stopPropagation();
+      options.onEnterVr?.();
+    });
+    this.vrLaunch = vrLaunch;
+    this.root.appendChild(vrLaunch);
+
+    const roomFull = document.createElement('div');
+    roomFull.className = 'wm-room-full';
+    roomFull.hidden = true;
+    const roomFullLabel = document.createElement('p');
+    roomFullLabel.className = 'wm-room-full-label';
+    const roomFullRetry = document.createElement('button');
+    roomFullRetry.type = 'button';
+    roomFullRetry.className = 'wm-room-full-retry';
+    roomFullRetry.textContent = 'Try again';
+    roomFullRetry.hidden = true;
+    roomFullRetry.addEventListener('click', (event) => {
+      event.stopPropagation();
+      this.onRoomFullRetry?.();
+    });
+    roomFull.append(roomFullLabel, roomFullRetry);
+    this.roomFull = roomFull;
+    this.roomFullLabel = roomFullLabel;
+    this.roomFullRetry = roomFullRetry;
+    this.root.appendChild(roomFull);
+
     document.body.appendChild(this.root);
   }
 
+  /** Show Enter VR once the browser reports immersive-vr support. */
+  setVrAvailable(available: boolean): void {
+    this.vrLaunch.hidden = !available;
+    this.vrMenu.hidden = !available;
+  }
+
+  /** Hide the 2D Enter VR controls while the headset is presenting. */
+  setVrPresenting(presenting: boolean): void {
+    this.root.dataset.xr = String(presenting);
+    if (presenting) this.setLocked(true);
+  }
+
   /** The pause screen, with the control list, is on screen. */
   isPaused(): boolean {
     return this.root.dataset.lockReady === 'true' && this.root.dataset.locked !== 'true';
@@ -428,6 +585,19 @@ export class Overlay {
     if (content instanceof HTMLElement) content.style.visibility = '';
   }
 
+  /**
+   * Presence refused the join because the room is full. Soft-blur the scene
+   * and show the same red banner language as a full world door.
+   */
+  setRoomFull(label: string | null, options?: { onRetry?: () => void }): void {
+    const full = Boolean(label);
+    this.root.dataset.roomFull = String(full);
+    this.roomFull.hidden = !full;
+    this.roomFullLabel.textContent = label ?? '';
+    this.onRoomFullRetry = options?.onRetry ?? null;
+    this.roomFullRetry.hidden = !this.onRoomFullRetry;
+  }
+
   setPrompt(text: string | null): void {
     if (!text) {
       this.prompt.dataset.visible = 'false';

package/src/xr/session.ts

@@ -0,0 +1,33 @@
+import type { WebGLRenderer } from 'three';
+
+export const IMMERSIVE_VR = 'immersive-vr';
+
+/**
+ * Whether this browser can start a WebXR immersive-vr session.
+ * Headset browsers resolve true; ordinary desktop Chrome resolves false.
+ */
+export async function immersiveVrSupported(): Promise<boolean> {
+  const xr = navigator.xr;
+  if (!xr?.isSessionSupported) return false;
+  try {
+    return await xr.isSessionSupported(IMMERSIVE_VR);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Ask the browser for an immersive VR session and hand it to Three.js.
+ * Must run from a user gesture (the Enter VR button).
+ */
+export async function requestImmersiveVr(renderer: WebGLRenderer): Promise<XRSession> {
+  const xr = navigator.xr;
+  if (!xr?.requestSession) throw new Error('WebXR is not available');
+  renderer.xr.enabled = true;
+  renderer.xr.setReferenceSpaceType('local-floor');
+  const session = await xr.requestSession(IMMERSIVE_VR, {
+    optionalFeatures: ['local-floor', 'bounded-floor'],
+  });
+  await renderer.xr.setSession(session);
+  return session;
+}