Add CSS property autocomplete to Flexbox Froggy

[Felixdiamond]

Feature: CSS Property Autocomplete

This PR introduces an autocomplete feature for CSS Flexbox properties in the Flexbox Froggy game. The goal is to enhance the user experience by providing assistance with property names while maintaining the educational challenge of the game.

Changes:

1. Added autocomplete functionality to the code editor.
2. Implemented suggestion filtering based on user input.
3. Created a UI for displaying autocomplete suggestions.
4. Added keyboard navigation (Tab key) for selecting suggestions.
5. Ensured suggestions only appear for property names, not values.

Implementation Details:

• New methods added to the game object:

  • setupAutocomplete: Sets up event listeners for autocomplete.
  • autocompleteCSSProperties: Filters and returns matching properties.
  • showAutocompleteSuggestions: Displays the suggestion UI.
  • hideAutocompleteSuggestions: Hides the suggestion UI.
  • selectAutocompleteSuggestion: Handles suggestion selection.
  • insertAutocompleteSuggestion: Inserts the selected suggestion into the code.

• Modified the start method to initialize autocomplete.

• Added CSS styles for the autocomplete suggestion UI.

Design Considerations:

• Autocomplete suggestions only appear when typing property names, not values. This maintains the game's challenge while providing helpful assistance.
• The feature uses debouncing to optimize performance during typing.
• Suggestions can be selected via mouse click or Tab key for accessibility.

Testing:

Please test the following scenarios:

1. Typing the beginning of a Flexbox property name shows relevant suggestions.
2. Selecting a suggestion (by click or Tab) correctly inserts the property.
3. No suggestions appear when typing property values (after a colon).
4. Autocomplete doesn't interfere with existing game mechanics.

Future Improvements:

• Consider adding level-specific property suggestions.
• Implement arrow key navigation for suggestions.
• Add unit tests for autocomplete functions.

This feature aims to make Flexbox Froggy more accessible to beginners while preserving its educational value. Feedback and suggestions for improvement are welcome!

[Sayandip-Paul]

yeah