diff --git a/src/App.js b/src/App.js index 6816f58..351b274 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( diff --git a/src/assets/gameview.scss b/src/assets/gameview.scss index 78d7f22..1756f92 100644 --- a/src/assets/gameview.scss +++ b/src/assets/gameview.scss @@ -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; } diff --git a/src/components/GameBoard/DoudizhuGameBoard.js b/src/components/GameBoard/DoudizhuGameBoard.js index 442403c..016f0ec 100644 --- a/src/components/GameBoard/DoudizhuGameBoard.js +++ b/src/components/GameBoard/DoudizhuGameBoard.js @@ -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 (
- PASS + {t('doudizhu.pass')}
); } 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 { {this.props.gamePlayable ? ( <> - + {t('doudizhu.deselect')} + */} ) : undefined} @@ -339,7 +336,7 @@ class DoudizhuGameBoard extends React.Component { this.computeSideHand(this.props.hands[leftIdx]) ) : (
- Waiting... + {t('waiting...')}
)} @@ -352,7 +349,7 @@ class DoudizhuGameBoard extends React.Component { this.computeSideHand(this.props.hands[rightIdx]) ) : (
- Waiting... + {t('waiting...')}
)} @@ -370,7 +367,7 @@ class DoudizhuGameBoard extends React.Component { ) : (
- Waiting... + {t('waiting...')}
)} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index cdf3767..3e9bbb8 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -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" } } diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json index 49b4700..d332f1b 100644 --- a/src/locales/zh/translation.json +++ b/src/locales/zh/translation.json @@ -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": "出牌" } } diff --git a/src/view/PvEView/PvEDoudizhuDemoView.js b/src/view/PvEView/PvEDoudizhuDemoView.js index 7710fde..929d031 100644 --- a/src/view/PvEView/PvEDoudizhuDemoView.js +++ b/src/view/PvEView/PvEDoudizhuDemoView.js @@ -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 (
- Pass + {t('doudizhu.pass')}
); } else { @@ -745,7 +746,7 @@ function PvEDoudizhuDemoView() { return (
- {'Hidden'} + {t('hidden')}
); @@ -761,9 +762,9 @@ function PvEDoudizhuDemoView() { {predictionRes.prediction.length > idx ? (
- {`Expected Win Rate: ${(Number(predictionRes.prediction[idx][1]) * 100).toFixed( - 2, - )}%`} + {`${t('doudizhu.expected_win_rate')}: ${( + Number(predictionRes.prediction[idx][1]) * 100 + ).toFixed(2)}%`}
) : ( '' @@ -771,7 +772,7 @@ function PvEDoudizhuDemoView() { ); } else { - return Waiting...; + return {t('waiting...')}; } }; @@ -861,10 +862,10 @@ function PvEDoudizhuDemoView() { - Role - Win - Total - Win Rate + {t('doudizhu.role')} + {t('doudizhu.win')} + {t('doudizhu.total')} + {t('doudizhu.win_rate')} @@ -889,7 +890,7 @@ function PvEDoudizhuDemoView() { setIsGameEndDialogOpen(false); }} > - Cancel + {t('cancel')} @@ -938,7 +939,7 @@ function PvEDoudizhuDemoView() { {playerInfo.length > 0 && gameState.currentPlayer !== null ? (
- Three Landlord Cards + {t('doudizhu.three_landlord_cards')}
{sortDoudizhuCards(originalThreeLandlordCards, true).map((card) => { @@ -966,21 +967,23 @@ function PvEDoudizhuDemoView() { justifyContent: 'center', }} > - Waiting... + {t('waiting...')}
)}
{playerInfo.length > 0 && gameState.currentPlayer !== null ? ( - { - ['Landlord', 'Landlord Down', 'Landlord Up'][ - playerInfo[gameState.currentPlayer].douzeroPlayerPosition - ] - } + {t( + `doudizhu.${ + ['landlord', 'landlord_down', 'landlord_up'][ + playerInfo[gameState.currentPlayer].douzeroPlayerPosition + ] + }`, + )} ) : ( - Waiting... + {t('waiting...')} )}
@@ -1014,7 +1017,7 @@ function PvEDoudizhuDemoView() { span="3" style={{ height: '51px', lineHeight: '51px', marginLeft: '-2px', marginRight: '-2px' }} > -
{`Turn ${gameState.turn}`}
+
{`${t('turn')} ${gameState.turn}`}
@@ -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')} -
+
element.delay === apiPlayDelay).value} getAriaValueText={sliderValueText} @@ -1058,7 +1061,7 @@ function PvEDoudizhuDemoView() { paddingLeft: '10px', }} > - +