Merge pull request #8105 from NBKelly/graphics-for-picking-card-backs

display graphics when selecting card backs

Author: NBKelly

src/cljc/jinteki/card_backs.cljc

@@ -19,7 +19,12 @@
         card-backs))
 
 (defn card-backs-for-side [side unlocked]
-  (into {} (filter (fn [[k v]]
+  ;; TODO for later - explicitly make the nsg and ffg backs pop up at the top of the list,
+  ;; regardless of the sorting used
+  (into (sorted-map-by (fn [k1 k2]
+                         (compare [(get-in card-backs [k1 :name]) k1]
+                                  [(get-in card-backs [k2 :name]) k2])))
+        (filter (fn [[k v]]
                      (and
                        ;; it either has no specified side, or matches the input side
                        (or (not (:side v)) (= side (:side v)))

src/cljs/nr/account.cljs

@@ -521,22 +521,41 @@
 
           [:section
            [:h3 (tr [:settings_corp-card-sleeve "Corp card backs"])]
-           [:select {:value (:corp-card-sleeve @s "nsg")
-                     :on-change #(swap! s assoc :corp-card-sleeve (.. % -target -value))}
+           [:select {:value (:corp-card-sleeve @s "nsg-card-back")
+                     :on-change #(swap! s assoc :corp-card-sleeve (or (.. % -target -value) "nsg-card-back"))}
             (doall
               (for [[k v] (card-backs/card-backs-for-side :corp (-> @s :prizes :card-backs))]
                 [:option {:value k :key k}
                  (tr [(keyword (str "card-backs_" k)) (:name v)])]))]
 
-          ;; [:section
+
            [:h3 (tr [:settings_runner-card-sleeve "Runner card backs"])]
-           [:select {:value (:runner-card-sleeve @s "nsg")
-                     :on-change #(swap! s assoc :runner-card-sleeve (.. % -target -value))}
+           [:select {:value (:runner-card-sleeve @s "nsg-card-back")
+                     :on-change #(swap! s assoc :runner-card-sleeve (or (.. % -target -value) "nsg-card-back"))}
             (doall
               (for [[k v] (card-backs/card-backs-for-side :runner (-> @s :prizes :card-backs))]
                 [:option {:value k :key k}
                  (tr [(keyword (str "card-backs_" k)) (:name v)])]))]
-           [:div "You can earn more card backs by placing well in select online tournaments. If you're an artist with art that you think would make for a good card back, please feel free to contact us"]]
+           [:div "You can earn more card backs by placing well in select online tournaments. If you're an artist with art that you think would make for a good card back, please feel free to contact us"]
+
+           [:div {:style {:display "flex" :justifyContent "center"}}
+            [:div
+             {:style {:display "flex" :flexDirection "column" :alighItems "center" :margin "1rem"}}
+             [:img {:src (str "/img/card-backs/corp/"
+                              (get-in (card-backs/card-backs-for-side :corp (-> @s :prizes :card-backs)) [(keyword (:corp-card-sleeve @s "nsg-card-back")) :file])
+                              ".png")
+                    :style {:maxWidth "200px"}
+                    :alt "Corp card back"}]
+             [:div {:style {:marginTop "0.5rem" :textAlign "center"}} "Corp card back"]]
+
+            [:div
+             {:style {:display "flex" :flexDirection "column" :alighItems "center" :margin "1rem"}}
+             [:img {:src (str "/img/card-backs/runner/"
+                              (get-in (card-backs/card-backs-for-side :runner (-> @s :prizes :card-backs)) [(keyword (:runner-card-sleeve @s "nsg-card-back")) :file])
+                              ".png")
+                    :style {:maxWidth "200px"}
+                    :alt "Runner card back"}]
+             [:div {:style {:marginTop "0.5rem" :textAlign "center"}} "Runner card back"]]]]
 
           [:section
            [:h3  (tr [:settings_card-preview-zoom "Card preview zoom"])]

src/cljs/nr/gameboard/board.cljs

@@ -344,13 +344,14 @@
         side-key (keyword (lower-case side))
         display-options (or (get-in @app-state [:options :card-back-display]) "them")
         card-back (if (= side-key my-side)
-                    (or (get-in @game-state [my-side :user :options (if (= side-key :corp) :corp-card-sleeve :runner-card-sleeve)]) "nsg-card-back")
+                    (get-in @game-state [my-side :user :options (if (= side-key :corp) :corp-card-sleeve :runner-card-sleeve)] "nsg-card-back")
                     (case display-options
-                      "them" (or (get-in @game-state [side-key :user :options (if (= side-key :corp) :corp-card-sleeve :runner-card-sleeve)]) "nsg-card-back")
-                      "me" (or (get-in @game-state [my-side :user :options (if (= side-key :corp) :corp-card-sleeve :runner-card-sleeve)]) "nsg-card-back")
+                      "them" (get-in @game-state [side-key :user :options (if (= side-key :corp) :corp-card-sleeve :runner-card-sleeve)] "nsg-card-back")
+                      "me"   (get-in @game-state [my-side :user :options (if (= side-key :corp) :corp-card-sleeve :runner-card-sleeve)] "nsg-card-back")
                       "ffg" "ffg-card-back"
                       "nsg" "nsg-card-back"
                       "nsg-card-back"))
+        card-back (if (= card-back "") "nsg-card-back" card-back)
         maybe-image? (get-in card-backs/card-backs [(keyword card-back) :file])
         s (lower-case side)]
     (str "/img/card-backs/" s "/" maybe-image?  ".png")))