019f8fd211
git-subtree-dir: users/wpcarro git-subtree-mainline:464bbcb15cgit-subtree-split:24f5a642afChange-Id: I6105b3762b79126b3488359c95978cadb3efa789
61 lines
1.6 KiB
Elm
61 lines
1.6 KiB
Elm
module Practice exposing (render)
|
|
|
|
import FlashCard
|
|
import Html exposing (..)
|
|
import Html.Attributes exposing (..)
|
|
import Html.Events exposing (..)
|
|
import Icon
|
|
import Piano
|
|
import State
|
|
import Tailwind
|
|
import Theory
|
|
import UI
|
|
|
|
|
|
openPreferences : Html State.Msg
|
|
openPreferences =
|
|
button
|
|
[ class "w-48 h-48 absolute left-0 top-0 z-50"
|
|
, onClick (State.SetView State.Preferences)
|
|
]
|
|
[ Icon.cog ]
|
|
|
|
|
|
render : State.Model -> Html State.Msg
|
|
render model =
|
|
let
|
|
( handleClick, buttonText ) =
|
|
if model.isPaused then
|
|
( State.Play, "Tap to practice" )
|
|
|
|
else
|
|
( State.Pause, "" )
|
|
in
|
|
div []
|
|
[ openPreferences
|
|
, case model.selectedChord of
|
|
Just chord ->
|
|
FlashCard.render
|
|
{ chord = chord
|
|
, visible = model.showFlashCard
|
|
}
|
|
|
|
Nothing ->
|
|
-- 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
|
|
, lastNote = model.lastNote
|
|
}
|
|
]
|