joshsmith · November 30, 2016 05:38 · Nov 30, 2016 · Nov 30, 2016 · Nov 30, 2016 · Nov 30, 2016
diff --git a/styles.app.css b/styles.app.css
@@ -9,7 +9,7 @@ body {
   position: absolute;
   left: 100px;
   top: 100px;
-  background-image: url('https://cl.ly/0o0d1q3Y3824/emoji-1f64c-sprite.png');
+  background-image: url('https://cl.ly/0R383N3B1U1L/emoji-1f64c-sprite.png');
   background-repeat: no-repeat;
   background-size: 500px 100px;
   width: 100px;

diff --git a/components.raised-hands.js b/components.raised-hands.js
@@ -42,22 +42,22 @@ export default Component.extend({
 		let image = images[Math.floor(Math.random() * images.length)];
     set(this, 'currentImage', image);
 		let that = this;
+    let followOnTimer = run.later((function() {
+			set(that, 'followOnAnimation', false);
+		}), 500);
+		set(this, 'timer', followOnTimer);
+    set(this, 'reset', true);
+    run.later((function() {
+      set(that, 'reset', false);
+		}), 1);
   },
 
   click() {
     let that = this;
     let timer = get(this, 'timer');
     run.cancel(timer);
     this.selectImage();
-    set(this, 'reset', true);
 	  set(that, 'initialAnimation', false);
 		set(that, 'followOnAnimation', true);
-    run.later((function() {
-      set(that, 'reset', false);
-		}), 1);
-    let followOnTimer = run.later((function() {
-			set(that, 'followOnAnimation', false);
-		}), 500);
-    set(this, 'timer', followOnTimer);
   }
 });
diff --git a/components.raised-hands.js b/components.raised-hands.js
@@ -9,14 +9,15 @@ const {
 } = Ember;
 
 export default Component.extend({
-  classNameBindings: ['initialAnimation', 'followOnAnimation', 'reset'],
+  classNames: ['raised-hands'],
+  classNameBindings: ['currentImage', 'initialAnimation', 'followOnAnimation', 'reset'],
 
   images: [
-    "https://cl.ly/2d0p3S1B2H1m/emoji-1f64c-1f3fb@2x.png",
-    "https://cl.ly/33163u0G2G2z/emoji-1f64c-1f3fc@2x.png",
-    "https://cl.ly/292T3T433b0a/emoji-1f64c-1f3ff@2x.png",
-    "https://cl.ly/40042G0Y0y1m/emoji-1f64c-1f3fe@2x.png",
-    "https://cl.ly/0T3E32023T2B/emoji-1f64c-1f3fd@2x.png"
+    "tone-1f3fb",
+    "tone-1f3fc",
+    "tone-1f3ff",
+    "tone-1f3fe",
+    "tone-1f3fd"
   ],
 
   currentImage: null,

diff --git a/styles.app.css b/styles.app.css
@@ -4,33 +4,50 @@ body {
   font-size: 12pt;
 }
 
-img {
+.raised-hands {
   cursor: pointer;
   position: absolute;
   left: 100px;
   top: 100px;
+  background-image: url('https://cl.ly/0o0d1q3Y3824/emoji-1f64c-sprite.png');
+  background-repeat: no-repeat;
+  background-size: 500px 100px;
   width: 100px;
   height: 100px;
   to {width: auto;}
 }
 
-.initial-animation img {
-  animation: pulsate 0.5s ease-out;
-  animation-delay: 0.75s;
+.raised-hands.tone-1f3fb {
+  background-position: -400px 0;
+}
+
+.raised-hands.tone-1f3fc {
+  background-position: -300px 0;
+}
+
+.raised-hands.tone-1f3fd {
+  background-position: -200px 0;
 }
 
-.follow-on-animation img {
+.raised-hands.tone-1f3fe {
+  background-position: -100px 0;
+}
+
+.raised-hands.tone-1f3ff {
+  background-position: 0 0;
+}
+
+.initial-animation.raised-hands {
   animation: pulsate 0.5s ease-out;
-  animation-delay: 0;
+  animation-delay: 0.75s;
 }
 
-.reset img {
+.follow-on-animation.raised-hands {
   animation: pulsate 0.5s ease-out;
   animation-delay: 0;
-  width: auto;
 }
 
-.reset img {
+.reset.raised-hands {
   animation: emptyAnimation;
 }
 

diff --git a/templates.components.raised-hands.hbs b/templates.components.raised-hands.hbs
@@ -1 +0,0 @@
-<img src={{currentImage}} />

diff --git a/components.raised-hands.js b/components.raised-hands.js
@@ -0,0 +1,62 @@
+import Ember from 'ember';
+
+const {
+  Component,
+  computed,
+  get,
+  run,
+  set
+} = Ember;
+
+export default Component.extend({
+  classNameBindings: ['initialAnimation', 'followOnAnimation', 'reset'],
+
+  images: [
+    "https://cl.ly/2d0p3S1B2H1m/[email protected]",
+    "https://cl.ly/33163u0G2G2z/[email protected]",
+    "https://cl.ly/292T3T433b0a/[email protected]",
+    "https://cl.ly/40042G0Y0y1m/[email protected]",
+    "https://cl.ly/0T3E32023T2B/[email protected]"
+  ],
+
+  currentImage: null,
+  followOnAnimation: false,
+  initialAnimation: true,
+  reset: false,
+
+  init() {
+    this._super(...arguments);
+    this.selectImage();
+  },
+
+  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)];
+    set(this, 'currentImage', image);
+		let that = this;
+  },
+
+  click() {
+    let that = this;
+    let timer = get(this, 'timer');
+    run.cancel(timer);
+    this.selectImage();
+    set(this, 'reset', true);
+	  set(that, 'initialAnimation', false);
+		set(that, 'followOnAnimation', true);
+    run.later((function() {
+      set(that, 'reset', false);
+		}), 1);
+    let followOnTimer = run.later((function() {
+			set(that, 'followOnAnimation', false);
+		}), 500);
+    set(this, 'timer', followOnTimer);
+  }
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle'
+});
diff --git a/styles.app.css b/styles.app.css
@@ -0,0 +1,46 @@
+body {
+  margin: 12px 16px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 12pt;
+}
+
+img {
+  cursor: pointer;
+  position: absolute;
+  left: 100px;
+  top: 100px;
+  width: 100px;
+  height: 100px;
+  to {width: auto;}
+}
+
+.initial-animation img {
+  animation: pulsate 0.5s ease-out;
+  animation-delay: 0.75s;
+}
+
+.follow-on-animation img {
+  animation: pulsate 0.5s ease-out;
+  animation-delay: 0;
+}
+
+.reset img {
+  animation: pulsate 0.5s ease-out;
+  animation-delay: 0;
+  width: auto;
+}
+
+.reset img {
+  animation: emptyAnimation;
+}
+
+@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);}
+}
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1 @@
+{{raised-hands}}
diff --git a/templates.components.raised-hands.hbs b/templates.components.raised-hands.hbs
@@ -0,0 +1 @@
+<img src={{currentImage}} />
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,18 @@
+{
+  "version": "0.10.6",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
+    "ember": "2.9.0",
+    "ember-data": "2.9.0",
+    "ember-template-compiler": "2.9.0",
+    "ember-testing": "2.9.0"
+  },
+  "addons": {}
+}
No results found