Add User Guide to Screens Using React Joyride

[jimenezz22]

Description

This issue involves implementing a user guide to help players navigate the screens Choose Your Beast, Spawn Beast, and Tamagotchi. The guide should clearly explain the flow the player must follow to start and manage their game. This guide will only be displayed the first time a user enters the game while the session is active.

The guide will be implemented using React Joyride, providing step-by-step hints and instructions on each relevant element in chronological order.

---

Flow Overview

1. Choose Your Beast Screen:

   • User selects a beast from the available options.
   • After selecting, a confirmation step shows the beast's initial stats.

2. Spawn Beast Screen:

   • User sees the selected beast with its initial stats and clicks Spawn to begin the game.

3. Tamagotchi Screen:

   • The user is introduced to the Tamagotchi screen, with instructions on each feature (e.g., Feed, Sleep, Play).
   • The guide explains each button and its functionality in a chronological order.

---

Tasks

React Joyride Integration 🔧

1. Install and configure React Joyride in the project:
   • Add the package using npm install react-joyride or yarn add react-joyride.
   • Set up a reusable JoyrideWrapper component to manage the steps and guide flow.

Choose Your Beast Screen 🐾

1. Highlight the beast selection grid:
   • Guide the user to select one beast by clicking on its card.
   • Explain that each beast has unique stats.
2. Highlight the "Spawn" button:
   • Indicate that clicking this button confirms their choice and proceeds to the next step.

Spawn Beast Screen 🌟

1. Highlight the beast stats panel:
   • Explain the initial stats displayed (e.g., Attack, Defense, Speed, etc.).
2. Highlight the "Spawn New Beast" button:
   • Guide the user to click this button to start the game. (actually made it by clicking in the beast img)

Tamagotchi Screen 🧸

1. Add step-by-step guidance for each button in chronological order:
   • Feed Button: Highlight the button and explain its function.
   • Sleep Button: Highlight the button and describe how it replenishes energy.
   • Clean Button: Highlight the button and explain its purpose.
   • Play Button: Highlight the button to encourage interaction with the beast.
   • Wake Up Button: Highlight and explain this function when the beast is sleeping.
   • Revive Button: Highlight and explain how to use this button if the beast needs revival.
2. Ensure the guide ends with a closing message explaining that the user can now fully interact with their Tamagotchi.

Persistence Logic 📂

1. Add logic to display the guide only during the user's first session:
   • Use a flag stored in localStorage or sessionStorage (e.g., guideShown).
   • Check this flag when the user enters the game.
   • If the guide has already been shown, skip the onboarding process.

---

Deliverables 📦

• A guided tour across the Choose Your Beast, Spawn Beast, and Tamagotchi screens using React Joyride.
• Logic to ensure the guide is shown only once per session.
• A polished and user-friendly step-by-step onboarding experience.

---

Acceptance Criteria ✅

1. The guide successfully highlights each element in the correct sequence on the specified screens.
2. The guide is only shown the first time the user enters the game during an active session.
3. React Joyride is used effectively to implement the guide.
4. All steps include clear and concise instructions aligned with the BabyBeasts theme.
5. No visual or functional disruptions occur during the guide.

---

Additional Notes 📝

• Ensure the styling of the Joyride tooltips matches the game's theme for consistency.
• Test the guide on various devices to ensure responsive behavior.
• Collaborate with the UX/UI team for the tooltip content and visual design.

[Stepcu]

Hi!


I'm Stef, a developer experienced in front-end technologies such as React and Vanilla JS with over 3 years of experience. I'm new to this platform, and I found out about Only Dust through an amazing community called Dojo Coding. I'm very excited to contribute to your project!

The issue you mentioned can be addressed by:

First, I began by installing React Joyride in the project using npm. Once installed, I defined the tour steps, specifying which parts of our UI need highlighting and what instructions to show for each. I set up state management to determine when the tour should run, ensuring it only executes during the user's first game session, tracked via local storage.
Then, I incorporated Joyride into the relevant React component, connecting it with the steps and handling its execution status. I focused on ensuring the CSS selectors correctly map to the UI elements so that Joyride could easily highlight them. After implementing, I ran a series of tests to make sure the tour flows smoothly and guides users efficiently through the key screens.

[zintarh]

Let me handle this issue!

To add a user guide to screens using React Joyride, I would start by installing the package with npm install react-joyride. Then, I’d define the steps for the tour, specifying the target elements and tooltips for each screen or feature. I’d include these steps in my component state or configuration.

Next, I’d wrap the relevant part of my app with the Joyride component and pass the steps as a prop. I’d also handle callbacks to track the progress of the guide or to perform actions after specific steps.

Finally, I’d test the guide thoroughly to ensure it aligns with the design and enhances the user experience.

[Verifieddanny]

May I pick this up?

[starknetbrother]

I'd be happy to do this.

[JoelVR17]

Request for Issue Assignment: "Implement User Guide Using React Joyride"

🔍 Why Assign Me?

I have experience integrating React Joyride and building onboarding flows that guide users through key features of an app. I will ensure the user guide provides a seamless experience for new players without interrupting the game flow.

🔧 How I Will Solve It

1. Install and Configure React Joyride

   • Install the react-joyride package using npm install react-joyride or yarn add react-joyride.
   • Set up a reusable JoyrideWrapper component to manage the guide steps and flow.

2. Implement Guide Steps for Each Screen

   • Choose Your Beast Screen:
     • Highlight the beast selection grid and guide the user to select a beast.
     • Add a step explaining that each beast has unique stats.
     • Highlight the "Spawn" button and indicate the next step after confirming their choice.
   • Spawn Beast Screen:
     • Highlight the beast stats panel and explain the initial stats.
     • Guide the user to click the "Spawn New Beast" button to start the game (this is triggered by clicking the beast image).
   • Tamagotchi Screen:
     • Add guidance for each feature:
       • Feed, Sleep, Clean, Play, Wake Up, and Revive buttons.
       • Ensure each button is highlighted with a clear explanation of its function.
     • End with a closing message explaining that the user can now fully interact with their Tamagotchi.

3. Implement Persistence Logic

   • Use localStorage or sessionStorage to track if the guide has already been shown during the current session.
   • Display the guide only during the first session by checking the flag (guideShown).

4. Styling and Responsiveness

   • Ensure the Joyride tooltips are styled to match the BabyBeasts theme for consistency.
   • Test the guide on various devices to ensure responsive behavior.

5. Collaborate with UX/UI Team

   • Work with the UX/UI team to ensure the tooltip content and visual design align with the game's theme.

6. Test Thoroughly

   • Ensure the guide highlights the correct elements in the right sequence without disrupting gameplay.
   • Test the guide’s functionality, ensuring it only shows once per session.

7. Provide Proof of Completion

   • Share screenshots or a video showing the guide in action.
   • Ensure the guide is polished and user-friendly, with clear and concise instructions.

🚀 Next Steps

Please assign this issue to me so I can begin working on the user guide integration and ensure a smooth onboarding experience for new players. Thank you!

[salazarsebas]

My background


I'm a software engineer and passionate about solving problems, I've been contributing to open source software for a few months and it's an experience that has taught me a lot and I really like to contribute to other projects. I am a member of the Dojo Coding community⛩️. I will dedicate all my effort to complete this issue in the best way.

[captain204]

Could I take over this issue?

[chiscookeke11]

Mind if I try this one?

[RomThpt]

I’d love to work on this task and contribute to the project. I’ll be participating in the ETHDenver hackathon, and I see this as a great opportunity not only to help improve the project but also to grow my skills by tackling this issue.

[ShantelPeters]

May I handle this issue?

[abdegenius]

I’m interested in this one.

[respp]

Hello @jimenezz22! I am Renzo Barcos a Dojo Coding member⛩️

The previous ODHack, I had the pleasure of contributing by designing assets for a baby beast, and I would love to continue as a collaborator on the project, but this time developing.

I’d be happy to take on creating the guide. As a full-stack developer with strong technical programming skills, I specialize in creating clean, efficient, and scalable solutions.

For more: my website: www.renzobarcos.site

Steps to Resolve:

1) Set Up a JoyrideWrapper Component

• Create a JoyrideWrapper component to handle the guide steps and flow.
• Ensure it renders React Joyride and manages the state to trigger the guide.
• Pass the list of steps and control the flow (e.g., show on first session, end after the guide).

2) Define Steps for Each Screen

• For the "Choose Your Beast" screen: define steps to highlight the beast selection and the Spawn button.
• For the "Spawn Beast" screen: define steps to explain the beast stats and the Spawn button.
• For the "Tamagotchi" screen: define steps for each button (Feed, Sleep, Play, etc.), explaining their functions in order.

3) Add Logic for Showing the Guide Once per Session

• Use sessionStorage or localStorage to track if the guide has been shown.
• Set a flag (e.g., guideShown) that prevents the guide from showing again during the current session.

4) Integrate the Guide in the Screens

• Place the JoyrideWrapper component inside each relevant screen (Choose Your Beast, Spawn Beast, Tamagotchi).
• Ensure the component only renders if the guide hasn’t been shown yet in the current session.

5) Customize Styling to Match the Game's Theme

• Ensure that the tooltips and highlights from React Joyride match the game's theme.
• Adjust the styles for consistency with the UI elements in the game.

6) Test the Guide

• Test the guide to ensure it works across different devices and screen sizes.
• Ensure it’s only shown the first time the user enters the game during a session.
• Verify that all steps display correctly and function as expected (tooltips, highlights, etc.).

Estimated Time: 1-2 days

Thank you for the opportunity to contribute!

[Wendyalbert]

Can I jump on this task?

[aniruddhaaps]

Hey there, I'm new to this and want to contribute to the issue.
To address this issue, I will implement a step-by-step guide using React Joyride across the specified screens, highlighting key elements and their functionality. I will configure the guide to display only once per session using a guideShown flag stored in localStorage. The tooltips will be styled to align with the BabyBeasts theme for a polished user experience.

[Agbeleshe]

May I pick this up?