tutor/www/src/UI.elm

module UI exposing
    ( Dimensions
    , colors
    , getViewport
    , isMobile
    , manaSpinner
    , subtitle
    , text
    , title
    )

import Browser.Dom
import Color
import Element as E
import Element.Font as Font
import Spinner
import Task


type alias Dimensions =
    { width : Int
    , height : Int
    }


colors =
    let
        blue =
            E.rgb255 100 100 255

        slate =
            E.rgb255 150 150 200

        lighterGrey =
            E.rgb255 60 60 60

        lightGrey =
            E.rgb255 50 50 50

        grey =
            E.rgb255 40 40 40

        darkGrey =
            E.rgb255 30 30 30

        darkerGrey =
            E.rgb255 20 20 20

        white =
            E.rgb255 255 255 255

        offwhite =
            E.rgb255 200 200 200

        mythic =
            E.rgb255 205 55 0

        rare =
            E.rgb255 218 165 32

        uncommon =
            E.rgb255 112 128 144

        common =
            E.rgb255 47 79 79
    in
    { primary = blue
    , secondary = slate
    , background = lightGrey
    , navBar = darkerGrey
    , sidebar = lighterGrey
    , selected = darkGrey
    , hover = grey
    , title = white
    , subtitle = offwhite
    , text = offwhite
    , mythic = mythic
    , rare = rare
    , uncommon = uncommon
    , common = common
    }


getViewport : (Dimensions -> msg) -> Cmd msg
getViewport msg =
    Task.perform
        (\x ->
            msg
                { width = floor x.viewport.width
                , height = floor x.viewport.height
                }
        )
        Browser.Dom.getViewport


isMobile : E.Device -> Bool
isMobile device =
    case device.orientation of
        E.Landscape ->
            False

        E.Portrait ->
            True


manaSpinner : Spinner.Config
manaSpinner =
    let
        color index =
            if index < 1.0 then
                Color.red

            else if index < 2.0 then
                Color.green

            else if index < 3.0 then
                Color.purple

            else if index < 4.0 then
                Color.blue

            else
                Color.white

        default =
            Spinner.defaultConfig
    in
    { default
        | lines = 5.0
        , length = 0.0
        , width = 20
        , color = color
    }


text : String -> E.Element msg
text string =
    E.el [ Font.color colors.text ] <| E.text string


title : String -> E.Element msg
title string =
    E.el [ Font.color colors.title ] <| E.text string


subtitle : String -> E.Element msg
subtitle string =
    E.el [ Font.size 16, Font.italic, Font.color colors.subtitle ] <| E.text string