@pmndrs/viverse 0.2.0 → 0.2.2

package/dist/input/pointer-capture.d.ts

@@ -1,20 +0,0 @@
-import { Input, InputField } from './index.js';
-export type PointerCaptureInputOptions = {
-    pointerCaptureRotationSpeed?: number;
-    pointerCaptureZoomSpeed?: number;
-};
-/**
- * @requires to manually execute `domElement.setPointerCapture(pointerId)` on pointerdown
- */
-export declare class PointerCaptureInput implements Input<PointerCaptureInputOptions> {
-    private readonly domElement;
-    private readonly abortController;
-    private deltaZoom;
-    private deltaYaw;
-    private deltaPitch;
-    private activePointers;
-    private lastPinchDist;
-    constructor(domElement: HTMLElement);
-    get<T>(field: InputField<T>, options: PointerCaptureInputOptions): T | undefined;
-    dispose(): void;
-}

package/dist/input/pointer-lock.d.ts

@@ -1,17 +0,0 @@
-import { Input, InputField } from './index.js';
-export type PointerLockInputOptions = {
-    pointerLockRotationSpeed?: number;
-    pointerLockZoomSpeed?: number;
-};
-/**
- * @requires to manually execute `domElement.requestPointerLock()`
- */
-export declare class PointerLockInput implements Input<PointerLockInputOptions> {
-    private readonly abortController;
-    private deltaZoom;
-    private deltaYaw;
-    private deltaPitch;
-    constructor(domElement: HTMLElement);
-    get<T>(field: InputField<T>, options: PointerLockInputOptions): T | undefined;
-    dispose(): void;
-}

package/dist/input/pointer-lock.js

@@ -1,55 +0,0 @@
-import { DeltaPitchField, DeltaYawField, DeltaZoomField } from './index.js';
-/**
- * @requires to manually execute `domElement.requestPointerLock()`
- */
-export class PointerLockInput {
-    abortController = new AbortController();
-    deltaZoom = 0;
-    deltaYaw = 0;
-    deltaPitch = 0;
-    constructor(domElement) {
-        domElement.addEventListener('pointermove', (event) => {
-            if (document.pointerLockElement != domElement) {
-                return;
-            }
-            // Compute based on domElement bounds instead of window.innerHeight
-            const rect = domElement.getBoundingClientRect();
-            this.deltaYaw -= event.movementX / rect.height;
-            this.deltaPitch -= event.movementY / rect.height;
-        }, {
-            signal: this.abortController.signal,
-        });
-        domElement.addEventListener('wheel', (event) => {
-            if (document.pointerLockElement != domElement) {
-                return;
-            }
-            this.deltaZoom += event.deltaY;
-            event.preventDefault();
-        }, {
-            signal: this.abortController.signal,
-        });
-    }
-    get(field, options) {
-        const rotationSpeed = options.pointerLockRotationSpeed ?? 0.4;
-        const zoomSpeed = options.pointerLockZoomSpeed ?? 0.0001;
-        let result;
-        switch (field) {
-            case DeltaPitchField:
-                result = (this.deltaPitch * rotationSpeed);
-                this.deltaPitch = 0;
-                break;
-            case DeltaYawField:
-                result = (this.deltaYaw * rotationSpeed);
-                this.deltaYaw = 0;
-                break;
-            case DeltaZoomField:
-                result = (this.deltaZoom * zoomSpeed);
-                this.deltaZoom = 0;
-                break;
-        }
-        return result;
-    }
-    dispose() {
-        this.abortController.abort();
-    }
-}

package/dist/input/screen-joystick.d.ts

@@ -1,18 +0,0 @@
-import { Input, InputField } from './index.js';
-export type ScreenJoystickInputOptions = {
-    screenJoystickRunDistancePx?: number;
-    screenJoystickDeadZonePx?: number;
-};
-export declare class ScreenJoystickInput implements Input<ScreenJoystickInputOptions> {
-    readonly root: HTMLDivElement;
-    private readonly handle;
-    private pointerId;
-    private distanceToCenter;
-    private clampedX;
-    private clampedY;
-    constructor(domElement: HTMLElement);
-    get<T>(field: InputField<T>, options: ScreenJoystickInputOptions): T | undefined;
-    dispose(): void;
-    private updateHandle;
-    private resetHandle;
-}

package/dist/input/screen-joystick.js

@@ -1,120 +0,0 @@
-import { MoveForwardField, MoveBackwardField, MoveLeftField, MoveRightField, RunField, } from './index.js';
-const DefaultDeadZonePx = 24;
-const DefaultRunDistancePx = 46;
-const JoystickRadius = 56;
-export class ScreenJoystickInput {
-    root;
-    handle;
-    pointerId;
-    distanceToCenter = 0;
-    clampedX = 0;
-    clampedY = 0;
-    constructor(domElement) {
-        const parent = domElement.parentElement ?? domElement;
-        const joy = document.createElement('div');
-        joy.className = 'viverse-joystick mobile-only';
-        parent.appendChild(joy);
-        this.root = joy;
-        this.root.style.position = 'absolute';
-        this.root.style.bottom = '24px';
-        this.root.style.left = '24px';
-        this.root.style.width = '112px';
-        this.root.style.height = '112px';
-        this.root.style.borderRadius = '9999px';
-        this.root.style.background = 'rgba(255,255,255,0.2)';
-        this.root.style.pointerEvents = 'auto';
-        this.root.style.touchAction = 'none';
-        this.root.style.userSelect = 'none';
-        this.root.style.setProperty('-webkit-user-select', 'none');
-        this.root.style.setProperty('-webkit-touch-callout', 'none');
-        const handle = document.createElement('div');
-        handle.className = 'viverse-joystick-handle';
-        joy.appendChild(handle);
-        this.handle = handle;
-        this.handle.style.position = 'absolute';
-        this.handle.style.left = '50%';
-        this.handle.style.top = '50%';
-        this.handle.style.width = '56px';
-        this.handle.style.height = '56px';
-        this.handle.style.borderRadius = '9999px';
-        this.handle.style.background = 'rgba(0,0,0,0.3)';
-        this.handle.style.transform = 'translate(-50%,-50%)';
-        this.handle.style.willChange = 'transform';
-        this.handle.style.pointerEvents = 'none';
-        this.handle.style.touchAction = 'none';
-        this.handle.style.userSelect = 'none';
-        this.handle.style.setProperty('-webkit-user-select', 'none');
-        this.handle.style.setProperty('-webkit-touch-callout', 'none');
-        const onPointerDown = (e) => {
-            if (this.pointerId != null) {
-                return;
-            }
-            e.preventDefault();
-            e.stopPropagation();
-            joy.setPointerCapture(e.pointerId);
-            this.pointerId = e.pointerId;
-            const rect = joy.getBoundingClientRect();
-            const joyCenterX = rect.left + rect.width / 2;
-            const joyCenterY = rect.top + rect.height / 2;
-            this.updateHandle(e.clientX - joyCenterX, e.clientY - joyCenterY);
-        };
-        const onPointerMove = (e) => {
-            if (this.pointerId == null) {
-                return;
-            }
-            e.preventDefault();
-            e.stopPropagation();
-            const rect = joy.getBoundingClientRect();
-            const joyCenterX = rect.left + rect.width / 2;
-            const joyCenterY = rect.top + rect.height / 2;
-            this.updateHandle(e.clientX - joyCenterX, e.clientY - joyCenterY);
-        };
-        const onPointerEnd = (e) => {
-            if (this.pointerId != e.pointerId) {
-                return;
-            }
-            this.pointerId = undefined;
-            joy.releasePointerCapture(e.pointerId);
-            e.preventDefault();
-            this.resetHandle();
-        };
-        joy.addEventListener('pointerdown', onPointerDown);
-        joy.addEventListener('pointermove', onPointerMove);
-        joy.addEventListener('pointerup', onPointerEnd);
-        joy.addEventListener('pointercancel', onPointerEnd);
-    }
-    get(field, options) {
-        switch (field) {
-            case MoveForwardField:
-            case MoveBackwardField:
-                const moveY = this.distanceToCenter <= (options.screenJoystickDeadZonePx ?? DefaultDeadZonePx)
-                    ? 0
-                    : -this.clampedY / JoystickRadius;
-                return field === MoveForwardField ? Math.max(0, moveY) : Math.max(0, -moveY);
-            case MoveLeftField:
-            case MoveRightField:
-                const moveX = this.distanceToCenter <= (options.screenJoystickDeadZonePx ?? DefaultDeadZonePx)
-                    ? 0
-                    : this.clampedX / JoystickRadius;
-                return field === MoveLeftField ? Math.max(0, moveX) : Math.max(0, moveX);
-            case RunField:
-                return (this.distanceToCenter > (options.screenJoystickRunDistancePx ?? DefaultRunDistancePx));
-        }
-        return undefined;
-    }
-    dispose() {
-        this.root.remove();
-    }
-    updateHandle(dx, dy) {
-        this.distanceToCenter = Math.hypot(dx, dy) || 1;
-        this.clampedX = (dx / this.distanceToCenter) * Math.min(this.distanceToCenter, JoystickRadius);
-        this.clampedY = (dy / this.distanceToCenter) * Math.min(this.distanceToCenter, JoystickRadius);
-        this.handle.style.transform = `translate(-50%,-50%) translate(${this.clampedX}px, ${this.clampedY}px)`;
-    }
-    resetHandle() {
-        this.handle.style.transform = 'translate(-50%,-50%)';
-        this.distanceToCenter = 0;
-        this.clampedX = 0;
-        this.clampedY = 0;
-    }
-}

package/dist/input/screen-jump-button.d.ts

@@ -1,8 +0,0 @@
-import { Input, InputField } from './index.js';
-export declare class ScreenJumpButtonInput implements Input<{}> {
-    readonly root: HTMLDivElement;
-    private lastJumpTime;
-    constructor(domElement: HTMLElement);
-    get<T>(field: InputField<T>): T | undefined;
-    dispose(): void;
-}

package/dist/input/screen-jump-button.js

@@ -1,49 +0,0 @@
-import { LastTimeJumpPressedField } from './index.js';
-export class ScreenJumpButtonInput {
-    root;
-    lastJumpTime = null;
-    constructor(domElement) {
-        const parent = domElement.parentElement ?? domElement;
-        const btn = document.createElement('div');
-        btn.className = 'viverse-button viverse-jump mobile-only';
-        parent.appendChild(btn);
-        this.root = btn;
-        this.root.style.position = 'absolute';
-        this.root.style.bottom = '32px';
-        this.root.style.right = '126px';
-        this.root.style.minWidth = '64px';
-        this.root.style.height = '64px';
-        this.root.style.borderRadius = '9999px';
-        this.root.style.pointerEvents = 'auto';
-        this.root.style.touchAction = 'none';
-        this.root.style.userSelect = 'none';
-        this.root.style.setProperty('-webkit-user-select', 'none');
-        this.root.style.background = 'rgba(255,255,255,0.3)';
-        this.root.style.backgroundImage =
-            'url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23444%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%2218%2015%2012%209%206%2015%22/%3E%3C/svg%3E")';
-        this.root.style.backgroundRepeat = 'no-repeat';
-        this.root.style.backgroundPosition = 'center';
-        this.root.style.backgroundSize = '50%';
-        const onPress = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.lastJumpTime = performance.now() / 1000;
-        };
-        const stopPropagation = (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-        };
-        this.root.addEventListener('pointerdown', onPress);
-        this.root.addEventListener('pointermove', stopPropagation);
-        this.root.addEventListener('pointerup', stopPropagation);
-    }
-    get(field) {
-        if (field === LastTimeJumpPressedField) {
-            return this.lastJumpTime;
-        }
-        return undefined;
-    }
-    dispose() {
-        this.root.remove();
-    }
-}