kuninoto / 42_ft_transcendence

A website with user accounts/profiles and relations (friendships & blocks), real-time multiplayer game and chat (DMs & rooms)!

ft_transcendence (42Porto - 42Cursus)

Project done in collaboration with:

Rodrigo Ramos
João Arsénio

Grade: 100/100

Demonstration:

Stack Used

     
   

Overview

A website to host the might pong contest!

Disclaimer: Only tested on Google Chrome and Brave (Also works on Firefox but has a visual bug on user's profile avatar update field)

Features

• User accounts/profiles and relations (friendships & blocks)
• OAuth2 Login with 42's intranet and 2FA with Google Authenticator
• Chat (groups with roles (owner, admin and participant) and DMs)
• Pong game (with themes!)
• Matchmaking, 1v1 and match history

Installing and running the project:

1- Install Docker: install Docker engine official docs
2- Clone this repository

git clone https://github.com/Kuninoto/42_ft_transcendence

3- Navigate to lvl_6_ft_transcendence

cd 42_ft_transcendence/lvl_6_ft_transcendence

4- Write a .env file on /backend and /frontend like the .env.example to use your very own configurations
5- Navigate back to lvl_6_ft_transcendence and run the containers

cd lvl_6_ft_transcendence && docker-compose up --build

Subject (v12.1): ft_transcendence en_subject

Useful links

General
Web Development 10min Overview
100+ Web Development Things you Should Know

Frontend Overview
Backend Overview

JavaScript 101
Arrow functions in JavaScript
JavaScript Promises in 10 Minutes
JavaScript Promises in 10 Seconds
Async Await and Promises

NestJS
NestJS explained in 100 seconds
NestJS Tutorial for Beginners
Custom Decorators NestJS Docs
Serve Static NestJS Docs
Official Docs

User Auth
Introduction to OAuth 2.0
Session vs Token Authentication in 100 Seconds
Session vs Token based authentication
NestJS Tutorial - Setting up Passport, OAuth2, TypeORM, Sessions, Session Store, Database
Introduction to JWT
JWT Authentication best practices
JWT usage vs. Session
JWT vs. Opaque tokens
Passportjs serializerUser and deserializeUser
2FA with Google
NestJS passport docs

Chat & Game (WebSockets/Socket.IO)
A Beginner's Guide to WebSockets
WebSockets in 100 Seconds & Beyond with Socket.io
NestJS WebSockets Tutorial Playlist
Full Socket.io and React.js Online Multiplayer Tic-Tac-Toe Game | Socket.io From Zero To Hero

Database
SQL explained in 100 seconds
7 Databases Overview
Dockerhub Postgres image
How to Use the Postgres Docker Official Image
PostgreSQL CLI Cheat Sheet
PostgreSQL Official Docker Image Docs
Difference between one-to-many and many-to-one

Adminer
Definition
What is Adminer and how to use it
Connection Adminer to Postgresql
Setup Adminer with docker for database managment

Gluing the pieces together
NestJS, TypeORM and PostgreSQL full example development and setup
Setting up NestJS with PostgreSQL

---

Made by Nuno Carvalho (Kuninoto) | [email protected]

 

42_ft_transcendence's Issues

Enhancement: Switch game-gateway messages and events from kebab-case to lowerCamelCase

Docs: Review/Add Swagger Docs && Comments on backend functions

Feature: 'ball-move' socket message

Review: Check if/Try to SQL Inject user search

Request: Information relative to friendship

• Need friendship_id on users/{id} so its possible to use /friendship/{friendship_id}/update
• Being able to recive pending requests user on /users/search (send a request to a user won't make it disapear from the query).
• Recive the friendship_status on /users/search

---

• Merge unfriend and cancel update into one

Enhancement: Socket Auth

Feature: Admin functionality of the chat rooms

Bug: Sending a friend request to a blocked user gives 500

Feature: Save GameResult and update player's match history upon game end

Feature: Rooms on Matchmaking

Upon user (player) connection to game-gateway, enqueue and if there are more than 2 players waiting dequeue both and create a Room for them

OR

Upon user connection to game-gateway create and assign a room for him and later, when a new player arrives, add him to that room

Bug: Declining and blocking requests

• When blocking a request still leaves on pending.

• When request is declined and you can't search for the declined users and if the declined try to send request again doesn't appear on friends requests.

Basically "declined" status is behaving like blocked. W/o the "not be able to search" part, "declined" can be change to "blocked", block table can disappear, and on decline just erase the relation from db.

Feature: Theme information on /me

Add:

• object theme to /me whith background and paddle theme

theme : { background: string, paddle: string, }

• post /me/theme that will receive the theme

Feature: search users by regex (?) of their usernames

To implement: route (?) to request user's info using username approximation (regex ?)

To Review: User reconnection system

Feature: Matchmaking queue

Feature: 'player-ready' socket message

Add some type of player readiness to assert that both players are ready to start the game

Feature/Fix: User Status must be emitted thru the connection gateway to be real-time

Fix: friendships route

Everything to change darling

• Create endpoint for friend_requests from /me to /me/friend_requests

• Create endpoint for friends from /me to /me/friends

• Remove friendship_* from every /friendship name (eg. friendship_name -> name)
  My code : friend.friend_name

• Send friendship information in /users/{id} and block status

• Automatically reject friend request when blocked

• Remove blocked, friends, (not on pending requests) and self from /users/search

Feature: Developer Achievement

When one of us creates an account on the site an achievement relative to being one of the developers is assigned
(check by intra name upon user creation)

Feature: Figure out how to sync the game start now that we have the 'player-ready' message

Feature: Sent friend requests on /me/friend-request, /users/search?=<username_query> and /users/{id} with sent_by_me boolean

Fix: GameEnd by disconnection of the other player throws

Bug: friend_request_send_by_me always false

Bug: /users/search returning logged user

• Also, when the username query is empty return empty array

Bug: Socket user

Seems like the Socket user is always the id 1. But it might be due to me directly editing stuff on the DB. Need another account to verify that

Feature: If a user leaves while in game the other one wins

Bug: player-scored event's body is undefined

Feature: Game CRUD

Feature: Achievements Display

Feature/Fix: Game Gateway not working

Bug: Username Updation always invalidating newUsernames as duplicates

Feature: 'game-end' socket message && User stats (wins, losses, win rate etc.)

Bug: Sending friends request make them appear to accept on the sender account

Review: Game Engine physics && player-scored sync interval (if needed)

Feature: Add some type of abort system to matchmaking

Add some type of abort system to a situation where 2 users are assigned one room as for the matchmaking but one of them leaves

Feature: Leaderboard on /game/leaderboard

Feature: Socket's DTOs validation (class-validator apparently isn't working)

Feature: Implement isValid<DTO> for all chat DTO's

Feature: Prevent the same user from connecting twice (i.e being assigned 2 clientIDs) to the game-gateway

Feature: Friendships gateway (direct messages && maybe real-time friend request status updation)

Feature: Achievements popup

Using the chat socket the backend sends events acknowledgeding that a new achievement was unlocked and the frontend shows a popup with which achievement and its description.

Feature: engine on backend

The frontend it's just the reflection of backend's logic, this means that the paddle, ball and score aren't connected in anyway they just update when needed

Which mean:

• Both clients emit the paddle position to the bo

• The bo starts the ball position and speed and because it has the paddles can also do the collisions
  So for the frontend that only receives the ball position the collisions are meaningless.

• Every time the ball passes one of the sides (point) an event from bo is emitted with the new scores.
  There is one emit on bo with the paddles and ball position (to reset), then a 2~3 seconds delay w/o emits, and the game starts again.

• score passes the max. Bo emits a winner message with the winner and disconnects both

Feature: Favicon

Feature: Figure out how to allign all the IP/redirect URI's to make playing in different PCs possible

with nginx (?)

Feature: Game invitations

Bug: blocked users not appearing on /me

Fix/Refactor: Circular Dependecies

Feature: 1vs1 Game vs AI

Discuss and take in consideration the possibility of adding the option to play vs AI

Feature: GameRoom CRUD

Bug: If 42's Auth is not approved (401 status code is returned by the intra and the backend), the user enters anyway

When I tried to run the app on my side I was not able to login properly with 42's auth and this error popped on the frontend container logs:

frontend  | 
frontend  | Import trace for requested module:
frontend  | ./node_modules/ws/lib/validation.js
frontend  | ./node_modules/ws/lib/receiver.js
frontend  | ./node_modules/ws/wrapper.mjs
frontend  | ./node_modules/engine.io-client/build/esm-debug/transports/websocket-constructor.js
frontend  | ./node_modules/engine.io-client/build/esm-debug/index.js
frontend  | ./node_modules/socket.io-client/build/esm-debug/url.js
frontend  | ./node_modules/socket.io-client/build/esm-debug/index.js
frontend  | ./contexts/GameContext.tsx
frontend  | ./app/matchmaking/finding-opponent/page.tsx
frontend  | - warn ./node_modules/ws/lib/buffer-util.js
frontend  | Module not found: Can't resolve 'bufferutil' in '/app/node_modules/ws/lib'
frontend  | 
frontend  | 
frontend  | Import trace for requested module:
frontend  | ./node_modules/ws/lib/buffer-util.js
frontend  | ./node_modules/ws/lib/receiver.js
frontend  | ./node_modules/ws/wrapper.mjs
frontend  | ./node_modules/engine.io-client/build/esm-debug/transports/websocket-constructor.js
frontend  | ./node_modules/engine.io-client/build/esm-debug/index.js
frontend  | ./node_modules/socket.io-client/build/esm-debug/url.js
frontend  | ./node_modules/socket.io-client/build/esm-debug/index.js
frontend  | ./contexts/GameContext.tsx
frontend  | ./app/matchmaking/finding-opponent/page.tsx
frontend  | 
frontend  | 
frontend  | ./node_modules/ws/lib/validation.js
frontend  | Module not found: Can't resolve 'utf-8-validate' in '/app/node_modules/ws/lib'
frontend  | 
frontend  | 
frontend  | Import trace for requested module:
frontend  | ./node_modules/ws/lib/validation.js
frontend  | ./node_modules/ws/lib/receiver.js
frontend  | ./node_modules/ws/wrapper.mjs
frontend  | ./node_modules/engine.io-client/build/esm-debug/transports/websocket-constructor.js
frontend  | ./node_modules/engine.io-client/build/esm-debug/index.js
frontend  | ./node_modules/socket.io-client/build/esm-debug/url.js
frontend  | ./node_modules/socket.io-client/build/esm-debug/index.js
frontend  | ./contexts/GameContext.tsx
frontend  | ./app/matchmaking/finding-opponent/page.tsx
frontend  | - error api/api.ts (14:29) @ localStorage
frontend  | - error ReferenceError: localStorage is not defined
frontend  |     at eval (./api/api.ts:18:36)
frontend  |     at (sc_client)/./api/api.ts (/app/.next/server/app/auth/page.js:710:1)
frontend  |     at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:43)
frontend  |     at eval (./contexts/AuthContext.tsx:9:66)
frontend  |     at (sc_client)/./contexts/AuthContext.tsx (/app/.next/server/app/auth/page.js:754:1)
frontend  |     at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:43)
frontend  |     at eval (./app/layout.tsx:9:79)
frontend  |     at (sc_client)/./app/layout.tsx (/app/.next/server/app/auth/page.js:743:1)
frontend  |     at __webpack_require__ (/app/.next/server/webpack-runtime.js:33:43)
frontend  |   12 |      headers: {
frontend  |   13 |              'Content-Type': 'multipart/form-data',
frontend  | > 14 |              'Authorization': `Bearer ${localStorage.getItem('pong.token')}`
frontend  |      |                                        ^
frontend  |   15 |      },
frontend  |   16 | })
frontend  |   17 | 

Also, we should check for a scenario where the browser history has the 42 authentication saved (so that allows the user to bypass the 42's login credentials) but the 42's session has expired or if the user is in AGU (he can type his credentials and trigger the 42's auth but most probably a 401 is also returned)