#8 【解答編】山札からランダムに一枚引く

プログラミング・プラモデル Vol.2 「Border7」 

プログラミング・プラモデル Vol.2「Border 7」｜はこだてたろう｜note

この記事は、#6 の解答例です。
この記事で紹介するコードは、あくまで一例です。
ご自身で作成されて、すでに問題なく動いているようであれば何も問題ありません。

src/Border7.js

function getDeck() {
 const suits = ["♠", "♣", "❤", "♦"];
 const ranks = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
 const deck = [];

 suits.forEach((suit) => ranks.forEach((rank) => deck.push({ suit: suit, rank: rank })));
 return deck;
}

export default function Border7() {
 const classes = useStyles();
 const [deck, setDeck] = useState(getDeck);
 const [card, setCard] = useState(getCard);
 
 /**
  * 省略
  */
 function getCard() {
   const index = Math.floor(Math.random() * deck.length);
   const cardObj = deck[index];

   const newDeck = deck.slice();
   newDeck.splice(index, 1);
   setDeck(newDeck);
   return cardObj;
 }

  return (
   <Box>
     <PlayArea card={card} />
     <Box /* className={classes.messageArea} */>
       {/* getMessage() から返却されるコンポーネント */}
       {/* getButtons() から返却されるコンポーネント */}
     </Box>
   </Box>
 );

完成イメージ

上記のように作成すると、画面にランダムなカードが表示されるようになります。プレビュー画面の上にあるリロードボタンを押して、何度か画面をリロードして確認してください。

次回

次回は【出題編】です。
画面に「トランプの数が 7 より大きいか小さいか、または等しいか」を選択するボタンを表示します。