ryo-manba / ft_transcendence

Real-time online Pong game with chat.

👋 Hi there, I'm Ryo Matsukawa

• Frontend Developer.
• Team member at NextUI.
• X(Twitter): @ryo_manba
• LinkedIn: ryo-manba

ft_transcendence's Issues

バックエンドのユーザー情報とのつなぎ込みの実装

概要

バックエンドで保持しているユーザー情報とゲーム関連の各種機能をつなぎこみ

詳細

具体的なつなぎこみの項目としては、パッと思いつく部分は以下の通り。（もっと全然ありそう）

• マッチングシステムについては、いちいちユーザー名を入力せずに、ログイン中のユーザーが"Random matching"みたいなボタンを押したら、ログイン中のユーザー名でマッチングを登録するような流れにする
• ゲーム終了後のMatchingHistoryの勝者・敗者の名前もログイン中のユーザー名に紐付け

Pongのゲームプレー中に片方のプレーヤーがブラウザ閉じるとエラー出まくる問題をなんとかしたい

概要

2つのウィンドウを立ち上げてPongをプレーしている最中に、いずれか一方のウィンドウを閉じると、サーバー側が下記のエラーを吐きまくる問題に対処したい

[Nest] 2382  - 10/28/2022, 12:53:05 AM   ERROR [WsExceptionsHandler] Cannot read properties of undefined (reading 'player1')
TypeError: Cannot read properties of undefined (reading 'player1')
    at GameGateway.updatePlayerPos (/Users/tnishina/Programming/42/ft_transcendence/backend/src/game/game.gateway.ts:164:12)
    at /Users/tnishina/Programming/42/ft_transcendence/backend/node_modules/@nestjs/websockets/context/ws-context-creator.js:43:33
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at GameGateway.<anonymous> (/Users/tnishina/Programming/42/ft_transcendence/backend/node_modules/@nestjs/websockets/context/ws-proxy.js:11:32)
    at WebSocketsController.pickResult (/Users/tnishina/Programming/42/ft_transcendence/backend/node_modules/@nestjs/websockets/web-sockets-controller.js:90:24)

nodeのバージョンを統一する

最新の安定版の16.18.0に統一する。(2022/10/23時点)
https://nodejs.org/ja/download/

対応が終わったらチェックお願いします。

• rakushoo
• takashi247
• yuta-fujimoto
• ryo-manba

ゲームのスコアシステム(ラダー周り)の定義

別に今すぐってわけでもないんですが、ゲームのスコアシステム(ラダー周り)の実装をどうするか相談させていただきたいです。

1. スコアなしで勝敗のみを記録する

2. 勝敗に応じてスコアをつける。
   例えば、
   デフォルトで1000ポイントが与えられて
   勝つと100ポイント増えて、負けると100ポイント失う。

ゲームの結果に対してスコアを変えるとかでもいいかもしれない(3 - 1だったら得られるポイントが多いとか)

3. スコアに対してランクを定義する。
   これは前ちょっと考えてたのですが、
   例えば、
   スコアに対してbronze, shilver, goldのランクを与える。

などなどいろいろあるかとは思うんですが、ご意見お聞きしたいと思ってます。

全体で共有するAppBarをつくる

簡単なユーザ情報の表示、ホーム画面遷移、ログアウトなどをするbarを上部に付けたいです。

実装するべきかどうかお聞きしたいので議論にしておきます

チャットルーム作成機能の実装

概要

• フロントエンドからチャットルームを作成できるようにする

やること

• prismaでチャットルームのテーブルを追加
• チャットルーム作成ボタンを作る
• サーバーサイドでDBに保存する処理を追加する

MUIを導入する

参考：https://mui.com/

プレーヤー以外が進行中のゲームを観戦できる機能を実装

概要

プレーヤー以外の第3者が進行中のゲームを観戦できる機能を実装

詳細

• 進行中のゲームについては、 @yuta-fujimoto が現在実装してくれているような感じで、リストで表示させるようにすると良さそう
  • 余裕があったら、進行中のゲームのスコアとかも表示できたらいいかも
  • ただ、常に進行中のゲームのスコアの情報を更新しないといけないから挙動が重くなりそう
• 観戦者は観戦したいゲームをリストの中からクリックすると、そのnamespace/roomにjoinするような感じの実装になるか

global.cssを最低限のstyleのみにする

概要

• 現状defaultのものを使っているので、不要にスタイルが適用するのを避けたい
• それぞれコンポーネントごとにスタイルを適用させるようにする

その他

• 以下のような問題が発生するのを防ぎたい(表示されないと思ったら、全体が真っ黒になるスタイルが適用されていた)
  #23 (comment)

画面遷移図のたたき台

draw.io で簡単な画面遷移を作成しました。

チームへの招待リンク
https://miro.com/welcomeonboard/RzNFS0xQQzBUdTRFWDFPYjN1bWNsemdYbG45MmZnMHZjTllIRHpRMktuUTFaTERlbFFQVktnOHlGTm44dHJYdHwzMDc0NDU3MzQ4NjE1Njg0NDU3fDI=?share_link_id=923306915377

参照のみ（非登録会員の編集は有料プランかららしい）
https://miro.com/app/board/o9J_lbYM-4o=/?share_link_id=947232855041

Loggerを全体で統一しても良いかの調査

概要

• loggerをbackend全体で統一したものを使うか、それともモジュールごとに作成するかを決める
• どっちがいいかをざっと調査する

参考
https://docs.nestjs.com/techniques/logger

ゲーム開始後にリロードすると画面が固まる

• ゲーム実行中にリロードすると何も表示されなくなる
• プレーしてた相手：画面が静止する

setup用のMakefileを作成する

概要

• Databaseの起動、マイグレーションなどのコマンドをひとまとめにしたい
• dockerを終了するなどのcleanup用のコマンドもできれば追加する

チャット画面をリロードすると、チャットルーム一覧が表示されない

概要

yarn build && yarn start

• 最初に/chatに移動したときにはチャットルームのリストが取得されず、その後、ページリフレッシュをすると取得される

yarn dev

• 上記の最初にアクセスしたときにしかuseEffectが動いていなさそう
• useEffectが最初にページに遷移したタイミングでしか動いていないことが原因だと思われる

原因PR

• #38

Pongのフロントエンド側のNextへの移行

概要

現状、React + TypeScript非対応のPongのフロントエンドをNextに移行

備考

• バックエンドは一旦、ローカルのnode.jsで動かすことを想定
• フロントエンドのパスはhttp://localhost:3000/pong にする予定

参考

https://github.com/takashi247/react_socketio_practice

Pongのバックエンド側のNestへの移行

概要

現状、ローカルのNode.jsで動かしているバックエンドのサーバーをNestに移行

備考

• 移行に合わせて、プレーヤーの型を他のパートで使っているuser型に合わせる
• このタイミングでfyutaさんパートと連結させるかどうかは要相談

参考

https://github.com/takashi247/react_socketio_practice

ゲームに移行する際の画面遷移を修正

概要

@yuta-fujimoto が作ってくれているマッチング・システムとゲームのつなぎ込みを実装

詳細

• フロントエンドとしては、マッチングシステムでユーザー名を入力したら、ゲーム画面に遷移する感じか
  • 一人しかユーザーがいないときは、”Waiting for the other player..."みたいなのを表示させる
  • 相手が入ったら、お互いがスペースを押したら、最初３カウントしてスタート、みたいな感じか
• バックエンドとしては、フロントエンドでユーザー名を入力したsubmitしたタイミングでemitされる通信をsubscribe
  • 一人目のユーザーか二人目のユーザー化に応じて、対応する情報をフロントエンドに送り分ける流れか
  • ユーザーを待っている状態でもレスポンシブなデザインになるように、フロントエンドから画面サイズの情報はもらい続ける

gameのbackendにloggerを使う

pre-commitでコミット時にコードの整形やチェックを行う

gameのホーム画面のプロフィール実装

statsなどの表示

• トータルの勝敗数
• なんか適当にロゴまたはアバターをつける。

pages/game直下のコンポーネント系のファイルにexport defaultを追加

export defaultがないと、yarn buildがちゃんと走ってくれないようです。お手数ですが、修正をお願いします。
(参考リンク: https://qiita.com/hirochan/items/9de19f22dc409507313c)

baseUrlを設定して相対パスを絶対パスに統一する(backend)

概要

• 相対パスを使うとファイルの位置が分かりづらいので絶対パスにしたい

やること

• baseUrlをsrcにする
• 既存のコードで相対パスを使用しているものを絶対パスに置き換える

チャット機能を実装する

概要

• チャットできるようにする

ゲーム履歴の実装

とりあえずDBのことは考えず、データを適当に準備しておく。

• 対戦相手
• スコア
• 勝ったか負けたか

の表示をさせる。

チャット画面のスタイルをいい感じにする

概要

やりたいこと

• メッセージ送信ボタンを下側に設置する
• メッセージを一度に表示する量の制限をする
• メッセージっぽいスタイルで表示する(現状リストで行っている)
• チャットルームのボタンの外枠も押せるようにする
  • 参考：#68 (comment)

CIでビルドが通るかチェックする

概要

• ローカルだとビルドせずに試すことが多いので、CIで自動チェックするようにしたい

対戦開始のコンポーネント完成

現状あるStart.tsxを進化させる形にする。

• Backend
  デモで使っていた自分の名前など不要なデータのやり取りの削除、自分の名前はDBからとってくる。

• Frontend
  ゲームっぽい画面になるようにというのとNext対応、バランスを見る必要があるので全体ができたらまた考える。

ゲーム内でのユーザ名の共有

42の認証が思ってたよりスムーズに終わったのでやります。

• 現状のログイン方法(email + password)でのみ。
• 名前の登録は今はできないのでユーザ登録時にランダムに生成する。

ゲームをする際に表示する名前をユーザ名にする。

https://blog.microcms.io/optimize-cache-with-react-query/

勝敗のデータを記録

概要

ゲーム終了後、勝敗のデータを各プレーヤーに紐付ける形でバックエンドで記録

備考

• バックエンドにMatchingHistoryに関する新しいDBを作成することを想定
• DBのデータフィールドとしては以下を含むことを想定
  • id: integer
  • winUserName: string
  • loseUserName: string
  • date: Date
  • winScore: integer
  • loseScore: integer
  • isPlaying: boolean
• ゲームが終了したタイミングで結果をDB上に記述。おそらく全てサーバー側で完結できそう

frontendのyarn lint, yarn formatがpages内のファイルにしか実行されてない。

eslint 'pages/**/*.{js,jsx,ts,tsx}'
prettier --write "pages/**/*.{js,jsx,ts,tsx}"

useEffectの中でsocket.on使ってるところは漏れなくsocket.offをつける

概要

useEffectの中でsocket.onしてる部分でstrict mode下でも複数回呼び出しにならないように、socket.offをつけてないところはつける

参考

#29 (comment)

PostgreSQL導入

概要

• docker-composeを追加する
• prismaで扱えるように設定ファイル追加する

Signin, Loginできるようにする

udemy通りでひとまず追加
postmanで確認

GameRecordのDB改良

概要

下記の点を含む、GameRecordのDB改良を実施

• winnerName/loserNameにuserIdを紐付けて記録
• (要相談) createdAtの時間を日本時間に変更バックエンドは時間を調整せず標準時で記録

アクセス時にチャットルーム一覧を表示する

概要

• アクセス時にDBに保存されているチャットルームを表示する

やること

• アクセスしたら、DBからチャットルームの情報を取得 ->フロントエンドに送信
• 受け取ったチャットルームのデータを元にフロントエンドで表示させる

SignIn,Login画面作成

udemy通りに画面作成
凝るのは後で。パスが通るようにする。

左側にチャットルーム一覧を表示する(Discordみたいな感じ)

概要

• Discordみたいに左側にチャットルーム一覧を表示させる

対戦中のゲーム一覧の実装

ゲームを選んで観戦画面に移れるようにする。現状あるWatch.tsxをさらに進化させる形にする。

• Frontend
  目のマークを遷移ボタンにする、Next対応

• Backend
  JSON.stringifyはやめる。あと何秒おきに送るか検討する。

チャットルームを公開、非公開、パスワード付きの3パターン作成できるようにする

概要

• 現状は、名前のみ受け付けているので、その他のルールも決められるようにする
  • それに伴って、スキーマの修正も必要そう

[バグ?] mainブランチを作業ブランチにマージしたらリントエラーが取れない

• 作業ブランチに、mainブランチマージするとLintエラーが発生した
• 原因調査中

 0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: custom.d.ts.
The file must be included in at least one of the projects provided

custom.d.tsがどこからもimportされてない？
https://wonwon-eater.com/ts-eslint-import-error/

やったこと

• frontendで yarn
• backendで yarn && npx prisma migrate dev && npx prisma generate

上記を実行してもエラーが発生する

eslint.ignoreでlinterの対象外にすると、一応commitはできた
https://github.com/ryo-manba/ft_transcendence/pull/68/files#diff-fbda2e0371b06961184b6238699784b350177911a9a75dfebbc59fc5b811d6adR8

Pongの追加機能実装

概要

以下の追加機能を実装

• スコアボードの表示
• ゲームの勝敗の表示
• ボールがバーに当たる場所に応じて、跳ね返る角度が変化するように修正

備考

• ボールの動きの計算や得点の計算はサーバー側で行う予定のため、実装はバックエンドで行う予定
• フロントエンド側ではサーバー側で計算して送られてくる情報を表示するのみ
• スコアボード、ゲームの勝敗の表示に関しては、フロントエンド側でも追加のロジックの実装が必要と想定

チャットルームリスト取得時のエラー対応

チャットルームが一つも作られていない状態で/chatにアクセスすると、バックエンド側で下記のエラーが発生

/Users/tnishina/Programming/42/ft_transcendence/backend/node_modules/@prisma/client/runtime/index.js:30873
      throw new PrismaClientKnownRequestError(message, error2.code, this.client._clientVersion, error2.meta);
            ^
Error: 
Invalid `this.prisma.chatRoom.findMany()` invocation in
/Users/tnishina/Programming/42/ft_transcendence/backend/src/chat/chat.service.ts:26:33

  23 }): Promise<ChatRoom[]> {
  24   const { skip, take, cursor, where, orderBy } = params;
  25 
→ 26   return this.prisma.chatRoom.findMany(
The table `public.ChatRoom` does not exist in the current database.
    at RequestHandler.handleRequestError (/Users/tnishina/Programming/42/ft_transcendence/backend/node_modules/@prisma/client/runtime/index.js:30873:13)
    at RequestHandler.request (/Users/tnishina/Programming/42/ft_transcendence/backend/node_modules/@prisma/client/runtime/index.js:30856:12)
    at PrismaService._request (/Users/tnishina/Programming/42/ft_transcendence/backend/node_modules/@prisma/client/runtime/index.js:31836:16)
    at ChatGateway.handleConnection (/Users/tnishina/Programming/42/ft_transcendence/backend/src/chat/chat.gateway.ts:34:18)

baseUrlを設定して相対パスを絶対パスに統一する(frontend)

概要

• 相対パスを使うとファイルの位置が分かりづらいので絶対パスにしたい

やること

• baseUrlをsrcにする
• 既存のコードで相対パスを使用しているものを絶対パスに置き換える

[参考]
https://zuma-lab.com/posts/typescript-import-absolute-path-settings

ログインせずにアクセスした場合にルートにリダイレクトする

メモ

• nextにおけるredirect
  https://zenn.dev/uttk/articles/4649e49f1e6628

• serverで画面を作ってるので<Navigate>やrouter.pushなどは失敗する場合がある

• _app.tsx でrouter.pathnameで条件分岐すればいい感じになるかもしれない

• useEffectでrouter.pushとかやると一瞬画面が見えるので個人的に好きではない

• 「ログインしていない」=「cacheにデータが入ってない」にしようかと思っているが、そうするとcompileしなおすたびにルートに戻ってしまうので別に後でもいいかなと。

• ログインボタン押したときに、一度useQueryUserを呼び出す必要があるかも、ボタンを押したときの関数では呼べないのでenableオプションを使う。

ゲーム履歴のDB対応

チャット画面からゲームに招待する機能の実装

概要

チャット画面から特定のユーザーに対してゲームの申込みをできるようにする

備考

• 1対1のチャットルームのときは話している相手にゲームの申込みをする、という実装で良さそう
• 複数人が入っているチャットルームの場合に、その中の誰かにゲームの申込みをする、という実装をすべきかどうか、要相談か
• フロントエンドについては @ryo-manba のチャット画面の実装の変更がメインになりそうなので、ゲーム側としては主にバックエンド側の修正を想定

Pong: ボールの当たり判定の精緻化

概要

• 現状、ボールの中心の点をベースにボールの当たり判定をしている
• ボールの半径を考慮して、ボールの外円が当たったタイミングで当たり判定をするようにロジックを修正
• 合わせて、以下の変更も実施予定
  • ゲームボードを単純に周りを囲む長方形に変更
  • バーの上辺、下辺に当たったときのアクションも追加

ゲームのオプションの設定機能実装

概要

• ゲーム開始前に、ボールやバーの速さ、マッチポイント等の設定を行えるようにする
• ゲーム終了後に得られる/失うポイントの量などをゲームの難易度に合わせて変える

参考リンク

https://www.notion.so/Game-option-487cee26b673420989b679578b988249

チャットルーム削除機能の実装

概要

• フロントエンドからチャットルームを削除できるようにする

やること

• チャットルーム削除ボタンを作る
• サーバーサイドでDBから削除する

ブラウザの画面サイズに応じたResponsiveデザインの導入

概要

ブラウザの画面サイズに応じて、responsiveにゲーム画面のサイズを変更できるように修正

備考

• Canvasのサイズをブラウザの画面サイズに応じて動的に変えられるように修正
• バーを動かすスピードやボールのスピードも画面サイズに応じて変更するように修正
• 実装としては、フロントエンド・バックエンド、どっちもいじる必要がありそう
  • フロントからブラウザのサイズに関する情報をサーバー側に定期的に送信
  • サーバー側で描画する情報 (ボールの動き、ゲームステージの大きさ等)を算出する際に、その情報を元に調整