From 426d90cf51d5f0f7f441b04a4b18665e73517f5f Mon Sep 17 00:00:00 2001 From: Songyi Huang Date: Sun, 18 Apr 2021 19:04:57 -0700 Subject: [PATCH] implemented user select hand functionality; implemented remove played card functionality --- src/assets/cards.css | 7 +++- src/components/GameBoard/DoudizhuGameBoard.js | 10 ++++- src/utils/index.js | 6 +-- src/view/LeaderBoard.js | 9 ++++- .../PvEDoudizhuDemoView.js} | 38 +++++++++++++++---- src/view/{PVEView => PvEView}/index.js | 0 6 files changed, 56 insertions(+), 14 deletions(-) rename src/view/{PVEView/PVEDoudizhuDemoView.js => PvEView/PvEDoudizhuDemoView.js} (81%) rename src/view/{PVEView => PvEView}/index.js (100%) diff --git a/src/assets/cards.css b/src/assets/cards.css index a6f4b75..bbed0fd 100644 --- a/src/assets/cards.css +++ b/src/assets/cards.css @@ -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; diff --git a/src/components/GameBoard/DoudizhuGameBoard.js b/src/components/GameBoard/DoudizhuGameBoard.js index 2cf7dcc..0cc68f0 100644 --- a/src/components/GameBoard/DoudizhuGameBoard.js +++ b/src/components/GameBoard/DoudizhuGameBoard.js @@ -51,13 +51,19 @@ class DoudizhuGameBoard extends React.Component { return
PASS
}else{ return ( -
+
    {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 (
  • - + this.props.handleSelectedCards([card])} className={`card ${rankClass} ${suitClass} ${selected ? 'selected' : ''}`}> {rankText} {suitText} diff --git a/src/utils/index.js b/src/utils/index.js index a04d085..c4b577c 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -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]}; } } \ No newline at end of file diff --git a/src/view/LeaderBoard.js b/src/view/LeaderBoard.js index 5556f99..3caa184 100644 --- a/src/view/LeaderBoard.js +++ b/src/view/LeaderBoard.js @@ -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}` diff --git a/src/view/PVEView/PVEDoudizhuDemoView.js b/src/view/PvEView/PvEDoudizhuDemoView.js similarity index 81% rename from src/view/PVEView/PVEDoudizhuDemoView.js rename to src/view/PvEView/PvEDoudizhuDemoView.js index e451ce1..996c04a 100644 --- a/src/view/PVEView/PVEDoudizhuDemoView.js +++ b/src/view/PvEView/PvEDoudizhuDemoView.js @@ -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() {