Last active
March 9, 2017 23:27
-
-
Save nabilhassein/64d608dffa0e1826deab5cc34979e245 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-- 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")] | |
] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment