デッキの取得可能スキルのリスト表示を実装

[y4shiro]

• [x] cardDeckSlice の状態を元にスキルリストの取得を試みる
• [x] Skills コンポーネントで取得可能スキルを表示
• [x] スキルリストのデザインを作成
  • [x] SkillItem コンポーネント作成
  • [ ] (別 Issue 立てる)レアリティ毎の背景色設定
  • [x] どのキャラから取得できるスキルかを表示(カード名かカードアイコン)
• [x] (別 Issue 立てる)スキルアイコンを表示
  • [ ] スキルアイコンを外部サイトから取得
  • [ ] Cloudinary に保存
  • [ ] Supabase の skills テーブルに img_path (アイコン画像名)を追加
  • [ ] SkillItem から取得して表示
• [x] スマホと PC でスキルリストのカラム数を変更
• [x] Skills コンポーネントから SkillList コンポーネントを分割
• [ ] 気がついた、気になった点

[y4shiro]

cardDeckSlice の状態を元にスキルリストの取得を試みる

一応取得できるが、計算量的には cardDeckSlice に cards のデータを直接追加したほうが少なく済む

const Skills = (): JSX.Element => {
  const { data, error, isLoading } = useGetCardsQuery();
  const deck = useSelector((state: RootState) => state.cardDeck);
  const deckCardidLists = deck.filter((card) => card.cardId).flatMap((card) => card.cardId);

  const deckCardSkillsLists = data
    ?.filter((card) => deckCardidLists.includes(card.card_id))
    .map((card) => {
      return {
        card_id: card.card_id,
        card_name: card.card_name,
        event_skills: card.event_skills,
      };
    });

  return (
    <VStack w='100%' bgColor='blue.100'>
      <Text>Skills</Text>
      {deckCardSkillsLists?.map((card) =>
        card.event_skills?.map((skill) => (
          <Text key={skill.name}>
            {card.card_name}:{skill.name}
          </Text>
        )),
      )}
    </VStack>
  );
};

[y4shiro]

Skills コンポーネントで取得可能スキルを表示

イベントスキルは前項で表示できているので、トレーニングスキルを表示するコードを提示する。

  const deckCardSkillsLists = data
    ?.filter((card) => deckCardidLists.includes(card.card_id))
    .map((card) => {
      return {
        card_id: card.card_id,
        card_name: card.card_name,
        event_skills: card.event_skills,
        training_skills: card.training_skills, // 追加
      };
    });

  return (
    // ...
      <VStack>
        <Text fontSize='2xl'>トレーニング取得スキル</Text>
        {deckCardSkillsLists?.map((card) =>
          card.training_skills?.map((skill) => (
            <Text key={skill.name}>
              {card.card_name}:{skill.name}
            </Text>
          )),
        )}
      </VStack>
    </VStack>
  );

[y4shiro]

スキルリストのデザインを作成

基本的にゲームに寄せるが、ある程度簡略化する

• スキルアイコン
• スキル名
• スキル Pt

SkillItem コンポーネント作成

src/features/Support/Skills/SkillItem/index.tsx

type Props = {
  skillName: string;
  skillPt: number | null;
  cardName: string;
};

const SkillItem: React.FC<Props> = ({ skillName, skillPt, cardName }) => {
  return (
    <HStack w='480px' p='4' gap='4' borderRadius='8' bgColor='white'>
      <Box boxSize='48px' bgColor='gray.200'>
        icon
      </Box>

      <VStack w='100%' divider={<Divider />}>
        <HStack w='100%'>
          <Text>{skillName}</Text>
          <Spacer />
          {skillPt && <Text>{skillPt}Pt</Text>}
        </HStack>

        <Text w='100%'>{cardName}</Text>
      </VStack>
    </HStack>
  );
};

レアリティごとの背景設定

こちらはスキルのデータにレアリティの項目追加が必要なので、新規 Issue を立てて対応する master.mdb の skill_data テーブルに rarity カラムが存在するので、そこから Insert 用のデータを生成する 更に Supabase の skills テーブルに rarity カラムを追加し、View の方も修正する

どのキャラから取得できるスキルかを表示(カード名かカードアイコン)

現在ははカード名を表示しているが、最終的にはサポカのアイコンを表示させたい 優先順位低いので今回は対処しない

(別 Issue 立てる)スキルアイコンを表示

こちらも Supabase にスキルとアイコンの対応がなされていないので新規 Issue を立てて対応する master.mdb の skill_data に icon_id カラムが存在するので、これを Supabase の skills テーブルに追加する

[y4shiro]

スマホと PC でスキルリストのカラム数を変更

スマホ版(base / sm)は 1 カラム、 PC版 (md 以上)は 2 カラムにしたい Chakra UI のSimpleGrid 使おう

      <SimpleGrid w='100%' columns={{ base: 1, md: 2 }} gap={{ base: '2', md: '4' }}>
        {skillLists?.map((card) =>
          card.card_skills?.map((skill) => (
            <SkillItem
              key={skill.name}
              skillName={skill.name}
              skillPt={skill.skill_pt}
              cardName={card.card_name}
            />
          )),
        )}
      </SimpleGrid>

[y4shiro]

Skills コンポーネントから SkillList コンポーネントを分割

現在、Skills コンポーネントにトレーニング取得スキルとイベント取得スキルをベタ書きしているが、 これらはほぼ同じ構造なので SkillList コンポーネントとして新たに切り出す

src/features/Support/Skills/SkillList/index.tsx

type Props = {
  heading: string;
  skillLists:
    | {
        card_id: number;
        card_name: string;
        card_skills: EventSkill[] | TrainingSkill[];
      }[]
    | undefined;
};

const SkillList: React.FC<Props> = ({ heading, skillLists }) => {
  return (
    <VStack w='100%' p='4' gap='2' bgColor='blue.200'>
      <Heading as='h2' fontSize='2xl'>
        {heading}
      </Heading>

      <SimpleGrid w='100%' columns={{ base: 1, md: 2 }} gap={{ base: '2', md: '4' }}>
        {skillLists?.map((card) =>
          card.card_skills?.map((skill) => (
            <SkillItem
              key={skill.name}
              skillName={skill.name}
              skillPt={skill.skill_pt}
              cardName={card.card_name}
            />
          )),
        )}
      </SimpleGrid>
    </VStack>
  );
};

[y4shiro]

気がついた、気になった点

rarity カラムと icon_id カラムを Supabase の skills テーブルに追加したい これらは両方とも master.mdb の skill_data テーブルに存在し、追加先も同じテーブルなので 1 つの Issue で対応する UI 側の実装は別物なので、個別で Issue 立てて対応したい

また、フォントサイズがスマホだと大きいのでこれは後ほど修正

[y4shiro]

merge したので close