Update Start Component with Game Mode Details and UI Enhancements

[Cheelax]

Description

We need to update the Start component to include more detailed information about each game mode (Daily and Normal), including buy-in costs, potential winnings, and remaining time. This update will provide players with comprehensive information before they start a game, all within a single, cohesive component.

Tasks to accomplish

1. Modify the Start component structure

   • Update the component to accept additional props for buy-in, potential winnings, and remaining time
   • Create a more complex UI structure within the component to display all required information
     

2. Create a new UI layout within the Start component

   • Design a layout that includes:
     • Game mode title (Daily/Normal)
     • Potential winnings
     • Buy-in cost (displayed as "Price")
     • Remaining time (for Daily mode)
     • "Play" button
   • Ensure the layout is consistent with the provided UI sketch

3. Implement responsive design

   • Ensure the component looks good and functions well on various screen sizes

4 Add loading states and animations (if necessary)

• Implement loading states for when game mode data is being fetched
• Add subtle animations to improve user experience (e.g., hover effects on the Play button)

5. Update usage in Home component
   • Modify how the Start component is used in the Home screen to accommodate the new structure
   • Ensure proper data flow between Home and Start components

Acceptance Criteria

• The Start component displays all required information (mode, potential winnings, buy-in, remaining time) in a layout consistent with the provided UI sketch
• Daily and Normal modes are clearly distinguished
• The component is responsive and looks good on all screen sizes
• The updated component integrates seamlessly with the Home screen

Please update this issue with any questions or suggestions for improving the implementation of the updated Start component.

[ooochoche]

@Cheelax I’m available to work on this

[Mystic-Nayy]

@Cheelax can I work on this?

[martinvibes]

hello @Cheelax I would love to hop on this issue

[GoSTEAN]

@Cheelax Can I work on this issue ?

[melnikga]

Hi, can I take this?
My profile on OnlyDust: https://app.onlydust.com/u/melnikga

[Zeegaths]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm conversant wuth react and this is a challenge I would like to take on

How I plan on tackling this issue

Start by defining my compoenet and general UI layout. Implement the layout and styling. Then add extra features likem loaders and on hovers. Problably experiment with some background music too

[Ugo-X]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack blockchain Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, and Solidity. My journey with OnlyDust hackathons began at Edition 1, and I've since made 47 contributions across 11 projects. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure.
I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges.
As we surf through Edition 7, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

How I plan on tackling this issue

I will approach the issue of updating the Start component to include more detailed information about each game mode (Daily and Normal), including buy-in costs, potential winnings, and remaining time, as follows:

1. Modify the Start component structure:
   a. I will update the Start component to accept additional props for buy-in, potential winnings, and remaining time.
   b. I will create a more complex UI structure within the component to display all the required information.

2. Create a new UI layout within the Start component:
   a. I will design a layout that includes:

   • Game mode title (Daily/Normal)
   • Potential winnings
   • Buy-in cost (displayed as "Price")
   • Remaining time (for Daily mode)
   • "Play" button
     b. I will ensure the layout is consistent with the provided UI sketch.

3. Implement responsive design:
   a. I will ensure the component looks good and functions well on various screen sizes.
   b. I will use responsive design techniques, such as media queries and CSS grid/flexbox, to create a layout that adapts to different screen sizes.

4. Add loading states and animations (if necessary):
   a. I will implement loading states for when game mode data is being fetched.
   b. I will add subtle animations to improve the user experience, such as hover effects on the "Play" button.

5. Update usage in Home component:
   a. I will modify how the Start component is used in the Home screen to accommodate the new structure.
   b. I will ensure proper data flow between the Home and Start components.

6. Testing and Validation:
   a. I will thoroughly test the updated Start component to ensure it meets the acceptance criteria.
   b. I will validate the component's behavior on various screen sizes and with different game mode data.
   c. I will ensure the component integrates seamlessly with the Home screen and the overall application.

7. Documentation and Code Quality:
   a. I will document the changes made to the Start component, including the new props and the updated UI layout.
   b. I will ensure the code is well-organized, maintainable, and follows the project's coding standards.

Throughout the implementation, I will collaborate with the team, gather feedback, and iterate on the design and functionality of the updated Start component to deliver a high-quality feature that provides players with comprehensive information before they start a game.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @Cheelax

I’m available to work on updating the Start component to include more detailed information about each game mode (Daily and Normal), such as buy-in costs, potential winnings, and remaining time. My name is Benjamin, and I have extensive experience building gamified TypeScript projects, specializing in Next.js, TypeScript, and frontend development. I’ve contributed to various projects, including those on OnlyDust, where I tackled complex UI and component challenges.

Understanding the Issue

The Start component currently lacks detailed information about each game mode. By updating it to include buy-in costs, potential winnings, and remaining time, players will have comprehensive information before starting a game, all within a single, cohesive component.

How I plan on tackling this issue

Modify the Start Component Structure

• Update Props: I will modify the Start component to accept additional props for buy-in, potential winnings, and remaining time.
• Complex UI Structure: I will create a more complex UI structure within the component to display all the required information.

Create a New UI Layout

• Layout Design: I will design a layout that includes:
  • Game mode title (Daily/Normal)
  • Potential winnings
  • Buy-in cost (displayed as "Price")
  • Remaining time (for Daily mode)
  • "Play" button
• Consistency: I will ensure the layout is consistent with the provided UI sketch.

Implement Responsive Design

• Responsiveness: I will ensure the component looks good and functions well on various screen sizes.

Add Loading States and Animations (if necessary)

• Loading States: I will implement loading states for when game mode data is being fetched.
• Animations: I will add subtle animations to improve user experience, such as hover effects on the "Play" button.

Update Usage in Home Component

• Modification: I will modify how the Start component is used in the Home screen to accommodate the new structure.
• Data Flow: I will ensure proper data flow between the Home and Start components.

[josephchimebuka]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @Cheelax I am Joseph Chimebuka I'm a full-stack software developer with 4+ years of experience in crafting innovative products. I've built a range of projects, including https://mattedsgn.vercel.app/ and https://metacrypt.vercel.app/ showcasing my expertise in React, Next.js, and blockchain technologies. I'm also an active contributor onlydust. here's my account https://app.onlydust.com/u/josephchimebuka.

How I plan on tackling this issue

I will meet the submission requirement before creating a PR and I will send the PR asap

[Cheelax]

Hi everyone.
There is a new process for the ODHack, now you must apply to the tasks directly from Onlydust: https://app.onlydust.com/hackathons/odhack-70
We will only look at application made via this process.

[onlydustapp]

The maintainer Cheelax has assigned Ugo-X to this issue via OnlyDust Platform.
Good luck!

[DIWAKARKASHYAP]

i want to work on this issue