syamaguc / ft_transcendence

ft_transcendence

sample.transcendence.mp4

Overview

We created a web application with chat and games.

Requirement

• docker compose
• chrome or safari
• 42 API Key (Required if using 42 API)

Usage

If you want to use the 42API, first you need to put the correct values in the file.

/backend/api/.env.sample/default.env

# 42Access
UID=''
SECRET=''

Then, make build.

You can access our app by going to http://localhost:3001

Makefile

• build: Execution including image creation
• db: Creating a default user and a random user
• restart: Restart container
• down: Stop container
• image_clean: Delete all images
• volume_clean: Delete all volumes
• clean: Delete all information on inactive containers (some may remain)
• fclean: clean and volume_clean and image_clean

Features

• Backend is NestJS
• Frontend is NextJs
• User
  • Sign up using 42API is available
  • You can also register using your password
  • You can change your profile
  • Friend function is available
  • Block function is available
• Chat
  • You can create public, private, and protected channels
  • To write to a channel, you need to JOIN the channel
  • The person who created the channel becomes the owner and can appoint an administrator and even be the administrator themself
  • Administrators can ban or mute
  • You can invite friends to chat
  • DM functionality is also available
• Game
  • Created with respect to the game "pong"
  • You can invite other users to pong
  • You can also play pong with random matching
  • You can see the game results and other information
  • You can watch other people's games

Author

Yuske Fukuyama: github

U (mfunyu): github

knoda: github

syamaguc: github

kota (ksuzuki): github

ft_transcendence's Issues

Profileはスクロールが必要なので、スクロール可能なLayoutを新たに用意する

Chat: backendのpassword管理

Protected チャンネルのpassword管理

• passwordをbackendでhash化してDBに保存する
• joinRoom時にpasswordを照合

Chat : チャンネルの表示関連（フロント）

チャンネル周り

• Passwordによる非表示設定→kotaさん
• Banしたユーザーはチャンネルに参加できない（channel.membersには残す？）

メッセージ周り

• Muteされたユーザーのメッセージを非表示→kotaさん
• Blockしたユーザーのメッセージを非表示→fukuyamaさん待ち

OpenAPI

メモ

Chat: 細かなデザインに関する問題

細かなfrontのissue

• messageに横幅の指定を追加（messageが長すぎるときに横に表示されてしまう）
• 最新messageを下に固定（上にスクロールできるように）
• message送信内容の改行対応
• sidebarとmiddlebarのサイズを固定
• channel名が長いときの対応

ユーザーのログイン回数をDBで管理

Basic Chat 機能実装

Frontend

• 大まかなfrontend実装

Details

• 常に最下部までスクロール
• 左側にはアイコン表示

Backend

• データベース設計
• ソケット通信

game部分で長すぎる名前の時の処理

build error on M1 Mac

#6 25.50 npm ERR! code 1
#6 25.50 npm ERR! path /api/node_modules/bcrypt
#6 25.50 npm ERR! command failed
#6 25.50 npm ERR! command sh -c node-pre-gyp install --fallback-to-build
#6 25.50 npm ERR! Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/api/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/api/node_modules/bcrypt/lib/binding/napi-v3 --napi_version=8 --node_abi_napi=napi --napi_build_version=3 --node_napi_label=napi-v3' (1)
#6 25.50 npm ERR! node-pre-gyp info it worked if it ends with ok
#6 25.50 npm ERR! node-pre-gyp info using [email protected]
#6 25.50 npm ERR! node-pre-gyp info using [email protected] | linux | arm64
#6 25.50 npm ERR! node-pre-gyp info check checked for "/api/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" (not found)
#6 25.50 npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.0.1/bcrypt_lib-v5.0.1-napi-v3-linux-arm64-musl.tar.gz
#6 25.50 npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.0.1/bcrypt_lib-v5.0.1-napi-v3-linux-arm64-musl.tar.gz
#6 25.50 npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v93 ABI, musl) (falling back to source compile with node-gyp)
#6 25.50 npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/kelektiv/node.bcrypt.js/releases/download/v5.0.1/bcrypt_lib-v5.0.1-napi-v3-linux-arm64-musl.tar.gz
#6 25.50 npm ERR! gyp info it worked if it ends with ok
#6 25.50 npm ERR! gyp info using [email protected]
#6 25.50 npm ERR! gyp info using [email protected] | linux | arm64
#6 25.50 npm ERR! gyp info ok
#6 25.50 npm ERR! gyp info it worked if it ends with ok
#6 25.50 npm ERR! gyp info using [email protected]
#6 25.50 npm ERR! gyp info using [email protected] | linux | arm64
#6 25.50 npm ERR! gyp ERR! find Python
#6 25.50 npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration
#6 25.50 npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON
#6 25.50 npm ERR! gyp ERR! find Python checking if "python3" can be used
#6 25.50 npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error
#6 25.50 npm ERR! gyp ERR! find Python checking if "python" can be used
#6 25.50 npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error
#6 25.50 npm ERR! gyp ERR! find Python
#6 25.50 npm ERR! gyp ERR! find Python **********************************************************
#6 25.50 npm ERR! gyp ERR! find Python You need to install the latest version of Python.
#6 25.50 npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
#6 25.50 npm ERR! gyp ERR! find Python you can try one of the following options:
#6 25.50 npm ERR! gyp ERR! find Python - Use the switch --python="/path/to/pythonexecutable"
#6 25.50 npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)
#6 25.50 npm ERR! gyp ERR! find Python - Set the environment variable PYTHON
#6 25.50 npm ERR! gyp ERR! find Python - Set the npm configuration variable python:
#6 25.50 npm ERR! gyp ERR! find Python   npm config set python "/path/to/pythonexecutable"
#6 25.50 npm ERR! gyp ERR! find Python For more information consult the documentation at:
#6 25.50 npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
#6 25.50 npm ERR! gyp ERR! find Python **********************************************************
#6 25.50 npm ERR! gyp ERR! find Python
#6 25.50 npm ERR! gyp ERR! configure error
#6 25.50 npm ERR! gyp ERR! stack Error: Could not find any Python installation to use
#6 25.50 npm ERR! gyp ERR! stack     at PythonFinder.fail (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:330:47)
#6 25.50 npm ERR! gyp ERR! stack     at PythonFinder.runChecks (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:159:21)
#6 25.50 npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:202:16)
#6 25.50 npm ERR! gyp ERR! stack     at PythonFinder.execFileCallback (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:294:16)
#6 25.50 npm ERR! gyp ERR! stack     at exithandler (node:child_process:404:5)
#6 25.50 npm ERR! gyp ERR! stack     at ChildProcess.errorhandler (node:child_process:416:5)
#6 25.50 npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
#6 25.50 npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
#6 25.50 npm ERR! gyp ERR! stack     at onErrorNT (node:internal/child_process:477:16)
#6 25.50 npm ERR! gyp ERR! stack     at processTicksAndRejections (node:internal/process/task_queues:83:21)
#6 25.50 npm ERR! gyp ERR! System Linux 5.10.104-linuxkit
#6 25.50 npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/api/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=/api/node_modules/bcrypt/lib/binding/napi-v3" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=3" "--node_napi_label=napi-v3"
#6 25.50 npm ERR! gyp ERR! cwd /api/node_modules/bcrypt
#6 25.50 npm ERR! gyp ERR! node -v v16.13.0
#6 25.50 npm ERR! gyp ERR! node-gyp -v v8.2.0
#6 25.50 npm ERR! gyp ERR! not ok
#6 25.50 npm ERR! node-pre-gyp ERR! build error
#6 25.50 npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/api/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/api/node_modules/bcrypt/lib/binding/napi-v3 --napi_version=8 --node_abi_napi=napi --napi_build_version=3 --node_napi_label=napi-v3' (1)
#6 25.50 npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/api/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
#6 25.50 npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
#6 25.50 npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
#6 25.50 npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
#6 25.50 npm ERR! node-pre-gyp ERR! System Linux 5.10.104-linuxkit
#6 25.50 npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/api/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
#6 25.50 npm ERR! node-pre-gyp ERR! cwd /api/node_modules/bcrypt
#6 25.50 npm ERR! node-pre-gyp ERR! node -v v16.13.0
#6 25.50 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.9
#6 25.50 npm ERR! node-pre-gyp ERR! not ok

safariで確認

'In game' statusの更新

色々な文章を入れて壊れないかテストする

ログインしないと他のページにいけないようにする

ログインしていない場合、どのページにアクセスしても、ログインページにリダイレクトされるようにする

game部分でstart押した後画面を押さないとキー操作を受け付けない問題の解消

Chat: Members一覧表示

Members一覧表示

• channelに参加しているメンバーの表示→getMembersを叩く
• ボタンの追加 | | 右クリックで以下を選択
  • adminに追加
  • banする
  • timeoutする
• ボタンにアクションを追加
• addAdmin
• banUser
• timeoutUser

http://localhost:3000へアクセスできない

docker-compose up --build

を行うと以下のようなエラーになり、http://localhost:3000へアクセスできない。

...
frontend    | You can now view frontend in the browser.
frontend    | 
frontend    |   Local:            http://localhost:3000
frontend    |   On Your Network:  http://172.19.0.4:3000
frontend    | 
frontend    | Note that the development build is not optimized.
frontend    | To create a production build, use npm run build.
frontend    | 
frontend    | webpack compiled successfully
frontend    | No issues found.
api_1       | [Nest] 1  - 07/10/2022, 11:02:56 AM   ERROR [TypeOrmModule] Unable to connect to the database. Retrying (9)...
api_1       | Error: connect ECONNREFUSED 127.0.0.1:5432
api_1       |     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)
api_1       | [Nest] 1  - 07/10/2022, 11:02:56 AM   ERROR [ExceptionHandler] connect ECONNREFUSED 127.0.0.1:5432
api_1       | Error: connect ECONNREFUSED 127.0.0.1:5432
api_1       |     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)
ft_transcendence_api_1 exited with code 1

ブランチは最新のmain

Update Dockerfile

• backendでは現状自動更新が走らない

better DM

• DMを作成した時にDMルームに飛ぶ
• DMを作成した時に既に存在すれば、そのDMルームに飛ぶ

DMの表示の細かい部分に関する修正

メニューバーを浮かせたい

画像のように、現在はメニューバーの下からmainが始まっているが、これを画面全体がmainとなるようにしたい（メニューバーを浮かせたい）

これができない場合、game部分では、メニューバーの高さ分mainの高さを削り、その状態で画面の**などの計算をする必要が出てくる。

Chat: Members ボタン表示の微修正

• Adminの人にもAdminボタンが表示される
• 自分の場合にもban, mute, adminボタンが表示される

Originally posted by @mfunyu in #98 (comment)

全パッケージを最新のバージョンにする

画像を入れるところに拡張子がpngで中身が違うファイルを入れたときの挙動の確認

GitHub hooks pre-commit

• lint
• prettier

retry後のポイント選択バグ

game部分で存在しない部屋に入ったときの挙動の修正

現在、存在しない部屋に入ると入れてしまうので、404エラーが出るように修正

game部分で対戦相手が抜けたときの対処

対処する場所、タイミング、どのようにも含めて検討中

ユーザー名を変えようとして、すでに存在していた時に500以外のエラーを返すようにする

gameからchatへいくとエラーになる

/gameから/chatへいくと、以下のエラーになる
もしかしたらsocket関連のエラーかもしれないが、よくわかっていない

api         | 
api         | /api/node_modules/cookie/index.js:49
api         |     throw new TypeError('argument str must be a string');
api         |           ^
api         | TypeError: argument str must be a string
api         |     at parse (/api/node_modules/cookie/index.js:49:11)
api         |     at ChatService.setUserIdToSocket (/api/src/chat/chat.service.ts:27:31)
api         |     at ChatGateway.handleConnection (/api/src/chat/chat.gateway.ts:25:20)
api         |     at Object.next (/api/node_modules/@nestjs/websockets/web-sockets-controller.js:71:47)
api         |     at ConsumerObserver.next (/api/node_modules/rxjs/src/internal/Subscriber.ts:161:25)
api         |     at SafeSubscriber.Subscriber._next (/api/node_modules/rxjs/src/internal/Subscriber.ts:119:22)
api         |     at SafeSubscriber.Subscriber.next (/api/node_modules/rxjs/src/internal/Subscriber.ts:75:12)
api         |     at /api/node_modules/rxjs/src/internal/operators/distinctUntilChanged.ts:173:22
api         |     at OperatorSubscriber._this._next (/api/node_modules/rxjs/src/internal/operators/OperatorSubscriber.ts:70:13)
api         |     at OperatorSubscriber.Subscriber.next (/api/node_modules/rxjs/src/internal/Subscriber.ts:75:12

DM: Blocked Userをフィルターして非表示に

blocked_userを追加、削除するAPI

chatを選択していないときの状態の作成

randomチャンネルを作ると例外としての処理がめんどくさいので、chatを選択していないときの状態を作成する

対戦時に両者の名前を表示する

必須ではないけど、名前がないのはさすがにわかりづらいと思った

プロジェクトセットアップ

期限

5/22

内容

• docker-compose
• nginx
• frontend: react (create-react-app?)
• backend: NestJS

参考

https://qiita.com/Horoscope_Saggitarie/items/cbcbd350754274597651
https://qiita.com/Horoscope_Saggitarie/items/bbb9c83e3695b4a53af8

Chat: Gameへの招待

Gameへの招待

• どこから招待できるのか
• どのようにゲーム開始するのか
  など全部

※（案1）DMにリンクを送る
※（案2）ここの画面から招待できる

Chat: Create Channel + をクリックしたときのフォーム

Create Channel + をクリックしたときのフォーム

• priveteとprotectedはどちらか一方のみ選択できるようにする
• protectedを選択した時にはパスワードの入力がなければエラー
• channel名空の場合エラー

MTG 2022-05-22

• APIはとりあえずusersの実装を最優先

読み込み時に500エラーが出る問題

認証の実装

Frontend

• 認証のUI

Backend

• まずはリサーチ、おそらく以下2パターン
  • https://docs.nestjs.com/security/authentication
  • https://docs.nestjs.com/techniques/session
  • 実装手段固まったら以下に進む

curl -X POST http://localhost:3000/auth/login -d '{"username": "syamaguc", "password": "password"}' -H "Content-Type: application/json"

↓
42 API を叩いてチェック、
↓
ユーザーの作成

• Users
  • name(input)
  • password(input)

Chat: channelへのjoin関連

• 自分の作ったchannelに自動joinされない
• たまにjoinうまくいかない
• リロードしないと動かないことがある

余裕があったらパスワードの送信を暗号化

Chat: フレンド一覧表示

自分のフレンドを一覧で表示するコンポーネント（front)

使いたいところ

• privateのチャットにメンバーを追加する
• DMを新規作成する　（/dmのindexページに表示したい）

footerなしLayoutの作成

game部分ではfooterがないほうが、見た目的にも、都合的にもよいので、optionでfooterをなくせるようにしたい

#29

こちらのissueと同時に作業するのがよさそうなので保留

Chat: channelを追加したときに、見ていたチャンネルのメッセージログがそのまま残る

• chatroomが作った新しいチャンネルにセットされても、今まで見ていたchatログが変更されずに表示されている
  
  
  

Chat Frontend Tasks

優先度：High

• Chat画面の3分割

優先度：Middle

Create Channel

• Chat名の入力必須に
• private の時は protectedを選択不可に（逆もまた然り）
• protected時にpasswordの設定を必須に

Backend

• Dtoにバリデーションを追加
• デフォルトのChatRoomをbackendから引っ張ってくる

優先度：Low

Frontend setup

技術スタック

• create-react-app

やること

• eslint
• prettier
• router
• backendがマージされたらdocker化

2faをサインイン時に行えるようにする

socket通信の認証

ft_transcendence/backend/api/src/game/game.gateway.ts

Lines 305 to 315 in 646e1f9

	// @UseGuards(AuthGuard('jwt'), UserAuth)
	@SubscribeMessage('registerMatch')
	handleRegisterMatch(
	@MessageBody() data: any,
	@ConnectedSocket() client: Socket,
	) {
	const userId = data['userId']
	// this.logger.log(client.handshake.headers['cookie']);
	// this.logger.log(client.handshake.headers);
	const user = this.currentUser(userId)
	user.then((user) => {

〇socket通信を行っている関数
上のコードのように、@SubscribeMessage('registerMatch')のデコレーターがついている関数がsocket通信でフロントから通信がくる関数になっています。

〇やりたいこと
このデコレーターがついている関数で、以下のいずれかの方法（もしくは何かいい方法があればそれ）で、socket通信以外の時のようにjwtを使った認証を行いたいです。

• @UseGuards(AuthGuard('jwt'), UserAuth) のようにデコレーターをつける
• 関数内で、cookieなどの情報を渡せば、認証をしてくれる関数を呼ぶ

〇cookieが入っている場所
cookieは上記コードだとclient.handshake.headers['cookie']内に入っています。
ですので、普通に @UseGuards(AuthGuard('jwt')) をつけると、jwtがないと怒られてしまいます。

〇テスト
実装時にテストを行うとしたら、上のコードの部分がいいと思います。
対応するフロントエンドの通信部分はこちらです。

ft_transcendence/frontend/src/pages/game/index.tsx

Line 42 in 646e1f9

server.emit('registerMatch', { userId: userId })

/game でmatchingボタンを押したときに、この通信が行われます。

api/user/settingsの修正

game部分で同じユーザーでログインするとどうなるか確認