Adding exitUrl property

The exitUrl property can be applied on a layer to link to any kind of room (private or public)
This commit is contained in:
David Négrier 2020-10-15 15:50:51 +02:00
parent 517b3a644b
commit 36d73333f5
6 changed files with 165 additions and 160 deletions

View File

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

View File

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

View File

@ -54,8 +54,7 @@ export enum Textures {
} }
export interface GameSceneInitInterface { export interface GameSceneInitInterface {
initPosition: PointInterface|null, initPosition: PointInterface|null
startLayerName: string|undefined
} }
interface InitUserPositionEventInterface { 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 PositionNextScene: Array<Array<{ key: string, hash: string }>> = new Array<Array<{ key: string, hash: string }>>();
private startLayerName: string|undefined;
private presentationModeSprite!: Sprite; private presentationModeSprite!: Sprite;
private chatModeSprite!: Sprite; private chatModeSprite!: Sprite;
private gameMap!: GameMap; private gameMap!: GameMap;
@ -315,8 +313,6 @@ export class GameScene extends ResizableScene implements CenterListener {
init(initData : GameSceneInitInterface) { init(initData : GameSceneInitInterface) {
if (initData.initPosition !== undefined) { if (initData.initPosition !== undefined) {
this.initPosition = initData.initPosition; 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)); this.addLayer(this.Map.createStaticLayer(layer.name, this.Terrains, 0, 0).setDepth(depth));
} }
if (layer.type === 'tilelayer' && this.getExitSceneUrl(layer) !== undefined) { 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') { if (layer.type === 'objectgroup' && layer.name === 'floorLayer') {
depth = 10000; depth = 10000;
@ -357,9 +356,9 @@ export class GameScene extends ResizableScene implements CenterListener {
this.startY = this.initPosition.y; this.startY = this.initPosition.y;
} else { } else {
// Now, let's find the start layer // Now, let's find the start layer
if (this.startLayerName) { if (this.room.hash) {
for (const layer of this.mapFile.layers) { 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); const startPosition = this.startUser(layer);
this.startX = startPosition.x; this.startX = startPosition.x;
this.startY = startPosition.y; this.startY = startPosition.y;
@ -419,8 +418,8 @@ export class GameScene extends ResizableScene implements CenterListener {
// Let's alter browser history // Let's alter browser history
let path = this.room.id; let path = this.room.id;
if (this.startLayerName) { if (this.room.hash) {
path += '#'+this.startLayerName; path += '#'+this.room.hash;
} }
window.history.pushState({}, 'WorkAdventure', path); 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 { private getExitSceneUrl(layer: ITiledMapLayer): string|undefined {
return this.getProperty(layer, "exitSceneUrl") as string|undefined; return this.getProperty(layer, "exitSceneUrl") as string|undefined;
} }
@ -680,15 +683,7 @@ export class GameScene extends ResizableScene implements CenterListener {
return obj.value; 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); const exitSceneUrl = this.getExitSceneUrl(layer);
if (exitSceneUrl === undefined) { if (exitSceneUrl === undefined) {
throw new Error('Layer is not an exit scene layer.'); throw new Error('Layer is not an exit scene layer.');
@ -698,17 +693,33 @@ export class GameScene extends ResizableScene implements CenterListener {
instance = this.instance; 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 absoluteExitSceneUrl = new URL(exitSceneUrl, this.MapUrlFile).href;
const absoluteExitSceneUrlWithoutProtocol = absoluteExitSceneUrl.toString().substr(absoluteExitSceneUrl.toString().indexOf('://')+3); const absoluteExitSceneUrlWithoutProtocol = absoluteExitSceneUrl.toString().substr(absoluteExitSceneUrl.toString().indexOf('://')+3);
const roomId = '_/'+instance+'/'+absoluteExitSceneUrlWithoutProtocol; 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); const room = new Room(roomId);
gameManager.loadMap(room, this.scene); gameManager.loadMap(room, this.scene);
const exitSceneKey = roomId; const exitSceneKey = roomId;
@ -723,7 +734,7 @@ export class GameScene extends ResizableScene implements CenterListener {
const y : number = parseInt(((key + 1) / mapWidth).toString()); const y : number = parseInt(((key + 1) / mapWidth).toString());
const x : number = key - (y * mapWidth); const x : number = key - (y * mapWidth);
let hash = new URL(exitSceneUrl, this.MapUrlFile).hash; let hash = new URL(roomId, this.MapUrlFile).hash;
if (hash) { if (hash) {
hash = hash.substr(1); hash = hash.substr(1);
} }
@ -960,9 +971,7 @@ export class GameScene extends ResizableScene implements CenterListener {
this.simplePeer.unregister(); this.simplePeer.unregister();
this.scene.stop(); this.scene.stop();
this.scene.remove(this.scene.key); this.scene.remove(this.scene.key);
this.scene.start(nextSceneKey.key, { this.scene.start(nextSceneKey.key);
startLayerName: nextSceneKey.hash
});
} }
} }

View File

@ -123,30 +123,6 @@ export class SelectCharacterScene extends ResizableScene {
} else { } else {
this.scene.start(CustomizeSceneName); 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;
});
}*/
} }
/** /**

View File

@ -191,7 +191,7 @@
"opacity":1, "opacity":1,
"properties":[ "properties":[
{ {
"name":"exitSceneUrl", "name":"exitUrl",
"type":"string", "type":"string",
"value":"..\/Floor1\/floor1.json" "value":"..\/Floor1\/floor1.json"
}], }],

View File

@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> < class="col">
<h2 id="tools-you-will-need" class="pixel-title">Tools you will need</h2> <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> <p>In order to build your own map for WorkAdventure, you need:</p>
<ul> <ul>
@ -131,11 +131,22 @@
<p>In order to place an exit on your scene that leads to another scene:</p> <p>In order to place an exit on your scene that leads to another scene:</p>
<ul> <ul>
<li>You must create a specific layer. When a character reaches ANY tile of that layer, it will exit the scene.</li> <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> <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> </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 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> <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 <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 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>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>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>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> <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> </ul>