finalize translation for doudizhu demo
This commit is contained in:
Songyi Huang
parent
c1d5b5cbb7
commit
3d9f7cebd9
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { BrowserRouter as Router, Redirect, Route } from 'react-router-dom';
|
||||
import Navbar from './components/Navbar';
|
||||
import LeaderBoard from './view/LeaderBoard';
|
||||
|
|
@ -14,9 +13,7 @@ const navbarSubtitleMap = {
|
|||
};
|
||||
|
||||
function App() {
|
||||
const { t } = useTranslation();
|
||||
// todo: add 404 page
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<Navbar subtitleMap={navbarSubtitleMap} />
|
||||
|
|
|
|||
|
|
@ -97,10 +97,10 @@
|
|||
|
||||
.form-label-left {
|
||||
float: left;
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 11px 12px 11px 0;
|
||||
padding: 11px 6px 11px 6px;
|
||||
box-sizing: border-box;
|
||||
width: 80px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ class DoudizhuGameBoard extends React.Component {
|
|||
|
||||
handleContainerMouseLeave() {
|
||||
if (this.isSelectingCards) {
|
||||
console.log('container leave');
|
||||
this.isSelectingCards = false;
|
||||
this.selectingCards = { start: null, cards: [] };
|
||||
this.setState({ highlightedCards: [] });
|
||||
|
|
@ -54,7 +53,6 @@ class DoudizhuGameBoard extends React.Component {
|
|||
|
||||
handleContainerMouseUp() {
|
||||
if (this.isSelectingCards) {
|
||||
console.log('container up');
|
||||
this.isSelectingCards = false;
|
||||
this.props.handleSelectedCards(this.selectingCards.cards);
|
||||
this.selectingCards = { start: null, cards: [] };
|
||||
|
|
@ -65,17 +63,14 @@ class DoudizhuGameBoard extends React.Component {
|
|||
}
|
||||
|
||||
handleCardMouseDown(card, idx) {
|
||||
console.log('down');
|
||||
this.isSelectingCards = true;
|
||||
this.selectingCards.start = idx;
|
||||
this.selectingCards.cards = [card];
|
||||
this.setState({ highlightedCards: this.selectingCards.cards });
|
||||
console.log(this.selectingCards);
|
||||
}
|
||||
|
||||
handleCardMouseOver(allCards, card, idx) {
|
||||
if (this.isSelectingCards) {
|
||||
console.log('over');
|
||||
let tmpCards;
|
||||
if (idx > this.selectingCards.start) {
|
||||
tmpCards = allCards.slice(this.selectingCards.start, idx + 1);
|
||||
|
|
@ -90,11 +85,12 @@ class DoudizhuGameBoard extends React.Component {
|
|||
}
|
||||
|
||||
computeSingleLineHand(inputCards, fadeClassName = '', cardSelectable = false) {
|
||||
const t = this.props.t;
|
||||
const cards = inputCards === 'pass' ? inputCards : sortDoudizhuCards(inputCards);
|
||||
if (cards === 'pass') {
|
||||
return (
|
||||
<div className="non-card">
|
||||
<span>PASS</span>
|
||||
<span>{t('doudizhu.pass')}</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
|
@ -200,6 +196,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
}
|
||||
|
||||
playerDecisionArea(playerIdx) {
|
||||
const t = this.props.t;
|
||||
let fadeClassName = '';
|
||||
if (this.props.toggleFade === 'fade-out' && (playerIdx + 2) % 3 === this.props.currentPlayer)
|
||||
fadeClassName = 'fade-out';
|
||||
|
|
@ -214,7 +211,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
</div>
|
||||
{this.props.gamePlayable ? (
|
||||
<>
|
||||
<Button
|
||||
{/* <Button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
this.props.handleMainPlayerAct('deselect');
|
||||
|
|
@ -223,8 +220,8 @@ class DoudizhuGameBoard extends React.Component {
|
|||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
Deselect
|
||||
</Button>
|
||||
{t('doudizhu.deselect')}
|
||||
</Button> */}
|
||||
<Button
|
||||
disabled={this.props.isHintDisabled}
|
||||
onClick={(e) => {
|
||||
|
|
@ -235,7 +232,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
Hint
|
||||
{t('doudizhu.hint')}
|
||||
</Button>
|
||||
<Button
|
||||
disabled={this.props.isPassDisabled}
|
||||
|
|
@ -247,7 +244,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
Pass
|
||||
{t('doudizhu.pass')}
|
||||
</Button>
|
||||
<Button
|
||||
disabled={!this.props.selectedCards || this.props.selectedCards.length === 0}
|
||||
|
|
@ -259,7 +256,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
variant="contained"
|
||||
color="primary"
|
||||
>
|
||||
Play
|
||||
{t('doudizhu.play')}
|
||||
</Button>
|
||||
</>
|
||||
) : undefined}
|
||||
|
|
@ -339,7 +336,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
this.computeSideHand(this.props.hands[leftIdx])
|
||||
) : (
|
||||
<div className="player-hand-placeholder">
|
||||
<span>Waiting...</span>
|
||||
<span>{t('waiting...')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -352,7 +349,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
this.computeSideHand(this.props.hands[rightIdx])
|
||||
) : (
|
||||
<div className="player-hand-placeholder">
|
||||
<span>Waiting...</span>
|
||||
<span>{t('waiting...')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -370,7 +367,7 @@ class DoudizhuGameBoard extends React.Component {
|
|||
</div>
|
||||
) : (
|
||||
<div className="player-hand-placeholder">
|
||||
<span>Waiting...</span>
|
||||
<span>{t('waiting...')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,30 @@
|
|||
{
|
||||
"hidden": "Hidden",
|
||||
"waiting...": "Waiting...",
|
||||
"play_again": "Play Again",
|
||||
"cancel": "Cancel",
|
||||
"turn": "Turn",
|
||||
|
||||
"doudizhu": {
|
||||
"ai_hand_faceup": "AI Hand Face-Up",
|
||||
"play_as_landlord": "Play As Landlord",
|
||||
"play_as_peasant": "Play As Peasant",
|
||||
"landlord_up": "Landlord Up",
|
||||
"landlord_down": "Landlord Down"
|
||||
"landlord_down": "Landlord Down",
|
||||
"peasants_win": "Peasants Win!",
|
||||
"landlord_win": "Landlord Wins!",
|
||||
"only_choice": "Only Choice",
|
||||
"role": "Role",
|
||||
"win": "Win",
|
||||
"total": "Total",
|
||||
"win_rate": "Win Rate",
|
||||
"three_landlord_cards": "Three Landlord Cards",
|
||||
"ai_thinking_time": "AI Thinking Time",
|
||||
"landlord": "Landlord",
|
||||
"expected_win_rate": "Expected Win Rate",
|
||||
"pass": "Pass",
|
||||
"deselect": "Deselect",
|
||||
"hint": "Hint",
|
||||
"play": "Play"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,30 @@
|
|||
{
|
||||
"hidden": "隐藏",
|
||||
"waiting...": "等待中...",
|
||||
"play_again": "再次游玩",
|
||||
"cancel": "取消",
|
||||
"turn": "回合",
|
||||
|
||||
"doudizhu": {
|
||||
"ai_hand_faceup": "显示AI手牌",
|
||||
"play_as_landlord": "扮演地主",
|
||||
"play_as_peasant": "扮演农民",
|
||||
"landlord_up": "地主上家",
|
||||
"landlord_down": "地主下家"
|
||||
"landlord_down": "地主下家",
|
||||
"peasants_win": "农民胜利!",
|
||||
"landlord_win": "地主胜利!",
|
||||
"only_choice": "唯一选择",
|
||||
"role": "角色",
|
||||
"win": "胜场",
|
||||
"total": "全部",
|
||||
"win_rate": "胜率",
|
||||
"three_landlord_cards": "地主牌",
|
||||
"ai_thinking_time": "AI考虑时间",
|
||||
"landlord": "地主",
|
||||
"expected_win_rate": "预计胜率",
|
||||
"pass": "不出",
|
||||
"deselect": "取消选择",
|
||||
"hint": "提示",
|
||||
"play": "出牌"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -277,7 +277,8 @@ function PvEDoudizhuDemoView() {
|
|||
localStorage.setItem('GAME_STATISTICS', JSON.stringify(gameStatistics));
|
||||
|
||||
setTimeout(() => {
|
||||
gameEndDialogTitle = winner.role === 'peasant' ? 'Peasants win!' : 'Landlord wins!';
|
||||
gameEndDialogTitle =
|
||||
winner.role === 'peasant' ? t('doudizhu.peasants_win') : t('doudizhu.landlord_win');
|
||||
statisticRows = [
|
||||
{
|
||||
role: 'Landlord',
|
||||
|
|
@ -403,13 +404,13 @@ function PvEDoudizhuDemoView() {
|
|||
if (apiRes.data.legal_action === '') {
|
||||
proceedNextTurn([]);
|
||||
setPredictionRes({
|
||||
prediction: [['', 'Only Choice']],
|
||||
prediction: [['', t('doudizhu.only_choice')]],
|
||||
hands: gameState.hands[gameState.currentPlayer].slice(),
|
||||
});
|
||||
} else if (apiRes.data.legal_action.split(',').length === 1) {
|
||||
proceedNextTurn(apiRes.data.legal_action.split(''));
|
||||
setPredictionRes({
|
||||
prediction: [[apiRes.data.legal_action, 'Only Choice']],
|
||||
prediction: [[apiRes.data.legal_action, t('doudizhu.only_choice')]],
|
||||
hands: gameState.hands[gameState.currentPlayer].slice(),
|
||||
});
|
||||
} else {
|
||||
|
|
@ -715,7 +716,7 @@ function PvEDoudizhuDemoView() {
|
|||
if (computedCards === 'pass') {
|
||||
return (
|
||||
<div className={'non-card ' + toggleFade}>
|
||||
<span>Pass</span>
|
||||
<span>{t('doudizhu.pass')}</span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
|
@ -745,7 +746,7 @@ function PvEDoudizhuDemoView() {
|
|||
return (
|
||||
<div className={'playing'}>
|
||||
<div className={'non-card'}>
|
||||
<span>{'Hidden'}</span>
|
||||
<span>{t('hidden')}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -761,9 +762,9 @@ function PvEDoudizhuDemoView() {
|
|||
</div>
|
||||
{predictionRes.prediction.length > idx ? (
|
||||
<div className={'non-card'} style={{ marginTop: '0px' }}>
|
||||
<span>{`Expected Win Rate: ${(Number(predictionRes.prediction[idx][1]) * 100).toFixed(
|
||||
2,
|
||||
)}%`}</span>
|
||||
<span>{`${t('doudizhu.expected_win_rate')}: ${(
|
||||
Number(predictionRes.prediction[idx][1]) * 100
|
||||
).toFixed(2)}%`}</span>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
|
|
@ -771,7 +772,7 @@ function PvEDoudizhuDemoView() {
|
|||
</div>
|
||||
);
|
||||
} else {
|
||||
return <span className={'waiting'}>Waiting...</span>;
|
||||
return <span className={'waiting'}>{t('waiting...')}</span>;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -861,10 +862,10 @@ function PvEDoudizhuDemoView() {
|
|||
<Table aria-label="statistic table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Role</TableCell>
|
||||
<TableCell>Win</TableCell>
|
||||
<TableCell>Total</TableCell>
|
||||
<TableCell>Win Rate</TableCell>
|
||||
<TableCell>{t('doudizhu.role')}</TableCell>
|
||||
<TableCell>{t('doudizhu.win')}</TableCell>
|
||||
<TableCell>{t('doudizhu.total')}</TableCell>
|
||||
<TableCell>{t('doudizhu.win_rate')}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
|
|
@ -889,7 +890,7 @@ function PvEDoudizhuDemoView() {
|
|||
setIsGameEndDialogOpen(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
{t('cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleCloseGameEndDialog()}
|
||||
|
|
@ -898,7 +899,7 @@ function PvEDoudizhuDemoView() {
|
|||
autoFocus
|
||||
style={{ margin: '16px' }}
|
||||
>
|
||||
Play Again
|
||||
{t('play_again')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
|
@ -938,7 +939,7 @@ function PvEDoudizhuDemoView() {
|
|||
{playerInfo.length > 0 && gameState.currentPlayer !== null ? (
|
||||
<div style={{ padding: '16px' }}>
|
||||
<span style={{ textAlign: 'center', marginBottom: '8px', display: 'block' }}>
|
||||
Three Landlord Cards
|
||||
{t('doudizhu.three_landlord_cards')}
|
||||
</span>
|
||||
<div className="playingCards" style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
{sortDoudizhuCards(originalThreeLandlordCards, true).map((card) => {
|
||||
|
|
@ -966,21 +967,23 @@ function PvEDoudizhuDemoView() {
|
|||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<span>Waiting...</span>
|
||||
<span>{t('waiting...')}</span>
|
||||
</div>
|
||||
)}
|
||||
<Divider />
|
||||
<div className={'probability-player'} style={{ height: '19px', textAlign: 'center' }}>
|
||||
{playerInfo.length > 0 && gameState.currentPlayer !== null ? (
|
||||
<span>
|
||||
{
|
||||
['Landlord', 'Landlord Down', 'Landlord Up'][
|
||||
{t(
|
||||
`doudizhu.${
|
||||
['landlord', 'landlord_down', 'landlord_up'][
|
||||
playerInfo[gameState.currentPlayer].douzeroPlayerPosition
|
||||
]
|
||||
}
|
||||
}`,
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span>Waiting...</span>
|
||||
<span>{t('waiting...')}</span>
|
||||
)}
|
||||
</div>
|
||||
<Divider />
|
||||
|
|
@ -1014,7 +1017,7 @@ function PvEDoudizhuDemoView() {
|
|||
span="3"
|
||||
style={{ height: '51px', lineHeight: '51px', marginLeft: '-2px', marginRight: '-2px' }}
|
||||
>
|
||||
<div style={{ textAlign: 'center' }}>{`Turn ${gameState.turn}`}</div>
|
||||
<div style={{ textAlign: 'center' }}>{`${t('turn')} ${gameState.turn}`}</div>
|
||||
</Layout.Col>
|
||||
<Layout.Col span="1" style={{ height: '100%', width: '1px' }}>
|
||||
<Divider orientation="vertical" />
|
||||
|
|
@ -1025,9 +1028,9 @@ function PvEDoudizhuDemoView() {
|
|||
className={'form-label-left'}
|
||||
style={{ width: '155px', lineHeight: '28px', fontSize: '15px' }}
|
||||
>
|
||||
AI Thinking Time
|
||||
{t('doudizhu.ai_thinking_time')}
|
||||
</label>
|
||||
<div style={{ marginLeft: '170px', marginRight: '20px' }}>
|
||||
<div style={{ marginLeft: '160px', marginRight: '30px' }}>
|
||||
<Slider
|
||||
value={gameSpeedMap.find((element) => element.delay === apiPlayDelay).value}
|
||||
getAriaValueText={sliderValueText}
|
||||
|
|
@ -1058,7 +1061,7 @@ function PvEDoudizhuDemoView() {
|
|||
paddingLeft: '10px',
|
||||
}}
|
||||
>
|
||||
<TranslateIcon />
|
||||
<TranslateIcon style={{ width: '1.2rem', height: '1.2rem' }} />
|
||||
<Select
|
||||
id="language-select"
|
||||
style={{ width: '100%', textAlign: 'center', marginLeft: '7px' }}
|
||||
|
|
@ -1074,6 +1077,8 @@ function PvEDoudizhuDemoView() {
|
|||
</Paper>
|
||||
</div>
|
||||
<div className="citation">
|
||||
{locale === 'en' ? (
|
||||
<>
|
||||
This demo is based on{' '}
|
||||
<a href="https://github.com/datamllab/rlcard" target="_blank">
|
||||
RLCard
|
||||
|
|
@ -1083,6 +1088,21 @@ function PvEDoudizhuDemoView() {
|
|||
DouZero
|
||||
</a>
|
||||
. If you find these projects useful, please cite:
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
本演示基于{' '}
|
||||
<a href="https://github.com/datamllab/rlcard" target="_blank">
|
||||
RLCard
|
||||
</a>{' '}
|
||||
和{' '}
|
||||
<a href="https://github.com/daochenzha/douzero" target="_blank">
|
||||
DouZero
|
||||
</a>{' '}
|
||||
项目。如果这些项目帮到您，请添加引用:
|
||||
</>
|
||||
)}
|
||||
|
||||
<pre>
|
||||
{`@article{zha2019rlcard,
|
||||
title={RLCard: A Toolkit for Reinforcement Learning in Card Games},
|
||||
|
|
|
|||
Loading…
Reference in New Issue