Welcome to the repository of our last 42 common core project! The aim of this project was to create a social network to be used by 42 students. We wanted to give it a little twist and make it fun for everyone to interact with each other, so we decided to give birth to our lovely, Dojo Pong! In Dojo Pong, the students of 42 can join a lobby in penguin form and be there with their friends! They can buy items, play pong, talk to each other on the chat, create chat groups, have a ranking for some competitiveness and much more!
Check it out and have fun!
- TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
- Nest.JS: A progressive Node.js framework for building efficient, reliable and scalable server-side applications.
- Server Sent Events: Server-sent events (SSE) is a technology where a browser receives automatic updates from a server via an HTTP connection. Used for real-time data propagation without the need for speed or websockets.
- Websockets with Socket.IO: Socket.IO enables real-time, bidirectional and event-based communication. Used for the main lobby and pong game.
- PostgreSQL: PostgreSQL is a powerful, open source object-relational database system.
- Prisma: Prisma is a next-generation ORM that can be used to interact with a database and write OOP-like queries.
- TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
- React: A JavaScript library for building user interfaces.
- MUI Joy: A set of components for building a UI with Material-UI. Used as the base for the whole client application (with some custom components imported from MUI Material).
- Recoil: Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React. Used as our main state storage for the whole client.
- MDI: Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
- PixiJS: The HTML5 Creation Engine. Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. Used to draw the main lobby, customization tab and the pong game.
- Clone the repository
- In
envsfolder:- Duplicate
.tokens.env.example, rename to.tokens.envand fill in the environment variables:- 42_CLIENT_ID: Your 42 application's client id
- 42_SECRET: Your 42 application's secret
- SENTRY_DSN: Your Sentry DSN (optional)
- Duplicate
- Run
make envto create the environment files for the compose to get the environment variables. - Run
make client_download_assetsto download the assets for the lobby. This will take a while. We didn't include the assets in the repository due to (obvious) legal reasons. - Run
docker compose up --buildto build and start the application. - Access the application at
http://localhost:3000.
- Edit
envs/.env.productionto change the server's port and the listening interfaces.
The project's content revolves around the Sidebar, where you can navigate through the different tabs of the application. You can open it by pressing ESC
In the lobby you can show off your style! Put on your best outfit and make everyone jealous with your swag.
The pong game can be played in the old classical way, OR you can play it differently! You can play it with Special Powers! The special powers are:
- Fire -> which shoots a fireball, that when it hits the ball, pushes the ball back to your paddle and gives you a cannon to shoot the ball
- Ice -> which shoots a iceball, that when it hits the other player's paddle, slows it, and if the player gets hit again a short amount of time, the paddle will freeze!
- Bubble -> which shoots a bubble, that when it hits the ball, reflects based on the collision point and increases the ball's speed. You can shoot a lot of them at the same time! eheh
- Spark -> which shoots a reverse ball, that when it hits the other player's paddle, it will invert it's controls.
- Ghost -> which shoots a cute ghost, that when it hits any object on the field, it will make it disappear for a short amount of time. You also have mana and energy that regenerates over time! Use it wisely!
How do you start the game? Well, there are a lot of ways!
- Queue for a random game, which will try to match with someone with a similar ELO to yours. Queue matches are always 1v1, your rank will be affected by the result and you recieve credits for playing.
- Create a custom match, where you can invite a friend, allow spectators, choose game mode, ball texture and much more! Custom matches can be 1v1, 1v2, and so on. You can also add a bot to help you out! The rank will not be affected by the result and you recieve a small amount of credits for playing.
- Don't have anyone to play? No worries! You can join public custom lobbies or spectate active games!
In the chat, you can talk to EVERYONE. Chat with who you like. Block who you don't. Send images and gifs. Send invites for Pong. Change some memes with your good friends. Create a group for you and your friends to arrange some pong matches. The chat is yours to use!
If you are a chat administrator, there's some tools for you to use! You can ban, kick, mute, promote, demote and much more!
In the profile you can find all the user's information. You can text them, see their stats, their ranking and the match history.
The ranking every player starts with is 1000. Every loss and win will take or give points to the player. The amount of points will be based on the difference of points between the players.
In the match history you can see all the matches you played. You can see the date, the opponent, the result and the points you won or lost. It also have some stats to see your performance.
The customization tab is where you get to dress your little penguin. Change his/her color, put on some clothes individually or just put on a full outfit. Show your personality and style through your penguin's smile!
All of these can be accquired in the shop. There you can also find some paddle skins, special powers and ball skins! Don't forget to get your unique icon!
You can update your profile information, add 2FA, change theme, etc..!
If you're lost on the lobby keybinds or they conflict with something, you can easly change them in the settings tab!
"Wow, that's a lot of information! How do I keep up with all of this?" Well, you can check your inbox! There you can see all the notifications you have, like friend requests, match invites, etc..!
