Display map variant information

src/assets/js/maps-redux.js

@@ -161,7 +161,27 @@ function populateDownloadModal(id) {
         node.appendChild(includeEl.cloneNode(true));
       });
     });
-  }
+  };
+
+  document.querySelectorAll('[data-populate="variants"]').forEach(node => {
+    node.innerHTML = "";
+    document.getElementById('mr-map-variants').classList.add('d-none');
+  });
+  if (map.variants) {
+    document.getElementById('mr-map-variants').classList.remove('d-none');
+    map.variants.forEach(variant => {
+      var variantEl = document.createElement('li');
+      variantEl.innerHTML = variant.override_name ? variant.name : map.name + ": " + variant.name;
+
+      document.querySelectorAll('[data-populate="variants"]').forEach(node => {
+        node.appendChild(variantEl.cloneNode(true));
+      });
+    });
+
+    const variantInfo = `The following variant of ${map.name} is bundled with this map:`;
+    const variantInfoPlural = `The following variants of ${map.name} are bundled with this map:`;
+    populateElementContent("variant-info", map.variants.length > 1 ? variantInfoPlural : variantInfo);
+  };
 
   document.querySelectorAll('[data-populate="license-name"]').forEach(node => {
     node.innerHTML = license.name;

src/data/maps/pgm.json

@@ -68,7 +68,8 @@
                         "tags": [
                             "christmas",
                             "halloween",
-                            "tournament"
+                            "tournament",
+                            "variants"
                         ]
                     },
                     {

src/partials/pages/maps_redux/components/maps_redux_modal_download.html

@@ -26,6 +26,11 @@ <h6>XML Includes</h6>
               <p>This map has external XML dependencies that must be included on your PGM server in order to be loaded.</p>
               <div data-populate="includes" class="mr-includes"></div>
             </div>
+            <div class="col-12 col-lg-6 px-0 pr-lg-3 mt-1" id="mr-map-variants">
+              <h6>Map Variants</h6>
+              <p data-populate="variant-info"></p>
+              <ul data-populate="variants" class="mr-variants" style="font-size:1rem"></ul>
+            </div>
           </div>
           <div class="modal-inner-card mr-license row mb-3">
             <div class="col-12 col-lg-6 px-0 pr-lg-3 pb-3 pb-lg-0">

src/partials/pages/maps_redux/components/maps_redux_thumbnail.html

@@ -3,6 +3,9 @@
     <img {{#unless disableLazy}}data-{{/unless}}src="{{source.image_url}}" class="mr-header-image lazy" {{#if disableLazy}}onerror="this.src='/assets/img/404.png'"{{/if}}/>
     <div class="mr-header-banner">
       <div class="mr-header-title">
+        {{#if variants}}
+        <i class="fa fa-layer-group mr-header-variants text-warning" data-toggle="tooltip" title="This map includes {{length variants}} variant{{#gt (length variants) 1}}s{{/gt}}"></i>
+        {{/if}}
         {{name}}
         <span class="mr-header-title-suffix">{{#if version}}v{{version}}{{/if}}</span>
       </div>