From 07eaf85455685a373215450db3f6ae4f354ea821 Mon Sep 17 00:00:00 2001
From: sangjunp4rk <sp3394@columbia.edu>
Date: Tue, 2 Jul 2019 13:10:20 -0700
Subject: [PATCH 1/3] return if keypressed is underfined so it doesnt throw
 indexof error

---
 package.json                      | 1 +
 src/components/TutorialContent.js | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 32784ff29..ee7b640c1 100644
--- 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/components/TutorialContent.js b/src/components/TutorialContent.js
index 1e980bb28..38aab116d 100644
--- a/src/components/TutorialContent.js
+++ b/src/components/TutorialContent.js
@@ -199,6 +199,8 @@ class LessonTutorialContent extends Component {
       shouldShowModal
     } = this.state;
 
+    if(typeof keyPressed === 'undefined') 
+      return;
     // Arrow key pressed; ignore.
     if(keyPressed.indexOf('Arrow') !== -1)
       return;

From bb9591b13792f575bb19907a7965de81110b4e3c Mon Sep 17 00:00:00 2001
From: sangjunp4rk <sp3394@columbia.edu>
Date: Tue, 2 Jul 2019 16:30:49 -0700
Subject: [PATCH 2/3] styling changes

---
 src/GameSelect.js             |  8 ++++++--
 src/style/TutorialContent.css | 20 ++++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/GameSelect.js b/src/GameSelect.js
index 00bd08866..66a5f548f 100644
--- 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/style/TutorialContent.css b/src/style/TutorialContent.css
index 203833280..5510ea235 100644
--- 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%;
     }
 }
\ No newline at end of file

From 3c6bb333fb8f7e0fc2ec213b1dbde3e2120f7385 Mon Sep 17 00:00:00 2001
From: sangjunp4rk <sp3394@columbia.edu>
Date: Tue, 2 Jul 2019 20:52:09 -0700
Subject: [PATCH 3/3] set missed warning modal for tutorial to automatic
 countdown

---
 src/components/TutorialContent.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/TutorialContent.js b/src/components/TutorialContent.js
index 38aab116d..e4c601334 100644
--- 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
     };
   }
 
@@ -306,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 = () => {
@@ -344,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}/>