Lightsaber Legends is an electrifying online version of Top Trumps that immerses Star Wars fans in the epic galaxy far, far away! This thrilling game lets you pit iconic characters like Luke Skywalker, Darth Vader, and Rey against each other, comparing their unique attributes and abilities. Each duel is a chance to showcase your strategic skills and Star Wars knowledge, making every victory even sweeter. Whether you're a Jedi Master or a Sith Lord, Lightsaber Legends offers an engaging, force-filled experience that no Star Wars aficionado can resist!
Visit the deployed website here.
- User Experience (UX)
- Features
- Technologies Used
- Testing
- Finished Product
- Deployment
- Credits
- Acknowledgements
- The website shoud incorporate a responsive design to make the game accessible on different devices.
- The website should provide an intuitive structure and navigation.
- The website should provide the user with feedback about their game outcome.
- As a user, I want the website to be easy to navigate.
- As a user, I want the game to be fun and engaging.
- As a user, I want to receive feedback about my performance in the game.
- As a user, I want to be able to easily review the rules.
- As a user, I want to be able to play the game on different devices.
The main colors used on the website are:
- Two shades of blue, #007BFF and #0056B3, for the buttons and their hover effects,
- Mustard yellow, #FFDD57, for the headers,
- Gold, #D19E2F, for the text in the instructions pane,
- Off-white, #E2EAEC, for the error message when the user enters an invalid username.
The following fonts from Google Fonts were used on this website:
- Nunito is used as its main font.
- Rammetto One is used for headings.
The fallback font, in case either font isn't loaded correctly, is Sans Serif.
- The site was built using a mobile-first approach.
- Media queries were used to adapt features for larger screens to ensure responsive designs across different screen sizes.
- Each card plays a unique sound effect when drawn.
Board
Game Over Announcement
Victory Announcement
Instructions Popup
- This page is displayed in case of broken or misspelled links and contains a link back to the main page.
-
Google Fonts was used to find suitable font pairings and import the chosen fonts.
-
Font Awesome was used to add icons to create a better visual experience for UX purposes.
-
Favicon was used to create and import a favicon for the website.
-
Microsoft Copilot was used to help generate the About section on the game cards.
-
JPG to PNG was used to convert all images to PNG format.
-
Veed.io was used to convert a screen recording into a gif.
-
Balsamiq was used to create the wireframes during the design phase of the project.
-
GitPod was used for writing code, committing, and then pushing to GitHub.
-
GitHub was used to store the project after pushing.
-
Am I Responsive? was used to ensure responsive design throughout the process and to generate the mockup images at the top of this file.
-
Chrome DevTools was used during the development process for code review and to test responsiveness and accessibility.
-
W3C Markup Validator was used to validate the HTML code.
-
W3C CSS Validator was used to validate the CSS code.
-
JSHint was used to validate the site's JavaScript code.
As a user, I want the website to be easy to navigate.
- Everything is presented on one page to minimize the need to switch between pages.
- Buttons are clearly labelled and easy to find.
As a user, I want the game to be fun and engaging.
- The base game, Top Trump, is well known among players of all ages, allowing even the youngest Star Wars fans to participate in this game.
- The cards are designed using some of the most popular figures across the Star Wars universe, allowing users to reconnect with their favorite characters.
- The game uses sound effects of iconic Star Wars sounds, allowing users to enjoy the experience with multiple senses.
- The game provides feedback and a victory sound to keep the user motivated and engaged.
- The game contains many Easter Eggs in the form of gifs and quotes to keep users entertained.
As a user, I want to receive feedback about my performance in the game.
- The game provides feedback after a game ends in a win, loss, or draw.
- At the end of the game, a victory sound plays.
As a user, I want to be able to easily review the rules.
- The instructions are readily available via the "Instructions" button below the game board.
- The instructions are kept clear and concise.
As a user, I want to be able to play the game on different devices.
- The website is fully responsive and displays well across devices of different sizes.
- The game is fully interactive on touchscreen devices as well as with a mouse or trackpad.
W3C Markup Validator, W3C CSS Validator, and JSHint were used to validate the project to ensure there were no errors in the code.
HTML Validation
-
Home Page
-
404 Page
CSS Validation
JavaScript Validation
Lighthouse Reports Lighthouse in Chrome DevTools was used to measure the quality of each page, focussing on performance, accessibility, best practices, and SEO scores.
Lighthouse Reports
-
Home Page
-
404 Page
Browser Compatibility
| Browser | Outcome | Pass/Fail |
|---|---|---|
| Google Chrome | No issues with appearance, responsiveness, or functionality. | Pass |
| Safari | Issues with appearance, responsiveness, or functionality. * | Pass |
| Mozilla Firefox | No issues with appearance, responsiveness, or functionality. | Pass |
| Microsoft Edge | No issues with appearance, responsiveness, or functionality. | Pass |
| JoyUI Native Browser | No issues with appearance, responsiveness, or functionality. | Pass |
Device Compatibility
| Device | Outcome | Pass/Fail |
|---|---|---|
| MacBook Pro 13" | No issues with appearance, responsiveness, or functionality. | Pass |
| Acer Predator Helios 300 | No issues with appearance, responsiveness, or functionality. | Pass |
| Black Shark PAR-HOA | No issues with appearance, responsiveness, or functionality. | Pass |
| Samsung Galaxy A34 | No issues with appearance, responsiveness, or functionality. | Pass |
| iPhone 13 Mini | Issues with appearance, responsiveness, or functionality. * | Fail |
| iPad 9th Generation | Issues with appearance, responsiveness, or functionality. * | Fail |
*Comment: Cards on the stack display mirrored and face-side up rather than cover-side up.
Common Elements Testing
Name Input
| Feature | Outcome | Pass/Fail |
|---|---|---|
| Player enters a name | Player is greeting by name | Pass |
| Player doesn't enter a name | An message appears | Pass |
Volume Button
| Feature | Outcome | Pass/Fail |
|---|---|---|
| Clicking Volume button | Volume gets muted | Pass |
| Clicking Volume button when muted | Volume gets un-muted | Pass |
Instructions Popup
| Feature | Outcome | Pass/Fail |
|---|---|---|
| Clicking i symbol | Instructions are displayed as popup | Pass |
| Clicking x symbol | Instructions popup is closed | Pass |
Game End Screens
| Feature | Outcome | Pass/Fail |
|---|---|---|
| Game Over Screen | A gif plays in the background | Pass |
| Victory Screen | A gif plays in the background | Pass |
Buttons
| Feature | Outcome | Pass/Fail |
|---|---|---|
| Hovering over a button | Slight color change to provide feedback | Pass |
404 Page
| Feature | Outcome | Pass/Fail |
|---|---|---|
| 404 Page | A broken or misspelled address will redirect the user to the 404 page | Pass |
| 404 Page | A gif plays in the background | Pass |
| Clicking on the Button | The user is taken back to the main page | Pass |
| Page | Desktop Version | Mobile Version |
|---|---|---|
| Home |  |
 |
| 404 |  |
 |
This website was developed using GitPod, which was then committed and pushed to GitHub using the GitPod terminal.
Here are the steps to deploy a website to GitHub Pages from its GitHub repository:
- Log in to GitHub and locate the GitHub Repository.
- At the top of the Repository, locate the Settings button on the menu.
- Scroll down the Settings page until you locate the Pages section.
- Under Source, click the dropdown called None and select Master Branch.
- The page will refresh automatically and generate a link to your website.
All content was written by the developers.
The sounds used on the website were downloaded from Pixabay and Voicy.
The background image was created using Getimg.ai.
The gifs for the Game Over Screen, the Victory Screen, and the 404-Page were dpwnloaded from Gifs.com.
The cards were created using Canva.
- The images were downloaded from Star Wars Database and Wookiepedia
- The About section was written with the help of Microsoft Copilot.
Stack Overflow, CSS Tricks, and W3Schools were consulted on a regular basis for troubleshooting and inspiration.
- To be added.