https://github.com/triptych/puterpets

Adopt, raise, and battle little dungeon creatures!
https://github.com/triptych/puterpets

Last synced: 10 months ago
JSON representation

Adopt, raise, and battle little dungeon creatures!

• Host: GitHub
• URL: https://github.com/triptych/puterpets
• Owner: triptych
• License: mit
• Created: 2024-04-22T19:17:36.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-29T03:15:49.000Z (over 1 year ago)
• Last Synced: 2024-12-31T05:24:50.693Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://puterpets.puter.site/
• Size: 320 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
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:

1. index.html

   - The main entry point of the application.

   - Includes the necessary HTML structure and links to CSS and JavaScript files.

   - Uses the `` for the navigation menu.

   - Displays the home page component (``) with the player's adopted pet, wins/losses, and inventory.

2. style.css

   - Contains the CSS styles for the application.

   - Defines styles for the body, header, navigation menu, and various components.

3. 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.

4. 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.

5. adopt.html

   - Page for adopting a new pet.

   - Includes the `` for the navigation menu.

   - Displays a list of available pets for adoption.

6. field.html

   - Page for exploring the field and collecting random items.

   - Includes the `` 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.

7. 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.

8. 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.

9. 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:

1. Header (header.js)

   - Navigation menu component used across all pages.

   - Provides links to different sections of the application.

2. 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.

3. 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.

4. 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.

5. 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:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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!