time.elm

import Html exposing (Html, div, text)
import Svg exposing (svg, circle, line)
import Svg.Attributes exposing (..)
import Time exposing (Time, second, hour)


main =
    Html.program
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }

-- Model

type alias Model = Time

init : (Model, Cmd Msg)
init =
    (0, Cmd.none)


-- Update

type Msg
    = Tick Time

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        Tick newTime ->
            (newTime, Cmd.none)

-- Subscriptions

subscriptions : Model -> Sub Msg
subscriptions model =
    Time.every second Tick

-- View
view : Model -> Html Msg
view model =
    div []
    [   svg [ viewBox "0 0 100 100", width "300px"]
        [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
        , secondHand model
        , minuteHand model
        , hourHand model
        ]
    -- ,   div [] [ model |> toString |> text ]
    ,   div [] [ (Time.inHours model |> round) % 12 |> toString |> text ]
    ,   div [] [ (Time.inMinutes model |> round) % 60 |> toString |> text ]
    ,   div [] [ (Time.inSeconds model |> round) % 60 |> toString |> text ]
    ]

type Angle
    = Radians Float
    | Degrees Float
    | Gradians Float
    | Turns Float

toRadian : Angle -> Float
toRadian angle =
    case angle of
        Radians val ->
            val
        Degrees val ->
            2 * pi * val / 360
        Gradians val ->
            2 * pi * val / 400
        Turns val ->
            2 * pi * val

secondHand : Model -> Html Msg
secondHand model =
    let
        angle = toRadian <| Turns <| (Time.inMinutes model) - 0.25
        handX = toString (50 + 30 * cos angle)
        handY = toString (50 + 30 * sin angle)
    in
        line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963"] []


minuteHand : Model -> Html Msg
minuteHand model =
    let
        angle = toRadian <| Turns <| (Time.inHours model) - 0.25
        handX = toString (50 + 40 * cos angle)
        handY = toString (50 + 40 * sin angle)
    in
        line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963"] []


hourHand : Model -> Html Msg
hourHand model =
    let
        angle = toRadian <| Turns <| ((Time.inHours model) / 12) - 0.25
        handX = toString (50 + 20 * cos angle)
        handY = toString (50 + 20 * sin angle)
    in
        line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963"] []