Skip to content

Commit b9791e6

Browse files
author
lei
committed
feat: 🎸 添加部分翻译
1 parent 4da5e68 commit b9791e6

File tree

7 files changed

+40
-26
lines changed

7 files changed

+40
-26
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
77
</head>
88
<body>
9-
<a href="https://github.com/zoltantothcom/Design-Patterns-JavaScript" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#e22a23"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
9+
<a href="https://github.com/levidcd/Design-Patterns-JavaScript" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#e22a23"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
1010
<div id="root" />
1111

1212
<!-- Google Analytics -->

‎public/locales/en/translation.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
2+
"Design Patterns Desc": "In software engineering, a design pattern is a general repeatable solution to a commonly occurring problem in software design.",
23
"Design Patterns Intro": "get familiar with the design patterns implemented in JavaScript, test yourself (or someone else) or simply for fun. Enjoy!",
34
"Game Intro1": "Each question contains a code snippet and four answer choices.",
45
"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."
6+
"Game Intro3": "After answering all 23 questions you'll be shown your results.",
7+
"creational_desc":"These design patterns are all about class instantiation. This pattern can be further divided into class-creation patterns and object-creational patterns. While class-creation patterns use inheritance effectively in the instantiation process, object-creation patterns use delegation effectively to get the job done.",
8+
"structural_desc":"These design patterns are all about Class and Object composition. Structural class-creation patterns use inheritance to compose interfaces. Structural object-patterns define ways to compose objects to obtain new functionality.",
9+
"behavioral_desc":"These design patterns are all about Class and Object composition. Structural class-creation patterns use inheritance to compose interfaces. Structural object-patterns define ways to compose objects to obtain new functionality."
610
}

‎public/locales/zh/translation.json

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,23 @@
88
"\"Gang of Four\" patterns in JavaScript": "JavaScript 中的 GOF 设计模式",
99
"The Game": "游戏介绍",
1010
"Design Patterns": "设计模式",
11+
"pattern": "模式",
12+
"Design Patterns Desc": "在软件工程中，设计模式是软件设计中常见问题的可重复解决方案。（俗称套路。",
1113
"Design Patterns Intro": "熟悉在JavaScript中实现的设计模式，用来测试自己（或其他人）或只是为了好玩🤣",
1214
"References": "引用",
1315
"Felipe Beline References": "所有的示例代码来自于",
1416
"Addy Osmani References": "如果你想深入了解这个主题，推荐 Addy Osmani的",
1517
"Game Intro1": "每个问题都包含一个代码片段和四个答案选项。",
1618
"Game Intro2": "仔细查看代码并选择一个正确答案。",
17-
"Game Intro3": "回答全部23个问题后你会看到你的测试结果"
19+
"Game Intro3": "回答全部23个问题后你会看到你的测试结果",
20+
"Type": "类型",
21+
"Definition": "定义",
22+
"Use When": "使用场景",
23+
"creational":"创建型",
24+
"creational_desc":"这些设计模式都与类实例化有关。此模式可以细分为类创建模式和对象创建模式。类创建模式在实例化过程中使用继承，而对象创建模式使用委派。",
25+
"structural":"结构型",
26+
"structural_desc":"这些设计模式都是关于类和对象组合的。结构类创建模式使用继承来组合接口。结构对象模式定义了组合对象以获取新功能的方法。",
27+
"behavioral":"行为型",
28+
"behavioral_desc":"这些设计模式都是关于类的对象通信。行为模式是最具体关注对象之间通信的模式",
29+
"Abstract Factory":"抽象工厂(Abstract Factory)"
1830
}

‎src/components/Footer.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ const FooterContainer = styled.footer`
3434

3535
const Footer = () => (
3636
<FooterContainer>
37+
<a href="https://github.com/levidcd/Design-Patterns-JavaScript" target="_blank">
38+
{ICON_GITHUB}
39+
</a>
3740
<a
3841
href="https://twitter.com/intent/tweet?url=https://designpatternsgame.com&text=Test%20your%20familiarity%20with%20the%20Gang%20of%20Four%20design%20patterns%20implemented%20in%20JavaScript"
3942
target="_blank"

‎src/components/Pattern.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,18 +71,18 @@ class Pattern extends React.Component {
7171
<StyledLink to="/patterns">&larr; {t('Back to Patterns List')}</StyledLink>
7272
{pattern && (
7373
<React.Fragment>
74-
<h2>{pattern.name}</h2>
74+
<h2>{t(pattern.name)}</h2>
7575
<p>
76-
<SubHeader>Type:</SubHeader>
77-
<Type>{pattern.type} pattern</Type>
76+
<SubHeader>{t('Type')}</SubHeader>
77+
<Type>{t(pattern.type)}{t('pattern')}</Type>
7878
</p>
7979
<p>
80-
<SubHeader>Definition:</SubHeader>
80+
<SubHeader>{t('Definition')}</SubHeader>
8181
{pattern.definition}
8282
</p>
8383
{pattern.when && (
8484
<p>
85-
<SubHeader>Use when&hellip;</SubHeader>
85+
<SubHeader>{t('Use When')}</SubHeader>
8686
&hellip;{pattern.when}.
8787
</p>
8888
)}

‎src/components/PatternsList.jsx

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,51 +31,46 @@ const StyledPatterns = styled.div`
3131
`;
3232

3333
const PatternsList = () => {
34+
const { t } = useTranslation();
35+
3436
const lister = patternType => (
3537
<ul>
3638
{patterns.map(({ id, name, type }) => {
3739
if (type === patternType) {
3840
return (
3941
<li key={id}>
40-
<Link to={`/patterns/${id}`}>{name}</Link>
42+
<Link to={`/patterns/${id}`}>{t(name)}</Link>
4143
</li>
4244
);
4345
}
4446
})}
4547
</ul>
4648
);
4749

48-
const { t } = useTranslation();
50+
4951
return (
5052
<StyledPatterns>
5153
<h2>{t('Design Patterns')}</h2>
5254

5355
<p>
54-
In software engineering, a design pattern is a general repeatable solution to a commonly
55-
occurring problem in software design.
56+
{t('Design Patterns Desc')}
5657
</p>
5758

58-
<h3>Creational Design Patterns</h3>
59+
<h3>{t('creational')}{t('Design Patterns')}</h3>
5960
<p>
60-
These design patterns are all about class instantiation. This pattern can be further divided
61-
into class-creation patterns and object-creational patterns. While class-creation patterns
62-
use inheritance effectively in the instantiation process, object-creation patterns use
63-
delegation effectively to get the job done.
61+
{t('creational_desc')}
6462
</p>
6563
{lister('creational')}
6664

67-
<h3>Structural Design Patterns</h3>
65+
<h3>{t('structural')}{t('Design Patterns')}</h3>
6866
<p>
69-
These design patterns are all about Class and Object composition. Structural class-creation
70-
patterns use inheritance to compose interfaces. Structural object-patterns define ways to
71-
compose objects to obtain new functionality.
67+
{t('structural_desc')}
7268
</p>
7369
{lister('structural')}
7470

75-
<h3>Behavioral Design Patterns</h3>
71+
<h3>{t('behavioral')}{t('Design Patterns')}</h3>
7672
<p>
77-
These design patterns are all about Class's objects communication. Behavioral patterns are
78-
those patterns that are most specifically concerned with communication between objects.
73+
{t('behavioral_desc')}
7974
</p>
8075
{lister('behavioral')}
8176
</StyledPatterns>

‎src/pages/Game.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ const Game = ({ intro, current, answers, style, onStart, onRestart }) => {
8080
</Restart>
8181
<ShareContainer>
8282
<GitHubButton
83-
href="https://github.com/zoltantothcom/Design-Patterns-JavaScript"
84-
aria-label="Star zoltantothcom/Design-Patterns-JavaScript on GitHub"
83+
href="https://github.com/levidcd/Design-Patterns-JavaScript"
84+
aria-label="Star levidcd/Design-Patterns-JavaScript on GitHub"
8585
target="_blank"
8686
>
8787
Star on GitHub

0 commit comments

Comments
 (0)