ft_transcendence

Our own Pong on the Web

---

🗣 About

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.

🛠 Usage

This project was designed to be hosted on a live server and can therefore not be easily tried out locally.

Mandatory

Minimal technical requirement

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

Game

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).

Security concerns

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.

Modules

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:

Major module: Use a Framework as backend.

In this major module, you are required to utilize a specific web framework for your backend development, and that framework is Django.

Minor module: Use a front-end framework or toolkit.

Your frontend development will utilize the Bootstrap toolkit.

Minor module: Use a database for the backend and more.

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.

Major module: Implementing a remote authentication.

• 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.

Major module: Introduce an AI Opponent.

• 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.

Minor module: User and Game Stats Dashboards.

• 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.

Major module: Implement Two-Factor Authentication (2FA) and JWT.

• 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.

Major module: Infrastructure Setup with ELK (Elasticsearch, Logstash, Kibana) for Log Management.

• 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 to Elasticsearch.
• 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.

Minor module: Monitoring system.

• 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.

Major module: Designing the Backend as Microservices.

• 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.

Minor module: Expanding Browser Compatibility.

• 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.