76 lines
1.9 KiB
JavaScript
76 lines
1.9 KiB
JavaScript
import React, { useState, useCallback } from "react";
|
|
import "./ChooseCard.css";
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Button from '@material-ui/core/Button';
|
|
import Resource from './Resource.js';
|
|
|
|
const ChooseCard = ({table, type}) => {
|
|
const [cards, setCards] = useState([]);
|
|
const count = (type === 'monopoly') ? 1 : 2;
|
|
|
|
const selectCard = useCallback((event) => {
|
|
event.target.classList.toggle('Selected');
|
|
|
|
const selected = document.querySelectorAll('.ChooseCard .Selected');
|
|
if (selected.length > count) {
|
|
for (let i = 0; i < selected.length; i++) {
|
|
selected[i].classList.remove('Selected');
|
|
}
|
|
setCards([]);
|
|
return;
|
|
}
|
|
|
|
let tmp = [];
|
|
for (let i = 0; i < selected.length; i++) {
|
|
tmp.push(selected[i].getAttribute('data-type'));
|
|
}
|
|
setCards(tmp);
|
|
}, [ setCards, count ]);
|
|
|
|
if (!table.game) {
|
|
return <></>;
|
|
}
|
|
|
|
console.log(cards.length, count);
|
|
|
|
const submitCards = () => {
|
|
table.selectResources(cards);
|
|
}
|
|
|
|
const resources = [
|
|
'wheat', 'brick', 'stone', 'sheep', 'wood'
|
|
].map(type => {
|
|
return <Resource
|
|
key={type}
|
|
type={type}
|
|
count={count}
|
|
onClick={selectCard}/>;
|
|
});
|
|
|
|
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 two resources you want to receive from the bank!</>;
|
|
break;
|
|
default:
|
|
title = <>Unknown card type {type}.</>;
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<div className="ChooseCard">
|
|
<Paper>
|
|
<div className="Title">{ title }</div>
|
|
<div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
|
|
{ resources }
|
|
</div>
|
|
<div className="Actions"><Button disabled={cards.length !== count} onClick={submitCards}>submit</Button></div>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChooseCard; |