feat: full flow complete

gatsby-config.js

@@ -25,7 +25,7 @@ module.exports = {
         background_color: `#663399`,
         theme_color: `#663399`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
       },
     },
     // this (optional) plugin enables Progressive Web App + Offline functionality

package.json

@@ -18,7 +18,8 @@
     "react-countdown-circle-timer": "^1.1.1",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
-    "react-particles-js": "^2.7.1"
+    "react-particles-js": "^2.7.1",
+    "react-share": "^4.1.0"
   },
   "devDependencies": {
     "axios": "^0.19.2",

src/components/progress-bar.js

@@ -2,7 +2,7 @@ import PropTypes from "prop-types"
 import React from "react"
 
 import { GetPercentage } from "../utils/style"
-import styles from "./progress-bar.module.css"
+import styles from "../styles/progress-bar.module.css"
 
 const generateCircles = (count, key) => (
     <>

src/components/result.js

@@ -0,0 +1,134 @@
+import React, { Component } from "react"
+import {
+	WhatsappShareButton,
+	WhatsappIcon,
+	TelegramShareButton,
+	TelegramIcon,
+	FacebookShareButton,
+	FacebookIcon,
+	// FacebookMessengerShareButton,
+	// FacebookMessengerIcon
+} from "react-share"
+
+import tick from "../images/tick.svg"
+import cross from "../images/cross.svg"
+import Constants from "../constants/config"
+import logo from "../jsons/team-logo.json"
+import styles from "../styles/template.module.css"
+import styles2 from "../styles/result.module.css"
+
+class ResultPage extends Component {
+	state = {
+		correct: 0
+	}
+	componentDidMount() {
+		this.setState(() => {
+			return {
+				correct: this.props.result.filter(
+					({ player_name, answer }) => player_name.toLowerCase() === answer.toLowerCase()
+				).length
+			}
+		})
+	}
+
+	renderPage = (result) => (
+		<div className={styles2.resultWrapper}>
+			<div className={styles2.title}>
+				You got {`${this.state.correct} / ${result.length}`}
+			</div>
+			<div>
+				{
+					result.map(quesObj => {
+						return (
+							<div key={`${quesObj.player_name}`} className={styles2.answerRows}>
+								<div className={styles2.logoList}>
+									{
+										quesObj.teams.map((name, index) => (
+											<div key={`${name}_${index}`} className={styles.logo}>
+												{
+													index !== 0 &&
+													<>
+														<div className={styles2.bar} />
+														<div className={styles2.right} />
+													</>
+												}
+												<img
+													className={styles2.teamLogo}
+													src={logo[name]}
+													alt={`${name} logo`}
+												/>
+											</div>
+										))
+									}
+								</div>
+								<div className={styles2.answerWrapper}>
+									<div>
+										Your answer:&nbsp;<span>{quesObj.answer}</span>
+										{
+											quesObj.player_name.toLowerCase() === quesObj.answer
+												? <img className={styles2.status} src={tick} alt="Correct answer" />
+												: <img className={styles2.status} src={cross} alt="Wrong answer" />
+										}
+									</div>
+									{
+										quesObj.player_name.toLowerCase() !== quesObj.answer &&
+										<div>
+											Correct answer:&nbsp;<span>{quesObj.player_name}</span>
+										</div>
+									}
+								</div>
+							</div>
+						)
+					})
+				}
+			</div>
+			<div className={styles2.buttonWrapper}>
+				<div
+					role="button"
+					className={styles.button}
+					tabIndex={0}
+					onClick={() => window.location.reload()}
+					onKeyPress={()=> window.location.reload()}
+				>
+					Play again
+				</div>
+				<div className={styles2.shareButtonWrapper}>
+					Share it with your friends
+					<div>
+						<WhatsappShareButton
+							url={window.location.href}
+							title={Constants.SHARE_LINK_TITLE}
+							separator=": "
+						>
+							<WhatsappIcon size={32} round />
+						</WhatsappShareButton>
+						{/* <FacebookMessengerShareButton
+							url={window.location.href}
+							appId={Constants.APP_ID}
+						>
+							<FacebookMessengerIcon size={32} round />
+						</FacebookMessengerShareButton> */}
+						<FacebookShareButton
+							url={window.location.href}
+							quote={Constants.SHARE_LINK_TITLE}
+						>
+							<FacebookIcon size={32} round />
+						</FacebookShareButton>
+						<TelegramShareButton
+							url={window.location.href}
+							title={Constants.SHARE_LINK_TITLE}
+						>
+							<TelegramIcon size={32} round />
+						</TelegramShareButton>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+
+	render() {
+		return this.renderPage(this.props.result);
+	}
+}
+
+export default ResultPage

src/components/seo.js

@@ -33,7 +33,7 @@ function SEO({ description, lang, meta, title }) {
         lang,
       }}
       title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      titleTemplate={site.siteMetadata.title}
       meta={[
         {
           name: `description`,

src/components/template.js

@@ -0,0 +1,137 @@
+import React, { Component } from "react"
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+
+import Layout from "./layout"
+import ProgressBar from "./progress-bar"
+import SEO from "./seo"
+import Result from "./result"
+import Constants from "../constants/config"
+import { GetQuizQuestionIndexes } from "../utils/style"
+import list from "../jsons/transfer.json"
+import logo from "../jsons/team-logo.json"
+import styles from "../styles/template.module.css"
+
+const selectedIndex = GetQuizQuestionIndexes(Constants.NUMBER_OF_QUESTIONS, list.length)
+const data = selectedIndex.map(value => list[value])
+
+const renderTime = value => {
+	if (value === 0) {
+		return <div className="timer">Too late...</div>;
+	}
+
+	return (
+		<div className={styles.timer}>
+			<div className={styles.text}>Remaining</div>
+			<div className={styles.value}>{value}</div>
+			<div className={styles.text}>seconds</div>
+		</div>
+	);
+};
+
+class Template extends Component {
+	state = {
+		currentQuestion: 0,
+		currentAnswer: ""
+	}
+
+	renderPage = () => (
+		<Layout>
+			<SEO title="Home" />
+			<div className={styles.wrapperBox}>
+				{
+					this.state.currentQuestion < Constants.NUMBER_OF_QUESTIONS &&
+					<>
+						<div className={styles.progressWrapper}>
+							<ProgressBar current={this.state.currentQuestion + 1} total={data.length} />
+						</div>
+						<div className={styles.contentWrapper}>
+							<span className={styles.heading}>Who am I?</span>
+							<div className={styles.logoWrapper}>
+								{
+									data[this.state.currentQuestion].teams.map((name, index) => (
+										<div key={`${name}_${index}`} className={styles.logo}>
+											{index !== 0 && <><div className={styles.bar} /><div className={styles.right} /></>}
+											<img className={styles.teamLogo} src={logo[name]} alt={`${name} logo`} />
+										</div>
+									))
+								}
+							</div>
+							<CountdownCircleTimer
+								isPlaying
+								durationSeconds={Constants.TIME_FOR_EACH_QUESTION}
+								colors={[["#00AA00", 0.5], ["#A30000"]]}
+								renderTime={renderTime}
+								strokeWidth={5}
+								size={140}
+								onComplete={() => {
+									this.input.disabled = true
+									setTimeout(() => this.goToNextQuestion(), Constants.TIME_INTERVAL_BETWEEN_QUESTIONS)
+									return [false, Constants.TIME_INTERVAL_BETWEEN_QUESTIONS]
+								}}
+								key={this.state.currentQuestion}
+							/>
+							<div className={styles.inputWrapper}>
+								I am
+                <input
+									list="players"
+									name="input_player"
+									ref={input => { this.input = input; return input && input.focus() }}
+									className={styles.input}
+									type="text"
+									value={this.state.currentAnswer}
+									onChange={(evt) => {
+										this.saveInput(evt.target.value)
+									}}
+								/>
+								<datalist id="players">
+									{
+										data.map(({ player_name }) => <option key={player_name} value={player_name} />)
+									}
+								</datalist>
+							</div>
+							<div
+								role="button"
+								className={styles.button}
+								tabIndex={0}
+								onClick={this.goToNextQuestion}
+								onKeyPress={this.goToNextQuestion}
+							>
+								Next
+              </div>
+						</div>
+					</>
+				}
+				{
+					this.state.currentQuestion === Constants.NUMBER_OF_QUESTIONS &&
+					<Result result={data} />
+				}
+			</div>
+		</Layout>
+	)
+
+	goToNextQuestion = () => {
+		const { currentAnswer, currentQuestion } = this.state
+		data[currentQuestion].answer = currentAnswer
+		this.input.disabled = false
+		this.setState((prevState) => {
+			return {
+				currentQuestion: prevState.currentQuestion + 1,
+				currentAnswer: ""
+			};
+		})
+	}
+
+	saveInput = (value) => {
+		this.setState(() => {
+			return {
+				currentAnswer: value
+			}
+		})
+	}
+
+	render() {
+		return this.renderPage();
+	}
+}
+
+export default Template

src/constants/config.js

@@ -1,9 +1,13 @@
 const NUMBER_OF_QUESTIONS = 10
 const TIME_FOR_EACH_QUESTION = 15
 const TIME_INTERVAL_BETWEEN_QUESTIONS = 1500
+const SHARE_LINK_TITLE = "Play football player transfer quiz at"
+const APP_ID = "2893375807395705"
 
 export default {
     NUMBER_OF_QUESTIONS,
     TIME_FOR_EACH_QUESTION,
-    TIME_INTERVAL_BETWEEN_QUESTIONS
+    TIME_INTERVAL_BETWEEN_QUESTIONS,
+    SHARE_LINK_TITLE,
+    APP_ID
 }