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