PDF rules

General:

• Your website must be compatible with the latest stable up-to-date version of Google Chrome and one additional web browser of your choice.
• The user should encounter no unhandled errors and no warnings when browsing the website.
• Everything has to be launched by a single call to docker-compose up --build

Security:

• Any password stored in your database must be hashed
• Your website must be protected against SQL injections
• You must implement some server-side validation for forms and any user input
• Please make sure you use a strong password-hashing algorithm
• For obvious security reasons, any credentials, API keys, env variables etc... must be saved locally in a .env file and ignored by git

User Account:

• The user must login using the OAuth system of 42 intranet
• The user should be able to choose a unique name that will be displayed on the website
• The user should be able to upload an avatar. If the user doesn’t upload an avatar, a default one must be set
• The user should be able to enable two-factor authentication. For instance, Google Authenticator or sending a text message to their phone
• The user should be able to add other users as friends
• The user should be able to see their friends current status (online, offline, in a game, and so forth)
• Stats (such as: wins and losses, ladder level, achievements, and so forth) have to be displayed on the user profile
• Each user should have a Match History including 1v1 games, ladder, and any-thing else useful. Anyone who is logged in should be able to consult it

Chat:

• The user should be able to create channels (chat rooms) that can be either public, or private, or protected by a password
• The user should be able to send direct messages to other users
• The user should be able to block other users. This way, they will see no more messages from the account they blocked
• The user who has created a new channel is automatically set as the channel owner until they leave it
• The channel owner can set a password required to access the channel, change it, and also remove it
• The channel owner is a channel administrator. They can set other users as administrators
• A user who is an administrator of a channel can kick, ban or mute (for a limited time) other users, but not the channel owners
• The user should be able to invite other users to play a Pong game through the chat interface.
• The user should be able to access other players profiles through the chat interface

Game:

• users should be able to play a live Pong game versus another player directly on the website
• There must be a matchmaking system: the user can join a queue until they get automatically matched with someone else
• It can be a canvas game, or it can be a game rendered in 3D, it can also be ugly, but in any case, it must be faithful to the original Pong (1972)
• You must offer some customization options (for example, power-ups or different
  maps). However, the user should be able to select a default version of the game
  without any extra features if they want to
• The game must be responsive
• Think about network issues, like unexpected disconnection or lag. You have to offer the best user experience possible.

Study Plan: Pong Game with Websockets using NestJS and Socket.IO

This study plan outlines the steps to develop a Pong game using websockets and the Socket.IO library within the NestJS framework. The goal is to create a real-time multiplayer Pong game where players can compete against each other online.

1. Familiarize yourself with the basics of NestJS (relates to #19)

   • Understand the core concepts of NestJS, such as modules, controllers, and providers.
   • Learn how to set up a basic NestJS project and run it.
   • Explore how to handle HTTP requests and responses using controllers and services.

2. Study websockets and Socket.IO:

   • #28
   • Learn about the Socket.IO library and its features for real-time communication.
   • Explore the documentation and examples provided by Socket.IO to understand its usage and integration with NestJS.

3. Design the architecture of your Pong game:

   • #37
   • Plan how websockets will be used to handle real-time updates and communication between players.

4. Implement the backend:

   • Create a NestJS module for handling the game-related functionality.
   • Set up a Socket.IO server within your NestJS application.
   • Implement the game logic, including ball movement, collision detection, and scoring.
   • Handle socket events for player actions, such as paddle movement and game start/stop.
   • Implement room management to handle multiple game instances.

5. Build the frontend:

   • Choose a TypeScript framework for the frontend, such as Angular or React.
   • Set up a Socket.IO client in the frontend application to establish a connection with the backend.
   • Create the necessary UI components for rendering the game, including the paddles, ball, and scoreboard.
   • Handle user input for controlling the paddles.
   • Emit socket events to communicate with the backend for actions such as paddle movement and game start/stop.

6. Test and debug:

   • Write unit tests for the backend components to ensure they function correctly.
   • Test the game's functionality by simulating player interactions and verifying the expected behavior.
   • Debug any issues or errors that arise during testing.

Create controllers and DTOs about the user.

This is a list of possible deployment solutions to use:

• GCP VM + Caprover
• AWS EC2 + Caprover
• render

https://docs.nestjs.com/techniques/database

You can also directly use any general purpose Node.js database integration library or ORM, such as MikroORM (see MikroORM recipe), Sequelize (see Sequelize integration), Knex.js (see Knex.js tutorial), TypeORM, and Prisma (see Prisma recipe), to operate at a higher level of abstraction.

It is required that the user authenticates with 42's Intra Oauth2.

This requires an Authorization Code Flow (AKA web auth).

          @iaurg Blocked issue, @caio-vinicius has to be added to the repo as a maintainer.

Originally posted by @vcwild in #20 (comment)

expected format:

[
{
    name: "example",
    avatar: "https://url.data.co.uk",
    wins: 1,
    isFriend: false,
  },
  ]

Tentei iniciar o projeto em uma maquia "zerada" no campus da 42 instalando tudo e tentando rodar o dev container na última versão 0.304.0 | 8/4/2023 porem ele não funciona

Precisei rodar o seguinte comando para instalar uma versão passada e fazer

code --install-extension [email protected]

get User Data from 42 API

Modelos:

https://excalidraw.com/#room=65733053a2453906890f,U0koJjBm_okx7N2PbnrWGQ

https://excalidraw.com/#room=fb6fae1d831e045fdafd,YYe9KxHGi8MoupYT0ZtAYQ

• Set up the development environment: Install and configure the required software tools and libraries, including NestJS, TypeScript framework, and PostgreSQL database.

  Design the user interface: Create wireframes and mockups of the website's user interface, including the game interface, chat, user profiles, and login page.

• Implement the user authentication: Integrate the OAuth system of 42 intranet for user login, and implement password hashing and server-side validation for forms and user input.

• Implement user account features: Allow users to choose a unique name and upload an avatar, enable two-factor authentication, and allow users to add friends and view their profiles and match history.

• Design and implement the chat functionality: Create chat rooms with public, private, and password-protected channels, allow direct messages between users, and implement blocking, kicking, and muting features for channel administrators.

• Design and implement the game functionality: Create a responsive Pong game with matchmaking, customization options, and multiplayer capabilities.

• Test the website thoroughly: Ensure the website is compatible with the latest stable versions of Google Chrome and one additional web browser, and test for security vulnerabilities, errors, and warnings.

• Deploy the website: Launch the website with a single call to docker-compose up --build, and ensure it is running smoothly on the production environment.

• Maintenance and updates: Monitor the website for issues and updates, and ensure it remains up-to-date with the latest stable versions of the software tools and libraries used in the project.

After a user logs in (after Intra's Oauth2), there has to be a way to persist the session for a period of time in order to prevent constant login.
This is solved by generating a JWT and giving to the user to save somewhere (cookies, basically) and use in the transactions with our application.

In the backend, there needs to be the following:

• JWT generation. This implies:
  • A contract of the minimal information in such token to make it easier for the back/front to use this info along the app.
• JWT signature with a secret key or PKA.
• JWT verification with the same key to garantee that we actually emited such access token.
• Token expiration and refresh:
  • Expiration gives a better handling of unauthorized access in case of leaking access tokens.
  • Refreshing a token gives a better experience to the user, allowing a longer lived session with a short lived token, bringing better security.
• Token revocation to handle cases such as user logout.
• Error handling around JWT.

• ESLint
• Prettier
• Case typing
• Arquivos Typescript
• .editorconfig
• Padrão de commit (commitlint, commitzen...)
• Minimo de aprovações em PR
• Proteção de branch
• CI/CD?
• yarn vs npm

Add chat components to front-end

TODO:

• Joining a chat spawns chat messages
• New chat message event should broadcast message to all chat participants
• New chat message event should record new message to db
• New chat message event should refresh the chat component
• Delete chat
• Leaving chat should leave chat and also unsubscribe from chat room
• Create a new chat and joining it
• Joining a protected chat has to type password (displayed as "Privado")
• DMs (private chat)
• Kick a user
• Ban a user
• Mute a user
• Create wrong password warning in protected chat
• Add friend
• DM friend

• React.js
• Next.js (React Framework)
• Vue.js
• Nuxt.js (Vue Framework)
• Remix
• Svelte
• SolidJS
• Astro

• Backend
• Frontend
• DevOps
• Designer?

Victor GPT tip:

Sure, here is a brief list of the roles for the team:

Backend Developer - responsible for developing the backend of the website using NestJS and PostgreSQL, ensuring security and handling server-side validation.

Frontend Developer - responsible for developing the frontend of the website using a TypeScript framework of their choice, ensuring a nice user interface and compatibility with multiple web browsers.

DevOps Engineer - responsible for setting up the server environment and deploying the website using Docker and docker-compose.

Authentication and User Account Developer - responsible for implementing the OAuth system of 42 intranet for user login, user account management, and match history features.

Chat and Game Developer - responsible for implementing the chat system, matchmaking system, and the live Pong game with customizable options.

• Step 1: Setting up NestJS Prisma with PostgreSQL

  • Configure PostgreSQL database connection in app.module.ts
  • Create the Chat Model in Prisma

• Step 2: Setting up the Websockets Gateway

  • Generate a gateway class using Nest CLI: $ nest g gateway app
  • Update the app.gateway.ts file with the necessary code

• Step 3: Creating the NestJS Controller and Service

  • Create the app.service.ts file with the necessary code
  • Update the app.controller.ts file with the necessary code

• Step 4: Implement socket connection events:

  • List chats
  • List chats available for all connected users
  • Create public chat
  • Create private chat
  • Create protected chat with password
  • List messages
  • Create message
  • User joins chat
  • User leaves chat
  • Add another user to chat
  • User give admins to another user
  • Mute another member
  • Unmute another member
  • Kick member
  • Ban member

Send an authentication code to the email received from the 42 API /user/me.

Validate the code.

Precisamos de pelo menos 1 encontro de 30min na semana para que possamos avançar no projeto de forma organizada. Podemos desenvolver de modo assíncrono depois que tivermos tudo organizado.

Description

Create flow of creation and retrieval of users assuming that authentication with 42 Intra is already done.

Suggested Steps:

• Search the DB for the user (unique id can be login, intra ID, etc.)
• If found:
  • return User
• If not:
  • get data from Intra
  • create User and UserProfile in DB
  • return User

Code with Vlad
https://www.youtube.com/@CodeWithVlad/videos

NestJs Course for Beginners - Create a REST API
https://www.youtube.com/watch?v=GHTA143_b-s

NestJS in 100 Seconds
https://www.youtube.com/watch?v=0M8AYU_hPas

docs nestjs
https://docs.nestjs.com/

The backend of Authentication with Intra's Oauth2 is functional and emits JWT to handle auth along the app.
The frontend is not yet connected to the authentication system.

Analisar component implementado com lógica em loop

Add .github/workflows/[action_name].yml file with unit tests from nest

We can use tools to ease up the CSS development like Tailwind, ChakraUI, Patternfly and use its components or styles on top of our own wireframe.

Pages:

• Login
• Register
• User profile
• 2FA confirmation
• Chat
• Game page
• Ranking page
• ....

#57

• Relacionamentos
• Tabelas
• Nomenclaturas
• Estratégias

We need to set the initial project milestones.

These milestones might be synced with the !project/1 weekly deliveries and are subject to change.

Relates to #10