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 Icon
import Piano import Piano
import State import State
import Tailwind
import Theory import Theory
import UI import UI
@ -32,11 +33,6 @@ render model =
in in
div [] div []
[ openPreferences [ openPreferences
, UI.overlayButton
{ label = buttonText
, handleClick = handleClick
, isVisible = model.isPaused
}
, case model.selectedChord of , case model.selectedChord of
Just chord -> Just chord ->
FlashCard.render FlashCard.render
@ -45,7 +41,18 @@ render model =
} }
Nothing -> 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 , Piano.render
{ chord = model.selectedChord { chord = model.selectedChord
, firstNote = model.firstNote , firstNote = model.firstNote