\r\n \r\n
\r\n
\r\n \r\n \r\n {selected !== null ? selectedTrail.data.title : ''}
\r\n\r\n
{selected !== null ? selectedTrail.data.introduction_body_content : ''}
\r\n Next\r\n\r\n
\r\n
\r\n \r\n );\r\n };\r\n\r\n const renderQuestionInformation = () => {\r\n const questionCount = currentTrail.data.totalQuestions;\r\n\r\n return (\r\n \r\n
{`Your Points: ${points !== undefined && !Number.isNaN(points.current) ? points.current : 0}`}
\r\n\r\n
\r\n\r\n {this.question.question}\r\n \r\n
\r\n );\r\n };\r\n\r\n const renderAnswers = () => (\r\n {currentTrail.data.title}
\r\n\r\n
\r\n {`Question ${this.question.number}:`}\r\n {`${this.question.number}/${questionCount}`}\r\n
\r\n \r\n {this.answers.map((answer) => {\r\n // IF the answer we're looping through has been included and is incorrect show this state\r\n let extraClasses = '';\r\n\r\n let style = {\r\n borderColor: currentTrail.data.colors.secondary_tint,\r\n };\r\n\r\n if (gameState.answersGiven.includes(answer) && answer !== this.question.correct_answer) {\r\n extraClasses += 'multiple-choice-question__answer--no';\r\n style = {\r\n backgroundColor: currentTrail.data.colors.primary,\r\n borderColor: currentTrail.data.colors.primary,\r\n };\r\n }\r\n\r\n if (answer === gameState.selectedAnswer) {\r\n extraClasses += ' multiple-choice-question__answer--selected ';\r\n }\r\n\r\n if (answer === this.question.correct_answer && gameState.correct === true) {\r\n extraClasses += 'multiple-choice-question__answer--yes';\r\n style = {\r\n backgroundColor: currentTrail.data.colors.primary,\r\n borderColor: currentTrail.data.colors.primary,\r\n };\r\n }\r\n\r\n if (gameState.answersGiven.includes(answer) && answer !== this.question.correct_answer) {\r\n return (\r\n \r\n Oops, incorrect! Try again\r\n
\r\n );\r\n }\r\n\r\n if (answer === this.question.correct_answer && gameState.correct === true) {\r\n const pluralise = this.question.available_points[gameState.attempts - 1] === 1\r\n ? 'Point'\r\n : 'Points';\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n\r\n return (\r\n \r\n Continue\r\n
\r\n );\r\n }\r\n\r\n if (gameState.correct === true) {\r\n return (\r\n \r\n \r\n {renderPreviousLocationButton()}\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n \r\n {renderPreviousLocationButton()}\r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n const renderQuestion = () => (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nNextLocation.propTypes = {\r\n gameState: PropTypes.shape({\r\n currentQuestion: PropTypes.number,\r\n attempts: PropTypes.number,\r\n selectedAnswer: PropTypes.any,\r\n answersGiven: PropTypes.arrayOf(PropTypes.string),\r\n correct: PropTypes.any,\r\n points: PropTypes.number,\r\n }),\r\n currentTrail: PropTypes.objectOf(PropTypes.any),\r\n updateGameState: PropTypes.func,\r\n};\r\n\r\nNextLocation.defaultProps = {\r\n gameState: {},\r\n currentTrail: {},\r\n updateGameState: () => {},\r\n};\r\n\r\nexport default NextLocation;\r\n","import React, { Component, Fragment } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Button from 'react-bootstrap/Button';\r\nimport NextLocation from './NextLocation';\r\nimport { GlobalContext } from '../../store/global';\r\n\r\nconst ChallengeQuestion = class ChallengeQuestion extends Component {\r\n static contextType = GlobalContext;\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n showLocation: false,\r\n seen: false,\r\n };\r\n\r\n this.challenge = props.currentTrail.data.questions[props.gameState.currentQuestion];\r\n }\r\n\r\n getTrailAvatarPath = () => {\r\n const { currentTrail } = this.props;\r\n\r\n if (currentTrail.data !== undefined) {\r\n return require(`../../assets/images/avatars/${currentTrail.data.avatar}`);\r\n }\r\n\r\n return null;\r\n };\r\n\r\n yes = () => {\r\n const { awardPoints } = this.context;\r\n const { currentTrail, gameState, updateGameState } = this.props;\r\n\r\n updateGameState({\r\n ...gameState,\r\n correct: true,\r\n showAwardedBadgeOnNextScreen: true,\r\n });\r\n\r\n awardPoints(currentTrail.key, this.challenge.available_points);\r\n };\r\n\r\n no = () => {\r\n const { gameState, updateGameState } = this.props;\r\n\r\n updateGameState({\r\n ...gameState,\r\n correct: false,\r\n showAwardedBadgeOnNextScreen: false,\r\n });\r\n };\r\n\r\n challengeSuccessMessage = () => {\r\n if (this.challenge.success_message !== undefined && this.challenge.success_message !== '') {\r\n return (\r\n \r\n
\r\n {introductionText}\r\n\r\n {renderPreviousLocationButton()}\r\n \r\n \r\n
\r\n \r\n Next location
\r\n\r\n {introductionText}\r\n
{this.challenge.success_message}
\r\n );\r\n }\r\n\r\n return (\r\nfor completing this challenge.
\r\n );\r\n }\r\n\r\n advanceToNextQuestion = () => {\r\n const { gameState, updateGameState } = this.props;\r\n const nextQuestion = gameState.currentQuestion + 1;\r\n\r\n updateGameState({\r\n currentQuestion: nextQuestion,\r\n attempts: 0,\r\n selectedAnswer: null,\r\n correct: null,\r\n seenFunFact: false,\r\n answersGiven: [],\r\n shuffled: false,\r\n });\r\n };\r\n\r\n showChallenge = () => this.setState({ showLocation: false, seen: true });\r\n\r\n render() {\r\n const { currentTrail, gameState } = this.props;\r\n const { showLocation } = this.state;\r\n\r\n const renderChallenge = () => (\r\n\r\n
\r\n {gameState.correct === null && (\r\n \r\n
\r\n
\r\n this.yes()}\r\n >\r\n Yes\r\n \r\n this.no()}\r\n >\r\n No\r\n \r\n
\r\n )}\r\n {gameState.correct === true && (\r\n Challenge
\r\n\r\n
{this.challenge.challenge}
\r\n\r\n
Have you completed the challenge?
\r\n\r\n
\r\n
\r\n Challenge
\r\n\r\n
\r\n
\r\n Well Done!
\r\n {this.challengeSuccessMessage()}\r\n\r\n \r\n
\r\n You have been awarded:
\r\n10 points
\r\n\r\n \r\n \r\n )}\r\n {gameState.correct === false && (\r\n
\r\n
\r\n \r\n Didn’t feel like doing that one?\r\n Don’t worry! Try the next one to win more points.\r\n
\r\n \r\n\r\n Continue\r\n
\r\n );\r\n }\r\n return (\r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n \r\n {this.showCloseButton()}\r\n
\r\n \r\n
\r\n
\r\n \r\n {funFactImage()}\r\n
\r\n Fun Fact
\r\n\r\n
Did you know?
\r\n{this.fun_fact.fun_fact}
\r\n {this.showResultsButton()}\r\n\r\n
\r\n
\r\n \r\n {completedTrail.title}
\r\n\r\n
Congratulations!
\r\nYou have successfully scored:
\r\n\r\n
\r\n Points:
\r\n{`${pointsAchieved()}/${maximumPointsAvailable}`}
\r\nNow click the ‘Eye’ symbol to tick off any interesting things you might have spotted on your journey!
\r\nFor more stories about the city told through the eyes of animals, visit Beasts of London at the Museum of London
\r\n Find out more\r\n { renderNextButton() }\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nNextLocation.propTypes = {\r\n trails: PropTypes.arrayOf(PropTypes.object),\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n trail: PropTypes.string,\r\n }),\r\n }),\r\n};\r\n\r\nNextLocation.defaultProps = {\r\n trails: {},\r\n match: {},\r\n};\r\n\r\nexport default NextLocation;\r\n","import React, { Fragment, useContext } from 'react';\r\nimport { withRouter } from 'react-router-dom';\r\nimport PropTypes from 'prop-types';\r\nimport ReactSVG from 'react-svg';\r\nimport { GlobalContext } from '../../store/global';\r\nimport MileIcon from '../../assets/svgs/cm-logo-neg-rgb.svg';\r\nimport BackIcon from '../../assets/svgs/arw-left-white.svg';\r\n\r\nconst LeftHandNavigationComponent = (props) => {\r\n const {\r\n setWarningOverlayToggle,\r\n } = useContext(GlobalContext);\r\n const { showLogo, location, history } = props;\r\n\r\n const showWarningRegex = new RegExp('^/trail/([a-z]+)/?$');\r\n\r\n const trailIntroductionRegex = new RegExp('^/trail-introduction/([a-z]+)/?$');\r\n\r\n const showWarning = () => {\r\n if (location.pathname.match(showWarningRegex) !== null) {\r\n setWarningOverlayToggle(true);\r\n\r\n return;\r\n }\r\n\r\n if (location.pathname.match(trailIntroductionRegex) !== null) {\r\n return history.push('/trail-detail');\r\n }\r\n\r\n switch(location.pathname) {\r\n case '/select-trail':\r\n return history.push('/');\r\n break;\r\n case '/trail-detail':\r\n return history.push('/select-trail');\r\n break;\r\n default:\r\n return history.goBack();\r\n }\r\n\r\n };\r\n\r\n const renderLeftHandSideIcon = () => {\r\n if (showLogo === true || location.pathname.match(showWarningRegex) !== null) {\r\n return (\r\n \r\n
\r\n
\r\n \r\n Next location
\r\n\r\n
{nextLocation !== null ? location.data.summary_body_content : ''}
\r\n {renderNextButton()}\r\n{introOverlayDetails.title}
\r\n\r\n
{introOverlayDetails.subtitle}
\r\n {introductionText}\r\n \r\n\r\n 
\r\n
\r\n );\r\n};\r\n\r\nEyeSpyTask.propTypes = {\r\n task: PropTypes.objectOf(PropTypes.any),\r\n};\r\n\r\nEyeSpyTask.defaultProps = {\r\n task: [],\r\n};\r\n\r\nexport default EyeSpyTask;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Container from 'react-bootstrap/Container';\r\nimport { Col, Row } from 'react-bootstrap';\r\nimport ReactSVG from 'react-svg';\r\nimport Slider from 'react-slick';\r\n\r\nimport EyeSpyTask from './EyeSpyTask';\r\nimport CloseIcon from '../../../assets/svgs/icn-cross.svg';\r\nimport HelpIcon from '../../../assets/svgs/icn-question-white.svg';\r\n\r\nconst EyeSpy = (props) => {\r\n const {\r\n closeOverlay,\r\n setShowContent,\r\n eyeSpies,\r\n showHelpfulHint,\r\n } = props;\r\n\r\n const close = () => {\r\n setShowContent(false);\r\n closeOverlay();\r\n };\r\n\r\n const leftArrowIcon = () => require('../../../assets/svgs/arw-left-blk.svg').toString();\r\n\r\n const rightArrowIcon = () => require('../../../assets/svgs/arw-right-blk.svg').toString();\r\n\r\n const ArrowLeft = {task.content}
\r\n {taskHasBeenFound(task.id)\r\n ? (\r\n \r\n )\r\n : (\r\n \r\n )}\r\n\r\n
\r\n
\r\n \r\n I Spy
\r\n\r\n
\r\n
\r\n On the way, I’ve seen…
\r\n\r\n
\r\n \r\n \r\n {eyeSpies.map(task => \r\n
\r\n {badgeTrailDetails.title}
\r\n\r\n
{badgeTrailDetails.subtitle}
\r\n {badgeIntroductionText}\r\n \r\n{ApplicationJson.screens.badges.bronze_award_content}
\r\n );\r\n }\r\n if (currentBadgeAwarded === 'silver') {\r\n return (\r\n{ApplicationJson.screens.badges.bronze_award_content}
\r\n );\r\n }\r\n if (currentBadgeAwarded === 'gold') {\r\n return (\r\n{ApplicationJson.screens.badges.bronze_award_content}
\r\n );\r\n }\r\n }\r\n return null;\r\n };\r\n\r\n return (\r\n\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nBadge.propTypes = {\r\n badge: PropTypes.objectOf(PropTypes.any),\r\n currentBadgeAwarded: PropTypes.string,\r\n};\r\n\r\nBadge.defaultProps = {\r\n badge: [],\r\n currentBadgeAwarded: '',\r\n};\r\n\r\nexport default Badge;\r\n","import React, { useContext, useEffect } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Col, Row } from 'react-bootstrap';\r\nimport ScrollMenu from 'react-horizontal-scrolling-menu';\r\nimport ReactSVG from 'react-svg';\r\nimport { GlobalContext } from '../../../store/global';\r\nimport Badge from './Badge';\r\n\r\nconst BadgesScroller = (props) => {\r\n const { selectedBadge, setSelectedBadge } = useContext(GlobalContext);\r\n const { badges } = props;\r\n\r\n const onSelect = (key) => {\r\n //commented out for a reason as is killing the app so need to debug @TODO\r\n //setSelectedBadge(parseInt(key, 10));\r\n };\r\n\r\n useEffect(() => {\r\n setSelectedBadge(1);\r\n }, [setSelectedBadge]);\r\n\r\n const leftArrowIcon = () => {\r\n return require(`../../../assets/svgs/arw-left-blk.svg`).toString();\r\n };\r\n\r\n const rightArrowIcon = () => {\r\n return require(`../../../assets/svgs/arw-right-blk.svg`).toString();\r\n };\r\n\r\n const ArrowLeft = \r\n
\r\n \r\n
\r\n \r\n \r\n {showBadgeMessage()}\r\n {\r\n Object.keys(badge.badges).map((key, i) => {\r\n return (\r\n
\r\n
\r\n \r\n
\r\n );\r\n })\r\n }\r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nBadgesScroller.propTypes = {\r\n badges: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n key: PropTypes.string,\r\n data: PropTypes.object,\r\n image: PropTypes.string,\r\n icon: PropTypes.string,\r\n title: PropTypes.string,\r\n }),\r\n ),\r\n};\r\n\r\nBadgesScroller.defaultProps = {\r\n badges: [],\r\n};\r\n\r\nexport default BadgesScroller;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Container, Row, Col } from 'react-bootstrap';\r\nimport ReactSVG from 'react-svg';\r\nimport BadgesScroller from './BadgesScroller';\r\nimport CloseIcon from '../../../assets/svgs/icn-cross.svg';\r\nimport HelpIcon from '../../../assets/svgs/icn-question-white.svg';\r\n\r\nconst BadgesList = (props) => {\r\n const {\r\n closeOverlay,\r\n badges,\r\n badgeTrailDetails,\r\n showHelpfulHint,\r\n } = props;\r\n\r\n const badgeIntroductionImage = () => {\r\n if (badgeTrailDetails.image.length === 0) {\r\n return null;\r\n }\r\n\r\n const badgeIcon = () => {\r\n return require(`../../../assets/svgs/${badgeTrailDetails.image}`).toString();\r\n };\r\n return (\r\n \r\n
\r\n Badges
\r\n\r\n
Are you sure?
\r\n\r\n
Just checking
\r\n {bodyText}\r\n\r\nBadges
\r\n\r\n