GithubHelp home page GithubHelp logo

42_transcendance's Introduction

🏓 Project Overview

This project is a full stack web app allowing a user to register, connect with friends, talk to friends and play with friends. It is a N(est)R(eact)N(odejs)P(ostges) stack application

🧑 Registration and Updates interface

  • Implementation of OAuth to connect with 42 API
  • Implementation of form registration with unique nickname and password and an avatar
  • Implementation of two factor authentication with google Authenticator
  • Implementation of user information's updates (nickname, password and avatar)
  • Implementation of user status updates

💬 Chat interface

  • Implementation of real-time communication between user(s)
  • Creation of public, private, public with password channels
  • Creation of private conversation between two users
  • Access to user profile from conversation
  • Access to game interface from chat interface
  • Implementation of blocking users feature
  • Implementation of roles and hierarchy :
    • The owner of a channel is on top of the hierarchy and has the rights to ban/mute/kick others members and admins (He is automatically an admin)
    • The admins of a channel can ban/mute/kick other members but not other admins or the owner
    • The members can only join channels or leave it

🏓 Game interface

  • Implementation of a live pong
  • Implementation of a matchmaking system - the users can join a queue until they get automatically matched with someone else.
  • Implementation of the customisation Options (eg. Power-ups, Different Maps), however, the user should be able to select a default version of the game.
  • Implementation of the responsivity for the game

🧑‍💻 Friends interface

  • Implementation of friends requests
  • Implementation of friends acceptance
  • Implementation of friends suggestions

🖥️ User profile interface & Leaderboard

  • Access to user profile match history
  • Access to user profile statistics
  • Access to the leaderboard
  • Access to the user profile and informations (status, name ...)


⌨️ Development

React Nest Docker PostgreSQL Prisma

🏃 To run th project

For the Authentication with 42 and the connection with the database, a ".env" is needeed with the secret variables
Contact us to get it and run the project with :  docker-compose up --build

42_transcendance's People

Contributors

alicia-bites avatar amina-elk avatar barrierantho avatar elkamina avatar

Stargazers

avatar avatar

Watchers

avatar

42_transcendance's Issues

Main Game

Main Game

Subject

  1. Users should be able to play a live Pong game versus another player directly on the website.
  2. There must be a matchmaking system: the user can join a queue until they get automatically matched with someone else.
  3. 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).
  4. 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.
  5. The game must be responsive!

Relative Issue

Issue Description
#30 Matchmaking
#38 Game
ToDo Update Score

Workflow

flowchart TD
    start((start))
    stop((end))
    match[Matchmaking]
    game[Game]
    updateScore[Update score]

    start --> match
    match --> game
    game --> updateScore
    updateScore --> stop
Loading

Define 'administrator' role

  1. Le propriétaire du channel en est aussi un administrateur. Il peut donner le rôle d’administrateur à d’autres utilisateurs.

  2. Un utilisateur qui est administrateur d’un channel peut expulser, bannir ou mettre en sourdine (pour un temps limité) d’autres utilisateurs, mais pas les propriétaires du channel.

PowerUp

PowerUp

🔝 Parent #28 🔝

  • They are part of two categories:
    • The attack with an icon #FF3333
    • The defense with an icon #33ADFF
  • Powers are automatically generated after a time of live play1 no matter if they are not used by the user
  • Each player can use his power when he wants
  • Load time of powers is fixed

Power List

Type Name Description Development State
Attack SpeedUp Speed Up the speed of the ball ToDo
Defense SpeedDown Speed Down the speed of the ball ToDo
Attack Reduce Bar Reduce the bar of the opponent To discuss
Defense Enlarge Bar Enlarge the bar of the player To discuss
Attack Freeze Freeze the bar of the opponent during few seconds To discuss

Data Model

classDiagram
    %% Class details
    %% Legend:
    %%    Public (+)
    %%    Private (-)
    %%    Protected (#)
    class Power{
        String name
        String description
        Image Icon
        Time loadTime
        SetState()
        Use()
    }
Loading

Footnotes

  1. Live play = When the ball is still alive ↩

Create a profile page for the users

  1. Des stats (telles que : victoires et défaites, rang et niveaux, hauts faits, etc.) doivent être affichées sur le profil de l’utilisateur.

  2. Chaque utilisateur doit avoir un Match History (historique comportant les parties 1 contre 1, les niveaux et ainsi de suite). Toute personne loguée doit pouvoir le consulter.

  3. Grâce à l’interface de chat, l’utilisateur doit pouvoir accéder aux profils d’autres joueurs.

WEBPACK_ERROR

image

Cas de figure :
Ajout d'un state dans friendshipSlice et d'un thunk middleware pour Fetch le user actuel et mettre à jour l'Avatar.
quand j'essaie d'appeler le thunk middleware 'FetchActualUser' dans un useEffect dans 'Navbar', j'ai l'erreur ci-dessus.

Définir la fonction 'bloquer'

L’utilisateur doit pouvoir en bloquer d’autres. Ainsi, il ne verra plus les messages envoyés par les comptes qu’il aura bloqués.

Score

Score

🔝 Parent #28 🔝

Calculation

Left Player Score Position

x = 1 * board.width / 4
y = 1 * board.height / 6

Right Player Score Position

x = 3 * board.width / 6
y = 1 * board.height / 6

Data Model

classDiagram
    %% Class relation
    Board <.. Score

    %% Class details
    %% Legend:
    %%    Public (+)
    %%    Private (-)
    %%    Protected (#)
    class Score{
        Number posX
        Number posY
        SetValue()
    }
Loading

Profile Page - My profile page

Quand on consulte sa propre page de profil, la donnée 'Friend/ Not Friends ...' est affichée.
Condition à rajouter pour ne pas l'afficher si c'est mon profil que je veux consulter

image

Kick member out

If the member is an admin,

he can kick a member out of a channel, which means the member will automatically leave the channel.

[ features/BugAvatarRequests ] : Suggestions

5 users utilisés : Fraîchement créés donc sans amis et sans demandes d'amis
Objectif du test : vérifier que tous les users qui se sont connectés ont bien tous les autres en Suggestions d'amis

attendu : les 5 users ont tous les autres sauf eux-memes en suggestions d'amis

résultat : le 5ème user n'a qu'un seul user dans les suggestions. C'est uniquement quand je rafraichis que tous les autres apparaissent mais il apparait bien en temps réel chez les autres .

Edit : Je rajoute un 6 user avec les mêmes conditions (sans amis et sans demandes damis)
Ses suggestions sont très étranges : Il apparait lui même et un autre user uniquement et c'est quand je rafraichis, la bonne liste est affichée

C'est chelou #Zaho

Net

Net

🔝 Parent #28 🔝

General

Represent the graphical board separation between the two players

Board

Board

🔝 Parent #28 🔝

General

The board represent the main component of the game. It includes every game objects.

Data Model

classDiagram
    %% Class details
    %% Legend:
    %%    Public (+)
    %%    Private (-)
    %%    Protected (#)
    class Board{
        Number width
        Number height
        Color color
        SetSize()
        SetColor()
    }
Loading

Validation Check List

General

This issue will list every test point

Template of the test

  • [Name of the topic] Description of the test

Issues Relation:

  • <Type the # and the number of the issue>

Description:
Description of the test

Context:

  • Description of the steps to reproduce the test.

Expected result:

  • Description of the expected result

List

  • [#30]Duplicated name for a channel name and a game room name

Issues Relation:

Description:
Description of the test

Context:

  • Signup with a user name test_1.
  • Create a public channel with a name test_3.
  • Open a new web browser tab.
  • Signup with a user name test_2.
  • Join the public channel test_3.
  • Open a new web browser tab.
  • Signup with a user name test_3.
  • Request a 'matchmaking`.
    ⚠️ Make sure to have full game room or no room which will create a game room with the user name as the id of the game room.
  • Signup with a user name test_4.
  • Request a 'matchmakingto join the game roomtest_3`.

Expected result:

  • No issue between the channel test_3 and the game roon test_3 when the user test_1 and test_2 are chating and/or when the user test_3 and test_4 are playing.
  • [#38] Refresh the page during a game will change the socket id of the player

Issues Relation:

Description:
Description of the test

Context:

Expected result:

  • The player must be able to continue playing.
  • [#38] Second player must be disconnected when the room owner is disconnecting

Issues Relation:

Description:
Description of the test

Context:

Expected result:

  • The second player must be disconnected
  • The second player status must be changed
  • [General, #38] Change the status of the user when in a game and quitting the application

Issues Relation:

Description:
Description of the test

Context:

Expected result:

  • First the status of the user must be changed by Online because exiting Game component.
  • Then the status of the user must be changed by Offline because exiting the App component (cookie handling).

Ball

Ball

🔝 Parent #28 🔝

  • Is a circle
  • At each start
    • Placed at the center of the board
    • The speed must be the default one
    • The direction is defined by player winning the last point

Calculation

Start Position

x = 2 * board.width / 4
y = 3 * board.height / 6

Data Model

classDiagram
    %% Class relation
    Board <.. Ball

    %% Class details
    %% Legend:
    %%    Public (+)
    %%    Private (-)
    %%    Protected (#)
    class Ball{
        Number posX
        Number posY
        Number radius
        Number defaultSpeed
        Number speed
        Boolean visible
        Color color
        SetColor()
        SetSpeed()
    }
Loading

How init the project 

# root
npm install
docker-compose up

# Go to server dir
cd server
npm install

# Update prisma database
npm run prisma:dev:deploy

# Inject dummy data
npx prisma db seed

# Display prisma database in a web browser
npx prisma studio

# Run the server
npm run start:dev

# Go to client dir
cd ../client

 # Clean the cache in case of memory issues
npm cache clean --force

npm install

# Run the client
npm run start

Bug 1 - Chat :

Bug Chat

Je me co avec mon compte 42 - je choisis, Anthony pr parler avec dans le chat il me recupere bien Anthony mais ma photo de profil et quand je console.log ; displayed channel et current user dans Footer, jai ael-khat 2 fois au lieu de ael-khat t Anthony

Player

Player Bar

🔝 Parent #28 🔝

General

  • Is a rectangle
  • Width is always smaller or equal to the height
  • The height can not equal or bigger of the board's height
  • The width is always equal to a fixed value

Calculation

Left Player Bar Start Position

x = k1
y = (3 * board.height / 6) - (player.width / 2)

Right Player Bar Start Position

x = board.width - k1 - player.width
y = (3 * board.height / 6) - (player.width / 2)

Data Model

classDiagram
    %% Class relation
    Board <.. Player
    Player <.. Power

    %% Class details
    %% Legend:
    %%    Public (+)
    %%    Private (-)
    %%    Protected (#)
    class Player{
        Number id
        String name
        Number posX
        Number posY
        Number width
        Number height
        Color color
        SetColor()
        Move()
    }
Loading

Footnotes

  1. k = Variable depending of the width of the board. ↩ ↩2

add default avatar

--> If I am signed with a user that has no avatar.
--> If I send a friend request

ERROR from the prisma saying it cannot add a avatar equal to NULL.

to do :

  • add a protection in case avatar is NULL
  • add a default avatar assigned to all users

Game

Game

🔝 Parent #28 🔝

General

Represents a game where the player will play together.

Game Settings

Name Description Type Development State
Total of set Define the total of set of the game Number between 1 and 3 To discuss
Total of point per set Define the total of point per set Number between 1 and 11 To discuss
Default Map Define the type of the map Toggle button:
True = Default
False = Dropdown list of map		 To discuss
PowerUp Activation of the powerup Toggle button To discuss

Data Model

classDiagram
    %% Class relation
    Game <.. Board
    Board <..Score
    Board <.. Ball
    Board <.. Player
    Player <.. Power

    %% Class details
    %% Legend:
    %%    Public (+)
    %%    Private (-)
    %%    Protected (#)
    class Game{
        Number id
        Date createdDate
        Number totalSet
        Number totalPoint
        String mapName
        Boolean power
        User players [ ]
    }
Loading

id

Represents the id of the game to handle matchmaking and also handle visitors for watching game.

createdDate

Represents the date of the creation of the game.

totalSet

Represents the total of playing set.

totalPoint

Represents the total of point to win a set.

mapName

Represent the map during the game.

power

Represents the option to activate power during the game.

players

Represents an array of User class including the two players.

Class Relation

The game must be composed of different component (more details in the section Data Model)

Level Name Description Specification Development State
1 Board Canvas to handle the entire game Fixed #33
2 Score Text Text to display the score of a player Fixed #34
2 Net A graphic to separate distinctly each player area Fixed #39
2 Ball A graphic circle to represent the ball of the game Will move #32
2 Bar player A graphic bar to represent the bar of the player Will move #31
3 Power Icon representing the active power Fixed #29

Matchmaking

Matchmaking

🔝 Parent #28 🔝

General

Represents the logic to find two User in waiting for a game and redirect them to a #38.

To handle request of the subject 1 in the easiest way. We must handle matchmaking using default game settings (see #28 ).

To handle request of the subject 2, a concept of queue must be used. To do that we should use the concept of the stack by:

  • Adding player at the top of the stack
  • Removing player at the bottom of the stack
    The idea to match betwwen two players is to use the indexOf the array:
    • Even index = search the next player in the array.
    • Odd index = search the previous player in the array.

Because the subject does not specify it, each game will be public.

Workflow

General

flowchart TD
    start((start))
    stop((end))
    btnMatch[Button ' Matchmaking']
    btnCancel[Button 'Cancel']
    addPlayer[Add the player to the queue]
    removePlayer[Remove the player from the queue]
    wait[Waiting time]
    findPlayer[Find a player]
    game[Create a game]
    setStatus[Change the user status]

    start --> btnMatch
    btnMatch --> |Clicked| addPlayer
    addPlayer --> wait
    wait --> btnCancel
    wait --> |3 sec| findPlayer
    findPlayer --> |Player found| game
    findPlayer --> |Player not found| wait
    btnCancel --> |Clicked| removePlayer
    game --> |Game id| setStatus
    setStatus --> |player id| removePlayer
    removePlayer --> stop
Loading

Add a player tot the queue

Step 1: Only connected users

flowchart
    %% EMPTY QUEUE
    subgraph queue[Queue of matchmaking]
    end

    %% CONNECTED PLAYERS
    subgraph users[Connected users]
        amina[Amina]
        alicia[Alicia]
        antho[Antho]
    end
Loading

Step 2: Amina clicked on matchmaking

flowchart LR
    %% EMPTY QUEUE
    subgraph queue[Queue of matchmaking]
        p0[Amina index 0]
    end

    %% CONNECTED PLAYERS
    subgraph users[Connected users]
        amina[Amina]
        alicia[Alicia]
        antho[Antho]
    end

    amina -..-> |requesting matchmaking| p0
Loading

Step 3: Alicia clicked on matchmaking

flowchart LR
    %% EMPTY QUEUE
    subgraph queue[Queue of matchmaking]
        p1[Alicia index 1]
        p0[Amina index 0]
    end

    %% CONNECTED PLAYERS
    subgraph users[Connected users]
        amina[Amina]
        alicia[Alicia]
        antho[Antho]
    end

    alicia -..-> |requesting matchmaking| p1
Loading

Find a player

flowchart TD
    start((start))
    stop((end))
    check{Check the queue}
    isEven{Is player even}
    getNext[Get the next player id]
    getPrev[Get the previous id]
    isNull{Is id null}
    retNull[Return null]
    retPlayer[Return player id]

    start --> check
    check --> |queue.length > 1| isEven
    check -->  |queue.length <= 1| retNull
    retNull --> stop
    isEven --> |true| getNext
    isEven --> |false| getPrev
    getNext --> isNull
    getPrev --> isNull
    isNull --> |true| retNull
    isNull --> |false| retPlayer
    retPlayer --> stop
Loading

Enhancement

Implement a matchmaking research with game criteria:

  • Total of set
  • Total of point per set
  • Default Map
  • PowerUp

auth & websockets

Deux tabs, deux users.

Tab1 -> usr1
Tab2 -> usr2

Si je rafraichis la tab de usr1, ca delog usr2 et met usr1 à la place !

End loop playing status

General

When the user is requesting a matchmaking, his status is changed from Online to Playing which also request a socket creation.
His status is used to avoid the user to play several game on different web session and/or web browser tab.
If the user tries to connect on different web session and/or web browser tab and tries to access to new matchmaking. Then he will not open a new socket for a new game.
However if the application crashs, his status will never be updated from Playing to Online. And the user will never be able to play anymore until a manual change of the user status in the database.

Enhancement

At the login, check if the player is already playing. If not set his status to Online, otherwise let it as Playing

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.