From 89004e1328ba2e3c57e184f635e5e929342f3033 Mon Sep 17 00:00:00 2001 From: maccyber Date: Wed, 29 Mar 2017 22:11:39 +0200 Subject: [PATCH] images du futur --- .travis.yml | 1 - components/info/countries.js | 11 +++++-- components/info/gender.js | 4 +-- components/info/index.js | 4 ++- components/info/tests.js | 78 ++++++++++++++++++++++++++++++++++++++++++++ components/loading.js | 21 ++++++------ components/progressbar.js | 3 +- components/results/index.js | 37 +++++++++++++++++++-- components/thetest.js | 29 +++++++++++----- config/index.js | 3 +- layouts/index.js | 12 +++++-- pages/index.js | 14 ++++++-- static/ga.js | 9 +++++ 13 files changed, 192 insertions(+), 34 deletions(-) create mode 100644 components/info/tests.js create mode 100644 static/ga.js diff --git a/.travis.yml b/.travis.yml index 02de009..c985804 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,4 +3,3 @@ node_js: - "7" after_success: - npm run coveralls - - test $TRAVIS_BRANCH = "master" && npm i -g now && now -t=$NOW_TOKEN && now -t=$NOW_TOKEN alias diff --git a/components/info/countries.js b/components/info/countries.js index 81c3251..666ec63 100644 --- a/components/info/countries.js +++ b/components/info/countries.js @@ -6,8 +6,14 @@ export default ({ handleChange, country }) => (

Nationality

- + { + countries.getData().map(c => + + ) + } diff --git a/components/info/gender.js b/components/info/gender.js index 145b0fd..0a8e069 100644 --- a/components/info/gender.js +++ b/components/info/gender.js @@ -6,8 +6,8 @@ export default ({ handleChange, gender }) => ( Gender

- {gender === 'Male' ? 'radio_button_checked' : 'radio_button_unchecked'} Male - {gender === 'Female' ? 'radio_button_checked' : 'radio_button_unchecked'} Female + {gender === 'Male' ? 'radio_button_checked' : 'radio_button_unchecked'} + {gender === 'Female' ? 'radio_button_checked' : 'radio_button_unchecked'} + +) diff --git a/components/loading.js b/components/loading.js index cb46027..ae44de3 100644 --- a/components/loading.js +++ b/components/loading.js @@ -4,21 +4,20 @@ export default ({ loading }) => (
{ loading - ? - -

- -

-

- LOADING ...

- - + + : null }
diff --git a/components/progressbar.js b/components/progressbar.js index cb36c10..53de33a 100644 --- a/components/progressbar.js +++ b/components/progressbar.js @@ -20,7 +20,8 @@ export default ({ progress }) => ( .bar { height: 20px; background-color: #94d696; - } + transition: width 2s; + } `} diff --git a/components/results/index.js b/components/results/index.js index 884bbb3..fd6b2e9 100644 --- a/components/results/index.js +++ b/components/results/index.js @@ -76,7 +76,7 @@ export default class Results extends React.Component {

-

Your level of {d.title.toLowerCase()} is {d.scoreText}

+

Your level of {d.title.toLowerCase()} is {d.scoreText} ({d.score}/{d.count * 5})

1 ? 'block' : 'none' }} > ({x: `${s.title} (${s.score})`, y: s.score})))}]} @@ -90,7 +90,7 @@ export default class Results extends React.Component {

{f.title}

-

Your level of {f.title.toLowerCase()} is {f.scoreText}

+

Your level of {f.title.toLowerCase()} is {f.scoreText} ({f.score}/{f.count * 6})

 ) } @@ -103,7 +103,26 @@ export default class Results extends React.Component { font-size: 23px; margin-bottom: 10px; } - @media (max-width:1300px) { + .rd3-barchart-bar:nth-child(1) { + fill: #ff8888; + } + .rd3-barchart-bar:nth-child(2) { + fill: #88d6ff; + } + .rd3-barchart-bar:nth-child(3) { + fill: #fff188; + } + .rd3-barchart-bar:nth-child(4) { + fill: #98ff88; + } + .rd3-barchart-bar:nth-child(5) { + fill: #ee88ff; + box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.75); + } + .rd3-barchart-bar:nth-child(6) { + fill: #a988ff; + } + @media (min-width:681px) and (max-width:1300px) { .rd3-barchart-xaxis text { text-anchor: start; transform: rotate(50deg); @@ -116,6 +135,18 @@ export default class Results extends React.Component { transform: scaleY(4); } } + @media (max-width: 680px) { + .rd3-barchart-xaxis text { + writing-mode: tb; + text-anchor: start; + } + .rd3-barchart-xaxis line { + transform: scaleY(0); + } + .rd3-chart { + padding-bottom: 200px; + } + } `}
diff --git a/components/thetest.js b/components/thetest.js index 8bb16f4..7f00d23 100644 --- a/components/thetest.js +++ b/components/thetest.js @@ -22,14 +22,15 @@ export default class TheTest extends React.Component { languages: [], radios: [], lang: config.defaultLanguage, - choosenTest: props.test || config.defaultTest, + choosenTest: config.defaultTest, submitDisabled: true, now: Date.now(), age: '', gender: 'Male', - country: '', + country: 'GB', buttonSubmitDisabled: true, - hideMain: true + hideMain: true, + percent: 0 } this.handleRadioChange = this.handleRadioChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) @@ -37,11 +38,14 @@ export default class TheTest extends React.Component { this.prevPage = this.prevPage.bind(this) this.handleChange = this.handleChange.bind(this) this.buttonSubmit = this.buttonSubmit.bind(this) + this.switchTest = this.switchTest.bind(this) } async componentDidMount () { + const ipCountry = await getData(`${config.ipCountryUrl}${this.props.ip}`) + const country = ipCountry.countryCode || 'NO' const data = await getData(`${config.dataUrl}?lang=${this.state.lang}&testType=${this.state.choosenTest}&limit=${config.defaultLimit}`) - this.setState({ ...data, loading: false }) + this.setState({ ...data, loading: false, country: country }) } async handleChange (e) { @@ -55,18 +59,26 @@ export default class TheTest extends React.Component { buttonSubmit (e) { e.preventDefault() + window.scrollTo(0, 0) this.setState({ hideMain: false }) } handleRadioChange (e) { let radioStore = this.state.radios const selectedName = parseInt(e.currentTarget.getAttribute('name')) + const percent = Math.round(selectedName / parseInt(this.state.totalQuestions) * 100) const selectedValue = parseInt(e.currentTarget.getAttribute('value')) const {domain, facet} = this.state.questions.find(c => c.id === selectedName) radioStore[selectedName] = {score: selectedValue, domain: domain, facet: facet} this.setState({radios: radioStore}) const allChecked = isAllChecked(radioStore, this.state.from, this.state.to) - this.setState({submitDisabled: !allChecked}) + this.setState({submitDisabled: !allChecked, percent: percent}) + } + + async switchTest (e) { + const selectedTest = e.target.getAttribute('id') + const data = await getData(`${config.dataUrl}?page=1&lang=en&testType=${selectedTest}&limit=${config.defaultLimit}`) + this.setState({ ...data, lang: 'en', choosenTest: selectedTest }) } async switchLanguage (e) { @@ -86,7 +98,8 @@ export default class TheTest extends React.Component { e.preventDefault() if (this.state.next) { const data = await getData(`${this.state.next}&lang=${this.state.lang}&testType=${this.state.choosenTest}&limit=${config.defaultLimit}`) - this.setState({ ...data, submitDisabled: true }) + const allChecked = isAllChecked(this.state.radios, data.from, data.to) + this.setState({ ...data, submitDisabled: !allChecked }) window.scrollTo(0, 0) // Scrolls to top of page } else { this.setState({ submitDisabled: true, loading: true, hideMain: true }) @@ -116,14 +129,14 @@ export default class TheTest extends React.Component { return (
- +
- + { this.state.questions.map(q => diff --git a/config/index.js b/config/index.js index ec60d5a..e909649 100644 --- a/config/index.js +++ b/config/index.js @@ -5,5 +5,6 @@ module.exports = { generatorUrl: process.env.GENERATOR_URL || 'https://generator.bigfive.maccyber.io', defaultLanguage: process.env.DEFAULT_LANG || 'en', defaultLimit: parseInt(process.env.DEFAULT_LIMIT) || 5, - defaultTest: process.env.DEFAULT_TEST || 120 + defaultTest: process.env.DEFAULT_TEST || '120', + ipCountryUrl: process.env.IP_COUNTRY_URL || 'https://api.ip2country.info/ip?' } diff --git a/layouts/index.js b/layouts/index.js index d8afd9d..6c5ba5e 100644 --- a/layouts/index.js +++ b/layouts/index.js @@ -1,7 +1,7 @@ import React from 'react' import Head from 'next/head' -export default ({pageTitle, children}) => ( +export default ({pageTitle, isIE11, children}) => (
@@ -9,6 +9,10 @@ export default ({pageTitle, children}) => ( {pageTitle} +