Display "Get ready..." message before practicing

This is a temporary solution. Ideally I would like to handle this with the
following:

- Show the flashcard for a chord shortly after beginning a practice session
- Display a small 3...2...1... countdown timer immediately after beginning a
  practice session

I need to dig more deeply into Elm's Time module and subscriptions to better
understand how to properly solve this problem. In the meantime, please tolerate
this short-term solution.
This commit is contained in:
William Carroll 2020-04-19 18:51:42 +01:00
parent 4a8f750ba8
commit a059c32403

View file

@ -7,6 +7,7 @@ import Html.Events exposing (..)
import Icon
import Piano
import State
import Tailwind
import Theory
import UI
@ -32,11 +33,6 @@ render model =
in
div []
[ openPreferences
, UI.overlayButton
{ label = buttonText
, handleClick = handleClick
, isVisible = model.isPaused
}
, case model.selectedChord of
Just chord ->
FlashCard.render
@ -45,7 +41,18 @@ render model =
}
Nothing ->
span [] []
-- Here I'm abusing the overlayButton component to render text
-- horizontally. I should support a UI component for this.
UI.overlayButton
{ label = "Get ready..."
, handleClick = State.DoNothing
, isVisible = True
}
, UI.overlayButton
{ label = buttonText
, handleClick = handleClick
, isVisible = model.isPaused
}
, Piano.render
{ chord = model.selectedChord
, firstNote = model.firstNote