Implement Blockopoly Game Room Settings

[onlydustapp]

📚 Overview

Implement the Blockopoly game room settings UI. This feature will allow players to define the game rules when they join or create a game room. It is crucial that the UI is pixel-perfect and fully aligned with the Figma design specifications.

🎯 Requirements

• Game Room Settings Section:

  • Create a dedicated section where players can set and customize game rules.
  • Include all necessary input fields and controls as shown in the Figma design for Game Room Settings.

• State Management:

  • Use the Context API to manage all states related to the game room settings.
  • Ensure that state updates correctly reflect player changes.

• Pixel Perfect UI:

  • Ensure the user interface exactly matches the Figma design.
  • Implement responsive design practices where applicable.

• Play Button UI:

  • On click of the Play button, transition to a UI designed as per the Figma design for Play UI.

• Build Requirements:

  • Ensure that npm run build passes without any errors.

🔧 Technical Considerations

• Implement the feature as part of the existing Next.js project (bootstrapped via create-next-app).
• Follow best practices for using the Context API in React/Next.js.
• The feature should be easily maintainable and extensible for future game rule additions.
• Verify all UI components match the designs pixel-per-pixel.

✅ Definition of Done

1. The game room settings UI is implemented and matches the provided Figma designs.
2. State management for the game settings is handled using the Context API.
3. The Play button triggers the transition to the designed UI.
4. The feature passes npm run build with no issues.

Let's ensure a fun and intuitive experience for the players! 🎮🚀

[OSEH-svg]

I'd love to give this a go.