Add card explorer

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "elm-format": "^0.8.7",
+    "elm-review": "^2.13.3",
     "elm-test": "^0.19.1-revision12"
   }
 }

src/Main.elm

@@ -37,6 +37,7 @@ main =
 type Model
     = ChooseSet ChooseSetModel
     | Ready ReadyModel
+    | CardExplorer CardExplorerModel
     | Error ErrorModel
 
 
@@ -83,6 +84,14 @@ type alias ReadyModel =
     }
 
 
+type alias CardExplorerModel =
+    { database : Database.Database
+    , highlighted : Maybe CardData
+    , flipHighlighted : Bool
+    , performanceDistributions : CardPerformanceDistributions
+    }
+
+
 type alias ErrorModel =
     { error : String
     }
@@ -128,6 +137,7 @@ type Msg
     | IOGotSetData (Result String ( String, Maybe Database.Database ))
     | PortReceiveDoesSetHaveLocalData String
     | StartDraft String Database.Database
+    | OpenCardExplorer String Database.Database
 
 
 startDraft : ChooseSetModel -> Database.Database -> ( Model, Cmd Msg )
@@ -157,6 +167,18 @@ startDraft initFlags database =
             ( Error { error = "Error decoding draft data: " ++ err }, Cmd.none )
 
 
+openCardExplorer : ChooseSetModel -> Database.Database -> ( Model, Cmd Msg )
+openCardExplorer initFlags database =
+    ( CardExplorer
+        { database = database
+        , performanceDistributions = calculatePerformanceDistributions (Database.getAll database)
+        , highlighted = Nothing
+        , flipHighlighted = False
+        }
+    , Cmd.none
+    )
+
+
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case model of
@@ -165,6 +187,9 @@ update msg model =
                 StartDraft setCode database ->
                     startDraft mdl database
 
+                OpenCardExplorer setCode database ->
+                    openCardExplorer mdl database
+
                 IOGotSets (Ok remoteData) ->
                     -- Merge any new sets into the local sets
                     let
@@ -309,6 +334,23 @@ update msg model =
                 StartDraft _ _ ->
                     ( Ready mdl, Cmd.none )
 
+                OpenCardExplorer _ _ ->
+                    ( Ready mdl, Cmd.none )
+
+        CardExplorer mdl ->
+            case msg of
+                Highlight card ->
+                    ( CardExplorer
+                        { mdl
+                            | highlighted = Database.get card mdl.database
+                            , flipHighlighted = False
+                        }
+                    , Cmd.none
+                    )
+
+                _ ->
+                    ( CardExplorer mdl, Cmd.none )
+
         Error mdl ->
             ( Error mdl, Cmd.none )
 
@@ -324,6 +366,9 @@ view model =
             Ready mdl ->
                 viewReady mdl
 
+            CardExplorer mdl ->
+                viewCardExplorer mdl
+
             Error mdl ->
                 viewError mdl
         ]
@@ -346,7 +391,10 @@ viewChooseSet model =
                     Button.make "Download" (IOFetchSetData setCode) |> Button.view
 
                 HasLocalData database ->
-                    Button.make "Open" (StartDraft setCode database) |> Button.view
+                    div []
+                        [ Button.make "Explore" (OpenCardExplorer setCode database) |> Button.view
+                        , Button.make "View draft" (StartDraft setCode database) |> Button.view
+                        ]
     in
     div [ class "w-full h-full bg-slate-100 flex justify-center items-center" ]
         [ div [ class "max-w-2xl max-h-2xl bg-slate-500 rounded-lg p-6 shadow-xl" ]
@@ -378,6 +426,14 @@ viewReady model =
         ]
 
 
+viewCardExplorer : CardExplorerModel -> Html Msg
+viewCardExplorer model =
+    div [ class "grid grid-cols-12 gap-6 h-full bg-slate-100" ]
+        [ viewAllCards model
+        , viewHighlightedCard model
+        ]
+
+
 viewSidebar : ReadyModel -> Html Msg
 viewSidebar model =
     div [ class "col-span-2 p-6 bg-slate-600" ]
@@ -697,7 +753,34 @@ viewDraft model =
         ]
 
 
-viewHighlightedCard : ReadyModel -> Html Msg
+viewAllCards : CardExplorerModel -> Html Msg
+viewAllCards model =
+    let
+        viewCard : CardData -> ( String, Html Msg )
+        viewCard card =
+            ( card.details.name
+            , div
+                [ classList
+                    [ ( "relative border-4 hover:border-4 hover:border-yellow-500", True )
+                    ]
+                , Events.onMouseEnter (Highlight card.details.name)
+                ]
+                [ img [ src card.details.imageUrl, alt card.details.name ] []
+                ]
+            )
+    in
+    div [ class "col-span-10 shadow-xl bg-slate-600 p-6 h-full overflow-y-scroll" ]
+        -- Making this a keyed node forces Elm to recreate each card when the card name changes,
+        -- so the old image doesn't hang around during loading of the new card image
+        [ div [ class "flex flex-col space-between col-span-8 " ]
+            [ Keyed.node "div"
+                [ class "flex-grow grid grid-cols-8 auto-rows-min gap-6 p-6" ]
+                (List.map viewCard (Database.getAll model.database))
+            ]
+        ]
+
+
+viewHighlightedCard : { a | highlighted : Maybe CardData, flipHighlighted : Bool, performanceDistributions : CardPerformanceDistributions } -> Html Msg
 viewHighlightedCard model =
     div [ class "col-span-2 shadow-xl bg-slate-600 p-6" ]
         [ case model.highlighted of