diff --git a/client/src/ChooseCard.css b/client/src/ChooseCard.css new file mode 100644 index 0000000..7c5d825 --- /dev/null +++ b/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; +} diff --git a/client/src/ChooseCard.js b/client/src/ChooseCard.js new file mode 100644 index 0000000..6a83c61 --- /dev/null +++ b/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 selectCard(type)}/>; + }); + + let title; + switch (type) { + case 'monopoly': + title = <>Monopoly! Tap the resource type you want everyone to give you!; + break; + case 'year-of-plenty': + title = <>Year of Plenty! Tap the resource type and receive 2 from the bank!; + break; + } + + return ( +
+ +
{ title }
+
+ { resources } +
+
+
+ ); +}; + +export default ChooseCard; \ No newline at end of file