znichola / ft_transcendence Goto Github PK

The final project of the 42 common core: a website to play pong and chat with friends

Makefile 0.27% Dockerfile 0.29% JavaScript 0.32% TypeScript 98.27% HTML 0.08% CSS 0.18% Shell 0.05% PLpgSQL 0.53%

ft_transcendence's Introduction

Hello

I'm Niki 👋, I'm studying programming at 42Lausanne and have a passion for it, most especially when it's a group endeavour.

Here are some of the projects I'm most proud of:

Typescript projects

ft_transcendence

A single page site for playing multiplayer games of pong, as well as community management, friends, chatrooms and spectator mode. The backend uses Nestjs for the server, PostgreSQL for the database and Prisma as an ORM to communicate between the two. The frontend uses React for the user interface Reactrouter to get SPA client side routing, with TanStack Query v4 for state management. The styling was done using the TailwindCSS design system. A five person project [git repo]

C++ projects

WebServ

A http server that support POST, GET and DELETE, cookies and session management, and a configurable CGI, examples provided in php, python and bash. The server uses the kqueue api for request multiplexing, the GCI execution is also added to the queue for a seamless no hang experience with multiple concurrent requests. A three person project [git repo]

C projects

MiniRT

A 3D ray-tracing rendering engine built from the ground up using the minilibx for a basic X-Window api. It supports basic primitives, Plane, Sphere, Cone, and Cylinder, as well as texture mapping images or a configurable checkerboard pattern. The engine also supports the Phong reflection model with shadows from multiple light sources and correct color mixing. Particular attention was given the optimization, mainly for the development experience, debugging the maths function for the various shapes was non trivial. Multithreading was implemented with pthreads api and thought was given to the data-structures used. A two person project [git repo]

Minishell

A simplified shell, imitating the behavior of bash, in/out files, pipes, wildcards and control flow with && || ( ). Also includes a unittest framework written in bash, implemented to ensure correctness during development. A two person project [git repo]

Fract-ol

Mandelbrot, Julia and Burning Julia fractal rendering, written in C using a basic graphics library the minilibx. The complex number maths was custom implemented along with panning an zooming. A solo project [git repo]

GameJams

I love the fast paced goal oriented format of the GameJam/Hackathon, the team dynamics and the mission to compleat a project. For all of my submissions I took the role of programmer and used GoDot, chosen for it's excellent documentation and solid browser performance, and used it's GDScript, a python like language for development.

GitWars

Event: UPsi Jam 2.0 A physics based game with falling balls and mechanics in place to direct them to your opponent for them to deal with. A four person team [git repo] [itch page]

Born to Root

Event: Global Game Jam Geneva 2023 A tower defense style game with a resource gathering phase. A massive nine person team [git repo] [itch page]

Ugly Choices

Event: LevelUp 2023 A story based dungeon crawler with branching options and specific text for various event combinations. A three person team [git repo] [itch page]

page last updated jan 2024

ps. if you notice any spelling errors or weird grammar, don't hesitate to tell me

ft_transcendence's People

Contributors

Stargazers

Watchers

Forkers

maximepouce

ft_transcendence's Issues

Is cookie expired in backend ?

Backend shit-fine

Unify backend and frontend serving points (nginx)
Swagger for backend documentation and testing :) jerome says its great

Interface for the `GameState`

export type Login42 = string

export type GameMode = "CLASSICAL" | "SPECIAL";

export interface GameState {
  // idk, something about the ball and player positions
}

export interface Game {
  id: number;
  p1: Login42;
  p2: Login42;
  mode: GameMode;
  endGameState: GameState;
  // and some more stufff and things 
}

Logout insteed of Login

Login process with 2fa

How to inform the frontend that tfa is enabled ?
As of now, logging in returns a JSON object with the user login42, and 2fa status (true or false). If it is true, then the user should be asked for his Authenticator code, then a POST request to /tfa/{username}/login should be sent, with a body containing the code as tfaCode (6 characters string, no space)

What to provide to the frontend after a successful login ?
I currently send back the login42 of the logged in user. Please let me know if this work for you, or if you want me to return more/different data

Create the chatroom page using the boxmenu component

This menue needs to be created with all the apropriate options:

a list of users
a list to add user to the channel
user actions, toggle status admin/memebr, kick, ban mute, mute for time period

Condence database migration into one

Is this something we want to do? Would it make the project better / would bootup times be faster, is it cleaner etc..

Inteface for the `Chatroom` and `DM`

export type Login42 = string;
export type ChatroomStaus = "PUBLIC" | "PRIVATE" | "PROTECTED";
export type ChatroomRole = "OWNER" | "ADMIN" | "MEMBER";
export type ChatroomUserSanctionStatus = "BANNED" | "MUTTED";

export type ChatroomMessages = Message[];
export type DMmessages = Message[];
export type ChatroomMemebers = ChatroomUser[];
export type ChatroomSanctionedUsers = ChatroomSanction[];

export interface DM {
  id: number;
  other: Login42; // omitting the current user, because the query is only made by a user, in the url it's user1
}

export interface Message {
  sender: Login42;
  content: string;
  sentAT: Date; // maybe this is the best way to type a date, string might be better
}

export interface Chatroom {
  id: number;
  name: string;
  owner: Login42;
  status: ChatroomStaus;
}

export interface ChatroomUser {
  user: Login42;
  role: ChatroomRole;
}

export interface ChatroomSanction {
  user: Login42;
  sanction: ChatroomUserSanctionStatus;
  time_left: string | "indefinite";
}

// and of the obligatory and I've missed something so please do modify this

Allow empty password for PRIVATE and PROTECTED channels

Cookie name set in env

Current cookie name is hardcoded as test, probably better to set a name in the .env file !

GET /chatrooms, about the status

I chose to hide the PRIVATE chatrooms, but we need to see them if we're member of the chatroom, right?

Socket issue on tfa login

The following error is logged after doing a tfa login, which completely stops nest

[Nest] 924  - 10/16/2023, 12:34:05 PM   ERROR [ExceptionsHandler] Cannot read properties of undefined (reading 'emit')
TypeError: Cannot read properties of undefined (reading 'emit')
    at Object.socketOnTimeout [as timeout] (node:_http_server:767:37)
    at TransformOperationExecutor.transform (/backend/nestjs/node_modules/src/TransformOperationExecutor.ts:207:39)   
    at TransformOperationExecutor.transform (/backend/nestjs/node_modules/src/TransformOperationExecutor.ts:327:31)   
    at TransformOperationExecutor.transform (/backend/nestjs/node_modules/src/TransformOperationExecutor.ts:327:31)   
    at TransformOperationExecutor.transform (/backend/nestjs/node_modules/src/TransformOperationExecutor.ts:327:31)   
    at ClassTransformer.instanceToPlain (/backend/nestjs/node_modules/src/ClassTransformer.ts:25:21)
    at Object.classToPlain (/backend/nestjs/node_modules/src/index.ts:23:27)
    at ClassSerializerInterceptor.transformToPlain (/backend/nestjs/node_modules/@nestjs/common/serializer/class-serializer.interceptor.js:56:37)   
    at ClassSerializerInterceptor.serialize (/backend/nestjs/node_modules/@nestjs/common/serializer/class-serializer.interceptor.js:49:20)

The error could be because the last part of the login has to be done using Swagger as of now, no issue with a login without 2fa at all.
Will have to check again after implementing the login 2fa code to make sure this does not occur at all (otherwise welcome to 0/100)

500 server error when make protected channel

Request body
{
  "ownerLogin42": "test",
  "name": "foobar",
  "status": "PROTECTED",
"password": "fooabr"
}

Response body
{
  "statusCode": 500,
  "message": "Internal server error"
}

Global user search name filters incorrectly

The name filtering only displays user whose name start with the searched string, instead of every name containing it (/user endpoint already have this filtering implemented)

Result of /banned array of strings

maybe the then is redundent

export const putUserFriendRequest = async (
  current_user: string,
  login42: string,
) => {
  return authApi
    .put<HttpStatusCode>("/user/" + current_user + "/friends/" + login42)
    .then((res) => res.data);
  // .catch((error) => console.log(error.toJSON));
};

the docs for react Query have a section for making axios requests and they don't do the useless then thing

https://tanstack.com/query/v4/docs/react/guides/query-cancellation#using-axios-v0220

to test and if useless remove it fron the Api-axios.tsx file, also this file should have a small letter to start as it's not a react component.

Reloading page takes us back to /login

When i'm on the profile page and i reload, i'm taken back to the login page.

auth check for page refresh

before redirecting to the auth page on a page refresh we should check if there is a login cookie and use that instead, it would avoid this annoying relog screen on each page refresh

Matchmaking and Game Rooms management

I just wanted to propose a workflow that seem easy enough to me for the implementation of the matchmaking and management of multiple games :

All users joining the matchmaking connect to the websocket, and are added to a userlist
The server will match the first user in the userlist with the user with the closest rank (we can use cron to do it on a regular interval)
- A Room is created within the same websocket
- Both users are added to the room user list as player 1 and player 2
- Both users are removed from the matchmaking user list
- People joining as spectator will be added to the room list as spectator and will not be able to play

At this point, we can specify which room we want to emit too and only the users inside it will receive the information

Please let me know if that would work for you, or if you have any suggestion !

Complete user profil page

nest package has `critical` vulnerability!

nest      |
nest      | up to date, audited 799 packages in 4s
nest      |
nest      |
nest      |
nest      | 120 packages are looking for funding
nest      |   run `npm fund` for details
nest      |
nest      | 1 critical severity vulnerability
nest      |
nest      | To address all issues, run:
nest      |   npm audit fix
nest      |
nest      | Run `npm audit` for details.

corrent the type of children to be ReactNode

children?: JSX.Element[];
// to
children: ReactNode;

Global ranking button not sync

Interface for `User`

This interface should be re structured to fit all the information we want to fetch about a user

Chatroom name, should be unique

This is to sort of solve the issue of idempotent post, react will by default do compenent rendering twice to help find non pure functions.

Empty username in url when logout ?

conversation api delete

add the possibility to delete a conversation for either participant:

delte on /conversations/{user1}/{user2}

cannot change "ADMIN" / "OWNER" status

it always seems to return

{
  "message": "Cannot change role of owner",
  "error": "Forbidden",
  "statusCode": 403
}

QRCode generation returns file data instead of image

When generating a QR code for the user to scan, the generated QR code is returned as text (this text can be saved to a file to create the working QR Code)
Do you have any ways to use it in React to display the image from its data ? I cannot use the same ReadStream as I did for the user avatar because the QRCode is not locally saved

Card style for ranking re-designed to be more uniform

cards should be brought in line with the style of the side menu and chat page

Protecting Websocket Notifications

Return value with created id when POST-ing a chatroom

Rename "friends"

the Friends table is used for relationship and should be renamed accordingly

a `checked` prop to a form field without an `onChange` handler

This error keeps printing in the console, should be found and squashed, can't submit with errors being printed

refactor Front to use the `authContext` to get the current user

Instead of calling getCurrentUser allover the place, use the authContext to get the current user, then figure out how to get it so the current user gets updated, when there is an error.

Chatroom redirection + add different room types

Re sytle the user profile

Additional information needs to be displayed: the win / losses and current elo

Action buttons need to be present for adding friend / message / dule, same as on the player card, this restyle might need to go handin hand with the restyling of the player card in global ranking.

axios to wrap config for error checking

https://stackoverflow.com/questions/49967779/axios-handling-errors

basically the idea is to set our own callback function that handles, the http errors, we would just re throw the errors that are not 401 and for 401 an invalidation of the authprovider, this will automatically redirect to the login page.