Orient "Press to practice" button

Rotate the "Press to practice" copy to ensure that it is readable in landscape
mode.

2 files changed, 58 insertions, 22 deletions

diff --git a/website/sandbox/learnpianochords/src/Main.elm b/website/sandbox/learnpianochords/src/Main.elm
index 054d318a08b1..1c40d0d7961a 100644
--- a/website/sandbox/learnpianochords/src/Main.elm
+++ b/website/sandbox/learnpianochords/src/Main.elm
@@ -98,7 +98,7 @@ init =
             Theory.allPitchClasses
 
         keys =
-            []
+            [ { pitchClass = Theory.C, mode = Theory.MajorMode } ]
 
         practiceMode =
             KeyMode
@@ -386,7 +386,7 @@ selectKey model { relativeMajor, relativeMinor } =
             { label = buttonLabel relativeMajor relativeMinor
             , handleClick = ToggleKey relativeMinor
             , classes = [ "flex-1" ]
-            , toggled = active relativeMinor
+            , toggled = active relativeMinor || active relativeMajor
             }
         ]
 
@@ -464,7 +464,7 @@ practiceModeButtons model =
 openPreferences : Html Msg
 openPreferences =
     button
-        [ class "w-48 h-48 absolute left-0 top-0 z-20"
+        [ class "w-48 h-48 absolute left-0 top-0 z-40"
         , onClick (SetView Preferences)
         ]
         [ Icon.cog ]
@@ -502,30 +502,20 @@ preferences model =
 practice : Model -> Html Msg
 practice model =
     let
-        classes =
-            [ "bg-gray-600"
-            , "h-screen"
-            , "w-full"
-            , "absolute"
-            , "z-10"
-            , "text-6xl"
-            ]
-
-        ( handleClick, extraClasses, buttonText ) =
+        ( handleClick, buttonText ) =
             if model.isPaused then
-                ( Play, [ "opacity-50" ], "Press to practice" )
+                ( Play, "Press to practice" )
 
             else
-                ( Pause, [ "opacity-0" ], "" )
+                ( Pause, "" )
     in
     div []
-        [ button
-            [ [ classes, extraClasses ] |> List.concat |> UI.tw |> class
-            , onClick handleClick
-            ]
-            [ text buttonText
-            ]
-        , openPreferences
+        [ openPreferences
+        , UI.overlayButton
+            { label = buttonText
+            , handleClick = handleClick
+            , isVisible = model.isPaused
+            }
         , Piano.render
             { highlight = model.selectedChord |> Maybe.andThen Theory.notesForChord |> Maybe.withDefault []
             , start = model.firstNote
diff --git a/website/sandbox/learnpianochords/src/UI.elm b/website/sandbox/learnpianochords/src/UI.elm
index 00114332db89..ac15b37d54fe 100644
--- a/website/sandbox/learnpianochords/src/UI.elm
+++ b/website/sandbox/learnpianochords/src/UI.elm
@@ -114,3 +114,49 @@ textField { placeholderText, handleInput, classes } =
         , placeholder placeholderText
         ]
         []
+
+
+overlayButton :
+    { label : String
+    , handleClick : msg
+    , isVisible : Bool
+    }
+    -> Html msg
+overlayButton { label, handleClick, isVisible } =
+    let
+        classes =
+            [ "bg-red-600"
+            , "absolute"
+            , "top-0"
+            , "left-0"
+            , "h-screen"
+            , "w-screen"
+            , "z-30"
+            ]
+
+        extraClasses =
+            if isVisible then
+                [ "opacity-100" ]
+
+            else
+                [ "opacity-0" ]
+    in
+    button
+        [ List.concat [ classes, extraClasses ] |> tw |> class
+        , style "background-color" "rgba(0,0,0,0.30)"
+        , onClick handleClick
+        ]
+        [ h1
+            [ style "-webkit-text-stroke-width" "2px"
+            , style "-webkit-text-stroke-color" "black"
+            , class <|
+                tw
+                    [ "transform"
+                    , "-rotate-90"
+                    , "text-6xl"
+                    , "text-white"
+                    , "font-mono"
+                    ]
+            ]
+            [ text label ]
+        ]