diff --git a/src/components/GameBoard/index.js b/src/components/GameBoard/index.js
index d1ce363..d8dbb94 100644
--- a/src/components/GameBoard/index.js
+++ b/src/components/GameBoard/index.js
@@ -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 (
+
+
+ {rankText}
+ {suitText}
+
+
+ )
+ }
+
+ computeBottomHand(cards) {
+ return (
+
+
+
+ {cards.split(" ").map(card=>{
+ return this.translateCardData(card);
+ })}
+
+
+