fixes tests

app/components/flash-card/component.js

@@ -1,87 +1,9 @@
 import Ember from 'ember';
-import _ from 'lodash';
-
-const TONE_REGEX = /([aeiouAEIOU][1234])/g;
-
-const TONE_MAPPING = {
-  "a1": "ā",
-  "a2": "á",
-  "a3": "ǎ",
-  "a4": "à",
-
-  "A1": "Ā",
-  "A2": "Á",
-  "A3": "Ǎ",
-  "A4": "À",
-
-  "e1": "ē",
-  "e2": "é",
-  "e3": "ě",
-  "e4": "è",
-
-  "E1": "Ē",
-  "E2": "É",
-  "E3": "Ě",
-  "E4": "È",
-
-  "i1": "ī",
-  "i2": "í",
-  "i3": "ǐ",
-  "i4": "ì",
-
-  "I1": "Ī",
-  "I2": "Í",
-  "I3": "Ǐ",
-  "I4": "Ì",
-
-  "o1": "ō",
-  "o2": "ó",
-  "o3": "ǒ",
-  "o4": "ò",
-
-  "O1": "Ō",
-  "O2": "Ó",
-  "O3": "Ǒ",
-  "O4": "Ò",
-
-  "u1": "ū",
-  "u2": "ú",
-  "u3": "ǔ",
-  "u4": "ù",
-
-  "U1": "Ū",
-  "U2": "Ú",
-  "U3": "Ǔ",
-  "U4": "Ù"
-};
 
 export default Ember.Component.extend({
   classNames: ['card-2', 'stretch'],
 
-  setSelection(elm, start, end) {
-    elm.selectionStart = start;
-    elm.selectionEnd = end;
-  },
-
   actions: {
-    processChange(model, str) {
-      const editor = this.$(".pinyinEditor")[0];
-      let cursorPosition = editor.selectionStart;
-      let newStr = str;
-      const matches = str.match(TONE_REGEX);
-
-      if(!_.isEmpty(matches)) {
-        newStr = str.replace(TONE_REGEX, match => TONE_MAPPING[match]);
-        cursorPosition = cursorPosition - matches.length;
-      }
-
-      model.set("text", newStr);
-
-      this.get("saveModel")(model);
-
-      Ember.run.scheduleOnce('afterRender', this, this.setSelection, editor, cursorPosition, cursorPosition);
-    },
-
     handleUpdate(model, str) {
       model.set('text', str);
       this.get("saveModel")(model);

app/components/flash-card/template.hbs

@@ -25,14 +25,9 @@
   </div>
 
   <div class="col inputContainer">
-    {{one-way-textarea model.pinyin.text
+    {{inputs/pinyin-input model.pinyin.text
         placeholder='Pinyin...'
-        class="pinyinEditor"
-        update=(action 'processChange' model.pinyin)
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck=false}}
+        update=(action "handleUpdate" model.pinyin)}}
   </div>
 
   <div class="col inputContainer">

app/components/inputs/pinyin-input/component.js

@@ -0,0 +1,97 @@
+import Ember from 'ember';
+import _ from 'lodash';
+
+const TONE_REGEX = /([aeiouAEIOU][1234])/g;
+
+const TONE_MAPPING = {
+  "a1": "ā",
+  "a2": "á",
+  "a3": "ǎ",
+  "a4": "à",
+
+  "A1": "Ā",
+  "A2": "Á",
+  "A3": "Ǎ",
+  "A4": "À",
+
+  "e1": "ē",
+  "e2": "é",
+  "e3": "ě",
+  "e4": "è",
+
+  "E1": "Ē",
+  "E2": "É",
+  "E3": "Ě",
+  "E4": "È",
+
+  "i1": "ī",
+  "i2": "í",
+  "i3": "ǐ",
+  "i4": "ì",
+
+  "I1": "Ī",
+  "I2": "Í",
+  "I3": "Ǐ",
+  "I4": "Ì",
+
+  "o1": "ō",
+  "o2": "ó",
+  "o3": "ǒ",
+  "o4": "ò",
+
+  "O1": "Ō",
+  "O2": "Ó",
+  "O3": "Ǒ",
+  "O4": "Ò",
+
+  "u1": "ū",
+  "u2": "ú",
+  "u3": "ǔ",
+  "u4": "ù",
+
+  "U1": "Ū",
+  "U2": "Ú",
+  "U3": "Ǔ",
+  "U4": "Ù"
+};
+
+const PinyinInput = Ember.Component.extend({
+  classNames: ['pinyin-input'],
+
+  setSelection(elm, start, end) {
+    elm.selectionStart = start;
+    elm.selectionEnd = end;
+  },
+
+  actions: {
+    processTones(str) {
+      const editor = this.$("textarea")[0];
+      let cursorPosition = editor.selectionStart;
+      let newStr = str;
+      const matches = str.match(TONE_REGEX);
+
+      if(!_.isEmpty(matches)) {
+        newStr = str.replace(TONE_REGEX, match => TONE_MAPPING[match]);
+        cursorPosition = cursorPosition - matches.length;
+      }
+
+      this.get("update")(newStr);
+
+      Ember.run.scheduleOnce('afterRender', this, this.setSelection, editor, cursorPosition, cursorPosition);
+    },
+
+    processKeydown(e) {
+      if(e.code === "Enter") {
+        const enterKeyFun = this.get('onReturn');
+        if(enterKeyFun !== undefined) {
+          e.preventDefault();
+          enterKeyFun(this.get('value'));
+        }
+      }
+    }
+  }
+});
+
+export default PinyinInput.reopenClass({
+  positionalParams: ['value']
+});

app/components/inputs/pinyin-input/template.hbs

@@ -0,0 +1,9 @@
+{{one-way-textarea value
+    placeholder=placeholder
+    class=class
+    update=(action 'processTones')
+    onkeydown=(action 'processKeydown')
+    autocomplete='off'
+    autocorrect='off'
+    autocapitalize='off'
+    spellcheck=false}}

app/components/study/modes/eng-to-pin/component.js

@@ -0,0 +1,53 @@
+import Ember from 'ember';
+
+const STRIP_PUNCTUATION = /[.,\/#!$%\^&\*;:{}=\-_?`~()]/g;
+
+export default Ember.Component.extend({
+  classNames: ['row', 'card-2'],
+  currentAnswer: '',
+
+  didInsertElement() {
+    this.$('textarea').focus();
+    window.yo = this.$;
+  },
+
+  didReceiveAttrs() {
+    this.reset();
+  },
+
+  processAnswer(isCorrect) {
+    this.set('wasAnswered', true);
+    this.set('isCorrect', isCorrect);
+
+    if(isCorrect) {
+      Ember.run.later(() => this.get('onComplete')(), 400);
+    }
+  },
+
+  reset() {
+    this.set('wasAnswered', undefined);
+    this.set('isCorrect', undefined);
+    this.set('currentAnswer', '');
+  },
+
+  actions: {
+    handleUpdate(str) {
+      this.set('wasAnswered', false);
+      this.set("currentAnswer", str);
+    },
+
+    async submit() {
+      const pinyin = await this.get('model.pinyin');
+
+      const answer = this.get('currentAnswer')
+        .replace(STRIP_PUNCTUATION, "")
+        .toLowerCase();
+
+      const solution = pinyin.get("text")
+        .replace(STRIP_PUNCTUATION, "")
+        .toLowerCase();
+
+      this.processAnswer(answer === solution);
+    }
+  }
+});

app/components/study/modes/eng-to-pin/styles.styl

@@ -0,0 +1,35 @@
+&
+  background: dope-blue
+  margin-bottom: 1em
+
+.content
+  padding: 1em
+
+.english
+  font-size: 1.3em
+  margin-bottom: 1em
+  color: white
+  height: 1.3em
+
+textarea
+  resize: none
+  font-weight: 600
+  font-size: 1.6em
+  height: 1.6em
+  width: 15em
+  border: 0
+  padding: 0.35em
+  color: rgba(slate, 0.75)
+  background: rgba(white, 0.75)
+
+.status
+  background: rgba(white, 0.7)
+  font-size: 2em
+  font-weight: 700
+  height: 2em
+
+  .incorrect
+    color: hot-pink
+
+  .correct
+    color: dope-blue

app/components/study/modes/eng-to-pin/template.hbs

@@ -0,0 +1,22 @@
+<div class="col">
+  <div class="col content">
+    <span class="english">
+      {{model.english.text}}
+    </span>
+
+    {{inputs/pinyin-input currentAnswer
+        class='solution-field'
+        onReturn=(action 'submit')
+        update=(action "handleUpdate")}}
+  </div>
+
+  {{#if wasAnswered}}
+    <div class="row center status">
+      {{#if isCorrect}}
+        <span class="correct">Correct {{fa-icon 'thumbs-up'}}</span>
+      {{else}}
+        <span class="incorrect">That was incorrect</span>
+      {{/if}}
+    </div>
+  {{/if}}
+</div>

app/components/study/study-canvas/component.js

@@ -0,0 +1,42 @@
+import Ember from 'ember';
+
+const {
+  notEmpty
+} = Ember.computed;
+
+export default Ember.Component.extend({
+  hasFlashCards: notEmpty('flashCards'),
+
+  didInsertElement() {
+    this.setupNextStudyCard();
+  },
+
+  setupNextStudyCard() {
+    const flashCards = this.get('model').toArray();
+    const current = this.get('current');
+
+    let flashCard;
+
+    if(Ember.isPresent(current)) {
+      const currentIndex = flashCards.indexOf(current.flashCard);
+      if(currentIndex + 1 > flashCards.length-1) {
+        flashCard = flashCards[0];
+      } else {
+        flashCard = flashCards[currentIndex + 1];
+      }
+    } else {
+      flashCard = flashCards[0];
+    }
+
+    this.set('current', {
+      type:'study/modes/eng-to-pin',
+      flashCard
+    });
+  },
+
+  actions: {
+    next() {
+      this.setupNextStudyCard();
+    }
+  }
+});

app/components/study/study-canvas/styles.styl

@@ -0,0 +1,2 @@
+&
+  margin: 2em

app/components/study/study-canvas/template.hbs

@@ -0,0 +1,12 @@
+<div class="col">
+  <div class="row center">
+    {{component current.type model=current.flashCard onComplete=(action 'next')}}
+  </div>
+
+  <div class="row center ui-container">
+    {{ui/icon-button
+        click=(action "next")
+        label="skip"
+        rightIcon="arrow-right"}}
+  </div>
+</div>

app/router.js

@@ -8,6 +8,7 @@ const Router = Ember.Router.extend({
 
 Router.map(function() {
   this.route('lesson', {path:'/lesson/:id'});
+  this.route('study');
 });
 
 export default Router;