From a0c6d598009dfa37ec1b3759a8afac6cc3265829 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Mon, 6 Sep 2021 22:20:47 +0200
Subject: [PATCH] fade out wrong sources

---
 client/src/components/Play.vue   |  8 ++++----
 client/src/components/Source.vue | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Play.vue b/client/src/components/Play.vue
index 0081ee8..374bea1 100644
--- a/client/src/components/Play.vue
+++ b/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%; }
 }
diff --git a/client/src/components/Source.vue b/client/src/components/Source.vue
index 27ed68a..edb67d4 100644
--- a/client/src/components/Source.vue
+++ b/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>