Merge pull request #33 from jatin-narang/final-UI-10.1

 Refractor: Fix mobile responsiveness ui issues

client/src/components/ProfileInfo/index.js

@@ -37,7 +37,7 @@ class ProfileInfo extends React.Component {
 	}
 
 	render() {
-		const { email, password, name } = this.state;
+		const { email, name } = this.state;
 		return (
 			<div className="profile-info-container">
 				<div>

client/src/components/ProfileInfo/styles.scss

@@ -1,5 +1,6 @@
 .profile-info-container {
-	height: 27em;
+	height: 100%;
+	width: 100%;
 	border-radius: 2.5px;
 	background-color: #fafafd;
 	.profile-header {
@@ -27,29 +28,26 @@
 		color: #3e3d4a;
 	}
 	.input-container {
-		width: 25.4em;
 		text-align: center;
 	}
 	.input-label {
-		left: 3em;
-		top: 2em;
+		left: 2em;
+		top: 3em;
 		background-color: #fafafd;
 		padding: 0 .5em;
 		position: absolute;
-		width: 8em;
 		z-index: 2;
 		font-family: Georgia;
 		font-size: 20px;
 		color: #3e3d4a;
 		text-align: left;
+		margin: 0;
 	}
 	.input-label-name {
-		width: 5em;
-		top: 5.8em;
+		top: 6.8em;
 	}
 	.input-label-password {
-		width: 6.4em;
-		top: 9.6em;
+		top: 10.6em;
 	}
 	.change-password-container {
 		text-align: right;

client/src/pages/LandingPage/styles.scss

@@ -51,7 +51,7 @@
 	}
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
 	.landing-page-wrapper {
 		width: 100%;
 		background-color: #ffffff;
@@ -88,3 +88,13 @@
 		}
 	}
 }
+
+@media screen and (min-width: 220px) and (max-width: 330px) {
+	.landing-page-wrapper {
+		.landing-page-container {
+			.game-title {
+				font-size: 1.4em;
+			}
+		}
+	}
+}

client/src/pages/LevelsPage/LevelsPage.js

@@ -89,7 +89,7 @@ class LevelsPage extends React.Component {
 									key={key}
 									level={data.id}
 									moduleId={moduleId}
-									prevLevelScore={scores[data.id - 2]}
+									prevLevelScore={data.id > 1 ? scores[data.id - 2] : 0}
 									currentScore={scores[data.id - 1]}
 									parScore={parScores[data.id - 1]}
 									linkedLevel={data.linked_level}

client/src/pages/QuestionsAnsPage/QuestionsAnsPage.js

@@ -9,6 +9,7 @@ import oopsUrl from '../../images/oops.png';
 import hurreyUrl from '../../images/hurrey.png';
 import AnswerInfoPopup from '../../components/AnswerInfoPopup';
 import CorrectAnswerInfo from '../../components/CorrectAnswerInfo';
+import { fetchScores } from '../LandingPage/actions';
 import ProgressBar from '../../components/ProgressBar';
 import { connect } from 'react-redux';
 import './styles.scss';
@@ -83,15 +84,20 @@ export class QuestionsAnsPage extends React.Component {
 
 	//Handle proceed button click, answer-info dialog box rendering, option click and check for correctAns
 	handleProceedNext = () => {
+		const { questionId } = this.state;
 		this.setState((prevState) => ({
 			showAnswer: !prevState.showAnswer,
 			selectedCard: null,
 			answerClicked: 0,
 			clickedOptions: []
 		}));
+		window.scrollTo(0, 0);
 		this.handleNextClick();
 		this.handleClickOpen();
 		this.checkCorrectAnswer();
+		if (questionId === this.getTotalQuestions()) {
+			this.handleUpdateScore();
+		}
 	};
 
 	handleClick = () => {
@@ -245,6 +251,23 @@ export class QuestionsAnsPage extends React.Component {
 		return scores;
 	};
 
+	handleUpdateScore = () => {
+		let moduleId = parseInt(this.props.match.params.moduleId);
+		let level = parseInt(this.props.match.params.levelId);
+		const { currentScore } = this.state;
+		const totalScore = this.props.gameData.gameData[moduleId - 1].levels[level - 1].total_score;
+
+		let newScore = currentScore;
+		let currentLevelNewScores = this.props.gameData.scores[moduleId - 1];
+		let prevScore = currentLevelNewScores[level - 1];
+
+		currentLevelNewScores[level - 1] =
+			newScore > 0 ? (prevScore + newScore <= totalScore ? prevScore + newScore : totalScore) : prevScore;
+
+		this.props.gameData.scores[moduleId - 1] = currentLevelNewScores;
+		this.props.getScores(this.props.gameData.scores);
+	};
+
 	render() {
 		const {
 			answerClick,
@@ -260,7 +283,7 @@ export class QuestionsAnsPage extends React.Component {
 			selectedCard,
 			moduleScenario
 		} = this.state;
-		
+
 		let moduleId = parseInt(this.props.match.params.moduleId);
 		let level = parseInt(this.props.match.params.levelId);
 		const totalQuestion = this.getTotalQuestions();
@@ -423,9 +446,15 @@ const mapStateToProps = (state) => {
 	return { gameData: state.gameData };
 };
 
+const mapDispatchToProps = (dispatch) => {
+	return {
+		getScores: (scores) => dispatch(fetchScores(scores))
+	};
+};
+
 QuestionsAnsPage.propTypes = {
 	gameData: PropTypes.object,
 	match: PropTypes.object
 };
 
-export default connect(mapStateToProps, null)(QuestionsAnsPage);
+export default connect(mapStateToProps, mapDispatchToProps)(QuestionsAnsPage);