Our own Pong on the Web
This project is about doing something you’ve never done before. Remind yourself the beginning of your journey in computer science. Look at you now. Time to shine!
This project is about creating a website for the mighty Pong contest! Thanks to your website, users will play Pong with others. You have to provide a nice user interface and real-time multiplayer online games!
For this team project, I teamed up with Markus, Florian and Sanjok.
This project was designed to be hosted on a live server and can therefore not be easily tried out locally.
Your project has to comply with the following rules:
- You are free to develop the site, with or without a backend.
- If you choose to include a backend, it must be written in pure Ruby. However, this requirement can be overridden by the Framework module.
- If your backend or framework uses a database, you must follow the constraints of the Database module.
- The frontend should be developed using pure vanilla Javascript . However, this requirement can be altered through the FrontEnd module.
- Your website must be a single-page application. The user should be able to use the Back and Forward buttons of the browser.
- Your website must be compatible with the latest stable up-to-date version of Google Chrome.
- The user should encounter no unhandled errors and no warnings when browsing the website.
- Everything must be launched with a single command line to run an autonomous container provided by Docker . Example : docker-compose up --build
The main purpose of this website is to play Pong versus other players.
- Therefore, users must have the ability to participate in a live Pong game against another player directly on the website. Both players will use the same keyboard. The Remote players module can enhance this functionality with remote players.
- A player must be able to play against another player, but it should also be possible to propose a tournament. This tournament will consist of multiple players who can take turns playing against each other. You have flexibility in how you implement the tournament, but it must clearly display who is playing against whom and the order of the players.
- A registration system is required: at the start of a tournament, each player must input their alias name. The aliases will be reset when a new tournament begins. However, this requirement can be modified using the Standard User Management module.
- There must be a matchmaking system: the tournament system organize the matchmaking of the participants, and announce the next fight.
- All players must adhere to the same rules, which includes having identical paddle speed. This requirement also applies when using AI; the AI must exhibit the same speed as a regular player.
- The game itself must be developed in accordance with the default frontend constraints (as outlined above), or you may choose to utilize the FrontEnd module, or you have the option to override it with the Graphics module. While the visual aesthetics can vary, it must still capture the essence of the original Pong (1972).
In order to create a basic functional website, here are a few security concerns that you have to tackle:
- Any password stored in your database, if applicable, must be hashed.
- Your website must be protected against SQL injections/XSS.
- If you have a backend or any other features, it is mandatory to enable an HTTPS connection for all aspects (Utilize wss instead of ws...).
- You must implement some form of validation for forms and any user input, either within the base page if no backend is used or on the server side if a backend is employed.
- Regardless of whether you choose to implement the JWT Security module with 2FA, it’s crucial to prioritize the security of your website. For instance, if you opt to create an API, ensure your routes are protected. Remember, even if you decide not to use JWT tokens, securing the site remains essential.
To attain 100% project completion, a minimum of 7 major modules is required. You need 5 extra minor modules to achieve the full bonus of 125%. Two Minor Modules are equivalent to one Major Module.
So in total we had 6 major and 5 minor modules, which means 17 of 14 points required for the mandatory part, resulting in a score of 115%.
The modules we chose:
In this major module, you are required to utilize a specific web framework for your
backend development, and that framework is Django
.
Your frontend development will utilize the Bootstrap toolkit
.
The designated database for all DB instances in your project is PostgreSQL
. This choice guarantees data consistency and compatibility across all project components and may be a prerequisite for other modules, such as the backend Framework module.
- Integrate the
OAuth 2.0 authentication with 42
authentication system, allowing users to securely sign in. - Obtain the necessary credentials and permissions from the authority to enable a secure login.
- Implement user-friendly login and authorization flows that adhere to best practices and security standards.
- Ensure the secure exchange of authentication tokens and user information between the web application and the authentication provider.
- Develop an AI opponent that provides a challenging and engaging gameplay experience for users.
- The AI must replicate human behavior, meaning that in your AI implementation, you must simulate keyboard input. The constraint here is that the AI can only refresh its view of the game once per second, requiring it to anticipate bounces and other actions.
- Implement AI logic and decision-making processes that enable the AI player to make intelligent and strategic moves.
- Explore alternative algorithms and techniques to create an effective AI player without relying on A*.
- Ensure that the AI adapts to different gameplay scenarios and user interactions.
- Create user-friendly dashboards that provide users with insights into their own gaming statistics.
- Develop a separate dashboard for game sessions, showing detailed statistics, outcomes, and historical data for each match.
- Ensure that the dashboards offer an intuitive and informative user interface for tracking and analyzing data.
- Implement data visualization techniques, such as charts and graphs, to present statistics in a clear and visually appealing manner.
- Allow users to access and explore their own gaming history and performance metrics conveniently.
- Feel free to add any metrics you deem useful.
![dashboard](https://private-user-images.githubusercontent.com/79376206/344983777-22e707c2-fcb0-47c6-801b-6327dfdd6733.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYwMDk1NjUsIm5iZiI6MTcyNjAwOTI2NSwicGF0aCI6Ii83OTM3NjIwNi8zNDQ5ODM3NzctMjJlNzA3YzItZmNiMC00N2M2LTgwMWItNjMyN2RmZGQ2NzMzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDIzMDEwNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJkODZhZmFkN2ViMDEzYzQ1ZGQzNjY0MDQzMWViMDVkODg0NTk4NmU4MGQyYzFiMGRmZGU2YTk4MTNjZjhjZTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.YYLQKs-iBHagCKKeDXW7tNdqrAz1S2s1EsoujFB_WhM)
- Implement
Two-Factor Authentication (2FA)
as an additional layer of security for user accounts, requiring users to provide a secondary verification method, such as a one-time code, in addition to their password. - Utilize
JSON Web Tokens (JWT)
as a secure method for authentication and authorization, ensuring that user sessions and access to resources are managed securely. - Provide a user-friendly setup process for enabling 2FA, with options for SMS codes, authenticator apps, or email-based verification.
- Ensure that JWT tokens are issued and validated securely to prevent unau- thorized access to user accounts and sensitive data.
- Deploy
Elasticsearch
to efficiently store and index log data, making it easily searchable and accessible. - Configure
Logstash
to collect, process, and transform log data from various sources and send it toElasticsearch
. - Set up
Kibana
for visualizing log data, creating dashboards, and generating insights from log events. - Define data retention and archiving policies to manage the storage of log data effectively.
- Implement security measures to protect log data and access to the ELK stack components.
- Deploy
Prometheus
as the monitoring and alerting toolkit to collect metrics and monitor the health and performance of various system components. - Configure data exporters and integrations to capture metrics from different services, databases, and infrastructure components.
- Create custom dashboards and visualizations using
Grafana
to provide real-time insights into system metrics and performance. - Set up alerting rules in
Prometheus
to proactively detect and respond to critical issues and anomalies. - Ensure proper data retention and storage strategies for historical metrics data.
- Implement secure authentication and access control mechanisms for
Grafana
to protect sensitive monitoring data.
- Divide the backend into smaller, loosely-coupled microservices, each responsible for specific functions or features.
- Define clear boundaries and interfaces between microservices to enable independent development, deployment, and scaling.
- Implement communication mechanisms between microservices, such as
REST-ful APIs
or message queues, to facilitate data exchange and coordination. - Ensure that each microservice is responsible for a single, well-defined task or business capability, promoting maintainability and scalability.
- Extend browser support to include an additional web browser, ensuring that users can access and use the application seamlessly.
- Conduct thorough testing and optimization to ensure that the web application functions correctly and displays correctly in the newly supported browser.
- Address any compatibility issues or rendering discrepancies that may arise in the added web browser.
- Ensure a consistent user experience across all supported browsers, maintaining usability and functionality.