Remember Tamagotchi's? They looked something like this:
In case you lived under a rock in the 90s a Tamagotchi was the first "digital virtual pet". It had three buttons and 8 different menus. After activating it an egg would hatch and then you would be responsible for keeping your pet alive. Your pet could do things like eat, sleep, play, get sick, get medicine, and poop. They sold over 82 million of them before 2017.
For this HW we are going to create a simplified version of a Tamagotchi.
If you are worried you version will never be as good as the original you can still buy yourself a real one HERE
This project will be built with modules that are laced together with webpack.
To get started run:
$ sudo npm install
$ npm start
Follow the instructions from the Webpack template to ensure you make all the updates to get the project started.
Your index.html file should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tamagotchi</title>
</head>
<body>
<div id="app">
<div id="progress"></div>
<div id="eat" class="quad"></div>
<div id="play" class="quad"></div>
<div id="fight" class="quad"></div>
<div id="sleep" class="quad"></div>
<div id="pet"></div>
</div>
</body>
</html>You may NOT add any other code to this file. Any other elements that you want in the dom must use a domStringBuilder and printToDom functions to appear.
Your code should be:
- Error free
- Amazingly styled
- Made up of re-useable functions
- Clean
Your website should be divided into quadrants. Each quadrant should have a different background color and represents a different activity that you can perform. The four activities are: eat, sleep, play, and fight. Each of these activities should be a component with a corresponding css file. Find out more about each component below.
The Eat component should appear in the upper left quadrant. It should have a private variable called full. This variable should be set to 100 on page load. This module should have 2 buttons. One should be a healthy food that adds 10 to full when pressed. The other button should be an unhealthy food that subtracts 3 from full when pushed.
The quadrant should display the name, fullness score, and the two buttons. Each time a button is clicked the quadrant should be re-drawn to show the correct fullness score. The Full score should NEVER be larger than 100.
The Play component should appear in the upper right quadrant. It should have a private variable called fun. This variable should be set to 50 on page load. This module should have 2 buttons. One should be a super fun activity that adds 50 to fun when pressed. The other button should be a slightly fun activity that adds 2 to fun when pushed.
The quadrant should display the name, fun score, and the two buttons. Each time a button is clicked the quadrant should be re-drawn to show the correct fun score. The Fun score should NEVER be larger than 100.
The Fight component should appear in the lower left quadrant. It should have a private variable called strength. This variable should be set to 100 on page load. This module should have 2 buttons. One should be for running away (bravely) that adds 1 to strength when pressed. The other button should be for committing violence and should subtract 10 from strength when pushed.
The quadrant should display the name, strength score, and the two buttons. Each time a button is clicked the quadrant should be re-drawn to show the correct strength score. The Strength score should NEVER be larger than 100.
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.
Here are some possible stretch goals. Feel free to try any that interest you or make up your own.
The overall health of your Tamagochi should be based on the average of all four attributes (energy, strength, full, fun). Use the div with the id of progress to display this overall score in some way.
Your pet deserves a picture. Write a domStringBuilder that puts it in the div with an id of pet. Make the styling look super cool.
Extra Bonus: Let the user enter in a url for a picture on page load - make that the image that displays.
Right now we have hard coded all the buttons to increase or decrease but specific amounts. This is kinda lame. Make all the buttons increase of decrease based on random number generators.
Something should happen when your energy, strength, full, fun, or overall heath goes to 0. Decide what happens and make it work.
Currently each module operates independently. This isn't really realistic. Modify your code so the modules interact. Here are some sample interactions:
- When Fullness goes up energy should go down (FOOD COMA)
- When Fullness goes down strength should down
- When Strength goes down energy, full, and fun go down
- When Strength goes up energy goes up.
- When energy goes down fun goes down