From 7223e7eb0a9b1ca3a070b934b53414ef8756b4e3 Mon Sep 17 00:00:00 2001 From: Lilly Kunne Date: Fri, 5 Jun 2026 11:49:12 +0200 Subject: [PATCH] [New] [#163] Uploaded Readme and fixed second map --- README.md | 335 ++++++++++++++++++++++- apps/game/src/game/spawning/maps/map2.ts | 35 +-- 2 files changed, 329 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index d1ad0914..e3eb31a5 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,333 @@ +_This project has been created as part of the 42 curriculum by sikunne, tbui-quo, pschmunk, mkhavari and schiper_ +# Description -Primsa ORM command to run to generate migrations: +The project `Ft_transcendence` sets up a website on the local machine, which serves as a tool for socializing with others, as well as playing a game and tracking the statistics for said game. +The game features multiplayer for multiple people logged into different accounts in different browser tabs, to allow for a local split screen PvP Worms Experience. -docker exec -it npx prisma migrate dev --name +# Instructions -docker exec -it auth_service sh -lc "cd /app && npx prisma migrate dev --name " +> ! This project can only be run on a Linux machine in its current configuration. +Make sure you have Github installed:
+`git --version` should show at least `git version 2.34.1` +If not, then install and configure the git package on your local machine. +Copy this repository on your local machine with: --admin panel (frontend) ( CRUD) -(disable user account) -(change roles for account) -(force logout) -(admin should be able to search up user's profile)++ +``` +git clone git@github.com:TransendenceJob/TransendenceJob.git +``` --user profile page currently doesn't display any of the accounts data (frontend) --fetch stats from user , we have a stats service --clan/friend list + chat/ social. +Then copy the `.env.example` file found in the projects root and call it `.env`.
+(If you have access to Thangs Google Auth Tokens you can add them here to allow logging in via Google Auth).
+Then make sure you have `make` and `docker` installed: +`make --version` + +``` +docker --version +``` + +If either is missing, install the packages `make` or `docker` to your local Linux machine or wsl distro. + +> This project was set up with:
+> git version 2.34.1
+> GNU Make 4.3
+> Docker version 27.3.1, build ce12230 + +In order to start up the project now, run: + +``` +make prod +``` + +Then head to the browser of your choice and enter `localhost:8080` into the search bar, to access our page. +Should you get a \***\*502 Bad Gateway** Error, simply wait for a few seconds, reload the page and the website will be up. + +You should then start by signing up in the top right, and making an account in order to access all the functionality of our project. + +Alternatively, if you have set up the Google Auth in the previous steps, you can use Google Authentication to create your account. + +You may now browse our beautifull website to your hearts content. + +# Resources + +## Container Comunication + +The ./packages folder at the root of the repository features documentation over the communication between different containers. + +## Code Documentation + +Much of the code features a comment at the start of a function to describe the usage and purpose of it, as well as potential edge cases and security risks. + +## Usage of AI + +AI played an essential role in the creation of this project, as most of the developers on this project have never had any experience with the many challenges that such an ambitious project creates. + +### Research + +AI was used in order to quickly peruse the Documentation of the many programming languages that were used in this project, as well as learning about all the new concepts encountered during the course of this project.
+ +### Repetitive Tasks + +Ai was used to help with simple, repetitive work, like searching through files with more then a thousand lines of code for typos and errors that would too long to check by hand. + +### Unit testing + +Simple unit and e2e tests were created with AI in order to keep the focus of the developers on the actual project, and allowing for a broader spectrum of potential edge cases to test against. + +### Documentation + +Some Documentation was created with AI to help focus on the coding, and less on keeping outdated documentation up to date, in order to deal with legacy code and tech debt.
+The fields for the database were filled with AI. + +# Team Information + +## sikunne - Lilly + +- Game Developer +- Full Stack Developer + +Lilly created the the structure for the game server in NestJs and Typescript, as well as setting up a primitve website with NextJs that uses a BabylonJs Canvas to display the game.
+She set up the communication between the different Clients and the Server using Websockets and Socket.io as well as creating a system for clear comunication between the endpoints. + +## schiper - Stefan + +- Project Manager / Scrum Master +- Technical Lead +- Product Owner +- Backend Developer
+ +Stefan set up the entire base of the project, creating the Makefile, Docker Containers and Docker compose, as well as setting up Grafana in order to monitor the downtime and behaviour of the different Containers.
+He monitored the different devlelopers and taught them to use a modern approach to developing in a team, acting as a Scrum Manager, and teaching the use of Github Workflows, Tickets with Sprint and a Kanban Board. + +## tbui-quo: Thang + +- Frontend Developer
+ +Thang set up the entire Web Presence for the Frontend of the Page, using NextJs / React, Tailwind / CSS, Typescript and Html.
+He was instrumental in working together with the Databases to create user profiles and tracking acheivements using Prisma as well as working with the gameserver running in NestJs to implement different lobby settings.
+ +## mkhavari - Mohamad Javad + +- Database Specialist +- Backend Developer
+ +Mohamad was in charge of our PostgresSQL databases, and used Prisma ORM to store the data, users and persistant data for our webpage to keep track of accounts even after the containers restart.
+He also set up a stats service which can keep track of game statistics, acheivements and keep them persistant on the user account. + +## pschmunk - Philipp + +- Game Developer +- Backend Developer + +Philipp lead the Design Decisions for the Game, including his previous knowledge as a game developer to help limit the scope of the project.
+He used the Havoc Physics Engine, BabylonJs, Raycasting and Math to create our own phyics system to allow a similar movement to that of the game [`Worms W.M.D.`](https://en.wikipedia.org/wiki/Worms_W.M.D). + +# Project Management + +The team held multiple meetings, discussing strategies and ideas on which modules should be implemented and their time requirements.
+Work was distributed in meetings in theory, and then split up via Github Tickets with a Kanban Board.
+Comunication was first done with Discord, while Slack was still having issues, until the team fully switched to using Slack.
+Google Docs was used to work together on a shared vision for the game.
+The team created Flowcharts with Miro for better understanding.
+ +# Technical Stack + +## Frontend + +NextJs and React were used to create a Webpage, which was formatted with Tailwind CSS and Html. + +## Backend + +The backend traffick arrives through an Nginx container is redirected to a container running NestJs, which is then forwarded to the microservices. + +## Database + +Them team used PostgreSQL to set up Databases because of its ease of use, and its functionality of working together with ORMs like Prisma. + +## Other tech + +Websockets using Socket.io were used to enable fast comunication during the game.
+The whole project was set up in a Docker Containers.
+We use Redis to create a cache and create Sessions.
+ +# Database Schema + +? + +# Feature List + +## Wepage + +Thang created a page which holds information about the project and team, as well as allowing access to the other features we have created.
+Heading to localhost:8080 will serve you the page, which you can then maneuver. + +## Accounts and user data + +Mkhavari and Thang worked on creating a system to create user accounts for the page, which can keep track of a users data.
+Head to the page and then click in the top right to sign in or sign up and make an account. +You can then head to the user page and view your account data. + +## Game + +Phillip and Lilly worked together on creating a game that can be played together on local multiplayer with different accounts.
+Sign in to the page with multiple accounts, and press the button to start a game. Then get to the lobby with different tabs, change settings and ready up. + +# Modules + +## [2/2] Framework Frontend and Backend + +We used NextJs as a framework for the backend and Nestjs as a framework for the frontend.
+We chose this because we would need to have some framework anyways, so might as well get points for it.
+Everybody worked on this. + +## [2/2] Websockets + +We use Sockets.io as a framework to create websockets which is used during the game to sync funcionality.
+Websockets were an easy choice since we wanted to create a multiplayer game.
+Stefan, Thang and Lilly did this. + +## [2/2] User Interaction + +There is a global chat, a profile page and a minimal friend system.
+We wanted to track the game data on a page and this module overlapped with a lot of other stuff, which is why we chose it.
+Stefan and Thang worked on this. + +## [2/2] User Management + +There is a profile page, which displays the users information, which includes an avatar and a list of your friends.
+This was an easy module to do, because we had already made accounts for different.
+Stefan and Thang worked on this. + +## [?/1] Game Statistics + +There exists a mock data for a match history, however it is not filled with data.
+Acheivements exist and are tracked.
+This was good module to choose that overlaps with databases.
+Philipp and Mohamad worked on this. + +## [1/1] ORM + +We use Prisma as an ORM for our Databases.
+We chose this because some of us like databases.
+Mohamad worked on this. + +## [1/1] Remote Auth + +We use Googles OAuth 2.0 to allow the signing in with your Google Account into the webpage.
+This was a cool module, so we chose it, and it made developing easier.
+Stefan did this. + +## [2/2] Advanced Permission System + +There exists an admin panel which can be used only be the admin to manage some users.
+This overlapped with the usesrs, so we chose this module.
+Stefan did this. + +## [2/2] Web-based Game + +We have a Web-based Game that is real time multiplayer +with with a clear win/loss condition and in 3D.
+We had 2 people who wanted to do this module, sow we chose it.
+Lilly and Philipp did this. + +## [2/2] Multiplyer Game + +Up to 4 people can play a game synchronized together.
+This was an interesting challenge, so we chose it.
+Lilly and Philipp did this. + +## [2/2] 3D Graphics + +The game was created in BabylonJs with smooth interaction and a 2d game in 3d space.
+Seemed like an easy module, since we had to use a framework anyways, so why not a 3D one.
+Lilly and Philipp did this. + +## [2/2] Monitoring + +We have Grafana set up to check the different Containers health.
+This was an easy choice because it helped with development.
+Stefan did this. + +## [1/1] Gamification + +There exists an acheivemnent system which rewards you with a badge on your profile page.
+Seemed like an easy choice for the game.
+Thang, Philipp and Mohamad did this. + +## [1/1] Customization + +There exists the option to choose different maps and have a different setting for a different amount of worms per player.
+Quick choice for free points because oru game already supported this stuff.
+Thang and Lilly did this. + +## [2/2] Microservice + +All the different services are set up in their own containers with docker.
+We were gonna do the whole system like this anyways, so might as well get the module for it.
+Everyone did this. + +# Individual Contributions + +For more info read the modules section + +# Lilly + +Worked on the game and page fullstack. + +- Framework Frontend and Backend +- Websockets +- Web-based Game +- Multiplayer Game +- 3D Graphics +- Customization +- Microservices + +# Phillip + +Worked on the acheivements and game + +- Framework Frontend and Backend +- Game statistics +- Web-based Game +- Multiplayer Game +- 3D Graphics +- Gamification +- Microservices + +# Thang + +Worked on the webpage, acheivements and users + +- Framework Frontend and Backend +- Websockets +- User interaction +- User management +- Customization +- Gamefication +- Microservices + +# Mohamad + +Worked on the game statistics and acheivements + +- Framework Frontend and Backend +- Game Statistics +- ORM +- Gamefication +- Microservices + +# Stefan + +Set up basically everything + +- Framework Frontend and Backend +- Websockets +- User interaction +- User management +- Remot Auth +- Advanced Permission System +- Monitoring +- Microservices diff --git a/apps/game/src/game/spawning/maps/map2.ts b/apps/game/src/game/spawning/maps/map2.ts index 4f33c1fc..00076d56 100644 --- a/apps/game/src/game/spawning/maps/map2.ts +++ b/apps/game/src/game/spawning/maps/map2.ts @@ -1,31 +1,6 @@ export const map2 = [ - [58.8, 461.4], - [114.0, 431.0], - [140.0, 403.0], - [179.0, 386.0], - [226.0, 392.0], - [254.0, 409.0], - [262.0, 434.0], - [280.0, 454.0], - [306.0, 470.0], - [338.0, 460.0], - [349.0, 428.0], - [379.0, 408.0], - [382.0, 371.0], - [407.0, 356.0], - [459.0, 356.0], - [470.0, 380.0], - [519.0, 388.0], - [550.0, 359.0], - [562.0, 328.0], - [586.8, 300.4], - [670.0, 293.0], - [732.0, 308.0], - [744.0, 347.0], - [778.0, 370.0], - [790.0, 369.0], - [790.0, 576.0], - [34.0, 576.0], - [36.0, 474.0], - [58.8, 461.4] -]; \ No newline at end of file + [40, -30], + [38, -25], + [-38, -25], + [-40, -30], +];