compute bottom player's hand
This commit is contained in:
Songyi Huang
parent
3d3647ecb2
commit
4fd21acc48
|
|
@ -3,9 +3,61 @@ import React from 'react';
|
|||
import './index.scss';
|
||||
|
||||
class DoudizhuGameBoard extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
computeMainViewerHand() {
|
||||
this.suitMap = new Map(
|
||||
[["H", "hearts"], ["D", "diams"], ["S", "spades"], ["C", "clubs"]]
|
||||
);
|
||||
}
|
||||
|
||||
translateCardData(card) {
|
||||
let rankClass = "";
|
||||
let suitClass = "";
|
||||
let rankText = "";
|
||||
let suitText = "";
|
||||
// translate rank
|
||||
if(card === "RJ"){
|
||||
rankClass = "big";
|
||||
rankText = "+";
|
||||
suitClass = "joker";
|
||||
suitText = "Joker";
|
||||
}else if(card === "BJ"){
|
||||
rankClass = "little";
|
||||
rankText = "-";
|
||||
suitClass = "joker";
|
||||
suitText = "Joker";
|
||||
}else{
|
||||
rankClass = card.charAt(0) === "T" ? `10` : card.charAt(0).toLowerCase();
|
||||
rankText = card.charAt(0) === "T" ? `10` : card.charAt(0);
|
||||
}
|
||||
// translate suitClass
|
||||
if(card !== "RJ" && card !== "BJ"){
|
||||
suitClass = this.suitMap.get(card.charAt(1));
|
||||
suitText = `&${this.suitMap.get(card.charAt(1))};`;
|
||||
}
|
||||
return (
|
||||
<li>
|
||||
<a className={`card rank-${rankClass} ${suitClass}`} href="/#">
|
||||
<span className="rank">{rankText}</span>
|
||||
<span className="suit">{suitText}</span>
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
computeBottomHand(cards) {
|
||||
return (
|
||||
<div className="played-card-area">
|
||||
<div className="playingCards">
|
||||
<ul className="hand">
|
||||
{cards.split(" ").map(card=>{
|
||||
return this.translateCardData(card);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -105,72 +157,72 @@ class DoudizhuGameBoard extends React.Component {
|
|||
</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 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>
|
||||
</div>
|
||||
<div className="played-card-area">
|
||||
<div className="playingCards">
|
||||
<ul className="hand">
|
||||
|
|
|
|||
Loading…
Reference in New Issue