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)
42 lines
908 B
Elm
42 lines
908 B
Elm
module FlashCard exposing (render)
|
|
|
|
import Html exposing (..)
|
|
import Html.Attributes exposing (..)
|
|
import Html.Events exposing (..)
|
|
import Responsive
|
|
import State
|
|
import Tailwind
|
|
import Theory
|
|
|
|
|
|
render :
|
|
{ chord : Theory.Chord
|
|
, visible : Bool
|
|
}
|
|
-> Html State.Msg
|
|
render { chord, visible } =
|
|
let
|
|
classes =
|
|
[ "bg-white"
|
|
, "fixed"
|
|
, "top-0"
|
|
, "left-0"
|
|
, "z-30"
|
|
, "w-screen"
|
|
, "h-screen"
|
|
, Tailwind.if_ visible "opacity-100" "opacity-0"
|
|
]
|
|
in
|
|
button
|
|
[ classes |> Tailwind.use |> class ]
|
|
[ h1
|
|
[ [ "text-center"
|
|
, "transform"
|
|
, "-rotate-90"
|
|
, Responsive.h1
|
|
]
|
|
|> Tailwind.use
|
|
|> class
|
|
]
|
|
[ text (Theory.viewChord chord) ]
|
|
]
|