Highlight decklist cards

src/Card.elm

@@ -59,6 +59,7 @@ type alias CardDetails =
     , toughness : Maybe Power
     , colors : List ManaColor
     , manaCost : Maybe (List ManaCost)
+    , imageUrl : String
     }
 
 

src/Database.elm

@@ -160,6 +160,7 @@ decodeCardDetails =
                                     Decode.succeed Nothing
                         )
                 )
+            |> required "image_uris" (Decode.field "large" Decode.string)
         )
 
 

src/Main.elm

@@ -53,7 +53,7 @@ type alias ToolboxAccordion =
 type alias ReadyModel =
     { draft : Draft
     , database : Database.Database
-    , highlighted : Maybe Draft.PickCard
+    , highlighted : Maybe CardData
     , flipHighlighted : Bool
     , focusStat : FocusStat
     , deckProgress : DeckProgress
@@ -102,7 +102,7 @@ init flags =
 type Msg
     = Increment
     | Decrement
-    | Highlight Draft.PickCard
+    | Highlight String
     | FlipHighlightedCard
     | SetFocusStat FocusStat
     | SetDeckProgress DeckProgress
@@ -127,7 +127,7 @@ update msg model =
                 Highlight card ->
                     ( Ready
                         { mdl
-                            | highlighted = Just card
+                            | highlighted = Database.get card mdl.database
                             , flipHighlighted = False
                         }
                     , Cmd.none
@@ -287,7 +287,10 @@ viewDeckList model =
 
         viewCard : CardData -> Html Msg
         viewCard card =
-            li [ class "flex items-center gap-2 text-white justify-between" ]
+            li
+                [ class "flex items-center gap-2 text-white justify-between hover:bg-slate-700"
+                , Events.onMouseEnter (Highlight card.details.name)
+                ]
                 [ span [ class "truncate" ] [ text card.details.name ], viewManaCost card ]
 
         viewSortButton : Deck.DeckSortMethod -> Html Msg
@@ -523,22 +526,23 @@ viewHighlightedCard model =
             Just highlighted ->
                 let
                     url =
-                        case ( model.flipHighlighted, highlighted.backImage ) of
-                            ( True, Just backUrl ) ->
-                                backUrl
+                        case model.flipHighlighted of
+                            True ->
+                                -- TODO
+                                highlighted.details.imageUrl
 
                             _ ->
-                                highlighted.frontImage
+                                highlighted.details.imageUrl
                 in
                 div
                     []
                     [ img
                         [ src url
-                        , alt highlighted.name
+                        , alt highlighted.details.name
                         , onClick FlipHighlightedCard
                         ]
                         []
-                    , viewCardDetailedPerformance model.database highlighted
+                    , viewCardDetailedPerformance highlighted
                     ]
 
             Nothing ->
@@ -551,8 +555,8 @@ formatPercentage value =
     Round.round 2 (value * 100) ++ "%"
 
 
-viewCardDetailedPerformance : Database.Database -> Draft.PickCard -> Html Msg
-viewCardDetailedPerformance db { name } =
+viewCardDetailedPerformance : CardData -> Html Msg
+viewCardDetailedPerformance card =
     let
         makeCardFacts : CardData -> List ( String, String )
         makeCardFacts cardData =
@@ -580,14 +584,9 @@ viewCardDetailedPerformance db { name } =
                 , div [] [ text value ]
                 ]
     in
-    case Database.get name db of
-        Just cardData ->
-            div
-                [ class "" ]
-                (List.map viewFact (makeCardFacts cardData))
-
-        Nothing ->
-            div [] [ text "Could not find card in database" ]
+    div
+        [ class "" ]
+        (List.map viewFact (makeCardFacts card))
 
 
 viewKeyedCard : ReadyModel -> Bool -> Draft.PickCard -> ( String, Html Msg )
@@ -616,10 +615,11 @@ viewKeyedCard model wasChosen { name, frontImage, backImage } =
     ( name
     , div
         [ classList
-            [ ( "relative", True )
-            , ( "border-4 border-green-500", wasChosen )
+            [ ( "relative border-4 hover:border-4 hover:border-yellow-500", True )
+            , ( "border-transparent", not wasChosen )
+            , ( "border-green-500", wasChosen )
             ]
-        , Events.onMouseEnter (Highlight { name = name, frontImage = frontImage, backImage = backImage })
+        , Events.onMouseEnter (Highlight name)
         ]
         [ img [ src frontImage, alt name ] []
         , span [ class "absolute top-0 left-0 bg-green-100" ] [ text <| Maybe.withDefault "?" focusStat ]