From e117c114d7ead8af7061ff7d9eaf7c12c6bfa266 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Jab=C5=82o=C5=84ski?= <googrle@gmail.com>
Date: Thu, 11 Aug 2022 16:25:54 +0200
Subject: [PATCH] Adding mana information in card list (#98)

* Adding mana information in card list

* Removing unneeded console log

* Added missing mana cost column header in deck view
---
 webapp/src/views/Decks.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/webapp/src/views/Decks.vue b/webapp/src/views/Decks.vue
index da27082d..dff8e0b4 100644
--- a/webapp/src/views/Decks.vue
+++ b/webapp/src/views/Decks.vue
@@ -99,6 +99,16 @@
                   <option value="darkness">Darkness</option>
                 </select>
               </th>
+              <th>
+                <div class="sort-btn" @click="toggleSort('manaCost')">
+                  Mana
+                  <img
+                    class="sort-ico"
+                    width="25px"
+                    :src="`/assets/images/${sortIcons.manaCost}.png`"
+                  />
+                </div>
+              </th>
               <th>
                 <div class="sort-btn" @click="toggleSort('family')">
                   Race
@@ -133,6 +143,7 @@
               <td>{{ card.name }}</td>
               <td class="set">{{ card.set }}</td>
               <td class="civilization">{{ card.civilization }}</td>
+              <td class="manaCost">{{ card.manaCost }}</td>
               <td class="family">{{ card.family || "Spell" }}</td>
             </tr>
           </table>
@@ -209,6 +220,7 @@
                 <th>Card Name</th>
                 <th>Set</th>
                 <th>Civilization</th>
+                <th>Mana</th>
                 <th>Race</th>
               </tr>
               <template v-if="selectedDeck">
@@ -232,6 +244,7 @@
                   <td>{{ card.name }}</td>
                   <td class="set">{{ card.set }}</td>
                   <td class="civilization">{{ card.civilization }}</td>
+                  <td class="manaCost">{{ card.manaCost }}</td>
                   <td class="civilization">{{ card.family }}</td>
                 </tr>
               </template>
@@ -536,8 +549,9 @@ export default {
 
       cards.sort(
         (c1, c2) =>
-          this.sort.directionNum *
-          c1[this.sort.by].localeCompare(c2[this.sort.by])
+          (c1[this.sort.by] === parseInt(c1[this.sort.by], 10) && c2[this.sort.by] === parseInt(c2[this.sort.by], 10)) ? 
+            this.sort.directionNum * (c1[this.sort.by] < c2[this.sort.by] ? -1 : c1[this.sort.by] > c2[this.sort.by] ? 1 : 0) : 
+            this.sort.directionNum * c1[this.sort.by].localeCompare(c2[this.sort.by])
       );
 
       return cards;
@@ -548,6 +562,7 @@ export default {
         name: "arrow_up_down",
         set: "arrow_up_down",
         civilization: "arrow_up_down",
+        manaCost: "arrow_up_down",
         family: "arrow_up_down"
       };