Merge pull request #1626 from workadventure-xce/fix/mapProperties

Display link to map in map credits if provided in map properties

docs/maps/wa-maps.md

@@ -98,13 +98,14 @@ The exception is the "collides" property that can only be set on tiles, but not
 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)
+* `mapName` (string): The name of your map
+* `mapLink` (string): A link to your map, for example a repository
+* `mapDescription` (string): A short description of your map
+* `mapCopyright` (string): Copyright notice
 
-And *each tileset* can also have a property called `tilesetCopyright` (string). 
+Each *tileset* can also have a property called `tilesetCopyright` (string). 
+If you are using audio files in your map, you can declare a layer property `audioCopyright` (string).
 
 Resulting in a "credit" page in the menu looking like this:
 
 ![](images/mapProperties.png){.document-img}
-

front/src/Components/Menu/AboutRoomSubMenu.svelte

@@ -6,11 +6,14 @@
 
     let expandedMapCopyright = false;
     let expandedTilesetCopyright = false;
+    let expandedAudioCopyright = false;
 
     let mapName: string = "";
+    let mapLink: string = "";
     let mapDescription: string = "";
     let mapCopyright: string = "The map creator did not declare a copyright for the map.";
     let tilesetCopyright: string[] = [];
+    let audioCopyright: string[] = [];
 
     onMount(() => {
         if (gameScene.mapFile.properties !== undefined) {
@@ -18,6 +21,10 @@
             if (propertyName !== undefined && typeof propertyName.value === "string") {
                 mapName = propertyName.value;
             }
+            const propertyLink = gameScene.mapFile.properties.find((property) => property.name === "mapLink");
+            if (propertyLink !== undefined && typeof propertyLink.value === "string") {
+                mapLink = propertyLink.value;
+            }
             const propertyDescription = gameScene.mapFile.properties.find(
                 (property) => property.name === "mapDescription"
             );
@@ -36,7 +43,18 @@
                     (property) => property.name === "tilesetCopyright"
                 );
                 if (propertyTilesetCopyright !== undefined && typeof propertyTilesetCopyright.value === "string") {
-                    tilesetCopyright = [...tilesetCopyright, propertyTilesetCopyright.value]; //Assignment needed to trigger Svelte's reactivity
+                    // Assignment needed to trigger Svelte's reactivity
+                    tilesetCopyright = [...tilesetCopyright, propertyTilesetCopyright.value];
+                }
+            }
+        }
+
+        for (const layer of gameScene.mapFile.layers) {
+            if (layer.type && layer.type === "tilelayer" && layer.properties) {
+                const propertyAudioCopyright = layer.properties.find((property) => property.name === "audioCopyright");
+                if (propertyAudioCopyright !== undefined && typeof propertyAudioCopyright.value === "string") {
+                    // Assignment needed to trigger Svelte's reactivity
+                    audioCopyright = [...audioCopyright, propertyAudioCopyright.value];
                 }
             }
         }
@@ -48,6 +66,9 @@
     <section class="container-overflow">
         <h3>{mapName}</h3>
         <p class="string-HTML">{mapDescription}</p>
+        {#if mapLink}
+            <p class="string-HTML">&gt; <a href={mapLink} target="_blank">link to this map</a> &lt;</p>
+        {/if}
         <h3 class="nes-pointer hoverable" on:click={() => (expandedMapCopyright = !expandedMapCopyright)}>
             Copyrights of the map
         </h3>
@@ -60,8 +81,21 @@
                 <p class="string-HTML">{copyright}</p>
             {:else}
                 <p>
-                    The map creator did not declare a copyright for the tilesets. Warning, This doesn't mean that those
-                    tilesets have no license.
+                    The map creator did not declare a copyright for the tilesets. This doesn't mean that those tilesets
+                    have no license.
+                </p>
+            {/each}
+        </section>
+        <h3 class="nes-pointer hoverable" on:click={() => (expandedAudioCopyright = !expandedAudioCopyright)}>
+            Copyrights of audio files
+        </h3>
+        <section hidden={!expandedAudioCopyright}>
+            {#each audioCopyright as copyright}
+                <p class="string-HTML">{copyright}</p>
+            {:else}
+                <p>
+                    The map creator did not declare a copyright for audio files. This doesn't mean that those tilesets
+                    have no license.
                 </p>
             {/each}
         </section>

maps/tests/Properties/mapProperties.json

@@ -8,6 +8,12 @@
          "id":1,
          "name":"start",
          "opacity":1,
+         "properties":[
+                {
+                 "name":"audioCopyright",
+                 "type":"string",
+                 "value":"Copyright 2021 John Doe"
+                }],
          "type":"tilelayer",
          "visible":true,
          "width":10,
@@ -124,4 +130,4 @@
  "type":"map",
  "version":1.4,
  "width":10
-}
+}