Support a FlashCard before showing the notes that comprise a chord

My much anticipated feature: first prompt the user for a name of a chord, then
show the user that chord.

Cascading changes:
I changed the "Tap to practice" overlayButton's opacity from 30% to 100% because
pausing when showFlashCard is True causes the two piece

TIL:
You can batch Elm Subscriptions using the Sub.batch function.

What I haven't learned yet:
How to best handle rotating screens for mobile devices (i.e. portrait
vs. landscape modes). In time...

What's left?
- Support sound
- Support a fine-tune section of the preferences
- Support tablet and web browser variants
- Ask users for the "I chord" instead of asking "C major Root position"
- More styling (of course)

1 files changed, 11 insertions, 1 deletions

diff --git a/website/sandbox/learnpianochords/src/Practice.elm b/website/sandbox/learnpianochords/src/Practice.elm
index 86977859b85b..e92b163920ab 100644
--- a/website/sandbox/learnpianochords/src/Practice.elm
+++ b/website/sandbox/learnpianochords/src/Practice.elm
@@ -1,5 +1,6 @@
 module Practice exposing (render)
 
+import FlashCard
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
@@ -13,7 +14,7 @@ import UI
 openPreferences : Html State.Msg
 openPreferences =
     button
-        [ class "w-48 h-48 absolute left-0 top-0 z-40"
+        [ class "w-48 h-48 absolute left-0 top-0 z-50"
         , onClick (State.SetView State.Preferences)
         ]
         [ Icon.cog ]
@@ -36,6 +37,15 @@ render model =
             , handleClick = handleClick
             , isVisible = model.isPaused
             }
+        , case model.selectedChord of
+            Just chord ->
+                FlashCard.render
+                    { chord = chord
+                    , visible = model.showFlashCard
+                    }
+
+            Nothing ->
+                span [] []
         , Piano.render
             { chord = model.selectedChord
             , firstNote = model.firstNote