Wave function

[i-be-keggles]

Matrix wave officially finalised. Currently limited to one per page because of astro component limitations, but that's a wider issue we need to address.

Summary by CodeRabbit

Release Notes:

• New Feature: Added a dynamic Matrix Background component that generates a wave effect based on window width. Users can customize the length, amplitude, period, falloff, and flip of the wave.
• Refactor: Replaced the <div id="matrix-bg"> element with the new Matrix Background component in the index page for improved modularity and maintainability.
• Refactor: Moved the Scoreboard and WordCloud components outside the container div in the index page.
• Chore: Removed the commented out MatrixBackground component that is no longer needed.

[coderabbitai[bot]]

Walkthrough

The overall change includes modifications to the MatrixBackground component and the index.astro page. In the MatrixBackground component, various changes were made to improve its functionality, such as extracting props, updating HTML structure, retrieving values dynamically, and adjusting wave generation. In the index.astro page, the <div id="matrix-bg"> element was replaced with a <MatrixBackground> component, and other components were rearranged.

Changes

File	Summary
fe-public/src/components/MatrixBackground.astro	- Added import statement for uuidv4 function - Added Props interface with properties - Extracted prop values from Astro.props - Created getId() function - Modified HTML structure - Added hidden <div> elements - Updated JavaScript code - Modified generateWave() function - Added conditional check - Adjusted probability calculation - Updated generateWaveAndUpdateElement() function - Added style block
fe-public/src/pages/index.astro	- Replaced <div id="matrix-bg"> with <MatrixBackground> component - Rearranged components

"Code changes hop and skip, Matrix waves flip and dip. With UUIDs and hidden divs, The code now dances and lives. Index page reorganized, A new component takes center stage. Bugs are squashed, improvements made, The rabbit's work, a job well played." 🐇✨

Tips

### Chat with CodeRabbit Bot (`@coderabbitai`) - Mention `@coderabbitai` in any *review comment* for bot assistance. - Note: Review comments are made on code diffs or files, not on the PR overview. ### Pause Incremental Reviews - Insert `@coderabbitai: ignore` in the PR description to halt the bot's ongoing reviews. Remove the line to resume. - Additionally, enter `@coderabbitai pause` to halt the bot's ongoing reviews as any issue or review comment. To resume reviews, enter `@coderabbitai resume` as any issue or review comment.

#### Pull Request Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting