set up restful API for leduc holdem game replay

server/index.js

@@ -1,4 +1,5 @@
 const express = require("express");
+const router = require("express").Router();
 const cors = require("cors");
 const fs = require("fs");
 
@@ -15,7 +16,7 @@ const server = app.listen(port, () => {
 const socket = require("socket.io");
 const io = socket(server);
 
-let testDoudizhuData = null;
+let testDoudizhuData = null, testLeducHoldemData = null;
 
 io.on("connection", socket => {
     console.log("successfully connected to rlcard showdown frontend");
@@ -55,12 +56,30 @@ io.on("connection", socket => {
     })
 });
 
+router.get('/replay/leduc_holdem/:id', (req, res)=>{
+    res.json(testLeducHoldemData);
+});
+
+router.get('/replay/doudizhu/:id', (req, res)=>{
+    res.json(testDoudizhuData);
+});
+
+app.use(router);
+
 function getGameHistory(){
     fs.readFile("./sample_data/sample_doudizhu.json", (err, data) => {
         if (err) throw err;
         testDoudizhuData = JSON.parse(data);
         console.log(testDoudizhuData);
     });
+
+    fs.readFile("./sample_data/sample_leduc_holdem.json", (err, data) => {
+        if (err) throw err;
+        testLeducHoldemData = JSON.parse(data);
+        console.log(testLeducHoldemData);
+    });
 }
 
 getGameHistory();
+
+module.exports = router;

server/sample_data/sample_leduc_holdem.json

@@ -0,0 +1,55 @@
+{
+  "initHands": [
+    "HJ",
+    "HK"
+  ],
+  "playerInfo": [
+    {
+      "id": 0,
+      "index": 0
+    },
+    {
+      "id": 1,
+      "index": 1
+    }
+  ],
+  "moveHistory": [
+    [
+      {
+        "playerIdx": 0,
+        "move": "Check"
+      },
+      {
+        "playerIdx": 1,
+        "move": "Raise"
+      },
+      {
+        "playerIdx": 0,
+        "move": "Call"
+      },
+      {
+        "playerIdx": 1,
+        "move": "Check"
+      }
+    ],
+    "SJ",
+    [
+      {
+        "playerIdx": 0,
+        "move": "Raise"
+      },
+      {
+        "playerIdx": 1,
+        "move": "Call"
+      },
+      {
+        "playerIdx": 0,
+        "move": "Raise"
+      },
+      {
+        "playerIdx": 1,
+        "move": "Call"
+      }
+    ]
+  ]
+}

src/components/GameBoard/LeducHoldemGameBoard.js

@@ -8,7 +8,19 @@ class LeducHoldemGameBoard extends React.Component {
 
     render() {
         return (
-            <div>Leduc Holdem GameBoard Placeholder</div>
+            <div style={{width: "100%", height: "100%", backgroundColor: "#ffcc99", position: "relative"}}>
+                <div id={"bottom-player"}>
+                    <div className="played-card-area">
+                        played card area
+                    </div>
+                    <div className="player-main-area">
+                        <div className="player-info">
+                            <span>{`Player Id ${bottomId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[bottomIdx].role : ""}`}</span>
+                        </div>
+                        {bottomIdx >= 0 ? <div className="player-hand">{this.computeSingleLineHand(this.props.hands[bottomIdx])}</div> : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
+                    </div>
+                </div>
+            </div>
         );
     }
 }

src/view/LeducHoldemGameView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '../assets/gameview.scss';
-import { LeducHoldemGameBoard } from '../components/GameBoard';
+import {DoudizhuGameBoard, LeducHoldemGameBoard} from '../components/GameBoard';
 import {removeCards, doubleRaf} from "../utils";
 
 import { Button, Layout, Slider as elSlider } from 'element-react';
@@ -13,7 +13,18 @@ class LeducHoldemGameView extends React.Component {
 
     render(){
         return (
-            <div>Leduc Holdem Placeholder <LeducHoldemGameBoard /></div>
+            <div style={{width: "960px", height: "540px"}}>
+                <LeducHoldemGameBoard
+                    playerInfo={this.state.gameInfo.playerInfo}
+                    hands={this.state.gameInfo.hands}
+                    latestAction={this.state.gameInfo.latestAction}
+                    mainPlayerId={this.state.gameInfo.mainViewerId}
+                    currentPlayer={this.state.gameInfo.currentPlayer}
+                    considerationTime={this.state.gameInfo.considerationTime}
+                    turn={this.state.gameInfo.turn}
+                    runNewTurn={(prevTurn)=>this.runNewTurn(prevTurn)}
+                />
+            </div>
         );
     }
 }