Add card sorting

src/Main.elm

@@ -54,6 +54,12 @@ type FocusStat
     | FocusIWD
 
 
+type SortOrder
+    = SortOrderDefault
+    | SortOrderRarity
+    | SortOrderName
+
+
 type alias ToolboxAccordion =
     { cmc : Bool, signals : Bool, signalsDelta : Bool, deckList : Bool }
 
@@ -89,6 +95,7 @@ type alias CardExplorerModel =
     , highlighted : Maybe CardData
     , flipHighlighted : Bool
     , performanceDistributions : CardPerformanceDistributions
+    , sortOrder : SortOrder
     }
 
 
@@ -126,6 +133,7 @@ type Msg
     | Highlight String
     | FlipHighlightedCard
     | SetFocusStat FocusStat
+    | SetSortOrder SortOrder
     | SetDeckProgress DeckProgress
     | ToggleCMCChart
     | ToggleSignalsChart
@@ -174,6 +182,7 @@ openCardExplorer initFlags database =
         , performanceDistributions = calculatePerformanceDistributions (Database.getAll database)
         , highlighted = Nothing
         , flipHighlighted = False
+        , sortOrder = SortOrderDefault
         }
     , Cmd.none
     )
@@ -285,6 +294,9 @@ update msg model =
                 SetFocusStat stat ->
                     ( Ready { mdl | focusStat = stat }, Cmd.none )
 
+                SetSortOrder _ ->
+                    ( Ready mdl, Cmd.none )
+
                 SetDeckProgress progress ->
                     ( Ready { mdl | deckProgress = progress }, Cmd.none )
 
@@ -348,6 +360,9 @@ update msg model =
                     , Cmd.none
                     )
 
+                SetSortOrder sortOrder ->
+                    ( CardExplorer { mdl | sortOrder = sortOrder }, Cmd.none )
+
                 _ ->
                     ( CardExplorer mdl, Cmd.none )
 
@@ -753,9 +768,28 @@ viewDraft model =
         ]
 
 
+getCardSortFn : SortOrder -> (CardData -> String)
+getCardSortFn sortOrder =
+    case sortOrder of
+        SortOrderDefault ->
+            \c -> c.details.name
+
+        SortOrderRarity ->
+            \c -> c.details.name
+
+        -- todo
+        SortOrderName ->
+            \c -> c.details.name
+
+
 viewAllCards : CardExplorerModel -> Html Msg
 viewAllCards model =
     let
+        allCards : List CardData
+        allCards =
+            Database.getAll model.database
+                |> List.sortBy (getCardSortFn model.sortOrder)
+
         viewCard : CardData -> ( String, Html Msg )
         viewCard card =
             ( card.details.name
@@ -768,11 +802,28 @@ viewAllCards model =
                 [ img [ src card.details.imageUrl, alt card.details.name ] []
                 ]
             )
+
+        viewSortOrderButton name sortOrder =
+            button
+                [ onClick (SetSortOrder sortOrder)
+                , classList
+                    [ ( "rounded text-white font-medium p-2 shadow mr-2 mb-2", True )
+                    , ( "bg-slate-300 text-slate-900 shadow-inset", model.sortOrder == sortOrder )
+                    , ( "bg-slate-900", model.sortOrder /= sortOrder )
+                    ]
+                ]
+                [ text 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 " ]
+        [ div []
+            [ viewSortOrderButton "Sort: default" SortOrderDefault
+            , viewSortOrderButton "Sort: rarity" SortOrderRarity
+            , viewSortOrderButton "Sort: name" SortOrderName
+            ]
+        , -- 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))