www/elm.json

@@ -17,6 +17,7 @@
             "elm/parser": "1.1.0",
             "elm/regex": "1.0.0",
             "elm/url": "1.0.0",
+            "elm-community/list-extra": "8.7.0",
             "elm-community/maybe-extra": "5.2.0",
             "mdgriffith/elm-ui": "1.1.8"
         },

www/src/Card.elm

@@ -16,8 +16,8 @@ type alias Prices =
 type alias Oracle =
     { oracleId : String
     , name : String
-    , manaCost : String
     , cmc : Float
+    , manaCost : String
     , typeLine : String
     , oracleText : String
     }
@@ -28,8 +28,8 @@ type alias Card =
     , name : String
     , setCode : String
     , rarity : String
-    , manaCost : String
     , cmc : Float
+    , manaCost : String
     , typeLine : String
     , oracleText : String
     , prices : Prices
@@ -48,11 +48,11 @@ decodeOracle =
     Json.Decode.succeed Oracle
         |> JDP.required "oracle_id" Json.Decode.string
         |> JDP.required "name" Json.Decode.string
+        |> JDP.required "cmc" Json.Decode.float
         |> JDP.required "mana_cost"
             (Json.Decode.nullable Json.Decode.string
                 |> Json.Decode.map (Maybe.withDefault "")
             )
-        |> JDP.required "cmc" Json.Decode.float
         |> JDP.required "type_line" Json.Decode.string
         |> JDP.required "oracle_text"
             (Json.Decode.nullable Json.Decode.string
@@ -67,11 +67,11 @@ decode =
         |> JDP.required "name" Json.Decode.string
         |> JDP.required "set_code" Json.Decode.string
         |> JDP.required "rarity" Json.Decode.string
+        |> JDP.required "cmc" Json.Decode.float
         |> JDP.required "mana_cost"
             (Json.Decode.nullable Json.Decode.string
                 |> Json.Decode.map (Maybe.withDefault "")
             )
-        |> JDP.required "cmc" Json.Decode.float
         |> JDP.required "type_line" Json.Decode.string
         |> JDP.required "oracle_text"
             (Json.Decode.nullable Json.Decode.string

www/src/Pages/DeckEditor.elm

@@ -9,6 +9,7 @@ import Element.Background as Background
 import Element.Events as Events
 import Element.Font as Font
 import Http
+import List.Extra
 import Paginated
 import Route
 import Spinner
@@ -76,10 +77,11 @@ groups cards =
         isEmpty : Group -> Bool
         isEmpty group =
             List.isEmpty group.cards
+
         gather : String -> String -> Group
         gather groupName typeName =
             List.filter (isA typeName) cards
-                |> List.sortBy (\dc ->(dc.card.cmc, dc.card.name))
+                |> List.sortBy (\x -> ( x.card.cmc, x.card.name ))
                 |> Group groupName
     in
     List.filter (\l -> not <| isEmpty l)
@@ -129,30 +131,65 @@ update msg model =
             ( { model | symbols = symbols }, Cmd.none )
 
 
-viewDeck : Symbol.Table -> Deck.Deck -> E.Element Msg
-viewDeck symbols deck =
+viewDeck : E.Device -> Symbol.Table -> Deck.Deck -> E.Element Msg
+viewDeck device symbols deck =
     let
+        columns : Int
+        columns =
+            if UI.isMobile device then
+                1
+
+            else
+                4
+
+        ensureColumns : Int -> List (List a) -> List (List a)
+        ensureColumns numCols xs =
+            let
+                current =
+                    List.length xs
+            in
+            if current < numCols then
+                List.append xs <| List.repeat (numCols - current) []
+
+            else
+                xs
+
+        splitIntoColumns : Int -> List a -> List (List a)
+        splitIntoColumns numCols xs =
+            let
+                cardsPerColumn =
+                    ceiling (toFloat (List.length xs) / toFloat numCols)
+            in
+            List.Extra.greedyGroupsOf cardsPerColumn xs
+                |> ensureColumns numCols
+
+        viewCard dc =
+            UI.cardRow
+                { foil = False
+                , subtitle = "x" ++ String.fromInt dc.quantity
+                }
+                [ Background.color UI.colors.background ]
+                symbols
+                dc.card
+
+        viewCardColumn cards =
+            E.column [ E.spacing 10, E.alignTop, E.width <| E.fillPortion 1 ] <|
+                List.map viewCard cards
+
         viewGroup group =
-            E.column [ E.spacing 10 ]
+            E.column
+                [ E.spacing 10, E.width E.fill ]
                 [ E.paragraph [ Font.heavy ] [ UI.title group.label ]
-                , E.wrappedRow [ E.spacing 10 ] <|
-                    List.map
-                        (\dc ->
-                            UI.cardRow
-                                { foil = False
-                                , subtitle = "x" ++ String.fromInt dc.quantity
-                                }
-                                [ E.width <| E.px 400, E.clipX, Background.color UI.colors.background ]
-                                symbols
-                                dc.card
-                        )
-                        group.cards
+                , E.row [ E.spacing 10, E.width E.fill ] <|
+                    List.map viewCardColumn <|
+                        splitIntoColumns columns group.cards
                 ]
     in
-    E.column [ E.height E.fill, E.centerX, E.spacing 5 ] <|
+    E.column [ E.height E.fill, E.width E.fill, E.spacing 5 ] <|
         [ E.paragraph [ Font.heavy, Font.size 24, Font.center ] [ UI.title deck.name ]
         , E.column
             [ E.height E.fill
+            , E.width E.fill
             , E.spacing 10
             , Background.color UI.colors.sidebar
             , E.scrollbarY
@@ -172,7 +209,7 @@ view model =
         ]
         [ case model.deck of
             Ready deck ->
-                viewDeck model.symbols deck
+                viewDeck model.device model.symbols deck
 
             Failed ->
                 E.none

www/src/UI.elm

@@ -188,7 +188,7 @@ priceBadge { currency, amount } =
     E.el
         [ Border.rounded 5
         , Border.color colors.text
-        , E.width <| E.px 60
+        , E.width E.fill
         , E.padding 2
         , Font.family [ Font.typeface "sans" ]
         , Font.size 10
@@ -208,7 +208,7 @@ cardRow options attributes symbols card =
                 [ Border.rounded 5
                 , Border.color color
                 , Border.width 1
-                , E.width <| E.px 60
+                , E.width E.fill
                 , Font.family [ Font.typeface "sans" ]
                 , Font.size 10
                 , Font.color colors.title
@@ -291,12 +291,12 @@ cardRow options attributes symbols card =
                         ]
                 , description = card.name
                 }
-        , E.column [ E.centerY, E.height E.fill, E.width E.fill, E.clipX ]
+        , E.column [ E.alignTop, E.width E.fill, E.clipX ]
             [ Symbol.text symbols 12 card.manaCost
             , E.el [ Font.color colors.title ] <| E.text card.name
             , E.el [ Font.size 16, Font.italic, Font.color colors.subtitle ] <| E.text options.subtitle
             ]
-        , E.column [ E.alignRight, E.height E.fill ] <|
+        , E.column [ E.width <| E.px 70, E.alignTop, E.alignRight ] <|
             setBadge options.foil
                 :: List.map priceBadge prices
         ]