Update thank you image with high five

app/components/animated-high-five.js

@@ -0,0 +1,70 @@
+import Ember from 'ember';
+
+const {
+  Component,
+  computed,
+  get,
+  run,
+  set
+} = Ember;
+
+export default Component.extend({
+  classNames: ['animated-high-five'],
+  classNameBindings: ['currentImage', 'initialAnimation', 'followOnAnimation', 'reset'],
+
+  images: ['tone-1f3fb', 'tone-1f3fc', 'tone-1f3ff', 'tone-1f3fe', 'tone-1f3fd'],
+
+  currentImage: null,
+  followOnAnimation: false,
+  initialAnimation: true,
+  reset: false,
+
+  init() {
+    this._super(...arguments);
+    this.selectImage();
+  },
+
+  willDestroyElement() {
+    let followOnTimer = get(this, 'followOnTimer');
+    let resetTimer = get(this, 'resetTimer');
+    run.cancel(followOnTimer);
+    run.cancel(resetTimer);
+  },
+
+  availableImages: computed.setDiff('images', 'currentImageArray'),
+
+  currentImageArray: computed('currentImage', function() {
+    let currentImage = get(this, 'currentImage');
+    return [currentImage];
+  }),
+
+  selectImage() {
+    let images = get(this, 'availableImages');
+    let image = images[Math.floor(Math.random() * images.length)];
+    let that = this;
+
+    set(this, 'currentImage', image);
+    let followOnTimer = run.later((function() {
+      set(that, 'followOnAnimation', false);
+    }), 500);
+
+    set(this, 'followOnTimer', followOnTimer);
+    set(this, 'reset', true);
+
+    let resetTimer = run.later((function() {
+      set(that, 'reset', false);
+    }), 1);
+    set(this, 'resetTimer', resetTimer);
+  },
+
+  click() {
+    let that = this;
+    let followOnTimer = get(this, 'followOnTimer');
+
+    run.cancel(followOnTimer);
+    this.selectImage();
+
+    set(that, 'initialAnimation', false);
+    set(that, 'followOnAnimation', true);
+  }
+});

app/styles/app.scss

@@ -29,6 +29,7 @@
 @import "task-new";
 @import "start";
 
+@import "components/animated-high-five";
 @import "components/categories-list";
 @import "components/category-item";
 @import "components/code-theme-selector";

app/styles/components/animated-high-five.scss

@@ -0,0 +1,38 @@
+@keyframes emptyAnimation {}
+
+@-webkit-keyframes pulsate {
+  25% {transform: scale(1.3, 1.3);}
+  100% {transform: scale(1.0, 1.0);}
+}
+
+@-webkit-keyframes reset {
+  100% {transform: scale(1.0, 1.0);}
+}
+
+.animated-high-five {
+  $file: "assets/images/icons/emoji-1f64c-sprite";
+  @include background-image-retina($file, "png", 500px, 100px);
+  cursor: pointer;
+  width: 100px;
+  height: 100px;
+
+  &.tone-1f3fb { background-position: -400px 0; }
+  &.tone-1f3fc { background-position: -300px 0; }
+  &.tone-1f3fd { background-position: -200px 0; }
+  &.tone-1f3fe { background-position: -100px 0; }
+  &.tone-1f3ff { background-position: 0 0; }
+
+  &.initial-animation {
+    animation: pulsate 0.5s ease-out;
+    animation-delay: 0.75s;
+  }
+
+  &.follow-on-animation {
+    animation: pulsate 0.5s ease-out;
+    animation-delay: 0;
+  }
+
+  &.reset {
+    animation: emptyAnimation;
+  }
+}

app/styles/templates/project/thank-you.scss

@@ -3,14 +3,10 @@
   text-align: center;
 
   &__project-icon {
-    $file: "/assets/images/icons/fireworks-large";
-    $height: 100px;
-    $width: 100px;
-    @include background-image-retina($file, "png", $height, $width);
-    display: block;
-    height: $height;
     margin: 1.4em auto;
-    width: $width;
+    .animated-high-five {
+      margin: 0 auto;
+    }
   }
 
   h3 {

app/templates/components/animated-high-five.hbs

@@ -0,0 +1 @@
+{{yield}}

app/templates/components/thank-you-container.hbs

@@ -1,4 +1,6 @@
-<div class="thank-you-container__project-icon" data-test-selector="project icon"></div>
+<div class="thank-you-container__project-icon" data-test-selector="project icon">
+  {{animated-high-five}}
+</div>
 <h3>Thank you!</h3>
 <div class="thank-you-container__message">
   <p data-test-selector="thank you message">

app/templates/index.hbs

@@ -29,4 +29,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

tests/integration/components/animated-high-five-test.js

@@ -0,0 +1,12 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('animated-high-five', 'Integration | Component | animated high five', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  this.render(hbs`{{animated-high-five}}`);
+
+  assert.equal(this.$().text().trim(), '');
+});