implemented user select hand functionality; implemented remove played card functionality

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;

src/components/GameBoard/DoudizhuGameBoard.js

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

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

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

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,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);
+        await timeout(1200);
-        const apiRes = gameState.hands[gameState.currentPlayer][gameState.hands[gameState.currentPlayer].length - 1];
+        const apiRes = [card2SuiteAndRank(gameState.hands[gameState.currentPlayer][gameState.hands[gameState.currentPlayer].length - 1]).rank];
-        console.log('mock api res', apiRes);
+        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}