Count card type tags when the deck list changes

When the deck list changes, update the count of card type tags
for all elements in the document with class "power-type-count".
The "tag" attribute is used to specify which tag to count.

Added the power type panel with various tag type counts.

dist.sh

@@ -25,7 +25,14 @@ DISTFILES="\
     power-calculator.png \
     influence-graph-menu.png \
     power-odds-table-menu.png \
-    EternalThroneBackground.jpeg"
+    EternalThroneBackground.jpeg \
+    conditional.svg \
+    crest.svg \
+    depleted.svg \
+    monument.svg \
+    standard.svg \
+    undepleted.svg \
+    waystone.svg"
 
 ./generate.sh
 

epc-deck.js

@@ -465,7 +465,7 @@ function makeEternalCardInfo(
         id: id,  //  "SetN #XXX"
         name: name,
         influenceRequirements: [],  // both casting cost and card effects
-        power: false
+        flags: {}
     };
 
     card.influenceGenerated = makeInfluence(influenceGenerated);
@@ -492,9 +492,7 @@ function makeEternalCardInfo(
     });
 
     $.each(flags, function (index, flag) {
-        if (flag === "power") {
-            card.power = true;
-        }
+        card.flags[flag] = true;
     });
 
     return card;
@@ -569,7 +567,9 @@ function makeEternalCardLibrary(
         influenceGenerated = match[2].trim();
         influenceRequired = match[3].trim();
         name = match[4].trim();
-        flags = match[5].trim().split(",");
+        flags = match[5].split(",").map(function (str) {
+            return str.trim();
+        });
 
         card = makeEternalCardInfo(
             id,

epc-ui.js

@@ -52,7 +52,7 @@ function buildEpcUI(
     ) {
         var influence;
 
-        if (card.power) {
+        if (card.flags.power) {
             return "card-name";
         }
 
@@ -161,7 +161,7 @@ function buildEpcUI(
             card = cardLibrary.cards[cardid];
 
             row = $("<div>").addClass("card-count-edit");
-            if (card && card.power) {
+            if (card && card.flags.power) {
                 row.appendTo(powerRows);
             } else {
                 row.appendTo(nonpowerRows);
@@ -257,6 +257,28 @@ function buildEpcUI(
         setInfluenceCount($("#shadow-sources-number"), shadow);
     }
 
+    /*
+        Fill in card type counts for each element of class
+        "power-type-count" in the document.
+    */
+    function generatePowerTypeCounts(
+        deck
+    ) {
+        $(".power-type-count").each(function (index, div) {
+            var flag, count;
+
+            count = 0;
+            flag = $(div).attr("tag");
+            $.each(deck.cards, function (cardIndex, card) {
+                if (card.flags[flag]) {
+                    count += 1;
+                }
+            });
+
+            $(div).text(String(count));
+        });
+    }
+
     /*
         When the deck changes, store the new deck in local storage
         and regenerate the user interface components which depend
@@ -288,6 +310,7 @@ function buildEpcUI(
         graphPopupTracker.setGraphDots(dots);
 
         generateInfluencePanel(deck);
+        generatePowerTypeCounts(deck);
         buildDeckRows(deck);
     }
 

epc.css

@@ -198,7 +198,7 @@ body {
     background-color: #533D4F;
     border-right: 1px solid;
     width: 306px;
-    min-height: 822px
+    min-height: 1050px
 }
 
 #charts-panel {
@@ -603,6 +603,54 @@ body {
 }
 
 
+/*
+    Power type panel
+*/
+
+#power-type-panel {
+    margin-left: 72px;
+    margin-top: 94px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    width: 833px;
+    border-radius: 10px;
+    background-color: #27252D;
+    border: solid 1px #FFFFFF;
+}
+
+.power-type-item {
+    float: left;
+    margin-left: 42px;
+    margin-right: 42px;
+    width: 193px;
+    height: 66px;
+
+    text-align: center;
+    font-size: 18px;
+}
+
+.power-type-item img {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.power-type-label {
+    margin: 22px 8px 22px 10px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.power-type-count {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 24px;
+}
+
+#power-type-panel-footer {
+    clear: both;
+}
+
 
 /*
     Power Odds Table style