DouZero
/
rlcard-showdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

compute bottom player's hand

This commit is contained in:
Songyi Huang 2020-01-13 19:05:47 -08:00
parent 3d3647ecb2
commit 4fd21acc48
1 changed files with 117 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
src/components/GameBoard/index.js
View File

@ -3,9 +3,61 @@ import React from 'react';
import './index.scss'; import './index.scss';
class DoudizhuGameBoard extends React.Component { 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() { render() {
@ -105,72 +157,72 @@ class DoudizhuGameBoard extends React.Component {
</div> </div>
</div> </div>
<div className="player-hand-down"> <div className="player-hand-down">
<div className="playingCards"> <div className="playingCards">
<ul className="hand"> <ul className="hand">
<li> <li>
<a className="card rank-7 diams" href="/#"> <a className="card rank-7 diams" href="/#">
<span className="rank">7</span> <span className="rank">7</span>
<span className="suit">&diams;</span> <span className="suit">&diams;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-8 hearts" href="/#"> <a className="card rank-8 hearts" href="/#">
<span className="rank">8</span> <span className="rank">8</span>
<span className="suit">&hearts;</span> <span className="suit">&hearts;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-9 spades" href="/#"> <a className="card rank-9 spades" href="/#">
<span className="rank">9</span> <span className="rank">9</span>
<span className="suit">&spades;</span> <span className="suit">&spades;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-10 clubs" href="/#"> <a className="card rank-10 clubs" href="/#">
<span className="rank">10</span> <span className="rank">10</span>
<span className="suit">&clubs;</span> <span className="suit">&clubs;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-j diams" href="/#"> <a className="card rank-j diams" href="/#">
<span className="rank">J</span> <span className="rank">J</span>
<span className="suit">&diams;</span> <span className="suit">&diams;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-5 clubs" href="/#"> <a className="card rank-5 clubs" href="/#">
<span className="rank">5</span> <span className="rank">5</span>
<span className="suit">&clubs;</span> <span className="suit">&clubs;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-6 diams" href="/#"> <a className="card rank-6 diams" href="/#">
<span className="rank">6</span> <span className="rank">6</span>
<span className="suit">&diams;</span> <span className="suit">&diams;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-q hearts" href="/#"> <a className="card rank-q hearts" href="/#">
<span className="rank">Q</span> <span className="rank">Q</span>
<span className="suit">&hearts;</span> <span className="suit">&hearts;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-k spades" href="/#"> <a className="card rank-k spades" href="/#">
<span className="rank">K</span> <span className="rank">K</span>
<span className="suit">&spades;</span> <span className="suit">&spades;</span>
</a> </a>
</li> </li>
<li> <li>
<a className="card rank-k spades" href="/#"> <a className="card rank-k spades" href="/#">
<span className="rank">K</span> <span className="rank">K</span>
<span className="suit">&spades;</span> <span className="suit">&spades;</span>
</a> </a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div>
<div className="played-card-area"> <div className="played-card-area">
<div className="playingCards"> <div className="playingCards">
<ul className="hand"> <ul className="hand">