implemented user select hand functionality; implemented remove played card functionality

This commit is contained in:
Songyi Huang 2021-04-18 19:04:57 -07:00
parent bce52cf948
commit 426d90cf51
6 changed files with 56 additions and 14 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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]};
}
}

View File

@ -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}`

View File

@ -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,15 +84,35 @@ 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(() => {
@ -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}