bima42/ft_transcendence

Single Page Application Website. Last project of 42 School common core.

ft_transcendence

Single Page Application Website. This is the last project of 42 School common core. This project is a website that includes a multiplayer pong game.

Launch the project locally

Clone the repository

git clone [email protected]:Bima42/ft_transcendence.git

cd ft_transcendence

Setting up environment variables

• Rename .env.example to .env
• Change the values of the variables FORTYTWO_API_UID and FORTYTWO_API_SECRET in .env to match your environment
• You should also configure JWT_KEY

Run containers

• Use --build to rebuild images
• Use --force-recreate to force recreate image and containers
• Use -d to run containers in background

docker compose up -d

Reach the website

• Go to https://localhost:4443

Documentation

• Summary

• Docker

• Docker Commands

• Backend

Website overview

Login

Home

Profile

Chat

Chat with a friend

Game

In game

Leaderboard

ft_transcendence's Issues

fix(2fa): remove the possibility to generate multiple qr code

• A user with a 2fa secret already set must not be able to display his qr code, or a new qr code
• This qr code must be displayed only one time

feat(gamenav): add nav to select menu

Road map

Frontend

• Make left menu reactive to current location
• #20
• #21
  • Overflow on different pages
• Create chat vue
  • Figma and create several components
• Create modalStore

Backend

• #18
• Create some User functions (add, delete, modify ...)
• #34
• #32
• #46
• #48
• #42
• Protect from SQL Injection

Game

• Create a new component for the Pong game. (it will contain the HTML, CSS, and JavaScript necessary to run the game.)
  • In the template section :
    • add a canvas element that will be used to draw the game elements (such as the ball and paddles).
    • add controls for the game (such as buttons for starting and resetting the game).
  • In the script section :
    • import the JavaScript file containing the code of the Pong game
• Write the JavaScript code for the Pong game :
  • Analyze the original pong and set the game rules :
    • The main features of the original Pong game were:
      • Two paddles that could be moved up and down by the players
      • A ball that bounced back and forth between the paddles
      • A score that was incremented every time a player missed the ball with their paddle
      • A simple "AI" that controlled the movement of the computer's paddle
  • Create a canvas element and use JavaScript to :
    • draw shapes and images on the canvas
    • handle user input and game logic.
    • Game logic :
      • handle player input and update the positions of the ball and paddles.
      • handle collisions/bounce between the ball and the paddles and the edges of the canvas.
      • keep track of the score and end the game when one player reaches a certain number of points.
      • A simple "AI" that controlled the movement of the computer's paddle
• Our customize pong :
  • Adding features to the game :
    • ... ?
    • ... ?

Docs

• Nest Authentication (+ guard, + Passport, + JWT strategy, + encryption)
• Typescript : await/async
• Nest : Dependency Injection

fix(front): make the front desktop complient

Check all the button and the sized to make it desktop usable. rn the title goes through the roof

[security]: protect againt SQL injection

Edit: We are already protected SQL injection thanks to Prisma. However, the following points would be nice to implement.

---

We have to validate each user input at least on the server side, and best would be on the client side too. And both side, we can use the JOI package to help use

Client side:

• Simple input: Add pattern attribute to all input field
• Alternative: add listeners to input field, that validate the input and/or warn the client

Server side:

• Use DTOs for all things received from clients
• Decorate them with decorators from the JOI package

feat(frontend): Change window title and icon

feat(errors): be able to catch thrown errors from back in frontend

• For example, if the user is logout it will be great to catch it in front and display a message in a modal for example to tell that the user has been disconnected
• UnauthorizedException catch in front should logout and redirect the user for example

Stylize password modal

fix(frontend): catch 401 and Logout error to disconnect user

• It will be great to implement a 'middleware' like in frontend, in order to catch error from back like 401 and error like no token and disconnect/redirect the user to the login page. Also clear cookie and local storage

[Front] frontend/chatview / Style the tooltip

In chatUserDetails.vue

Style the tooltip to display the informations we need inside of it.
Try to make it as a component.

Be careful beacause you want to emit the setInactive so try to find a way to make it clever between the components.

If you don't find any solutions to make it as components make it raw in the file and we will find a way later.

The avatar component already exists.
Keep things simple, use placeholder names for userName and userHighscore.

The Add friend button will be changed to a remove friend button.
The send a priv message button will be displayed only if the user is already a friend, but you can display it rn as backend will provide us this info later on.

As always, these are my ideas, you are free to do whatever you guys want and feel to, I am just trying to guide you

Cheers

enhancement(mainmenu): make some animations

Think about an "about us" link where it is explained what is the goal of the project, who we are and where we also welcome people to star the project if they like it !

back(security): protect users endpoints

• We need to protect all users endpoints from not being authenticated
• We have to use token to verify connection for each endpoint -> use middleware

[Frontend] implement game canvas

feat(createChannel): add a start a create channel button

refactor(user): change dto implementation

• Try to create Interceptor in order to cast return from prisma service into Dto

[Frontend] Custom Table

enhancement(sidebar): make the sidebar hide when changing route

bug(chat): user avatar not updated

When a user send a message in a chat, then change his avatar, his avatar is not updated on the chat, We have to refresh the page to update the avatar

fix(backend): use websockets rooms for chat

feat(leaderboard): implement leaderboard view

fix(login): remove the redirect system of login

At the moment, there is a redirectHandler which is used to delay the login system in order to not crash. This is not the good way to do it
Remove it and use something like suspens instead

update user endpoint: add checks

refactor(user): implement user dto

We need to implement Dto for user model in backend

feat(user): add elo for user and leaderboard

What ?

• Add elo field to the user
• Implement a function to transform victories/looses in elo points
• Update elo at the end of games

[Backend] Create simple authentication method in order to log in with a random user

Steps

• Following Nest tutorial, implement a simple authentication method
• Secret key had to be hide
• Connect with database to log in with a user stored in it

feat(friend): implement friend system for user

• Add all endpoints to add, block or delete a friendship
• Add endpoint to display friend-list

back(2FA): Implement 2FA for log in

Some things to add :

• : Add firstname and lastname field for 42 user
• : Display avatar when logged in

2fa :

• : Add a button to switch 2fa true
• : Implement new field such as phone number to validate 2fa (?)
• : Test 2fa

Bug: Backend crashes on expired JwtToken

feat(mainmenu): make a main menu

remove the lorem

[Frontend] Add modal to ChatView

feat(user): display stats in user profile

back(login): Finish backend structure

Backend structure was bad. It had to be rebuilt

• Implement Prisma instead of TypeOrm
• Set up tables and migrations
• Restore all endpoints

[Frontend] Make left menu reactive to current location

fix(frontend): style the TwoFaView

[Frontend] Check that fields are filled before a query is done

back(login): improve some login features

• : Redirect 42 authentication to /index
• : Redirect login to /index
• : Implement register with new fields (phone and mail)

bug(docker): use env variables doest not work

• All calls of the back in frontend are hardcoded https://localhost:4443/api or https://localhost:4443/, we need to set an env file for frontend and use those variables

[Frontend] Game: custom mode

Here is a list of some ideas to implement in the custom mode of the game:

• Obstacles
• Faster ball
• Accelerating ball after some time
• Falling bonuses/maluses from the middle to each players. Some effects could be:
  • Bigger/smaller paddle (limited time ?)
  • Faster/slower paddle (limited time ?)
  • Faster/slower ball (limited time ?)
  • Button inversion for the opponent
  • multiballs ?
  • Laser to shoot the opponent down (paddle solidity ?)
  • Kittens
  • Invicibility: ball bounces on the wall behind the player for a limited time
  • Invisible/less visible ball

feat(front): add buttons in front for friend interaction

What ?

• Atm, only endpoints for user interaction are set. We need to implement button to add, remove or block/unblock a user in front to use those endpoints. And accept/decline a friend request
• Also, we need to set up the friendlist in front, and may be the blocked users list

fix(frontend): redirect user when logged out or logged in

• User logged in should not got to / and should be redirected to /index if already logged
• User not loggend should not be able to go in any route, and should be always redirected to / to log in

feat(user): upload avatar from user edit

We want to allow the user to upload a new avatar by the user profile view

feat(user): improve user profile

• Add win and games played to display in user profile
• We can also add a winrate score in the profile, this field could be calculated in front

[Backend] Implement OAuth method for 42 student

Backend callback: bad communication to user with a bad access token

Currently, we return an empty JSON {}. And the user is stuck there. We should redirect user to login page, or return a better error code, e.g. 403

[Frontend] Custom inputs

[Backend] Set username & room name max characters

To limit stupid users breaking the front

back(auth): Reimplement authentication and related endpoints

• Restore all endpoints
• Restore OAuth
• Update queries from Front
• Implement logout route

[Frontend] Create modalStore

[Backend] Rebuild Authentication method

refactor(useravatar): remove user avatar to use only user picture