This readme provides information about the frontend part of the jetlag.gg game and includes explanation of used technologies and concepts.
- General Information
- Project structure
- Technologies Used
- Local Setup
- Room for Improvement
- Acknowledgements
- Contact
- License
The frontend of the jetlag.gg game was created with use of latest Angular 14 and has modular structure. The main objective is to effectively communicate with backend websocket and rest API and render, animate and control the world and players.
Project is build up on lazy loaded modules which are divided by feature and process and include:
- Auth Module - Logic, views and guards required for the registration process
- Game Module - The main game views and logic
- Game intro Module - The game intro view and required services
- Game 3D Module - 3D game elements and camera handling
- Game cockpit - 2D game elements (player, airport tables, cockpit elements) and logic
- Game over - After game over screen with leaderboard functionality
- Game shared - Components, pipes, utils and models used within other game modules
- Shared Module - Shared utils which include layout components abstract websocket handler and other utils
- Angular 14
- RxJS 7.5
- Angular Three
- Three.js
- Angular Material (without styling, just snackbar, tooltip, dialog logic)
- NGX Mat Queuebar my own library based on Angular Material and legacy NGXQueueBar
- NgRx Component store ( state management on game over screen)
- Other Angular libraries
What are the project requirements/dependencies? Where are they listed? A requirements.txt or a Pipfile.lock file perhaps? Where is it located?
- Windows:
- Install nodejs and npm
- Linux:
sudo apt install nodejs
curl -L https://npmjs.org/install.sh | sudo sh
npm install
(one time after every change of packages)- serve the game locally
npm start
connects to local backendnpm run start:remote
connects to the production public jetlag.gg backend api
- open browser on localhost:4200
The game is currently stable and provides all and more functionalities than initially planned. However, there is always a possible to improve the project hence below I list some possible improvements:
- Improve mobile experience
- Improve cockpit layout fuel tank animations and full dashboard experience
- Improve plane death animation - add destruction effect
- Improve texts (aligned with the camera)
- Improve earth loading (lower resolution for less performant devices) and lights, shadows improvements
- Mobile Safari support
- Plane paid improvements (bigger fuel tank, bigger capacity, styling etc.)
- Improve game ending condition and adjust difficulty
If you would like to contribute to the project, you may propose a solution to some of the above problems and submit the PR, which I will happily verify and include in the project.
Created by @marcindz88 - feel free to contact me!
The project is provided as is and can be used within the bounds of GPLv3 licence.
However please do contact us before you fork or copy the project as we would rather have the improvements of any kind implemented within this project, and you are free to submit pull requests with fixes and new features.