disk-12 / happymahjong Goto Github PK

1. nodenvでnodeのバージョンを固定する
2. create-react-appでReactの下準備をする
3. pipenvを使ってpythonの下準備をする
4. github actionsで最低限のCICDを作る
   • なにか（要相談）にデプロイ
   • Linter + jest

• 全体的なディレクトリの構成
• React Routerを使って遷移する
• 各ページのデザインは含まない

• react-icons を使う。
• iconのアセットは Material Design Icons から使用
• 24pxと、32pxを size props で切り替えられるようにする。

変数化して各コンポーネントで import して共通した色を使えるようにする。

ボタンコンポーネントが完成次第，確認画面の右下のリンクをボタンと置き換える

先にロバストネス図を完成させる

1. HackMDでクラス図を完成させる
2. githubに図をアップロードする

Figmaでは1-9で表示されるのに，実際は1m-9mが表示される．接尾子がいらないので削除する．
ただし字牌は数字じゃなくて字にする

Figma通りに実装
カメラへ遷移

現状，Riichiにはテスト用の文字列を投げているだけなので，Reduxの状態を使ってRiichiを実行するようにResult.tsxのconvert関数を実装する

1. HackMDで図を修正する
2. githubに図をアップロードする

1. HackMDで点数計算のロバストネス図を作る
2. githubにアップロードする

確認画面でユーザが正しい牌を選択した後，和了牌の選択画面を表示する．

1. HackMDの資料をgithubにアップロードする

カメラページで、小さい牌を使いたいため。

size プロパティで width が設定できるようにする。設定しなければ、default値が入る

• 麻雀牌の画像をトリミングした画像を全種類分用意する

リアル牌を14枚並べて写真を撮る
アノテーションする

1. HackMDで牌認識のロバストネス図を作る
2. githubにアップロードする

撮影した画像を使ってTensorflow.jsに投げる
推定結果をReduxに保存する

ドット牌の画像を簡単に表示できるコンポーネントを作る

1. HackMDでユースケース図を作る
2. githubにアップロードする

react-iconsを使ってセレクターのアローをアイコン化する

現状Tensolflow.jsを使えるようにしないと，牌リストが更新されない➜画面が作れないので実装されるまでの代替として確認画面遷移時に牌リストを適当な和了形にするように修正する

512*512のマットの画像にランダムな位置に横並びの14枚の牌を並べた合成画像と，アノテーションのxmlを出力する

styled-components と @types/styled-components を導入して動作テストする

カメラで撮影し，ReduxにBase64形式で保存

UI設計を参考に，セレクター（牌の種類と，数字）を実装する

• 牌の配列を状態として管理する
• 配列をいじるためのactionを用意する
• 各ページからReduxを使えるようにする

color.Whiteを選んでいるが，正しくはcolor.Surface1

UI設計を見ながらオプションの状態とactionを作る

Riichiの出力のオブジェクトを生成する．

テスト用なのでReduxとはまだつなげない．

完璧より，操作の流れがわかることを優先．

• 牌認識の部分を1つのコントロールで良いのか
• 物体検出モデルをエンティティにする

見栄えをよくしよう

セレクターを組み合わせてポップアップを実装する
UI設計を参考にする