🎉 Создал рабочий фронтенд

Можно играть

frontend/package-lock.json

@@ -5,8 +5,10 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "vk-bingo",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.21.1",
         "core-js": "^3.6.5",
         "vue": "^3.0.0"
       },
@@ -2807,6 +2809,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -6446,7 +6456,6 @@
       "version": "1.13.3",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.3.tgz?cache=0&sync_timestamp=1614436958094&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.3.tgz",
       "integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc=",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -16241,7 +16250,6 @@
       "integrity": "sha1-w6I88z9uXqMFNvE8D5sfx+AoscE=",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.11.0",
         "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -16254,7 +16262,6 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.2.4",
         "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.6.5",
         "core-js-compat": "^3.6.5",
         "semver": "^6.1.0"
       }
@@ -16406,7 +16413,8 @@
       "version": "4.5.12",
       "resolved": "https://registry.npm.taobao.org/@vue/cli-plugin-vuex/download/@vue/cli-plugin-vuex-4.5.12.tgz?cache=0&sync_timestamp=1616590656418&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcli-plugin-vuex%2Fdownload%2F%40vue%2Fcli-plugin-vuex-4.5.12.tgz",
       "integrity": "sha1-9/vhd+5xdvBVtUbp50Ry+dkXdiY=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.12",
@@ -16650,7 +16658,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/@vue/preload-webpack-plugin/download/@vue/preload-webpack-plugin-1.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fpreload-webpack-plugin%2Fdownload%2F%40vue%2Fpreload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha1-zrkktOyzucQ4ccekKaAvhCPmIas=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/reactivity": {
       "version": "3.0.7",
@@ -16897,7 +16906,8 @@
       "version": "5.3.1",
       "resolved": "https://registry.npm.taobao.org/acorn-jsx/download/acorn-jsx-5.3.1.tgz?cache=0&sync_timestamp=1599499160644&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn-jsx%2Fdownload%2Facorn-jsx-5.3.1.tgz",
       "integrity": "sha1-/IZh4Rt6wVOcR9v+oucrOvNNJns=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -16937,13 +16947,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/ajv-errors/download/ajv-errors-1.0.1.tgz?cache=0&sync_timestamp=1615411182875&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-errors%2Fdownload%2Fajv-errors-1.0.1.tgz",
       "integrity": "sha1-81mGrOuRr63sQQL72FAUlQzvpk0=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1616655874547&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
       "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -17204,6 +17216,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -20253,8 +20273,7 @@
     "follow-redirects": {
       "version": "1.13.3",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.3.tgz?cache=0&sync_timestamp=1614436958094&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.3.tgz",
-      "integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc=",
+      "integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc="
-      "dev": true
     },
     "for-in": {
       "version": "1.0.2",
@@ -23425,13 +23444,15 @@
           "version": "5.1.0",
           "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-5.1.0.tgz?cache=0&sync_timestamp=1605801506037&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-5.1.0.tgz",
           "integrity": "sha1-xr5oWKvQE9do6YNmrkfiXViHsa4=",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "postcss-modules-extract-imports": {
           "version": "3.0.0",
           "resolved": "https://registry.npm.taobao.org/postcss-modules-extract-imports/download/postcss-modules-extract-imports-3.0.0.tgz?cache=0&sync_timestamp=1602588177787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-modules-extract-imports%2Fdownload%2Fpostcss-modules-extract-imports-3.0.0.tgz",
           "integrity": "sha1-zaHwR8CugMl9vijD52pDuIAldB0=",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.0",

frontend/package.json

@@ -1,5 +1,6 @@
 {
   "name": "vk-bingo",
+  "author": "Anatoly Kopyl",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0"
   },

frontend/src/App.vue

@@ -1,26 +1,36 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
+  <h1>🎰 Flex Bingo 🎰</h1>
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <Game id="game" />
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Game from './components/Game.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    Game
   }
 }
 </script>
 
 <style>
+body {
+  margin: 0px;
+  background-color: #5a5a5a;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: #f3f3f3;
   margin-top: 60px;
 }
+
+#game {
+  margin-left: 25%;
+  margin-bottom: 100px;
+}
 </style>

frontend/src/components/Game.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="card" v-if="card!==null">
+    <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>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Game',
+  data() {
+    return {
+      options: null,
+      card: null,
+      correctAnswer: null,    // True or False
+      selectedAnswer: null    // Чье-то имя
+    }
+  },
+  methods: {
+    getCard: function() {
+      axios
+        .get('http://localhost:3000/card')
+        .then(response => (this.card = response.data))
+    },
+    selectAnswer: function(selection) {
+      if (this.correctAnswer === null) {
+        this.correctAnswer = selection === this.card.name
+        this.selectedAnswer = selection
+      }
+    }
+  },
+  mounted() {
+    this.getCard()
+    axios
+      .get('http://localhost:3000/options')
+      .then(response => (this.options = response.data))
+  }
+}
+</script>
+
+<style scoped>
+.card {
+  width: 50%;
+  padding: 18px;
+  border-radius: 17px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+  background-color: #121212;
+}
+
+.meme {
+  width: 100%;
+  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);
+  cursor: pointer;
+}
+
+.correct {
+  background-color: rgb(124, 230, 124);
+}
+.highlight_correct {
+  border: 1px solid rgb(124, 230, 124);
+}
+.wrong {
+  background-color: rgb(255, 71, 71);
+}
+</style>

frontend/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>