Add img-disable css and usage

The “socket.on(enable/disable image)” haven’t been tested.

2 files changed, 32 insertions, 2 deletions

diff --git a/webapp/app/static/carousel.css b/webapp/app/static/carousel.css
index 9ef5474..4e49305 100644
--- a/webapp/app/static/carousel.css
+++ b/webapp/app/static/carousel.css
@@ -93,6 +93,14 @@ body {
   letter-spacing: -1px;
 }
 
+img.img-disable {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    filter: grayscale(100%);
+    opacity: 0.5;
+}
 
 /* RESPONSIVE CSS
 -------------------------------------------------- */
@@ -133,6 +141,4 @@ body {
     margin-top: 120px;
   }
 
-
-
 }
diff --git a/webapp/app/templates/index.html b/webapp/app/templates/index.html
index 3592985..4dadb7b 100644
--- a/webapp/app/templates/index.html
+++ b/webapp/app/templates/index.html
@@ -124,6 +124,23 @@
                 var c = new creature(msg.name, socket);
                 c.render($('#creatures'));
             });
+            
+            socket.on('enable image', function(msg) {
+                console.log('enable image');
+                // to be tested
+                var name = msg.name;
+                var myImgElement = $("#" + name);
+                myImgElement.removeClass('img-disable');
+                
+            });
+            
+            socket.on('disable image', function(msg) {
+                console.log('disable image');
+                // to be tested
+                var name = msg.name;
+                var myImgElement = $("#" + name);
+                myImgElement.addClass('img-disable');
+            });
 
             socket.on('disconnect', function() {
                 console.log('disconnected');
@@ -134,6 +151,13 @@
 
         function clickImg(element) {
             console.log(element.id);
+            
+            //-----Testing------------------
+            //var name = element.id;
+            //var myImgElement = $("#" + name);
+            //myImgElement.addClass('img-disable');
+            // -----------------------------
+            
             var c = new creature(element.id, socket);
             c.click()
         }