@web-engine-dev/mobile

Mobile-specific features for web-engine-dev including orientation, vibration, wake lock, and safe areas.

Features

• Orientation Control: Lock/detect orientation
• Vibration: Haptic feedback
• Wake Lock: Prevent screen sleep
• Safe Areas: Notch/home indicator handling
• Touch Handling: Mobile touch gestures
• Performance: Mobile optimizations

Installation

npm install @web-engine-dev/mobile
# or
pnpm add @web-engine-dev/mobile

Quick Start

import { Mobile, Orientation, Vibration } from '@web-engine-dev/mobile';

// Initialize
const mobile = new Mobile();

// Lock orientation
await mobile.lockOrientation('landscape');

// Vibrate
mobile.vibrate(100); // 100ms

// Prevent screen sleep
await mobile.requestWakeLock();

// Get safe area
const safeArea = mobile.getSafeArea();
console.log(safeArea.top, safeArea.bottom);

API Overview

Orientation

// Lock orientation
await mobile.lockOrientation('landscape');
await mobile.lockOrientation('portrait');
await mobile.lockOrientation('any');

// Unlock
mobile.unlockOrientation();

// Get current
const orientation = mobile.getOrientation();

// Listen for changes
mobile.onOrientationChange((orientation) => {
  resizeGame(orientation);
});

Vibration

// Simple vibration
mobile.vibrate(100); // 100ms

// Pattern
mobile.vibrate([100, 50, 100]); // vibrate, pause, vibrate

// Predefined patterns
mobile.vibratePattern('success'); // Light double tap
mobile.vibratePattern('error'); // Strong buzz
mobile.vibratePattern('click'); // Quick tap

// Check support
if (mobile.supportsVibration()) {
  mobile.vibrate(50);
}

Wake Lock

// Prevent screen sleep
await mobile.requestWakeLock();

// Release
mobile.releaseWakeLock();

// Check status
if (mobile.hasWakeLock()) {
  // Screen won't sleep
}

Safe Areas

const safeArea = mobile.getSafeArea();

// Adjust UI
ui.setPadding({
  top: safeArea.top,
  bottom: safeArea.bottom,
  left: safeArea.left,
  right: safeArea.right,
});

// Listen for changes
mobile.onSafeAreaChange((safeArea) => {
  updateLayout(safeArea);
});

Device Detection

// Check device type
mobile.isMobile();
mobile.isTablet();
mobile.isIOS();
mobile.isAndroid();

// Get device info
const info = mobile.getDeviceInfo();
console.log(info.model);
console.log(info.os);
console.log(info.osVersion);
console.log(info.screenSize);

Performance

// Enable power saving mode
mobile.enablePowerSaving();

// Reduce quality for heat management
mobile.onThermalThrottling(() => {
  reduceGraphicsQuality();
});