added fade-in fade-out animation for probability area and player decision area
This commit is contained in:
songyih
parent
6a2bbe1112
commit
7f1310f192
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -47,26 +47,17 @@
|
|||
text-align: center;
|
||||
}
|
||||
.playing {
|
||||
-webkit-transition: background-color 250ms ease;
|
||||
-ms-transition: background-color 250ms ease;
|
||||
transition: background-color 250ms ease;
|
||||
-webkit-transition: background-color 0.3s ease;
|
||||
-ms-transition: background-color 0.3s ease;
|
||||
transition: background-color 0.3s ease;
|
||||
display: table-cell;
|
||||
height: 152px;
|
||||
vertical-align: middle;
|
||||
.playingCards {
|
||||
visibility: visible;
|
||||
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 {
|
||||
|
||||
.playingCards ul.hand {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.probability-move {
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue