Run breathing exercise

[magdalenakierat]

Value proposition

As a user, I want to run the existing breathing exercises so that I get a visual support while following a certain breathing pattern.

Description

Acceptance criteria

• [x] Screen 1: All existing cards (not created by user) from the category "Atemübung" include a "play" action icon.
• [x] "Play" action icon leads to animation page (Screen 2).
• [x] Animation starts automatically.
• [x] While showing the word "einatmen", the circle gets larger (Screen 2).
• [x] After x seconds (depending on the breathing pattern in the description) the circle reaches it's largest state.
• [x] While showing the word "ausatmen", the circle gets smaller (Screen 3).
• [x] After x seconds (depending on the breathing pattern in the description) the circle reaches it's smallest state.
• [x] There is a timer that starts at x minutes (depending on the duration set for the exercise) and counts down.
• [x] When the timer reaches the 00:00 state, the exercise is canceled and Screen 1 is displayed again.
• [x] By clicking on the screen, the exercise is canceled and screen 1 is displayed again.

Tasks

• [x] Create new feature branch "breathinganimation"
• [x] Create component RunButton
• [x] Update component Card
• [x] Create component BreathingAnimation
• [x] Create component CountDownTimer
• [x] React Router
• [x] Write tests

[ahohnsen]

Hey Magdalena,

Nice job! Maybe it would be nice to have a cancel-button instead of canceling the exercise by clicking on the screen. 🤔 Or at least there should be an information displayed to the user that the exercise can be canceled by clicking on the screen. :)

[chris-yooo]

hey Magda i look at your second edit function US there is a edit Button at same position ? or you want to put the Buttons together or ?

11

[ahohnsen]

hey Magda i look at your second edit function US there is a edit Button at same position ? or you want to put the Buttons together or ?

11

As far as I understand, only the exercises in the category "breathing exercises" which are not created by the user will have a play-button. As well the user can only edit self-created exercises, therefore there should not be a button placement conflict. 🤔

[magdalenakierat]

Hey Magdalena,

Nice job! Maybe it would be nice to have a cancel-button instead of canceling the exercise by clicking on the screen. 🤔 Or at least there should be an information displayed to the user that the exercise can be canceled by clicking on the screen. :)

Hey Andrea, thanks for your feedback! 🤗 For sure adding a cancel/return button would enhance the usability. I wanted to keep this issue small, that's why I haven't added this feature. But maybe I will do, since this should not be too time consuming.

[magdalenakierat]

hey Magda i look at your second edit function US there is a edit Button at same position ? or you want to put the Buttons together or ?

11

As far as I understand, only the exercises in the category "breathing exercises" which are not created by the user will have a play-button. As well the user can only edit self-created exercises, therefore there should not be a button placement conflict. 🤔

Yes, that's right, this is only for exercises, which are not created by the user. So no button overload. 😉