Model data and sketch ideas for Chord Drill Sergeant

Initialize an Elm application to build a MVP for the Chord Drill Sergeant
application. There isn't much to see at the moment. I'm just sketching
ideas. More forthcoming...

1 files changed, 46 insertions, 0 deletions

diff --git a/website/sandbox/chord-drill-sergeant/src/Piano.elm b/website/sandbox/chord-drill-sergeant/src/Piano.elm
new file mode 100644
index 000000000000..7c44f4bf4f6f
--- /dev/null
+++ b/website/sandbox/chord-drill-sergeant/src/Piano.elm
@@ -0,0 +1,46 @@
+module Piano exposing (render)
+
+import Browser
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+
+{-| These are the white keys on most modern pianos. -}
+natural : Html a
+natural =
+  li [ style "background-color" "white"
+     , style "height" "20px"
+     , style "border-top" "1px solid black"
+     ] []
+
+{-| These are the black keys on most modern pianos. -}
+accidental : Html a
+accidental =
+  li [ style "background-color" "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 (Html a)
+octave = [ natural
+         , accidental
+         , natural
+         , accidental
+         , natural
+         , natural
+         , accidental
+         , natural
+         , accidental
+         , natural
+         , accidental
+         , natural
+         ]
+
+{-| Return the HTML that renders a piano representation. -}
+render : Html a
+render =
+  ul [ style "width" "100px"
+     , style "list-style" "none"
+     ] (octave |> List.repeat 3 |> List.concat)