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

Added sse and a new screen

Browse Source
This commit is contained in:
Anatoly Kopyl
2023-06-17 18:17:36 +03:00
parent 6b161f2e2c
commit 3cdd827708
21 changed files with 525 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/package.json
View File

@@ -11,7 +11,10 @@
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"pinia": "^2.1.4",
"vue": "^3.3.4",
"vue-peel": "^0.1.1",
"vue-router": "4",
"vue-spinner": "^1.0.4"
},
"devDependencies": {
@@ -30,7 +33,7 @@
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"plugin:vue/vue3-recommended",
"eslint:recommended"
],
"parserOptions": {

2
frontend/public/index.html
View File

@@ -9,7 +9,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="manifest" href="<%= BASE_URL %>manifest.json">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>Флекспатруль мультиплеер</title>
</head>
<body>
<noscript>

47
frontend/src/App.vue
View File

@@ -1,42 +1,19 @@
<template>
<h1>🎱 Флекспатрульное Бинго 🎱</h1>
<Login id="login" @loggedIn="login" v-show="!loggedIn" />
<Game id="game" v-if="loggedIn" :score="score" />
<a class="source" href="https://github.com/anatolykopyl/vk-bingo">Исходный код</a>
<h1>Флекспатруль мультиплеер</h1>
<router-view />
<a
class="source"
href="https://github.com/anatolykopyl/vk-bingo"
target="_blank"
>
Исходный код
</a>
</template>
<script>
import axios from 'axios'
import Login from './components/Login.vue'
import Game from './components/Game.vue'
<script setup>
export default {
name: 'App',
components: {
Login,
Game
},
data() {
return {
loggedIn: null,
score: {
"right": 0,
"wrong": 0
}
}
},
methods: {
login: function(success) {
this.loggedIn = success
axios
.get(process.env.VUE_APP_BACKEND + '/score')
.then(response => {
if (Object.keys(response.data).length !== 0)
this.score = response.data
})
}
}
}
</script>
<style>

154
frontend/src/components/Game.vue
View File

@@ -1,154 +0,0 @@
<template>
<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>
<Score v-if="card !== null" :score="score" />
<square-loader v-if="card === null" :color="'#f3f3f3'" class="loader" />
<Stats />
</div>
</template>
<script>
import axios from 'axios'
import List from './List.vue'
import Result from './Result.vue'
import Score from './Score.vue'
import Stats from './Stats.vue'
import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
export default {
name: 'Game',
components: {
List,
Result,
Score,
Stats,
SquareLoader
},
props: {
score: Object
},
data() {
return {
options: null,
card: null,
correctAnswer: null, // True or False
selectedAnswer: null, // Чье-то имя
showResult: false
}
},
methods: {
getCard: function() {
this.correctAnswer = null
this.selectedAnswer = null
this.showResult = false
axios
.get(process.env.VUE_APP_BACKEND + '/card')
.then(response => {
this.card = response.data
})
},
nextCard: function() {
if (this.showResult) {
this.card = null
this.getCard()
}
},
selectAnswer: function(selection) {
this.selectedAnswer = selection
let innerThis = this
setTimeout(function() {
innerThis.showResult = true
if (innerThis.correctAnswer) {
innerThis.score.right++
} else {
innerThis.score.wrong++
}
}, 805)
axios
.post(process.env.VUE_APP_BACKEND + '/answer', {
'data': {
'id': this.card._id,
'name': this.selectedAnswer
}
})
.then((response) => {
this.correctAnswer = response.data.correct
this.card = response.data.card
})
}
},
mounted() {
this.getCard()
axios
.get(process.env.VUE_APP_BACKEND + '/options')
.then(response => (this.options = response.data))
}
}
</script>
<style scoped>
.card {
width: 450px;
padding: 18px;
border-radius: 17px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
background-color: #121212;
margin: auto;
}
.meme {
width: 100%;
border-radius: 8px;
}
.clickable {
cursor: pointer;
}
.interactive {
position: relative;
-webkit-perspective: 900000px;
perspective: 900000px;
}
.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);
}
.loader {
margin-top: 100px;
}
@media screen and (max-width: 520px) {
.card {
width: 94%;
padding: 3%;
}
}
</style>

80
frontend/src/components/Login.vue
View File

@@ -1,80 +0,0 @@
<template>
<div>
<h1>Авторизация:</h1>
<p>{{ question }}</p>
<input v-model="answer"><br>
<button v-on:click="login" v-bind:class="{wrong: loggedIn === false}">Ввод</button>
</div>
</template>
<script>
import axios from 'axios'
axios.defaults.withCredentials = true
export default {
name: 'Login',
data() {
return {
question: null,
answer: null,
loggedIn: null
}
},
methods: {
login: function() {
axios
.post(process.env.VUE_APP_BACKEND + '/auth', {
"pass": this.answer,
})
.then(response => {
this.loggedIn = response.status == "200"
this.$emit('loggedIn', this.loggedIn)
})
}
},
mounted() {
this.question = process.env.VUE_APP_QUESTION
this.login()
}
}
</script>
<style scoped>
div {
background-color: #121212;
width: 400px;
margin: auto;
border-radius: 18px;
padding: 40px 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
input {
font-size: 1em;
text-align: center;
padding: 5px 8px;
margin-bottom: 1em;
border-radius: 6px;
border: none;
width: 20ch;
}
button {
color: white;
font-size: 1em;
box-sizing: content-box;
background-color: #5a5a5a;
border-radius: 6px;
border: none;
width: 20ch;
padding: 5px 8px;
cursor: pointer;
}
@media only screen and (max-width: 520px) {
div {
width: 100%;
padding: 40px 0;
}
}
</style>

17
frontend/src/composables/useServerEvents.js Normal file
View File

@@ -0,0 +1,17 @@
// import useStore from '../store'
export default () => {
// const store = useStore()
const evtSource = new EventSource(`${process.env.VUE_APP_BACKEND}/stream`);
function addAnswerListener(handler) {
evtSource.addEventListener('answer', (event) => handler(JSON.parse(event.data)))
}
function addUserlistListener(handler) {
evtSource.addEventListener('userlist', (event) => handler(JSON.parse(event.data)))
}
return { addAnswerListener, addUserlistListener }
}

6
frontend/src/main.js
View File

@@ -1,4 +1,8 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).mount('#app')
const app = createApp(App)
app.use(router)
app.mount('#app')

15
frontend/src/router.js Normal file
View File

@@ -0,0 +1,15 @@
import { createRouter, createWebHistory } from 'vue-router'
import Game from './views/Game/Index.vue'
import Login from './views/Login/Index.vue'
import Screen from './views/Screen/Index.vue'
const routes = [
{ path: '/', component: Game },
{ path: '/login', component: Login },
{ path: '/screen', component: Screen }
]
export default createRouter({
history: createWebHistory(),
routes,
})

7
frontend/src/store.js Normal file
View File

@@ -0,0 +1,7 @@
import { defineStore } from 'pinia'
export default defineStore('store', {
state: () => ({
username: null
}),
})

18
frontend/src/views/Game/EndGame.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div>
<button @click="endGame">
Закончить игру
</button>
</div>
</template>
<script setup>
import axios from 'axios'
import { useRouter } from 'vue-router';
const router = useRouter()
function endGame() {
axios.post(process.env.VUE_APP_BACKEND + '/end')
router.push('/login')
}
</script>

153
frontend/src/views/Game/Index.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<div>
<div
class="card"
v-if="card"
>
<img
class="meme"
:src="card.image"
>
<h2>Кто скинул этот мем?</h2>
<div class="interactive">
<transition name="fade-answers">
<List
v-if="!selectedAnswer"
: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>
<Score
v-if="card"
:score="score"
/>
<EndGame />
<square-loader
v-if="!card"
:color="'#f3f3f3'"
class="loader"
/>
<Stats />
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'
import List from './List.vue'
import Result from './Result.vue'
import Score from './Score.vue'
import Stats from './Stats.vue'
import EndGame from './EndGame.vue'
import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
const options = ref()
const card = ref()
const correctAnswer = ref()
const selectedAnswer = ref()
const showResult = ref()
const score = reactive({
"right": 0,
"wrong": 0
})
async function getCard() {
correctAnswer.value = null
selectedAnswer.value = null
showResult.value = false
const response = await axios.get(process.env.VUE_APP_BACKEND + '/card')
card.value = response.data
}
async function selectAnswer(selection) {
selectedAnswer.value = selection
// setTimeout(function() {
// showResult.value = true
// if (correctAnswer.value) {
// score.right++
// } else {
// score.wrong++
// }
// }, 805)
await axios.post(process.env.VUE_APP_BACKEND + '/answer', {
'data': {
'id': card.value._id,
'name': selectedAnswer.value
}
})
}
onMounted(async () => {
getCard()
const response = await axios.get(process.env.VUE_APP_BACKEND + '/options')
options.value = response.data
})
</script>
<style scoped>
.card {
width: 450px;
padding: 18px;
border-radius: 17px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
background-color: #121212;
margin: auto;
}
.meme {
width: 100%;
border-radius: 8px;
}
.clickable {
cursor: pointer;
}
.interactive {
position: relative;
-webkit-perspective: 900000px;
perspective: 900000px;
}
.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);
}
.loader {
margin-top: 100px;
}
@media screen and (max-width: 520px) {
.card {
width: 94%;
padding: 3%;
}
}
</style>

0
frontend/src/components/List.vue → frontend/src/views/Game/List.vue
View File

0
frontend/src/components/Result.vue → frontend/src/views/Game/Result.vue
View File

0
frontend/src/components/Score.vue → frontend/src/views/Game/Score.vue
View File

0
frontend/src/components/Stats.vue → frontend/src/views/Game/Stats.vue
View File

101
frontend/src/views/Login/Index.vue Normal file
View File

@@ -0,0 +1,101 @@
<template>
<div>
<h1>Авторизация:</h1>
<p>{{ question }}</p>
<input
placeholder="Ответ"
v-model="answer"
>
<br>
<input
placeholder="Ваше имя"
v-model="username"
>
<br>
<button
@click="login"
:class="{
wrong: loggedIn === false
}"
>
Ввод
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useStore from '../../store'
import axios from 'axios'
axios.defaults.withCredentials = true
const question = process.env.VUE_APP_QUESTION
const router = useRouter()
const store = useStore()
const answer = ref()
const loggedIn = ref()
const username = ref()
async function login() {
store.username = username.value
await axios
.post(process.env.VUE_APP_BACKEND + '/auth', {
"pass": answer.value,
})
.then(response => {
loggedIn.value = response.status == "200"
router.push('/')
})
axios
.post(process.env.VUE_APP_BACKEND + '/connect', {
'data': {
'username': username.value
}
})
}
</script>
<style scoped>
div {
background-color: #121212;
width: 400px;
margin: auto;
border-radius: 18px;
padding: 40px 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
input {
font-size: 1em;
text-align: center;
padding: 5px 8px;
margin-bottom: 1em;
border-radius: 6px;
border: none;
width: 20ch;
}
button {
color: white;
font-size: 1em;
box-sizing: content-box;
background-color: #5a5a5a;
border-radius: 6px;
border: none;
width: 20ch;
padding: 5px 8px;
cursor: pointer;
}
@media only screen and (max-width: 520px) {
div {
width: 100%;
padding: 40px 0;
}
}
</style>

36
frontend/src/views/Screen/Index.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div v-if="card">
<img
:src="card.image"
>
<div>
{{ users }}
</div>
</div>
</template>
<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import useServerEvents from '../../composables/useServerEvents';
const { addAnswerListener, addUserlistListener } = useServerEvents()
addAnswerListener(console.log)
const card = ref()
const users = ref([])
async function getCard() {
const response = await axios.get(process.env.VUE_APP_BACKEND + '/card')
card.value = response.data
}
addUserlistListener((data) => {
users.value = data
})
onMounted(() => {
getCard()
})
</script>

34
frontend/yarn.lock
View File

@@ -1595,6 +1595,11 @@
optionalDependencies:
prettier "^1.18.2 || ^2.0.0"
"@vue/devtools-api@^6.5.0":
version "6.5.0"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
"@vue/preload-webpack-plugin@^1.1.0":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
@@ -6549,6 +6554,14 @@ pify@^4.0.1:
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
pinia@^2.1.4:
version "2.1.4"
resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.4.tgz#a642adfe6208e10c36d3dc16184a91064788142a"
integrity sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==
dependencies:
"@vue/devtools-api" "^6.5.0"
vue-demi ">=0.14.5"
pinkie-promise@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -8576,6 +8589,11 @@ vm-browserify@^1.0.1:
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
vue-demi@>=0.14.5:
version "0.14.5"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
vue-eslint-parser@^7.10.0:
version "7.11.0"
resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
@@ -8614,6 +8632,20 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-peel@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/vue-peel/-/vue-peel-0.1.1.tgz#a100d1e00c894427765b3842105179c5a1720971"
integrity sha512-A1RN2Hv4Y4OJaDYAc8bmSeEAgkDsGpqTSiWdDOI9bNtNENLmmhSO7I4KeeBnk0f/OftrQnZBsjdbsUm0biBC5A==
dependencies:
vue "^3.2.47"
vue-router@4:
version "4.2.2"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.2.tgz#b0097b66d89ca81c0986be03da244c7b32a4fd81"
integrity sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==
dependencies:
"@vue/devtools-api" "^6.5.0"
vue-spinner@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/vue-spinner/-/vue-spinner-1.0.4.tgz#0e794d9d93acb23b5b6564042157a531e7ce413b"
@@ -8632,7 +8664,7 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue@^3.0.0:
vue@^3.2.47, vue@^3.3.4:
version "3.3.4"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==