Create call to action card component. Add cta cards to home page for …

…each game

app/src/Home.js

@@ -7,6 +7,7 @@ import JoinForm from "components/join-form";
 import HostForm from "components/host-form";
 import NavBar from "components/navbar";
 import TypedBanner from "components/typed-banner";
+import CallToActionCard from "components/cta-card"
 
 const Home = () => {
   const { push } = useHistory();
@@ -38,6 +39,23 @@ const Home = () => {
         <JoinForm onJoinGame={onJoinGame} />
       </Flex>
       <TypedBanner typedSentences={typedSentences}/>
+      <Flex justifyContent="space-around" flexDirection="row" flexWrap="wrap">
+        {
+          compendium.map(
+            ({ name, image, description }, index) => (
+              <CallToActionCard
+                size={index === 0 ? 2 : 1}
+                headingText={name}
+                imageSrc={image.src}
+                imageAlt={image.alt}
+                bodyText={description}
+                onCallToAction={() => onNewGame(index)}
+                buttonLabel={`Start ${name}`}
+              />
+            )
+          )
+        }
+      </Flex>
     </>
   )
 }

app/src/compendium.js

@@ -4,10 +4,10 @@ import HotPotato from "games/hot-potato";
 import Chess from "games/chess";
 
 const compendium = [
+  Chess,
   TicTacToe,
-  Whist,
   HotPotato,
-  Chess,
+  Whist,
 ];
 
 export default compendium;

app/src/components/cta-card/CallToActionCard.js

@@ -0,0 +1,44 @@
+import { Button, Box, Text, Card, Image, Heading, Flex } from "rebass/styled-components";
+
+const sizeToLeftWidth = (sizeNum) => {
+  if (sizeNum > 1) return ["20em", "22em"];
+  return ["14em", "16em"];
+}
+
+const sizeToRightWidth = (sizeNum) => {
+  if (sizeNum > 1) return ["14em", "16em"];
+  return ["10em", "12em"];
+}
+
+const CallToActionCard = ({
+  size = 1,
+  imageSrc,
+  imageAlt,
+  headingText,
+  bodyText,
+  onCallToAction,
+  buttonLabel
+}) => (
+  <Card m={3}>
+    <Flex flexDirection="row" height="100%">
+      <Flex width={sizeToLeftWidth(size)} backgroundColor="gray" alignItems="center" justifyContent="center" m={3}>
+        <Image src={imageSrc} alt={imageAlt} />
+      </Flex>
+      <Box width={sizeToRightWidth(size)} m={3} pt={2}>
+        <Heading>{headingText}</Heading>
+        <Text>{bodyText}</Text>
+        <Flex justifyContent="end" mt={3}>
+          <Button
+            onClick={onCallToAction}
+            onKeyPress={onCallToAction}
+            variant="primary"
+          >
+            {buttonLabel}
+          </Button>
+        </Flex>
+      </Box>
+    </Flex>
+  </Card>
+);
+
+export default CallToActionCard;

app/src/components/cta-card/index.js

@@ -0,0 +1,2 @@
+import CallToActionCard from "./CallToActionCard";
+export default CallToActionCard;

app/src/games/chess/index.js

@@ -1,10 +1,14 @@
 import game from "./game";
 import { Host, Guest } from "./client";
 import presetTheme from '@rebass/preset'
+import thumbnail from "./chess.jpg"
 
 const name = "Chess";
 const theme = presetTheme;
 
-const Chess = { name, theme, Host, Guest, game };
+const description = "Chess is a recreational and competitive board game played between two players.";
+const image = { alt: "A chess board", src: thumbnail }
+
+const Chess = { name, theme, image, description, Host, Guest, game };
 
 export default Chess;

app/src/games/hot-potato/index.js

@@ -2,12 +2,18 @@ import game from "./game";
 import { Host, Guest } from "./client";
 import presetTheme from '@rebass/preset'
 import { withPlayers } from "components/players"
+import thumbnail from "./hot-potato.jpg"
 
 const name = "Hot Potato";
 const theme = presetTheme;
 
+const description = "Pass the potato to your friends."
+const image = { alt: "A potato", src: thumbnail }
+
 const HotPotato = withPlayers({ maxPlayers: 16, minPlayers: 2 }, {
   name,
+  description,
+  image,
   theme,
   Host,
   Guest,

app/src/games/tic-tac-toe/index.js

@@ -1,8 +1,11 @@
 import game from "./game";
 import { Host, Guest } from "./client";
+import thumbnail from "./tic-tac-toe.jpg";
 
 const name = "Tic Tac Toe";
+const description = "a paper-and-pencil game for two players, X and O, who take turns marking the spaces in a 3×3 grid."
+const image = { alt: "tic tac toe", src: thumbnail }
 
-const TicTacToe = { name, Host, Guest, game };
+const TicTacToe = { name, description, image, Host, Guest, game };
 
 export default TicTacToe;

app/src/games/whist/index.js

@@ -1,11 +1,14 @@
 import { withPlayers } from "components/players";
 import game from "./game";
 import { Host, Guest } from "./client";
+import thumbnail from "./whist.jpg";
 
 const name = "Whist";
+const description = "Whist is a classic English trick-taking card game which was widely played in the 18th and 19th centuries."
+const image = { alt: "whist game", src: thumbnail }
 
 const playersOptions = { minPlayers: 4, maxPlayers: 4 }
 
-const Whist = withPlayers(playersOptions, { name, Host, Guest, game });
+const Whist = withPlayers(playersOptions, { name, description, image, Host, Guest, game });
 
 export default Whist;