Merge pull request #330 from thecodingmachine/exiturl

Adding exitUrl property

front/src/Connexion/ConnectionManager.ts

@@ -29,7 +29,7 @@ class ConnectionManager {
             const roomSlug = data.roomSlug;
             urlManager.editUrlForRoom(roomSlug, organizationSlug, worldSlug);
 
-            const room = new Room(window.location.pathname);
+            const room = new Room(window.location.pathname + window.location.hash);
             return Promise.resolve(room);
         } else if (connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) {
             const localUser = localUserStore.getLocalUser();
@@ -46,7 +46,7 @@ class ConnectionManager {
                 const defaultMapUrl = window.location.host.replace('play.', 'maps.') + URL_ROOM_STARTED;
                 roomId = urlManager.editUrlForRoom(defaultMapUrl, null, null);
             } else {
-                roomId = window.location.pathname;
+                roomId = window.location.pathname + window.location.hash;
             }
             const room = new Room(roomId);
             return Promise.resolve(room);
@@ -55,7 +55,7 @@ class ConnectionManager {
 
             if (localUser) {
                 this.localUser = localUser
-                const room = new Room(window.location.pathname);
+                const room = new Room(window.location.pathname + window.location.hash);
                 return Promise.resolve(room);
             } else {
                 //todo: find some kind of fallback?

front/src/Connexion/Room.ts

@@ -6,8 +6,10 @@ export class Room {
     public readonly isPublic: boolean;
     private mapUrl: string|undefined;
     private instance: string|undefined;
+    public readonly hash: string;
 
     constructor(id: string) {
+        this.hash = '';
         if (id.startsWith('/')) {
             id = id.substr(1);
         }
@@ -19,6 +21,13 @@ export class Room {
         } else {
             throw new Error('Invalid room ID');
         }
+
+        const indexOfHash = this.id.indexOf('#');
+        if (indexOfHash !== -1) {
+            const idWithHash = this.id;
+            this.id = this.id.substr(0, indexOfHash);
+            this.hash = idWithHash.substr(indexOfHash + 1);
+        }
     }
 
     public async getMapUrl(): Promise<string> {

front/src/Phaser/Game/GameScene.ts

@@ -54,8 +54,7 @@ export enum Textures {
 }
 
 export interface GameSceneInitInterface {
-    initPosition: PointInterface|null,
+    initPosition: PointInterface|null
-    startLayerName: string|undefined
 }
 
 interface InitUserPositionEventInterface {
@@ -130,7 +129,6 @@ export class GameScene extends ResizableScene implements CenterListener {
     }
 
     private PositionNextScene: Array<Array<{ key: string, hash: string }>> = new Array<Array<{ key: string, hash: string }>>();
-    private startLayerName: string|undefined;
     private presentationModeSprite!: Sprite;
     private chatModeSprite!: Sprite;
     private gameMap!: GameMap;
@@ -315,8 +313,6 @@ export class GameScene extends ResizableScene implements CenterListener {
     init(initData : GameSceneInitInterface) {
         if (initData.initPosition !== undefined) {
             this.initPosition = initData.initPosition;
-        } else if (initData.startLayerName !== undefined) {
-            this.startLayerName = initData.startLayerName;
         }
     }
 
@@ -341,7 +337,10 @@ export class GameScene extends ResizableScene implements CenterListener {
                 this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
             }
             if (layer.type === 'tilelayer' && this.getExitSceneUrl(layer) !== undefined) {
-                this.loadNextGame(layer, this.mapFile.width, this.mapFile.tilewidth, this.mapFile.tileheight);
+                this.loadNextGameFromExitSceneUrl(layer, this.mapFile.width);
+            } else if (layer.type === 'tilelayer' && this.getExitUrl(layer) !== undefined) {
+                console.log('Loading exitUrl ', this.getExitUrl(layer))
+                this.loadNextGameFromExitUrl(layer, this.mapFile.width);
             }
             if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
                 depth = 10000;
@@ -357,9 +356,9 @@ export class GameScene extends ResizableScene implements CenterListener {
             this.startY = this.initPosition.y;
         } else {
             // Now, let's find the start layer
-            if (this.startLayerName) {
+            if (this.room.hash) {
                 for (const layer of this.mapFile.layers) {
-                    if (this.startLayerName === layer.name && layer.type === 'tilelayer' && this.isStartLayer(layer)) {
+                    if (this.room.hash === layer.name && layer.type === 'tilelayer' && this.isStartLayer(layer)) {
                         const startPosition = this.startUser(layer);
                         this.startX = startPosition.x;
                         this.startY = startPosition.y;
@@ -419,8 +418,8 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         // Let's alter browser history
         let path = this.room.id;
-        if (this.startLayerName) {
+        if (this.room.hash) {
-            path += '#'+this.startLayerName;
+            path += '#'+this.room.hash;
         }
         window.history.pushState({}, 'WorkAdventure', path);
 
@@ -656,6 +655,10 @@ export class GameScene extends ResizableScene implements CenterListener {
         }
     }
 
+    private getExitUrl(layer: ITiledMapLayer): string|undefined {
+        return this.getProperty(layer, "exitUrl") as string|undefined;
+    }
+
     private getExitSceneUrl(layer: ITiledMapLayer): string|undefined {
         return this.getProperty(layer, "exitSceneUrl") as string|undefined;
     }
@@ -680,15 +683,7 @@ export class GameScene extends ResizableScene implements CenterListener {
         return obj.value;
     }
 
-    /**
+    private loadNextGameFromExitSceneUrl(layer: ITiledMapLayer, mapWidth: number) {
-     *
-     * @param layer
-     * @param mapWidth
-     * @param tileWidth
-     * @param tileHeight
-     */
-    //todo: push that into the gameManager
-    private loadNextGame(layer: ITiledMapLayer, mapWidth: number, tileWidth: number, tileHeight: number){
         const exitSceneUrl = this.getExitSceneUrl(layer);
         if (exitSceneUrl === undefined) {
             throw new Error('Layer is not an exit scene layer.');
@@ -698,17 +693,33 @@ export class GameScene extends ResizableScene implements CenterListener {
             instance = this.instance;
         }
 
-        console.log('existSceneUrl', exitSceneUrl);
+        //console.log('existSceneUrl', exitSceneUrl);
-        console.log('existSceneInstance', instance);
+        //console.log('existSceneInstance', instance);
-
-        // TODO: eventually compute a relative URL
-
-        // TODO: handle /@/ URL CASES!
 
         const absoluteExitSceneUrl = new URL(exitSceneUrl, this.MapUrlFile).href;
         const absoluteExitSceneUrlWithoutProtocol = absoluteExitSceneUrl.toString().substr(absoluteExitSceneUrl.toString().indexOf('://')+3);
         const roomId = '_/'+instance+'/'+absoluteExitSceneUrlWithoutProtocol;
-        console.log("Foo", instance, absoluteExitSceneUrlWithoutProtocol);
+
+        this.loadNextGame(layer, mapWidth, roomId);
+    }
+
+    private loadNextGameFromExitUrl(layer: ITiledMapLayer, mapWidth: number) {
+        const exitUrl = this.getExitUrl(layer);
+        if (exitUrl === undefined) {
+            throw new Error('Layer is not an exit layer.');
+        }
+        const fullPath = new URL(exitUrl, window.location.toString()).pathname;
+
+        this.loadNextGame(layer, mapWidth, fullPath);
+    }
+
+    /**
+     *
+     * @param layer
+     * @param mapWidth
+     */
+    //todo: push that into the gameManager
+    private loadNextGame(layer: ITiledMapLayer, mapWidth: number, roomId: string){
         const room = new Room(roomId);
         gameManager.loadMap(room, this.scene);
         const exitSceneKey = roomId;
@@ -723,7 +734,7 @@ export class GameScene extends ResizableScene implements CenterListener {
             const y : number = parseInt(((key + 1) / mapWidth).toString());
             const x : number = key - (y * mapWidth);
 
-            let hash = new URL(exitSceneUrl, this.MapUrlFile).hash;
+            let hash = new URL(roomId, this.MapUrlFile).hash;
             if (hash) {
                 hash = hash.substr(1);
             }
@@ -960,9 +971,7 @@ export class GameScene extends ResizableScene implements CenterListener {
             this.simplePeer.unregister();
             this.scene.stop();
             this.scene.remove(this.scene.key);
-            this.scene.start(nextSceneKey.key, {
+            this.scene.start(nextSceneKey.key);
-                startLayerName: nextSceneKey.hash
-            });
         }
     }
 

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -121,30 +121,6 @@ export class SelectCharacterScene extends ResizableScene {
         } else {
             this.scene.start(CustomizeSceneName);
         }
-
-        // Do we have a start URL in the address bar? If so, let's redirect to this address
-        /*const instanceAndMapUrl = this.findMapUrl();
-        if (instanceAndMapUrl !== null) {
-            const [mapUrl, instance] = instanceAndMapUrl;
-            const key = gameManager.loadMap(mapUrl, this.scene, instance);
-            this.scene.start(key, {
-                startLayerName: window.location.hash ? window.location.hash.substr(1) : undefined
-            } as GameSceneInitInterface);
-            return {
-                mapUrlStart: mapUrl,
-                startInstance: instance
-            };
-        } else {
-            // If we do not have a map address in the URL, let's ask the server for a start map.
-            return gameManager.loadStartMap().then((startMap: StartMapInterface) => {
-                const key = gameManager.loadMap(window.location.protocol + "//" + startMap.mapUrlStart, this.scene, startMap.startInstance);
-                this.scene.start(key);
-                return startMap;
-            }).catch((err) => {
-                console.error(err);
-                throw err;
-            });
-        }*/
     }
 
     /**

website/dist/create-map.html

@@ -44,7 +44,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col">
+            < class="col">
                 <h2 id="tools-you-will-need" class="pixel-title">Tools you will need</h2>
                 <p>In order to build your own map for WorkAdventure, you need:</p>
                 <ul>
@@ -131,11 +131,22 @@
                 <p>In order to place an exit on your scene that leads to another scene:</p>
                 <ul>
                     <li>You must create a specific layer. When a character reaches ANY tile of that layer, it will exit the scene.</li>
-                    <li>In layer properties, you MUST add &quot;exitSceneUrl&quot; property. It represents the map URL of the next scene. For example : <code>/&lt;map folder&gt;/&lt;map&gt;.json</code>. Be careful, if you want the next map to be correctly loaded, you must check that the map files are in folder <code>back/src/Assets/Maps/&lt;your map folder&gt;</code>. The files will be accessible by url <code>&lt;HOST&gt;/map/files/&lt;your map folder&gt;/...</code>.</li>
+                    <li>In layer properties, you MUST add "exitUrl&quot; property. It represents the URL of the next scene. You can put relative or absolute URLs.</li>
-                    <li>In layer properties, you CAN add an &quot;exitInstance&quot; property. If set, you will join the map of the specified instance. Otherwise, you will stay on the same instance.</li>
                     <li>If you want to have multiple exits, you can create many layers with name &quot;exit&quot;. Each layer has a different key <code>exitSceneUrl</code> and have tiles that represent exits to another scene.</li>
                 </ul>
+                <p>
+                    <strong>Understanding map URLs in WorkAdventure:</strong><br/>
+                    There are 2 kinds of URLs in WorkAdventure:
+                    <ul>
+                        <li>Public URLs are in the form https://play.workadventu.re/_/[instance]/[server]/[path to map]</li>
+                        <li>Private URLs (used in paid accounts) are in the form https://play.workadventu.re/@/[organization]/[world]/[map]</li>
+                    </ul>
+                    Assuming your JSON map is hosted at "https://example.com/my/map.json", then you can browse your map at "https://play.workadventu.re/_/global/example.com/my/map.json".
+                    Here, "global" is a name of an "instance" of your map. You can put anything instead of "global" here. People on the same instance of the map can see each others.
+                    If 2 users use 2 different instances, they are on the same map, but in 2 parallel universes. They cannot see each other.
+                </p>
                 <p class="text-center"><img src="docs/exit_layer_map.png" alt="" style="width: 90%"></p>
+                <p>Note: in older releases of WorkAdventure, you could link to a map file directly using properties "exitSceneUrl&quot; and &quot;exitInstance&quot;. Those properties are now deprecated. Use "exitUrl" instead.</p>
                 <h3 id="defining-several-entry-points" class="pixel-title">Defining several entry points</h3>
                 <p>Often your map will have several exits, and therefore, several entry points. For instance, if there
                     is an exit by a door that leads to the garden map, when you come back from the garden you expect to
@@ -146,7 +157,7 @@
                     <li>You must create a specific layer. When a character enters the map by this entry point, it will enter the map randomly on ANY tile of that layer.</li>
                     <li>In layer properties, you MUST add a boolean &quot;startLayer&quot; property. It should be set to true.</li>
                     <li>The name of the entry point is the name of the layer</li>
-                    <li>To enter via this entry point, simply add a hash with the entry point name to the URL (&quot;#[<em>startLayerName</em>]&quot;). For instance: &quot;<a href="https://workadventu.re/_/global/mymap.com/path/map.json#my-entry-point">https://workadventu.re/_/global/mymap.com/path/map.json#my-entry-point</a>&quot;.</li>
+                    <li>To enter via this entry point, simply add a hash with the entry point name to the URL (&quot;#[<em>startLayerName</em>]&quot;). For instance: &quot;https://workadventu.re/_/global/mymap.com/path/map.json#my-entry-point&quot;.</li>
                     <li>You can of course use the &quot;#&quot; notation in an exit scene URL (so an exit scene URL will point to a given entry scene URL)</li>
                 </ul>