From 8d0fe5788a6fd26583dc08fdd23a1e532be65416 Mon Sep 17 00:00:00 2001
From: Anatoly Kopyl <akopyl@radner.ru>
Date: Sun, 28 Mar 2021 15:51:48 +0300
Subject: [PATCH] =?UTF-8?q?:art:=20=D0=9F=D0=B5=D1=80=D0=B5=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=20=D0=BF=D0=BE=D0=BB=D0=B5=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D0=B1=D0=BE=D1=80=D0=B0=20=D0=BE=D1=82=D0=B2=D0=B5=D1=82?=
 =?UTF-8?q?=D0=B0=20=D0=B2=20=D1=81=D0=B2=D0=BE=D0=B9=20=D0=BA=D0=BE=D0=BC?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.env.example              |   1 +
 frontend/src/App.vue               |  11 +++-
 frontend/src/components/Game.vue   | 102 +++++++++++++++++------------
 frontend/src/components/List.vue   |  41 ++++++++++++
 frontend/src/components/Login.vue  |   3 +-
 frontend/src/components/Result.vue |  32 +++++++++
 6 files changed, 144 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/components/List.vue
 create mode 100644 frontend/src/components/Result.vue

diff --git a/frontend/.env.example b/frontend/.env.example
index 34b2230..41695f0 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1 +1,2 @@
+VUE_APP_BACKEND=Адрес бэкенда
 VUE_APP_QUESTION=Вопрос для страницы авторизации
\ No newline at end of file
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e64a3f1..d1ffd33 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1>🎰 Flex Bingo 🎰</h1>
+  <h1>🎰 Флекспатрульное Бинго 🎰</h1>
   <Login id="login" @loggedIn="login" v-show="!loggedIn" />
   <Game id="game" v-if="loggedIn" />
 </template>
@@ -43,11 +43,11 @@ body {
 }
 
 #game {
-  margin: auto;
   margin-bottom: 100px;
 }
 
 .correct {
+  color: black;
   background-color: rgb(124, 230, 124) !important;
 }
 .highlight_correct {
@@ -56,4 +56,11 @@ body {
 .wrong {
   background-color: rgb(255, 71, 71) !important;
 }
+
+@media only screen and (max-width: 520) {
+  h1 {
+    display: none;
+    font-size: 10px;
+  }
+}
 </style>
diff --git a/frontend/src/components/Game.vue b/frontend/src/components/Game.vue
index e4a7d26..3a2b92e 100644
--- a/frontend/src/components/Game.vue
+++ b/frontend/src/components/Game.vue
@@ -1,50 +1,67 @@
 <template>
-  <div class="card" v-if="card !== null">
+  <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="answers">
-      <span class="option" v-for="name in options" :key="name" v-on:click="selectAnswer(name)"
-      v-bind:class="{
-        correct: correctAnswer && selectedAnswer === name, 
-        wrong: selectedAnswer === name && !correctAnswer, 
-        highlight_correct: correctAnswer !== null && name === card.name
-      }">
-        {{ name }}
-      </span>
+    <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>
 </template>
 
 <script>
 import axios from 'axios'
+import List from './List.vue'
+import Result from './Result.vue'
 
 export default {
   name: 'Game',
+  components: {
+    List,
+    Result
+  },
   data() {
     return {
       options: null,
       card: null,
       correctAnswer: null,    // True or False
-      selectedAnswer: null    // Чье-то имя
+      selectedAnswer: null,   // Чье-то имя
+      showResult: false
     }
   },
   methods: {
     getCard: function() {
+      this.correctAnswer = null
+      this.selectedAnswer = null
+      this.showResult = false
       axios
-        .get('http://localhost:3000/card')
+        .get(process.env.VUE_APP_BACKEND + '/card')
         .then(response => (this.card = response.data))
     },
-    selectAnswer: function(selection) {
-      if (this.correctAnswer === null) {
-        this.correctAnswer = selection === this.card.name
-        this.selectedAnswer = selection
+    nextCard: function() {
+      if (this.showResult) {
+        this.getCard()
       }
+    },
+    selectAnswer: function(selection) {
+      this.correctAnswer = selection === this.card.name
+      this.selectedAnswer = selection
+      let innerThis = this
+      setTimeout(function() {
+          innerThis.showResult = true
+      }, 800)
     }
   },
   mounted() {
     this.getCard()
     axios
-      .get('http://localhost:3000/options')
+      .get(process.env.VUE_APP_BACKEND + '/options')
       .then(response => (this.options = response.data))
   }
 }
@@ -52,11 +69,12 @@ export default {
 
 <style scoped>
 .card {
-  width: 50%;
+  width: 450px;
   padding: 18px;
   border-radius: 17px;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
   background-color: #121212;
+  margin: auto;
 }
 
 .meme {
@@ -64,33 +82,33 @@ export default {
   border-radius: 8px;
 }
 
-.answers {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-around;
-}
-
-.option {
-  background-color: #5a5a5a;
-  border-radius: 6px;
-  margin: 3px;
-  padding: 5px 9px 5px 9px;
-  transition: transform 0.2s;
-}
-.option:hover {
-  transform: scale(1.06);
+.clickable {
   cursor: pointer;
 }
 
-@keyframes correct-selected {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1);
+.interactive {
+  position: relative;
+}
+
+.fade-answers-leave-active {
+  transition: all 0.8s ease;
+}
+.fade-answers-leave-to {
+  opacity: 0;
+  transform: scale(0.3);
+}
+
+.spin-result-enter-active {
+  transition: all 2s ease;
+}
+.spin-result-enter-from {
+  transform: scale(0.2);
+  transform: rotateY(120deg);
+}
+
+@media only screen and (max-width: 486) {
+  .card {
+    width: 100%;
   }
 }
 </style>
diff --git a/frontend/src/components/List.vue b/frontend/src/components/List.vue
new file mode 100644
index 0000000..b48243c
--- /dev/null
+++ b/frontend/src/components/List.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="answers">
+    <span class="option" v-for="name in options" :key="name" v-on:click="selectAnswer(name)">
+      {{ name }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'List',
+  props: {
+    options: Array
+  },
+  methods: {
+    selectAnswer: function(selection) {
+      this.$emit('selectedAnswer', selection)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.answers {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.option {
+  background-color: #5a5a5a;
+  border-radius: 6px;
+  margin: 3px;
+  padding: 5px 9px 5px 9px;
+  transition: transform 0.2s;
+}
+.option:hover {
+  transform: scale(1.06);
+  cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 1d89d9b..3ec8879 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -23,7 +23,7 @@ export default {
   methods: {
     login: function() {
       axios
-        .post('http://localhost:3000/auth', {
+        .post(process.env.VUE_APP_BACKEND + '/auth', {
           "pass": this.answer,
         })
         .then(response => {
@@ -34,7 +34,6 @@ export default {
   },
   mounted() {
     this.question = process.env.VUE_APP_QUESTION
-
     this.login()
   }
 }
diff --git a/frontend/src/components/Result.vue b/frontend/src/components/Result.vue
new file mode 100644
index 0000000..aaf7ba3
--- /dev/null
+++ b/frontend/src/components/Result.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <span v-show="!correct" class="wrong-answr">Нет, это был не {{ selectedName }} 😢</span>
+    <div class="result" v-bind:class="{correct: correct}">
+      {{ name }} {{ date }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Result",
+  props: {
+    name: String,
+    selectedName: String,
+    date: String,
+    correct: Boolean
+  }
+}
+</script>
+
+<style scoped>
+.result {
+  padding: 30px 40px 30px 40px;
+  border-radius: 8px;
+  background-color: #5a5a5a;
+}
+
+.wrong-answr {
+  color: rgb(255, 71, 71);
+}
+</style>
\ No newline at end of file