bind player hand & played cards with saved data
This commit is contained in:
songyih
parent
4fd21acc48
commit
ec0489109b
|
|
@ -24,7 +24,7 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>RLcard Showdown</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|
|
||||||
|
|
@ -22,10 +22,8 @@ io.on("connection", socket => {
|
||||||
socket.emit("getMessage", "successfully connected to rlcard showdown node server");
|
socket.emit("getMessage", "successfully connected to rlcard showdown node server");
|
||||||
socket.on("getMessage", message => {
|
socket.on("getMessage", message => {
|
||||||
if(message){
|
if(message){
|
||||||
console.log(message.type);
|
|
||||||
switch(message.type){
|
switch(message.type){
|
||||||
case(0):
|
case(0):
|
||||||
console.log("going");
|
|
||||||
const res = {
|
const res = {
|
||||||
type: 0,
|
type: 0,
|
||||||
message: {
|
message: {
|
||||||
|
|
|
||||||
|
|
@ -23,127 +23,127 @@
|
||||||
],
|
],
|
||||||
"moveHistory": [
|
"moveHistory": [
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "H3 S3 D3 D5"
|
"move": "H3 S3 D3 D5"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "S9 H9 D9 S3"
|
"move": "S9 H9 D9 S3"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "SJ HJ DJ D7"
|
"move": "SJ HJ DJ D7"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "HQ CQ DQ C7"
|
"move": "HQ CQ DQ C7"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "C4 D4"
|
"move": "C4 D4"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "ST HT"
|
"move": "ST HT"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "SK CK"
|
"move": "SK CK"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "S2 H2"
|
"move": "S2 H2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "S6 H6"
|
"move": "S6 H6"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "CT DT"
|
"move": "CT DT"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "HK DK"
|
"move": "HK DK"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "RJ BJ"
|
"move": "RJ BJ"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "S8 H8 C8 C9"
|
"move": "S8 H8 C8 C9"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "HA CA DA H5"
|
"move": "HA CA DA H5"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "SQ"
|
"move": "SQ"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "D2"
|
"move": "D2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 0,
|
"playerIdx": 0,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 1,
|
"playerIdx": 1,
|
||||||
"move": "P"
|
"move": "P"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"playerId": 2,
|
"playerIdx": 2,
|
||||||
"move": "SA"
|
"move": "SA"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,9 @@ class DoudizhuGameBoard extends React.Component {
|
||||||
this.suitMap = new Map(
|
this.suitMap = new Map(
|
||||||
[["H", "hearts"], ["D", "diams"], ["S", "spades"], ["C", "clubs"]]
|
[["H", "hearts"], ["D", "diams"], ["S", "spades"], ["C", "clubs"]]
|
||||||
);
|
);
|
||||||
|
this.suitMapSymbol = new Map(
|
||||||
|
[["H", "\u2665"], ["D", "\u2666"], ["S", "\u2660"], ["C", "\u2663"]]
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
translateCardData(card) {
|
translateCardData(card) {
|
||||||
|
|
@ -28,17 +31,18 @@ class DoudizhuGameBoard extends React.Component {
|
||||||
suitClass = "joker";
|
suitClass = "joker";
|
||||||
suitText = "Joker";
|
suitText = "Joker";
|
||||||
}else{
|
}else{
|
||||||
rankClass = card.charAt(0) === "T" ? `10` : card.charAt(0).toLowerCase();
|
rankClass = card.charAt(0) === "T" ? `10` : card.charAt(1).toLowerCase();
|
||||||
rankText = card.charAt(0) === "T" ? `10` : card.charAt(0);
|
rankClass = `rank-${rankClass}`;
|
||||||
|
rankText = card.charAt(0) === "T" ? `10` : card.charAt(1);
|
||||||
}
|
}
|
||||||
// translate suitClass
|
// translate suitClass
|
||||||
if(card !== "RJ" && card !== "BJ"){
|
if(card !== "RJ" && card !== "BJ"){
|
||||||
suitClass = this.suitMap.get(card.charAt(1));
|
suitClass = this.suitMap.get(card.charAt(0));
|
||||||
suitText = `&${this.suitMap.get(card.charAt(1))};`;
|
suitText = this.suitMapSymbol.get(card.charAt(0));
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<li>
|
<li key={`handCard-${card}`}>
|
||||||
<a className={`card rank-${rankClass} ${suitClass}`} href="/#">
|
<a className={`card ${rankClass} ${suitClass}`} href="/#">
|
||||||
<span className="rank">{rankText}</span>
|
<span className="rank">{rankText}</span>
|
||||||
<span className="suit">{suitText}</span>
|
<span className="suit">{suitText}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -46,15 +50,42 @@ class DoudizhuGameBoard extends React.Component {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
computeBottomHand(cards) {
|
computeSingleLineHand(cards) {
|
||||||
return (
|
return (
|
||||||
<div className="played-card-area">
|
<div className="playingCards">
|
||||||
<div className="playingCards">
|
<ul className="hand">
|
||||||
<ul className="hand">
|
{cards.map(card=>{
|
||||||
{cards.split(" ").map(card=>{
|
return this.translateCardData(card);
|
||||||
return this.translateCardData(card);
|
})}
|
||||||
})}
|
</ul>
|
||||||
</ul>
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
computeSideHand(cards) {
|
||||||
|
let upCards = [];
|
||||||
|
let downCards = [];
|
||||||
|
if(cards.length > 10){
|
||||||
|
upCards = cards.slice(0, 10);
|
||||||
|
downCards = cards.slice(10, );
|
||||||
|
}else{
|
||||||
|
upCards = cards;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="player-hand-up">
|
||||||
|
<div className="playingCards">
|
||||||
|
<ul className="hand">
|
||||||
|
{upCards.map(element => {return this.translateCardData(element)})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="player-hand-down">
|
||||||
|
<div className="playingCards">
|
||||||
|
<ul className="hand">
|
||||||
|
{downCards.map(element => {return this.translateCardData(element)})}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
@ -88,794 +119,35 @@ class DoudizhuGameBoard extends React.Component {
|
||||||
<div id={"left-player"}>
|
<div id={"left-player"}>
|
||||||
<div className="player-main-area">
|
<div className="player-main-area">
|
||||||
<div className="player-info">
|
<div className="player-info">
|
||||||
<span>{`Player Id ${leftId}`}</span>
|
<span>{`Player Id ${leftId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[leftIdx].role : ""}`}</span>
|
||||||
</div>
|
|
||||||
<div className="player-hand-up">
|
|
||||||
<div className="playingCards">
|
|
||||||
<ul className="hand">
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="player-hand-down">
|
|
||||||
<div className="playingCards">
|
|
||||||
<ul className="hand">
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{leftIdx >= 0 ? this.computeSideHand(this.props.hand[leftIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
|
||||||
</div>
|
</div>
|
||||||
<div className="played-card-area">
|
<div className="played-card-area">
|
||||||
<div className="playingCards">
|
{leftIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[leftIdx]) : ""}
|
||||||
<ul className="hand">
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id={"right-player"}>
|
<div id={"right-player"}>
|
||||||
<div className="player-main-area">
|
<div className="player-main-area">
|
||||||
<div className="player-info">
|
<div className="player-info">
|
||||||
<span>{`Player Id ${rightId}`}</span>
|
<span>{`Player Id ${rightId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[rightIdx].role : ""}`}</span>
|
||||||
</div>
|
|
||||||
<div className="player-hand-up">
|
|
||||||
<div className="playingCards">
|
|
||||||
<ul className="hand">
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="player-hand-down">
|
|
||||||
<div className="playingCards">
|
|
||||||
<ul className="hand">
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{rightIdx >= 0 ? this.computeSideHand(this.props.hand[rightIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
|
||||||
</div>
|
</div>
|
||||||
<div className="played-card-area">
|
<div className="played-card-area">
|
||||||
<div className="playingCards">
|
{rightIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[rightIdx]) : ""}
|
||||||
<ul className="hand">
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id={"bottom-player"}>
|
<div id={"bottom-player"}>
|
||||||
<div className="played-card-area">
|
<div className="played-card-area">
|
||||||
<div style={{width: "280px", marginLeft: "auto", marginRight: "auto", textAlign: "center"}}>
|
{bottomIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[bottomIdx]) : ""}
|
||||||
<div className="playingCards">
|
|
||||||
<ul className="hand">
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="player-main-area">
|
<div className="player-main-area">
|
||||||
<div className="player-info">
|
<div className="player-info">
|
||||||
<span>{`Player Id ${bottomId}`}</span>
|
<span>{`Player Id ${bottomId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[bottomIdx].role : ""}`}</span>
|
||||||
</div>
|
|
||||||
<div className="player-hand">
|
|
||||||
<div className="playingCards">
|
|
||||||
<ul className="hand">
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-7 diams" href="/#">
|
|
||||||
<span className="rank">7</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-8 hearts" href="/#">
|
|
||||||
<span className="rank">8</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-9 spades" href="/#">
|
|
||||||
<span className="rank">9</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-10 clubs" href="/#">
|
|
||||||
<span className="rank">10</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-j diams" href="/#">
|
|
||||||
<span className="rank">J</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-5 clubs" href="/#">
|
|
||||||
<span className="rank">5</span>
|
|
||||||
<span className="suit">♣</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-6 diams" href="/#">
|
|
||||||
<span className="rank">6</span>
|
|
||||||
<span className="suit">♦</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-q hearts" href="/#">
|
|
||||||
<span className="rank">Q</span>
|
|
||||||
<span className="suit">♥</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="card rank-k spades" href="/#">
|
|
||||||
<span className="rank">K</span>
|
|
||||||
<span className="suit">♠</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{bottomIdx >= 0 ? <div className="player-hand">{this.computeSingleLineHand(this.props.hand[bottomIdx])}</div> : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -4,19 +4,30 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player-hand-placeholder {
|
||||||
|
font-size: 16px;
|
||||||
|
display: table;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.player-info {
|
.player-info {
|
||||||
text-align: center;
|
|
||||||
line-height: 130px;
|
//line-height: 130px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
width: 130px;
|
width: 130px;
|
||||||
height: 130px;
|
height: 130px;
|
||||||
background-color: green;
|
background-color: green;
|
||||||
|
display: table;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
display: table-cell;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
white-space: nowrap;
|
text-align: center;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -36,7 +47,7 @@
|
||||||
|
|
||||||
.player-hand-up {
|
.player-hand-up {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0;
|
||||||
margin-left: 130px;
|
margin-left: 130px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
@ -47,6 +58,14 @@
|
||||||
margin-left: 130px;
|
margin-left: 130px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player-hand-placeholder {
|
||||||
|
width: 150px;
|
||||||
|
height: 130px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
margin-left: 130px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.played-card-area {
|
.played-card-area {
|
||||||
|
|
@ -72,7 +91,7 @@
|
||||||
|
|
||||||
.player-hand-up {
|
.player-hand-up {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0;
|
||||||
margin-right: 130px;
|
margin-right: 130px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
@ -83,6 +102,14 @@
|
||||||
margin-right: 130px;
|
margin-right: 130px;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player-hand-placeholder {
|
||||||
|
width: 150px;
|
||||||
|
height: 130px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
margin-right: 130px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.played-card-area {
|
.played-card-area {
|
||||||
|
|
@ -105,15 +132,29 @@
|
||||||
|
|
||||||
.player-hand {
|
.player-hand {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0;
|
||||||
|
padding-left: 20px;
|
||||||
margin-left: 130px;
|
margin-left: 130px;
|
||||||
width: 450px;
|
width: 450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player-hand-placeholder {
|
||||||
|
width: 150px;
|
||||||
|
height: 130px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
padding-left: 20px;
|
||||||
|
margin-left: 130px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.played-card-area {
|
.played-card-area {
|
||||||
position: relative;
|
position: relative;
|
||||||
transform: translateY(30px);
|
transform: translateY(30px);
|
||||||
|
width: 280px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ class DoudizhuGameView extends React.Component {
|
||||||
gameInfo: {
|
gameInfo: {
|
||||||
playerInfo: [],
|
playerInfo: [],
|
||||||
hand: [],
|
hand: [],
|
||||||
latestAction: [],
|
latestAction: [[], [], []],
|
||||||
mainViewerId: mainViewerId
|
mainViewerId: mainViewerId
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -31,14 +31,16 @@ class DoudizhuGameView extends React.Component {
|
||||||
connectWebSocket() {
|
connectWebSocket() {
|
||||||
let ws = webSocket("http://localhost:10080");
|
let ws = webSocket("http://localhost:10080");
|
||||||
ws.on("getMessage", message => {
|
ws.on("getMessage", message => {
|
||||||
console.log(message);
|
// console.log(message);
|
||||||
if(message){
|
if(message){
|
||||||
switch(message.type){
|
switch(message.type){
|
||||||
case 0:
|
case 0:
|
||||||
// init replay info
|
// init replay info
|
||||||
let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
|
let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
|
||||||
gameInfo.playerInfo = message.message.playerInfo;
|
gameInfo.playerInfo = message.message.playerInfo;
|
||||||
gameInfo.hand = message.message.initHand;
|
gameInfo.hand = message.message.initHand.map(element => {
|
||||||
|
return element.split(" ");
|
||||||
|
});
|
||||||
this.setState({gameInfo: gameInfo});
|
this.setState({gameInfo: gameInfo});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue