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, 7 insertions, 1 deletions

diff --git a/website/sandbox/learnpianochords/src/State.elm b/website/sandbox/learnpianochords/src/State.elm
index 5f6a02a92085..d81e5b26b728 100644
--- a/website/sandbox/learnpianochords/src/State.elm
+++ b/website/sandbox/learnpianochords/src/State.elm
@@ -18,6 +18,7 @@ type Msg
     | DoNothing
     | SetPracticeMode PracticeMode
     | SetView View
+    | ToggleFlashCard
 
 
 type View
@@ -46,6 +47,7 @@ type alias Model =
     , lastNote : Theory.Note
     , practiceMode : PracticeMode
     , view : View
+    , showFlashCard : Bool
     }
 
 
@@ -92,10 +94,11 @@ init =
     , whitelistedKeys = keys
     , selectedChord = Nothing
     , isPaused = True
-    , tempo = 20
+    , tempo = 10
     , firstNote = firstNote
     , lastNote = lastNote
     , view = Overview
+    , showFlashCard = True
     }
 
 
@@ -251,3 +254,6 @@ update msg model =
               }
             , Cmd.none
             )
+
+        ToggleFlashCard ->
+            ( { model | showFlashCard = not model.showFlashCard }, Cmd.none )