fix: Properties templates area (#190)

* Add bindings for areas
* Move function getAreaObject
* Update documentation of dynamic property

Author: mlima95

docs/images/areaBindings.png

@@ -31,6 +31,16 @@ You can create a new variable named "myWebsiteUrl" and bind it to the `openWebsi
 You can use template properties in:
 
 - any property of any "tile" layer
+- any property of a dynamic "area" object
+
+{.alert.alert-warning}
+To use bindings with area objects, you must first set the "dynamic" property to true.
+
+It should be noted that "dynamic" areas are accessible via the scripting API but are not editable in the (upcoming) map editor.
+<figure class="figure">
+    <img class="figure-img img-fluid rounded" src="images/areaBindings.png" alt="" />
+    <figcaption class="figure-caption">The Dynamic custom property</figcaption>
+</figure>
 
 ## Configuration
 
@@ -52,6 +62,8 @@ This means you can use all the features of Mustache like conditional:
 
 The website above will be displayed only if the `enableWebsite` variable is set to `true`.
 
+
+
 {.alert.alert-warning}
 Be sure to use `{{{ variableName }}}` for binding variable and NOT `{{ variableName }}`. The version with a double 
 curly-braces will work most of the time, but it escapes HTML characters (which is not needed in properties of a map)

docs/variable-to-property-binding.md

@@ -0,0 +1,17 @@
+import type { ITiledMapObject } from "@workadventure/tiled-map-type-guard/dist/ITiledMapObject";
+import { getLayersMap } from "./LayersFlattener";
+
+export async function getAreaObject(): Promise<ITiledMapObject[]> {
+    const layers = await getLayersMap();
+    const areaArray: Array<ITiledMapObject> = [];
+    for (const layer of layers.values()) {
+        if (layer.type === "objectgroup") {
+            for (const object of layer.objects) {
+                if (object.type === "area" || object.class === "area") {
+                    areaArray.push(object);
+                }
+            }
+        }
+    }
+    return areaArray;
+}

src/AreaObject.ts

@@ -1,11 +1,11 @@
 import { getLayersMap } from "../LayersFlattener";
 import { TemplateValue } from "../TemplateValue";
+import { getAreaObject } from "../AreaObject";
 
-export async function initPropertiesTemplates(): Promise<void> {
-    const layers = await getLayersMap();
-
-    for (const [layerName, layer] of layers.entries()) {
-        const properties = layer.properties ?? [];
+export async function initPropertiesTemplatesArea(): Promise<void> {
+    const areas = await getAreaObject();
+    for (const area of areas) {
+        const properties = area.properties ?? [];
         for (const property of properties) {
             if (
                 property.type === "int" ||
@@ -20,15 +20,54 @@ export async function initPropertiesTemplates(): Promise<void> {
                 continue;
             }
             const newValue = template.getValue();
-            setProperty(layerName, property.name, newValue);
+            await setPropertyArea(area.name, property.name, newValue);
 
-            template.onChange((newValue) => {
-                setProperty(layerName, property.name, newValue);
+            template.onChange(async (newValue) => {
+                await setPropertyArea(area.name, property.name, newValue);
             });
         }
     }
 }
 
+export async function initPropertiesTemplates(): Promise<void> {
+    const layers = await getLayersMap();
+
+    for (const [layerName, layer] of layers.entries()) {
+        if (layer.type !== "objectgroup") {
+            const properties = layer.properties ?? [];
+            for (const property of properties) {
+                if (
+                    property.type === "int" ||
+                    property.type === "bool" ||
+                    property.type === "object" ||
+                    typeof property.value !== "string"
+                ) {
+                    continue;
+                }
+                const template = new TemplateValue(property.value, WA.state);
+                if (template.isPureString()) {
+                    continue;
+                }
+                const newValue = template.getValue();
+                setProperty(layerName, property.name, newValue);
+
+                template.onChange((newValue) => {
+                    setProperty(layerName, property.name, newValue);
+                });
+            }
+        }
+    }
+}
+
+async function setPropertyArea(
+    areaName: string,
+    propertyName: string,
+    value: string,
+): Promise<void> {
+    console.log(areaName);
+    const area = await WA.room.area.get(areaName);
+    area.setProperty(propertyName, value);
+}
 /**
  * Sets the property value on the map.
  * Furthermore, if the property name is "visible", modify the visibility of the layer.

src/Features/properties_templates.ts

@@ -3,6 +3,7 @@
 
 export * from "./VariablesExtra";
 export * from "./Properties";
+export * from "./AreaObject";
 export * from "./LayersFlattener";
 export * from "./LayersExtra";
 export * from "./Features/properties_templates";

src/index.ts

@@ -1,7 +1,10 @@
 import { initDoors } from "./Features/doors";
 import { initSpecialProperties } from "./Features/special_properties";
 import { initConfiguration } from "./Features/configuration";
-import { initPropertiesTemplates } from "./Features/properties_templates";
+import {
+    initPropertiesTemplates,
+    initPropertiesTemplatesArea,
+} from "./Features/properties_templates";
 
 /**
  * Bootstraps all the features of the extra library.
@@ -14,6 +17,7 @@ export function bootstrapExtra(): Promise<void> {
             initSpecialProperties().catch((e) => console.error(e));
             initConfiguration().catch((e) => console.error(e));
             initPropertiesTemplates().catch((e) => console.error(e));
+            initPropertiesTemplatesArea().catch((e) => console.error(e));
         })
         .catch((e) => console.error(e));
 }