From 4facaaceb6da92f4fdab193b3e2cab7f17303fd4 Mon Sep 17 00:00:00 2001 From: Songyi Huang Date: Thu, 3 Jun 2021 23:38:57 -0700 Subject: [PATCH] add modal name in game board --- src/components/GameBoard/DoudizhuGameBoard.js | 24 ++- .../GameBoard/LeducHoldemGameBoard.js | 167 ++++++++++-------- 2 files changed, 119 insertions(+), 72 deletions(-) diff --git a/src/components/GameBoard/DoudizhuGameBoard.js b/src/components/GameBoard/DoudizhuGameBoard.js index 016f0ec..7658d9c 100644 --- a/src/components/GameBoard/DoudizhuGameBoard.js +++ b/src/components/GameBoard/DoudizhuGameBoard.js @@ -23,15 +23,33 @@ class DoudizhuGameBoard extends React.Component { computePlayerPortrait(playerId, playerIdx) { if (this.props.playerInfo.length > 0) { + const chipTitle = + this.props.playerInfo[playerIdx].agentInfo && this.props.playerInfo[playerIdx].agentInfo.name + ? '' + : 'ID'; + const chipLabel = + this.props.playerInfo[playerIdx].agentInfo && this.props.playerInfo[playerIdx].agentInfo.name + ? this.props.playerInfo[playerIdx].agentInfo.name + : playerId; return this.props.playerInfo[playerIdx].role === 'landlord' ? (
{'Landlord'} - ID} label={playerId} color="primary" /> + {chipTitle} : undefined} + label={chipLabel} + color="primary" + />
) : (
{'Peasant'} - ID} label={playerId} color="primary" /> + {chipTitle} : undefined} + label={chipLabel} + color="primary" + />
); } else @@ -44,6 +62,7 @@ class DoudizhuGameBoard extends React.Component { } handleContainerMouseLeave() { + if (!this.props.gamePlayable) return; if (this.isSelectingCards) { this.isSelectingCards = false; this.selectingCards = { start: null, cards: [] }; @@ -52,6 +71,7 @@ class DoudizhuGameBoard extends React.Component { } handleContainerMouseUp() { + if (!this.props.gamePlayable) return; if (this.isSelectingCards) { this.isSelectingCards = false; this.props.handleSelectedCards(this.selectingCards.cards); diff --git a/src/components/GameBoard/LeducHoldemGameBoard.js b/src/components/GameBoard/LeducHoldemGameBoard.js index 8ebae8a..e881940 100644 --- a/src/components/GameBoard/LeducHoldemGameBoard.js +++ b/src/components/GameBoard/LeducHoldemGameBoard.js @@ -1,54 +1,56 @@ -import React from 'react'; -import { translateCardData, millisecond2Second } from '../../utils' - -import '../../assets/leducholdem.scss'; -import Player1 from '../../assets/images/Portrait/Player1.png' -import Player2 from '../../assets/images/Portrait/Player2.png' -import PlaceHolderPlayer from '../../assets/images/Portrait/Player.png'; - -import Chip from '@material-ui/core/Chip'; import Avatar from '@material-ui/core/Avatar'; +import Chip from '@material-ui/core/Chip'; +import React from 'react'; +import PlaceHolderPlayer from '../../assets/images/Portrait/Player.png'; +import Player1 from '../../assets/images/Portrait/Player1.png'; +import Player2 from '../../assets/images/Portrait/Player2.png'; +import '../../assets/leducholdem.scss'; +import { millisecond2Second, translateCardData } from '../../utils'; class LeducHoldemGameBoard extends React.Component { - computePlayerPortrait(playerId, playerIdx){ - if(this.props.playerInfo.length > 0){ - return this.props.playerInfo[playerIdx].id === 0 ? + computePlayerPortrait(playerId, playerIdx) { + if (this.props.playerInfo.length > 0) { + const chipTitle = + this.props.playerInfo[playerIdx].agentInfo && this.props.playerInfo[playerIdx].agentInfo.name + ? '' + : 'ID'; + const chipLabel = + this.props.playerInfo[playerIdx].agentInfo && this.props.playerInfo[playerIdx].agentInfo.name + ? this.props.playerInfo[playerIdx].agentInfo.name + : playerId; + return this.props.playerInfo[playerIdx].id === 0 ? (
- {"Player + {'Player ID} - label={playerId} - clickable + style={{ maxWidth: '135px' }} + avatar={chipTitle ? {chipTitle} : undefined} + label={chipLabel} color="primary" />
- : + ) : (
- {"Player + {'Player ID} - label={playerId} - clickable + style={{ maxWidth: '135px' }} + avatar={chipTitle ? {chipTitle} : undefined} + label={chipLabel} color="primary" />
- }else + ); + } else return (
- {"Player"} - ID} - label={playerId} - clickable - color="primary" - /> + {'Player'} + ID} label={playerId} clickable color="primary" />
- ) + ); } computeActionText(action) { if (action.length > 0) { - return {action} + return {action}; } } @@ -60,7 +62,7 @@ class LeducHoldemGameBoard extends React.Component { 10: 0, 5: 0, 1: 0, - } + }; let i = 0; while (bet !== 0 && i < values.length) { if (bet >= values[i]) { @@ -75,13 +77,27 @@ class LeducHoldemGameBoard extends React.Component { if (value !== 0) { let grandChild = []; for (let j = 0; j < value; j++) { - grandChild.push(
{"taken"}/
); + grandChild.push( +
+ {'taken'} +
, + ); } - let subElement = React.createElement("div", { className: "pile-placeholder", key: key+'_'+value}, grandChild); - child.push(subElement); + let subElement = React.createElement( + 'div', + { className: 'pile-placeholder', key: key + '_' + value }, + grandChild, + ); + child.push(subElement); + } } - } - return React.createElement("div", { className: "token-container" }, child); + return React.createElement('div', { className: 'token-container' }, child); } computeHand(card) { @@ -93,29 +109,29 @@ class LeducHoldemGameBoard extends React.Component { {suitText} - ) + ); } - playerDecisionArea(playerIdx){ - if(this.props.currentPlayer === playerIdx){ + playerDecisionArea(playerIdx) { + if (this.props.currentPlayer === playerIdx) { return ( -
+
{millisecond2Second(this.props.considerationTime)}
- ) - }else{ - return
{this.computeActionText(this.props.latestAction[playerIdx])}
+ ); + } else { + return
{this.computeActionText(this.props.latestAction[playerIdx])}
; } } - displayPublicCard(){ - if(this.props.round === 0){ + displayPublicCard() { + if (this.props.round === 0) { return (
*
- ) - }else{ + ); + } else { const [rankClass, suitClass, rankText, suitText] = translateCardData(this.props.publicCard); return (
@@ -124,57 +140,68 @@ class LeducHoldemGameBoard extends React.Component { {suitText}
- ) + ); } } render() { // compute the id as well as index in list for every player const bottomId = this.props.mainPlayerId; - let found = this.props.playerInfo.find(element=>{ + let found = this.props.playerInfo.find((element) => { return element.id === bottomId; }); const bottomIdx = found ? found.index : -1; - const topIdx = bottomIdx >= 0 ? (bottomIdx+1)%2 : -1; + const topIdx = bottomIdx >= 0 ? (bottomIdx + 1) % 2 : -1; let topId = -1; - if(topIdx > -1){ - found = this.props.playerInfo.find(element=>{ + if (topIdx > -1) { + found = this.props.playerInfo.find((element) => { return element.index === topIdx; }); - if(found) - topId = found.id; + if (found) topId = found.id; } return (
-
-
- {bottomIdx >= 0 ? this.playerDecisionArea(bottomIdx) : ""} -
+
+
{bottomIdx >= 0 ? this.playerDecisionArea(bottomIdx) : ''}
{this.computePlayerPortrait(bottomId, bottomIdx)} - {`Bet: ${this.props.pot[bottomIdx] ? this.props.pot[bottomIdx] : '...'}`} + {`Bet: ${ + this.props.pot[bottomIdx] ? this.props.pot[bottomIdx] : '...' + }`} {this.computeTokenImage(this.props.pot[bottomIdx])}
- {bottomIdx >= 0 ?
{this.computeHand(this.props.hands[bottomIdx])}
:
Waiting...
} + {bottomIdx >= 0 ? ( +
{this.computeHand(this.props.hands[bottomIdx])}
+ ) : ( +
+ Waiting... +
+ )}
-
+
{this.computePlayerPortrait(topId, topIdx)} - {`Bet: ${this.props.pot[topIdx] ? this.props.pot[topIdx] : '...'}`} + {`Bet: ${ + this.props.pot[topIdx] ? this.props.pot[topIdx] : '...' + }`} {this.computeTokenImage(this.props.pot[topIdx])}
- {topIdx >= 0 ?
{this.computeHand(this.props.hands[topIdx])}
:
Waiting...
} -
-
- {topIdx >= 0 ? this.playerDecisionArea(topIdx) : ""} + {topIdx >= 0 ? ( +
{this.computeHand(this.props.hands[topIdx])}
+ ) : ( +
+ Waiting... +
+ )}
+
{topIdx >= 0 ? this.playerDecisionArea(topIdx) : ''}
-
-
- {`Round: ${this.props.round+1}`} +
+
+ {`Round: ${this.props.round + 1}`} {this.displayPublicCard()}