Skip to content

Online pong game with chat service. NestJS is used as backend framework and React is used as frontend framework. Socket.io is used to implement chat rooms and game. You can manage friends list or blacklist. Game match will be started by invitations or random matches.

Notifications You must be signed in to change notification settings

WallyPfister/transcendence

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Transcendence

Transcendence

Socket based online pong game


🎬 Preview




πŸ‘©β€πŸ’» Tech Stack

πŸ“ Notion


🚧 Structure

./
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ public/       # index
β”‚   β”‚   └── img/      # image files
β”‚   └── src/
β”‚       β”œβ”€β”€ Game/     # game page
β”‚       β”œβ”€β”€ Login/    # login and auth page
β”‚       β”œβ”€β”€ Main/     # game queue, chat, friend list
β”‚       β”œβ”€β”€ Profile/  # user stats and history
β”‚       β”œβ”€β”€ Rank/     # all users leaderboard
β”‚       β”œβ”€β”€ Signup/   # signup page
β”‚       β”œβ”€β”€ Socket/   # handle multi-page socket events
β”‚       β”œβ”€β”€ Util/     # custom axios
β”‚       └── Verify/   # 2fa code verification
└── backend/
    β”œβ”€β”€ prisma/       # database
    └── src/
        β”œβ”€β”€ auth/     # authentication for login
        β”œβ”€β”€ channel/  # socket based chat
        β”œβ”€β”€ config/   # environment variables
        β”œβ”€β”€ game/     # control game queue
        β”œβ”€β”€ member/   # manage members
        β”œβ”€β”€ pong/     # draw game canvas
        └── prisma/   # prisma ORM

❓ Usage

πŸ–οΈ Clone

$ git clone https://github.com/WallyPfister/transcendence.git

πŸ–οΈ Environment Variables

You have to fill in the env values and change the file name from .env_sample to .env.
For example...

# Two-factor Authentication
MAILER_NAME=[YOUR EMAIL ID]
MAILER_PASS=[YOUR EMAIL PASSWORD]

πŸ–οΈ Execute

To run containers in the background mode...

$ make
See what is happening in the containers...

$ make dev

πŸ’« Features

singup

signup

  • nickname 쀑볡 및 μ‚¬μš© λΆˆκ°€ 문자 확인
  • 졜초 κ°€μž… μ‹œ μ‚¬μš© κ°€λŠ₯ email μ—¬λΆ€ 확인
  • ν”„λ‘œν•„ 사진 등둝
  • two-factor 인증 μ‚¬μš© μ—¬λΆ€ 확인

Login

flowchart

  • 42-Oauth APIλ₯Ό ν†΅ν•œ 1μ°¨ 인증
  • nodemailerλ₯Ό μ΄μš©ν•˜μ—¬ μ „μ†‘ν•œ 이메일 μ½”λ“œλ‘œ 2μ°¨ 인증
  • 둜컬 μŠ€ν† λ¦¬μ§€μ— JWT Access Token이 μ‘΄μž¬ν•˜λŠ” 경우 λ°”λ‘œ 둜그인
  • JWT Access Token이 만료된 경우 Refresh Token을 톡해 μž¬λ°œκΈ‰

Profile

my

  • My Profile λ²„νŠΌμ„ 톡해 μžμ‹ μ˜ profile 확인
  • 친ꡬ λͺ©λ‘ λ˜λŠ” μ±„νŒ…λ°© μœ μ € λͺ©λ‘μ—μ„œ μ›ν•˜λŠ” λ©€λ²„μ˜ profile 확인
  • ν•΄λ‹Ή λ©€λ²„μ˜ level, score, game history 및 달성 achievement λ“± 확인

Game Random Matching

ladder

  • κ²Œμž„ λŒ€κΈ°νλ₯Ό μ΄μš©ν•˜μ—¬ casual 및 ladder κ²Œμž„ 랜덀 맀칭

Game Invite

invite

  • 친ꡬ λͺ©λ‘ λ˜λŠ” μ±„νŒ…λ°© μœ μ € λͺ©λ‘μ—μ„œ μ›ν•˜λŠ” 멀버 casual κ²Œμž„ μ΄ˆλŒ€
  • μ΄ˆλŒ€μ‹œ μƒλŒ€λ°©μ—κ²Œ 수락 및 거절 λ©”μ‹œμ§€ 전솑

rejected

  • μƒλŒ€λ°©μ΄ κ²Œμž„ μ΄ˆλŒ€ 거절 μ‹œ μ΄ˆλŒ€ 거절 μ•ˆλ‚΄

Game

game

  • μ‹€μ‹œκ°„ κ²Œμž„ 진행 상황 λ Œλ”λ§
  • ladder κ²Œμž„μ˜ 경우 결과에 따라 point λΆ€μ—¬ 및 point에 λ”°λ₯Έ level λ³€κ²½
  • achivement 달성 μ‹œ 반영

Ranking

ranking

  • λͺ¨λ“  λ©€λ²„μ˜ μ‹€μ‹œκ°„ λž­ν‚Ή μˆœμœ„ 확인

Chat Admin

admin

  • μ±„νŒ…λ£Έ κ°œμ„€μžμ˜ 경우 Chief AdminκΆŒν•œ λΆ€μ—¬
  • Chief Admin의 경우 λ‹€λ₯Έ μ±„νŒ…λ°© λ©€λ²„μ—κ²Œ Admin κΆŒν•œμ„ λΆ€μ—¬ν•˜κ±°λ‚˜ μ œκ±°ν•  수 있음
  • Admin κΆŒν•œμ„ 가진 경우 μ±„νŒ…λ°© 멀버λ₯Ό Ban, Kick, Mute ν•  수 있음
  • Ban: ν•΄λ‹Ή μ±„νŒ…λ°© μž…μž₯ κΈˆμ§€, Kick: μ±„νŒ…λ°© κ°•μ œ 퇴μž₯, Mute: 일정 μ‹œκ°„ λŒ€ν™” κΈˆμ§€
  • 일반 Admin은 Chief Adminμ—κ²Œ κΆŒν•œ λ°•νƒˆ 및 기타 κΈ°λŠ₯을 μ‚¬μš©ν•  수 μ—†μŒ

Friends & BlackList

others

  • 친ꡬ 및 λΈ”λž™λ¦¬μŠ€νŠΈ λͺ©λ‘ 관리
  • λΈ”λž™λ¦¬μŠ€νŠΈμ— μΆ”κ°€λœ λ©€λ²„μ˜ λ©”μ‹œμ§€λŠ” ν•΄λ‹Ή λ©€λ²„μ—κ²Œ 미전솑

Private Message

dm

  • 친ꡬ둜 λ“±λ‘ν•œ λ©€λ²„μ—κ²Œ private message 전솑 κ°€λŠ₯
  • private message의 경우 νŒŒλž€μƒ‰μœΌλ‘œ ν‘œκΈ°λ˜λ©° 같은 μ±„νŒ…λ°©μ— μžˆμ§€ μ•Šμ•„λ„ μˆ˜μ‹ ν•  수 있음

🌷 Commit Rules

[type] : title body #(issue number)

Commit Type v1.0 (~23/05/14)

  • [FEAT] : μƒˆλ‘œμš΄ κΈ°λŠ₯의 μΆ”κ°€
  • [MODIFY] : κΈ°λŠ₯ μˆ˜μ •
  • [FIX] : 버그 μˆ˜μ •
  • [DOCS] : λ¬Έμ„œ μˆ˜μ •
  • [STYLE] : CSS λ³€κ²½
  • [REFACTOR] : μ½”λ“œ λ¦¬νŒ©ν† λ§
  • [MERGE] : ν’€λ¦¬ν€˜μŠ€νŠΈ 머지
  • [TEST] : ν…ŒμŠ€νŠΈ μ½”λ“œ μž‘μ„±

πŸš€ Contributers

🐿hyunjcho | 🧸sojoo | πŸͺsunghkim | πŸ€sokim | πŸ”­yachoi

About

Online pong game with chat service. NestJS is used as backend framework and React is used as frontend framework. Socket.io is used to implement chat rooms and game. You can manage friends list or blacklist. Game match will be started by invitations or random matches.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published