Interactive Minigame Selection Modal 🎮

[juandiegocv27]

🌟 Objective

Create an interactive modal that appears when the "Play" button on the BabyBeast is clicked. This modal will allow players to choose, select, and launch minigames in an intuitive and engaging way.

🛠️ Tasks

1. UI/UX Design

🎨 Design Elements

• Create a responsive modal with title "Choose a Minigame"
• Implement list of minigames featuring icons, names, and gameplay descriptions
• Add "Cancel" button for modal dismissal

🎬 Interactivity

• Implement smooth animations for modal open/close transitions
• Add highlight effects for minigame hover and selection states
• Include loading indicator during minigame launch

💡 Accessibility

• Ensure comprehensive keyboard and touch input navigation
• Maintain inclusive design principles throughout

2. Development

🚀 Core Implementation

• Create MinigameSelectionModal component
• Trigger modal on BabyBeast "Play" button click
• Pass relevant BabyBeast data (stats, rewards) to modal

🗂️ Performance Optimization

• Implement dynamic minigame loading on selection
• Ensure efficient resource management

❌ Modal Management

• Implement clean modal state reset on cancellation
• Ensure proper cleanup of resources

📊 Analytics Integration

• Track modal interactions (open/close events)
• Monitor minigame selection patterns

✅ Acceptance Criteria

• Modal opens correctly on "Play" button click
• Minigames display with complete information (icons, names, descriptions)
• Dynamic loading works with visible loading indicator
• Cancel functionality properly resets modal state
• Interface maintains responsiveness and user-friendliness

This implementation is for this issues: #61 #58 #56

[zintarh]

I'd like to handle this task.

I would design a visually appealing modal that lists available games with icons or thumbnails. I’d add interactive elements like hover effects and selection animations for an engaging user experience. Finally, I’d ensure the modal integrates seamlessly with the app's logic, allowing users to select and launch a game effortlessly

[Verifieddanny]

Can I be assigned to this?

[Villarley]

I’m Santiago Villarreal Arley, a proactive and communicative developer with a strong background in both front-end and back-end Web3 development. As a proud Diamond Contributor and member of Dojo Coding, I have collaborated on various impactful projects built on StarkNet and Stellar, focusing on creating scalable and efficient blockchain-based solutions.

Notably, I won the Buildathon Web3 Hackathon for my work on BuildMyEvent, an open-source blockchain project designed to solve real-world challenges by integrating innovative and user-centric features.

I am committed to adding my expertise in front-end and back-end development to deliver high-quality results. My development process emphasizes verified commits, ensuring traceability and maintaining best practices in secure and transparent code contributions.
I would like to contribute again to the project, it is a great experience.
ETA: 24 hours

[starknetbrother]

Can I handle this task?

[chiscookeke11]

Is it okay if I tackle this?

[ShantelPeters]

May I pick this up?

[abdegenius]

Can I start working on this?

[Wendyalbert]

May I pick this up?

[aniruddhaaps]

Hey thee, I'm a software developer with experience in react and want to actively participate in solving the issue.
To solve this issue, I will develop the MinigameSelectionModal component with a responsive design and smooth animations. It will feature an interactive list of minigames with icons, names, and descriptions, ensuring dynamic loading and proper cleanup on cancellation. The modal will support accessibility, responsive touch/keyboard navigation, and integrate analytics to track user interactions and minigame selections.

[Nwanne-san]

Hello my name is Nwanne. My expertise lies in Front-End Development, with a strong command of TypeScript, JavaScript Tailwind, React and Next

I am very interested in contributing to this project by building this feature and would like to kindly request access to this item. I believe my skills can add value to the team, and I’m eager to start collaborating.

[drakkomaximo]

[FE]: Interactive Minigame Selection Modal

Hi @juandiegocv27 and everyone!, I'm a Dojo Coding member⛩️

I’d be happy to participate in this issue. With over 5 years of experience in frontend development, I’ve worked on similar projects and can ensure a clean, user-friendly, and well-structured implementation.

Steps to Resolve:

1) Update Memory Game with Minigame Selection Modal:

• rigger Mechanism: Link the "Play" button in the BabyBeast UI to open the MinigameSelectionModal component.
• Modal Design Integration: Incorporate the previously designed memory game as one of the minigame options in the modal.

2) Enhance the Modal's Features:

• Minigame Description: Display the memory game's concept, mechanics, and progression details.
• Hover Effects: Highlight the memory game option visually when hovered or selected.

3) Dynamic Loading and Interactions:

• Dynamic Memory Game Loading: Ensure the memory game loads dynamically when selected, showing a loading indicator during initialization.
• Passing Data: Pass BabyBeast stats or rewards into the memory game to personalize gameplay.

4) Testing and Optimization:

• User Flow Validation: Verify the modal opens seamlessly, displays minigame details (icons, descriptions), and allows smooth selection.
• Performance Check: Confirm dynamic loading is efficient and the modal resets correctly upon cancellation.

---

Estimated Time: 2-4 days

Let me know if I can start working on this!

[drakkomaximo]

Frontend setup ready