fade out wrong sources

client/src/components/Play.vue

@@ -75,12 +75,12 @@ body,
       flex-grow: 1;
 
       &__fade-out {
-        animation: fade-out .5s ease-in-out;
+        animation: play-fade-out .5s ease-in-out;
         animation-fill-mode: forwards;
       }
 
       &__fade-in {
-        animation: fade-in .5s linear;
+        animation: play-fade-in .5s linear;
         animation-fill-mode: forwards;
       }
     }
@@ -93,10 +93,10 @@ body,
   }
 
 }
-@keyframes fade-out {
+@keyframes play-fade-out {
   to   { opacity: 0; }
 }
-@keyframes fade-in {
+@keyframes play-fade-in {
   0%   { opacity: 0; }
   90%  { opacity: 100%; }
 }

client/src/components/Source.vue

@@ -25,16 +25,27 @@ export default {
         'source__container': true,
         'source__container-selectable': this.selectable,
         'source__container__selected': this.isSelected(),
+        'source__container__hidden': this.isWrongSource(),
       }
     },
     badgeCount() {
+      if (this.isWrongSource()) return 0
+      
       const revelation = this.$store.state.round.revelation || {}
       const votes = revelation.votes || {}
       const list = votes[this.source.id] || []
+
       return list.length
     },
   },
   methods: {
+    isWrongSource() {
+      const revelationSources = this.$store.state.round.revelation.sources || {}
+      const isRightOrWrong = revelationSources[this.source.id]
+      if (typeof isRightOrWrong === 'undefined') return false
+
+      return !isRightOrWrong
+    },
     isSelected() {
       return this.$store.state.selection.selection[this.source.id]
     },
@@ -87,6 +98,11 @@ export default {
       color: #402080;
       box-shadow: 0 0 10px #d0d0d0;
     }
+
+    &__hidden {
+      animation: source-fade-out 0.7s linear;
+      animation-fill-mode: forwards;
+    }
   }
 
   &__source {
@@ -121,4 +137,7 @@ export default {
     }
   }
 }
+@keyframes source-fade-out {
+  to   { opacity: 10%; }
+}
 </style>