フロントエンドの実装

[csenet]

何がしたいか？

プラレールを遠隔で操作するために必要なインターフェースとなるフロントエンドのWebページを作る また、プラレールの車両と周りの風景の映像を配信するのでそれを閲覧するサイトを作る 昨年のサイト：https://chofufes2021.gotti.dev/

何をするか？

ページ内でのデザインや配置を検討した上で、必要となるフロントエンドのコンポーネントを実装する。 必要となる機能は以下の通り、

• ポイントを制御するためのUI（クリックするとポイントが動く＋現在の状態を表示する）
• 列車の速度制御をするためのUI（制御する列車の選択+列車の速度が変更できるようにする）※前後変更は必要ないかも
• サーバーと通信して状態の変更と把握を行う（WebSocketでexternalサーバーと通信を行う）
• 映像の受信を行えるようにする（WebRTCで受信をする。SkyWayを使用） APIの仕様に関してはGitHubのドキュメントを参照のこと

使用するフレームはNext.js+TypeScriptを用いる予定 フロントエンドフレームワークは昨年度は使用していないので実装者のデザインセンスに任せる

[csenet]

フロントエンドのタスクがまとまってきたので追記しておきます。 必要となる仕様は以下の通りです。

• 現在の状態を見れるページ（一般向け）※一部を除いてポイントの切り替え操作はユーザにはさせない
• 管理者用ページ（ポイントや閉塞区間の上書きが可能）
• 車窓カメラの映像を配信する
• YouTube Liveの埋め込み （列車の速度制御はページ上では行わないため不要）

また、ページ上で表示したい状態は

• ポイントとストップレールの状態（ON | OFF）
• 閉塞区間の状態（OPEN | CLOSE） となっています。

基本的には、externalとWebSocketで状態のやり取りを行います。FormatはJOSNでdocsにまとまっています。 そして、WebScoektから取得した状態をもとにしてComponentに対して値の割り当てを行います。 SVGのパーツは昨年度のものがあり、それを転用することがが可能です。

[csenet]

@y-chan フロントエンド周りの実装をお願いできそうでしょうか？昨年のコードをもとにして、ロジック部分のTypeScriptのコードを書く感じになります。外側のHTMLやCSSは別の人にお願いすることも可能なので、まずは最低限動作チェックができるようにWebsocket周りのコードを書いていただけると助かります。 もし、時間的に厳しそうであればお知らせください。