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.

1 files changed, 13 insertions, 6 deletions

diff --git a/website/sandbox/learnpianochords/src/Practice.elm b/website/sandbox/learnpianochords/src/Practice.elm
index e92b163920ab..5d87bcee501e 100644
--- a/website/sandbox/learnpianochords/src/Practice.elm
+++ b/website/sandbox/learnpianochords/src/Practice.elm
@@ -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