about summary refs log tree commit diff
path: root/website/sandbox
diff options
context:
space:
mode:
authorWilliam Carroll <wpcarro@gmail.com>2020-04-19T17·51+0100
committerWilliam Carroll <wpcarro@gmail.com>2020-04-19T17·51+0100
commita059c32403b2baa8298fef39ce39ff3324e65944 (patch)
treea0bfdc9cb072874da567fde1c5736509cf760e61 /website/sandbox
parent4a8f750ba8b7aa9663be2753cd6e25aa5e18d535 (diff)
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.
Diffstat (limited to 'website/sandbox')
-rw-r--r--website/sandbox/learnpianochords/src/Practice.elm19
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