add user play button & handler functionality; adjust card style

src/assets/cards.css

@@ -37,8 +37,8 @@
 
 .playingCards .card {
     display: inline-block;
-    width: 3.3em;
+    width: 2.5em;
-    height: 4.6em;
+    height: 3.5em;
     border: 1px solid #666;
     border-radius: .3em;
     -moz-border-radius: .3em;
@@ -47,7 +47,7 @@
     padding: .25em;
     margin: 0 .5em .5em 0;
     text-align: center;
-    font-size: 1.2em; /* @change: adjust this value to make bigger or smaller cards */
+    font-size: 1.5em; /* @change: adjust this value to make bigger or smaller cards */
     font-weight: normal;
     font-family: Arial, sans-serif;
     position: relative;
@@ -65,6 +65,21 @@
     cursor: pointer;
 }
 
+/* override orignal hover style */
+.playingCards.selectable a.card:hover {
+    bottom: 0;
+}
+
+.playingCards.selectable a.card:active::after {
+    background-color: rgba(23, 146, 210, 0.5);
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 3em;
+    height: 4em;
+}
+
 /* selected and hover state */
 .playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card.selected,
 .playingCards label.card:hover,

src/assets/doudizhu.scss

@@ -27,6 +27,11 @@
             opacity: 0;
         }
         
+        .main-player-action-wrapper {
+            display: flex;
+            align-items: center;
+        }
+
         .timer {
             visibility: visible;
             transition: visibility 0s, opacity 0.2s, transform 0.3s;
@@ -35,7 +40,7 @@
             height: 60px;
             .timer-text {
                 color: #303133;
-                margin-top: 5px;
+                transform: translateY(5px);
                 font-size: 23px;
                 font-weight: bold;
                 text-shadow: 0 2px 2px #909399;

src/components/GameBoard/DoudizhuGameBoard.js

@@ -6,6 +6,7 @@ import Landlord_wName from '../../assets/images/Portrait/Landlord_wName.png';
 import Peasant_wName from '../../assets/images/Portrait/Peasant_wName.png';
 import PlaceHolderPlayer from '../../assets/images/Portrait/Player.png';
 
+import Button from "@material-ui/core/Button";
 import Chip from '@material-ui/core/Chip';
 import Avatar from '@material-ui/core/Avatar';
 
@@ -132,12 +133,25 @@ class DoudizhuGameBoard extends React.Component {
         else if(this.props.toggleFade === "fade-in" && (playerIdx+1)%3 === this.props.currentPlayer)
             fadeClassName = "scale-fade-in";
         if(this.props.currentPlayer === playerIdx){
+            if (this.props.mainPlayerId === this.props.playerInfo[this.props.currentPlayer].id) {
+                return (
+                    <div className={"main-player-action-wrapper"}>
+                        <div style={{marginRight: '2em'}} className={"timer "+fadeClassName}>
+                          <div className="timer-text">{millisecond2Second(this.props.considerationTime)}</div>
+                        </div>
+                        <Button onClick={() => {this.props.handleMainPlayerAct('play');}} variant="contained" color="primary">play</Button>
+                    </div>
+                )
+            } else {
                 return (
                     <div className={"timer "+fadeClassName}>
                         <div className="timer-text">{millisecond2Second(this.props.considerationTime)}</div>
                     </div>
                 )
+            }
         }else{
+            if (playerIdx === this.props.mainPlayerId)
+                console.log(this.props.latestAction[playerIdx]);
             return this.computeSingleLineHand(this.props.latestAction[playerIdx], fadeClassName)
         }
     }

src/view/PvEView/PvEDoudizhuDemoView.js

@@ -62,7 +62,7 @@ function PvEDoudizhuDemoView() {
         // todo: take played card out from hand, and generate playing cards with suite 
         const currentHand = newGameState.hands[gameState.currentPlayer];
         
-        let newHand = [];
+        let newHand;
         let newLatestAction = []
         if (rankOnly) {
             newHand = currentHand.filter(card => {
@@ -79,7 +79,18 @@ function PvEDoudizhuDemoView() {
                 return true;
             });
         } else {
-            // todo: proceed player's action 
+            newLatestAction = playingCard.slice();
+            newHand = currentHand.filter(card => {
+                if (playingCard.length === 0)
+                    return true;
+
+                const idx = playingCard.indexOf(card);
+                if (idx >= 0) {
+                    playingCard.splice(idx, 1);
+                    return false;
+                }
+                return true;
+            });
         }
         
         newGameState.latestAction[gameState.currentPlayer] = newLatestAction;
@@ -164,6 +175,14 @@ function PvEDoudizhuDemoView() {
         // gameStateTimer();
     };
     
+    const handleMainPlayerAct = (type) => {
+        switch(type) {
+            case 'play': {
+                proceedNextTurn(selectedCards, false);
+            }
+        }
+    }
+
     return (
         <div>
             <div className={'doudizhu-view-container'}>
@@ -185,6 +204,7 @@ function PvEDoudizhuDemoView() {
                                     runNewTurn={(prevTurn) => runNewTurn(prevTurn)}
                                     toggleFade={toggleFade}
                                     gameStatus={gameStatus}
+                                    handleMainPlayerAct={handleMainPlayerAct}
                                 />
                             </Paper>
                         </div>