%E9%96%8B%E7%99%BA%E3%83%AD%E3%82%B0 - Recursion-Group-C/card-game GitHub Wiki
- Sprint#1で実施するタスク決め
- 各開発ツールのグループ作成
- 開発環境の合意
- 2023/03/13 (月) 21:00~
- 水曜日 21:00~, 土日どちらか(水曜日の定例で相談して決める)
- Trelloを参照
- 1Sprintは1Weekとする
- 活動期間は、2023/03/11-2023/04/22 (6 Sprint)
- 土日の定例MTGでPlanningとRetrospectiveを行う
- 2SprintごとにAdminとSprint Reviewを行う
- Platform: Web, Desktop, Mobile
- Architecture: MVC
- Frontend: TypeScript + Phaser + React + Tailwind CSS
- Backend: Node.js web server
- Infrastructure: AWS
- Static Code Analysis: ESLint, Prettier
- CI/CD: Github Actions
- Environment: Docker
- Gitflowに従い、issueからfeature branchを作成、developにマージ。develop branchでまとまったものが完成してからmain branchにマージする。
- マージを行う際は、必ず他のメンバーがレビューを行う
- コミットメッセージは、フォーマットに従う
- タスクの粒度はRetrospectiveで適宜調整する
- プルリクのメッセージはフォーマットに従う
- 開発に余裕があれば、単体テストをGithub Actionsで実行できるようにする
- 進捗確認
- 要件定義決め
- サイトマップ作成
以下は、時間があれば取り組む。時間が足りなければ、各自担当を決めて宿題にする。
- ワイヤーフレーム
- アクティビティ図
- クラス図
- 2023/03/18 (土) 時間未定
- 進捗確認
- 技術スタック再考
クラス図(@y0uk1)
Project5のブラックジャックを基に作成。ブラックジャック以外のゲームの詳細は追々追加していく。設計#クラス図
Q. クラス図の完成度を求めると、時間がかかってしまう。最初の段階でどこまでの完成度を求めればよいか?
A.
最初はクラス間の包含関係と参照関係を考えるためにクラス図を作るとわかりやすい。 この段階のクラス図はルール無用、思うがままのスケッチでいい。 クラスのプロパティや関数を網羅する必要もなく、最低限クラスの名前、包含関係、参照関係と役割が分かればよい。
From Qiita
- 現在作成したクラスを元にブラックジャックを実装していき、適宜更新していく。
アクティビティ図(@YzIori)
ゲーム全体、ログイン、各ゲームのアクティビティ図が完成。設計#アクティビティ図
WarのルールはカジノWarを採用する。
Linter, Formatter(@YzIori)
- Next.js向けに作成する。(3/18中)
ワイヤーフレーム(@daitennn)
以下画面は完成。figma
- ホーム画面
- ログイン画面
- 各ゲーム画面
- ゲーム一覧画面
- チュートリアル画面
- 設定画面
- 残りのページを追加する(3/18)
- マイページ
- 退会画面
- 戦績、ランキングページ
- パスワード再設定画面
3/21(火)21:00~
- Platform: Web, Desktop, Mobile
- Architecture: MVC
- Language: TypeScript
- Frontend: Phaser + React (State Management: redux) + Tailwind CSS
- Backend: Next.js API routes
- DB: PostgreSQL
- Infrastructure: Vercel (Next.js), Supabase (PostgreSQL)
- 進捗確認
- 今週の計画確認
NextjsとPhaser3の連携方法調査(@daitennn)
- Phaser3とNextjs、TypeScriptを連携させたリポジトリを発見。このリポジトリをベースに開発を進めていく。
開発環境の構築(@YzIori)
- Jest、TailWindCSSの設定を追加
- Jestドキュメントをwikiに追加(テストツール)
チュートリアル実施(@y0uk1)
- Nextjs, Phaser, TypeScriptのチュートリアルを実施
-
各自チュートリアルを終わらせる
- Nextjs
- Phaser3
- Typescript
- Reactのstate管理ライブラリ <- 必要性を感じたときにライブラリの選定から相談
-
以下の条件を満たす、Nextjsのベースプロジェクトを作成する
- Linter, Formatter等の設定が行われている
- TSの設定が行われている
- Tailwindの設定が行われている
- リモートコンテナの設定が行われている
-
ベースプロジェクトを使用して、技術検証を兼ねて、各自ページを作成していく
- ゲーム画面(Nextjs + Phaser3の検証)
- ユーザー認証機能(Nextjs + Prisma + PostgreSQLの検証)
- 画面のデザイン作成(まずはゲーム一覧ページから)
Q. ファイル構成は最初の段階から厳格に決めるか?
A. 最初はラフに実装し、まずは動くものを作成する。ファイル構成は、後からリファクタリングで対応する。
- 2023/03/25 (土) 午後
- 進捗確認
- Sprint#3のプランニング
Supabaseを使用した認証機能の確認(@y0uk1)
- 認証機能の確認が完了
デザイン作成(@YzIori)
- ホーム画面のデザイン作成(figma)
- 残りのログイン画面、代表のゲーム画面を3/26(日)までに作成する
Phaser3とNextjsとの連携(@daitennn)
- PhaserとNextjsの連携完了
- 背景画像のリサイズができなくて困っている->これが参考になりそう
以下のゲームの実装を開始する。
- 抽象クラスとカードクラス、デッキクラスを作成する
- クラス図に従い、Blackjack, Porker, Speedを各自実装していく。リファクタリングで共通化できそうな関数があれば、抽象クラスを更新する。
- pages/game/porker.tsx
- scenes/PorkerScene.tsx
Q. huskyがまだ使えない。PrettierとESLintの適用はどうすればよいか?
A. Huskyの設定が完了するまでは、VS Codeの拡張機能で対応する
- 3/29 (水) 22:00~
- 特になし
- 何か思いつけば、各自確認する
- 最優先は、ゲームを実装すること。ログイン機能は付けてもいいけど、まずはゲームの実装を優先する。
- Sprint#3からは、実際にゲームを実装していく。War, Blackjack, Speedが最初のスタートにはよさそう。Speedは非同期なゲームなので、他と少し違う。
- ゲームを作りながら、クラス図をアクティビティ図を変更してもOK。設計も実装の一部と捉えて、柔軟に変更していけばよい。
- Cordovaを使えば、Frontendのアプリを簡単にAndroidやiOSのアプリに変換できるらしい。ただ、チームではNextjsを使っているので、Nextjsとの互換性がよいものを使いたい。
Q. 参考にしているプログラムがJavaScriptで書かれていてTypeScriptに変更するのが大変(特にPhaser3のクラスの型アノテーション)。どうすればいいか?
A. JSのまま使用するのでもいいと思う。Recursionでは、TypeScriptで実装するところと、JavaScriptで実装するところを分けている。状況に合わせて、どちらを使用するか考える。
- 進捗確認
- Sprint#3の計画確認
Speed実装(@y0uk1)
- Jimさんに共有してもらったBlackjackを参考にして、Speedの動きの部分を実装している。ゲームのロジックは単純なので、そんなに心配していない。
War実装(@YzIori)
- ゲーム画面、ログイン画面のデザイン作成完了。
- 動くものはまだできていない。まずは、Blackjackのソースコードを理解している。土曜までに、動くもの目指す。
Blackjack実装(@daitennn)
- 参考にしているソースコードをクラス図に従い変更している。
- Doubleの機能も付ける
- 各ゲームで共通化できるものは、games/commonフォルダ配下にまとめる。
- テストファイルは、games/各ゲーム/tests配下に作成する。
- 各ゲームのフォルダ構成は以下とする。
- constants: ゲーム固有の定数ファイルを置いておく
- models: common/Factoriesの抽象クラスから継承して作成した具象クラス用のファイルを置いておく
- scenes: ゲームシーンを記述したファイルを置いておく
- tests: テストファイルを置いておく
- utility: よく使う関数?を置いておく。(要検討)
- Phaserの型ファイルは、games/common/bidings/phaser.d.tsを使用する。React関係の型ファイルはルート直下に別でファイルとして作成する。
- 4/1 (土) 10:00~
- 進捗確認, Sprint#4, 5のタスク決め
Speed実装(@y0uk1)
- CPUと、ゲームが停滞した場合の処理が残っている
- CPUの難易度はカードを台に出すスピードで調整する
- 参加費を払って、勝ったら倍返ってくる。難易度に応じて、参加費を高くする。
- リファクタリング
War実装(@YzIori)
- これから実装してく
- 見た目の部分を土日で作っていく
- Blackjackのコードの理解が完了
Blackjack実装(@daitennn)
- HitとStayに加えて、Surrenderを実装している
- Surrenderが終わり次第、Double Downを実装する
- 共通クラスの活用は上記機能が実装でき次第取りかかる
- @YzIori: Porker, Texas Hold'em Porker
- @daitennn: Rummy
- @y0uk1: リファクタリング、デザイン修正、ホーム画面の追加、ログイン機能の追加(余裕があれば)
- 4/5 (水) 22:00~
- 進捗確認
- Sprint#5の計画確認
Speed実装(@y0uk1)
- ベット画面、CPUの難易度調整機能の実装がまだできていない
- MainScene.tsファイルが大きくなりすぎているので、共通クラスなどを使用してリファクタリングが必要
War実装(@YzIori)
- 実装完了
- 難易度調整は実装しない方針(運のゲームなので調整できない)
- リファクタリングはSpeedのリファクタリングを参考にするため、後回しにする
- Porker, Texas Hold'em Porkerの実装に取りかかる
Blackjack実装(@daitennn)
- Surrenderがまだ実装できていないが、今日(2023/4/5)中に実装完了予定
- 難易度調整は実装しない方針(運のゲームなので調整できない)
- Warと同様に、リファクタリングは後回しにする
- Rummyの実装に取りかかる
- チートシートで十分ルールは伝わるので、チュートリアルの優先度は落とす
- チートシートはSprint#5で実施する
- 余裕があれば、Sprint#6でチュートリアル機能を実装する
- 4/8 (土) 21:00~
- 4/9 (日) 10:30~11:00
- 何かあれば、各自、当日に確認する
- 進捗確認
- Sprint#5の計画確認
Speed実装(@y0uk1)
- Phaser3のチュートリアルを新たに実施し、ファイルのまとめ方がつかめた
Porker実装(@YzIori)
- モデルでporker playerを作った
- Phaserで動きを作って、検討している
- 他のゲームのリファクタリングが少なくなるように、Speedのリファクタリングを優先的に行う
- 使えそうな素材画像をshutterstockから探してimage folderに入れておく(@YzIori)
- Pause画面を追加する
- Rummyの得点の方式を決めておく
- GithubとTrelloの連携ができなくなっているので確認する
- 4/12 (水) 22:00~
- blackjack, war, speedがある程度完成した。まだバグや不足機能が存在している。
- Webアプリ優先で開発を進めており、マルチプラットフォームは手を付けれていない。
- DeployはVercelを使用している。
- 残りの2Sprintで1人が作成済みゲームの完成度を上げる(フロントの修正とリファクタリング)。残りの2人で、Porker, Hold'em, Rummyを実装する。
- blackjackは、House側の難易度が調整できるので、戦略(https://vegasdocs.com/blackjack/strategy.html 参照)を取り入れてみる。
- Webアプリ優先で開発してよい。Multi Platformは追加要件なので、余裕があればやってみればよい。
- ページ間の遷移を追加する。
- 他にやってみたい追加要件があれば、自由にやってよい。
Q. Viewファイルが大きくなってきていて、リファクタリングしようと思っているが、どうすべきか?
A. 時間と相談して、既存ゲームの完成度を上げるのを優先してもいいし、リファクタリングに時間をかけてもいい。
- 進捗確認, Sprint#5, 6の方針確認
既存ゲームのリファクタリング(@y0uk1)
- BetSceneを各ゲームで共通化。各ゲーム固有のSceneはPlaySceneだけにする。
- Card, ChipをPhaserのImageを継承させて1つのクラスとして切り出した。
- TableSceneを作成し、各ゲームで使用する関数をまとめている。
- TableSceneの作成が完了したら、他ゲームにも共通クラスを展開していく。
Porker実装(@YzIori)
- 1巡目のBetの実装が8割完了した。
- 2巡目以降のBetは1巡目で実装したものが使えるので、そこまで時間はかからないはず。
Rummy実装(@daitennn)
- 日曜までにメルドゾーンにカードを置けるように目指す。
- Speedの動きが真似できるので、@y0uk1が既にリファクタリングできてるところまでで、一旦Pushする。
-
Porkerで、Bet, Fold, Raiseなどのボタンをどうする?チップだと違和感がある。
- https://www.247freepoker.com/ を真似して、ボタンはチップではなくて、ボタンで表現する。また、ベット金額はバーで調整できるようにする。
- 金額が決まった後は、Playerの手元からディーラーにチップを送る動きを付ける。
-
UI周りの統一
- clearやbetなどは、チップからボタンへ変更する。
- ReactのUIは、https://daisyui.com/ を使うと、楽にできそう。
- 新しいIssueを作成して、画像をPushする。(@YzIori)
- ホーム画面の各ゲームのリンクは、各ゲームのスクショを使う
- @YzIori: Sprint#5, 6でPorker, Texas Hold'em Porkerの実装。CPUの難易度調整までは厳しそう。
- @daitennn: Sprint#5でRummyのの完成を目指す。Sprint#6は、チートガイド作り、既存ゲームのバグ修正を行う。
- @y0uk1: 3つの既存ゲームのリファクタリングをSprint#5で終わらす。Sprint#6でデザイン統一、ホーム画面の追加、既存ゲームの機能追加、バグ修正を行う。
- 4/16 (日) 22:00~
- 進捗確認, Sprint#6の方針確認
既存ゲームのリファクタリング(@y0uk1)
- Speedは完了
- 今日、明日でWarとBlackjackを完了する
- 残りの期間で、ホーム画面、デザイン向上を行う
Porker実装(@YzIori)
- リファクタリングは優先度落として、動くものを作ることを優先する
- 残りの期間で、PorkerとHold'emの完成を目指す
Q. 人数設定機能どうする?
A. 設定画面を1つのSceneとして作成する
Q. ボタンのUIどうやって実装するか?
A. ChipImage.tsのChip Classを使用して作成する。
- 4/19 (水) 22:00~
- 進捗確認, Sprint#6の方針確認
既存ゲームのリファクタリング(@y0uk1)
- 既存の3つのゲームで完了
効果音追加(@y0uk1)
- カード、チップ、Table Sceneに効果音を追加した。
ホーム画面作成(@y0uk1)
- figmaのデザインに従って、作成した
- Chromeではうまく表示できない→Themaを指定しておく
- 画像は著作権的にshatter stockのものに変えた方がよさそう
Porker実装(@YzIori)
- 共通クラスを使ってリファクタリングしている
- それなりに動くものができている
- CPUの増減機能は最悪、実装できない
- CPUの所持金は表示しない
- Bet金額は下の方に表示する
Rummy実装(@daitennn)
- 仕事が忙しかったため、現状、なにもできていない。
- オレオレクラスで作成しているので、まずは、共通クラスを使用する
- 4/24(月)からは、@y0uk1もサポートで入れそう。4/28(金)の完成を目指す
Q. ルール画面どうするか?
A. Nextjsの1ページとして、別URLで作成する
- 4/23(日)22:00~
- 進捗確認
既存ゲームのデザイン向上(@y0uk1)
- レスポンシブ対応は、時間がかなりかかりそうだったので、諦めた。
- 画面サイズを固定し、既存ゲームの背景画像を設定した。
- Preloadに時間がかかるときに、画面が真っ暗になってしまうため、ロード画面を追加した。
Porker実装(@YzIori)
- Git stashに失敗して、一部のコードが消えてしまったため、修復作業を行っている
- 共通クラスを使ってリファクタリングしている
ルール画面実装(@daitennn)
- 全部のゲームでルールが作成できている
- 開発期間が終わった後も、各自、取り組みたいIssueを実施する
- レスポンシブ対応は、開発期間終了後に取り組む
- 4/24(月)22:00~
- リリース直前のタスク確認
ホーム画面のバグ修正(@y0uk1)
- ホーム画面のバグ修正が完了
- 残りの時間で、#29, #44, #43の優先順位で残りのタスクに取り組む
- 上記タスクが完了したら、Blackjackの難易度設定機能の実装
Porker実装(@YzIori)
- 相手がFoldしているときに、ラウンドが終了しないバグを修正中
- バグ修正次第、デザイン修正を行う
- Porkerの実装が完了したら、Hold'em実装に取りかかる
ルール画面実装(@daitennn)
- ES Lintのエラーが発生しているため、修正している
- ルール画面実装が完了したら、Rummy実装に取りかかる
- 提出の方法が提示されたタイミングでキリのいいところまでで、develop -> mainにマージする
- Zappierの無料期間が終了したので、GithubのProject機能を代替する
- 4/27(木)22:00~
- リリース直前のタスク確認
BetSceneのデザイン向上(@y0uk1)
- チップのアニメーション追加とチップを追加出来ない場合にチップを非表示にした。
- 以下のゲームサンプルを参考にレスポンシブ対応を実施中
Porker実装(@YzIori)
- 大きなバグは修正できた
- ハンドの結果を表示して、次のラウンドに移行する部分を実装中
- 土曜日には完成できそう
- ホーム画面の画像が横に引き伸ばされてる
- 開発中のゲームはカードを削除しておく
- 画面サイズが小さいとしたの方が黒くなる問題
- レスポンシブ対応はFitを使用する
- 成果物発表会 4/30(日)09:30~
- 共通クラスを使用しており、再利用、拡張可能な設計になっている
- レスポンシブ(モバイル)対応ができている
- 多分他のチームよりはクオリティの高いものができている(自分の回が最初だったため、相対評価ができない)
- チーム開発に使用するツール(Trello, Github)はこのチームが一番上手に使えていた。次回からの参考に使う可能性あり。
- 難易度調整はSpeedのみ対応できている
- READMEをもうちょっと詳しく書く
- Wikiに書いた内容の概略を書くと良さそう
- Nextjsを使用しているので、ログイン機能やライブ対戦機能を付けて、バックエンドの実装もアピールできるとよい
- 面接では技術スタックの選定理由や技術的にこだわった点などを聞かれるので、今回の開発を振り返っておく
- タスク管理はTrelloよりGithub Projectの方が使いやすい
- 他のチームからは、初回MTGより前に仕様書を読み込んでおいて、当日は質問だけにするという形が良かったという声もあった
- 課題のゲームの選定はどうだったかなど、他のメンバーにも確認しておく
- Phaser3の学習コストを考えると、Hold'emはなくした方がいいかも。余った時間は、開発済みのゲームのリファクタリングにあてた方がよさそう。
- 進捗確認
Supabaseとの連携(@y0uk1)
- Plyaer Nameを表示できるようになった
- 戦績をPhaserで表示する部分の実装を行っている
Porker実装(@YzIori)
- 今できているところまでをマージした
- Porkerのバグを修正する
- BetSceneをLobbySceneに名前変更する
Rummy実装(@daitennn)
- Deckから手札に配るところは実装できた
- CPUのロジックを実装している
Q. Porkerを終わらせたあと、なにするか?
A. WebSocketを使用したLive対戦機能の実装に取りかかる
- 対象ゲーム
- War: 手札からカードを出す形式に変更して、対戦できるようにする
- Speed
- Porker
- Rummy
- @YzIori: Warのゲーム形式の変更を対応後、Pusherのチュートリアル実施し、対戦機能を実装してみる。
- @y0uk1: Pusherのチュートリアル実施後、speedの対戦機能を実装してみる。
- @daitennn: Rummyを完成させる。Pusherのチュートリアル実施し、対戦機能を実装してみる。
- 5/10(水)22:00~
- 進捗確認
Supabaseとの連携(@y0uk1)
- 戦績をグラフに表示できるようになった
- 今週中にグラフ機能の完成を目指す
Poker実装(@YzIori)
- チップの移動アニメーションの追加
- ショーダウン時に敵のカードを開示するアニメーションの追加
- ホーム画面の画像の変更
- Warのゲーム形式変更までを今週中にできれば
- 役の判定ミスのバグが残っている。Phaser3とJestの組み合わせが難しそう。
Rummy実装(@daitennn)
- ハンドゾーンからメルドゾーンに移動する際の裏のロジックで詰まっている
- 日曜ぐらいには動くものはできそう
- オンライン対戦
- PusherとNextjsを組み合わせたサンプルがあまりないので、サンプルを探して、ツール選定した方がよさそう。
- 来週、各自でサンプルやツールの調査を行い、一番よさそうなものを採用する。
- 5/21(日)10:00~
- 進捗確認
Supabaseとの連携(@y0uk1)
- 戦績をグラフに表示できるようになった
- ランキングを表示できるようになった
Poker実装(@YzIori)
- Pokerの役判定のバグ修正
- Warのゲーム形式変更に取りかかってる
- Warのゲーム形式変更
- Speedのinput.on関数を参考にして、カードを場に出すロジックを作成する
- 全カードトータルでの勝利数で結果を決める
- tableSceneのendHand関数をPokerでも使えるように変更する。
- 引数にisCreateResultTextを追加して、ゲームごとに、結果のテキストの表示/非表示を切り替えられるようにする。
- 5/28(日)10:00~
- 進捗確認
Pusher調査(@y0uk1)
- チュートリアルの実施(https://github.com/Recursion-Group-C/pusher-sample)
- Speedの書くアクションをPusherに送る機能を追加した
- 次は、PusherのEventから相手のアニメーションをフロントエンドで作成できるようにする
Warのゲーム形式変更(@YzIori)
- 今日中にできれば実装完了する
Rummy実装(@daitennn)
- バグが残っているが、ある程度動くものができた
- 残りのタスク
- 台札からのカード取得をポインターダウンでできるように変更する
- メルドゾーンへのカード追加ができない
- ラミー(手札を一気にメルドゾーンに出す)の実装
- 6/4(日)10:00~
- 進捗確認
Rummyのレビュー(@y0uk1)
- 分かる範囲で実施
Speedのリファクタリング(@y0uk1)
ALL INボタンの追加(@y0uk1)
- LobbySceneで全額ベット用のチップを追加した
Rummy実装(@daitennn)
- 現在上がっているレビューを対応して、Pushしてもらう
- Pushしてもらったあと、まだレビューできていなかったところのレビューを実施する
- 6/10(土)18:00~