add user play button & handler functionality; adjust card style

This commit is contained in:
Songyi Huang 2021-04-19 21:41:15 -07:00
parent 426d90cf51
commit 3b39c4692a
4 changed files with 65 additions and 11 deletions

View File

@ -37,8 +37,8 @@
.playingCards .card {
display: inline-block;
width: 3.3em;
height: 4.6em;
width: 2.5em;
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,

View File

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

View File

@ -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){
return (
<div className={"timer "+fadeClassName}>
<div className="timer-text">{millisecond2Second(this.props.considerationTime)}</div>
</div>
)
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)
}
}

View File

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