Add decklist

src/Card.elm

@@ -45,7 +45,8 @@ type alias CardData =
 
 
 type alias CardDetails =
-    { cmc : Int
+    { name : String
+    , cmc : Int
     , cardType : CardType
     , typeLine : String
     , oracleText : Maybe String

src/Database.elm

@@ -140,6 +140,7 @@ decodeCardDetails =
     Decode.map2 pair
         (Decode.field "name" Decode.string)
         (Decode.succeed CardDetails
+            |> required "name" Decode.string
             |> required "cmc" Decode.int
             |> required "type_line" decodeCardType
             |> required "type_line" Decode.string

src/Deck.elm

@@ -1,4 +1,4 @@
-module Deck exposing (Deck, cmcCurve, fromDraft)
+module Deck exposing (Deck, DeckSortMethod(..), cmcCurve, decklist, fromDraft)
 
 import Card exposing (CardData)
 import Database exposing (Database)
@@ -41,3 +41,25 @@ cmcCurve deck =
         |> List.map (\cmc -> ( cmc, List.count (\x -> x == cmc) cmcs ))
     )
         ++ [ ( maxBucket, List.count (\x -> x >= maxBucket) cmcs ) ]
+
+
+type DeckSortMethod
+    = SortByPickNumber
+    | SortByName
+    | SortByCMC
+
+
+decklist : DeckSortMethod -> Deck -> List CardData
+decklist sortBy deck =
+    case sortBy of
+        SortByPickNumber ->
+            -- Pick order is default sort order
+            deck.cards
+
+        SortByName ->
+            deck.cards
+                |> List.sortBy (.details >> .name)
+
+        SortByCMC ->
+            deck.cards
+                |> List.sortBy (.details >> .cmc)

src/Main.elm

@@ -7,9 +7,9 @@ import Chart.Attributes as CA
 import Database
 import Deck
 import Draft exposing (Draft)
-import Html exposing (Html, a, button, div, img, span, text)
+import Html exposing (Html, a, button, div, img, li, span, text, ul)
 import Html.Attributes exposing (alt, class, classList, disabled, src)
-import Html.Events as Events exposing (onClick)
+import Html.Events as Events exposing (onClick, onMouseEnter)
 import Html.Keyed as Keyed
 import Icon exposing (chevronDown, chevronUp)
 import List.Extra as List
@@ -46,8 +46,8 @@ type FocusStat
     | FocusIWD
 
 
-type alias ChartAccordion =
-    { cmc : Bool, signals : Bool, signalsDelta : Bool }
+type alias ToolboxAccordion =
+    { cmc : Bool, signals : Bool, signalsDelta : Bool, deckList : Bool }
 
 
 type alias ReadyModel =
@@ -57,7 +57,8 @@ type alias ReadyModel =
     , flipHighlighted : Bool
     , focusStat : FocusStat
     , deckProgress : DeckProgress
-    , chartAccordion : ChartAccordion
+    , toolboxAccordion : ToolboxAccordion
+    , deckSortOrder : Deck.DeckSortMethod
     }
 
 
@@ -77,11 +78,13 @@ init flags =
                 , flipHighlighted = False
                 , focusStat = FocusPickRate
                 , deckProgress = DeckUpToPick
-                , chartAccordion =
+                , toolboxAccordion =
                     { cmc = True
                     , signals = False
                     , signalsDelta = False
+                    , deckList = False
                     }
+                , deckSortOrder = Deck.SortByPickNumber
                 }
             , Cmd.none
             )
@@ -106,6 +109,7 @@ type Msg
     | ToggleCMCChart
     | ToggleSignalsChart
     | ToggleSignalsDeltaChart
+    | ToggleDeckList
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -140,23 +144,30 @@ update msg model =
                 ToggleCMCChart ->
                     let
                         chartAccordion =
-                            mdl.chartAccordion
+                            mdl.toolboxAccordion
                     in
-                    ( Ready { mdl | chartAccordion = { chartAccordion | cmc = not mdl.chartAccordion.cmc } }, Cmd.none )
+                    ( Ready { mdl | toolboxAccordion = { chartAccordion | cmc = not mdl.toolboxAccordion.cmc } }, Cmd.none )
 
                 ToggleSignalsChart ->
                     let
                         chartAccordion =
-                            mdl.chartAccordion
+                            mdl.toolboxAccordion
                     in
-                    ( Ready { mdl | chartAccordion = { chartAccordion | signals = not mdl.chartAccordion.signals } }, Cmd.none )
+                    ( Ready { mdl | toolboxAccordion = { chartAccordion | signals = not mdl.toolboxAccordion.signals } }, Cmd.none )
 
                 ToggleSignalsDeltaChart ->
                     let
                         chartAccordion =
-                            mdl.chartAccordion
+                            mdl.toolboxAccordion
                     in
-                    ( Ready { mdl | chartAccordion = { chartAccordion | signalsDelta = not mdl.chartAccordion.signalsDelta } }, Cmd.none )
+                    ( Ready { mdl | toolboxAccordion = { chartAccordion | signalsDelta = not mdl.toolboxAccordion.signalsDelta } }, Cmd.none )
+
+                ToggleDeckList ->
+                    let
+                        deckListAccordion =
+                            mdl.toolboxAccordion
+                    in
+                    ( Ready { mdl | toolboxAccordion = { deckListAccordion | deckList = not mdl.toolboxAccordion.deckList } }, Cmd.none )
 
         Error mdl ->
             ( Error mdl, Cmd.none )
@@ -241,14 +252,54 @@ viewDeck model =
                 [ text "Entire deck" ]
             ]
         , div [ class "overflow-y-auto" ]
-            [ viewChart .cmc ToggleCMCChart "CMC curve" (viewCmcChart model) model
+            [ viewDeckList model
+            , viewChart .cmc ToggleCMCChart "CMC curve" (viewCmcChart model) model
             , viewChart .signals ToggleSignalsChart "Signals (card count)" (viewSignalsChart model) model
             , viewChart .signalsDelta ToggleSignalsDeltaChart "Signals (delta)" (viewSignalsDeltaChart model) model
             ]
         ]
 
 
-viewChart : (ChartAccordion -> Bool) -> Msg -> String -> Html Msg -> ReadyModel -> Html Msg
+viewDeckList : ReadyModel -> Html Msg
+viewDeckList model =
+    let
+        deck =
+            Deck.fromDraft (model.deckProgress == EntireDeck) model.database model.draft
+                |> Deck.decklist model.deckSortOrder
+
+        decklist =
+            ul [] (List.map viewCard deck)
+
+        viewCard : CardData -> Html Msg
+        viewCard card =
+            li [ class "" ]
+                [ text card.details.name ]
+    in
+    div [ class "mb-2 w-full" ]
+        [ button
+            [ class "w-full flex justify-between items-center bg-slate-900 text-white p-2 rounded shadow"
+            , onClick ToggleDeckList
+            ]
+            [ span [] [ text "Decklist" ]
+            , span [ class "h-4 w-4" ]
+                [ if model.toolboxAccordion.deckList then
+                    chevronUp
+
+                  else
+                    chevronDown
+                ]
+            ]
+        , if model.toolboxAccordion.deckList then
+            div [ class "py-2" ]
+                [ decklist
+                ]
+
+          else
+            div [] []
+        ]
+
+
+viewChart : (ToolboxAccordion -> Bool) -> Msg -> String -> Html Msg -> ReadyModel -> Html Msg
 viewChart isOpenF toggle title chart model =
     div [ class "mb-2 w-full" ]
         [ button
@@ -257,14 +308,14 @@ viewChart isOpenF toggle title chart model =
             ]
             [ span [] [ text title ]
             , span [ class "h-4 w-4" ]
-                [ if isOpenF model.chartAccordion then
+                [ if isOpenF model.toolboxAccordion then
                     chevronUp
 
                   else
                     chevronDown
                 ]
             ]
-        , if isOpenF model.chartAccordion then
+        , if isOpenF model.toolboxAccordion then
             div [ class "py-2" ]
                 [ chart
                 ]