23 | 
24 | {chipTitle} : undefined}
27 | label={chipLabel}
28 | color="primary"
29 | />
30 |
31 | ) : (
32 |
33 | 
34 | {chipTitle} : undefined}
37 | label={chipLabel}
38 | color="primary"
39 | />
40 |
41 | );
42 | } else
43 | return (
44 |
45 | 
46 | ID} label={playerId} clickable color="primary" />
47 |
48 | );
49 | }
50 |
51 | computeActionText(action) {
52 | if (action.length > 0) {
53 | return {action};
54 | }
55 | }
56 |
57 | computeTokenImage(bet) {
58 | const values = [100, 25, 10, 5, 1];
59 | let tokens = {
60 | 100: 0,
61 | 25: 0,
62 | 10: 0,
63 | 5: 0,
64 | 1: 0,
65 | };
66 | let i = 0;
67 | while (bet !== 0 && i < values.length) {
68 | if (bet >= values[i]) {
69 | bet -= values[i];
70 | tokens[values[i]]++;
71 | } else {
72 | i++;
73 | }
74 | }
75 | let child = [];
76 | for (let [key, value] of Object.entries(tokens)) {
77 | if (value !== 0) {
78 | let grandChild = [];
79 | for (let j = 0; j < value; j++) {
80 | grandChild.push(
81 |
82 | 
89 |
,
90 | );
91 | }
92 | let subElement = React.createElement(
93 | 'div',
94 | { className: 'pile-placeholder', key: key + '_' + value },
95 | grandChild,
96 | );
97 | child.push(subElement);
98 | }
99 | }
100 | return React.createElement('div', { className: 'token-container' }, child);
101 | }
102 |
103 | computeHand(card) {
104 | const [rankClass, suitClass, rankText, suitText] = translateCardData(card);
105 | return (
106 |
89 |
107 |
112 | );
113 | }
114 |
115 | playerDecisionArea(playerIdx) {
116 | if (this.props.currentPlayer === playerIdx) {
117 | return (
118 |
108 | {rankText}
109 | {suitText}
110 |
111 |
119 |
121 | );
122 | } else {
123 | return {millisecond2Second(this.props.considerationTime)}
120 | {this.computeActionText(this.props.latestAction[playerIdx])}
;
124 | }
125 | }
126 |
127 | displayPublicCard() {
128 | if (this.props.round === 0) {
129 | return (
130 |
131 |
133 | );
134 | } else {
135 | const [rankClass, suitClass, rankText, suitText] = translateCardData(this.props.publicCard);
136 | return (
137 | *
132 |
138 |
143 | );
144 | }
145 | }
146 |
147 | render() {
148 | // compute the id as well as index in list for every player
149 | const bottomId = this.props.mainPlayerId;
150 | let found = this.props.playerInfo.find((element) => {
151 | return element.id === bottomId;
152 | });
153 | const bottomIdx = found ? found.index : -1;
154 | const topIdx = bottomIdx >= 0 ? (bottomIdx + 1) % 2 : -1;
155 | let topId = -1;
156 | if (topIdx > -1) {
157 | found = this.props.playerInfo.find((element) => {
158 | return element.index === topIdx;
159 | });
160 | if (found) topId = found.id;
161 | }
162 | return (
163 |
139 | {rankText}
140 | {suitText}
141 |
142 |
164 |
209 | );
210 | }
211 | }
212 |
213 | export default LeducHoldemGameBoard;
214 |
--------------------------------------------------------------------------------
/src/components/GameBoard/index.js:
--------------------------------------------------------------------------------
1 | import DoudizhuGameBoard from "./DoudizhuGameBoard";
2 | import LeducHoldemGameBoard from "./LeducHoldemGameBoard";
3 |
4 | export {DoudizhuGameBoard, LeducHoldemGameBoard};
5 |
--------------------------------------------------------------------------------
/src/components/MenuBar.js:
--------------------------------------------------------------------------------
1 | import Button from '@material-ui/core/Button';
2 | import Card from '@material-ui/core/Card';
3 | import CardContent from '@material-ui/core/CardContent';
4 | import Collapse from '@material-ui/core/Collapse';
5 | import Dialog from '@material-ui/core/Dialog';
6 | import DialogActions from '@material-ui/core/DialogActions';
7 | import DialogContent from '@material-ui/core/DialogContent';
8 | import DialogTitle from '@material-ui/core/DialogTitle';
9 | import Drawer from '@material-ui/core/Drawer';
10 | import FormControl from '@material-ui/core/FormControl';
11 | import InputLabel from '@material-ui/core/InputLabel';
12 | import Link from '@material-ui/core/Link';
13 | import List from '@material-ui/core/List';
14 | import ListItem from '@material-ui/core/ListItem';
15 | import ListItemText from '@material-ui/core/ListItemText';
16 | import ListSubheader from '@material-ui/core/ListSubheader';
17 | import MenuItem from '@material-ui/core/MenuItem';
18 | import Select from '@material-ui/core/Select';
19 | import { makeStyles } from '@material-ui/core/styles';
20 | import TextField from '@material-ui/core/TextField';
21 | import Typography from '@material-ui/core/Typography';
22 | import ExpandLess from '@material-ui/icons/ExpandLess';
23 | import ExpandMore from '@material-ui/icons/ExpandMore';
24 | import HelpIcon from '@material-ui/icons/Help';
25 | import axios from 'axios';
26 | import { Loading, Message, Upload } from 'element-react';
27 | import qs from 'query-string';
28 | import React from 'react';
29 | import { useHistory } from 'react-router-dom';
30 | import { apiUrl } from '../utils/config';
31 |
32 | const drawerWidth = 250;
33 |
34 | const useStyles = makeStyles((theme) => ({
35 | uploadNoteRoot: {
36 | maxWidth: '358px',
37 | color: '#E6A23C',
38 | backgroundColor: '#fdf6ec',
39 | },
40 | title: {
41 | color: '#e6a23c',
42 | lineHeight: '24px',
43 | fontSize: 16,
44 | display: 'flex',
45 | alignItems: 'center',
46 | justifyContent: 'flex-start',
47 | },
48 | formControl: {
49 | marginTop: theme.spacing(1),
50 | marginBottom: theme.spacing(1),
51 | minWidth: 120,
52 | },
53 | drawer: {
54 | zIndex: 1001,
55 | width: drawerWidth,
56 | flexShrink: 0,
57 | },
58 | drawerPaper: {
59 | height: 'calc(100% - 75px)',
60 | zIndex: 1001,
61 | width: drawerWidth,
62 | top: 75,
63 | },
64 | button: {
65 | width: 200,
66 | position: 'fixed',
67 | left: 25,
68 | bottom: 25,
69 | },
70 | list: {
71 | height: 'calc(100% - 86px - 16px)',
72 | overflowY: 'auto',
73 | borderBottom: '1px solid #ccc',
74 | paddingTop: '0',
75 | },
76 | nested: {
77 | paddingLeft: theme.spacing(4),
78 | },
79 | nestedSubheader: {
80 | paddingLeft: theme.spacing(4),
81 | background: 'white',
82 | },
83 | menuLayer1: {
84 | '& span': {
85 | fontWeight: 600,
86 | fontSize: 14,
87 | },
88 | },
89 | menuLayer2: {
90 | '& span': {
91 | fontWeight: 400,
92 | fontSize: 14,
93 | },
94 | '&$active': {
95 | '& span': {
96 | color: '#3f51b5',
97 | fontWeight: 600,
98 | },
99 | },
100 | },
101 | active: {},
102 | }));
103 |
104 | function MenuBar(props) {
105 | const classes = useStyles();
106 | const [uploadDialogLoading, setUploadDialogLoading] = React.useState(false);
107 |
108 | const [open, setOpen] = React.useState({ game: true, agent: true });
109 |
110 | const handleClickGame = () => {
111 | setOpen({ game: !open.game, agent: open.agent });
112 | };
113 | const handleClickAgent = () => {
114 | setOpen({ game: open.game, agent: !open.agent });
115 | };
116 |
117 | const [uploadDialogOpen, setUploadDialogOpen] = React.useState(false);
118 | const [downloadChannelDialogOpen, setDownloadChannelDialogOpen] = React.useState(false);
119 |
120 | const openUploadDialog = () => {
121 | setUploadDialogOpen(true);
122 | };
123 |
124 | const uploadFormInitValue = { name: '', game: 'leduc-holdem' };
125 | const [uploadForm, setUploadForm] = React.useState({ ...uploadFormInitValue });
126 | const handleUploadFormChange = (e, property) => {
127 | let tempUploadForm = { ...uploadForm };
128 | tempUploadForm[property] = e.target.value;
129 | setUploadForm(tempUploadForm);
130 | };
131 |
132 | const handleUploadDialogClose = () => {
133 | setUploadForm({ ...uploadFormInitValue });
134 | setUploadDialogOpen(false);
135 | };
136 |
137 | const handleDownloadChannelDialogClose = () => {
138 | setDownloadChannelDialogOpen(false);
139 | };
140 |
141 | let uploadRef = React.createRef();
142 | const handleSubmitUpload = () => {
143 | // check if data to upload is legal
144 | if (uploadRef.current.state.fileList.length !== 1) {
145 | Message({
146 | message: 'Please select one zip file to upload',
147 | type: 'warning',
148 | showClose: true,
149 | });
150 | return;
151 | }
152 | console.log('upload', uploadRef.current);
153 | if (
154 | !['application/zip', 'application/x-zip-compressed'].includes(uploadRef.current.state.fileList[0].raw.type)
155 | ) {
156 | Message({
157 | message: 'Only zip file can be uploaded',
158 | type: 'warning',
159 | showClose: true,
160 | });
161 | return;
162 | }
163 |
164 | if (uploadForm.name === '') {
165 | Message({
166 | message: 'Model name cannot be blank',
167 | type: 'warning',
168 | showClose: true,
169 | });
170 | return;
171 | }
172 |
173 | let flatGameList = [];
174 | Object.keys(props.modelList).forEach((game) => {
175 | flatGameList = flatGameList.concat([...props.modelList[game]]);
176 | });
177 | if (flatGameList.includes(uploadForm.name)) {
178 | Message({
179 | message: 'Model name exists',
180 | type: 'warning',
181 | showClose: true,
182 | });
183 | return;
184 | }
185 |
186 | const bodyFormData = new FormData();
187 | bodyFormData.append('name', uploadForm.name);
188 | bodyFormData.append('game', uploadForm.game);
189 | bodyFormData.append('model', uploadRef.current.state.fileList[0].raw);
190 | setUploadDialogLoading(true);
191 | axios
192 | .post(`${apiUrl}/tournament/upload_agent`, bodyFormData, {
193 | headers: { 'Content-Type': 'multipart/form-data' },
194 | })
195 | .then((res) => {
196 | setTimeout(() => {
197 | setUploadDialogLoading(false);
198 | }, 250);
199 | Message({
200 | message: 'Successfully uploaded model',
201 | type: 'success',
202 | showClose: true,
203 | });
204 | props.setReloadMenu(props.reloadMenu + 1);
205 | setUploadDialogOpen(false);
206 | setUploadForm({ ...uploadFormInitValue });
207 | })
208 | .catch((err) => {
209 | setTimeout(() => {
210 | setUploadDialogLoading(false);
211 | }, 250);
212 | Message({
213 | message: 'Failed to upload model',
214 | type: 'error',
215 | showClose: true,
216 | });
217 | console.log(err);
218 | });
219 | };
220 |
221 | const history = useHistory();
222 | const handleGameJump = (gameName) => {
223 | props.resetPagination();
224 | history.push(`/leaderboard?type=game&name=${gameName}`);
225 | };
226 | const handleAgentJump = (agentName) => {
227 | props.resetPagination();
228 | history.push(`/leaderboard?type=agent&name=${agentName}`);
229 | };
230 |
231 | const { type, name } = qs.parse(window.location.search);
232 | const gameMenu = props.gameList.map((game) => {
233 | return (
234 |
165 |
183 | {bottomIdx >= 0 ? this.playerDecisionArea(bottomIdx) : ''}
166 |
167 |
182 |
168 | {this.computePlayerPortrait(bottomId, bottomIdx)}
169 | {`Bet: ${
170 | this.props.pot[bottomIdx] ? this.props.pot[bottomIdx] : '...'
171 | }`}
172 | {this.computeTokenImage(this.props.pot[bottomIdx])}
173 |
174 | {bottomIdx >= 0 ? (
175 | {this.computeHand(this.props.hands[bottomIdx])}
176 | ) : (
177 |
178 | Waiting...
179 |
180 | )}
181 |
184 |
202 |
185 |
200 |
186 | {this.computePlayerPortrait(topId, topIdx)}
187 | {`Bet: ${
188 | this.props.pot[topIdx] ? this.props.pot[topIdx] : '...'
189 | }`}
190 | {this.computeTokenImage(this.props.pot[topIdx])}
191 |
192 | {topIdx >= 0 ? (
193 | {this.computeHand(this.props.hands[topIdx])}
194 | ) : (
195 |
196 | Waiting...
197 |
198 | )}
199 | {topIdx >= 0 ? this.playerDecisionArea(topIdx) : ''}
201 |
203 |
208 |
204 | {`Round: ${this.props.round + 1}`}
205 | {this.displayPublicCard()}
206 |
207 | -
235 |
-
257 |
-
285 |
300 | {gameName}
301 | {generateAgentMenu(props.modelList[gameName])}
302 |
303 | );
304 | })}
305 |
24 | 
25 |
26 |
27 |
32 | Showdown{subtitle ? '/ ' + subtitle : ''}
{window.location.href = 'https://github.com/datamllab/rlcard'}}>
28 |
31 | Github
{stars} stars
30 | {stars} stars