From b9beb3887eb337a166585ffa7995d8629907d8aa Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <akopyl@radner.ru>
Date: Tue, 30 Mar 2021 00:05:48 +0300
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=D0=9F=D0=BE=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8F=D0=BB=20=D0=B7=D0=B0=D0=B4=D0=B5=D1=80=D0=B6=D0=BA=D1=83?=
 =?UTF-8?q?=20=D0=B4=D0=BE=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Вероятно менее дергано будет появляться правильный ответ
---
 frontend/src/components/Game.vue | 34 ++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Game.vue b/frontend/src/components/Game.vue
index ef270b5..c7667f2 100644
--- a/frontend/src/components/Game.vue
+++ b/frontend/src/components/Game.vue
@@ -1,19 +1,21 @@
 <template>
-  <div class="card" v-if="card !== null" v-on:click="nextCard()" v-bind:class="{clickable: showResult}">
-    <img class="meme" v-bind:src="card.image">
-    <h2>Кто скинул этот мем?</h2>
-    <div class="interactive">
-      <transition name="fade-answers">
-        <List v-if="selectedAnswer === null" 
-        :options="options" @selectedAnswer="selectAnswer" />
-      </transition>
-      <transition name="spin-result">
-        <Result v-if="showResult" 
-        :name="card.name" :selectedName="selectedAnswer" :date="card.date" :correct="correctAnswer" />
-      </transition>
+  <div>
+    <div class="card" v-if="card !== null" v-on:click="nextCard()" v-bind:class="{clickable: showResult}">
+      <img class="meme" v-bind:src="card.image">
+      <h2>Кто скинул этот мем?</h2>
+      <div class="interactive">
+        <transition name="fade-answers">
+          <List v-if="selectedAnswer === null" 
+          :options="options" @selectedAnswer="selectAnswer" />
+        </transition>
+        <transition name="spin-result">
+          <Result v-if="showResult" 
+          :name="card.name" :selectedName="selectedAnswer" :date="card.date" :correct="correctAnswer" />
+        </transition>
+      </div>
     </div>
+    <square-loader v-else :color="'#f3f3f3'" class="loader" />
   </div>
-  <square-loader v-else :color="'#f3f3f3'" class="loader" />
 </template>
 
 <script>
@@ -34,6 +36,7 @@ export default {
     return {
       options: null,
       card: null,
+      oldCard: null,
       correctAnswer: null,    // True or False
       selectedAnswer: null,   // Чье-то имя
       showResult: false
@@ -48,7 +51,7 @@ export default {
         .get(process.env.VUE_APP_BACKEND + '/card')
         .then(response => {
           this.card = response.data
-          })
+        })
     },
     nextCard: function() {
       if (this.showResult) {
@@ -62,7 +65,8 @@ export default {
       let innerThis = this
       setTimeout(function() {
           innerThis.showResult = true
-      }, 800)
+      }, 805)
+      this.oldCard = this.card
       axios
         .post(process.env.VUE_APP_BACKEND + '/answer', {
           'data': {