WorkAdventure

https://docs.workadventu.re/
Admin
WorkAdventure is an open-source virtual office and collaborative platform that enables users to...
Tokens:204,280
Snippets:1,798
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### WA.nav.goToRoom examples

Source: https://docs.workadventu.re/developer/map-scripting/references/api-nav

Examples of moving to another room using workadventure URLs, relative paths, and global paths with a start layer.

```typescript
WA.nav.goToRoom("/@/tcm/workadventure/floor0"); // workadventure urls  
WA.nav.goToRoom("../otherMap/map.json");  
WA.nav.goToRoom("/_/global/<path to global map>.json#start-layer-2");  
```

--------------------------------

### Start the starter-kit web app with npm run start

Source: https://docs.workadventu.re/map-building/tiled-editor/publish/wa-hosted

Run this command in your terminal to start the web app for testing your map locally. A web page will open with the list of your maps.

```bash
npm run start  
```

--------------------------------

### WA.nav.goToLogin example

Source: https://docs.workadventu.re/developer/map-scripting/references/api-nav

Example of redirecting the user to the login page.

```typescript
await WA.nav.goToLogin();  
```

--------------------------------

### WA.nav.openCoWebSite example

Source: https://docs.workadventu.re/developer/map-scripting/references/api-nav

Example of opening a co-website with default options and with all options, then closing it.

```typescript
const coWebsite = await WA.nav.openCoWebSite("https://www.wikipedia.org/");  
const coWebsiteWorkAdventure = await WA.nav.openCoWebSite(  
  "https://workadventu.re/",  
  true,  
  "",  
  70,  
  1,  
  true,  
  true  
);  
// ...  
coWebsite.close();  
```

--------------------------------

### Install @workadventure/iframe-api-typings

Source: https://docs.workadventu.re/developer/map-scripting/using-typescript

Install the typings package as a dev dependency to get type definitions for the WA object.

```bash
$ npm install --save-dev @workadventure/iframe-api-typings  
```

--------------------------------

### WA.nav.getCoWebSites example

Source: https://docs.workadventu.re/developer/map-scripting/references/api-nav

Example of retrieving all opened co-websites.

```typescript
const coWebsites = await WA.nav.getCoWebSites();  
```

--------------------------------

### Install Map Starter Kit dependencies

Source: https://docs.workadventu.re/map-building/build-your-map.md

Run this command in the map directory to install the local web server dependencies.

```bash
$ npm install  
```

--------------------------------

### Player Status Examples

Source: https://docs.workadventu.re/developer/map-scripting/references/api-player

Examples of setting various player statuses.

```javascript
// Set the player status to busy  
WA.player.setStatus("BUSY");  
  
// Clear the status (back to online)  
WA.player.setStatus("ONLINE");  
  
// Indicate you're temporarily away  
WA.player.setStatus("BACK_IN_A_MOMENT");
```

--------------------------------

### Start development server command

Source: https://docs.workadventu.re/developer/map-scripting/using-typescript

Starts the Vite development server to compile and serve the map.

```bash
$ npm run start
```

--------------------------------

### WA.nav.goToPage example

Source: https://docs.workadventu.re/developer/map-scripting/references/api-nav

Example of navigating the current tab to Wikipedia.

```typescript
WA.nav.goToPage("https://www.wikipedia.org/");  
```

--------------------------------

### Using WA.state shortcut properties

Source: https://docs.workadventu.re/map-building/api-state.md

Example of using shortcut properties to set and get variables, noting that this approach does not return a promise for error handling.

```javascript
WA.state.config = {  
    'bottomExitUrl': '/@/org/world/castle',  
    'topExitUrl': '/@/org/world/tower',  
    'enableBirdSound': true  
};  
  
//...  
let config = WA.state.config;  
```

--------------------------------

### Tracking player movement example

Source: https://docs.workadventu.re/developer/map-scripting/references/api-players

Example showing how to configure tracking and subscribe to player movement events.

```typescript
await WA.players.configureTracking();  
WA.players.onPlayerMoves().subscribe((event: RemotePlayerMoved) => {  
    const player = event.player;  
    const oldPosition = event.oldPosition;  
    const newPosition = event.newPosition;  
    console.log(`Player ${player.name} moved from ${oldPosition.x},${oldPosition.y} to ${newPosition.x},${newPosition.y}`);  
});  
```

--------------------------------

### Install OpenAI Realtime API wrapper

Source: https://docs.workadventu.re/blog/realtime-api

Use npm to install the beta wrapper library for the OpenAI Realtime API.

```bash
$ npm install openai/openai-realtime-api-beta --save
```

--------------------------------

### Example of opening a banner

Source: https://docs.workadventu.re/map-building/api-ui.md

A concrete example of calling openBanner with custom styling, a link, and specific timing parameters.

```javascript
WA.ui.banner.openBanner({  
    id: "banner-test",  
    text: "Banner test",  
    bgColor: "#000000",  
    textColor: "#ffffff",  
    closable: false,  
    timeToClose: 120000,  
    link: {  
        label: "Test",  
        url: "https://workadventu.re"  
    }  
});  
```

--------------------------------

### Install dependencies command

Source: https://docs.workadventu.re/developer/map-scripting/using-typescript

Installs the project dependencies defined in package.json.

```bash
$ npm install
```

--------------------------------

### Install OpenAI Library

Source: https://docs.workadventu.re/blog/gpt-bot

Install the official OpenAI NodeJS library to enable API communication.

```bash
npm install openai
```

--------------------------------

### Example: show and hide layer

Source: https://docs.workadventu.re/developer/map-scripting/references/api-room

Example showing how to show and then hide a group layer.

```typescript
WA.room.showLayer("bottom");  
//...  
WA.room.hideLayer("bottom");  
```

--------------------------------

### Listen to audio stream example

Source: https://docs.workadventu.re/developer/map-scripting/references/api-player

Example of subscribing to the audio stream with a specified sample rate and unsubscribing when finished.

```javascript
const sampleRate = 24000;  
  
const subscription = meeting.listenToAudioStream(sampleRate).subscribe((data: Float32Array) => {  
    // Process the audio data  
    console.log(data);  
});  
  
// When you are done listening to the audio stream, you can unsubscribe from the observable.  
subscription.unsubscribe();
```

--------------------------------

### SaaS map URL example

Source: https://docs.workadventu.re/map-building/tiled-editor/publish/wa-hosted

An example of a constructed URL for a map hosted on the SaaS platform.

```text
https://play.workadventu.re/@/my-org/my-world/map/my-map.wam
```

--------------------------------

### Define moveTo parameter before start

Source: https://docs.workadventu.re/map-building/tiled-editor/entry-exit

An alternative URL structure where the moveTo parameter precedes the start entry point.

```text
.../my_map.json#moveTo=meeting-room&start
```

--------------------------------

### Example: get an area

Source: https://docs.workadventu.re/developer/map-scripting/references/api-room

Shows how to get an existing area object using WA.room.area.get.

```typescript
const area = await WA.room.area.get('MyNewArea');  
```

--------------------------------

### Get an area example

Source: https://docs.workadventu.re/map-building/api-room.md

Example of retrieving an existing area named 'MyNewArea' using await.

```typescript
const area = await WA.room.area.get('MyNewArea');  

```

--------------------------------

### Play and stop a sound with configuration

Source: https://docs.workadventu.re/developer/map-scripting/references/api-sound

Example showing how to load a sound, define a configuration object, play the sound, and stop it.

```javascript
var mySound = WA.sound.loadSound("Sound.ogg");  
var config = {  
    volume : 0.5,  
    loop : false,  
    rate : 1,  
    detune : 1,  
    delay : 0,  
    seek : 0,  
    mute : false  
}  
mySound.play(config);  
// ...  
mySound.stop();  
```

--------------------------------

### Start the local web server

Source: https://docs.workadventu.re/map-building/build-your-map.md

Run this command to start the local web server and open the welcome page for testing your map.

```bash
$ npm run start  
```

--------------------------------

### Example: modify an area

Source: https://docs.workadventu.re/developer/map-scripting/references/api-room

Shows getting an area and then modifying its x and y properties.

```typescript
const area = await WA.room.area.get('MyNewArea');  
if (area) {  
    area.x = 150;  
    area.y = 150;  
}  
```

--------------------------------

### Get Tiled map data

Source: https://docs.workadventu.re/developer/map-scripting/references/api-room

Example of awaiting WA.room.getTiledMap() and logging the Tiled version.

```typescript
const map = await WA.room.getTiledMap();  
console.log("Map generated with Tiled version ", map.tiledversion);  

```

--------------------------------

### Get leaderboard URL and open modal with getLeaderboardURL

Source: https://docs.workadventu.re/admin/quests

Call getLeaderboardURL to get a URL object for the leaderboard as HTML, which can be used in an iframe. The example shows opening a modal with WA.ui.modal.openModal using the returned URL.

```javascript
import { getLeaderboardURL } from "@workadventure/quests";  
  
const leaderboardURL = getLeaderboardURL("QUEST_KEY");  
  
// Open a modal with the leaderboard  
WA.ui.modal.openModal({  
    title: "Your quest",  
    src: leaderboardURL,  
    position: "center",  
    allowApi: false,  
    allow: "",  
}, () => {});  
```

--------------------------------

### Access metadata with WA.onInit()

Source: https://docs.workadventu.re/developer/map-scripting/references/api-metadata

Example of accessing the metadata after initialization using WA.onInit().

```javascript
WA.onInit().then(() => {  
    console.log('Current metadata: ', WA.metadata);  
});  
```

--------------------------------

### Get player language with WA.onInit

Source: https://docs.workadventu.re/map-building/api-player.md

Logs the player language after initialization. Output example: 'Player language: fr-FR'.

```typescript
WA.onInit().then(() => {  
    console.log('Player language: ', WA.player.language);  
})  
// Will display:  
// Player language: fr-FR  
```

--------------------------------

### Get player ID with WA.onInit

Source: https://docs.workadventu.re/map-building/api-player.md

Logs the player ID after initialization. Output example: 'Player ID: a293c901-4455-4b1e-cf39-f4c0420de6f5'.

```typescript
WA.onInit().then(() => {  
    console.log('Player ID: ', WA.player.id);  
})  
// Will display:  
// Player ID: a293c901-4455-4b1e-cf39-f4c0420de6f5  
```

--------------------------------

### Get player name with WA.onInit

Source: https://docs.workadventu.re/map-building/api-player.md

Logs the player name after initialization. Output example: 'Player name: Alice'.

```typescript
WA.onInit().then(() => {  
    console.log('Player name: ', WA.player.name);  
})  
// Will display:  
// Player name: Alice  
```

--------------------------------

### Define entry point and moveTo parameter

Source: https://docs.workadventu.re/map-building/tiled-editor/entry-exit

Specifies both the start entry point and the moveTo destination as a meeting room.

```text
.../my_map.json#start&moveTo=meeting-room
```

--------------------------------

### Get map URL after initialization

Source: https://docs.workadventu.re/developer/map-scripting/references/api-room

Example of accessing WA.room.mapURL inside WA.onInit().then(). Outputs the map URL.

```typescript
WA.onInit().then(() => {  
  console.log("Map URL: ", WA.room.mapURL);  
  // Will output something like: 'https://mymap.org/map.json"  
});  

```

--------------------------------

### Open a UI website

Source: https://docs.workadventu.re/developer/map-scripting/references/api-ui

Example of opening a website and updating its position property.

```javascript
const myWebsite = await WA.ui.website.open({  
    url: "https://wikipedia.org",  
    position: {  
        vertical: "middle",  
        horizontal: "middle",  
    },  
    size: {  
        height: "50vh",  
        width: "50vw",  
    },  
});  
  
myWebsite.position.vertical = "top";  
```

--------------------------------

### Get room id after initialization

Source: https://docs.workadventu.re/developer/map-scripting/references/api-room

Example of accessing WA.room.id inside WA.onInit().then(). Outputs the room URL.

```typescript
WA.onInit().then(() => {  
  console.log("Room id: ", WA.room.id);  
  // Will output something like: 'https://play.workadventu.re/@/myorg/myworld/myroom', or 'https://play.workadventu.re/_/global/mymap.org/map.json"  
});  

```

--------------------------------

### Get and modify an embedded website example

Source: https://docs.workadventu.re/map-building/api-room.md

Retrieves an existing website object named 'my_website' and updates its URL and visibility.

```typescript
// Get an existing website object where 'my_website' is the name of the object (on any layer object of the map)  
const website = await WA.room.website.get("my_website");  
website.url = "https://example.com";  
website.visible = true;  
```

--------------------------------

### Initialize API with async/await

Source: https://docs.workadventu.re/developer/map-scripting/references/api-start

Using the async/await syntax to wait for the API to be ready before accessing player properties.

```javascript
(async () => {  
    await WA.onInit();  
    console.log('Current player name: ', WA.player.name);  
})();  
```

--------------------------------

### WA.nav.openTab example

Source: https://docs.workadventu.re/developer/map-scripting/references/api-nav

Example of opening a new tab to Wikipedia.

```typescript
WA.nav.openTab("https://www.wikipedia.org/");  
```

--------------------------------

### Play and stop a video example

Source: https://docs.workadventu.re/developer/map-scripting/references/api-ui

Demonstrates how to initiate a video playback and subsequently stop it using the returned Video object.

```javascript
const video = await WA.ui.playVideo('https://example.com/video.mp4', { loop: true });  
  
// Later, stop the video  
await video.stop();  
```

--------------------------------

### Use default entry point with moveTo

Source: https://docs.workadventu.re/map-building/tiled-editor/entry-exit

Directs the user to the 'exit' location using the default entry point.

```text
.../my_map.json#&moveTo=exit
```

--------------------------------

### startStreaming()

Source: https://docs.workadventu.re/developer/map-scripting/references/api-spaces

Starts streaming audio/video in the space. This is only available if the `filterType` is set to `"streaming"`. If the `filterType` is set to `"everyone"`, anyone starting a webcam or microphone will automatically be audible to all other users in the space.

```APIDOC
## startStreaming()

### Description
Starts streaming audio/video in the space. This is only available if the `filterType` is set to `"streaming"`. If the `filterType` is set to `"everyone"`, anyone starting a webcam or microphone will automatically be audible to all other users in the space.

### Method
`startStreaming()`

### Example
```javascript
space.startStreaming();  
```
```

--------------------------------

### Example of banner closed

Source: https://docs.workadventu.re/developer/map-scripting/references/api-ui

Example call to WA.ui.banner.closeBanner() to close the banner.

```javascript
WA.ui.banner.closeBanner();  

```

--------------------------------

### WA.onInit()

Source: https://docs.workadventu.re/developer/map-scripting/references/api-start

Returns a Promise that resolves when the WorkAdventure API is fully ready. Use this before accessing properties like WA.player.name.

```APIDOC
## WA.onInit()

### Description
Returns a Promise that resolves when the WorkAdventure API is fully ready. Use this before accessing properties like WA.player.name.

### Method
onInit

### Endpoint
WA.onInit()

### Parameters
None

### Request Example
WA.onInit().then(() => {  
    console.log('Current player name: ', WA.player.name);  
});  

### Response
#### Success Response (Promise<void>)
Resolves when the API is ready.

#### Response Example
(async () => {  
    await WA.onInit();  
    console.log('Current player name: ', WA.player.name);  
})();  

```

--------------------------------

### Instantiating AudioWorkletNode in main file

Source: https://docs.workadventu.re/blog/realtime-api

Demonstrates initializing an AudioContext, loading the processor module, and connecting the AudioWorkletNode to a MediaStreamDestination.

```typescript
// Sample rate returned by OpenAI is 24kHz  
const audioContext = new AudioContext({ sampleRate: 24000 });  
  
// Let's create the MediaStream  
const mediaStreamDestination = this.audioContext.createMediaStreamDestination();  
  
await this.audioContext.resume();  
  
// Let's load the audio worklet processor (assuming the file is available in the pcm-processor.js)  
await this.audioContext.audioWorklet.addModule("output-pcm-processor.js");  
  
// Instantiate the audio worklet node (we use the 'output-pcm-worklet-processor' string to match the name we used in the registerProcessor call)  
const workletNode = new AudioWorkletNode(this.audioContext, 'output-pcm-worklet-processor');  
  
// Connect the worklet node to the media stream destination  
workletNode.connect(this.mediaStreamDestination);
```

--------------------------------

### Self-hosted map URL example

Source: https://docs.workadventu.re/map-building/tiled-editor/publish/wa-hosted

An example of a constructed URL for a map on a self-hosted server.

```text
https://play.workadventu.re/~/map/my-map.wam
```
Tokens:
Raw