diff --git a/package.json b/package.json index 246ca9d..51e6dfd 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@material-ui/core": "^4.8.3", + "@material-ui/core": "^4.9.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", @@ -13,6 +13,7 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-hot-loader": "^4.12.18", + "react-router-dom": "^5.1.2", "react-scripts": "3.3.0", "socket.io-client": "^2.3.0" }, diff --git a/src/App.js b/src/App.js index 817959b..94c680d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,14 @@ import React from 'react'; +import { BrowserRouter as Router, Route } from "react-router-dom"; import DoudizhuGameView from './view/DoudizhuGameView'; +import LeducHoldemGameView from './view/LeducHoldemGameView'; function App() { return ( -
- -
+ + + + ); } diff --git a/src/components/GameBoard/DoudizhuGameBoard.js b/src/components/GameBoard/DoudizhuGameBoard.js new file mode 100644 index 0000000..802e577 --- /dev/null +++ b/src/components/GameBoard/DoudizhuGameBoard.js @@ -0,0 +1,186 @@ +import React from 'react'; + +import '../../assets/doudizhu.scss'; + +class DoudizhuGameBoard extends React.Component { + constructor(props) { + super(props); + + this.suitMap = new Map( + [["H", "hearts"], ["D", "diams"], ["S", "spades"], ["C", "clubs"]] + ); + this.suitMapSymbol = new Map( + [["H", "\u2665"], ["D", "\u2666"], ["S", "\u2660"], ["C", "\u2663"]] + ) + } + + 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(1) === "T" ? `10` : card.charAt(1).toLowerCase(); + rankClass = `rank-${rankClass}`; + rankText = card.charAt(1) === "T" ? `10` : card.charAt(1); + } + // translate suitClass + if(card !== "RJ" && card !== "BJ"){ + suitClass = this.suitMap.get(card.charAt(0)); + suitText = this.suitMapSymbol.get(card.charAt(0)); + } + return ( +
  • + + {rankText} + {suitText} + +
    • + ) + } + + computeSingleLineHand(cards) { + if(cards === "P"){ + return
    Pass
    + }else{ + return ( +
    + +
    + ) + } + } + + computeSideHand(cards) { + let upCards; + let downCards = []; + if(cards.length > 10){ + upCards = cards.slice(0, 10); + downCards = cards.slice(10, ); + }else{ + upCards = cards; + } + return ( +
    +
    +
    +
      + {upCards.map(element => {return this.translateCardData(element)})} +
    +
    +
    +
    +
    +
      + {downCards.map(element => {return this.translateCardData(element)})} +
    +
    +
    +
    + ) + } + + computeHandCardsWidth(num, emWidth) { + if(num === 0) + return 0; + return (num-1)*1.1*emWidth + 4.3*emWidth*1.2 + 2; + } + + millisecond2Second(t){ + return Math.ceil(t/1000); + } + + playerDecisionArea(playerIdx){ + if(this.props.currentPlayer === playerIdx){ + return
    {`Consideration Time: ${this.millisecond2Second(this.props.considerationTime)}s`}
    + }else{ + return this.computeSingleLineHand(this.props.latestAction[playerIdx]) + } + } + + componentDidUpdate(prevProps, prevState, snapshot) { + if(prevProps.turn !== this.props.turn && this.props.turn !== 0){ + // new turn starts + this.props.runNewTurn(prevProps); + } + } + + render() { + // compute the id as well as index in list for every player + const bottomId = this.props.mainPlayerId; + let found = this.props.playerInfo.find(element=>{ + return element.id === bottomId; + }); + const bottomIdx = found ? found.index : -1; + const rightIdx = bottomIdx >= 0 ? (bottomIdx+1)%3 : -1; + const leftIdx = rightIdx >= 0 ? (rightIdx+1)%3 : -1; + let rightId = -1; + let leftId = -1; + if(rightIdx >= 0 && leftIdx >= 0){ + found = this.props.playerInfo.find(element=>{ + return element.index === rightIdx; + }); + if(found) + rightId = found.id; + found = this.props.playerInfo.find(element=>{ + return element.index === leftIdx; + }); + if(found) + leftId = found.id; + } + return ( +
    +
    +
    +
    + {`Player Id ${leftId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[leftIdx].role : ""}`} +
    + {leftIdx >= 0 ? this.computeSideHand(this.props.hands[leftIdx]) :
    Waiting...
    } +
    +
    + {leftIdx >= 0 ? this.playerDecisionArea(leftIdx) : ""} +
    +
    +
    +
    +
    + {`Player Id ${rightId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[rightIdx].role : ""}`} +
    + {rightIdx >= 0 ? this.computeSideHand(this.props.hands[rightIdx]) :
    Waiting...
    } +
    +
    + {rightIdx >= 0 ? this.playerDecisionArea(rightIdx) : ""} +
    +
    +
    +
    + {bottomIdx >= 0 ? this.playerDecisionArea(bottomIdx) : ""} +
    +
    +
    + {`Player Id ${bottomId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[bottomIdx].role : ""}`} +
    + {bottomIdx >= 0 ?
    {this.computeSingleLineHand(this.props.hands[bottomIdx])}
    :
    Waiting...
    } +
    +
    +
    + ); + } +} + +export default DoudizhuGameBoard; \ No newline at end of file diff --git a/src/components/GameBoard/LeducHoldemGameBoard.js b/src/components/GameBoard/LeducHoldemGameBoard.js new file mode 100644 index 0000000..a5f5281 --- /dev/null +++ b/src/components/GameBoard/LeducHoldemGameBoard.js @@ -0,0 +1,16 @@ +import React from 'react'; + +class LeducHoldemGameBoard extends React.Component { + constructor(props) { + super(props); + + } + + render() { + return ( +
    Leduc Holdem GameBoard Placeholder
    + ); + } +} + +export default LeducHoldemGameBoard; \ No newline at end of file diff --git a/src/components/GameBoard/index.js b/src/components/GameBoard/index.js index 802e577..9b452e6 100644 --- a/src/components/GameBoard/index.js +++ b/src/components/GameBoard/index.js @@ -1,186 +1,5 @@ import React from 'react'; +import DoudizhuGameBoard from "./DoudizhuGameBoard"; +import LeducHoldemGameBoard from "./LeducHoldemGameBoard"; -import '../../assets/doudizhu.scss'; - -class DoudizhuGameBoard extends React.Component { - constructor(props) { - super(props); - - this.suitMap = new Map( - [["H", "hearts"], ["D", "diams"], ["S", "spades"], ["C", "clubs"]] - ); - this.suitMapSymbol = new Map( - [["H", "\u2665"], ["D", "\u2666"], ["S", "\u2660"], ["C", "\u2663"]] - ) - } - - 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(1) === "T" ? `10` : card.charAt(1).toLowerCase(); - rankClass = `rank-${rankClass}`; - rankText = card.charAt(1) === "T" ? `10` : card.charAt(1); - } - // translate suitClass - if(card !== "RJ" && card !== "BJ"){ - suitClass = this.suitMap.get(card.charAt(0)); - suitText = this.suitMapSymbol.get(card.charAt(0)); - } - return ( -
  • - - {rankText} - {suitText} - -
    • - ) - } - - computeSingleLineHand(cards) { - if(cards === "P"){ - return
    Pass
    - }else{ - return ( -
    - -
    - ) - } - } - - computeSideHand(cards) { - let upCards; - let downCards = []; - if(cards.length > 10){ - upCards = cards.slice(0, 10); - downCards = cards.slice(10, ); - }else{ - upCards = cards; - } - return ( -
    -
    -
    -
      - {upCards.map(element => {return this.translateCardData(element)})} -
    -
    -
    -
    -
    -
      - {downCards.map(element => {return this.translateCardData(element)})} -
    -
    -
    -
    - ) - } - - computeHandCardsWidth(num, emWidth) { - if(num === 0) - return 0; - return (num-1)*1.1*emWidth + 4.3*emWidth*1.2 + 2; - } - - millisecond2Second(t){ - return Math.ceil(t/1000); - } - - playerDecisionArea(playerIdx){ - if(this.props.currentPlayer === playerIdx){ - return
    {`Consideration Time: ${this.millisecond2Second(this.props.considerationTime)}s`}
    - }else{ - return this.computeSingleLineHand(this.props.latestAction[playerIdx]) - } - } - - componentDidUpdate(prevProps, prevState, snapshot) { - if(prevProps.turn !== this.props.turn && this.props.turn !== 0){ - // new turn starts - this.props.runNewTurn(prevProps); - } - } - - render() { - // compute the id as well as index in list for every player - const bottomId = this.props.mainPlayerId; - let found = this.props.playerInfo.find(element=>{ - return element.id === bottomId; - }); - const bottomIdx = found ? found.index : -1; - const rightIdx = bottomIdx >= 0 ? (bottomIdx+1)%3 : -1; - const leftIdx = rightIdx >= 0 ? (rightIdx+1)%3 : -1; - let rightId = -1; - let leftId = -1; - if(rightIdx >= 0 && leftIdx >= 0){ - found = this.props.playerInfo.find(element=>{ - return element.index === rightIdx; - }); - if(found) - rightId = found.id; - found = this.props.playerInfo.find(element=>{ - return element.index === leftIdx; - }); - if(found) - leftId = found.id; - } - return ( -
    -
    -
    -
    - {`Player Id ${leftId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[leftIdx].role : ""}`} -
    - {leftIdx >= 0 ? this.computeSideHand(this.props.hands[leftIdx]) :
    Waiting...
    } -
    -
    - {leftIdx >= 0 ? this.playerDecisionArea(leftIdx) : ""} -
    -
    -
    -
    -
    - {`Player Id ${rightId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[rightIdx].role : ""}`} -
    - {rightIdx >= 0 ? this.computeSideHand(this.props.hands[rightIdx]) :
    Waiting...
    } -
    -
    - {rightIdx >= 0 ? this.playerDecisionArea(rightIdx) : ""} -
    -
    -
    -
    - {bottomIdx >= 0 ? this.playerDecisionArea(bottomIdx) : ""} -
    -
    -
    - {`Player Id ${bottomId}\n${this.props.playerInfo.length > 0 ? this.props.playerInfo[bottomIdx].role : ""}`} -
    - {bottomIdx >= 0 ?
    {this.computeSingleLineHand(this.props.hands[bottomIdx])}
    :
    Waiting...
    } -
    -
    -
    - ); - } -} - -export default DoudizhuGameBoard; \ No newline at end of file +export {DoudizhuGameBoard, LeducHoldemGameBoard}; diff --git a/src/view/DoudizhuGameView.js b/src/view/DoudizhuGameView.js index 5ae5725..6a7146b 100644 --- a/src/view/DoudizhuGameView.js +++ b/src/view/DoudizhuGameView.js @@ -1,6 +1,6 @@ import React from 'react'; import '../assets/gameview.scss'; -import DoudizhuGameBoard from '../components/GameBoard'; +import { DoudizhuGameBoard } from '../components/GameBoard'; import webSocket from "socket.io-client"; import {removeCards, doubleRaf} from "../utils"; diff --git a/src/view/LeducHoldemGameView.js b/src/view/LeducHoldemGameView.js new file mode 100644 index 0000000..ff43454 --- /dev/null +++ b/src/view/LeducHoldemGameView.js @@ -0,0 +1,21 @@ +import React from 'react'; +import '../assets/gameview.scss'; +import { LeducHoldemGameBoard } from '../components/GameBoard'; +import {removeCards, doubleRaf} from "../utils"; + +import { Button, Layout, Slider as elSlider } from 'element-react'; +import Slider from '@material-ui/core/Slider'; + +class LeducHoldemGameView extends React.Component { + constructor(props) { + super(props); + } + + render(){ + return ( +
    Leduc Holdem Placeholder
    + ); + } +} + +export default LeducHoldemGameView; \ No newline at end of file