1
0
James Ketrenos 8686663d80 Trading functional with players; not yet with bank
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
2022-02-17 18:07:25 -08:00

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;