From 9d07b4f0c5595ac2e4c3b558f9c0d3c593d4bdf9 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Mon, 25 Sep 2017 13:10:33 -0400
Subject: [PATCH] Add shake animation for shuffling piles

---
 js/playfield.js |  9 ++++++++-
 style.css       | 11 +++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/js/playfield.js b/js/playfield.js
index 6f1c37d..426ad10 100644
--- a/js/playfield.js
+++ b/js/playfield.js
@@ -133,7 +133,14 @@ interact('.card-pile')
     container.appendChild(cardList);
     showModal(container);
   })
-  .on('tap', event => shuffle(piles[event.target.getAttribute('data-pile')]));
+  .on('tap', event => {
+    shuffle(piles[event.target.getAttribute('data-pile')]);
+    event.target.classList.add("shake");
+    // reset animation so it can be played again
+    event.target.onanimationend = e => {
+      event.target.classList.remove("shake");
+    };
+  });
 
 function makeCard(cardNum) {
   // draw a new card
diff --git a/style.css b/style.css
index 0a78c64..9474e0c 100644
--- a/style.css
+++ b/style.css
@@ -39,6 +39,17 @@ body {
 	user-select: none;
 }
 
+.shake {
+	animation: shake 0.8s;
+}
+
+@keyframes shake {
+  10%, 90% {transform: translate(-1px, 0);}
+  20%, 80% {transform: translate(2px, 0);}
+  30%, 50%, 70% {transform: translate(-4px, 0);}
+  40%, 60% {transform: translate(4px, 0);}
+}
+
 .deck {
 	background-color: blue;
 }