Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature/keyboard-redesign-186 #186

Merged
merged 5 commits into from
Feb 27, 2025

Conversation

Cedarich
Copy link
Contributor

🎨 Refactor and Enhance WordGrid and Keyboard Components with Emojis
Description:
This PR introduces several enhancements and refactors to the WordGrid and Keyboard components to improve functionality, user experience, and code maintainability. Additionally, emojis have been added to enhance the visual appeal of the WordGrid.

Key Changes:
WordGrid Component:

🎨 Implemented a color assignment logic using a predefined set of colors (#939B9F, #CEB02C, #66A060) for each letter typed into the grid.
✨ Added smooth animations for a more interactive user experience.
😄 Integrated emojis to display alongside each character, enhancing the visual feedback.
🔄 Refactored the component to prevent unnecessary re-renders and infinite loops.
Keyboard Component:

💥 Enhanced button animations with ripple and border effects using GSAP for a more dynamic interaction.
📏 Increased spacing between keyboard rows for better usability.
🛠️ Improved event handling for key presses and animations.
AppContext Component:

🔄 Added a resetGrid function to reset the grid state for a new game.
Testing:
✅ Verified that the WordGrid displays letters with the correct colors, animations, and emojis.
✅ Ensured that the Keyboard handles key presses and animations smoothly.
🔄 Tested the resetGrid function to ensure it correctly resets the grid state.
🌐 Conducted cross-browser testing to ensure compatibility.
Additional Notes:
These changes aim to enhance the overall user experience and maintainability of the codebase.
Please review the changes and provide feedback or approval for merging.
📦 Ensure GSAP is installed by running npm install gsap to enable animations.

Copy link

vercel bot commented Feb 26, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
de-wordle ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 27, 2025 2:04pm

@Cedarich Cedarich changed the title feature/keyboard-redesign-131 feature/keyboard-redesign-186 Feb 26, 2025
@BigBen-7 BigBen-7 merged commit f6b684d into Lead-Studios:main Feb 27, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants