pausable-clock.elm

-- Read more about this program in the official Elm guide:
-- https://guide.elm-lang.org/architecture/effects/time.html

-- adds a pause button to the default http://elm-lang.org/examples/time
-- this stops the tick displaying but not happening, so "jumps" on unpause

import Html exposing (Html, button, div)
import Html.Events exposing (onClick)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)


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


-- MODEL

type alias Model = {
  time: Time,
  paused: Bool
}

init : (Model, Cmd Msg)
init = ({time = 0, paused = False}, Cmd.none)


-- UPDATE

type Msg = Tick Time | Pause

update : Msg -> Model -> (Model, Cmd Msg)
update msg model = case msg of
  Tick newTime -> if model.paused
                  then (model, Cmd.none)
                  else ({model | time = newTime}, Cmd.none)
  Pause -> ({ model | paused = not model.paused }, Cmd.none)


-- SUBSCRIPTIONS

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


-- VIEW

view : Model -> Html Msg
view model = let
    angle = turns (Time.inMinutes model.time)
    handX = toString (50 + 40 * cos angle)
    handY = toString (50 + 40 * sin angle)
  in div [] [ svg
                [ viewBox "0 0 100 100", width "300px" ]
                [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
                , line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963" ] []
                ]
            , button [onClick Pause] [text (if model.paused then "Unpause" else "Pause")]
            ]