add animation of playing card in doudizhu demo
This commit is contained in:
Songyi Huang
parent
3b39c4692a
commit
77912648fb
|
|
@ -61,16 +61,16 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.playingCards.selectable a.card {
|
||||
.playingCards.selectable label.card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* override orignal hover style */
|
||||
.playingCards.selectable a.card:hover {
|
||||
.playingCards.selectable label.card:hover {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.playingCards.selectable a.card:active::after {
|
||||
.playingCards.selectable label.card:active::after {
|
||||
background-color: rgba(23, 146, 210, 0.5);
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
}
|
||||
|
||||
/* selected and hover state */
|
||||
.playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card.selected,
|
||||
.playingCards a.card:hover, .playingCards a.card:active, .playingCards.selectable label.card.selected,
|
||||
.playingCards label.card:hover,
|
||||
.playingCards strong .card {
|
||||
bottom: 1em;
|
||||
|
|
|
|||
|
|
@ -47,27 +47,27 @@ class DoudizhuGameBoard extends React.Component {
|
|||
)
|
||||
}
|
||||
|
||||
computeSingleLineHand(cards, fadeClassName="") {
|
||||
computeSingleLineHand(cards, fadeClassName="", cardSelectable = false) {
|
||||
if(cards === "pass"){
|
||||
return <div className="non-card"><span>PASS</span></div>
|
||||
}else{
|
||||
return (
|
||||
<div className={`playingCards selectable loose ${fadeClassName} ${this.props.handSelectable ? 'selectable' : 'unselectable'}`}>
|
||||
<div className={`playingCards loose ${fadeClassName} ${this.props.gamePlayable && cardSelectable ? '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) {
|
||||
if (this.props.gamePlayable && cardSelectable) {
|
||||
selected = this.props.selectedCards.indexOf(card) >= 0;
|
||||
}
|
||||
|
||||
// todo: right click and move to select multiple cards
|
||||
return (
|
||||
<li key={`handCard-${card}`}>
|
||||
<a onClick={() => this.props.handleSelectedCards([card])} className={`card ${rankClass} ${suitClass} ${selected ? 'selected' : ''}`}>
|
||||
<label onClick={() => this.props.handleSelectedCards([card])} className={`card ${rankClass} ${suitClass} ${selected ? 'selected' : ''}`}>
|
||||
<span className="rank">{rankText}</span>
|
||||
<span className="suit">{suitText}</span>
|
||||
</a>
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
|
@ -95,7 +95,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
|
||||
return (
|
||||
<li key={`handCard-${card}`}>
|
||||
<a className={`card ${rankClass} ${suitClass}`} href="/#">
|
||||
<a className={`card ${rankClass} ${suitClass}`} href="javascript:void(0);">
|
||||
<span className="rank">{rankText}</span>
|
||||
<span className="suit">{suitText}</span>
|
||||
</a>
|
||||
|
|
@ -112,7 +112,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
|
||||
return (
|
||||
<li key={`handCard-${card}`}>
|
||||
<a className={`card ${rankClass} ${suitClass}`} href="/#">
|
||||
<a className={`card ${rankClass} ${suitClass}`} href="javascript:void(0);">
|
||||
<span className="rank">{rankText}</span>
|
||||
<span className="suit">{suitText}</span>
|
||||
</a>
|
||||
|
|
@ -139,7 +139,9 @@ class DoudizhuGameBoard extends React.Component {
|
|||
<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>
|
||||
<Button onClick={() => {this.props.handleMainPlayerAct('deselect')}} style={{marginRight: '2em'}} variant="contained" color="primary">Deselect</Button>
|
||||
<Button onClick={() => {this.props.handleMainPlayerAct('pass');}} style={{marginRight: '2em'}} variant="contained" color="primary">Pass</Button>
|
||||
<Button onClick={() => {this.props.handleMainPlayerAct('play');}} variant="contained" color="primary">Play</Button>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
|
|
@ -150,8 +152,6 @@ class DoudizhuGameBoard extends React.Component {
|
|||
)
|
||||
}
|
||||
}else{
|
||||
if (playerIdx === this.props.mainPlayerId)
|
||||
console.log(this.props.latestAction[playerIdx]);
|
||||
return this.computeSingleLineHand(this.props.latestAction[playerIdx], fadeClassName)
|
||||
}
|
||||
}
|
||||
|
|
@ -218,7 +218,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
<div className="player-info">
|
||||
{this.computePlayerPortrait(bottomId, bottomIdx)}
|
||||
</div>
|
||||
{bottomIdx >= 0 ? <div className="player-hand">{this.computeSingleLineHand(this.props.hands[bottomIdx])}</div> : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
|
||||
{bottomIdx >= 0 ? <div className="player-hand">{this.computeSingleLineHand(this.props.hands[bottomIdx], '', true)}</div> : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -57,14 +57,19 @@ function PvEDoudizhuDemoView() {
|
|||
}
|
||||
|
||||
const proceedNextTurn = (playingCard, rankOnly = true) => {
|
||||
setToggleFade('fade-out');
|
||||
|
||||
let newGameState = deepCopy(gameState);
|
||||
|
||||
// todo: take played card out from hand, and generate playing cards with suite
|
||||
const currentHand = newGameState.hands[gameState.currentPlayer];
|
||||
|
||||
let newHand;
|
||||
let newLatestAction = []
|
||||
if (rankOnly) {
|
||||
let newLatestAction = [];
|
||||
if (playingCard.length === 0) {
|
||||
newHand = currentHand;
|
||||
newLatestAction = 'pass';
|
||||
} else if (rankOnly) {
|
||||
newHand = currentHand.filter(card => {
|
||||
if (playingCard.length === 0)
|
||||
return true;
|
||||
|
|
@ -92,13 +97,16 @@ function PvEDoudizhuDemoView() {
|
|||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
newGameState.latestAction[gameState.currentPlayer] = newLatestAction;
|
||||
newGameState.hands[gameState.currentPlayer] = newHand;
|
||||
newGameState.currentPlayer = (newGameState.currentPlayer + 1) % 3;
|
||||
newGameState.turn++;
|
||||
setGameState(newGameState);
|
||||
|
||||
setToggleFade('fade-in');
|
||||
setTimeout(()=> {
|
||||
setToggleFade('');
|
||||
}, 200);
|
||||
if (gameStateTimeout) {
|
||||
clearTimeout(gameStateTimeout);
|
||||
setConsiderationTime(initConsiderationTime);
|
||||
|
|
@ -131,11 +139,6 @@ function PvEDoudizhuDemoView() {
|
|||
if (currentConsiderationTime > 0) {
|
||||
currentConsiderationTime -= considerationTimeDeduction;
|
||||
currentConsiderationTime = Math.max(currentConsiderationTime, 0);
|
||||
if (currentConsiderationTime === 0) {
|
||||
// consideration time used up for current player
|
||||
// if current player is controlled by user, play a random card
|
||||
// todo
|
||||
}
|
||||
setConsiderationTime(currentConsiderationTime);
|
||||
} else {
|
||||
// consideration time used up for current player
|
||||
|
|
@ -179,6 +182,16 @@ function PvEDoudizhuDemoView() {
|
|||
switch(type) {
|
||||
case 'play': {
|
||||
proceedNextTurn(selectedCards, false);
|
||||
break;
|
||||
}
|
||||
case 'pass': {
|
||||
proceedNextTurn([], false);
|
||||
setSelectedCards([]);
|
||||
break;
|
||||
}
|
||||
case 'deselect': {
|
||||
setSelectedCards([]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -191,7 +204,7 @@ function PvEDoudizhuDemoView() {
|
|||
<div style={{ height: '100%' }}>
|
||||
<Paper className={'doudizhu-gameboard-paper'} elevation={3}>
|
||||
<DoudizhuGameBoard
|
||||
handSelectable={true}
|
||||
gamePlayable={true}
|
||||
playerInfo={playerInfo}
|
||||
hands={gameState.hands}
|
||||
selectedCards={selectedCards}
|
||||
|
|
|
|||
Loading…
Reference in New Issue