anatolykopyl/vk-bingo
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vk-bingo.git synced 2026-03-26 04:44:26 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Можно играть
This commit is contained in:
Anatoly Kopyl
2021-03-27 20:24:07 +03:00
parent 13cabe7c43
commit affebed337
6 changed files with 144 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/package-lock.json generated
View File

@@ -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=",
"dev": true
"integrity": "sha1-5VmK1QF0wbxOhyMB6CrCzZf5Amc="
},
"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",

2
frontend/package.json
View File

@@ -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"
},

20
frontend/src/App.vue
View File

@@ -1,26 +1,36 @@
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<h1>🎰 Flex Bingo 🎰</h1>
<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>

BIN
frontend/src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

94
frontend/src/components/Game.vue Normal file
View File

@@ -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>

58
frontend/src/components/HelloWorld.vue
View File

@@ -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>