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