Sleep: Nap

[mariabrock]

User Story

As a user, when I look at the lower right quadrant I will see the sleep quadrant, a progress bar indicating energy, and a button that makes my pet take a short nap.

AC

WHEN the page loads THEN the sleep quadrant will be in the lower right quadrant AND there will be a status bar set to 50 energy AND there will be a button for taking a nap AND when that button is clicked it adds 50 to the status bar

Dev Story

• this lower right quadrant should be defined by a heading that says "Sleep" OR an icon indicating sleep
• put a status bar to the left of the heading/icon
• assign the status bar an invisible variable of "energy"
• the status bar should always be at 50 energy on page load
• under the status bar have a button labeled "nap"
• write a function that adds 50 energy to the status bar if it is clicked

[mariabrock]

Sleep The Sleep component should appear in the lower right quadrant. It should have a private variable called energy. This variable should be set to 50 on page load. This module should have 2 buttons. One should be for a nap and should add 50 to energy when pressed. The other button should be for a deep slumber and add 60 to sleep when pushed.

The quadrant should display the name, energy score, and the two buttons. Each time a button is clicked the quadrant should be re-drawn to show the correct energy score. The Energy score should NEVER be larger than 100.

[mariabrock]