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.
This commit is contained in:
		
							parent
							
								
									4a8f750ba8
								
							
						
					
					
						commit
						a059c32403
					
				
					 1 changed files with 13 additions and 6 deletions
				
			
		| 
						 | 
					@ -7,6 +7,7 @@ import Html.Events exposing (..)
 | 
				
			||||||
import Icon
 | 
					import Icon
 | 
				
			||||||
import Piano
 | 
					import Piano
 | 
				
			||||||
import State
 | 
					import State
 | 
				
			||||||
 | 
					import Tailwind
 | 
				
			||||||
import Theory
 | 
					import Theory
 | 
				
			||||||
import UI
 | 
					import UI
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -32,11 +33,6 @@ render model =
 | 
				
			||||||
    in
 | 
					    in
 | 
				
			||||||
    div []
 | 
					    div []
 | 
				
			||||||
        [ openPreferences
 | 
					        [ openPreferences
 | 
				
			||||||
        , UI.overlayButton
 | 
					 | 
				
			||||||
            { label = buttonText
 | 
					 | 
				
			||||||
            , handleClick = handleClick
 | 
					 | 
				
			||||||
            , isVisible = model.isPaused
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        , case model.selectedChord of
 | 
					        , case model.selectedChord of
 | 
				
			||||||
            Just chord ->
 | 
					            Just chord ->
 | 
				
			||||||
                FlashCard.render
 | 
					                FlashCard.render
 | 
				
			||||||
| 
						 | 
					@ -45,7 +41,18 @@ render model =
 | 
				
			||||||
                    }
 | 
					                    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            Nothing ->
 | 
					            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
 | 
					        , Piano.render
 | 
				
			||||||
            { chord = model.selectedChord
 | 
					            { chord = model.selectedChord
 | 
				
			||||||
            , firstNote = model.firstNote
 | 
					            , firstNote = model.firstNote
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue