diff options
| -rw-r--r-- | website/sandbox/learnpianochords/src/Piano.elm | 139 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/UI.elm | 8 |
2 files changed, 35 insertions, 112 deletions
diff --git a/website/sandbox/learnpianochords/src/Piano.elm b/website/sandbox/learnpianochords/src/Piano.elm index abd8c6ec0b55..d231f1467438 100644 --- a/website/sandbox/learnpianochords/src/Piano.elm +++ b/website/sandbox/learnpianochords/src/Piano.elm @@ -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,65 +25,27 @@ type alias Props = } -{-| Convert an integer into its pixel representation for CSS. --} -pixelate : Int -> String -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 - +naturalThickness : Int +naturalThickness = + 105 -{-| 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) +accidentalThickness : Int +accidentalThickness = + round (toFloat naturalThickness / 2.0) -{-| Pixel height of the black keys. +{-| Convert an integer into its pixel representation for CSS. -} -accidentalHeight : Direction -> Int -accidentalHeight direction = - case direction of - Vertical -> - round (toFloat (naturalHeight direction) * 0.63) - - Horizontal -> - round (toFloat (naturalHeight direction) * 0.63) +pixelate : Int -> String +pixelate x = + String.fromInt x ++ "px" {-| 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) - - ( Theory.Accidental, Theory.Natural, Horizontal ) -> - prevOffset + round (toFloat (accidentalWidth direction) / 2) - - ( Theory.Natural, Theory.Natural, Horizontal ) -> - prevOffset + naturalWidth direction - - -- Vertical - ( Theory.Natural, Theory.Accidental, Vertical ) -> - prevOffset + naturalHeight direction - round (toFloat (accidentalHeight direction) / 2) + case ( Theory.keyClass prev, Theory.keyClass curr ) of + ( Theory.Natural, Theory.Accidental ) -> + prevOffset + naturalThickness - round (toFloat accidentalThickness / 2) - ( Theory.Accidental, Theory.Natural, Vertical ) -> - prevOffset + round (toFloat (accidentalHeight direction) / 2) + ( Theory.Accidental, Theory.Natural ) -> + prevOffset + round (toFloat accidentalThickness / 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 = diff --git a/website/sandbox/learnpianochords/src/UI.elm b/website/sandbox/learnpianochords/src/UI.elm index dd0b7d2e0c7e..4fa8f65fb54c 100644 --- a/website/sandbox/learnpianochords/src/UI.elm +++ b/website/sandbox/learnpianochords/src/UI.elm @@ -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 = |