Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4da5e68

Browse files
author
lei
committed
docs: ✏️ 添加基础翻译(导航,游戏界面,说明界面)
1 parent 50616a8 commit 4da5e68

File tree

8 files changed

+81
-50
lines changed

8 files changed

+81
-50
lines changed

‎public/locales/en/translation.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"Start Game": "Start Game"
2+
"Design Patterns Intro": "get familiar with the design patterns implemented in JavaScript, test yourself (or someone else) or simply for fun. Enjoy!",
3+
"Game Intro1": "Each question contains a code snippet and four answer choices.",
4+
"Game Intro2": "Look carefully at the code and choose the one correct answer.",
5+
"Game Intro3": "After answering all 23 questions you'll be shown your results."
36
}

‎public/locales/zh/translation.json‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
11
{
2-
"Start Game": "开始游戏"
2+
"Start Game": "开始游戏",
3+
"Game": "游戏",
4+
"Pattern Reference": "参考",
5+
"About": "关于",
6+
"Back to Patterns List": "返回模式列表",
7+
"Design Patterns Game": "设计模式游戏",
8+
"\"Gang of Four\" patterns in JavaScript": "JavaScript 中的 GOF 设计模式",
9+
"The Game": "游戏介绍",
10+
"Design Patterns": "设计模式",
11+
"Design Patterns Intro": "熟悉在JavaScript中实现的设计模式,用来测试自己(或其他人)或只是为了好玩🤣",
12+
"References": "引用",
13+
"Felipe Beline References": "所有的示例代码来自于",
14+
"Addy Osmani References": "如果你想深入了解这个主题,推荐 Addy Osmani的",
15+
"Game Intro1": "每个问题都包含一个代码片段和四个答案选项。",
16+
"Game Intro2": "仔细查看代码并选择一个正确答案。",
17+
"Game Intro3": "回答全部23个问题后你会看到你的测试结果"
318
}

‎src/components/Header.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
44
import { Route, withRouter, NavLink as Link } from 'react-router-dom';
55
import Toggle from './Toggle';
66
import Title from './Title';
7+
import { useTranslation } from 'react-i18next';
78

89
const StyledHeader = styled.header`
910
align-items: center;
@@ -56,22 +57,23 @@ const StyledRouterSpan = styled.span`
5657
`;
5758

5859
const Header = props => {
60+
const { t } = useTranslation();
5961
const {
6062
location: { pathname }
6163
} = props;
6264

6365
const paths = [
6466
{
6567
path: '/',
66-
page: 'Game'
68+
page: t("Game")
6769
},
6870
{
6971
path: '/patterns',
70-
page: 'Pattern Reference'
72+
page: t("Pattern Reference")
7173
},
7274
{
7375
path: '/about',
74-
page: 'About'
76+
page: t("About")
7577
}
7678
];
7779

@@ -93,7 +95,6 @@ const Header = props => {
9395
<Route exact path="/" render={() => <Toggle control="js" />} />
9496
<Toggle control="mode" />
9597
</StyledSettingsContainer>
96-
9798
<Title />
9899
</StyledHeader>
99100
);

‎src/components/Pattern.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import styleDark from '../styles/hljs/hljs.dark';
1010
import { patterns } from '../static/patterns';
1111
import { restart } from '../actions/restart';
1212
import { getMode } from '../selectors';
13+
import { withTranslation } from 'react-i18next';
14+
1315

1416
SyntaxHighlighter.registerLanguage('javascript', js);
1517

@@ -62,9 +64,11 @@ class Pattern extends React.Component {
6264

6365
const style = this.props.mode === 'dark' ? styleDark : styleLight;
6466

67+
const { t } = this.props;
68+
6569
return (
6670
<StyledPattern>
67-
<StyledLink to="/patterns">&larr; Back to Patterns List</StyledLink>
71+
<StyledLink to="/patterns">&larr; {t('Back to Patterns List')}</StyledLink>
6872
{pattern && (
6973
<React.Fragment>
7074
<h2>{pattern.name}</h2>
@@ -105,11 +109,11 @@ Pattern.propTypes = {
105109
reset: PropTypes.func.isRequired
106110
};
107111

108-
export default connect(
112+
export default withTranslation()(connect(
109113
state => ({
110114
mode: getMode(state)
111115
}),
112116
{
113117
reset: () => restart()
114118
}
115-
)(Pattern);
119+
)(Pattern));

‎src/components/PatternsList.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import styled from 'styled-components';
33
import { Link } from 'react-router-dom';
44
import { patterns } from '../static/patterns';
5+
import { useTranslation } from 'react-i18next';
56

67
const StyledPatterns = styled.div`
78
color: ${props => props.theme.text};
@@ -44,9 +45,10 @@ const PatternsList = () => {
4445
</ul>
4546
);
4647

48+
const { t } = useTranslation();
4749
return (
4850
<StyledPatterns>
49-
<h2>Design Patterns</h2>
51+
<h2>{t('Design Patterns')}</h2>
5052

5153
<p>
5254
In software engineering, a design pattern is a general repeatable solution to a commonly

‎src/components/Title.jsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import styled from 'styled-components';
3+
import { useTranslation } from 'react-i18next';
34

45
const TitleContainer = styled.div`
56
padding: 0.75rem 0 1rem;
@@ -23,11 +24,14 @@ const SubHeading = styled.h2`
2324
margin: 0.75rem 0 0;
2425
`;
2526

26-
export const Title = () => (
27-
<TitleContainer>
28-
<Heading>Design Patterns Game</Heading>
29-
<SubHeading>&ldquo;Gang of Four&rdquo; patterns in JavaScript</SubHeading>
30-
</TitleContainer>
31-
);
27+
export const Title = () => {
28+
const { t } = useTranslation();
29+
return (
30+
<TitleContainer>
31+
<Heading>{t('Design Patterns Game')}</Heading>
32+
<SubHeading>{t('"Gang of Four" patterns in JavaScript')}</SubHeading>
33+
</TitleContainer>
34+
);
35+
};
3236

3337
export default Title;

‎src/pages/About.jsx‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import styled from 'styled-components';
3+
import { useTranslation } from 'react-i18next';
34

45
const StyledAbout = styled.div`
56
color: ${props => props.theme.text};
@@ -20,36 +21,37 @@ const Header = styled.h3`
2021
margin-top: 2rem;
2122
`;
2223

23-
const About = () => (
24-
<StyledAbout>
25-
<Header>The Game</Header>
26-
<p>
27-
Design Patterns - get familiar with the design patterns implemented in JavaScript, test
28-
yourself (or someone else) or simply for fun. Enjoy!
29-
</p>
30-
31-
<Header>References</Header>
32-
<p>
33-
All the code samples are taken from this{' '}
34-
<cite>
35-
<a href="//github.com/fbeline/Design-Patterns-JS" target="_blank">
36-
awesome code compilation
37-
</a>{' '}
38-
by Felipe Beline
39-
</cite>
40-
.
41-
</p>
42-
<p>
43-
If you want a deep dive into the subject I can't recommend enough{' '}
44-
<cite>
45-
<a href="//addyosmani.com/resources/essentialjsdesignpatterns/book/" target="_blank">
46-
Learning JavaScript Design Patterns
47-
</a>{' '}
48-
by Addy Osmani
49-
</cite>
50-
.
51-
</p>
52-
</StyledAbout>
53-
);
24+
const About = () => {
25+
const { t } = useTranslation();
26+
27+
return (
28+
<StyledAbout>
29+
<Header>{t('The Game')}</Header>
30+
<p>
31+
{t('Design Patterns')} - {t('Design Patterns Intro')}
32+
</p>
33+
34+
<Header>{t('References')}</Header>
35+
<p>
36+
{t('Felipe Beline References')}
37+
<cite>
38+
<a href="//github.com/fbeline/Design-Patterns-JS" target="_blank">
39+
awesome code compilation
40+
</a>
41+
</cite>
42+
.
43+
</p>
44+
<p>
45+
{t('Addy Osmani References')}
46+
<cite>
47+
<a href="//addyosmani.com/resources/essentialjsdesignpatterns/book/" target="_blank">
48+
Learning JavaScript Design Patterns
49+
</a>
50+
</cite>
51+
.
52+
</p>
53+
</StyledAbout>
54+
);
55+
};
5456

5557
export default About;

‎src/pages/Game.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ const Game = ({ intro, current, answers, style, onStart, onRestart }) => {
5252
{intro && (
5353
<Intro>
5454
<p>
55-
Each question contains a code snippet and four answer choices.
55+
{t('Game Intro1')}
5656
<br />
57-
Look carefully at the code and choose the one correct answer.
57+
{t('Game Intro2')}
5858
</p>
59-
<p>After answering all 23 questions you'll be shown your results.</p>
59+
<p>{t('Game Intro3')}</p>
6060
<StartButtonContainer>
6161
<Button label={t("Start Game")} id="start" onClick={onStart} />
6262
</StartButtonContainer>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /