Skip to content

Commit b5be130

Browse files
exrhizoexrhizo
authored
Add FavIcon and tutorial Images (#35)
* Add favicons and generate index.html * Label Full Name for register * Add explainer graphic * Cleanup Assessment logging and hook up onSeek
1 parent 54acdf2 commit b5be130

16 files changed

+987
-80
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
# production
1212
/build
1313

14+
# generated favicons
15+
/public/gen
16+
/public/index.html
17+
1418
# misc
1519
.DS_Store
1620
.env.local

‎bin/favicons.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// taken from the favicons script in gatsby-universal.
2+
const favicons = require('favicons');
3+
const path = require('path');
4+
const fs = require('fs');
5+
const config = require('../manifest');
6+
7+
const OUTPUT_PATH = '../public/gen/';
8+
9+
const outputDir = path.resolve(__dirname, OUTPUT_PATH);
10+
if (!fs.existsSync(outputDir)) {
11+
fs.mkdirSync(outputDir, {recursive: true});
12+
}
13+
const indexPath = path.resolve(__dirname, '../src/index.html');
14+
const outputIndexPath = path.resolve(__dirname, '../public/index.html');
15+
const sourcePath = path.resolve(__dirname, '../src/images/Icon.png');
16+
17+
const fullConfig = {
18+
path: '/gen/',
19+
developerName: null,
20+
developerURL: null,
21+
dir: 'auto',
22+
lang: 'en-US',
23+
display: 'standalone',
24+
orientation: 'any',
25+
version: '1.0',
26+
logging: true,
27+
icons: {
28+
android: true,
29+
appleIcon: true,
30+
appleStartup: true,
31+
coast: false,
32+
favicons: true,
33+
firefox: false,
34+
windows: false,
35+
yandex: false,
36+
},
37+
...config,
38+
};
39+
40+
const writeTo = (dir, file) => fs.writeFile(
41+
path.resolve(__dirname, dir, file.name),
42+
file.contents,
43+
err => {
44+
if (err) {
45+
console.log(err);
46+
}
47+
}
48+
);
49+
50+
const callback = function(err, res) {
51+
if (err) {
52+
return console.log(err);
53+
}
54+
res.images.forEach(image => writeTo(OUTPUT_PATH, image));
55+
res.files.forEach(file => writeTo(OUTPUT_PATH, file));
56+
57+
console.log('Writing index.html');
58+
fs.readFile(indexPath, 'utf8', function (err, data) {
59+
if (err) {
60+
return console.log(err);
61+
}
62+
var result = data.replace('<!--FAVICON_HTML-->', res.html.join(''));
63+
64+
fs.writeFile(outputIndexPath, result, 'utf8', function (err) {
65+
if (err) return console.log(err);
66+
});
67+
});
68+
};
69+
70+
favicons(sourcePath, fullConfig, callback);

‎manifest.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
appName: 'The Human Factor',
5+
appDescription: 'Emotional Intelligence Made Actionable.',
6+
start_url: '.',
7+
theme_color: '#000',
8+
background_color: '#fff',
9+
logo: path.resolve(__dirname, 'src/images/icon.png')
10+
};

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
},
2525
"scripts": {
2626
"start": "react-scripts start",
27-
"build": "react-scripts build",
27+
"build:favicons": "node bin/favicons",
28+
"build": "yarn build:favicons && react-scripts build",
2829
"test": "react-scripts test",
2930
"eject": "react-scripts eject"
3031
},
@@ -44,6 +45,7 @@
4445
]
4546
},
4647
"devDependencies": {
48+
"favicons": "^5.4.1",
4749
"now": "^15.8.0"
4850
}
4951
}

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/index.html

-39
This file was deleted.

‎public/manifest.json

-15
This file was deleted.

‎src/components/Assessment/Assessment.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -252,20 +252,17 @@ const Assessment = props => {
252252
const finishedMode = mode === MODE.FINISHED;
253253

254254
const onResponsePlay = (event, time) => {
255-
console.log(`play at ${time} finishedMode: ${finishedMode}`);
256255
if (finishedMode) {
257256
challengeVideo.play();
258257
}
259258
}
260259
const onResponsePause = (event, time) => {
261-
console.log(`pause at ${time}`);
262260
if (finishedMode) {
263261
challengeVideo.pause();
264262
challengeVideo.currentTime = time;
265263
}
266264
}
267265
const onResponseSeeked = (event, time) => {
268-
console.log(`seeked at ${time}`);
269266
if (finishedMode) {
270267
challengeVideo.currentTime = time;
271268
}
@@ -366,6 +363,7 @@ const Assessment = props => {
366363
onStatusChange={onStatusChange}
367364
onPlay={onResponsePlay}
368365
onPause={onResponsePause}
366+
onSeek={onResponseSeeked}
369367
allowReview/>
370368
</div>
371369
<div className={classes.footer}>

‎src/images/Icon.png

30.7 KB
Loading

‎src/images/InstructionsListen.jpg

34.5 KB
Loading

‎src/images/InstructionsRespond.jpg

38.8 KB
Loading

‎src/index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>The Human Factor</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Pridi:500&display=swap" rel="stylesheet">
8+
9+
<!--FAVICON_HTML-->
10+
</head>
11+
<body>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="root"></div>
14+
</body>
15+
</html>

‎src/logo.svg

-7
This file was deleted.

‎src/pages/LoginRegister.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const Register = props => {
8282
<form className={classes.form} onSubmit={handleSubmit(onSubmit)}>
8383
<Field className={classes.textField}
8484
name="fullName"
85-
label="Name"
85+
label="Full Name"
8686
component={renderInputWithHelper}
8787
validate={[required]}/>
8888

‎src/pages/TakeChallenge.js

+27-2
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@ import Button from "@material-ui/core/Button";
77
import { makeStyles } from '@material-ui/styles';
88
import { red, green } from '@material-ui/core/colors';
99

10+
import InstructionsListen from "../images/InstructionsListen.jpg";
11+
import InstructionsRespond from "../images/InstructionsRespond.jpg";
1012
import PaperPage from "components/PaperPage";
1113
import FullPageLoader from "pages/FullPageLoader";
1214
import Assessment from "components/Assessment/Assessment";
1315
import { ChallengesSelectors, ChallengesActions } from "modules/challenges";
1416
import { useActions, useSelectors } from "hooks";
1517

1618
const useStyles = makeStyles(theme => ({
17-
buttons: {
19+
content: {
1820
display: "flex",
1921
flexDirection: "column",
2022
alignItems: "center"
@@ -23,6 +25,7 @@ const useStyles = makeStyles(theme => ({
2325
fontSize: "3.5rem",
2426
lineHeight: 1,
2527
margin: theme.spacing(3),
28+
marginBottom: theme.spacing(8),
2629
[theme.breakpoints.between('xs', 'sm')]: {
2730
width: "250px",
2831
fontSize: "2.5rem"
@@ -36,6 +39,13 @@ const useStyles = makeStyles(theme => ({
3639
},
3740
green: {
3841
color: green[500]
42+
},
43+
instructionsImage: {
44+
maxWidth: '400px',
45+
width: '100%'
46+
},
47+
alignLeft: {
48+
alignSelf: 'flex-start'
3949
}
4050
}));
4151

@@ -88,14 +98,29 @@ const TakeChallenge = props => {
8898
return (
8999
<React.Fragment>
90100
<PaperPage title={challenge.title} superTitle="Challenge:">
91-
<div className={classes.buttons}>
101+
<div className={classes.content}>
92102
<Button onClick={launchChallenge}
93103
size="large"
94104
variant="contained"
95105
color="secondary"
96106
className={classes.bigButton}>
97107
Take Challenge
98108
</Button>
109+
<Typography variant="h2" className={classes.alignLeft}>
110+
Instructions
111+
</Typography>
112+
<Typography variant="h4" className={classes.alignLeft}>
113+
Listen to the challenge
114+
</Typography>
115+
<img className={classes.instructionsImage}
116+
src={InstructionsListen}
117+
alt="Listening to the challenge"/>
118+
<Typography variant="h4" className={classes.alignLeft}>
119+
Respond immediatly when it finishes
120+
</Typography>
121+
<img className={classes.instructionsImage}
122+
src={InstructionsRespond}
123+
alt="Responding to the challenge"/>
99124
</div>
100125
</PaperPage>
101126
<Assessment challengeId={challengeId}

0 commit comments

Comments
 (0)