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

Updated Alignments of buttons and improved layout #528

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

Arshia-04
Copy link

What does this PR do?

This PR fixes the alignment and overlapping of elements like theme changing switch, music volume controller, sign-up and player instructions buttons, Start button, feedback button, Difficulty level slector button and displays like live-life, live-score, high-score and game-info. The animated snowflakes background was replaced with solid dark blue background. The duplicates of start button, game-info display, theme changing switch and music volume controller were removed from the earlier UI. All the unnecessary duplicates of the elements present inside the game container were removed, along with blurred background. The "Orbitron" font has been applied to the entire UI. The function of Start button was also fixed, where earlier it was not working and the game was not displaying when clicked. The colours of sign-up button, player instructions button, Start button were enhanced a bit with some hover effect.

Fixes #444 (UI/UX Improvements: Overlapping Elements, Readability, and Layout Issues)

game2 [OLDER UI]

2024-10-25 (2) [NEW UI]

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • Chore (refactoring code, technical debt, workflow improvements)

How should this be tested?

  1. Test A: Start Button Fix
    • Ensure that the game starts properly when the "Start Game" button is clicked.
    • Verify that the game interface displays correctly without errors.
    • Open the game interface in the browser.
    • Click on the "Start Game" button.
    • Confirm that the game starts and no errors appear in the console.
  2. Test B: UI layout & alignment
    • Verify that all the elements, buttons and display elements are correctly aligned across desktop view.
    • Open the game in a desktop view.
    • Verify that all UI elements are aligned vertically in the right-hand section (music volume, light mode, instructions, signup).
    • Confirm that the feedback button is positioned correctly at the bottom-right corner.

Mandatory Tasks

  • Self-reviewed the code and removed unnecessary codes.
  • Verified the working of "Start Game" button.
  • Checked alignments of UI elements.

Copy link

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our chaotic CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

Copy link

netlify bot commented Oct 24, 2024

Deploy Preview for alienid ready!

Name Link
🔨 Latest commit b5d6e71
🔍 Latest deploy log https://app.netlify.com/sites/alienid/deploys/671aaed1b8f8f60008cd64f1
😎 Deploy Preview https://deploy-preview-528--alienid.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Oct 24, 2024

Deploy Preview for thunderous-starlight-9c463d ready!

Name Link
🔨 Latest commit b5d6e71
🔍 Latest deploy log https://app.netlify.com/sites/thunderous-starlight-9c463d/deploys/671aaed11f5ca200081ea809
😎 Deploy Preview https://deploy-preview-528--thunderous-starlight-9c463d.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

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.

UI/UX Improvements: Overlapping Elements, Readability, and Layout Issues
1 participant