v1.6.16 - allow to set pattern opacity

index.html

@@ -219,15 +219,15 @@
       </g>
 
       <pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
-        <image id="oceanicPattern" href="./images/pattern1.png" width="100" height="100" opacity=".2"></image>
+        <image id="oceanicPattern" href="./images/pattern1.png"></image>
       </pattern>
     </defs>
     <g id="viewbox"></g>
     <g id="scaleBar"></g>
     <g id="initial" opacity=1>
-      <rect x="-1%" y="-1%" width="102%" height="102%" fill="#466eab"></rect>
-      <rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)"></rect>
-      <use href="#rose" id="init-rose" x="50%" y="50%"></use>
+      <rect x="-1%" y="-1%" width="102%" height="102%" fill="#466eab"/>
+      <rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)" opacity=".2"/>
+      <use href="#rose" id="init-rose" x="50%" y="50%"/>
     </g>
   </svg>
 
@@ -505,6 +505,14 @@
               </td>
             </tr>
 
+            <tr data-tip="Set ocean pattern opacity">
+              <td>Pattern opacity</td>
+              <td>
+                <input id="styleOceanPatternOpacity" type="range" min=0 max=1 step=.01 value=.2 />
+                <output id="styleOceanPatternOpacityOutput">0.2</output>
+              </td>
+            </tr>
+
             <tr data-tip="Define the coast outline contours scheme">
               <td>Ocean layers</td>
               <td>
@@ -520,22 +528,13 @@
               </td>
             </tr>
 
-            <tr data-tip="Set background color. Not visible if opacity is 1">
-              <td>Background</td>
+            <tr data-tip="Set ocean color">
+              <td>Color</td>
               <td>
-                <input id="styleOceanBack" type="color" value="#000000"/>
-                <output id="styleOceanBackOutput">#000000</output>
+                <input id="styleOceanFill" type="color" value="#466eab"/>
+                <output id="styleOceanFillOutput">#466eab</output>
               </td>
             </tr>
-
-            <tr data-tip="Set foreground color. Visible if opacity > 0">
-              <td>Foreground</td>
-              <td>
-                <input id="styleOceanFore" type="color" value="#466eab"/>
-                <output id="styleOceanForeOutput">#466eab</output>
-              </td>
-            </tr>
-
           </tbody>
 
           <tbody id="styleGrid">

main.js

@@ -357,6 +357,7 @@ function showWelcomeMessage() {
       <li>Lake outlet width depends on flux</li>
       <li>Lakes now have names</li>
       <li>Rulers rework (v1.61)</li>
+      <li>New ocean pattern by Kiwiroo (v1.61)</li>
     </ul>
 
     <iframe width="100%" height="auto" src="https://www.youtube.com/embed/XBSNkTf1Ddg?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

modules/save-and-load.js

@@ -84,7 +84,10 @@ async function getMapURL(type, subtype) {
   const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
   if (isFirefox && type === "mesh") clone.select("#oceanPattern").remove();
   if (subtype === "globe") clone.select("#scaleBar").remove();
-  if (subtype === "noWater") {clone.select("#oceanBase").attr("opacity", 0); clone.select("#oceanPattern").attr("opacity", 0);}
+  if (subtype === "noWater") {
+    clone.select("#oceanBase").attr("opacity", 0);
+    clone.select("#oceanPattern").attr("opacity", 0);
+  }
   if (type !== "png") {
     // reset transform to show the whole map
     clone.attr("width", graphWidth).attr("height", graphHeight);
@@ -1177,7 +1180,8 @@ function parseLoadedData(data) {
         const pattern = document.getElementById("oceanic");
         const filter = pattern.firstElementChild.getAttribute("filter");
         const href = filter ? "./images/" + filter.replace("url(#", "").replace(")", "") + ".png" : "";
-        pattern.innerHTML = `<image id="oceanicPattern" href=${href} width="100" height="100" opacity=".2"></image>`;
+        pattern.innerHTML = `<image id="oceanicPattern" href=${href} width="100" height="100"></image>`;
+        document.getElementById("oceanPattern").setAttribute("opacity", .2);
       }
     }()