From 57135003b988ad1d5515ef2e869b3c84a112c6a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Franchet?= <raphael.franchet@ametys.org>
Date: Wed, 2 Oct 2019 14:17:14 +0200
Subject: [PATCH] EN-FR - Swamp-Marais #17

---
 maps/data/Swamp/data.js     |  8 ++++++-
 maps/resources/css/maps.css | 29 ++++++++++++++++++++--
 maps/resources/js/maps.js   | 48 ++++++++++++++++++++++++++++++++++---
 3 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/maps/data/Swamp/data.js b/maps/data/Swamp/data.js
index cbb2f442..1a923ced 100644
--- a/maps/data/Swamp/data.js
+++ b/maps/data/Swamp/data.js
@@ -18,7 +18,13 @@ Swamp = {
                     'fr': "Quitter une zone d’eau coûte 1 point de mouvement supplémentaire. Quitter une zone d’eau pour monter directement sur une zone de bois coûte 2 points de mouvement supplémentaires.",
                     'en': "A character must spend 1 extra movement point to move out of a water area. A character can move from a water area to an adjacent wood area by spending 2 extra movement points."
                 },
-                coordinates: []
+                coordinates: [],
+                areas: ['1','2','3','4','13','15','17','18','20','26','28','29','31','33a','36','38','39','40','44','48','51','52','53','54'],
+                areasColor: "turquoise",
+                areasText: {
+                    'fr': "Les zones d'eau sont visibles en turquoise.",
+                    'en': "The water areas are visible in turquoise."
+                }
             }, {
                 title: { 
                     'fr': "Saut",
diff --git a/maps/resources/css/maps.css b/maps/resources/css/maps.css
index 6bf74955..fbe8606b 100644
--- a/maps/resources/css/maps.css
+++ b/maps/resources/css/maps.css
@@ -341,7 +341,7 @@
     overflow: auto;
 }
 
-.map-help-rule-title, .map-help-rule-description {
+.map-help-rule-title, .map-help-rule-description, .map-help-rule-areas {
     font-family: 'Moolbor';
     display: block;
 }
@@ -363,11 +363,22 @@
     line-height: 22px;
 }
 
-.map-help-rule-description {
+.map-help-rule-description, .map-help-rule-areas {
     padding-left: 33px;
     font-size: 25px;
     line-height: 20px;
 }
+.map-help-rule-areas .map-help-rule-areas-square {
+    width: 18px;
+    height: 14px;
+    display: inline-block;
+    border: 1px solid #000;
+    margin: 0 12px 0 3px;;
+    vertical-align: middle;
+    top: -2px;
+    position: relative;
+}
+
 
 .map-map-help .map-help-character {
     width: 25px;
@@ -443,3 +454,17 @@
 .map-map-area-zone-target:hover {
     fill-opacity: 0.4; 
 }
+
+
+
+.img-wrap svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+}
+.img-wrap path {
+    opacity: 0.3;
+}
\ No newline at end of file
diff --git a/maps/resources/js/maps.js b/maps/resources/js/maps.js
index a08e9f26..aa0d69e6 100644
--- a/maps/resources/js/maps.js
+++ b/maps/resources/js/maps.js
@@ -316,6 +316,9 @@ var ConanMaps = {
     _helpPoints: function()
     {
         var rules = ConanMaps._files[ConanMaps._currentMap].description.rules;
+
+        var id = "maps-map";
+        var mapC = $('#' + id + " .map-map-help");
         
         var helpImageSize = $(document.body).height() * .3; // Css says 30vh
         var bbSize = 10 / helpImageSize * 100; // 1 legend is 20px. so center is 10px at left/top
@@ -335,9 +338,32 @@ var ConanMaps = {
             // aide += "<h1>" + ConanMaps._files[ConanMaps._currentMap].description.title[Language] + "</h1>"; 
             aide += "<div class='map-help-thumb'>";
             aide += "<div style=\"transform: rotate(" + (-90*ConanMaps._rotation) + "deg)\">";
+            
+        var code = "";
         if (rules)
         {
             for (var i=0; i < rules.length; i++) {
+                if (rules[i].areas)
+                {
+                    for (var j=0; j < rules[i].areas.length; j++)
+                    {
+                        var areaName = rules[i].areas[j];
+                        var zone = ConanMaps._files[ConanMaps._currentMap].zones[areaName];
+                        
+                        var line = "";
+                        for (var k=0; k < zone.area.length; k++)
+                        {
+                            line += (k == 0 ? "M" : "L") + zone.area[k][0] + "," + zone.area[k][1] + "";
+                        }
+                        
+                        code += "<path style=\"fill: " + rules[i].areasColor + "\"" +
+                            "d='" + line + "' " +
+                            "class='map-map-area-zone-mini'>" +
+                        "</path>";
+
+                    }
+
+                }
                 if (rules[i].coordinates)
                 {
                     for (var j=0; j < rules[i].coordinates.length; j++) 
@@ -347,25 +373,41 @@ var ConanMaps = {
                     }
                 }
             }
+            
         }
+        
+            aide += "<div class='img-wrap'>"
+            if (code)
+            {
+                aide += "<svg  viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">" + code + "</svg>";
+            }
             aide += "<img src=\"maps/data/" + ConanMaps._currentMap + "/board.png\"/></div>";
             aide += "</div>";
+            
+            
+            aide += "</div>";
 
 
         if (rules)
         {
             aide += "<ul>";
-            for (var i=0; i < rules.length; i++) {
+            for (var i=0; i < rules.length; i++) 
+            {
+                var areaAide = "";
+                if (rules[i].areas)
+                {
+                    areaAide += "<span class='map-help-rule-areas'><span class='map-help-rule-areas-square' style='background-color: " + rules[i].areasColor + "'></span>" + rules[i].areasText[Language] + "</span>"
+                }
+                
                 aide += "<li>"
                 + "<span class='map-help-rule-title' data-num='" + (i + 1) + "'>" + rules[i].title[Language] + "</span>"
                 + "<span class='map-help-rule-description'>" + ConanMaps._replace(rules[i].description[Language]) + "</span>"
+                + areaAide
                 + "</li>";
             }
             aide += "</ul>"
         }
         
-        var id = "maps-map";
-        var mapC = $('#' + id + " .map-map-help");
         mapC.html(aide);
     },