Add pattern selector dropdown with dynamic UI controls

[Copilot]

Fixes #3 by adding a pattern selection dropdown above the Background input that allows users to choose between the 3 available patterns. The UI dynamically updates to show only the relevant controls for each pattern type.

Changes Made

UI Improvements

• Added a Pattern dropdown selector positioned above the Background input as requested
• Styled the dropdown to match the existing dark theme with proper contrast
• Dropdown options clearly labeled as "Pattern 1", "Pattern 2", and "Pattern 3"

Dynamic Control Visibility

The UI now intelligently shows/hides controls based on the selected pattern:

• Pattern 1: Shows Color 1 and Alpha controls (hides Color 2 and Line count)
• Pattern 2: Shows all controls - Color 1, Color 2, Alpha, and Line count
• Pattern 3: Shows only Color 1 control (hides Color 2, Alpha, and Line count since these are handled internally)

Backend Logic

• Modified the draw() method to render the appropriate pattern based on user selection
• Added proper parameter mapping for each pattern's unique interface:
  • Pattern 1: Single color string with alpha
  • Pattern 2: Options object with lineColor and lineCount
  • Pattern 3: RGB color object with automatic alpha handling
• Added event listeners for pattern switching with automatic re-rendering

Screenshots

Pattern Selector Added:

Pattern 1 - Single color with geometric lines:

Pattern 3 - Dense intricate pattern with automatic alpha:

Testing

• ✅ All patterns render correctly with their unique visual characteristics
• ✅ UI controls show/hide appropriately for each pattern
• ✅ Color changes work for all patterns
• ✅ Generate button produces new variations
• ✅ Build process completes without errors
• ✅ Pattern switching is smooth and immediate

This implementation maintains backward compatibility while providing the requested pattern selection functionality. Users can now easily explore all three pattern types and see their distinct visual characteristics.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.