Add badges to the card list

www/src/App.elm

@@ -264,7 +264,10 @@ update msg model =
                     update Search { model | criteria = newCriteria }
 
         Search ->
-            ( { model | cardPage = toLoading model.cardPage }
+            ( { model
+                | cardPage = toLoading model.cardPage
+                , activeCard = Nothing
+              }
             , Cmd.batch
                 [ Browser.Navigation.pushUrl model.navigationKey <|
                     Url.Builder.relative [] (searchQuery model.criteria)
@@ -309,6 +312,18 @@ colors =
 
         white =
             E.rgb255 255 255 255
+
+        mythic =
+            E.rgb255 205 55 0
+
+        rare =
+            E.rgb255 218 165 32
+
+        uncommon =
+            E.rgb255 112 128 144
+
+        common =
+            E.rgb255 47 79 79
     in
     { primary = blue
     , background = lightGrey
@@ -317,6 +332,10 @@ colors =
     , selected = darkGrey
     , hover = grey
     , text = white
+    , mythic = mythic
+    , rare = rare
+    , uncommon = uncommon
+    , common = common
     }
 
 
@@ -394,11 +413,41 @@ viewCardBrowser model =
                     , description = cardModel.name
                     }
 
+        badge color text =
+            E.el
+                [ Border.rounded 5
+                , Border.color colors.text
+                , Background.color color
+                , E.width <| E.px 60
+                , E.padding 2
+                , Font.family [ Font.typeface "sans" ]
+                , Font.size 10
+                ]
+            <|
+                E.text text
+
+        setBadge : Card.Card -> E.Element Msg
+        setBadge card =
+            let
+                color =
+                    case card.rarity of
+                        "mythic" ->
+                            colors.mythic
+
+                        "rare" ->
+                            colors.rare
+
+                        "uncommon" ->
+                            colors.uncommon
+
+                        _ ->
+                            colors.common
+            in
+            badge color card.setCode
+
         priceBadge { currency, amount } =
             E.el
-                [ Border.solid
+                [ Border.rounded 5
-                , Border.width 1
-                , Border.rounded 5
                 , Border.color colors.text
                 , E.width <| E.px 60
                 , E.padding 2
@@ -414,17 +463,16 @@ viewCardBrowser model =
         cardInfoWidth =
             E.px 300
 
+        prices card =
+            Maybe.Extra.values
+                [ Maybe.map (\usd -> { currency = "usd", amount = usd }) <|
+                    Maybe.Extra.or card.prices.usd card.prices.usd_foil
+                , Maybe.map (\eur -> { currency = "eur", amount = eur }) <|
+                    Maybe.Extra.or card.prices.eur card.prices.eur_foil
+                , Maybe.map (\tix -> { currency = "tix", amount = tix }) card.prices.tix
+                ]
+
         cardDetails card =
-            let
-                prices =
-                    Maybe.Extra.values
-                        [ Maybe.map (\usd -> { currency = "usd", amount = usd }) <|
-                            Maybe.Extra.or card.prices.usd card.prices.usd_foil
-                        , Maybe.map (\eur -> { currency = "eur", amount = eur }) <|
-                            Maybe.Extra.or card.prices.eur card.prices.eur_foil
-                        , Maybe.map (\tix -> { currency = "tix", amount = tix }) card.prices.tix
-                        ]
-            in
             E.column
                 [ E.spacing 20
                 , E.padding 10
@@ -432,7 +480,7 @@ viewCardBrowser model =
             <|
                 E.el [ E.centerX ]
                     (viewCard { width = 192, height = 272 } card)
-                    :: (E.row [ E.spacing 5, E.centerX ] <| List.map priceBadge prices)
+                    :: (E.row [ E.spacing 5, E.centerX ] <| List.map priceBadge (prices card))
                     :: E.paragraph [ Font.heavy, Font.size 24, Font.center ] [ E.text card.name ]
                     :: List.map (\text -> E.paragraph [ Font.size 16 ] [ E.text text ])
                         (String.lines card.oracleText)
@@ -471,6 +519,9 @@ viewCardBrowser model =
                         , description = cardModel.name
                         }
                 , E.el [ E.centerY ] <| E.text cardModel.name
+                , E.column [ E.alignRight, E.height E.fill ] <|
+                    setBadge cardModel
+                        :: List.map priceBadge (prices cardModel)
                 ]
 
         details =