ルーム作成・ルーム一覧/参加・websocketの実装

[YasuakiYoshii]

概要

• ルーム作成画面からサーバのデータベースにGraphQLでルームを保存できるように実装．
• サーバからルーム一覧をGraphQLで取得できるようにし、ルームリスト画面のUIの改善を行った．
• ルーム画面にドラッグ可能な青い四角オブジェクトを配置し、websocket通信で位置を同期できるよう実装．

※ @apollo/clientのバージョンが3.3.6だとwebsocketでサーバに接続できなかったため、3.2.5のままにしておいた．

動作確認

1. feature/subscriptionsブランチのサーバ起動後、トップ画面からルーム作成ボタンでルーム作成画面へと遷移．
2. ルーム名を記入しsubmitすると自動的にルーム画面に遷移する．
3. 別の端末でルーム参加ボタンでルームリスト画面へ遷移し、
4. 先ほど作成したルームをタップするとルーム画面に遷移する．
5. 青い四角オブジェクトを動かすことで端末間の位置の同期が行われることを確認．

関連するサーバーサイドの変更

並列にwebsocket通信を行う実装を行った→WebSocketのプロトタイプ実装 #13．

今後の実装

1. 理想の動作仕様の確認
2. ルーム画面におけるカードの配置及び端末間での位置同期
3. ルーム画面におけるデッキ（複数のカード）の配置及び端末間での位置同期

[bana118]

消し忘れのコメントは消しておきました．