Mana values now use the mana icons with the faction's colors

alteredbuilder/config/__init__.py

@@ -1 +1 @@
-__version__ = "1.4.4"
+__version__ = "1.4.5"

alteredbuilder/decks/static/css/styles.css

@@ -41,4 +41,32 @@
     height: 200px;
     margin: auto;
     background-color: #fff;
+}
+
+.card-table tr span.hand-mana {
+    color: #5095c9;
+}
+
+.card-table tr[data-faction="AX"] span.reserve-mana {
+    color: #7e4b36;
+}
+
+.card-table tr[data-faction="BR"] span.reserve-mana {
+    color: #b24848;
+}
+
+.card-table tr[data-faction="LY"] span.reserve-mana {
+    color: #d12358;
+}
+
+.card-table tr[data-faction="MU"] span.reserve-mana {
+    color: #4c7245;
+}
+
+.card-table tr[data-faction="OR"] span.reserve-mana {
+    color: #00628b;
+}
+
+.card-table tr[data-faction="YZ"] span.reserve-mana {
+    color: #483b66;
 }

alteredbuilder/decks/templates/decks/deck_detail.html

@@ -15,6 +15,7 @@
     <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
     <script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
     <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+    <link rel="stylesheet" href="{% static 'css/altered-icons.css' %}">
 {% endblock %}
 
 {% block content %}

alteredbuilder/decks/templates/decks/snippets/card_table.html

@@ -13,10 +13,10 @@
     </thead>
     <tbody class="table-group-divider">
 {% for quantity, card in card_list %}
-        <tr class="{% get_row_color_from_rarity card.get_rarity_display %}" data-image-url="{{ card.image_url }}">
+        <tr class="{% get_row_color_from_rarity card.get_rarity_display %}" data-image-url="{{ card.image_url }}" data-faction="{{ card.faction }}">
             <td>{{ quantity }}</td>
             <td>{{ card.name }}</td>
-            <td>{% get_main_cost card %}/{% get_recall_cost card %}</td>
+            <td><span class="hand-mana altered-{% get_main_cost card %}"></span>/<span class="reserve-mana altered-{% get_recall_cost card %}"></span></td>
             <td>
                 <div class="dropdown">
                     <button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="--bs-btn-padding-y: .01rem;"></button>

alteredbuilder/statics/css/altered-icons.css

@@ -0,0 +1,81 @@
+@font-face {
+  font-family: 'altered';
+  src:  url('../fonts/altered.eot?4qyzft');
+  src:  url('../fonts/altered.eot?4qyzft#iefix') format('embedded-opentype'),
+    url('../fonts/altered.ttf?4qyzft') format('truetype'),
+    url('../fonts/altered.woff?4qyzft') format('woff'),
+    url('../fonts/altered.svg?4qyzft#altered') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="altered-"], [class*=" altered-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'altered' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.altered-1:before {
+  content: "\e900";
+}
+.altered-2:before {
+  content: "\e901";
+}
+.altered-3:before {
+  content: "\e902";
+}
+.altered-4:before {
+  content: "\e903";
+}
+.altered-5:before {
+  content: "\e904";
+}
+.altered-6:before {
+  content: "\e905";
+}
+.altered-7:before {
+  content: "\e906";
+}
+.altered-8:before {
+  content: "\e907";
+}
+.altered-9:before {
+  content: "\e908";
+}
+.altered-etb:before {
+  content: "\e909";
+}
+.altered-exhaust:before {
+  content: "\e90a";
+}
+.altered-forest:before {
+  content: "\e90b";
+}
+.altered-hand:before {
+  content: "\e90c";
+}
+.altered-mountain:before {
+  content: "\e90d";
+}
+.altered-reserve:before {
+  content: "\e90e";
+}
+.altered-support:before {
+  content: "\e90f";
+}
+.altered-water:before {
+  content: "\e910";
+}
+.altered-x:before {
+  content: "\e911";
+}

alteredbuilder/templates/collaborators.html

@@ -10,6 +10,7 @@ <h3 id="collaborators">Collaborators</h3>
 
     <h5>Special mentions</h5>
     <ul>
+        <li>Maverick: Besides multiple suggestions, he provided Altered's symbols as SVG so that they can be used as icons.</li>
         <li>Pioupiou: As the developer of <a href="https://exalts-table.com" target="_blank">Exalts Table</a>, which is used to playtest the decks.</li>
         <li>Pollux Troy: As the developer of <a href="https://altered-db.com/" target="_blank">Altered DB</a>, which links to this platform to store decks.</li>
     </ul>