From a059c32403b2baa8298fef39ce39ff3324e65944 Mon Sep 17 00:00:00 2001 From: William Carroll Date: Sun, 19 Apr 2020 18:51:42 +0100 Subject: Display "Get ready..." message before practicing This is a temporary solution. Ideally I would like to handle this with the following: - Show the flashcard for a chord shortly after beginning a practice session - Display a small 3...2...1... countdown timer immediately after beginning a practice session I need to dig more deeply into Elm's Time module and subscriptions to better understand how to properly solve this problem. In the meantime, please tolerate this short-term solution. --- website/sandbox/learnpianochords/src/Practice.elm | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) (limited to 'website') diff --git a/website/sandbox/learnpianochords/src/Practice.elm b/website/sandbox/learnpianochords/src/Practice.elm index e92b163920ab..5d87bcee501e 100644 --- a/website/sandbox/learnpianochords/src/Practice.elm +++ b/website/sandbox/learnpianochords/src/Practice.elm @@ -7,6 +7,7 @@ import Html.Events exposing (..) import Icon import Piano import State +import Tailwind import Theory import UI @@ -32,11 +33,6 @@ render model = in div [] [ openPreferences - , UI.overlayButton - { label = buttonText - , handleClick = handleClick - , isVisible = model.isPaused - } , case model.selectedChord of Just chord -> FlashCard.render @@ -45,7 +41,18 @@ render model = } Nothing -> - span [] [] + -- Here I'm abusing the overlayButton component to render text + -- horizontally. I should support a UI component for this. + UI.overlayButton + { label = "Get ready..." + , handleClick = State.DoNothing + , isVisible = True + } + , UI.overlayButton + { label = buttonText + , handleClick = handleClick + , isVisible = model.isPaused + } , Piano.render { chord = model.selectedChord , firstNote = model.firstNote -- cgit 1.4.1