267 lines
7.6 KiB
JavaScript
267 lines
7.6 KiB
JavaScript
import React, { useState, useCallback } from "react";
|
|
import "./Trade.css";
|
|
import { getPlayerName } from './Common.js';
|
|
import PlayerColor from './PlayerColor.js';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import Button from '@material-ui/core/Button';
|
|
import Resource from './Resource.js';
|
|
|
|
const ResourceCounter = ({type, onCount, max}) => {
|
|
const [count, setCount] = useState(0);
|
|
const plusClicked = (event) => {
|
|
if (max === undefined || max > count) {
|
|
if (onCount) {
|
|
onCount(type, count+1);
|
|
}
|
|
setCount(count+1);
|
|
}
|
|
};
|
|
const minusClicked = (event) => {
|
|
if (count > 0) {
|
|
if (onCount) {
|
|
onCount(type, count-1);
|
|
}
|
|
setCount(count-1);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="ResourceCounter" style={{
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}}>
|
|
<Resource disabled type={type} count={1}/>
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-around',
|
|
width: '100%',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Button style={{
|
|
flexShrink: 1,
|
|
minWidth: 0
|
|
}}
|
|
disabled={count>=max}
|
|
onClick={plusClicked}>+</Button>
|
|
<div style={{userSelect: 'none'}}>{count}</div>
|
|
<Button style={{
|
|
flexShrink: 1,
|
|
minWidth: 0
|
|
}}
|
|
disabled={count===0}
|
|
onClick={minusClicked}>-</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Trade = ({table}) => {
|
|
const [giveLine, setGiveLine] = useState('nothing');
|
|
const [getLine, setGetLine] = useState('nothing');
|
|
|
|
const [gives, setGives] = useState([]);
|
|
const [gets, setGets] = useState([]);
|
|
|
|
const giveCount = useCallback((type, count) => {
|
|
gives[type] = count;
|
|
if (!count) {
|
|
delete gives[type];
|
|
}
|
|
setGives(gives);
|
|
const items = [];
|
|
for (let key in gives) {
|
|
items.push(`${gives[key]} ${key}`);
|
|
}
|
|
if (items.length === 0) {
|
|
setGiveLine('nothing');
|
|
} else {
|
|
setGiveLine(items.join(', '));
|
|
}
|
|
}, [setGiveLine, setGives]);
|
|
|
|
const getCount = useCallback((type, count) => {
|
|
gets[type] = count;
|
|
if (!count) {
|
|
delete gets[type];
|
|
}
|
|
setGets(gets);
|
|
const items = [];
|
|
for (let key in gets) {
|
|
items.push(`${gets[key]} ${key}`);
|
|
}
|
|
if (items.length === 0) {
|
|
setGetLine('nothing');
|
|
} else {
|
|
setGetLine(items.join(', '));
|
|
}
|
|
}, [setGetLine, setGets]);
|
|
|
|
if (!table.game) {
|
|
return (<></>);
|
|
}
|
|
|
|
const isTurn = (table.game.turn && table.game.turn.color === table.game.color) ? true : false;
|
|
|
|
const offerClicked = (event) => {
|
|
const trade = {
|
|
gives: [],
|
|
gets: []
|
|
};
|
|
for (let key in gives) {
|
|
trade.gives.push({type: key, count: gives[key]});
|
|
}
|
|
for (let key in gets) {
|
|
trade.gets.push({type: key, count: gets[key]});
|
|
}
|
|
table.offerTrade(trade);
|
|
}
|
|
|
|
const acceptClicked = (offer) => {
|
|
table.acceptTrade(offer);
|
|
};
|
|
|
|
const cancelClicked = (event) => {
|
|
table.cancelTrading();
|
|
}
|
|
|
|
let players = [];
|
|
for (let color in table.game.players) {
|
|
const item = table.game.players[color],
|
|
name = getPlayerName(table.game.sessions, color);
|
|
if (name && table.game.name !== name) {
|
|
players.push({
|
|
name: name,
|
|
color: color,
|
|
valid: false,
|
|
gets: item.gets ? item.gets : [],
|
|
gives: item.gives ? item.gives : []
|
|
});
|
|
}
|
|
}
|
|
|
|
players.sort((A, B) => {
|
|
return A.name.localeCompare(B.name);
|
|
});
|
|
|
|
if (isTurn && table.game.player && table.game.player.banks) {
|
|
table.game.player.banks.forEach(bank => {
|
|
const count = (bank === 'bank') ? 3 : 2;
|
|
players.push({
|
|
name: `The bank`,
|
|
color: undefined,
|
|
gives: [ { count: 1, type: '*' } ],
|
|
gets: [ { count: count, type: bank } ],
|
|
valid: false
|
|
});
|
|
});
|
|
|
|
players.push({
|
|
name: `The bank`,
|
|
color: undefined,
|
|
gives: [ { count: 1, type: '*' } ],
|
|
gets: [ { count: 4, type: 'bank' } ],
|
|
valid: false
|
|
});
|
|
}
|
|
|
|
if (table.game.turn.offer) {
|
|
players.forEach(trade => {
|
|
let valid = trade.gets.length && trade.gives.length;
|
|
trade.gets.forEach(resource => {
|
|
if (!valid) {
|
|
return;
|
|
}
|
|
if (resource.type !== 'bank') {
|
|
const offer = table.game.turn.offer.gives.find(item => item.type === resource.type);
|
|
valid = offer && (offer.count >= resource.count);
|
|
} else {
|
|
valid = false;
|
|
/* Doesn't matter what the resource type is so long as there
|
|
* are enough of the one kind */
|
|
table.game.turn.offer.gives.forEach(offer => {
|
|
if (offer.count >= resource.count) {
|
|
valid = true;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
trade.valid = valid;
|
|
});
|
|
}
|
|
|
|
players = players.map((item, index) => {
|
|
const gets = item.gets.map(get =>
|
|
`${get.count} ${(get.type === 'bank') ? 'of any one resource' : get.type}`)
|
|
.join(', '),
|
|
gives = item.gives.map(give =>
|
|
`${give.count} ${(give.type === '*') ? 'of any resource' : give.type}`)
|
|
.join(', ');
|
|
return (
|
|
<div className="TradePlayer" key={`player-${item.name}-${index}`}>
|
|
<PlayerColor color={item.color}/>
|
|
<div>{item.name}</div>
|
|
<div className='TradeLine'>
|
|
{ gets !== '' && gives !== '' &&
|
|
<div>wants {gets} and will give {gives}.
|
|
</div>
|
|
}
|
|
{ (gets === '' || gives === '') &&
|
|
<div>has not submitted a trade offer.
|
|
</div>
|
|
}
|
|
{ isTurn && <Button disabled={!item.valid}
|
|
onClick={() => acceptClicked(item)}>accept</Button> }
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
const player = (table.game && table.game.player) ? table.game.player : undefined;
|
|
if (!player) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<div className="Trade">
|
|
<Paper>
|
|
<div className="Title">
|
|
Trading negotiations {isTurn ? '' : `with ${table.game.turn.name}`}
|
|
</div>
|
|
<div className="PlayerList">
|
|
{ players }
|
|
</div>
|
|
<div className='TradeLine'
|
|
style={{
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start'
|
|
}}>
|
|
<div style={{display: 'flex' }}>
|
|
<b>You want to receive {getLine}.</b>
|
|
</div>
|
|
<div style={{display: 'flex' }}>
|
|
<ResourceCounter onCount={getCount} type='brick'/>
|
|
<ResourceCounter onCount={getCount} type='wood'/>
|
|
<ResourceCounter onCount={getCount} type='wheat'/>
|
|
<ResourceCounter onCount={getCount} type='sheep'/>
|
|
<ResourceCounter onCount={getCount} type='stone'/>
|
|
</div>
|
|
<div style={{display: 'flex' }}>
|
|
<b>You are willing to give {giveLine}.</b>
|
|
</div>
|
|
<div style={{display: 'flex' }}>
|
|
{ player.brick > 0 && <ResourceCounter onCount={giveCount} type='brick' max={player.brick}/> }
|
|
{ player.wood > 0 && <ResourceCounter onCount={giveCount} type='wood' max={player.wood}/> }
|
|
{ player.wheat > 0 && <ResourceCounter onCount={giveCount} type='wheat' max={player.wheat}/> }
|
|
{ player.sheep > 0 && <ResourceCounter onCount={giveCount} type='sheep' max={player.sheep}/> }
|
|
{ player.stone > 0 && <ResourceCounter onCount={giveCount} type='stone' max={player.stone}/> }
|
|
</div>
|
|
</div>
|
|
<Button disabled={getLine === 'nothing' || giveLine === 'nothing'}
|
|
onClick={offerClicked}>Offer</Button>
|
|
{ isTurn && <Button onClick={cancelClicked}>cancel</Button> }
|
|
</Paper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Trade; |