implemented user select hand functionality; implemented remove played card functionality
This commit is contained in:
parent
bce52cf948
commit
426d90cf51
|
@ -60,8 +60,13 @@
|
|||
.playingCards a.card {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.playingCards.selectable a.card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* selected and hover state */
|
||||
.playingCards a.card:hover, .playingCards a.card:active,
|
||||
.playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card.selected,
|
||||
.playingCards label.card:hover,
|
||||
.playingCards strong .card {
|
||||
bottom: 1em;
|
||||
|
|
|
@ -51,13 +51,19 @@ class DoudizhuGameBoard extends React.Component {
|
|||
return <div className="non-card"><span>PASS</span></div>
|
||||
}else{
|
||||
return (
|
||||
<div className={"playingCards unselectable loose "+fadeClassName}>
|
||||
<div className={`playingCards selectable loose ${fadeClassName} ${this.props.handSelectable ? 'selectable' : 'unselectable'}`}>
|
||||
<ul className="hand" style={{width: computeHandCardsWidth(cards.length, 12)}}>
|
||||
{cards.map(card=>{
|
||||
const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
|
||||
let selected = false;
|
||||
if (this.props.handSelectable) {
|
||||
selected = this.props.selectedCards.indexOf(card) >= 0;
|
||||
}
|
||||
|
||||
// todo: right click and move to select multiple cards
|
||||
return (
|
||||
<li key={`handCard-${card}`}>
|
||||
<a className={`card ${rankClass} ${suitClass}`} href="/#">
|
||||
<a onClick={() => this.props.handleSelectedCards([card])} className={`card ${rankClass} ${suitClass} ${selected ? 'selected' : ''}`}>
|
||||
<span className="rank">{rankText}</span>
|
||||
<span className="suit">{suitText}</span>
|
||||
</a>
|
||||
|
|
|
@ -102,10 +102,10 @@ export function computeHandCardsWidth(num, emWidth) {
|
|||
|
||||
export function card2SuiteAndRank(card) {
|
||||
if (card === 'BJ') {
|
||||
return {rank: null, suite: 'X'};
|
||||
return {suite: null, rank: 'X'};
|
||||
} else if (card === 'RJ') {
|
||||
return {rank: null, suite: 'D'};
|
||||
return {suite: null, rank: 'D'};
|
||||
} else {
|
||||
return {rank: card[0], suite: card[1]};
|
||||
return {suite: card[0], rank: card[1]};
|
||||
}
|
||||
}
|
|
@ -62,7 +62,14 @@ function LeaderBoard () {
|
|||
fetchModelData();
|
||||
}, [reloadMenu]);
|
||||
|
||||
const { type, name } = qs.parse(window.location.search);
|
||||
let { type, name } = qs.parse(window.location.search);
|
||||
// default value
|
||||
if (!type) {
|
||||
type = "game";
|
||||
}
|
||||
if (!name) {
|
||||
name = "leduc-holdem";
|
||||
}
|
||||
let requestUrl = `${apiUrl}/tournament/`;
|
||||
if (type === 'game') {
|
||||
requestUrl += `query_agent_payoff?name=${name}&elements_every_page=${rowsPerPage}&page_index=${page}`
|
||||
|
|
|
@ -10,12 +10,13 @@ const initHands = [
|
|||
'RJ BJ D2 SA SK CK SJ HJ DJ CT DT C9 S8 H8 C8 D7 D5 H3 S3 D3',
|
||||
];
|
||||
|
||||
let gameStateTimeout = null;
|
||||
|
||||
function PvEDoudizhuDemoView() {
|
||||
const initConsiderationTime = 2000;
|
||||
const considerationTimeDeduction = 200;
|
||||
const mainPlayerId = 0;
|
||||
|
||||
let gameStateTimeout = null;
|
||||
const [considerationTime, setConsiderationTime] = useState(initConsiderationTime);
|
||||
const [toggleFade, setToggleFade] = useState('');
|
||||
const [gameStatus, setGameStatus] = useState('ready'); // "ready", "playing", "paused", "over"
|
||||
|
@ -25,6 +26,7 @@ function PvEDoudizhuDemoView() {
|
|||
currentPlayer: null, // index of current player
|
||||
turn: 0,
|
||||
});
|
||||
const [selectedCards, setSelectedCards] = useState([]); // user selected hand card
|
||||
|
||||
const cardStr2Arr = (cardStr) => {
|
||||
return cardStr === 'pass' || cardStr === '' ? 'pass' : cardStr.split(' ');
|
||||
|
@ -67,9 +69,9 @@ function PvEDoudizhuDemoView() {
|
|||
if (playingCard.length === 0)
|
||||
return true;
|
||||
|
||||
const [_, rank] = card2SuiteAndRank(card);
|
||||
const { rank } = card2SuiteAndRank(card);
|
||||
const idx = playingCard.indexOf(rank);
|
||||
if (idx > 0) {
|
||||
if (idx >= 0) {
|
||||
playingCard.splice(idx, 1);
|
||||
newLatestAction.push(card);
|
||||
return false;
|
||||
|
@ -82,16 +84,36 @@ function PvEDoudizhuDemoView() {
|
|||
|
||||
newGameState.latestAction[gameState.currentPlayer] = newLatestAction;
|
||||
newGameState.hands[gameState.currentPlayer] = newHand;
|
||||
newGameState.currentPlayer = (newGameState.currentPlayer + 1) % 3;
|
||||
newGameState.turn++;
|
||||
setGameState(newGameState);
|
||||
|
||||
if (gameStateTimeout) {
|
||||
clearTimeout(gameStateTimeout);
|
||||
setConsiderationTime(initConsiderationTime);
|
||||
}
|
||||
};
|
||||
|
||||
const requestApiPlay = async () => {
|
||||
// mock delayed API play
|
||||
await timeout(250);
|
||||
const apiRes = gameState.hands[gameState.currentPlayer][gameState.hands[gameState.currentPlayer].length - 1];
|
||||
console.log('mock api res', apiRes);
|
||||
await timeout(1200);
|
||||
const apiRes = [card2SuiteAndRank(gameState.hands[gameState.currentPlayer][gameState.hands[gameState.currentPlayer].length - 1]).rank];
|
||||
console.log('mock api res', apiRes, gameStateTimeout);
|
||||
proceedNextTurn(apiRes);
|
||||
};
|
||||
|
||||
const handleSelectedCards = (cards) => {
|
||||
let newSelectedCards = selectedCards.slice();
|
||||
cards.forEach(card => {
|
||||
if (newSelectedCards.indexOf(card) >= 0) {
|
||||
newSelectedCards.splice(newSelectedCards.indexOf(card), 1);
|
||||
} else {
|
||||
newSelectedCards.push(card);
|
||||
}
|
||||
});
|
||||
setSelectedCards(newSelectedCards);
|
||||
}
|
||||
|
||||
const gameStateTimer = () => {
|
||||
gameStateTimeout = setTimeout(() => {
|
||||
let currentConsiderationTime = considerationTime;
|
||||
|
@ -113,7 +135,6 @@ function PvEDoudizhuDemoView() {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log(considerationTime);
|
||||
gameStateTimer();
|
||||
}, [considerationTime]);
|
||||
|
||||
|
@ -151,8 +172,11 @@ function PvEDoudizhuDemoView() {
|
|||
<div style={{ height: '100%' }}>
|
||||
<Paper className={'doudizhu-gameboard-paper'} elevation={3}>
|
||||
<DoudizhuGameBoard
|
||||
handSelectable={true}
|
||||
playerInfo={playerInfo}
|
||||
hands={gameState.hands}
|
||||
selectedCards={selectedCards}
|
||||
handleSelectedCards={handleSelectedCards}
|
||||
latestAction={gameState.latestAction}
|
||||
mainPlayerId={mainPlayerId}
|
||||
currentPlayer={gameState.currentPlayer}
|
Loading…
Reference in New Issue