maofalt/transcendence

Transcendence Project Modules

Listed below are all the modules we have completed for ft_transcendence with links to the pages in the subject where they are specified and to relevent files in which the requirements are fulfilled. Major and minor modules are denoted by Major and Minor respectively.

Mandatory Part:

• Minimal technical requirements:

  • Built with backend => Framework module : Django
  • Frontend is pure vanilla Javascript (No libraries apart from Bootstrap and ThreeJS) => Frontend module: Bootstrap, Graphics module: ThreeJS
  • Website is a single-page application => verify this by going to various pages and looking at the network tab in developer the console (use back and forward buttons)
  • Works with Google Chrome (Check for other browsers)
  • There should be NO WARNINGS OR ERRORS when browsing
  • Everything should be launched with docker-compose up --build

• Game:

  • Both players should be able to use the same keyboard to play the Pong game (Remote players module will only "enhance" this by adding remote players).
  • We have a Tournament => must clearly display who is playing who and the order of players.
  • Registration system is modified by Standard User Management module
  • Matchmaking system must announce the next fight
  • All players must adhere to the same rules. e.g. Same paddle speed
  • Game must capture original essence of Pong (1972)

• Security concerns

  • Passwords in the database must be hashed => use strong hashing algorithm!
  • Protected aginst SQL injections + XSS
  • HTTPS for everything ws => wss
  • All user input should be validated in the backend (we can also implement frontend validation before backend validation for better UX)
  • .env should not be stored publicly!

Modules:

Web:

• Major Framework as a backend => Django page 12
• Minor Frontend framework => Bootstrap toolkit page 12
• Minor Use database for the backend => PostgreSQL page 12

User Management:

• Major Standard user management: page 13
  • Users can signup
  • Registered users can login
  • Users can choose a username
  • Users can update their information
  • Users can upload an avatar (default if none provided)
  • Users can add friends and see if they are online
  • User profiles have game stats: wins and losses
  • Each user has Match History: 1v1, dates... etc.

Gameplay and UX:

• Major Remote players page 15
• Major Multiple players page 15
• Minor Game Customization page 15-16
  • power-ups, attacks, or different maps => enhance gameplay experience
  • option to choose default game for simpler experience
  • User friendly menus for game customization

Cybersecurity:

• Minor GDPR Compliance, User Anonymization, Data Managment, and Account Deletion page 19
  • Allow users to request anonymization
  • Provide tools to manage data: ability to view, edit and delete personal information
  • Streamlined process for account deletion
• Major Two-Factor Auth (2FA) + JWT page 20
  • Require users to provide secondary verification
  • User-friendly setup process for 2FA enabling. With options for: SMS codes, authenticatior apps and email codes.
  • Use JSON Web Tokens (JWT) for for authentication. User sessions and access to resources should be managed securely
  • JWT tokens must be issued and validated securely!

Devops:

• Major Backend as Microservices page 22
  • Loosely-coupled microservices
  • Define clear boundaries between microservices
  • Implement microservice communication (REST or message queue)
  • Ensure that there is proper seperation of concerns between services

Graphics:

• Major Advanced 3D => ThreeJS page 24

Server-Side Pong:

• Major Server-Side Pong + API page 27
  • All login is on the server-side: ball movement, scoring, player interactions, etc.
  • Create API to interact with the game => allow partial usage via CLI
  • API endpoints: game initialization, player controls, and game state updates.

TOTAL:

8x Major + 4x Minor

= 7x Major (100%) + 1x Major (10%) + 4x Minor (20%)

= 130%

Potential ?

Accessibility: ? page 25

• Minor Support on all devices ?
• Minor Expanding Browser Compatibility ?

transcendence's Issues

Landing page frontend

Create Play, Login and Options menu

let there be collisions

Create spa router in vanilla js

I will create the client side router such and a little test showing that the pages change with each link. I will try and make it serve just one html file and I will add browser history navigation functionality as well.

Create 2FA options for SMS and authenticator apps

We misunderstood the subject! You need to implement email, sms and authenticator options.

Make multiple concurrent multiplayer matches

Either let the frontend initiate the match or create a map of matches

fix the ball-paddle collisions

the ball goes into the paddle a little

Tournament backend misspelled

The field for "tournement_name" is misspelled it should be "tournament_name"
It is in the api: /create-and-list

:gear: Production Access Issue

Problem: For production, we need to change so that we do not need to access production.localhost but redirects to localhost directly. Task: This task is to implement this change to improve the production environment.

2FA - major module

tmp_for_auth branch is done with JWT(with 'username'), now it is sending cookies with jwt when user log in.
this branch is for 2FA (email-based verification)

Front-end-tournament-connection

We have to create a fetch function to connect the API backend to the frontend in vanilla java script

add text in game window

Add the score and other text such as "WIN!" and "LOSE!" and "GAME OVER!" -> see how it can be done in ThreeJS

Do data validation on login

Make sure proper data validation is done on login and handle visual response to invalid data.

fix-variant-ball-speed

Make sure the ball speed is the same on all devices and that React with threeJS is not implemented in an inefficient way.

Login Page Frontend

Create document for each endpoint in the Read.me

See page 21 of subject:

◦ Implement communication mechanisms between microservices, such as REST-
ful APIs or message queues, to facilitate data exchange and coordination.

See 42 api docs:
https://api.intra.42.fr/apidoc

fill out options page

Create the outline of the options page. Potentially connecting with amandas api. Even if nothing is in place I can just send something to test that it works. For example a setting that changes the color of the ball.

Protect against SQL injections

See page 7 in the subject: Your website must be protected against SQL injections/XSS

Portainer Disconnection Issue

🐛 Portainer Disconnection Issue

Problem:
Portainer CE disconnects after 5 minutes of activity due to the creation of an account. This behavior is not ideal for our use case.

Expected Behavior:
Portainer should remain connected beyond the 5-minute mark, even after an account has been created.

Proposed Solution:
Implement a mechanism to automatically create an account from environment variables if none exists. This should prevent the disconnection issue.

Steps to Reproduce:

1. Start Portainer CE using the Dockerfile in srcs/requirements/portainer/Dockerfile.
2. Create an account.
3. Wait for 5 minutes.
4. Observe that Portainer disconnects.

Environment:

• Portainer version: CE (exact version can be found in srcs/requirements/portainer/Dockerfile)
• LOCAL_IP: ${LOCAL_IP}
• CODESPACE_URL: ${CODESPACE_URL}

TODO:

• In your Dockerfile for Portainer, add an ARG directive for the admin password: ARG ADMIN_PASSWORD.
• In the command that starts Portainer, use the --admin-password flag with the ADMIN_PASSWORD argument: CMD ["portainer", "--admin-password", "${ADMIN_PASSWORD}"].
• In your docker-compose.yml file, add the args directive under the build directive for the Portainer service. Set the ADMIN_PASSWORD argument to the bcrypt hash of your password.
• Deploy the updated Dockerfile or docker-compose file.
• Verify that Portainer remains connected beyond the 5-minute mark after an account has been automatically created.

Labels: enhancement
Assignee: ""

Make docker-compose run on codespace and school

Add rule to makefile to export XDG_RUNTIME_DIR if it is empty that way it always runs

production-mode-broken

The react app in production mode is broken. It doesn't have any svgs or images for some reason.

Add bind mounts to game for instant updates

Add bind mounts to game/ folder and also ssl/ folder so that updates apply instantaneously

make the game logic of the game works in the server

see how we can connect the logic with websockets in the server

pending_username from signup page

in def verify_one_time_code() there is no pending_username on session when the request sent by signup page.

Create function for frontend api requests

I'm going to create a simple function that everyone will use for all api requests in react. It will support GET, POST, DELETE and PUT. I will be using the axios library because it is simpler and more intuitive in my opinion.

make background in tha game

try to put a background with three.js

add a mode that play with BOT

play against the machine in the client

:bug: WebSocket Connection Issue

Problem: The frontend attempts to establish a WebSocket connection (wss://) to https://game.localhost:9443, but this fails initially because the game.localhost certificate isn't trusted by the browser. Solution: Manually navigating to https://game.localhost:9443 to accept the certificate allows the WebSocket connection to proceed. We need to find a way to trust the certificate automatically to improve the user experience. 🤔

Front-End-For-Tournament-Backend

Create API endpoints for game service

See page 26 of the subject:

◦ Design and implement the API endpoints to support game initialization, player
controls, and game state updates.

add a timout mode and score mode

In a mode the game can last 2 minutes for example and the player that have more points will win
And the score mode the player that have 10 points for example wins

GDPR minor module

Data Processing Purpose and Consent:
+explicit consent from users for collecting and processing personal data
+user data anonymization
+account deletion

encrypt email address on db

fix the new pure java game client

Generate tournament brackets

Potentially use threejs to make cool circular tournament brackets

Do data validation for tournament api requests

Make sure proper data validation is done and handle visual response to invalid data

Setup API Auth Between Backend Services

We need to setup a good way of authenticating all inter-service api communication that way we can be sure that the api requests come from our services rather than a malicious actor.

:whale: Docker Compose Configuration Issue

Problem: We need to check if Docker opts can be removed safely at school because of rootless mode. Importance: This is important to ensure that our Docker compose setup is as clean and efficient as possible, and doesn't include unnecessary configuration. 🛠️

🐛 Fix Redirection and Docker Compose Configuration

Description:

While adding the possibility to access through codespace to the code, we are entering the local IP (for e.g.: 12.50.20.2) it doesn't redirect properly anymore. The file RemoteGame.js from react-app has to be fixed.

Temporary Fix:

In RemoteGame.js, use the following line:

const io_url =`://:9443`

Also, the Docker Compose configuration for react-dev is broken.

Docker Compose Temporary Fix:

In docker-compose.yml, use the following labels for react-dev:

labels:
  - "traefik.enable=true"
  - "traefik.http.routers.react-dev.rule=Host(``)"
  - "traefik.http.routers.react-dev.entrypoints=websecure"
  - "traefik.http.routers.react-dev.service=reactDevService"
  - "traefik.http.routers.react-dev.tls.certresolver=myresolver"
  - "traefik.http.services.reactDevService.loadbalancer.server.port=8033"

Tasks:

• Fix redirection issue in RemoteGame.js
• Fix Docker Compose configuration for react-dev

Tournament match details

Implement tournament details to see the match settings for each tournament -> is there an api endpoint for this info?

:lock: Securely Store Application Secrets

Problem

Currently, our application's secrets for databases and other sensitive data are hard-coded in our codebase. This is a security risk and goes against best practices. We need a way to securely store these secrets and share them with the team.

Proposed Solution

Implement a file to store all our secrets. This file should not be committed to the repository. Instead, we will replace all secrets in our codebase with references to these environment variables.

To-Do

• Create a file and add it to .gitignore
• Replace all hard-coded secrets with environment variables in both databases and Python services
• Update Docker Compose files to use environment variables
• Share file with the team via Discord

.env.example file

To help with the setup, we will also create a .env.example file. This file will contain all the necessary environment variables but with placeholder values. When a developer clones the repository, they can copy this file to a local .env file and replace the placeholders with real values. The .env.example file will be committed to the repository.

end-points-for-tournament

Have to create any endpoints for the tournaments, the endpoints are detail in figma

Enable testing from outside the school network

We need to be able to test the application from outside the school network, as the team is distributed and not always on the network. One possible solution could be to use ngrok or a similar tool to expose our local server to the internet. Additionally, we should automate this process in our Docker Compose setup.

Create Profile Page frontend

See page 12 of the subject:

- Users can select a unique display name to play the tournaments.
- Users can update their information.
- Users can upload an avatar, with a default option if none is provided.
- Users can add others as friends and view their online status.
- User profiles display stats, such as wins and losses.
- Each user has a Match History including 1v1 games, dates, and relevant
  details, accessible to logged-in users.

test1

test

🔧 Improvement: Override LOCAL_IP and CODESPACE_URL in Makefile

Description:

When the Makefile is running, each time we add LOCAL_IP and CODESPACE_URL. So they keep adding up infinitely! We want to always override both LOCAL_IP and CODESPACE_URL.

Possible Solution:

One solution could be to modify the script that writes to the .env file to first remove any existing LOCAL_IP and CODESPACE_URL entries before adding the new ones. This way, we ensure that we always have the latest values for both variables.

Here's a pseudocode representation of what that might look like:

1. Open the .env file
2. Read the file line by line
3. If a line starts with LOCAL_IP= or CODESPACE_URL=, remove that line
4. Write the new LOCAL_IP and CODESPACE_URL values to the file

Tasks:

• Modify the script to remove existing LOCAL_IP and CODESPACE_URL entries in the .env file
• Test the solution to ensure it works as expected

Connect tournament API

Protect the Routes of the Website

Make sure that users can't access the website when not logged in. Also make sure each API is validating the user token and sending 403 unauthorized if not logged in.

:whale: Docker Compose Configuration Issue

Problem: We need to move the Traefik information from the Docker compose files to the traefik.yml config file. Task: This task is to implement this change to improve the organization and readability of our Docker configuration.

🔧 Automated Testing Improvements

Description:

We need to improve our automated testing strategy. Here are some tests we could implement, ranging from easy to more complex but useful:

1. Ping Test for (Easy): A simple script that pings the and checks if it's responsive.

2. HTTP Request to the Pages (Medium): Tests that send HTTP requests to our pages and check the responses. This can be done using tools like or HTTP libraries in most programming languages.

3. Service Health Checks (Medium): If our application exposes a health check endpoint, we can write tests that check this endpoint.

4. Browser Automation Tests (Hard): Tools like Selenium, Puppeteer, or Playwright can automate a real web browser and interact with our pages as a user would. They can be configured to accept self-signed SSL certificates. These tools can be used for end-to-end testing of our application.

Tasks:

• Implement the Ping Test for
• Implement the HTTP Request to the Pages
• Implement the Service Health Checks
• Implement the Browser Automation Tests

Fix server/client game loops behavior

Front-end desyncrhonization during remote gameplay

During the game play, when the ball is reset to the middle the second player will experience a "disconnection".
He cannot see the paddles moving, however the webscoket connection is still working (we can see his paddle move from the other player's perspective)
Temporal fix: If the ball is reseted again the player resynchronize ?!?!