PongのフロントエンドのNextでの実装 #23

takashi247 · 2022-10-24T17:42:29Z

概要

元々 React で実装していた Pong のフロントエンドを Next && TypeScript で実装し直しました
バックエンド用にbackend_nodjsというディレクトリを作って、一旦 Node.js で簡易的に動くサーバーを作っています

受入条件

下記の手順で、ローカルでもちゃんと動くか確認

frontendディレクトリでyarn && yarn build && yarn start
backend_nodejsディレクトリでyarn && node server.js
その後 2 つのブラウザのウィンドウで http:localhost:3000/pong にアクセス
各ウィンドウで上下のキーを押すと、一方のバーが操作できるか確認

ゲームの描画の流れに関するざっくり解説

クライアントとサーバーは30FPS (=33msに1回)の頻度で下記の情報を送り合う
- サーバー→クライアント: クライアント側で描画するボール、及び、各プレーヤーが操作するバーの位置に関する情報
- クライアント→サーバー: 前回情報を送った時点から今回送る時点までに、バーが移動した距離
描画に関する計算のほとんどはサーバーサイドで実施。サーバーは各プレーヤーから送られてきたバーの位置の情報と、跳ね回るボールの位置の情報を統合して、次のタイミングでボールがどこにいくのかを計算し、各プレーヤーのバーの位置と合わせてプレーヤーに送信
クライアントサイドではサーバーから送られてきた情報を描画するだけ
- 現状、ステージの描画はフロントエンドのロジックで実施しているが、最終的にはこの部分もサーバーサイドに移管予定

参考URL

Reactでのcanvasを使った描画方法について: https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258
ボールの動きの計算方法について: https://javascript.plainenglish.io/create-ping-pong-game-using-react-2d78c8e1cd9b

備考

一旦動かすこと重視で実装しているので、諸々のパラメータがハードコードされている状況です。こちらはブラウザの画面サイズに応じたResponsiveデザインの導入 #17 に対応する際に修正したいと思います
関数名、ファイル名、タイプ名、変数名等の諸々の命名規則について、なにかこういう形で揃えた方がいい、というようなコメントあればください
ファイルの分け方とかもアドバイスあれば頂きたいです

close #13

ryo-manba · 2022-10-25T02:02:01Z

frontend/pages/pong/canvas.tsx

+interface Player {
+  height: number;
+}


型を拡張しない場合は typeを使ってみてもいいかもしれません。
理由としてはinterfaceが簡単に型を拡張できてしまうので、予期せぬバグを生む可能性があるからです。

// こんな感じ type Player = { heght: number; };

参考：https://zenn.dev/luvmini511/articles/6c6f69481c2d17

ありがとうございます！ここ、モヤモヤしてたところなので、参考リンク、勉強になりました。修正しておきます。

@ryo-manba こちら、先程修正をプッシュしました。お手すきの際に確認よろしくお願いします。

ryo-manba · 2022-10-25T02:04:38Z

frontend/pages/index.tsx

+// import Head from 'next/head';
+// import Image from 'next/image';
+// import styles from '../styles/Home.module.css';


あー、これリンターに怒られるやつですよね。
pre-commit導入前に出したやつだったので、対応漏れてました。すみません。。

ryo-manba · 2022-10-25T02:51:01Z

受入条件と同じ方法でやってみたんですが、何も表示されないです...。
サーバーサイドでリクエストは受け入れてるっぽいんですが、、

ryo-manba · 2022-10-25T02:53:22Z

frontend/pages/pong/index.tsx

@@ -0,0 +1,12 @@
+import type { NextPage } from 'next';
+import Canvas from './Canvas';


小文字にしないとbuild時に怒られました。ファイル名と合わせる必要があるかもです

'./Canvas' -> './canvas';

これ、ファイル名の方を大文字スタートに変えたつもりだったのですが、変更漏れしてました。修正します。

@ryo-manba こちらも、先程修正をプッシュしました。

すいません、これ、なぜかまたファイル名の変更、反映されてませんでした。。。
index.tsxの方を修正してプッシュし直しました。

takashi247 · 2022-10-25T03:03:53Z

受入条件と同じ方法でやってみたんですが、何も表示されないです...。サーバーサイドでリクエストは受け入れてるっぽいんですが、、

@ryo-manba 早速の確認、ありがとうございます！サーバーのログを見ると、サーバー立ち上げた途端に20近くのアクセスが3000番ポートに来ているようなので、VSCodeを再起動、またはMac自体を再起動してみて、もう一度試してもらえないでしょうか？それでもうまく動かなければ、ブラウザーのdeveloper toolのコンソールの画面のスクショもアップロードして頂けるとありがたいです。

ryo-manba · 2022-10-25T03:20:47Z

@takashi247
原因特定できました。単にglobal.cssで画面が黒くなっているから見えてないだけでした。

サーバー立ち上げた途端に20近くのアクセスが3000番ポートに来ているようなので

スクショが悪かったです。何度かリロードしてたので、アクセスが多いように見えてます。
実際はアクセスしたタイミングのみ増えるようになってます。お手数おかけしました。。

rakushoo · 2022-10-25T13:21:48Z

確認しました。
frontend：frontend/pages/pong/index.tsx の from ./Canvas を小文字にしたらサーバー起動しました。
CHAT,GAME,FRIENDのボタンが表示されました。

backend_nodejs：
yarn && node server.js コマンドでは、モジュールが見つからず起動できてないです。。
何かインストールが必要でしょうか？

shogo@[22:18:12]:~/work/development/42Tokyo/ft_transcnendence/pong-frontend/backend_nodejs% yarn && node server.js
yarn install v1.22.19
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.12s.
node:internal/modules/cjs/loader:988
throw err;
^

Error: Cannot find module '/Users/shogo/work/development/42Tokyo/ft_transcnendence/pong-frontend/backend_nodejs/server.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15)
at Function.Module._load (node:internal/modules/cjs/loader:833:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:22:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

yuta-fujimoto · 2022-10-25T13:28:12Z

確認しました。 frontend：frontend/pages/pong/index.tsx の from ./Canvas を小文字にしたらサーバー起動しました。 CHAT,GAME,FRIENDのボタンが表示されました。

backend_nodejs： yarn && node server.js コマンドでは、モジュールが見つからず起動できてないです。。何かインストールが必要でしょうか？

shogo@[22:18:12]:~/work/development/42Tokyo/ft_transcnendence/pong-frontend/backend_nodejs% yarn && node server.js yarn install v1.22.19 [1/4] 🔍 Resolving packages... success Already up-to-date. ✨ Done in 0.12s. node:internal/modules/cjs/loader:988 throw err; ^

Error: Cannot find module '/Users/shogo/work/development/42Tokyo/ft_transcnendence/pong-frontend/backend_nodejs/server.js' at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15) at Function.Module._load (node:internal/modules/cjs/loader:833:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:22:47 { code: 'MODULE_NOT_FOUND', requireStack: [] }

node server.jsで自分は動かせました。

takashi247 · 2022-10-25T13:29:46Z

@rakushoo 確認、ありがとうございます！

確認しました。 frontend：frontend/pages/pong/index.tsx の from ./Canvas を小文字にしたらサーバー起動しました。 CHAT,GAME,FRIENDのボタンが表示されました。

先程追加でプッシュした分がローカルにプルで来ていないのではないかと思います。
最新のブランチはファイル名を修正しているので、小文字にしないでもサーバー起動すると思います。

backend_nodejs： yarn && node server.js コマンドでは、モジュールが見つからず起動できてないです。。何かインストールが必要でしょうか？

ログを見る限り、yarnは成功しているようなので、node server.jsだけで動くかやってみてもらえないでしょうか？

yuta-fujimoto · 2022-10-25T13:43:00Z

frontend/pages/pong/canvas.tsx

+  barMove: (move: number) => void;
+};
+
+const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(


このtypeの引数っていままで知らなくて、統合して通信するデータの型が増えたときにそれを使うべきなのかわかってないです。使う理由はc++のインターフェースみたいにその実装を強制できるという点なんでしょうか？

使う理由はc++のインターフェースみたいにその実装を強制できるという点なんでしょうか？

使う理由としては、私も同じ理解です。事前にemitとonで情報を送受信する型を指定しておくことで、フロントエンドとバックエンドのAPI的なものを決めて実装できる、というのが嬉しいポイントなのではないかと思っています。
私は公式ページを参考に実装したのですが、ここでも、サーバーサイドとクライアントサイドで同じ型を使うことで、実装のずれが起きないようにしてます。
なので、どこかのタイミングでフロントエンドとバックエンドで使う型を揃えて、別ファイルに定義して、フロントエンド、バックエンド双方で、その型定義をimportして使う、という感じにできると、TypeScriptの効能を最大限活かしながらSocket.ioを使っている感が出せるのではないかと、書いていて思いました。

ありがとうございます、共通で定義できるのは確かに大きいですね。

yuta-fujimoto · 2022-10-25T14:00:30Z

socketやnext対応など参考になりました。
また、Canvasに関しては完全にはわかってないのですが動作は確認ができました。
つなげることに関してですが、見た限り、フロントエンドのページ遷移のみできればできるのではと思いました。
ただ、

socket周りのコードの書き方に関してコメントに書きましたが、統一したい
ディレクトリ構成が微妙に違うので後で合わせたい
というのが考えているところです。

特に修正箇所化などは見当たりませんでしたが、こうらくさんも見ていらっしゃるのでマージは待っておきます

takashi247 · 2022-10-25T14:22:27Z

@yuta-fujimoto 確認、ありがとうございます！

socketやnext対応など参考になりました。また、Canvasに関しては完全にはわかってないのですが動作は確認ができました。つなげることに関してですが、見た限り、フロントエンドのページ遷移のみできればできるのではと思いました。

私も先程ゆうたさんのプルリクも一通り確認させて頂きました。まだGatewaysの理解が完全ではないですが、私もかなりスムーズにつなぎ合わせられそうな印象を持ちました。
イメージとしては

フロントエンド: CanvasのコンポーネントをPlay.tsxの中で表示させる
バックエンド: sever.jsのロジックをgame.gateway.tsに統合

という感じになるかな、と思っています。

socket周りのコードの書き方に関してコメントに書きましたが、統一したい

ディレクトリ構成が微妙に違うので後で合わせたい
というのが考えているところです。

同意です。Socket周りの型定義については先程コメントバックしましたが、一応、私の実装の方では丁寧に書いては見ましたが、今回のプロジェクトはそんな巨大プロジェクトでもないので、別にリンターに怒られないならいちいち型定義を書かなくてもいいかなぁ、とも思ってます。
ディレクトリ構成については、基本的にゆうたさんの構成を活かしつつ、私の方のファイルはマージする感じにできればと思っています。

rakushoo · 2022-10-25T14:28:57Z

backend_nodejs は起動できました。ありがとうございます。

frontend ですが、canvasの小文字大文字の件は解消しました。
yarn && yarn build && yarn start で実施したところ、以下のエラーで起動できず、
"> Build optimization failed: found pages without a React Component as default export in" とあるので
reactの必要なライブラリなどが私のPCにはインストールされてないからかと思います。
こちらでReact用開発環境のインストールを試してみます。

shogo@[23:24:47]:~/work/development/42Tokyo/ft_transcnendence/pong-frontend2/frontend% yarn && yarn build && yarn start pong-frontend
yarn install v1.22.19
$ typesync || :
/bin/sh: typesync: command not found
[1/4] 🔍 Resolving packages...
success Already up-to-date.
$ cd .. && husky install .config/.husky
husky - Git hooks installed
✨ Done in 0.62s.
yarn run v1.22.19
$ next build
info - Linting and checking validity of types .warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
info - Linting and checking validity of types ..Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully

Build optimization failed: found pages without a React Component as default export in
pages/game/home/components/Layout
pages/game/ClientSocket
pages/game/home/components/Wait
pages/game/home/components/Watch
pages/game/home/components/Display
pages/game/home/components/Play
pages/game/home/components/Start

See https://nextjs.org/docs/messages/page-without-valid-component for more info.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

rakushoo · 2022-10-25T14:56:59Z

追加情報ですが、エラーログの最後に参照しろ、とあった、
% yarn run dev
を試したら、無事にページが表示されました。

http://localhost:3000/
動作→ボタンが3つあるが、押しても何も起こらない

http://localhost:3000/game/home
動作→fyutaさんのマッチングのページが表示される

http://localhost:3000/pong
動作→pongの画面が表示。ボールは動くが、バーは動かせない。（マウス、カーソルキー共に）

yuta-fujimoto · 2022-10-25T16:05:50Z

@takashi247
了解しました。現状でもfront, backend1ファイルずつで型定義は大丈夫そうなのでServetToClientEventはなしでいいかと思います。
またマージ方法についてもありがとうございます。それではマージのほうはお願いしても大丈夫でしょうか？

つなげる形で大丈夫とのことでしたが一応、僕のほうは無駄にJSON.stringfyしてたりNext対応してなかったりすることが分かったのでマージが完了し次第、リファクタリングをしようと思ってます

takashi247 · 2022-10-26T00:26:53Z

@yuta-fujimoto
了解しました。 #14 へ対応する中で、ゆうたさんのコードへのマージをやってみます。Socketの型定義についても了解です。一旦やってみて、やりにくい部分が出てきたらまた相談させてください。

rakushoo · 2022-10-26T14:20:31Z

PC再起動を行い、backend側で、Palyerのログが出ない状態から始めて確認したところ、
2つのページでそれぞれカーソルが動かせることが確認できました。

takashi247 added 6 commits October 25, 2022 00:47

Comment out unused packages to suppress errors

269ab20

add socket.io-client to dependencies

4470549

add tsx files for basic pong game functionalities

38fc968

add temporary backend server for Pong

cd07355

remove unnecessary console.logs etc.

4999901

fix bugs

ed68f98

takashi247 requested review from rakushoo, yuta-fujimoto and ryo-manba October 24, 2022 17:42

ryo-manba reviewed Oct 25, 2022

View reviewed changes

ryo-manba mentioned this pull request Oct 25, 2022

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

Closed

replace interface with type and fix file name

8bfda4e

ryo-manba approved these changes Oct 25, 2022

View reviewed changes

Merge branch 'main' into pong-frontend

25c46d9

yuta-fujimoto reviewed Oct 25, 2022

View reviewed changes

fix file path

1f41538

yuta-fujimoto mentioned this pull request Oct 26, 2022

フロントエンド側でyarn buildを成功させる。[WIP] #34

Merged

rakushoo merged commit 72b4705 into main Oct 26, 2022

rakushoo deleted the pong-frontend branch October 26, 2022 14:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PongのフロントエンドのNextでの実装 #23

PongのフロントエンドのNextでの実装 #23

takashi247 commented Oct 24, 2022 •

edited

Loading

ryo-manba Oct 25, 2022

takashi247 Oct 25, 2022

takashi247 Oct 25, 2022

ryo-manba Oct 25, 2022

ryo-manba commented Oct 25, 2022

ryo-manba Oct 25, 2022

takashi247 Oct 25, 2022

takashi247 Oct 25, 2022

takashi247 Oct 25, 2022

takashi247 commented Oct 25, 2022 •

edited

Loading

ryo-manba commented Oct 25, 2022

rakushoo commented Oct 25, 2022

yuta-fujimoto commented Oct 25, 2022 •

edited

Loading

takashi247 commented Oct 25, 2022

yuta-fujimoto Oct 25, 2022

takashi247 Oct 25, 2022

yuta-fujimoto Oct 25, 2022

yuta-fujimoto commented Oct 25, 2022

takashi247 commented Oct 25, 2022

rakushoo commented Oct 25, 2022 •

edited

Loading

rakushoo commented Oct 25, 2022 •

edited

Loading

yuta-fujimoto commented Oct 25, 2022 •

edited

Loading

takashi247 commented Oct 26, 2022

rakushoo commented Oct 26, 2022

		@@ -0,0 +1,12 @@
		import type { NextPage } from 'next';
		import Canvas from './Canvas';

PongのフロントエンドのNextでの実装 #23

PongのフロントエンドのNextでの実装 #23

Conversation

takashi247 commented Oct 24, 2022 • edited Loading

概要

受入条件

ゲームの描画の流れに関するざっくり解説

参考URL

備考

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryo-manba commented Oct 25, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takashi247 commented Oct 25, 2022 • edited Loading

ryo-manba commented Oct 25, 2022

rakushoo commented Oct 25, 2022

yuta-fujimoto commented Oct 25, 2022 • edited Loading

takashi247 commented Oct 25, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yuta-fujimoto commented Oct 25, 2022

takashi247 commented Oct 25, 2022

rakushoo commented Oct 25, 2022 • edited Loading

rakushoo commented Oct 25, 2022 • edited Loading

yuta-fujimoto commented Oct 25, 2022 • edited Loading

takashi247 commented Oct 26, 2022

rakushoo commented Oct 26, 2022

takashi247 commented Oct 24, 2022 •

edited

Loading

takashi247 commented Oct 25, 2022 •

edited

Loading

yuta-fujimoto commented Oct 25, 2022 •

edited

Loading

rakushoo commented Oct 25, 2022 •

edited

Loading

rakushoo commented Oct 25, 2022 •

edited

Loading

yuta-fujimoto commented Oct 25, 2022 •

edited

Loading