Merge branch 'offline' of github.com:codephil-columbia/typephil into …

…offline
codephil-columbia · Jul 3, 2019 · 62e1a4e · 62e1a4e
2 parents 641278e + 3c6bb33
commit 62e1a4e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "promise": "8.0.1",
     "rc-progress": "^2.2.5",
     "react": "^16.4.0",
+    "react-addons-pure-render-mixin": "^15.6.2",
     "react-button": "^1.2.1",
     "react-button-component": "^1.0.0",
     "react-buttons": "0.0.11",

diff --git a/src/GameSelect.js b/src/GameSelect.js
@@ -80,6 +80,10 @@ const InstructionsHeader = styled.div`
 	font-size: 2.5rem;
 	font-weight: bold;
 	color: #52B094;
+
+	@media only screen and (max-width: 1150px) {
+		padding-top: 2vh;
+	}
 `
 
 const InstructionsDescription = styled.div`
@@ -94,8 +98,8 @@ const GameScreenshot = styled.div`
 	padding-left: 10vw;
 
 	@media only screen and (max-width: 1150px) {
-		padding-right: 5vw;
-		padding-left: 5vw;
+		padding-right: 10vw;
+		padding-left: 10vw;
 	}
 `
 

diff --git a/src/components/TutorialContent.js b/src/components/TutorialContent.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import Modal from 'react-modal';
 import { OrderedMap } from 'immutable';
+import styled from 'styled-components'
 
 import LessonTutorialHandsKeyboard from './TutorialHandsKeyboard';
 
@@ -16,6 +17,12 @@ const HIGHLIGHTED = "highlighted character";
 const CORRECT = "correct";
 const INCORRECT = "incorrect";
 
+const ModalCountDownDiv = styled.div`
+  font-size: 3.5rem;
+  font-weight: bold;
+  color: #F5A623;
+  padding-bottom: 1rem;
+`
 
 class LessonTutorialContent extends Component {
   constructor(props) {
@@ -35,6 +42,9 @@ class LessonTutorialContent extends Component {
 
     const totalLength = currentContent.length;
 
+    this.closeModal=this.closeModal.bind(this);
+    this.modalCountdown = this.modalCountdown.bind(this)
+
     this.state = {
       rows,
       characterMapList,
@@ -56,7 +66,8 @@ class LessonTutorialContent extends Component {
       startTime: 0,
       finishTime: 0,
       pauses: [],
-      time: 0
+      time: 0,
+      modelCount: 5
     };
   }
 
@@ -199,6 +210,8 @@ class LessonTutorialContent extends Component {
       shouldShowModal
     } = this.state;
 
+    if(typeof keyPressed === 'undefined') 
+      return;
     // Arrow key pressed; ignore.
     if(keyPressed.indexOf('Arrow') !== -1)
       return;
@@ -304,11 +317,22 @@ class LessonTutorialContent extends Component {
     this.setState({ shouldShowModal: false, pauses });
   };
 
+  modalCountdown() {
+    this.setState({modelCount:this.state.modelCount-1})
+  }
+
   onModalOpen = () => {
     this.removeEventListener();
     let { pauses } = this.state;
     pauses.push(Date.now());
     this.setState({ pauses })
+    let ref = setInterval(this.modalCountdown, 1000)
+    setTimeout(() => {
+      clearInterval(ref)
+      this.setState({modelCount:5})
+      this.setState({consecutiveIncorrectCount:0})
+      this.closeModal()
+    }, 5000)
   }
 
   removeEventListener = () => {
@@ -342,8 +366,8 @@ class LessonTutorialContent extends Component {
           onAfterOpen={this.onModalOpen}
           className="tutorial-modal"
         >
-          <p className="modal-text">You missed more than <br/><strong><u>5 keys</u></strong> in a row. <br/>Please go back and correct <br/>the mistyped keys!</p>
-          <button onClick={this.closeModal} className="button-primary solid modal-button" type="submit" value="CLOSE">OKAY</button>
+          <p className="modal-text">You missed more than <br/><strong><u>5 keys</u></strong> in a row. <br/>Please focus on accuracy!</p>
+          <ModalCountDownDiv>{this.state.modelCount}</ModalCountDownDiv>
         </Modal>
         { rows }
         <LessonTutorialHandsKeyboard currentKey={currentKey}/>

diff --git a/src/style/TutorialContent.css b/src/style/TutorialContent.css
@@ -66,16 +66,16 @@
 @media only screen and (max-width: 1300px) {
     .tutorial-words {
         font-size: 4.5rem;
-        margin-left: 13%;
-        margin-right: 13%;
+        margin-left: 10%;
+        margin-right: 10%;
     }
 }
 
 @media only screen and (max-width: 1150px) {
     .tutorial-words {
         font-size: 4rem;
-        margin-left: 7%;
-        margin-right: 7%;
+        margin-left: 3%;
+        margin-right: 3%;
     }
 
     .modal-text {
@@ -90,7 +90,15 @@
 
     .tutorial-words {
         font-size: 3.5rem;
-        margin-left: 1%;
-        margin-right: 1%;
+        margin-left: 0%;
+        margin-right: 0%;
+    }
+}
+
+@media only screen and (max-width: 850px) {
+    .tutorial-words {
+        font-size: 2.8rem;
+        margin-left: 0%;
+        margin-right: 0%;
     }
 }