Issue 7493: Add credit cost of cards alongside their names and influence in deck builder

.gitignore

@@ -16,6 +16,7 @@ pom.xml
 .nrepl-history
 .rebel_readline_history
 .idea
+*.iml
 .eastwood
 .cache
 

src/cljs/nr/deckbuilder.cljs

@@ -15,7 +15,7 @@
     [nr.utils :refer [alliance-dots banned-span cond-button
                       deck-points-card-span dots-html format->slug format-date-time
                       influence-dot influence-dots mdy-formatter non-game-toast num->percent
-                      restricted-span rotated-span set-scroll-top slug->format store-scroll-top]]
+                      restricted-span rotated-span set-scroll-top slug->format store-scroll-top render-message]]
     [nr.ws :as ws]
     [reagent-modals.modals :as reagent-modals]
     [reagent.core :as r]
@@ -387,6 +387,20 @@
             (set-deck-on-state s deck)
             (put! select-channel (:deck @s)))))))
 
+(defn card-cost-html
+  [s card]
+  (let  [show-credit-cost (:show-credit-cost @s)
+         show-mu-cost (:show-mu-cost @s)
+         is-edit (:edit @s)]
+    (when (or show-credit-cost show-mu-cost)
+      [:div.card-cost-wrapper
+       [:span.card-cost {:class (when is-edit "edit")}
+        (when show-mu-cost
+          (when-let [mu (:memoryunits card)] [:div.cost-item (render-message (str  mu "[mu] "))]))
+        (when show-credit-cost
+          (when-let [cost (:cost card)] [:div.cost-item (render-message (str cost "[credit]"))]))]
+       ])))
+
 (defn card-influence-html
   "Returns hiccup-ready vector with dots for influence as well as rotated / restricted / banned symbols"
   [format card qty in-faction allied?]
@@ -667,7 +681,7 @@
                                   (not valid) " invalid"))
                 :on-mouse-enter #(when (:setname card) (put! zoom-channel line))
                 :on-mouse-leave #(put! zoom-channel false)} title]
-        [card-influence-html format card modqty infaction allied]])
+        (card-influence-html format card modqty infaction allied)])
      card)])
 
 (defn line-qty-span
@@ -800,7 +814,8 @@
                                                 :card (:card line)})
                                 :type "button"} "+"]
                 [line-name-span deck line]]
-               [line-span deck line])]))]))])
+               [line-span deck line]
+               )(card-cost-html s (:card line))]))]))])
 
 (defn decklist-notes
   [deck]
@@ -850,6 +865,21 @@
    ;;    (tr [:deck-builder.create-game "Create Game"])])
    ])
 
+(defn view-toggles
+  [s deck]
+  [:div.decklist-view-options
+   [:h4 "View Options"]
+   (when (= (:side (:identity deck)) "Runner")
+     [:div
+      [:input {:type "checkbox" :checked (:show-mu-cost @s)
+               :on-change #(swap! s assoc :show-mu-cost (.. % -target -checked))}]
+      [:span "Show Memory Cost"]])
+   [:div
+    [:input {:type "checkbox" :checked (:show-credit-cost @s)
+             :on-change #(swap! s assoc :show-credit-cost (.. % -target -checked))}]
+    [:span "Show Credit Cost"]]
+   ])
+
 (defn selected-panel
   [s]
   [:div.decklist
@@ -863,6 +893,7 @@
           :else [view-buttons s deck])
         [:h3 (:name deck)]
         [decklist-header deck cards]
+        (view-toggles s deck)
         [decklist-contents s deck cards]
         (when-not (:edit @s)
           [decklist-notes deck])]))])
@@ -1050,7 +1081,9 @@
                    :deck nil
                    :side-filter all-sides-filter
                    :faction-filter all-factions-filter
-                   :format-filter all-formats-filter})
+                   :format-filter all-formats-filter
+                   :show-credit-cost false
+                   :show-mu-cost false})
         decks (r/cursor app-state [:decks])
         user (r/cursor app-state [:user])
         decks-loaded (r/cursor app-state [:decks-loaded])

src/css/deckbuilder.styl

@@ -99,6 +99,9 @@
             overflow: auto
             -webkit-overflow-scrolling: touch
 
+            .decklist-view-options
+                margin-top: 1rem;
+
             .button-bar
                 padding-bottom: 8px
 
@@ -121,11 +124,42 @@
                 margin-top: 10px
                 columns(2, 5px)
 
+            .line:hover
+                background: rgba(19 26 35 .46)
+
             .line
                 position: relative
                 overflow: visible
                 line-height: 20px
                 white-space:pre
+                columns(2, 1rem)
+
+                .card-cost-wrapper
+                    display: flex;
+                    position:relative;
+                    overflow: visible;
+                    width: auto;
+                    justify-content flex-end;
+
+                    .card-cost
+                        line-height: .75rem;
+                        margin-top: .25rem;
+                        margin-right: 2rem;
+                        display: inline-flex;
+                        position: absolute;
+                        justify-content: left;
+
+                    .edit
+                        line-height: .75rem;
+                        margin-top: .35rem;
+                        margin-right: .5rem;
+                    .cost-item
+                        display: inline-flex;
+                        margin-inline: .1rem;
+
+                        .credit
+                            margin-left: .1rem
+
 
                 button.small
                     margin: 3px 6px 3px 0