New design on cards

This changes the layout drastically, pooling stats together in a single black bar on the card
This change also adds icons instead of text for certain stats.
There is also some cleanup.

resources/cards/card.css

@@ -31,27 +31,24 @@
 
 article {
     margin: 0.1mm 0.1mm;
-    display: block;
     float: left;
     width: 5.6cm;
     height: 8.9cm;
 
     display: grid;
-    grid-template-columns: 5fr 2fr;
+    grid-template-rows: 2em 18mm 2.5em auto;
-    grid-template-rows: 2em 18mm 1.3em auto 1.5em;
     grid-template-areas:
-        "header header"
+        "header"
-        "figure figure"
+        "figure"
-        "cost cost"
+        "bar"
-        "info info"
+        "info";
-        "power cp";
 
     border-radius: 2mm;
     grid-gap: 1.5mm 1.5mm;
     border-style: solid;
     border-width: 2mm;
-    border-color: #333;
+    border-color: #4a4a4a;
-    background-color: #333;
+    background-color: #4a4a4a;
     cursor: pointer;
 }
 article.effects {
@@ -59,9 +56,8 @@ article.effects {
     grid-template-areas:
         "header header"
         "figure effects"
-        "cost cost"
+        "bar bar"
-        "info info"
+        "info info";
-        "power cp";
 }
 
 article >* {
@@ -82,7 +78,9 @@ article h1 {
 
 article figure {
     grid-area: figure;
-    background: none;
+    background: #2f2f2f;
+    border-radius: 0;
+    margin: -1.5mm 1.5mm;
     overflow: hidden;
 }
 
@@ -90,8 +88,9 @@ article figure * {
     color: #999;
 }
 article figure img{
+    padding: 1mm 0;
     display: block;
-    height: 97%;
+    height: calc(100% - 2mm);
     margin: auto auto;
 }
 article figure img.svg_filter{
@@ -103,20 +102,75 @@ article figure img.svg_filter{
 article figure .mdi,
 article figure .fa,
 article figure .material-icons.figure {
-    font-size: 1.7cm;
+    padding: 1mm 0;
-    line-height: 1.7cm;
+    font-size: 19mm;
+    line-height: 19mm;
 }
 
 article ul {
     grid-area: effects;
     list-style-type: none;
     padding: 1mm 0;
+    margin-left: -1.5mm;
 }
 
+article section {
+    grid-area: bar;
+    background-color: #111;
+    border-radius: 0;
+    margin: 0 -2mm;
+    color: #eee;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+}
+article section .cost {
+    align-self: center; 
+    margin: 0 1.5mm;
+    line-height: 1.25em;
+}
+article section .costunit,
+article section .power,
+article section .cp,
+article section .gp {
+    flex: none;
+    padding-top: 1mm;
+    text-align: center;
+    font-size: 1.2em;
+    line-height: 0.8em;
+    margin: 0 1mm;
+}
+article section >* small {
+    font-size: 0.8em;
+    line-height: 0.8em;
+}
+
+article section .fa,
+article section .mdi,
+article section .material-icons.figure {
+    font-size: inherit;
+    line-height: inherit;
+}
+article section .costunit small {
+    font-size: 0.5em;
+}
+article section >*:after {
+    font-size: 0.5em;
+    line-height: 0.8em;
+    white-space: pre;
+}
+
+article section .power:after { content: "\APOWER";}
+article section .cp:after { content: "\A CP "; }
+article section .gp:after { content: "\AGold"; }
+
+
 article main {
     padding: 2mm 1mm;
     grid-area: info;
     position: relative;
+    font-size: 0.9em;
 }
 article main ol {
     margin-top: 1mm;
@@ -127,7 +181,7 @@ article main ol li + li{
     margin-top: 0.5mm;
 }
 article main big{
-    font-size: 1.5em;
+    font-size: 1.65em;
 }
 article main .bottom {
     width: 100%;
@@ -136,31 +190,6 @@ article main .bottom {
     left: 0;
 }
 
-article .power {
-    grid-area: power;
-    text-align: left;
-}
-article .power:before{
-    content: "Power: ";
-    font-size: 0.7em;
-}
-article .cost {
-    grid-area: cost;
-}
-article .cp,
-article .gp {
-    grid-area: cp;
-    text-align: right;
-}
-article .cp:after{
-    content: " CP";
-    font-size: 0.7em;
-}
-article .gp:after{
-    content: " Gold";
-    font-size: 0.6em;
-}
-
 center.message {
     font-size: 1.3em;
     position: absolute;

resources/cards/card.vm

@@ -33,26 +33,72 @@
         </big>
     #end
 #end
+#macro(statIcons $text)
+    #foreach($word in $text.split())
+        #if($word == "BODY")
+            <i class="mdi mdi-human"></i>
+        #elseif($word == "TEC")
+            <i class="fa fa-wrench"></i>
+        #elseif($word == "MAG")
+            <i class="fa fa-magic"></i>
+        #elseif($word == "ATT")
+            <small>ATT</small>
+        #else
+            $word
+        #end
+    #end
+#end
+#macro(handleCostUnit $cost $match)
+    <div class="costunit">
+        $escape_html($strip_unit($cost, $match))<br/>
+        <small>$escape_html($match)</small>
+    </div>
+#end
 
 <title>Cards</title>
 
 #foreach($card in $cards)
 <article #if($card.effects) class="effects"#end onclick="location.href='creator?filename=$escape_html($card.filename)'">
-    <h1>
+    <h1>$escape_html($card.title)</h1>
-        $escape_html($card.title)
-    </h1>
     <figure>
         #figure($card)
     </figure>
     #if($card.effects)
         <ul>
-            #foreach($item in $card.effects)
+            #foreach($effect in $card.effects)
-                #if($item)
+                #if($effect)
-                    <li>$escape_html($item)</li>
+                    <li>$escape_html($effect)</li>
                 #end
             #end
         </ul>
     #end
+    
+    <section>
+        #if($card.cp)
+            <div class="cp">$escape_html($card.cp)</div>
+        #elseif($card.gp)
+            <div class="gp">$escape_html($card.gp)</div>
+        #end
+        #foreach($cost in $card.cost.split(","))
+            #if($cost.upper().endswith(" ACT"))
+                #handleCostUnit($cost, "ACT")
+            #elseif($cost.upper().endswith(" OVERDRIVE"))
+                #handleCostUnit($cost, "OVERDRIVE")
+            #elseif($cost.upper().endswith(" COMBO"))
+                #handleCostUnit($cost, "COMBO")
+            #elseif($cost.upper().endswith(" DIFFICULTY"))
+                #handleCostUnit($cost, "DIFFICULTY")
+            #else
+                #if($cost.strip())
+                    <div class="cost">$escape_html($cost.split())</div>
+                #end
+            #end
+        #end
+        #if($card.power)
+            <div class="power">#statIcons($escape_html($card.power))</div>
+        #end
+    </section>
+    
     <main>
         $escape_html($card.description)
         #if($card.steps)
@@ -82,15 +128,7 @@
             </div>
         #end
     </main>
-    <div class="cost">$escape_html($card.cost)</div>
+    
-    #if($card.power)
-        <div class="power">$escape_html($card.power)</div>
-    #end
-    #if($card.cp)
-        <div class="cp">$escape_html($card.cp)</div>
-    #elseif($card.gp)
-        <div class="gp">$escape_html($card.gp)</div>
-    #end
 </article>
 #end