d134db700f
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)
54 lines
1.3 KiB
Elm
54 lines
1.3 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 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
|
|
, UI.overlayButton
|
|
{ label = buttonText
|
|
, 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
|
|
, lastNote = model.lastNote
|
|
}
|
|
]
|