#7 【解答編】画面にトランプのカードを表示する

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

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

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

src/Border7.js

Border7.js はファイルが大きいので、修正部分のみ掲載します。

import React, { useState } from "react";
import { Box } from "@material-ui/core";
import { useStyles } from "./hooks/useStyles";
import PlayArea from "./components/PlayArea";

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

src/components/PlayArea.js

import React from "react";
import { Box, Grid } from "@material-ui/core";
import { useStyles } from "../hooks/useStyles";
import Card from "./Card";

/**
* 省略
*/
export default function PlayArea(props) {
 const classes = useStyles();
 return (
   <Box className={classes.playArea}>
     <Grid container direction="row" spacing={2} alignItems="center" justify="center">
       <Grid item>
         <Card card={props.card} />
       </Grid>
     </Grid>
   </Box>
 );
}

src/components/Card.js

import React from "react";
import { Card as MuiCard, Box } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";

const useCardStyles = makeStyles({
  省略
});

/**
* 省略
*/
export default function Card(props) {
 const classes = useCardStyles();
 const topAndBottom = props.card === null ? '?' : props.card.suit + props.card.rank;
 const middle = props.card === null ? '?' : props.card.suit;
 return (
   <MuiCard className={classes.root}>
     <Box className={classes.content} display="flex" flexDirection="column">
       <Box className={classes.top} alignSelf="flex-start">
         {topAndBottom}
       </Box>
       <Box className={classes.middle}>{middle}</Box>
       <Box className={classes.bottom} alignSelf="flex-end">
         {topAndBottom}
       </Box>
     </Box>
   </MuiCard>
 );
}

完成イメージ

上記のように作成すると、画面のようにランクやスーツが？のカードが表示されます。

次回

最初にも書きましたが、ご自身で作成されて、すでに問題なく動いているようであれば問題ありません。
いいなと思ったところは取り入れる、そんなスタンスでいきましょう！
次回は #6 の解答編です！