https://github.com/ali-sdg90/aim-lab-ts

Customizable TypeScript aiming game for precision training
https://github.com/ali-sdg90/aim-lab-ts

aimlab fun-project typescript typescript-game

Last synced: about 13 hours ago
JSON representation

Customizable TypeScript aiming game for precision training

• Host: GitHub
• URL: https://github.com/ali-sdg90/aim-lab-ts
• Owner: Ali-Sdg90
• License: mit
• Created: 2023-11-02T19:23:45.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-22T12:38:27.000Z (11 months ago)
• Last Synced: 2023-12-22T14:03:32.653Z (11 months ago)
• Topics: aimlab, fun-project, typescript, typescript-game
• Language: TypeScript
• Homepage: https://ali-sdg90.github.io/Aim-Lab-TS/
• Size: 10.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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