How can I create a timer and reset after the time is up?

[watermelon]

My school homework asks us to do a minigame, where the user has 20 seconds to do a task, or the game tells the user they have failed and then resets.

However, they never went through anything relevant. I have no idea how to do it

[bob-shelline]

The first place that comes to mind would be to go through the Elm guide, which covers the basics. There’s a page specifically for setting up a timer that seems relevant: Time · An Introduction to Elm

Is this an assignment that requires Elm, or an assignment with the freedom to choose and you’ve decided to use Elm?

[joelq]

There are two basic ways to interact with time in Elm:

1. As a one off “let me know when so much time has elapsed” via a command
2. As a subscription for “let me know every time this interval has elapsed”.

Via a command

Here’s how a minimal executable version of the game you described might look like using the command: https://ellie-app.com/cjLDLyz3WKYa1

The interesting part is this line in the update:

UserClickedStart ->
  ( InProgress, notifyIn TimeIsUp 5000 )

which sets the model into the InProgress state and kicks off a timer that will notify us when 5 seconds have passed. The implementation of notifyIn looks like:

notifyIn : Msg -> Float -> Cmd Msg
notifyIn msg time =
    Process.sleep time
        |> Task.attempt (\_ -> msg)

Via a subscription

Here’s how it might look like using a subscription: https://ellie-app.com/cjLMnNvFVmSa1. An advantage here is that we know about time changes all along rather than just when the timer is done. This means we’re able to decrement the number in the view.

The interesting part is the subscriptions function which triggers a Tick message every second when the game is in the InProgress state.

subscriptions : Model -> Sub Msg
subscriptions model =
  case model of
    Initial -> Sub.none
    InProgress _ ->  Time.every 1000 (\_ -> Tick)
    Won -> Sub.none
    Lost -> Sub.none