merged develop

docs/maps/api-player.md

@@ -79,6 +79,34 @@ WA.onInit().then(() => {
 ```
 
 
+### Get the user-room token of the player
+
+```
+WA.player.userRoomToken: string;
+```
+
+The user-room token is available from the `WA.player.userRoomToken` property.
+
+This token can be used by third party services to authenticate a player and prove that the player is in a given room.
+The token is generated by the administration panel linked to WorkAdventure. The token is a string and is depending on your implementation of the administration panel.
+In WorkAdventure SAAS version, the token is a JWT token that contains information such as the player's room ID and its associated membership ID.
+
+If you are using the self-hosted version of WorkAdventure and you developed your own administration panel, the token can be anything.
+By default, self-hosted versions of WorkAdventure don't come with an administration panel, so the token string will be empty.
+
+{.alert.alert-info}
+A typical use-case for the user-room token is providing logo upload capabilities in a map.
+The token can be used as a way to authenticate a WorkAdventure player and ensure he is indeed in the map and authorized to upload a logo.
+
+{.alert.alert-info}
+You need to wait for the end of the initialization before accessing `WA.player.userRoomToken`
+
+```typescript
+WA.onInit().then(() => {
+    console.log('Token: ', WA.player.userRoomToken);
+})
+```
+
 ### Listen to player movement
 ```
 WA.player.onPlayerMove(callback: HasPlayerMovedEventCallback): void;

docs/maps/camera.md

@@ -0,0 +1,86 @@
+{.section-title.accent.text-primary}
+# Working with camera
+
+## Focusable Zones
+
+It is possible to define special regions on the map that can make the camera zoom and center on themselves. We call them "Focusable Zones". When player gets inside, his camera view will be altered - focused, zoomed and locked on defined zone, like this:
+
+<div class="px-5 card rounded d-inline-block">
+    <img class="document-img" src="images/camera/0_focusable_zone.png" alt="" />
+</div>
+
+### Adding new **Focusable Zone**:
+
+1. Make sure you are editing an **Object Layer**
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/1_object_layer.png" alt="" />
+    </div>
+
+2. Select **Insert Rectangle** tool
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/2_rectangle_zone.png" alt="" />
+    </div>
+
+3. Define new object wherever you want. For example, you can make your chilling room event cosier!
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/3_define_new_zone.png" alt="" />
+    </div>
+
+4. Edit this new object and click on **Add Property**, like this:
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/4_click_add_property.png" alt="" />
+    </div>
+
+5. Add a **bool** property of name *focusable*:
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/5_add_focusable_prop.png" alt="" />
+    </div>
+
+6. Make sure it's checked! :)
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/6_make_sure_checked.png" alt="" />
+    </div>
+
+All should be set up now and your new **Focusable Zone** should be working fine!
+
+### Defining custom zoom margin:
+
+If you want, you can add an additional property to control how much should the camera zoom onto focusable zone.
+
+1. Like before, click on **Add Property**
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/4_click_add_property.png" alt="" />
+    </div>
+
+2. Add a **float** property of name *zoom_margin*:
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/7_add_zoom_margin.png" alt="" />
+    </div>
+
+2. Define how much (in percentage value) should the zoom be decreased:
+
+    <div class="px-5 card rounded d-inline-block">
+        <img class="document-img" src="images/camera/8_optional_zoom_margin_defined.png" alt="" />
+    </div>
+
+    For example, if you define your zone as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire zone + margin of 50% of its dimensions, so 450x300.
+
+    - No margin defined
+
+        <div class="px-5 card rounded d-inline-block">
+            <img class="document-img" src="images/camera/no_margin.png" alt="" />
+        </div>
+
+    - Margin set to **0.35**
+
+        <div class="px-5 card rounded d-inline-block">
+            <img class="document-img" src="images/camera/with_margin.png" alt="" />
+        </div>

docs/maps/menu.php

@@ -51,6 +51,12 @@ return [
         'markdown' => 'maps.website-in-map',
         'editUrl' => 'https://github.com/thecodingmachine/workadventure/edit/develop/docs/maps/website-in-map.md',
     ],
+    [
+        'title' => 'Camera',
+        'url' => '/map-building/camera.md',
+        'markdown' => 'maps.camera',
+        'editUrl' => 'https://github.com/thecodingmachine/workadventure/edit/develop/docs/maps/camera.md',
+    ],
     [
         'title' => 'Variables',
         'url' => '/map-building/variables.md',

docs/maps/wa-maps.md

@@ -92,3 +92,19 @@ You can add properties either on individual tiles of a tileset OR on a complete
 If you put a property on a layer, it will be triggered if your Woka walks on any tile of the layer.
 
 The exception is the "collides" property that can only be set on tiles, but not on a complete layer.
+
+## Insert helpful information in your map
+
+By setting properties on the map itself, you can help visitors know more about the creators of the map.
+
+The following *map* properties are supported:
+* `mapName` (string)
+* `mapDescription` (string)
+* `mapCopyright` (string)
+
+And *each tileset* can also have a property called `tilesetCopyright` (string). 
+
+Resulting in a "credit" page in the menu looking like this:
+
+![](images/mapProperties.png){.document-img}
+