2 files changed, 34 insertions, 44 deletions
diff --git a/website/sandbox/learnpianochords/src/Preferences.elm b/website/sandbox/learnpianochords/src/Preferences.elm
index 6594e6c52e71..59e6c8234c13 100644
--- a/website/sandbox/learnpianochords/src/Preferences.elm
+++ b/website/sandbox/learnpianochords/src/Preferences.elm
@@ -37,42 +37,35 @@ selectKey model { relativeMajor, relativeMinor } =
         ]
 
 
-chordTypeCheckboxes : List Theory.ChordType -> Html State.Msg
-chordTypeCheckboxes chordTypes =
-    ul []
-        (Theory.allChordTypes
-            |> List.map
-                (\chordType ->
-                    li []
-                        [ label [] [ text (Theory.chordTypeName chordType) ]
-                        , input
-                            [ type_ "checkbox"
-                            , onClick (State.ToggleChordType chordType)
-                            , checked (List.member chordType chordTypes)
-                            ]
-                            []
-                        ]
-                )
-        )
-
-
-inversionCheckboxes : List Theory.ChordInversion -> Html State.Msg
-inversionCheckboxes inversions =
-    ul []
-        (Theory.allInversions
-            |> List.map
-                (\inversion ->
-                    li []
-                        [ label [] [ text (Theory.inversionName inversion) ]
-                        , input
-                            [ type_ "checkbox"
-                            , onClick (State.ToggleInversion inversion)
-                            , checked (List.member inversion inversions)
+inversionCheckboxes : State.Model -> Html State.Msg
+inversionCheckboxes model =
+    div []
+        [ h2
+            [ [ "text-gray-500"
+              , "text-center"
+              , "pt-10"
+              , Responsive.h2
+              ]
+                |> Tailwind.use
+                |> class
+            ]
+            [ text "Select inversions" ]
+        , ul
+            [ [ "flex", "justify-center" ] |> Tailwind.use |> class ]
+            (Theory.allInversions
+                |> List.map
+                    (\inversion ->
+                        li []
+                            [ UI.textToggleButton
+                                { label = Theory.inversionName inversion
+                                , handleClick = State.ToggleInversion inversion
+                                , classes = []
+                                , toggled = List.member inversion model.whitelistedInversions
+                                }
                             ]
-                            []
-                        ]
-                )
-        )
+                    )
+            )
+        ]
 
 
 keyCheckboxes : State.Model -> Html State.Msg
@@ -150,5 +143,6 @@ render model =
             { tempo = model.tempo
             , handleInput = State.SetTempo
             }
+        , inversionCheckboxes model
         , keyCheckboxes model
         ]
diff --git a/website/sandbox/learnpianochords/src/State.elm b/website/sandbox/learnpianochords/src/State.elm
index 0c23d3a5a988..3b9d29c34443 100644
--- a/website/sandbox/learnpianochords/src/State.elm
+++ b/website/sandbox/learnpianochords/src/State.elm
@@ -51,7 +51,7 @@ init =
             ( Theory.C3, Theory.C6 )
 
         inversions =
-            Theory.allInversions
+            [ Theory.Root ]
 
         chordTypes =
             Theory.allChordTypes
@@ -73,7 +73,7 @@ init =
     , tempo = 10
     , firstNote = firstNote
     , lastNote = lastNote
-    , view = Overview
+    , view = Preferences
     , showFlashCard = True
     }
 
@@ -158,13 +158,9 @@ update msg model =
             ( { model
                 | whitelistedInversions = inversions
                 , whitelistedChords =
-                    Theory.allChords
-                        { start = model.firstNote
-                        , end = model.lastNote
-                        , inversions = inversions
-                        , chordTypes = model.whitelistedChordTypes
-                        , pitchClasses = model.whitelistedPitchClasses
-                        }
+                    model.whitelistedKeys
+                        |> List.concatMap Theory.chordsForKey
+                        |> List.filter (\chord -> List.member chord.chordInversion inversions)
               }
             , Cmd.none
             )