Project: PuterPets
Description: PuterPets is a web-based virtual pet game where players can discover, adopt, trade, and battle unique dungeon monsters. The game features include pet adoption, battling, item collection, and a home page displaying the player's adopted pet, wins/losses, and inventory.
Files:
-
index.html
- The main entry point of the application.
- Includes the necessary HTML structure and links to CSS and JavaScript files.
- Uses the
<header-component>
for the navigation menu. - Displays the home page component (
<home-page>
) with the player's adopted pet, wins/losses, and inventory.
-
style.css
- Contains the CSS styles for the application.
- Defines styles for the body, header, navigation menu, and various components.
-
header.js
- Defines the
Header
web component for the navigation menu. - Includes links to different pages of the application.
- Applies styles to the header and navigation menu items.
- Implements hover effects for menu items, such as skewing and enlarging.
- Defines the
-
home-page.js
- Defines the
HomePage
web component for the home page. - Displays the player's adopted pet, wins/losses, and inventory.
- Retrieves data from localStorage for the adopted pet, wins/losses, and inventory.
- Renders the pet information and inventory items in a card format.
- Defines the
-
adopt.html
- Page for adopting a new pet.
- Includes the
<header-component>
for the navigation menu. - Displays a list of available pets for adoption.
-
field.html
- Page for exploring the field and collecting random items.
- Includes the
<header-component>
for the navigation menu. - Displays a question mark that, when clicked, reveals a random item with its attributes.
- Stores the collected items in the player's inventory in localStorage.
-
battle.js
- Defines the
BattleComponent
web component for pet battles. - Displays the player's pet on the left and a random opponent pet on the right.
- Implements a battle system where pets take turns attacking each other.
- Updates the pets' HP and displays win/lose messages based on the battle outcome.
- Stores the battle results (wins/losses) and updated pet HP in localStorage.
- Defines the
-
petdata.js
- Contains the
petdata
object with an array of pet data. - Each pet object includes properties like id, name, iconUrl, and stats (HP and mana).
- Used as a data source for displaying pet information and initializing battles.
- Contains the
-
items.json
- JSON file containing an array of random fantasy items.
- Each item object includes properties like name, goldValue, foodValue, and attackValue.
- Used as a data source for generating random items in the field.
Components:
-
Header (header.js)
- Navigation menu component used across all pages.
- Provides links to different sections of the application.
-
HomePage (home-page.js)
- Displays the player's adopted pet, wins/losses, and inventory on the home page.
- Retrieves data from localStorage and renders it in a card format.
-
PetBox (petbox.js)
- Displays a pet's information, including its icon, name, HP, and mana.
- Allows adopting a pet and storing the adopted pet data in localStorage.
- Updates the pet's HP based on battle results.
-
BattleComponent (battle.js)
- Implements the pet battle functionality.
- Displays the player's pet and a random opponent pet.
- Simulates attacks between pets and updates their HP.
- Determines the winner based on the remaining HP and stores the results in localStorage.
-
ItemReveal (item-reveal.js)
- Displays a question mark that, when clicked, reveals a random item from the items.json file.
- Animates the question mark and displays the item's attributes.
- Stores the revealed item in the player's inventory in localStorage.
Functionality:
-
Pet Adoption:
- Players can visit the adopt page to view a list of available pets.
- Clicking on a pet allows the player to adopt it and store the pet data in localStorage.
-
Pet Battles:
- Players can engage in battles with their adopted pet against a random opponent pet.
- The battle system involves pets taking turns attacking each other.
- The winner is determined based on the remaining HP, and the results are stored in localStorage.
-
Item Collection:
- Players can explore the field by clicking on a question mark.
- Clicking the question mark reveals a random item with its attributes.
- The collected items are stored in the player's inventory in localStorage.
-
Home Page:
- The home page displays the player's adopted pet, wins/losses, and inventory.
- The data is retrieved from localStorage and rendered in a card format.
- The pet's HP is updated based on the battle results.
-
Navigation:
- The header component provides a navigation menu to access different pages of the application.
- Hovering over the menu items applies visual effects, such as skewing and enlarging.
Dependencies:
- Web Components: The application utilizes custom web components for modularity and reusability.
- localStorage: Used for storing and retrieving data, such as the adopted pet, wins/losses, and inventory.
- JSON: Used for storing and retrieving data from external files, such as petdata.js and items.json.
That's a comprehensive overview of the PuterPets project. By providing this document to a new session, the assistant will have a clear understanding of the project structure, components, functionality, and dependencies. Let me know if you have any further questions!