デッキのステータス合計表示部分を実装

[y4shiro]

• [x] DB の effects テーブルにカラムを追加
• [x] デッキの state からサポカ効果を表示
• [x] EffectList コンポーネント作成
• [x] サポカ効果にカードのアイコン表示
• [x] サポカ差し替え時に前のサポカ効果が残ってしまう問題
  • [x] cardDeckSlice にサポカのデータを持たせる
  • [x] サポカ効果の配列を cardDeckSlice の状態から生成
• [x] サポカ効果の個別数値を表示
• [x] サポカ効果の凸毎表示を実装
• [x] EffectList にて、凸段階に応じた数値を表示させる
• [x] サポカ効果の単位を振り分ける
• [x] サポカ効果の一覧を 2 列にしたい
• [x] スタイル調整
  • [x] フォントサイズ、カラー
  • [x] 背景色
• [x] サポカ効果一覧が皆無の場合の表示を実装
• [x] Status コンポーネントの下部にマージンを追加

全作業を説明すると冗長になるので、重要な部分や難しかった箇所に絞ってコメントしていく

[y4shiro]

DB の effects テーブルにカラムを追加

ステータスの種類を表す category カラムと、ステータスの単位を表す unit カラムを追加 unit は下記に示す 3 通り

• 整数 / integer
• パーセント / percent
• レベル / level

[y4shiro]

デッキの state からサポカ効果を表示

ここが今回一番重要な点で、cardDeckSlice の state からサポカ効果を抽出する必要がある

generateEffectLists.ts を作成し、cardDeckSlice の state から必要なデータを抽出する関数を実装した https://github.com/y4shiro/uma-card-deck-tools/pull/39/files#diff-16a80995d840aac09d6294a1f1d0713c9d65e7e99c96baad531f4feb84c48312

[y4shiro]

サポカ効果の凸毎表示を実装 / EffectList にて、凸段階に応じた数値を表示させる

cardDeckSlice にサポカの凸状態(限界突破段階) を持たせ、increment / decrement するアクションも追加 https://github.com/y4shiro/uma-card-deck-tools/blob/d685575129356b727bed363d1c1c2fa61e2d026a/src/features/Support/CardDeck/cardDeckSlice.ts

サポカの凸状態の表示と増減ボタンを持つ LimitBreak コンポーネントを新たに定義 https://github.com/y4shiro/uma-card-deck-tools/blob/d685575129356b727bed363d1c1c2fa61e2d026a/src/features/Support/CardDeck/CardSlot/LimitBreak/index.tsx

最終的に下記のような見た目のコンポーネントを実装した

[y4shiro]

実装した箇所のスクショ

カードのアイコン配置は先頭に持っていったほうが良さそうだが、今回はアプリ準拠にした

スマホ画面も比較的よく見えるように調整した

[y4shiro]

気になった点

実装中に気になった点や不具合など

• 各種初期ステータスアップの合計機能
• レスボ、ファンボの合計機能

上記 2 つは個人的に実装したいが、generateEffectLists.ts で生成するデータ構造を 1 から作り直す必要がある また、EffectLists 以下のコンポーネントも修正する必要あり アルファ or ベータ版をリリース後に取り組む予定

• サポカ選択でレアリティを絞り込むと同キャラが選択出来てしまう不具合

同キャラ選択を抑制する機能に抜け漏れがあったので、新規 Issue 立てて対応したい

[y4shiro]

merge したので close します