1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
module Piano exposing (render)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Theory
{-| These are the white keys on most modern pianos. -}
natural : Bool -> Html a
natural isHighlit =
li [ style "background-color" (if isHighlit then "red" else "white")
, style "height" "20px"
, style "border-top" "1px solid black"
, style "border-bottom" "1px solid black"
] []
{-| These are the black keys on most modern pianos. -}
accidental : Bool -> Html a
accidental isHighlit =
li [ style "background-color" (if isHighlit then "red" else "black")
, style "height" "10px"
, style "width" "66%"
] []
{-| A section of the piano consisting of all twelve notes. The name octave
implies eight notes, which most scales (not the blues scale) honor. -}
octave : List Theory.Note -> List (Html a)
octave highlight =
let
isHighlit note = List.member note highlight
in
[ natural (isHighlit Theory.C)
, accidental (isHighlit Theory.C_sharp)
, natural (isHighlit Theory.D)
, accidental (isHighlit Theory.D_sharp)
, natural (isHighlit Theory.E)
, natural (isHighlit Theory.F)
, accidental (isHighlit Theory.F_sharp)
, natural (isHighlit Theory.G)
, accidental (isHighlit Theory.G_sharp)
, natural (isHighlit Theory.A)
, accidental (isHighlit Theory.A_sharp)
, natural (isHighlit Theory.B)
]
indexForNote : Theory.Note -> Int
indexForNote note =
case note of
Theory.C -> 0
Theory.C_sharp -> 1
Theory.D -> 2
Theory.D_sharp -> 3
Theory.E -> 4
Theory.F -> 5
Theory.F_sharp -> 6
Theory.G -> 7
Theory.G_sharp -> 8
Theory.A -> 9
Theory.A_sharp -> 10
Theory.B -> 11
{-| Return the HTML that renders a piano representation. -}
render : { highlight : List Theory.Note } -> Html a
render {highlight} =
ul [ style "width" "100px"
, style "list-style" "none"
] (octave highlight |> List.reverse |> List.repeat 1 |> List.concat)
|
