added fade-in fade-out animation for probability area and player decision area

src/assets/cards.css

@@ -10,6 +10,34 @@
 /* card itself
 ********************************************************************/
 
+.playingCards.unselectable {
+    pointer-events: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.playingCards {
+    visibility: visible;
+    transform: translateY(0);
+    transition: visibility 0s, opacity 0.2s, transform 0.3s;
+    opacity: 1;
+}
+
+.playingCards.fade-in {
+    visibility: hidden;
+    transform: translateY(-10px);
+    /*transition: visibility 0.1s, opacity 0.05s;*/
+    opacity: 0;
+}
+
+.playingCards.fade-out {
+    visibility: hidden;
+    transform: translateY(0);
+    transition: visibility 0.1s, opacity 0.05s;
+    opacity: 0;
+}
+
 .playingCards .card {
     display: inline-block;
     width: 3.3em;

src/assets/gameview.scss

@@ -47,26 +47,17 @@
                     text-align: center;
                 }
                 .playing {
-                    -webkit-transition: background-color 250ms ease;
+                    -webkit-transition: background-color 0.3s ease;
-                    -ms-transition: background-color 250ms ease;
+                    -ms-transition: background-color 0.3s ease;
-                    transition: background-color 250ms ease;
+                    transition: background-color 0.3s ease;
                     display: table-cell;
                     height: 152px;
                     vertical-align: middle;
-                    .playingCards {
+
-                        visibility: visible;
+                    .playingCards ul.hand {
-                        transition: visibility 0s, opacity 0.5s;
-                        opacity: 1;
-                    }
-                    .playingCards.hide {
-                        visibility: hidden;
-                        transition: visibility 0.1s, opacity 0.05s;
-                        opacity: 0;
-                        pointer-events:none;
-                    }
-                    .playingCards > ul.hand {
                         margin-bottom: 0;
                     }
+
                     .probability-move {
                         font-size: 10px;
                         width: 100%;

src/components/GameBoard/DoudizhuGameBoard.js

@@ -9,12 +9,12 @@ class DoudizhuGameBoard extends React.Component {
 
     }
 
-    computeSingleLineHand(cards) {
+    computeSingleLineHand(cards, fadeClassName="") {
         if(cards === "P"){
             return <div className="non-card"><span>Pass</span></div>
         }else{
             return (
-                <div className="playingCards">
+                <div className={"playingCards unselectable "+fadeClassName}>
                     <ul className="hand" style={{width: computeHandCardsWidth(cards.length, 12)}}>
                         {cards.map(card=>{
                             const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
@@ -45,7 +45,7 @@ class DoudizhuGameBoard extends React.Component {
         return (
             <div>
                 <div className="player-hand-up">
-                    <div className="playingCards">
+                    <div className="playingCards unselectable">
                         <ul className="hand">
                             {upCards.map(card => {
                                 const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
@@ -62,7 +62,7 @@ class DoudizhuGameBoard extends React.Component {
                     </div>
                 </div>
                 <div className="player-hand-down">
-                    <div className="playingCards">
+                    <div className="playingCards unselectable">
                         <ul className="hand">
                             {downCards.map(card => {
                                 const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
@@ -86,7 +86,13 @@ class DoudizhuGameBoard extends React.Component {
         if(this.props.currentPlayer === playerIdx){
             return <div className="non-card"><span>{`Consideration Time: ${millisecond2Second(this.props.considerationTime)}s`}</span></div>
         }else{
-            return this.computeSingleLineHand(this.props.latestAction[playerIdx])
+
+            let fadeClassName = "";
+            if(this.props.toggleFade === "fade-out" && (playerIdx+2)%3 === this.props.currentPlayer)
+                fadeClassName = this.props.toggleFade;
+            else if(this.props.toggleFade === "fade-in" && (playerIdx+1)%3 === this.props.currentPlayer)
+                fadeClassName = this.props.toggleFade;
+            return this.computeSingleLineHand(this.props.latestAction[playerIdx], fadeClassName)
         }
     }
 

src/view/DoudizhuGameView.js

@@ -32,7 +32,8 @@ class DoudizhuGameView extends React.Component {
             latestAction: [[], [], []],
             mainViewerId: mainViewerId,
             turn: 0,
-            toggleFadeIn: "",
+            toggleFade: "",
+
             currentPlayer: null,
             considerationTime: this.initConsiderationTime,
         };
@@ -56,7 +57,7 @@ class DoudizhuGameView extends React.Component {
                 currentConsiderationTime = currentConsiderationTime < 0 ? 0 : currentConsiderationTime;
                 if(currentConsiderationTime === 0 && this.state.gameSpeed < 2){
                     let gameInfo = deepCopy(this.state.gameInfo);
-                    gameInfo.toggleFadeIn = "hide";
+                    gameInfo.toggleFade = "fade-out";
                     this.setState({gameInfo: gameInfo});
                 }
                 let gameInfo = deepCopy(this.state.gameInfo);
@@ -69,7 +70,7 @@ class DoudizhuGameView extends React.Component {
                     let gameInfo = deepCopy(this.state.gameInfo);
                     gameInfo.latestAction[res.playerIdx] = this.cardStr2Arr(res.move);
                     gameInfo.turn++;
-
+                    gameInfo.toggleFade = "fade-in";
                     gameInfo.currentPlayer = (gameInfo.currentPlayer+1)%3;
                     // take away played cards from player's hands
                     const remainedCards = removeCards(gameInfo.latestAction[res.playerIdx], gameInfo.hands[res.playerIdx]);
@@ -81,19 +82,24 @@ class DoudizhuGameView extends React.Component {
                     gameInfo.considerationTime = this.initConsiderationTime;
                     this.setState({gameInfo: gameInfo}, ()=>{
                         // toggle fade in
-                        if(this.state.gameInfo.toggleFadeIn !== ""){
+                        if(this.state.gameInfo.toggleFade !== ""){
+                            // doubleRaf(()=>{
+                            //     let gameInfo = deepCopy(this.state.gameInfo);
+                            //     gameInfo.toggleFade = "";
+                            //     this.setState({gameInfo: gameInfo});
+                            // });
                             setTimeout(()=>{
                                 let gameInfo = deepCopy(this.state.gameInfo);
-                                gameInfo.toggleFadeIn = "";
+                                gameInfo.toggleFade = "";
                                 this.setState({gameInfo: gameInfo});
-                            }, 50);
+                            }, 200);
                         }
                     });
                 }else{
                     console.log("Mismatched current player index");
                 }
             }
-        }, 100);
+        }, this.considerationTimeDeduction);
     }
 
     startReplay() {
@@ -137,9 +143,13 @@ class DoudizhuGameView extends React.Component {
                     gameInfo.gameStatus = "over";
                     this.setState({ gameInfo: gameInfo });
                     if(winner.role === "landlord")
-                        alert("Landlord Wins");
+                        setTimeout(()=>{
+                            alert("Landlord Wins");
+                        }, 200);
                     else
-                        alert("Peasants Win");
+                        setTimeout(()=>{
+                            alert("Peasants Win");
+                        }, 200);
                 }else{
                     console.log("Error in finding winner");
                 }
@@ -186,10 +196,10 @@ class DoudizhuGameView extends React.Component {
 
     computeSingleLineHand(cards) {
         if(cards === "P"){
-            return <div className={"non-card "+this.state.gameInfo.toggleFadeIn}><span>Pass</span></div>
+            return <div className={"non-card "+this.state.gameInfo.toggleFade}><span>Pass</span></div>
         }else{
             return (
-                <div className={"playingCards "+this.state.gameInfo.toggleFadeIn}>
+                <div className={"unselectable playingCards "+this.state.gameInfo.toggleFade}>
                     <ul className="hand" style={{width: computeHandCardsWidth(cards.length, 10)}}>
                         {cards.map(card=>{
                             const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
@@ -285,6 +295,7 @@ class DoudizhuGameView extends React.Component {
                                     considerationTime={this.state.gameInfo.considerationTime}
                                     turn={this.state.gameInfo.turn}
                                     runNewTurn={(prevTurn)=>this.runNewTurn(prevTurn)}
+                                    toggleFade={this.state.gameInfo.toggleFade}
                                 />
                             </Paper>
                         </div>