Add ChooseCard files

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/ChooseCard.css

@@ -0,0 +1,38 @@
+.ChooseCard {
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 40vw;
+  bottom: 0;
+  top: 0;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,0.5);
+  z-index: 1000;
+}
+
+.ChooseCard .Title {
+  align-self: center;
+  padding: 2px;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+.ChooseCard > * {
+/*  min-width: 40em;*/
+  display: inline-flex;
+  padding: 0.5em;
+  flex-direction: column;
+}
+
+.ChooseCard .Stack {
+  margin: 0;
+  padding: 0;
+}
+
+.ChooseCard .Resource {
+  width: 8em; /* 5x7 aspect ratio */
+  height: 11.2em;
+  margin: 0;
+  padding: 0;
+}

client/src/ChooseCard.js

@@ -0,0 +1,43 @@
+import React, { useState, useCallback } from "react";
+import "./ChooseCard.css";
+import Paper from '@material-ui/core/Paper';
+import Resource from './Resource.js';
+
+const ChooseCard = ({table, type}) => {
+  if (!table.game) {
+    return <></>;
+  }
+
+  const selectCard = (card) => {
+    table.selectResource(card);
+  }
+
+  const resources = [
+    'wheat', 'brick', 'stone', 'sheep', 'wood'
+  ].map(type => {
+    return <Resource type={type} key={type} count={1} select={() => selectCard(type)}/>;
+  });
+
+  let title;
+  switch (type) {
+  case 'monopoly':
+    title = <><b>Monopoly</b>! Tap the resource type you want everyone to give you!</>;
+    break;
+  case 'year-of-plenty':
+    title = <><b>Year of Plenty</b>! Tap the resource type and receive <b>2</b> from the bank!</>;
+    break;
+  }
+
+  return (
+    <div className="ChooseCard">
+      <Paper>
+        <div className="Title">{ title }</div>
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+          { resources }
+        </div>
+      </Paper>
+    </div>
+  );
+};
+
+export default ChooseCard;