Working front end

uklineale · Sep 8, 2016 · 41d2f81 · 41d2f81
1 parent 9abbf80
commit 41d2f81
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/public/css/cards.css b/public/css/cards.css
@@ -35,14 +35,21 @@ input {
     width: 200px; height: 300px; list-style: none; background: #fff; border-radius: 5px; position: absolute; top: 0; left: 0; box-shadow: 0 0 2px rgba(0,0,0,.2), 1px 1px 1px rgba(0,0,0,.2); line-height: 300px; text-align: center; font-size: 100px; border: 10px solid #ECECEC; box-sizing: border-box; cursor: default;
 }
 
-#viewport li.clubs,
-#viewport li.spades {
-    color: #373737;
+#viewport li.worker{
+    background-image: url("http://america.pink/images/1/0/7/2/9/3/7/en/2-construction-worker.jpg");
+    background-size: 100% 100%;
+    color: white;
+    font-size: 36px;
+    font-weight: bolder;
+    cursor:pointer;
 }
 
-#viewport li.diamonds,
-#viewport li.hearts {
-    color: #ED5D52;
+#viewport li.good{
+  background-image: url("http://www.clipartkid.com/images/212/happy-construction-worker-stock-images-image-16025354-q2t6Lu-clipart.jpg");
+}
+
+#viewport li.bad{
+  background-image: url("http://thumb1.shutterstock.com/display_pic_with_logo/2929981/336156128/stock-photo-sad-male-construction-worker-with-short-black-hair-in-uniform-begging-isolated-336156128.jpg");
 }
 
 #viewport li.in-deck:nth-child(3) {

diff --git a/public/index.html b/public/index.html
@@ -10,17 +10,16 @@
 <body>
     <div id="viewport">
         <ul class="stack">
-            <li class="clubs">♣</li>
-            <li class="diamonds">♦</li>
-            <li class="hearts">♥</li>
-            <li class="spades">♠</li>
+            <li class="worker">John</li>
+            <li class="worker">Jake</li>
+            <li class="worker">Jim</li>
+            <li class="worker">Jerry</li>
         </ul>
     </div>
     <div id="source">
         <p>Drag the playing cards out of the stack and let go. Dragging them beyond the desk will throw them out of the stack. If you drag too little and let go, the cards will spring back into place. You can throw cards back into the stack after you have thrown them out.</p>
         <p>Open the <a href="https://developer.chrome.com/devtools/docs/console">Console</a> to view the associated events.</p>
     </div>
-
     <script src="./js/bundle.js"></script>
 </body>
 </html>
diff --git a/public/js/bundle.js b/public/js/bundle.js
@@ -8704,15 +8704,24 @@ console.log(stack);
 stack.on('throwout', function (e) {
     console.log(e.target.innerText || e.target.textContent, 'has been thrown out of the stack to the', e.throwDirection == 1 ? 'right' : 'left', 'direction.');
 
+    if (e.throwDirection == 1){ //thrown right
+        e.target.classList.add('good');
+    } else {
+      e.target.classList.add('bad');
+    }
     e.target.classList.remove('in-deck');
 });
 
 stack.on('throwin', function (e) {
     console.log(e.target.innerText || e.target.textContent, 'has been thrown into the stack from the', e.throwDirection == 1 ? 'right' : 'left', 'direction.');
 
+    if (e.target.classList.contains('good')) {  e.target.classList.remove('good');  }
+    if (e.target.classList.contains('bad'))  {  e.target.classList.remove('bad');  }
     e.target.classList.add('in-deck');
 });
 
+stack.on()
+
 },{"swing":2}],143:[function(require,module,exports){
 // shim for using process in browser
 var process = module.exports = {};

diff --git a/public/js/swipe.js b/public/js/swipe.js
@@ -18,11 +18,20 @@ console.log(stack);
 stack.on('throwout', function (e) {
     console.log(e.target.innerText || e.target.textContent, 'has been thrown out of the stack to the', e.throwDirection == 1 ? 'right' : 'left', 'direction.');
 
+    if (e.throwDirection == 1){ //thrown right
+        e.target.classList.add('good');
+    } else {
+      e.target.classList.add('bad');
+    }
     e.target.classList.remove('in-deck');
 });
 
 stack.on('throwin', function (e) {
     console.log(e.target.innerText || e.target.textContent, 'has been thrown into the stack from the', e.throwDirection == 1 ? 'right' : 'left', 'direction.');
 
+    if (e.target.classList.contains('good')) {  e.target.classList.remove('good');  }
+    if (e.target.classList.contains('bad'))  {  e.target.classList.remove('bad');  }
     e.target.classList.add('in-deck');
 });
+
+stack.on()