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
sindreslungaard · Aug 11, 2022 · e117c11 · e117c11
1 parent cdf038b
commit e117c11
Showing 1 changed file with 17 additions and 2 deletions.
diff --git 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"
       };