tvl-depot/website/sandbox/chord-drill-sergeant/src/Tempo.elm
William Carroll 24692ab465 Properly support chord inversions
While I did change a lot of functionality, I also ran `elm-format` across the
codebase, which makes these changes a bit noisy.

Here is the TL;DR:
- Properly support chord inversions
- Ensure that the piano styling changes dynamically when I change the variables
  like `naturalWidth`
- Add start and end notes to define the size of the piano and which chords we
  create
- Support elm-format and run it across entire project
- Debug Misc.comesBefore
- Introduce a ChordInspector and debugger

TODO: Ensure that we only generate chords where all of the notes can be rendered
on the displayed keys.

TODO: Add preferences panel, so that I can do things like "Practice blues chords
in C and E with chord substitutions."
2020-04-12 16:43:34 +01:00

27 lines
684 B
Elm

module Tempo exposing (render)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
type alias Props msg =
{ tempo : Int
, handleIncrease : msg
, handleDecrease : msg
, handleInput : String -> msg
}
render : Props msg -> Html msg
render { tempo, handleIncrease, handleDecrease, handleInput } =
div []
[ p [] [ text (String.fromInt tempo ++ " BPM") ]
, button [ onClick handleDecrease ] [ text "Slower" ]
, input
[ onInput handleInput
, placeholder "Set tempo..."
]
[]
, button [ onClick handleIncrease ] [ text "Faster" ]
]