compute bottom player's hand

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 (
+            <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() {