Styled Container - Copy this React, Mui Component to your project
Prompt: Create a Tetris Game with Three Screens Overview: Create a fully functional Tetris game using JavaScript and HTML/CSS. The game should have three main components: Start Screen, Game Screen, and Credits Screen. Components: A. Start Screen: Create a Start Screen with the following features: A centered title that reads "Tetris". A "Play" button that starts the game when clicked. A "Credits" button that navigates to the Credits Screen. A background image or color that fits the theme of Tetris. Use conditional rendering to display this screen only when the game is not in progress. B. Game Screen: Develop the main Tetris gameplay area with the following specifications: A 10x20 grid where Tetris blocks will fall and stack. Use object mapping to render each Tetris block shape (I, J, L, O, S, T, Z) with different colors. Implement game mechanics including block falling, rotation, left/right movement, and quick drop. Collision detection to handle blocks stacking and line clearing. A scoring system that awards points for each cleared line. A "Pause" button that halts the game when clicked. A "Restart" button that resets the game state and goes back to the Start Screen. Display the next block preview and current score on the side of the game grid. Use conditional rendering to ensure this screen is shown only during active gameplay. C. Credits Screen: Create a Credits Screen with the following elements: A list of contributors or developers involved in the creation of the game. A "Back" button that returns to the Start Screen. Use conditional rendering to display this screen only when the Credits button is clicked on the Start Screen. Add any additional graphics or styling that match the game's overall design aesthetic. Interactions and Animations: Add animations for the Tetris blocks falling and rotating. Use hover effects on buttons, such as changing their color or adding a shadow. For the logo or title, add a hover effect that makes it slightly larger or adds a glow effect. When a block is added to the cart, use conditional rendering to display a modal card with minified product information (if applicable, adapt this to a Tetris context for any bonuses or special items). Advanced Features (Optional): Implement sound effects for block movements, line clears, and game over. Add a high-score system that stores the top scores in local storage. Make the game responsive for different screen sizes, ensuring all elements adjust accordingly. Include keyboard controls for block movement and rotation (left, right, down, rotate). Technical Considerations: Ensure all components are modular and reusable. Use JavaScript ES6+ syntax, including arrow functions, const/let, and template literals. Align and justify all elements within the grid and on the different screens using CSS Flexbox or Grid. Optimize the game performance to handle all game logic efficiently. Handle edge cases such as a full grid and ensure the game resets correctly.
