add problem and answer capabilities

app/controllers/application.js

@@ -3,11 +3,33 @@ import Ember from 'ember';
 export default Ember.Controller.extend({
   levels: [1,2,3,4],
 
-  isOn: null,
+  digits: [0,1,2,3,4,5,6,7,8,9],
 
-  level: null,
+  isRetrying: Ember.computed.gt('tryCount', 0),
 
-  mode: null,
+  problem: Ember.computed('problems', 'problemIndex', function() {
+    return this.get('problems').objectAt(this.get('problemIndex'));
+  }),
+
+  isComplete: Ember.computed('problems', 'problemIndex', function() {
+    if (Ember.isPresent(this.get('problemIndex')) && Ember.isPresent(this.get('problems'))) {
+      return this.get('problemIndex') >= this.get('problems').length;
+    }
+  }),
+
+  isAnswerComplete: Ember.computed('answer', 'problem.answer', function() {
+    if ((this.get('answer') || this.get('answer') === 0) && (this.get('problem.answer') || this.get('problem.answer') === 0)) {
+      return this.get('answer').toString().length === this.get('problem.answer').toString().length;
+    } else {
+      return false;
+    }
+  }),
+
+  isAnswerCorrect: Ember.computed('answer', 'problem.answer', function() {
+    if ((this.get('answer') || this.get('answer') === 0) && (this.get('problem.answer') || this.get('problem.answer') === 0)) {
+      return this.get('answer') === this.get('problem.answer');
+    }
+  }),
 
   actions: {
     turnOn() {
@@ -27,15 +49,58 @@ export default Ember.Controller.extend({
       }
     },
 
-    playGame() {
+    nextProblem() {
+      this.set('answer', null);
+      this.set('isAnswerLocked', false);
+      this.set('isIncorrect', false);
+      this.set('tryCount', 0);
+      if (Ember.isPresent(this.get('problemIndex'))) {
+        this.incrementProperty('problemIndex');
+      } else {
+        this.set('problemIndex', 0);
+      }
+    },
+
+    go() {
       if (this.get('isOn') && this.get('mode') === 'settings') {
         this.set('mode', 'game');
+        this.send('newGame');
+      } else {
+        if (this.get('isDisplayingAnswer')) {
+          this.toggleProperty('isDisplayingAnswer');
+          this.send('nextProblem');
+        } else if (this.get('isComplete')) {
+          this.send('newGame');
+        }
+      }
+    },
+
+    newGame() {
+      this.set('problemIndex', null);
+      this.set('correctAnswerCount', 0);
+      this.set('isDisplayingAnswer', false);
+      var problemCount = 0;
+      const problems = [];
+      while (problems.length < 3) {
+        let termOne = Math.floor(Math.random() * 10);
+        let termTwo = Math.floor(Math.random() * 10);
+        let problem = this.store.createRecord('problem', {
+          termOne: termOne,
+          termTwo: termTwo,
+          operator: this.get('operator')
+        });
+        problems.pushObject(problem);
       }
+      this.set('problems', problems);
+      this.send('nextProblem');
     },
 
     changeSettings() {
       if (this.get('isOn') && this.get('mode') === 'game') {
         this.set('mode', 'settings');
+        this.set('problems', null);
+        this.set('problemIndex', null);
+        this.set('answer', null);
       }
     },
 
@@ -48,6 +113,45 @@ export default Ember.Controller.extend({
         );
         this.set('level', nextLevel);
       }
+    },
+
+    pressDigit(digit) {
+      if (this.get('mode') === 'game' && !this.get('isAnswerLocked')) {
+        var newAnswer;
+        if (this.get('answer')) {
+          newAnswer = parseInt(`${this.get('answer')}${digit}`);
+        } else {
+          newAnswer = digit;
+        }
+        this.set('answer', newAnswer);
+        if (this.get('isAnswerComplete')) {
+          this.set('isAnswerLocked', true);
+          this.incrementProperty('tryCount');
+          if (this.get('isAnswerCorrect')) {
+            if (this.get('tryCount') === 1) {
+              this.incrementProperty('correctAnswerCount');
+            }
+            this.set('tryCount', 0);
+            Ember.run.later(this, function() {
+              this.send('nextProblem');
+            }, 500);
+          } else {
+            Ember.run.later(this, function() {
+              this.set('isIncorrect', true);
+              Ember.run.later(this, function() {
+                this.set('isIncorrect', false);
+                this.set('isAnswerLocked', false);
+                if (this.get('tryCount') === 3) {
+                  this.set('answer', this.get('problem.answer'));
+                  this.toggleProperty('isDisplayingAnswer');
+                } else {
+                  this.set('answer', null);
+                }
+              }, 1000);
+            }, 500);
+          }
+        }
+      }
     }
   }
 });

app/models/problem.js

@@ -0,0 +1,19 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  termOne: null,
+  termTwo: null,
+  operator: null,
+
+  isEvalable: Ember.computed('termOne', 'termTwo', 'operator', function() {
+    return  (this.get('termOne') || this.get('termOne') === 0) &&
+            (this.get('termTwo') || this.get('termTwo') === 0) &&
+            this.get('operator');
+  }),
+
+  answer: Ember.computed('termOne', 'termTwo', 'operator', function() {
+    if (this.get('isEvalable')) {
+      return eval(`${this.get('termOne')} ${this.get('operator')} ${this.get('termTwo')}`);
+    }
+  })
+});

app/styles/app.css

@@ -0,0 +1,26 @@
+@keyframes blink {
+  0% {
+    opacity: 1.0;
+  }
+  50% {
+    opacity: 0.0;
+  }
+  100% {
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes blink {
+  0% {
+    opacity: 1.0;
+  }
+  50% {
+    opacity: 0.0;
+  }
+  100% {
+    opacity: 1.0;
+  }
+}
+.blink {
+  animation: blink 1s step-start 0s infinite;
+  -webkit-animation: blink 1s step-start 0s infinite;
+}

app/templates/application.hbs

@@ -5,7 +5,21 @@
       L
       {{level}}
     {{else if (eq mode 'game')}}
-      GAME
+      {{#if isComplete}}
+        <span class="blink">
+          {{correctAnswerCount}}
+        </span>
+      {{else}}
+        {{#if isIncorrect}}
+          EEE
+        {{else}}
+          {{problem.termOne}}
+          {{format-operator problem.operator}}
+          {{problem.termTwo}}
+          =
+          {{answer}}
+        {{/if}}
+      {{/if}}
     {{/if}}
   {{else}}
     &nbsp;
@@ -24,7 +38,7 @@
   LEVEL
 </button>
 
-<button {{action 'playGame'}}>
+<button {{action 'go'}}>
   GO
 </button>
 
@@ -39,3 +53,11 @@
 {{change-operator-button operator='%' onClick=(action 'changeOperator')}}
 
 {{change-operator-button operator='*' onClick=(action 'changeOperator')}}
+
+<div>
+  {{#each digits as |digit|}}
+    <button {{action 'pressDigit' digit}}>
+      {{digit}}
+    </button>
+  {{/each}}
+</div>

tests/unit/models/problem-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('problem', 'Unit | Model | problem', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});