91 lines
3.0 KiB
Elm
91 lines
3.0 KiB
Elm
module Screen.Leaderboard exposing (..)
|
|
|
|
{-| Widget module for a leaderboard page.
|
|
-}
|
|
|
|
import Api.Elo exposing (EloStat, Leaderboard)
|
|
import Element exposing (Element)
|
|
import Element.Font
|
|
import Layout
|
|
import Pixels exposing (Pixels)
|
|
import Program exposing (ViewBox)
|
|
import Quantity exposing (Quantity)
|
|
import Theme
|
|
import Element.Background
|
|
import Element.Border
|
|
import Color
|
|
|
|
|
|
view : ViewBox Leaderboard -> Element msg
|
|
view data =
|
|
let
|
|
boardWidth =
|
|
data.size.width
|
|
|> Quantity.toFloatQuantity
|
|
|> Quantity.multiplyBy (2/3)
|
|
|> Quantity.floor
|
|
|> Quantity.clamp (Pixels.pixels 600) (Pixels.pixels 1800)
|
|
|> Pixels.inPixels
|
|
|> Element.px
|
|
|> Element.width
|
|
in
|
|
data.model.players
|
|
|> List.map (viewEloStat { flavor = data.flavor })
|
|
|> Element.column [ Element.centerX, boardWidth ]
|
|
|> List.singleton
|
|
|> (::) (
|
|
Element.text data.model.name
|
|
|> Element.el
|
|
[ Element.centerX, Element.Font.size 50 ]
|
|
)
|
|
|> Element.column
|
|
[ Element.padding 15
|
|
, Element.spacing 30
|
|
, Element.width <| Element.px <| Pixels.inPixels data.size.width
|
|
]
|
|
|
|
|
|
viewEloStat : { flavor : Theme.Flavor } -> EloStat -> Element msg
|
|
viewEloStat data stat =
|
|
Element.row
|
|
[ Element.Background.color (Theme.mantleUI data.flavor)
|
|
, Element.Border.rounded 5
|
|
, Element.padding 10
|
|
, Element.spacing 5
|
|
, Element.width Element.fill
|
|
]
|
|
[ Element.column
|
|
[ Element.centerY, Element.spacing 5, Element.width Element.fill ]
|
|
[ Element.text stat.name
|
|
|> Element.el [ Element.Font.size 30 ]
|
|
, Element.el
|
|
[ Element.Font.color (Theme.subtext0UI data.flavor)
|
|
, Element.Font.size 15
|
|
]
|
|
(Element.text stat.url)
|
|
]
|
|
|
|
-- Bar to push the rest to the right
|
|
, Element.column [ Element.width Element.fill ] []
|
|
, field { text = "ELO", value = stat.elo, color = Theme.lavenderUI data.flavor }
|
|
|> Element.el [ Element.paddingEach { top = 0, bottom = 0, left = 0, right = 15 } ]
|
|
, field { text = "WINS", value = stat.wins, color = Theme.greenUI data.flavor }
|
|
, field { text = "DRAWS", value = stat.draws, color = Theme.subtext0UI data.flavor }
|
|
, field { text = "LOSSES", value = stat.losses, color = Theme.redUI data.flavor }
|
|
]
|
|
|
|
field : { text : String, value : Int, color : Element.Color } -> Element msg
|
|
field { text, value, color } =
|
|
Element.column
|
|
[ Element.Font.color color
|
|
, Element.spacing 3
|
|
, Element.width (Element.px 70)
|
|
]
|
|
[ String.fromInt value
|
|
|> Element.text
|
|
|> Element.el [ Element.centerX, Element.Font.size 25 ]
|
|
, text
|
|
|> Element.text
|
|
|> Element.el [ Element.centerX, Element.Font.size 15 ]
|
|
]
|