Adding support for the "tag" property in the "configuration" layer to…

… restrict visibility to the people with the given tag.

Also, caching results for getLayersMap

docs/automatic-configuration.md

@@ -26,6 +26,18 @@ For a variable to appear in the configuration form, it MUST be stored in a layer
     <figcaption class="figure-caption">List of variables that will be displayed in the configuration screen</figcaption>
 </figure>
 
+## Protecting the configuration screen
+
+By default, the configuration screen will be accessible to anyone. You will probably want to restrict the access of the 
+configuration screen to users that have a certain *tag*.
+
+To do this, simply add a `tag` property to the configuration layer. The value of the property is the name of the tag
+that users must have to access the configuration screen.
+
+<figure class="figure">
+    <img class="figure-img img-fluid rounded" src="images/configuration_tag.png" alt="" />
+    <figcaption class="figure-caption">Here, only users with tag "admin" will have access to the configuration screen</figcaption>
+</figure>
 
 
 ## Altering the display of a variable

src/Features/configuration.ts

@@ -1,9 +1,22 @@
+import {getLayersMap} from "../LayersFlattener";
+import {Properties} from "../Properties";
+
 /**
  * Initialize the configuration button in the menu
  */
-export function initConfiguration(assetsUrl?: string | undefined): void {
-    WA.ui.registerMenuCommand("Configure the room", () => {
-        assetsUrl = assetsUrl ?? process.env.ASSETS_URL ?? "";
-        WA.nav.openCoWebSite(assetsUrl + "configuration.html", true);
-    });
+export async function initConfiguration(assetsUrl?: string | undefined): Promise<void> {
+    const layers = await getLayersMap();
+
+    const configurationLayer = layers.get("configuration");
+
+    if (configurationLayer) {
+        const properties = new Properties(configurationLayer.properties);
+        const tag = properties.getString('tag');
+        if (!tag || WA.player.tags.includes(tag)) {
+            WA.ui.registerMenuCommand("Configure the room", () => {
+                assetsUrl = assetsUrl ?? process.env.ASSETS_URL ?? "";
+                WA.nav.openCoWebSite(assetsUrl + "configuration.html", true);
+            });
+        }
+    }
 }

src/Iframes/Configuration/index.ts

@@ -7,7 +7,6 @@ import { getLayersMap } from "../../LayersFlattener";
 
 (async () => {
     const layers = await getLayersMap();
-    console.log("LAYERS", layers);
 
     const configurationLayer = layers.get("configuration");
     if (configurationLayer === undefined) {

src/LayersFlattener.ts

@@ -1,11 +1,20 @@
 import type { ITiledMap, ITiledMapLayer } from "@workadventure/tiled-map-type-guard";
 
+let layersMapPromise: Promise<Map<string, ITiledMapLayer>>|undefined = undefined;
+
 /**
  * Returns a map of all layers in a uni-dimensional map.
  * Layers are renamed: if they are in a group layer, the name of the group layer is prepended with a "/" as a separator.
  * Layers are indexed by name.
  */
 export async function getLayersMap(): Promise<Map<string, ITiledMapLayer>> {
+    if (layersMapPromise === undefined) {
+        layersMapPromise = getLayersMapWithoutCache();
+    }
+    return layersMapPromise;
+}
+
+async function getLayersMapWithoutCache(): Promise<Map<string, ITiledMapLayer>> {
     return flattenGroupLayersMap(await WA.room.getTiledMap());
 }
 

src/bootstrap.ts

@@ -9,7 +9,7 @@ import {initSpecialProperties} from "./Features/special_properties";
 WA.onInit().then(() => {
     initDoors().catch((e) => console.error(e));
     initSpecialProperties().catch((e) => console.error(e));
-    initConfiguration();
+    initConfiguration().catch((e) => console.error(e));
     initPropertiesTemplates().catch((e) => console.error(e));
 });