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 5885552

Browse files
Merge pull request zoltantothcom#75 from zoltantothcom/dev
Add social share icons
2 parents 6e40cab + dbd425e commit 5885552

File tree

5 files changed

+150
-83
lines changed

5 files changed

+150
-83
lines changed

‎index.html‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,7 @@
88
<body>
99
<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>
1010
<div id="root" />
11-
<script>window.twttr = (function(d, s, id) {
12-
var js, fjs = d.getElementsByTagName(s)[0],
13-
t = window.twttr || {};
14-
if (d.getElementById(id)) return t;
15-
js = d.createElement(s);
16-
js.id = id;
17-
js.src = "https://platform.twitter.com/widgets.js";
18-
fjs.parentNode.insertBefore(js, fjs);
1911

20-
t._e = [];
21-
t.ready = function(f) {
22-
t._e.push(f);
23-
};
24-
25-
return t;
26-
}(document, "script", "twitter-wjs"));</script>
2712
<!-- Google Analytics -->
2813
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-25262063-2"></script>
2914
<script>

‎src/Layout.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
66
import styleLight from './styles/hljs/hljs.light';
77
import styleDark from './styles/hljs/hljs.dark';
88
import Header from './components/Header';
9+
import Footer from './components/Footer';
910
import GlobalStyle from './styles/global';
1011
import { themeCommon } from './styles/themes/theme.common';
1112
import { themeLight } from './styles/themes/theme.light';
@@ -38,6 +39,8 @@ const Layout = props => {
3839
<Route path="/about" component={About} />
3940
<Redirect to="/" />
4041
</Switch>
42+
43+
<Footer />
4144
</React.Fragment>
4245
</ThemeProvider>
4346
);

‎src/components/Footer.jsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import {
4+
ICON_TWITTER,
5+
ICON_FACEBOOK,
6+
ICON_LINKEDIN,
7+
ICON_REDDIT,
8+
ICON_GITHUB
9+
} from '../static/icons';
10+
11+
const FooterContainer = styled.footer`
12+
display: flex;
13+
justify-content: center;
14+
margin-top: 5rem;
15+
16+
a {
17+
border: 1px solid ${props => props.theme.buttonBackground};
18+
border-radius: 50%;
19+
display: inline-flex;
20+
margin: 0.75rem;
21+
padding: 0.5rem;
22+
23+
:hover svg,
24+
:focus svg {
25+
fill: ${props => props.theme.toggleFillHover};
26+
}
27+
}
28+
29+
svg {
30+
fill: ${props => props.theme.buttonBackground};
31+
transition: 0.2s;
32+
}
33+
`;
34+
35+
const Footer = () => (
36+
<FooterContainer>
37+
<a
38+
href="https://twitter.com/intent/tweet?url=https://designpatternsgame.com&text=Test%20your%20familiarity%20with%20the%20Gang%20of%20Four%20design%20patterns%20implemented%20in%20JavaScript"
39+
target="_blank"
40+
>
41+
{ICON_TWITTER}
42+
</a>
43+
<a href="https://www.facebook.com/sharer.php?u=https://designpatternsgame.com/" target="_blank">
44+
{ICON_FACEBOOK}
45+
</a>
46+
<a
47+
href="https://www.linkedin.com/shareArticle?mini=true&url=https://designpatternsgame.com&title=Design%20Patterns%20Game&summary=A%20game%20to%20test%20your%20familiarity%20with%20the%20Gang%20of%20Four%20design%20patterns%20implemented%20in%20JavaScript."
48+
target="_blank"
49+
>
50+
{ICON_LINKEDIN}
51+
</a>
52+
<a
53+
href="https://reddit.com/submit?url=https://designpatternsgame.com&title=Design%20Patterns%20Game"
54+
target="_blank"
55+
>
56+
{ICON_REDDIT}
57+
</a>
58+
<a href="https://github.com/zoltantothcom/Design-Patterns-JavaScript" target="_blank">
59+
{ICON_GITHUB}
60+
</a>
61+
</FooterContainer>
62+
);
63+
64+
export default Footer;

‎src/pages/Game.jsx‎

Lines changed: 46 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React,{Fragment} from 'react';
1+
import React from 'react';
22
import PropTypes from 'prop-types';
33
import styled from 'styled-components';
44
import { connect } from 'react-redux';
@@ -22,93 +22,71 @@ const Intro = styled.div`
2222

2323
const StartButtonContainer = styled.div`
2424
margin: 3rem auto 1rem;
25-
/* text-align: center; */
2625
`;
2726

2827
const Restart = styled.div`
2928
margin: 3rem 0;
3029
text-align: center;
3130
`;
3231

33-
const TwitterButton = styled.a`
34-
background: #1da1f2;
35-
color: #ffffff;
32+
const GitHubButton = styled.a`
33+
background: #e9ecef;
34+
color: #495057;
3635
padding: 6px 12px;
3736
border-radius: 4px;
3837
margin: 0 8px;
3938
text-decoration: none;
4039
font-size: 0.8rem;
4140
`;
4241

43-
const GitHubButton = styled(TwitterButton)`
44-
background: #e9ecef;
45-
color: #495057;
46-
`;
47-
4842
const ShareContainer = styled.p`
4943
text-align: center;
5044
`;
5145

52-
const Game = ({ intro, current, answers, style, onStart, onRestart }) => {
53-
let correct;
46+
const Game = ({ intro, current, answers, style, onStart, onRestart }) => (
47+
<>
48+
{intro && (
49+
<Intro>
50+
<p>
51+
Each question contains a code snippet and four answer choices.
52+
<br />
53+
Look carefully at the code and choose the one correct answer.
54+
</p>
55+
<p>After answering all 23 questions you'll be shown your results.</p>
56+
<StartButtonContainer>
57+
<Button label="Start Game" id="start" onClick={onStart} />
58+
</StartButtonContainer>
59+
</Intro>
60+
)}
5461

55-
if (!current) {
56-
correct = answers.filter(item => item.correct).length;
57-
}
58-
59-
return (
60-
<Fragment>
61-
{intro && (
62-
<Intro>
63-
<p>
64-
Each question contains a code snippet and four answer choices.
65-
<br />
66-
Look carefully at the code and choose the one correct answer.
67-
</p>
68-
<p>After answering all 23 questions you'll be shown your results.</p>
69-
<StartButtonContainer>
70-
<Button label="Start Game" id="start" onClick={onStart} />
71-
</StartButtonContainer>
72-
</Intro>
73-
)}
74-
75-
{!intro && current && (
76-
<Fragment>
77-
<ProgressBar />
78-
<Code style={style} />
79-
<ButtonContainer />
80-
</Fragment>
81-
)}
62+
{!intro && current && (
63+
<>
64+
<ProgressBar />
65+
<Code style={style} />
66+
<ButtonContainer />
67+
</>
68+
)}
8269

83-
{!intro && !current && (
84-
<Fragment>
85-
<Result />
86-
<Percentage />
87-
<Restart>
88-
<Button label="Try Again" id="try_again" onClick={onRestart} />
89-
</Restart>
90-
<ShareContainer>
91-
<TwitterButton
92-
className="twitter-share-button"
93-
data-dnt="true"
94-
href={`https://twitter.com/intent/tweet?text=I%20scored%20${correct}%20out%20of%2023%20in%20JavaScript%20Design%20Patterns%20game!&url=http://designpatternsgame.com`}
95-
>
96-
Tweet Your Score
97-
</TwitterButton>
98-
99-
<GitHubButton
100-
href="https://github.com/zoltantothcom/Design-Patterns-JavaScript"
101-
aria-label="Star zoltantothcom/Design-Patterns-JavaScript on GitHub"
102-
target="_blank"
103-
>
104-
Star on GitHub
105-
</GitHubButton>
106-
</ShareContainer>
107-
</Fragment>
108-
)}
109-
</Fragment>
110-
);
111-
};
70+
{!intro && !current && (
71+
<>
72+
<Result />
73+
<Percentage />
74+
<Restart>
75+
<Button label="Try Again" id="try_again" onClick={onRestart} />
76+
</Restart>
77+
<ShareContainer>
78+
<GitHubButton
79+
href="https://github.com/zoltantothcom/Design-Patterns-JavaScript"
80+
aria-label="Star zoltantothcom/Design-Patterns-JavaScript on GitHub"
81+
target="_blank"
82+
>
83+
Star on GitHub
84+
</GitHubButton>
85+
</ShareContainer>
86+
</>
87+
)}
88+
</>
89+
);
11290

11391
Game.propTypes = {
11492
style: PropTypes.object.isRequired,

‎src/static/icons/index.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,40 @@ export const SUN_FILLED = (
3737
<path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z" />
3838
</Fragment>
3939
);
40+
41+
export const ICON_FACEBOOK = (
42+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
43+
<title>facebook</title>
44+
<path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z" />
45+
</svg>
46+
);
47+
48+
export const ICON_TWITTER = (
49+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
50+
<title>twitter</title>
51+
<path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z" />
52+
</svg>
53+
);
54+
55+
export const ICON_LINKEDIN = (
56+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
57+
<title>linkedin</title>
58+
<path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z" />
59+
<path d="M2 12h6v18h-6v-18z" />
60+
<path d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z" />
61+
</svg>
62+
);
63+
64+
export const ICON_REDDIT = (
65+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
66+
<title>reddit</title>
67+
<path d="M8 20c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM20 20c0-1.105 0.895-2 2-2s2 0.895 2 2c0 1.105-0.895 2-2 2s-2-0.895-2-2zM20.097 24.274c0.515-0.406 1.262-0.317 1.668 0.198s0.317 1.262-0.198 1.668c-1.434 1.13-3.619 1.86-5.567 1.86s-4.133-0.73-5.567-1.86c-0.515-0.406-0.604-1.153-0.198-1.668s1.153-0.604 1.668-0.198c0.826 0.651 2.46 1.351 4.097 1.351s3.271-0.7 4.097-1.351zM32 16c0-2.209-1.791-4-4-4-1.504 0-2.812 0.83-3.495 2.057-2.056-1.125-4.561-1.851-7.29-2.019l2.387-5.36 4.569 1.319c0.411 1.167 1.522 2.004 2.83 2.004 1.657 0 3-1.343 3-3s-1.343-3-3-3c-1.142 0-2.136 0.639-2.642 1.579l-5.091-1.47c-0.57-0.164-1.173 0.116-1.414 0.658l-3.243 7.282c-2.661 0.187-5.102 0.907-7.114 2.007-0.683-1.227-1.993-2.056-3.496-2.056-2.209 0-4 1.791-4 4 0 1.635 0.981 3.039 2.387 3.659-0.252 0.751-0.387 1.535-0.387 2.341 0 5.523 6.268 10 14 10s14-4.477 14-10c0-0.806-0.134-1.589-0.387-2.34 1.405-0.62 2.387-2.025 2.387-3.66zM27 5.875c0.621 0 1.125 0.504 1.125 1.125s-0.504 1.125-1.125 1.125-1.125-0.504-1.125-1.125 0.504-1.125 1.125-1.125zM2 16c0-1.103 0.897-2 2-2 0.797 0 1.487 0.469 1.808 1.145-1.045 0.793-1.911 1.707-2.552 2.711-0.735-0.296-1.256-1.016-1.256-1.856zM16 29.625c-6.42 0-11.625-3.414-11.625-7.625s5.205-7.625 11.625-7.625c6.42 0 11.625 3.414 11.625 7.625s-5.205 7.625-11.625 7.625zM28.744 17.856c-0.641-1.003-1.507-1.918-2.552-2.711 0.321-0.676 1.011-1.145 1.808-1.145 1.103 0 2 0.897 2 2 0 0.84-0.52 1.56-1.256 1.856z" />
68+
</svg>
69+
);
70+
71+
export const ICON_GITHUB = (
72+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
73+
<title>github</title>
74+
<path d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z" />
75+
</svg>
76+
);

0 commit comments

Comments
(0)

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