mirror of
https://github.com/anatolykopyl/vk-bingo.git
synced 2026-03-26 04:44:26 +00:00
Added sse and a new screen
This commit is contained in:
151
backend/index.js
151
backend/index.js
@@ -1,24 +1,27 @@
|
||||
const express = require('express');
|
||||
const session = require('express-session');
|
||||
import express from 'express';
|
||||
import session from 'express-session';
|
||||
import mongodb from 'mongodb';
|
||||
import MongoStore from 'connect-mongo';
|
||||
import cors from 'cors';
|
||||
import { createNanoEvents } from 'nanoevents';
|
||||
|
||||
import "dotenv/config";
|
||||
|
||||
import names from './names.json' assert { type: "json" };
|
||||
|
||||
const app = express();
|
||||
const { MongoClient, ObjectId } = require('mongodb');
|
||||
const MongoStore = require('connect-mongo');
|
||||
const cors = require('cors');
|
||||
require('dotenv').config();
|
||||
|
||||
const emitter = createNanoEvents();
|
||||
const { MongoClient, ObjectId } = mongodb;
|
||||
|
||||
app.use(cors({
|
||||
origin: [
|
||||
process.env.FRONTEND,
|
||||
],
|
||||
origin: process.env.FRONTEND,
|
||||
credentials: true,
|
||||
exposedHeaders: ['set-cookie'],
|
||||
}));
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
|
||||
const names = require('./names.json');
|
||||
|
||||
const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
|
||||
|
||||
(async () => {
|
||||
@@ -139,34 +142,40 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
|
||||
}
|
||||
});
|
||||
|
||||
const state = {}
|
||||
app.post('/api/answer', async (req, res) => {
|
||||
if (req.session.loggedIn) {
|
||||
if (req.body.data.id && req.body.data.name) {
|
||||
const card = await cardsCollection.findOne({ _id: ObjectId(req.body.data.id) });
|
||||
if (card) {
|
||||
const correct = card.name === req.body.data.name;
|
||||
if (correct) {
|
||||
req.session.right += 1;
|
||||
} else {
|
||||
req.session.wrong += 1;
|
||||
}
|
||||
answersCollection.insertOne({
|
||||
correct,
|
||||
selected: req.body.data.name,
|
||||
});
|
||||
res.status(200).send({
|
||||
correct,
|
||||
card,
|
||||
});
|
||||
} else {
|
||||
res.status(500).send();
|
||||
}
|
||||
} else {
|
||||
res.status(400).send();
|
||||
}
|
||||
} else {
|
||||
res.status(403).send();
|
||||
if (!req.session.loggedIn) {
|
||||
return res.status(403).send();
|
||||
}
|
||||
|
||||
if (!req.body.data.id || !req.body.data.name || !req.body.data.username) {
|
||||
return res.status(400).send();
|
||||
}
|
||||
|
||||
const card = await cardsCollection.findOne({ _id: ObjectId(req.body.data.id) });
|
||||
if (!card) {
|
||||
return res.status(500).send();
|
||||
}
|
||||
|
||||
const correct = card.name === req.body.data.name;
|
||||
if (correct) {
|
||||
req.session.right += 1;
|
||||
} else {
|
||||
req.session.wrong += 1;
|
||||
}
|
||||
answersCollection.insertOne({
|
||||
correct,
|
||||
selected: req.body.data.name,
|
||||
});
|
||||
|
||||
state[req.body.data.username] = true
|
||||
emitter.emit('answer', req.body.data.username);
|
||||
|
||||
// return res.status(200).send({
|
||||
// correct,
|
||||
// card,
|
||||
// });
|
||||
return res.status(200).send()
|
||||
});
|
||||
|
||||
app.get('/api/score', (req, res) => {
|
||||
@@ -219,5 +228,73 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
|
||||
}
|
||||
});
|
||||
|
||||
let usernames = new Set();
|
||||
app.post('/api/connect', async (req, res) => {
|
||||
if (!req.session.loggedIn) {
|
||||
return res.status(403).send();
|
||||
}
|
||||
|
||||
const { username } = req.body;
|
||||
usernames.add(username);
|
||||
state[username] = false;
|
||||
emitter.emit('connection', usernames)
|
||||
|
||||
return res.status(200).send();
|
||||
});
|
||||
|
||||
app.post('/api/end', async (req, res) => {
|
||||
if (!req.session.loggedIn) {
|
||||
return res.status(403).send();
|
||||
}
|
||||
|
||||
usernames = new Set();
|
||||
state = {}
|
||||
return res.status(200).send();
|
||||
});
|
||||
|
||||
app.get('/api/stream', async (req, res) => {
|
||||
res.set({
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Cache-Control': 'no-cache',
|
||||
Connection: 'keep-alive',
|
||||
'Content-Type': 'text/event-stream',
|
||||
});
|
||||
res.flushHeaders();
|
||||
|
||||
emitter.on('connection', (usernames) => {
|
||||
const data = usernames
|
||||
res.write(`data: ${JSON.stringify(data)}\nevent: userlist\n\n`);
|
||||
})
|
||||
|
||||
emitter.on('answer', (username) => {
|
||||
const data = {
|
||||
username,
|
||||
state
|
||||
}
|
||||
res.write(`data: ${JSON.stringify(data)}\nevent: answer\n\n`);
|
||||
});
|
||||
|
||||
emitter.on('allDone', () => {
|
||||
const data = {}
|
||||
res.write(`data: ${JSON.stringify(data)}\nevent: reveal\n\n`);
|
||||
});
|
||||
|
||||
res.on('close', () => {
|
||||
res.end();
|
||||
});
|
||||
});
|
||||
|
||||
let answers = 0;
|
||||
emitter.on('answer', () => {
|
||||
answers += 1;
|
||||
|
||||
if (answers === usernames.length) {
|
||||
Object.keys(state).forEach((key) => {
|
||||
state[key] = false
|
||||
})
|
||||
emitter.emit('allDone');
|
||||
}
|
||||
});
|
||||
|
||||
app.listen(process.env.PORT, () => console.log(`Server started on ${process.env.PORT}`));
|
||||
})();
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "nodemon index.js"
|
||||
},
|
||||
@@ -19,7 +20,8 @@
|
||||
"dotenv": "^8.2.0",
|
||||
"express": "^4.17.1",
|
||||
"express-session": "^1.17.1",
|
||||
"mongodb": "^3.6.5"
|
||||
"mongodb": "^3.6.5",
|
||||
"nanoevents": "^7.0.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "airbnb-base",
|
||||
|
||||
@@ -1193,6 +1193,11 @@ ms@2.1.3, ms@^2.1.1:
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
|
||||
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
|
||||
|
||||
nanoevents@^7.0.1:
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/nanoevents/-/nanoevents-7.0.1.tgz#181580b47787688d8cac775b977b1cf24e26e570"
|
||||
integrity sha512-o6lpKiCxLeijK4hgsqfR6CNToPyRU3keKyyI6uwuHRvpRTbZ0wXw51WRgyldVugZqoJfkGFrjrIenYH3bfEO3Q==
|
||||
|
||||
natural-compare@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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
17
frontend/src/composables/useServerEvents.js
Normal 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 }
|
||||
}
|
||||
@@ -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
15
frontend/src/router.js
Normal 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
7
frontend/src/store.js
Normal 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
18
frontend/src/views/Game/EndGame.vue
Normal 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
153
frontend/src/views/Game/Index.vue
Normal 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>
|
||||
101
frontend/src/views/Login/Index.vue
Normal file
101
frontend/src/views/Login/Index.vue
Normal 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
36
frontend/src/views/Screen/Index.vue
Normal 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>
|
||||
@@ -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==
|
||||
|
||||
Reference in New Issue
Block a user