correlr/tutor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add badges to the card list

Browse source
This commit is contained in:
Correl Roush 2022-02-10 23:40:11 -05:00
parent 00616067c8
commit 45afe018c5
1 changed files with 66 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
www/src/App.elm
View file

@ -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.width 1
, Border.rounded 5
[ 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 =