130 lines
2.2 KiB
Elm
130 lines
2.2 KiB
Elm
|
module UI exposing
|
||
|
( Dimensions
|
||
|
, colors
|
||
|
, getViewport
|
||
|
, isMobile
|
||
|
, manaSpinner
|
||
|
)
|
||
|
|
||
|
import Browser.Dom
|
||
|
import Color
|
||
|
import Element as E
|
||
|
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
|
||
|
}
|