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 2020-04-19 13:14:18 +01:00
parent 2fe6d7a10c
commit 7b2163d804
2 changed files with 35 additions and 112 deletions

View file

@ -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 =

View file

@ -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 =