142 lines
3.9 KiB
JavaScript
142 lines
3.9 KiB
JavaScript
import React, { useState, useCallback, useEffect, useMemo, useRef,
|
|
useContext } from "react";
|
|
import equal from "fast-deep-equal";
|
|
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Button from '@material-ui/core/Button';
|
|
import "./ChooseCard.css";
|
|
import {Resource} from './Resource.js';
|
|
import {GlobalContext} from './GlobalContext.js';
|
|
|
|
const ChooseCard = () => {
|
|
const { ws } = useContext(GlobalContext);
|
|
const [turn, setTurn] = useState(undefined);
|
|
const [color, setColor] = useState(undefined);
|
|
const [state, setState] = useState(undefined);
|
|
const [cards, setCards] = useState([]);
|
|
const fields = useMemo(() => [
|
|
'turn', 'color', 'state'
|
|
], []);
|
|
|
|
const onWsMessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
switch (data.type) {
|
|
case 'game-update':
|
|
console.log(`choose-card - game-update: `, data.update);
|
|
if ('turn' in data.update && !equal(turn, data.update.turn)) {
|
|
setTurn(data.update.turn);
|
|
}
|
|
if ('color' in data.update && data.update.color !== color) {
|
|
setColor(data.update.color);
|
|
}
|
|
if ('state' in data.update && data.update.state !== state) {
|
|
setState(data.update.state);
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
const refWsMessage = useRef(onWsMessage);
|
|
useEffect(() => { refWsMessage.current = onWsMessage; });
|
|
useEffect(() => {
|
|
if (!ws) { return; }
|
|
const cbMessage = e => refWsMessage.current(e);
|
|
ws.addEventListener('message', cbMessage);
|
|
return () => { ws.removeEventListener('message', cbMessage); }
|
|
}, [ws, refWsMessage]);
|
|
useEffect(() => {
|
|
if (!ws) { return; }
|
|
ws.send(JSON.stringify({
|
|
type: 'get',
|
|
fields
|
|
}));
|
|
}, [ws, fields]);
|
|
|
|
const selectResources = useCallback((event) => {
|
|
ws.send(JSON.stringify({
|
|
type: 'select-resources',
|
|
cards
|
|
}));
|
|
}, [ws, cards]);
|
|
|
|
let count = 0;
|
|
if (turn && turn.actions && turn.actions.indexOf('select-resources') !== -1) {
|
|
if (turn.active) {
|
|
if (turn.color === color) {
|
|
count = turn.active === 'monopoly' ? 1 : 2;
|
|
}
|
|
}
|
|
|
|
if (state === 'volcano') {
|
|
if (!turn.select) {
|
|
count = 0;
|
|
} else if (color in turn.select) {
|
|
count = turn.select[color];
|
|
} else {
|
|
count = 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
const selectCard = useCallback((event) => {
|
|
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 (count === 0) {
|
|
return <></>;
|
|
}
|
|
|
|
const resources = [
|
|
'wheat', 'brick', 'stone', 'sheep', 'wood'
|
|
].map(type => {
|
|
return <Resource
|
|
key={type}
|
|
type={type}
|
|
count={count}
|
|
onClick={selectCard}/>;
|
|
});
|
|
|
|
let title;
|
|
switch (turn.active) {
|
|
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;
|
|
case 'volcano':
|
|
title = <><b>Volcano has minerals</b>! Tap the {count} resources you want to receive from the bank!</>;
|
|
break;
|
|
default:
|
|
title = <>Unknown card type {turn.active}.</>;
|
|
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={selectResources}>submit</Button></div>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export {ChooseCard}; |