wip

generator/components/card-icon.html

@@ -26,50 +26,99 @@
         var mainDoc = document;
         var importDoc = document.currentScript.ownerDocument;
 
-        var proto = Object.create(HTMLDivElement.prototype);
-        proto.loadSvg = function (src, callback) {
-            var isLocal = window.location.protocol === 'file:';
-            var httpRequest = new XMLHttpRequest();
+        var svgCache = {};
+
+        function loadSvgCached(src) {
+            if (src === undefined || src === null || src === "") {
+                return Promise.resolve(null);
+            } else if (svgCache[src]) {
+                return svgCache[src];
+            } else {
+                var promise = loadSvg(src);
+                svgCache[src] = promise;
+                return promise;
+            }
+        }
+        function loadSvg(src) {
+            console.log("Loading " + src);
+            return new Promise(function(resolve, reject) {
 
-            httpRequest.onreadystatechange = function () {
-                if (httpRequest.readyState === 4) {
+                var httpRequest = new XMLHttpRequest();
 
-                    if (httpRequest.status === 404 || httpRequest.responseXML === null) {
-                        throw new Error("Error loading SVG");
-                    }
+                httpRequest.onreadystatechange = function () {
+                    if (httpRequest.readyState === 4) {
+
+                        if (httpRequest.status === 404 || httpRequest.responseXML === null) {
+                            reject(Error("Error loading SVG from " + src));
+                        }
 
-                    if (httpRequest.status === 200 || (isLocal && httpRequest.status === 0)) {
-                        if (httpRequest.responseXML instanceof Document) {
-                            callback(httpRequest.responseXML.children[0]);
+                        if (httpRequest.status === 200) {
+                            if (httpRequest.responseXML instanceof Document) {
+                                var svg = httpRequest.responseXML.children[0];
+                                cleanSvg(svg);
+                                resolve(svg);
+                            }
                         }
                     }
                 }
+
+                httpRequest.open('GET', src);
+                if (httpRequest.overrideMimeType) httpRequest.overrideMimeType('text/xml');
+                httpRequest.send();
+            });
+        }
+        function cleanSvg(svg) {
+            // Remove all whitespace
+            for (var i = 0; i < svg.childNodes.length; ++i) {
+                var child = svg.childNodes[i];
+                if (child.nodeName == "#text") {
+                    svg.removeChild(child);
+                }
+            }
+
+            // Keep only the last path
+            while (svg.childNodes.length > 1) {
+                svg.removeChild(svg.firstChild);
             }
 
-            httpRequest.open('GET', src);
-            if (httpRequest.overrideMimeType) httpRequest.overrideMimeType('text/xml');
-            httpRequest.send();
+            // Remove the fill of the remaining paths
+            var path = svg.firstChild;
+            if (path) {
+                path.style.fill = "";
+            }
+
+            return svg;
+        }
+
+
+        var proto = Object.create(HTMLDivElement.prototype);
+        proto.setSvg = function (svg) {
+            var root = this.shadowRoot;
+            var container = root.getElementById("icon-container");
+
+            // Remove the previous SVG
+            while (container.firstChild) {
+                container.removeChild(container.firstChild);
+            }
+
+            // Replace it with the new one
+            if (svg !== null) {
+                container.appendChild(svg.cloneNode(true));
+            }
         }
         Object.defineProperty(proto, "src", {
             get: function() { 
                 return "";
             },
             set: function (value) {
+                console.log("Property src=" + value);
                 this.setAttribute('src', value);
 
-                var root = this.shadowRoot;
-                var container = root.getElementById("icon-container");
-                while (container.firstChild) {
-                    container.removeChild(container.firstChild);
-                }
-                this.loadSvg(value, function (svg) {
-                    container.appendChild(svg);
-
-                    // game-icons.net specific modifications
-                    var firstPath = root.querySelector("svg path");
-                    svg.removeChild(firstPath);
-                    var secondPath = root.querySelector("svg path");
-                    secondPath.style.fill = "";
+                var element = this;
+                loadSvgCached(value).then(function (svg) {
+                    element.setSvg(svg);
+                }, function (error) {
+                    // console.log(error);
                 });
             }
         });

generator/js/ui.ts

@@ -13,6 +13,7 @@ module RpgCardsUI {
     var cardGenerator: RpgCards.CardHtmlGenerator = null;
     var pageGenerator: RpgCards.PageHtmlGenerator = null;
     var editor: AceAjax.Editor;
+    var update_in_progress: boolean = false;
 
     // ============================================================================
     // Seleted card
@@ -35,12 +36,16 @@ module RpgCardsUI {
         var size = deck.cards.length;
         if (size === 0) {
             $("#selected-card").val("");
+            update_selected_card();
         } else {
+
             index = Math.min(size - 1, index);
             index = Math.max(0, index);
-            $("#selected-card").val("" + index);
+            if (index != selected_card_index()) {
+                $("#selected-card").val("" + index);
+                update_selected_card();
+            }
         }
-        update_selected_card();
     }
 
     function select_first_card() {
@@ -69,6 +74,10 @@ module RpgCardsUI {
     // ============================================================================
 
     function render_selected_card() {
+        if (update_in_progress) {
+            return;
+        }
+
         var card = selected_card();
         $('#preview-container').empty();
         if (card) {
@@ -79,6 +88,7 @@ module RpgCardsUI {
     }
 
     function update_selected_card() {
+        update_in_progress = true;
         var card = selected_card();
         if (card) {
             $("#card-title").val(card.title);
@@ -103,6 +113,7 @@ module RpgCardsUI {
             $("#card-tags").val("");
             $("#card-color").val("").change();
         }
+        update_in_progress = false;
 
         render_selected_card();
     }
@@ -232,7 +243,6 @@ module RpgCardsUI {
     }
 
     function on_change_card_contents() {
-        // var value = $(this).val();
         var value = editor.getValue();
 
         var card = selected_card();

resources/custom-icons/mixed-swords.svg

@@ -1,4 +1,2 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <path d="M0 0h512v512H0z"/>
-  <path d="M 15.517578 11.044922 C 25.0396 48.151325 39.984656 85.580645 57.109375 123.20703 C 74.605375 91.610028 98.321874 70.250328 128.67188 52.736328 C 90.863478 35.9246 53.13698 21.619872 15.517578 11.044922 z M 485.39062 14.4375 C 396.62562 63.9105 321.51587 122.75005 249.42188 188.12305 C 249.19787 188.32605 248.99158 188.54505 248.76758 188.74805 C 244.05947 193.02108 239.36424 197.32791 234.67773 201.65625 L 258.39844 224.97656 L 343.04492 140.34375 L 356.26562 153.5293 L 271.7207 238.07617 L 296.66602 262.60156 C 369.46936 186.63677 435.62047 108.30513 485.39062 14.4375 z M 104.66016 92.357422 C 101.08416 95.564422 97.680547 98.926606 94.435547 102.47461 L 460.67773 468.71875 L 471.21875 458.45898 L 104.66016 92.359375 L 104.66016 92.357422 z M 201.94336 232.4375 C 174.28427 258.86591 146.71758 286.17705 118.64258 314.21875 C 103.58558 295.64075 90.286875 275.478 79.171875 253.625 L 50.642578 282.1543 L 119.57812 351.09375 C 93.288124 394.76375 56.016875 427.47575 13.546875 454.96875 L 41.611328 483.0293 C 69.419328 440.8653 103.36808 404.85475 145.70508 377.21875 L 214.42188 445.93555 L 242.95508 417.40625 C 221.99108 405.29425 201.87358 391.90675 183.01758 377.09375 C 205.38258 354.76675 227.59488 332.77375 249.42188 310.84375 L 249.48438 310.90625 L 253.11133 307.15625 C 257.21027 303.03001 261.27866 298.90444 265.34766 294.77734 L 239.9707 269.82617 L 155.89062 353.90625 C 151.32563 349.66725 146.84633 345.31605 142.48633 340.87305 L 226.64648 256.72461 L 201.94336 232.4375 z M 417.36523 326.64844 L 417.36328 326.65039 L 365.69141 326.65039 L 433.80273 394.67578 L 485.39062 394.67578 L 417.36523 326.64844 z M 329.01367 363.48438 L 329.01367 415.00391 L 397.03906 483.02734 L 397.04297 431.50781 L 329.01367 363.48438 z " fill="#fff"></path>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 0h512v512H0z"/><path d="M 15.517578 11.044922 C 25.0396 48.151325 39.984656 85.580645 57.109375 123.20703 C 74.605375 91.610028 98.321874 70.250328 128.67188 52.736328 C 90.863478 35.9246 53.13698 21.619872 15.517578 11.044922 z M 485.39062 14.4375 C 396.62562 63.9105 321.51587 122.75005 249.42188 188.12305 C 249.19787 188.32605 248.99158 188.54505 248.76758 188.74805 C 244.05947 193.02108 239.36424 197.32791 234.67773 201.65625 L 258.39844 224.97656 L 343.04492 140.34375 L 356.26562 153.5293 L 271.7207 238.07617 L 296.66602 262.60156 C 369.46936 186.63677 435.62047 108.30513 485.39062 14.4375 z M 104.66016 92.357422 C 101.08416 95.564422 97.680547 98.926606 94.435547 102.47461 L 460.67773 468.71875 L 471.21875 458.45898 L 104.66016 92.359375 L 104.66016 92.357422 z M 201.94336 232.4375 C 174.28427 258.86591 146.71758 286.17705 118.64258 314.21875 C 103.58558 295.64075 90.286875 275.478 79.171875 253.625 L 50.642578 282.1543 L 119.57812 351.09375 C 93.288124 394.76375 56.016875 427.47575 13.546875 454.96875 L 41.611328 483.0293 C 69.419328 440.8653 103.36808 404.85475 145.70508 377.21875 L 214.42188 445.93555 L 242.95508 417.40625 C 221.99108 405.29425 201.87358 391.90675 183.01758 377.09375 C 205.38258 354.76675 227.59488 332.77375 249.42188 310.84375 L 249.48438 310.90625 L 253.11133 307.15625 C 257.21027 303.03001 261.27866 298.90444 265.34766 294.77734 L 239.9707 269.82617 L 155.89062 353.90625 C 151.32563 349.66725 146.84633 345.31605 142.48633 340.87305 L 226.64648 256.72461 L 201.94336 232.4375 z M 417.36523 326.64844 L 417.36328 326.65039 L 365.69141 326.65039 L 433.80273 394.67578 L 485.39062 394.67578 L 417.36523 326.64844 z M 329.01367 363.48438 L 329.01367 415.00391 L 397.03906 483.02734 L 397.04297 431.50781 L 329.01367 363.48438 z " fill="#fff"></path>
 </svg>