Begin styling efforts

Start styling the Chord Drill Sergeant for mobile devices because that is that
device on which I will primarily use CDS.

I'm also deleting the debugger related code. I would like to support a debugger,
but I'm not currently using this one, so I am going to remove it to keep things
slender.

- Introduce TailwindCSS, which also introduced elm-live, index.html, index.css
- Add mobile-first styling for the preferences modal
- Remove unused code

1 files changed, 116 insertions, 112 deletions

diff --git a/website/sandbox/chord-drill-sergeant/src/Main.elm b/website/sandbox/chord-drill-sergeant/src/Main.elm
index ebbc523333af..f13412a0a9f4 100644
--- a/website/sandbox/chord-drill-sergeant/src/Main.elm
+++ b/website/sandbox/chord-drill-sergeant/src/Main.elm
@@ -1,17 +1,16 @@
 module Main exposing (main)
 
 import Browser
-import ChordInspector
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
-import NoteInspector
 import Piano
 import Random
 import Random.List
 import Tempo
 import Theory
 import Time exposing (..)
+import UI
 
 
 type alias Model =
@@ -26,13 +25,15 @@ type alias Model =
     , firstNote : Theory.Note
     , lastNote : Theory.Note
     , practiceMode : PracticeMode
-    , debug :
-        { enable : Bool
-        , inspectChord : Bool
-        }
+    , view : View
     }
 
 
+type View
+    = Preferences
+    | Practice
+
+
 {-| Control the type of practice you'd like.
 -}
 type PracticeMode
@@ -48,7 +49,6 @@ type Msg
     | IncreaseTempo
     | DecreaseTempo
     | SetTempo String
-    | ToggleInspectChord
     | ToggleInversion Theory.ChordInversion
     | ToggleChordType Theory.ChordType
     | TogglePitchClass Theory.PitchClass
@@ -84,7 +84,7 @@ init : Model
 init =
     let
         ( firstNote, lastNote ) =
-            ( Theory.C3, Theory.C5 )
+            ( Theory.A1, Theory.C8 )
 
         inversions =
             Theory.allInversions
@@ -96,7 +96,7 @@ init =
             Theory.allPitchClasses
 
         keys =
-            Theory.allKeys
+            []
 
         practiceMode =
             KeyMode
@@ -121,13 +121,10 @@ init =
     , whitelistedKeys = keys
     , selectedChord = Nothing
     , isPaused = True
-    , tempo = 60
+    , tempo = 30
     , firstNote = firstNote
     , lastNote = lastNote
-    , debug =
-        { enable = False
-        , inspectChord = True
-        }
+    , view = Preferences
     }
 
 
@@ -212,16 +209,6 @@ update msg model =
             , Cmd.none
             )
 
-        ToggleInspectChord ->
-            ( { model
-                | debug =
-                    { inspectChord = not model.debug.inspectChord
-                    , enable = model.debug.enable
-                    }
-              }
-            , Cmd.none
-            )
-
         ToggleChordType chordType ->
             let
                 chordTypes =
@@ -331,33 +318,6 @@ playPause { isPaused } =
         button [ onClick Pause ] [ text "Pause" ]
 
 
-debugger : Html Msg
-debugger =
-    fieldset []
-        [ label [] [ text "Inspect Chord" ]
-        , input [ type_ "checkbox", onClick ToggleInspectChord, checked init.debug.inspectChord ] []
-        ]
-
-
-pitchClassCheckboxes : List Theory.PitchClass -> Html Msg
-pitchClassCheckboxes pitchClasses =
-    ul []
-        (Theory.allPitchClasses
-            |> List.map
-                (\pitchClass ->
-                    li []
-                        [ label [] [ text (Theory.viewPitchClass pitchClass) ]
-                        , input
-                            [ type_ "checkbox"
-                            , onClick (TogglePitchClass pitchClass)
-                            , checked (List.member pitchClass pitchClasses)
-                            ]
-                            []
-                        ]
-                )
-        )
-
-
 chordTypeCheckboxes : List Theory.ChordType -> Html Msg
 chordTypeCheckboxes chordTypes =
     ul []
@@ -396,45 +356,71 @@ inversionCheckboxes inversions =
         )
 
 
-keyCheckboxes : List Theory.Key -> Html Msg
-keyCheckboxes keys =
+selectKey :
+    Model
+    ->
+        { pitchClass : Theory.PitchClass
+        , majorKey : Theory.Key
+        , minorKey : Theory.Key
+        , bluesKey : Theory.Key
+        }
+    -> Html Msg
+selectKey model { pitchClass, majorKey, minorKey, bluesKey } =
+    let
+        active key =
+            List.member key model.whitelistedKeys
+    in
+    div [ class "flex pt-0" ]
+        [ p [ class "text-gray-500 text-center text-5xl flex-1 py-10" ] [ text (Theory.viewPitchClass pitchClass) ]
+        , UI.textToggleButton
+            { label = "major"
+            , handleClick = ToggleKey majorKey
+            , classes = [ "flex-1" ]
+            , toggled = active majorKey
+            }
+        , UI.textToggleButton
+            { label = "minor"
+            , handleClick = ToggleKey minorKey
+            , classes = [ "flex-1" ]
+            , toggled = active minorKey
+            }
+        , UI.textToggleButton
+            { label = "blues"
+            , handleClick = ToggleKey bluesKey
+            , classes = [ "flex-1" ]
+            , toggled = active bluesKey
+            }
+        ]
+
+
+keyCheckboxes : Model -> Html Msg
+keyCheckboxes model =
     div []
-        [ h2 [] [ text "Choose Key" ]
-        , button [ onClick SelectAllKeys ] [ text "Select all" ]
-        , button [ onClick DeselectAllKeys ] [ text "Deselect all" ]
+        [ h2 [ class "text-center py-10 text-5xl" ] [ text "Select Keys" ]
         , ul []
-            (Theory.allKeys
+            (Theory.allPitchClasses
                 |> List.map
-                    (\key ->
-                        li []
-                            [ label [] [ text (Theory.viewKey key) ]
-                            , input
-                                [ type_ "checkbox"
-                                , onClick (ToggleKey key)
-                                , checked (List.member key keys)
-                                ]
-                                []
-                            ]
+                    (\pitchClass ->
+                        selectKey model
+                            { pitchClass = pitchClass
+                            , majorKey = { pitchClass = pitchClass, mode = Theory.MajorMode }
+                            , minorKey = { pitchClass = pitchClass, mode = Theory.MinorMode }
+                            , bluesKey = { pitchClass = pitchClass, mode = Theory.BluesMode }
+                            }
                     )
             )
         ]
 
 
 displayChord :
-    { debug : Bool
-    , chord : Theory.Chord
+    { chord : Theory.Chord
     , firstNote : Theory.Note
     , lastNote : Theory.Note
     }
     -> Html Msg
-displayChord { debug, chord, firstNote, lastNote } =
+displayChord { chord, firstNote, lastNote } =
     div []
-        [ if debug then
-            ChordInspector.render chord
-
-          else
-            span [] []
-        , p [] [ text (Theory.viewChord chord) ]
+        [ p [] [ text (Theory.viewChord chord) ]
         , case Theory.notesForChord chord of
             Just x ->
                 Piano.render
@@ -448,57 +434,65 @@ displayChord { debug, chord, firstNote, lastNote } =
         ]
 
 
-view : Model -> Html Msg
-view model =
-    div []
+practiceModeButtons : Model -> Html Msg
+practiceModeButtons model =
+    div [ class "text-center" ]
+        [ h2 [ class "py-10 text-5xl" ] [ text "Practice Mode" ]
+        , div [ class "flex pb-6" ]
+            [ UI.simpleButton
+                { label = "Key"
+                , classes = [ "flex-1", "rounded-r-none" ]
+                , handleClick = SetPracticeMode KeyMode
+                , color =
+                    if model.practiceMode == KeyMode then
+                        UI.Primary
+
+                    else
+                        UI.Secondary
+                }
+            , UI.simpleButton
+                { label = "Fine Tune"
+                , handleClick = SetPracticeMode FineTuneMode
+                , classes = [ "flex-1", "rounded-l-none" ]
+                , color =
+                    if model.practiceMode == FineTuneMode then
+                        UI.Primary
+
+                    else
+                        UI.Secondary
+                }
+            ]
+        ]
+
+
+preferences : Model -> Html Msg
+preferences model =
+    div [ class "pt-10 pb-20 px-10" ]
         [ Tempo.render
             { tempo = model.tempo
-            , handleIncrease = IncreaseTempo
-            , handleDecrease = DecreaseTempo
             , handleInput = SetTempo
             }
-        , div []
-            [ h2 [] [ text "Practice Mode" ]
-            , input
-                [ type_ "radio"
-                , id "key-mode"
-                , name "key-mode"
-                , checked (model.practiceMode == KeyMode)
-                , onClick (SetPracticeMode KeyMode)
-                ]
-                []
-            , label [ for "key-mode" ] [ text "Key Mode" ]
-            , input
-                [ type_ "radio"
-                , id "fine-tune-mode"
-                , name "fine-tune-mode"
-                , checked (model.practiceMode == FineTuneMode)
-                , onClick (SetPracticeMode FineTuneMode)
-                ]
-                []
-            , label [ for "fine-tune-mode" ] [ text "Fine-tuning Mode" ]
-            ]
+        , practiceModeButtons model
         , case model.practiceMode of
             KeyMode ->
-                keyCheckboxes model.whitelistedKeys
+                keyCheckboxes model
 
             FineTuneMode ->
                 div []
-                    [ pitchClassCheckboxes model.whitelistedPitchClasses
-                    , inversionCheckboxes model.whitelistedInversions
+                    [ inversionCheckboxes model.whitelistedInversions
                     , chordTypeCheckboxes model.whitelistedChordTypes
                     ]
-        , playPause model
-        , if model.debug.enable then
-            debugger
+        ]
 
-          else
-            span [] []
+
+practice : Model -> Html Msg
+practice model =
+    div []
+        [ playPause model
         , case model.selectedChord of
             Just chord ->
                 displayChord
-                    { debug = model.debug.inspectChord
-                    , chord = chord
+                    { chord = chord
                     , firstNote = model.firstNote
                     , lastNote = model.lastNote
                     }
@@ -508,6 +502,16 @@ view model =
         ]
 
 
+view : Model -> Html Msg
+view model =
+    case model.view of
+        Preferences ->
+            preferences model
+
+        Practice ->
+            practice model
+
+
 {-| For now, I'm just dumping things onto the page to sketch ideas.
 -}
 main =