モーダル内のカードを重複して選べない機能実装

[y4shiro]

• [x] 現在選択中のカードリストの Selector 実装
• [x] 現在選択中のカードリストを SelectableCard に Props で渡す
• [x] 選択中カードか否かの判定を実装 (別 Issue を立てる)
• [x] 選択中カードに半透明の影を追加
• [x] 選択中カードのクリックを無効化
• [x] 選択中カードのテキスト、ラベルを追加

[y4shiro]

現在選択中のカードリストの Selector 実装

CardDeck で Selector を作って、SelectableCard に Props で渡す

src/features/Support/CardDeck/CardModal/index.tsx

const selectedCards = useSelector((state: RootState) => state.cardDeck)
  .map((card) => card.cardId)
  .filter((cardId) => cardId !== null);

[y4shiro]

現在選択中のカードリストを SelectableCard に Props で渡す

これは Props に型定義をして渡すだけなので詳細は省く

[y4shiro]

選択中カードか否かの判定を実装 (別 Issue を立てる)

Props で渡ってきた 選択中カードリストを利用して、card_id が一致する場合は選択中表示のコンポーネントに切り換える

src/features/Support/CardDeck/CardSlot/SelectableCard/index.tsx

const SelectableCard: React.FC<Props> = ({ card, imgSize, selectedCards }) => {
  const dispatch = useDispatch();
  const { slotId } = useSelector(selectModal);
  const alreadySelectedCard = selectedCards.includes(card.card_id); // 追加
// ...
  if (alreadySelectedCard) // 既に選択されているカードの場合は選択不可能なコンポーネントに表示を切り替える
    return (
      <Box position='relative'>

コンポーネントのスタイル実装については以降順次説明していく

実装中に気がついたが、サポカ一覧における選択不可能カードのパターンは 2 種類ある この画像を例にすると、中央の「設定中」のラベルが付与されているサポカは他の Slot で既にセットされているサポカで、 左右の「！サポート重複」のラベルが付与されているサポカは同じキャラクターが既にセットされているので選択できないサポカを指す

これは設計漏れで、「！サポート重複」ラベルに関しては Supabase 側でサポカに所属するキャラ ID のテーブルを新たに定義して Join する必要がある 今回は「設定中」ラベルしか実装できないので、「！サポート重複」に関して別途 Issue を立てて対応する

[y4shiro]

選択中カードに半透明の影を追加

選択中カードのクリックを無効化

選択中カードのテキスト、ラベルを追加

これらの実装結果をまとめて示す

src/features/Support/CardDeck/CardSlot/SelectableCard/index.tsx

  if (alreadySelectedCard)
    return (
      <Box position='relative'>
        <Box filter='auto' brightness='40%'>
          <Card card={card} imgSize={imgSize} />
        </Box>
        <Box
          position='absolute'
          top='-2%'
          right='12%'
          left='12%'
          margin='auto'
          px={{ base: '2px', md: '6px', lg: '12px' }}
          borderRadius='12px'
          textColor='white'
          background='#E4436B'
        >
          <Text fontSize={{ base: '12px', sm: '14px', md: '16px', lg: '20px' }} fontWeight='bold'>
            設定中
          </Text>
        </Box>
      </Box>
    );

実際の画面は下記の通り

https://user-images.githubusercontent.com/14056951/195556687-805b3c6c-c992-4ac3-9b41-1ae40b2f6349.mov

[y4shiro]

merge したので close します