Aim-Lab-TS🎯

Overview

Aim-Lab-TS is a meticulously crafted web-based game designed to enhance your aiming skills. Built using a combination of HTML, SCSS, CSS, JavaScript and TypeScript, this project offers a dynamic and engaging experience for users seeking to refine their precision.

Features

• Customizable Settings: Begin your training by adjusting various parameters in the settings page. Modify the number of targets and bombs, enable or disable movement for targets and bombs, set the game timer, and fine-tune other gameplay aspects according to your preference.

• Real-time Analytics: Track your performance with real-time analytics displayed at the end of each game. View your points, accuracy, game timer, and hits per 10 seconds, providing valuable insights into your progress.

• Performance History: A detailed table showcases your past performances, allowing you to monitor your improvement over time. The data is conveniently stored in local storage for easy access.

• Themes and Animations: Choose between two themes—white and dark—to suit your visual preference. Enjoy smooth and captivating animations that contribute to an immersive gaming experience.

• Dynamic Soundtracks: Immerse yourself in the game with a set of carefully curated soundtracks. From the countdown to the game start, hitting targets, activating bombs, to the game's conclusion, each sound enhances the overall gaming atmosphere.

• User-Friendly Interface: The intuitive user interface includes a volume control button, a reload button for restarting the game without reloading the page, and a settings button for easy customization.

Setting Menu

End Screen Menu

Development Journey

This project serves as a testament to the developer's commitment to mastering TypeScript. The development process spanned a month, and I recorded almost every second of its development. In the end, I had 36 hours of footage, which I then compressed into a 2-minute time-lapse, allowing you to witness how the project came to life. This time-lapse is available on YouTube.

Live Demo

Experience Aim-Lab-TS live! Demo Here

Conclusion

Aim-Lab-TS is not just a game. it's a carefully crafted tool for skill improvement. With a focus on user experience, customization, and developer mastery. Explore, play, and witness your progress in the pursuit of precision. Happy coding! ❤️

CI/CD Process

This project uses GitHub Actions for Continuous Integration (CI) and Continuous Deployment (CD). The CI/CD pipeline is defined in the .github/workflows/ci-cd.yml file.

Steps in the CI/CD Pipeline

• Build: This step checks out the repository, sets up Node.js, installs dependencies, and builds the project using the npm run build command.
• Test: This step runs after the build step. It checks out the repository, sets up Node.js, installs dependencies, and runs tests using the npm test command.
• Deploy: This step runs after the test step. It checks out the repository, sets up Node.js, installs dependencies, and deploys the project to GitHub Pages using the npm run deploy command.

Running CI/CD Processes Locally

You can run the CI/CD processes locally using the following commands:

• Build: npm run build
• Test: npm test
• Deploy: npm run deploy