Ensure the overlayButton is truly h-screen and w-screen
Now the "Tap to practice" button fully covers the screen. - Dropped support for a Piano direction (for now) - Using w-full and w-1/2 for piano key "length"
This commit is contained in:
William Carroll
parent
2fe6d7a10c
commit
7b2163d804
2 changed files with 35 additions and 112 deletions
|
|
@ -9,16 +9,8 @@ import Theory
|
|||
import UI
|
||||
|
||||
|
||||
{-| On mobile phones, the keyboard displays vertically.
|
||||
-}
|
||||
type Direction
|
||||
= Horizontal
|
||||
| Vertical
|
||||
|
||||
|
||||
type alias KeyMarkup a =
|
||||
{ offset : Int
|
||||
, direction : Direction
|
||||
, isHighlit : Bool
|
||||
, note : Theory.Note
|
||||
, isRootNote : Bool
|
||||
|
|
@ -33,6 +25,16 @@ type alias Props =
|
|||
}
|
||||
|
||||
|
||||
naturalThickness : Int
|
||||
naturalThickness =
|
||||
105
|
||||
|
||||
|
||||
accidentalThickness : Int
|
||||
accidentalThickness =
|
||||
round (toFloat naturalThickness / 2.0)
|
||||
|
||||
|
||||
{-| Convert an integer into its pixel representation for CSS.
|
||||
-}
|
||||
pixelate : Int -> String
|
||||
|
|
@ -40,58 +42,10 @@ pixelate x =
|
|||
String.fromInt x ++ "px"
|
||||
|
||||
|
||||
{-| Pixel width of the white keys.
|
||||
-}
|
||||
naturalWidth : Direction -> Int
|
||||
naturalWidth direction =
|
||||
case direction of
|
||||
Vertical ->
|
||||
1080
|
||||
|
||||
Horizontal ->
|
||||
45
|
||||
|
||||
|
||||
{-| Pixel height of the white keys.
|
||||
-}
|
||||
naturalHeight : Direction -> Int
|
||||
naturalHeight direction =
|
||||
case direction of
|
||||
Vertical ->
|
||||
130
|
||||
|
||||
Horizontal ->
|
||||
250
|
||||
|
||||
|
||||
{-| Pixel width of the black keys.
|
||||
-}
|
||||
accidentalWidth : Direction -> Int
|
||||
accidentalWidth direction =
|
||||
case direction of
|
||||
Vertical ->
|
||||
round (toFloat (naturalWidth direction) * 0.6)
|
||||
|
||||
Horizontal ->
|
||||
round (toFloat (naturalWidth direction) * 0.4)
|
||||
|
||||
|
||||
{-| Pixel height of the black keys.
|
||||
-}
|
||||
accidentalHeight : Direction -> Int
|
||||
accidentalHeight direction =
|
||||
case direction of
|
||||
Vertical ->
|
||||
round (toFloat (naturalHeight direction) * 0.63)
|
||||
|
||||
Horizontal ->
|
||||
round (toFloat (naturalHeight direction) * 0.63)
|
||||
|
||||
|
||||
{-| Return the markup for either a white or a black key.
|
||||
-}
|
||||
pianoKey : KeyMarkup a
|
||||
pianoKey { offset, isHighlit, note, direction, isRootNote } =
|
||||
pianoKey { offset, isHighlit, note, isRootNote } =
|
||||
let
|
||||
{ natColor, accColor, hiColor, rootColor } =
|
||||
{ natColor = "bg-white"
|
||||
|
|
@ -107,39 +61,23 @@ pianoKey { offset, isHighlit, note, direction, isRootNote } =
|
|||
, "border-black"
|
||||
]
|
||||
|
||||
{ keyWidth, keyHeight, keyColor, offsetEdge, extraClasses } =
|
||||
case ( Theory.keyClass note, direction ) of
|
||||
( Theory.Natural, Vertical ) ->
|
||||
{ keyWidth = naturalWidth Vertical
|
||||
, keyHeight = naturalHeight Vertical
|
||||
{ keyLength, keyThickness, keyColor, offsetEdge, extraClasses } =
|
||||
case Theory.keyClass note of
|
||||
Theory.Natural ->
|
||||
{ keyLength = "w-screen"
|
||||
, keyThickness = naturalThickness
|
||||
, keyColor = natColor
|
||||
, offsetEdge = "top"
|
||||
, extraClasses = []
|
||||
}
|
||||
|
||||
( Theory.Natural, Horizontal ) ->
|
||||
{ keyWidth = naturalWidth Horizontal
|
||||
, keyHeight = naturalHeight Horizontal
|
||||
, keyColor = natColor
|
||||
, offsetEdge = "left"
|
||||
, extraClasses = []
|
||||
}
|
||||
|
||||
( Theory.Accidental, Vertical ) ->
|
||||
{ keyWidth = accidentalWidth Vertical
|
||||
, keyHeight = accidentalHeight Vertical
|
||||
Theory.Accidental ->
|
||||
{ keyLength = "w-2/3"
|
||||
, keyThickness = accidentalThickness
|
||||
, keyColor = accColor
|
||||
, offsetEdge = "top"
|
||||
, extraClasses = [ "z-10" ]
|
||||
}
|
||||
|
||||
( Theory.Accidental, Horizontal ) ->
|
||||
{ keyWidth = accidentalWidth Horizontal
|
||||
, keyHeight = accidentalHeight Horizontal
|
||||
, keyColor = accColor
|
||||
, offsetEdge = "left"
|
||||
, extraClasses = [ "z-10" ]
|
||||
}
|
||||
in
|
||||
div
|
||||
[ class
|
||||
|
|
@ -153,8 +91,8 @@ pianoKey { offset, isHighlit, note, direction, isRootNote } =
|
|||
( True, False ) ->
|
||||
hiColor
|
||||
)
|
||||
, style "width" (pixelate keyWidth)
|
||||
, style "height" (pixelate keyHeight)
|
||||
, class keyLength
|
||||
, style "height" (pixelate keyThickness)
|
||||
, style offsetEdge (String.fromInt offset ++ "px")
|
||||
, class <| String.join " " (List.concat [ sharedClasses, extraClasses ])
|
||||
]
|
||||
|
|
@ -164,39 +102,27 @@ pianoKey { offset, isHighlit, note, direction, isRootNote } =
|
|||
{-| A section of the piano consisting of all twelve notes.
|
||||
-}
|
||||
keys :
|
||||
{ direction : Direction
|
||||
, start : Theory.Note
|
||||
{ start : Theory.Note
|
||||
, end : Theory.Note
|
||||
, highlitNotes : List Theory.Note
|
||||
, rootNote : Maybe Theory.Note
|
||||
}
|
||||
-> List (Html a)
|
||||
keys { direction, start, end, highlitNotes, rootNote } =
|
||||
keys { start, end, highlitNotes, rootNote } =
|
||||
let
|
||||
isHighlit note =
|
||||
List.member note highlitNotes
|
||||
|
||||
spacing prevOffset prev curr =
|
||||
case ( Theory.keyClass prev, Theory.keyClass curr, direction ) of
|
||||
-- Horizontal
|
||||
( Theory.Natural, Theory.Accidental, Horizontal ) ->
|
||||
prevOffset + naturalWidth direction - round (toFloat (accidentalWidth direction) / 2)
|
||||
case ( Theory.keyClass prev, Theory.keyClass curr ) of
|
||||
( Theory.Natural, Theory.Accidental ) ->
|
||||
prevOffset + naturalThickness - round (toFloat accidentalThickness / 2)
|
||||
|
||||
( Theory.Accidental, Theory.Natural, Horizontal ) ->
|
||||
prevOffset + round (toFloat (accidentalWidth direction) / 2)
|
||||
( Theory.Accidental, Theory.Natural ) ->
|
||||
prevOffset + round (toFloat accidentalThickness / 2)
|
||||
|
||||
( Theory.Natural, Theory.Natural, Horizontal ) ->
|
||||
prevOffset + naturalWidth direction
|
||||
|
||||
-- Vertical
|
||||
( Theory.Natural, Theory.Accidental, Vertical ) ->
|
||||
prevOffset + naturalHeight direction - round (toFloat (accidentalHeight direction) / 2)
|
||||
|
||||
( Theory.Accidental, Theory.Natural, Vertical ) ->
|
||||
prevOffset + round (toFloat (accidentalHeight direction) / 2)
|
||||
|
||||
( Theory.Natural, Theory.Natural, Vertical ) ->
|
||||
prevOffset + naturalHeight direction
|
||||
( Theory.Natural, Theory.Natural ) ->
|
||||
prevOffset + naturalThickness
|
||||
|
||||
-- This pattern should never hit.
|
||||
_ ->
|
||||
|
|
@ -215,7 +141,6 @@ keys { direction, start, end, highlitNotes, rootNote } =
|
|||
{ offset = 0
|
||||
, isHighlit = List.member curr highlitNotes
|
||||
, note = curr
|
||||
, direction = direction
|
||||
, isRootNote =
|
||||
rootNote
|
||||
|> Maybe.map (\x -> x == curr)
|
||||
|
|
@ -235,7 +160,6 @@ keys { direction, start, end, highlitNotes, rootNote } =
|
|||
{ offset = offset
|
||||
, isHighlit = List.member curr highlitNotes
|
||||
, note = curr
|
||||
, direction = direction
|
||||
, isRootNote =
|
||||
rootNote
|
||||
|> Maybe.map (\x -> x == curr)
|
||||
|
|
@ -259,8 +183,7 @@ render : Props -> Html a
|
|||
render { chord } =
|
||||
div [ style "display" "flex" ]
|
||||
(keys
|
||||
{ direction = Vertical
|
||||
, start = Theory.G3
|
||||
{ start = Theory.G3
|
||||
, end = Theory.C6
|
||||
, rootNote = chord |> Maybe.map .note
|
||||
, highlitNotes =
|
||||
|
|
|
|||
|
|
@ -132,13 +132,13 @@ overlayButton :
|
|||
overlayButton { label, handleClick, isVisible } =
|
||||
let
|
||||
classes =
|
||||
[ "bg-red-600"
|
||||
, "absolute"
|
||||
[ "fixed"
|
||||
, "top-0"
|
||||
, "left-0"
|
||||
, "h-screen"
|
||||
, "w-screen"
|
||||
, "block"
|
||||
, "z-30"
|
||||
, "w-screen"
|
||||
, "h-screen"
|
||||
]
|
||||
|
||||
extraClasses =
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue