mirror of
https://github.com/anatolykopyl/vk-bingo.git
synced 2026-03-26 21:04:26 +00:00
Compare commits
1 Commits
d6f1e9ef71
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 5af681939e |
9
backend/Dockerfile
Normal file
9
backend/Dockerfile
Normal file
@@ -0,0 +1,9 @@
|
||||
FROM node:20-alpine
|
||||
LABEL authors="anatolykopyl"
|
||||
|
||||
WORKDIR /usr/node/app
|
||||
COPY package.json yarn.lock ./
|
||||
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
COPY . .
|
||||
11
backend/docker-compose.yml
Normal file
11
backend/docker-compose.yml
Normal file
@@ -0,0 +1,11 @@
|
||||
version: '3'
|
||||
|
||||
services:
|
||||
flexpatrol-bingo:
|
||||
image: git.radner.ru/anatolykopyl/flexpatrol-bingo:latest
|
||||
container_name: flexpatrol-bingo
|
||||
working_dir: /usr/node/app
|
||||
ports:
|
||||
- "3004:3000"
|
||||
command: >
|
||||
sh -c "node index.js"
|
||||
281
backend/index.js
281
backend/index.js
@@ -1,28 +1,24 @@
|
||||
import express from 'express';
|
||||
import session from 'express-session';
|
||||
import mongodb from 'mongodb';
|
||||
import MongoStore from 'connect-mongo';
|
||||
import cors from 'cors';
|
||||
import crypto from 'crypto'
|
||||
import { createNanoEvents } from 'nanoevents';
|
||||
|
||||
import "dotenv/config";
|
||||
|
||||
import names from './names.json' assert { type: "json" };
|
||||
const express = require('express');
|
||||
const session = require('express-session');
|
||||
|
||||
const app = express();
|
||||
|
||||
const emitter = createNanoEvents();
|
||||
const { MongoClient, ObjectId } = mongodb;
|
||||
const { MongoClient, ObjectId } = require('mongodb');
|
||||
const MongoStore = require('connect-mongo');
|
||||
const cors = require('cors');
|
||||
require('dotenv').config();
|
||||
|
||||
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 () => {
|
||||
@@ -85,55 +81,49 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
|
||||
});
|
||||
});
|
||||
|
||||
async function drawCard() {
|
||||
let card;
|
||||
// Тянем карты и отбрасываем их в соответствии с их вероятностью отбрасывания
|
||||
do {
|
||||
/* eslint-disable no-await-in-loop */
|
||||
card = await cardsCollection.aggregate([
|
||||
{
|
||||
$sample: { size: 1 },
|
||||
}, {
|
||||
$unset: ['link', 'date'],
|
||||
},
|
||||
]).toArray();
|
||||
/* eslint-enable no-await-in-loop */
|
||||
[card] = card;
|
||||
} while (Math.random() < dropProb[card.name]);
|
||||
return card;
|
||||
}
|
||||
|
||||
let players = {}
|
||||
let score = {}
|
||||
let card = await drawCard()
|
||||
let oldCard = null;
|
||||
let answers = 0
|
||||
|
||||
app.post('/api/auth', async (req, res) => {
|
||||
const { pass, username } = req.body;
|
||||
|
||||
if (username && !Object.keys(players).includes(username)) {
|
||||
players[username] = null;
|
||||
emitter.emit('connection', Object.keys(players))
|
||||
}
|
||||
|
||||
if (pass && pass.toLowerCase() === process.env.PASSWORD) {
|
||||
req.session.loggedIn = true;
|
||||
return res.status(200).send('Logged in');
|
||||
if (req.session.loggedIn) {
|
||||
res.status(200).send('Logged in');
|
||||
} else {
|
||||
return res.status(401).send('Wrong password');
|
||||
try {
|
||||
const { pass } = req.body;
|
||||
if (pass && pass.toLowerCase() === process.env.PASSWORD) {
|
||||
req.session.loggedIn = true;
|
||||
res.status(200).send('Logged in');
|
||||
} else {
|
||||
res.status(401).send('Wrong password');
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(`Error: ${e}`);
|
||||
res.status(500).send();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/card', async (req, res) => {
|
||||
if (!req.session.loggedIn) {
|
||||
return res.status(403).send();
|
||||
async function drawCard() {
|
||||
let card;
|
||||
// Тянем карты и отбрасываем их в соответствии с их вероятностью отбрасывания
|
||||
do {
|
||||
/* eslint-disable no-await-in-loop */
|
||||
card = await cardsCollection.aggregate([
|
||||
{
|
||||
$sample: { size: 1 },
|
||||
}, {
|
||||
$unset: ['name', 'link', 'date'],
|
||||
},
|
||||
]).toArray();
|
||||
/* eslint-enable no-await-in-loop */
|
||||
[card] = card;
|
||||
} while (Math.random() < dropProb[card.name]);
|
||||
return card;
|
||||
}
|
||||
|
||||
return res.status(200).send({
|
||||
...card,
|
||||
name: undefined
|
||||
});
|
||||
if (req.session.loggedIn) {
|
||||
res.status(200).send(await drawCard());
|
||||
} else {
|
||||
res.status(403).send();
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/meme', async (req, res) => {
|
||||
@@ -150,41 +140,33 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
|
||||
});
|
||||
|
||||
app.post('/api/answer', async (req, res) => {
|
||||
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;
|
||||
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 {
|
||||
req.session.wrong += 1;
|
||||
res.status(403).send();
|
||||
}
|
||||
answersCollection.insertOne({
|
||||
correct,
|
||||
selected: req.body.data.name,
|
||||
});
|
||||
|
||||
players[req.body.data.username] = req.body.data.name;
|
||||
emitter.emit('answer', {
|
||||
username: req.body.data.username,
|
||||
selected: req.body.data.name
|
||||
});
|
||||
|
||||
// return res.status(200).send({
|
||||
// correct,
|
||||
// card,
|
||||
// });
|
||||
return res.status(200).send()
|
||||
});
|
||||
|
||||
app.get('/api/score', (req, res) => {
|
||||
@@ -202,33 +184,31 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
|
||||
});
|
||||
|
||||
app.get('/api/stats', async (req, res) => {
|
||||
if (!req.session.loggedIn) {
|
||||
return res.status(403).send();
|
||||
}
|
||||
|
||||
const stats = await answersCollection.aggregate([
|
||||
{
|
||||
$group: {
|
||||
_id: '$selected',
|
||||
correct: {
|
||||
$sum: {
|
||||
$cond: [
|
||||
'$correct', 1, 0,
|
||||
],
|
||||
if (req.session.loggedIn) {
|
||||
answersCollection.aggregate([
|
||||
{
|
||||
$group: {
|
||||
_id: '$selected',
|
||||
correct: {
|
||||
$sum: {
|
||||
$cond: [
|
||||
'$correct', 1, 0,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
wrong: {
|
||||
$sum: {
|
||||
$cond: [
|
||||
'$correct', 0, 1,
|
||||
],
|
||||
wrong: {
|
||||
$sum: {
|
||||
$cond: [
|
||||
'$correct', 0, 1,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
]).toArray();
|
||||
|
||||
return res.status(200).send(stats);
|
||||
]).toArray().then((stats) => res.status(200).send(stats));
|
||||
} else {
|
||||
res.status(403).send();
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/options', async (req, res) => {
|
||||
@@ -239,82 +219,5 @@ const client = new MongoClient(process.env.URI, { useUnifiedTopology: true });
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/players', async (req, res) => {
|
||||
if (!req.session.loggedIn) {
|
||||
return res.status(403).send();
|
||||
}
|
||||
|
||||
return res.status(200).send(Object.keys(players));
|
||||
})
|
||||
|
||||
app.post('/api/end', async (req, res) => {
|
||||
if (!req.session.loggedIn) {
|
||||
return res.status(403).send();
|
||||
}
|
||||
|
||||
players = {}
|
||||
return res.status(200).send();
|
||||
});
|
||||
|
||||
app.get('/api/stream', async (req, res) => {
|
||||
const id = crypto.randomUUID()
|
||||
|
||||
res.set({
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Cache-Control': 'no-cache',
|
||||
Connection: 'keep-alive',
|
||||
'Content-Type': 'text/event-stream',
|
||||
});
|
||||
res.flushHeaders();
|
||||
|
||||
emitter.on('connection', (players) => {
|
||||
const data = players
|
||||
res.write(`data: ${JSON.stringify(data)}\nevent: userlist\n\n`);
|
||||
})
|
||||
|
||||
emitter.on('answer', async ({
|
||||
username, selected
|
||||
}) => {
|
||||
const data = {
|
||||
username,
|
||||
players,
|
||||
selected
|
||||
}
|
||||
|
||||
res.write(`data: ${JSON.stringify(data)}\nevent: answer\n\n`);
|
||||
|
||||
answers += 1
|
||||
|
||||
if (answers === Object.keys(players).length) {
|
||||
Object.keys(players).forEach((key) => {
|
||||
if (card.name === players[key]) {
|
||||
score[key] = (score[key] ?? 0) + 1
|
||||
}
|
||||
})
|
||||
|
||||
Object.keys(players).forEach((key) => {
|
||||
players[key] = null
|
||||
})
|
||||
answers = 0
|
||||
oldCard = { ...card }
|
||||
card = await drawCard()
|
||||
|
||||
emitter.emit(`allDone-${id}`);
|
||||
}
|
||||
});
|
||||
|
||||
const unbindAllDone = emitter.on(`allDone-${id}`, () => {
|
||||
const data = {
|
||||
correctAnswer: oldCard.name,
|
||||
score
|
||||
}
|
||||
res.write(`data: ${JSON.stringify(data)}\nevent: reveal\n\n`);
|
||||
});
|
||||
|
||||
res.on('close', () => {
|
||||
res.end();
|
||||
});
|
||||
});
|
||||
|
||||
app.listen(process.env.PORT, () => console.log(`Server started on ${process.env.PORT}`));
|
||||
})();
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "nodemon index.js"
|
||||
},
|
||||
@@ -20,8 +19,7 @@
|
||||
"dotenv": "^8.2.0",
|
||||
"express": "^4.17.1",
|
||||
"express-session": "^1.17.1",
|
||||
"mongodb": "^3.6.5",
|
||||
"nanoevents": "^7.0.1"
|
||||
"mongodb": "^3.6.5"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "airbnb-base",
|
||||
|
||||
@@ -1193,11 +1193,6 @@ 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"
|
||||
|
||||
5
frontend/babel.config.js
Normal file
5
frontend/babel.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@@ -4,39 +4,39 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build"
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"pinia": "^2.1.4",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"vue": "^3.3.4",
|
||||
"vue-peel": "^0.1.1",
|
||||
"vue-router": "4",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-spinner": "^1.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"dotenv-webpack": "^7.0.2",
|
||||
"eslint": "8",
|
||||
"eslint-plugin-vue": "8",
|
||||
"sass": "^1.63.4",
|
||||
"vite": "^4.3.9"
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true,
|
||||
"es2022": true
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-recommended",
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"rules": {
|
||||
"vue/multi-word-component-names": 0
|
||||
}
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -7,14 +7,13 @@
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<title>Флекспатруль мультиплеер</title>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="manifest" href="<%= BASE_URL %>manifest.json">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but Флекспатруль мультиплеер doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
@@ -1,52 +1,88 @@
|
||||
<template>
|
||||
<router-view />
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Login from './components/Login.vue'
|
||||
import Game from './components/Game.vue'
|
||||
|
||||
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>
|
||||
@font-face {
|
||||
font-family: "Pangram Sans Rounded";
|
||||
font-weight: bold;
|
||||
src: local("Pangram Sans Rounded"), url("/fonts/PPPangramSansRounded-Bold.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Pangram Sans Rounded";
|
||||
font-weight: 600;
|
||||
src: local("Pangram Sans Rounded"), url("/fonts/PPPangramSansRounded-Semibold.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Pangram Sans Rounded";
|
||||
font-weight: normal;
|
||||
src: local("Pangram Sans Rounded"), url("/fonts/PPPangramSansRounded-Medium.otf") format("opentype");
|
||||
}
|
||||
|
||||
:root {
|
||||
--clr-bg: #ffd537;
|
||||
--clr-accent: #37ffac;
|
||||
--clr-text: #141414;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--clr-bg);
|
||||
}
|
||||
|
||||
input, button {
|
||||
font: inherit;
|
||||
background-color: #5a5a5a;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: "Pangram Sans Rounded", Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: var(--clr-text);
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
color: #f3f3f3;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
#game {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.source {
|
||||
color: #f3f3f350;
|
||||
background-color: #12121250;
|
||||
border-radius: 6px;
|
||||
padding: 3px 6px;
|
||||
position: fixed;
|
||||
width: 20ch;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
z-index: -1;
|
||||
}
|
||||
.source:hover {
|
||||
color: #f3f3f3;
|
||||
background-color: #121212;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 520px) {
|
||||
.source {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
154
frontend/src/components/Game.vue
Normal file
154
frontend/src/components/Game.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<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>
|
||||
41
frontend/src/components/List.vue
Normal file
41
frontend/src/components/List.vue
Normal file
@@ -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;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.option:hover {
|
||||
transform: scale(1.06);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
80
frontend/src/components/Login.vue
Normal file
80
frontend/src/components/Login.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<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>
|
||||
37
frontend/src/components/Result.vue
Normal file
37
frontend/src/components/Result.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<span v-show="!correct" class="wrong">Нет, это был не {{ 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;
|
||||
border-radius: 8px;
|
||||
background-color: #5a5a5a;
|
||||
}
|
||||
|
||||
.correct {
|
||||
color: #121212;
|
||||
background-color: rgb(124, 230, 124);
|
||||
}
|
||||
|
||||
.wrong {
|
||||
color: rgb(255, 71, 71);
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<a
|
||||
class="source"
|
||||
href="https://github.com/anatolykopyl/vk-bingo"
|
||||
target="_blank"
|
||||
>
|
||||
Исходный код
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.source {
|
||||
color: #f3f3f350;
|
||||
background-color: #12121250;
|
||||
border-radius: 6px;
|
||||
padding: 3px 6px;
|
||||
position: fixed;
|
||||
width: 20ch;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
z-index: -1;
|
||||
}
|
||||
.source:hover {
|
||||
color: #f3f3f3;
|
||||
background-color: #121212;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 520px) {
|
||||
.source {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -45,7 +45,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
axios
|
||||
.get(import.meta.env.VITE_APP_BACKEND + '/stats')
|
||||
.get(process.env.VUE_APP_BACKEND + '/stats')
|
||||
.then(response => {
|
||||
response.data.forEach(element => {
|
||||
this.stats[element._id] = element.correct / element.wrong
|
||||
@@ -1,21 +0,0 @@
|
||||
// import useStore from '../store'
|
||||
|
||||
export default () => {
|
||||
// const store = useStore()
|
||||
|
||||
const evtSource = new EventSource(`${import.meta.env.VITE_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)))
|
||||
}
|
||||
|
||||
function addRevealListener(handler) {
|
||||
evtSource.addEventListener('reveal', (event) => handler(JSON.parse(event.data)))
|
||||
}
|
||||
|
||||
return { addAnswerListener, addUserlistListener, addRevealListener }
|
||||
}
|
||||
@@ -1,13 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
pinia.use(piniaPluginPersistedstate);
|
||||
|
||||
app.use(router)
|
||||
app.use(pinia)
|
||||
app.mount('#app')
|
||||
createApp(App).mount('#app')
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
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: '/game', component: Game },
|
||||
{ path: '/', component: Login },
|
||||
{ path: '/screen', component: Screen }
|
||||
]
|
||||
|
||||
export default createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
@@ -1,10 +0,0 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export default defineStore({
|
||||
id: 'store',
|
||||
persist: true,
|
||||
|
||||
state: () => ({
|
||||
username: null
|
||||
}),
|
||||
})
|
||||
@@ -1,9 +0,0 @@
|
||||
@mixin filled-shadow($distance) {
|
||||
$resulting-shadow: null;
|
||||
|
||||
@for $i from 1 through $distance {
|
||||
$resulting-shadow: $resulting-shadow, #{$i}px #{$i}px 0 var(--clr-text);
|
||||
}
|
||||
|
||||
box-shadow: $resulting-shadow;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div class="end">
|
||||
<button
|
||||
@click="endGame"
|
||||
class="endButton"
|
||||
>
|
||||
Закончить игру
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from 'axios'
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter()
|
||||
|
||||
function endGame() {
|
||||
axios.post(import.meta.env.VITE_APP_BACKEND + '/end')
|
||||
router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.end {
|
||||
// position: fixed;
|
||||
// bottom: 8px;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.endButton {
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px dotted var(--clr-text);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,154 +0,0 @@
|
||||
<template>
|
||||
<h1 class="header">Флекспатруль мультиплеер</h1>
|
||||
|
||||
<div class="main">
|
||||
<div
|
||||
class="card"
|
||||
v-if="card"
|
||||
>
|
||||
<img
|
||||
class="meme"
|
||||
:src="card.image"
|
||||
>
|
||||
<h2>Кто скинул этот мем?</h2>
|
||||
<div class="interactive">
|
||||
<transition name="fade-answers" mode="out-in">
|
||||
<List
|
||||
v-if="!showResult"
|
||||
:options="options"
|
||||
@selectedAnswer="selectAnswer"
|
||||
/>
|
||||
<Result
|
||||
v-else
|
||||
:selectedName="selectedAnswer"
|
||||
:correct="correctAnswer"
|
||||
/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EndGame />
|
||||
|
||||
<square-loader
|
||||
v-if="!card"
|
||||
:color="'white'"
|
||||
class="loader"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
import List from './List.vue'
|
||||
import Result from './Result.vue'
|
||||
import EndGame from './EndGame.vue'
|
||||
import useStore from '@/store'
|
||||
import useServerEvents from '@/composables/useServerEvents'
|
||||
|
||||
import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
|
||||
|
||||
const store = useStore()
|
||||
const { addRevealListener } = useServerEvents()
|
||||
|
||||
const options = ref()
|
||||
const card = ref()
|
||||
const correctAnswer = ref()
|
||||
const selectedAnswer = ref()
|
||||
const showResult = ref()
|
||||
|
||||
addRevealListener((data) => {
|
||||
showResult.value = true
|
||||
correctAnswer.value = data.correctAnswer
|
||||
|
||||
setTimeout(() => {
|
||||
getCard()
|
||||
}, 5000)
|
||||
})
|
||||
|
||||
async function getCard() {
|
||||
correctAnswer.value = null
|
||||
selectedAnswer.value = null
|
||||
showResult.value = false
|
||||
card.value = null
|
||||
const response = await axios.get(import.meta.env.VITE_APP_BACKEND + '/card')
|
||||
card.value = response.data
|
||||
}
|
||||
|
||||
async function selectAnswer(selection) {
|
||||
selectedAnswer.value = selection
|
||||
|
||||
await axios.post(import.meta.env.VITE_APP_BACKEND + '/answer', {
|
||||
'data': {
|
||||
'id': card.value._id,
|
||||
'name': selectedAnswer.value,
|
||||
'username': store.username
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
getCard()
|
||||
const response = await axios.get(import.meta.env.VITE_APP_BACKEND + '/options')
|
||||
options.value = response.data
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
padding: 60px;
|
||||
margin: auto;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 162px);
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.meme {
|
||||
width: 100%;
|
||||
border-radius: 32px;
|
||||
border: 3px solid var(--clr-text);
|
||||
@include filled-shadow(16);
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fade-answers-leave-active {
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
.fade-answers-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
.card {
|
||||
width: 94%;
|
||||
padding: 3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="answers"
|
||||
>
|
||||
<span
|
||||
v-for="name in options"
|
||||
:key="name"
|
||||
class="option"
|
||||
:class="{
|
||||
'-selected': selection === name
|
||||
}"
|
||||
@click="selectAnswer(name)"
|
||||
>
|
||||
{{ name }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'List',
|
||||
props: {
|
||||
options: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selection: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectAnswer: function(selection) {
|
||||
if (this.selection) {
|
||||
return
|
||||
}
|
||||
|
||||
this.selection = selection
|
||||
this.$emit('selectedAnswer', selection)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.answers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.option {
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
padding: 2px 6px;
|
||||
transition: transform 0.2s;
|
||||
border: 3px dashed transparent;
|
||||
}
|
||||
|
||||
.option.-selected {
|
||||
border-color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
transform: scale(1.06);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="result"
|
||||
:class="{correct: correct === selectedName}"
|
||||
>
|
||||
<div
|
||||
v-show="correct !== selectedName"
|
||||
class="wrong"
|
||||
>
|
||||
Нет, это был не {{ selectedName }} 😢
|
||||
</div>
|
||||
|
||||
{{ correct }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Result",
|
||||
props: {
|
||||
name: String,
|
||||
selectedName: String,
|
||||
date: String,
|
||||
correct: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.result {
|
||||
padding: 30px 40px;
|
||||
border-radius: 32px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.correct {
|
||||
color: var(--clr-text);
|
||||
background-color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.wrong {
|
||||
color: rgb(255, 71, 71);
|
||||
}
|
||||
</style>
|
||||
@@ -1,168 +0,0 @@
|
||||
<template>
|
||||
<div class="authCard">
|
||||
<h1>Авторизация:</h1>
|
||||
|
||||
<div class="auth">
|
||||
<p>{{ question }}</p>
|
||||
<input
|
||||
v-model="answer"
|
||||
placeholder="Ответ"
|
||||
class="input"
|
||||
>
|
||||
<input
|
||||
v-if="mode === 'player'"
|
||||
v-model="username"
|
||||
placeholder="Ваше имя"
|
||||
class="input"
|
||||
>
|
||||
|
||||
<button
|
||||
v-if="mode === 'player'"
|
||||
class="login"
|
||||
@click="loginPlayer"
|
||||
>
|
||||
Войти как игрок
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="login"
|
||||
@click="loginScreen"
|
||||
>
|
||||
Войти как большой экран
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="switchMode"
|
||||
@click="switchMode"
|
||||
>
|
||||
Я не {{ mode === 'player' ? 'игрок' : 'большой экран' }}!
|
||||
</button>
|
||||
</div>
|
||||
</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 = import.meta.env.VITE_APP_QUESTION
|
||||
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
|
||||
const mode = ref("player")
|
||||
const answer = ref()
|
||||
const username = ref()
|
||||
|
||||
function switchMode() {
|
||||
mode.value = mode.value === 'player' ? 'screen' : 'player'
|
||||
}
|
||||
|
||||
async function loginPlayer() {
|
||||
if (!answer.value || !username.value) {
|
||||
return
|
||||
}
|
||||
|
||||
store.username = username.value
|
||||
|
||||
await axios
|
||||
.post(import.meta.env.VITE_APP_BACKEND + '/auth', {
|
||||
"pass": answer.value,
|
||||
"username": username.value,
|
||||
})
|
||||
|
||||
router.push('/game')
|
||||
}
|
||||
|
||||
async function loginScreen() {
|
||||
store.username = undefined
|
||||
|
||||
await axios
|
||||
.post(import.meta.env.VITE_APP_BACKEND + '/auth', {
|
||||
"pass": answer.value,
|
||||
})
|
||||
|
||||
router.push('/screen')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.auth {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.authCard {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: var(--clr-text);
|
||||
color: var(--clr-text);
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
border-radius: 32px;
|
||||
padding: 40px 40px;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
border: 3px solid var(--clr-text);
|
||||
@include filled-shadow(16);
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
border: 2px solid var(--clr-text);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@include filled-shadow(4);
|
||||
border-radius: 12px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
color: var(--clr-text);
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--clr-bg);
|
||||
border: none;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
border: 2px solid var(--clr-text);
|
||||
@include filled-shadow(4);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.switchMode {
|
||||
position: absolute;
|
||||
color: var(--clr-text);
|
||||
background: var(--clr-accent);
|
||||
font-size: 12px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 100px;
|
||||
border: 2px solid var(--clr-text);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 50%);
|
||||
cursor: pointer;
|
||||
@include filled-shadow(4);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 520px) {
|
||||
.authCard {
|
||||
width: calc(100% - 90px);
|
||||
margin: auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="answer"
|
||||
:style="{
|
||||
transform: `translate(${-50}%, ${-50}%) rotate(${position.rotation}deg)`
|
||||
}"
|
||||
>
|
||||
{{ props.answer }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const props = defineProps(["answer"])
|
||||
const position = reactive({
|
||||
rotation: Math.random() * 20 - 10,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.answer {
|
||||
position: fixed;
|
||||
background: var(--clr-accent);
|
||||
border-radius: 32px;
|
||||
font-size: 30px;
|
||||
padding: 32px;
|
||||
border: 3px solid var(--clr-text);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@@ -1,271 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="card && !loading"
|
||||
class="bigScreen"
|
||||
>
|
||||
<img
|
||||
class="image"
|
||||
:src="card.image"
|
||||
>
|
||||
|
||||
<div class="answersState">
|
||||
<div class="users -unanwsered">
|
||||
<h2 class="usersTitle">
|
||||
Не ответили
|
||||
</h2>
|
||||
<ul>
|
||||
<li
|
||||
v-for="user in unansweredPlayers"
|
||||
:key="user.name"
|
||||
class="user"
|
||||
>
|
||||
<span>
|
||||
{{ user.name }}
|
||||
</span>
|
||||
<span
|
||||
class="score"
|
||||
:class="{
|
||||
'-leader': leader === user.name
|
||||
}"
|
||||
>
|
||||
{{ score[user.name] }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="users">
|
||||
<h2 class="usersTitle">
|
||||
Ответили
|
||||
</h2>
|
||||
<ul>
|
||||
<li
|
||||
v-for="user in answeredPlayers"
|
||||
:key="user.name"
|
||||
class="user"
|
||||
:class="{
|
||||
'-wrong': correctAnswer && user.selected !== correctAnswer,
|
||||
'-correct': correctAnswer && user.selected === correctAnswer
|
||||
}"
|
||||
>
|
||||
<span>
|
||||
{{ user.name }}
|
||||
</span>
|
||||
<span
|
||||
class="score"
|
||||
:class="{
|
||||
'-leader': leader === user.name
|
||||
}"
|
||||
>
|
||||
{{ score[user.name] }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Answer
|
||||
v-if="correctAnswer"
|
||||
:answer="correctAnswer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<square-loader
|
||||
v-else
|
||||
:color="'white'"
|
||||
class="loader"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from 'axios'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import useServerEvents from '@/composables/useServerEvents'
|
||||
import Answer from './Answer.vue'
|
||||
|
||||
import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
|
||||
|
||||
const { addAnswerListener, addUserlistListener, addRevealListener } = useServerEvents()
|
||||
|
||||
const card = ref()
|
||||
const users = ref([])
|
||||
const correctAnswer = ref()
|
||||
const loading = ref()
|
||||
const score = ref({})
|
||||
|
||||
async function getCard() {
|
||||
loading.value = true
|
||||
const response = await axios.get(import.meta.env.VITE_APP_BACKEND + '/card')
|
||||
loading.value = false
|
||||
card.value = response.data
|
||||
}
|
||||
|
||||
async function getPlayers() {
|
||||
const response = await axios.get(import.meta.env.VITE_APP_BACKEND + '/players')
|
||||
response.data.forEach((name) => {
|
||||
users.value.push({
|
||||
name,
|
||||
selected: null
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const answeredPlayers = computed(() => {
|
||||
return users.value.filter((user) => user.selected)
|
||||
})
|
||||
|
||||
const unansweredPlayers = computed(() => {
|
||||
return users.value.filter((user) => !user.selected)
|
||||
})
|
||||
|
||||
const leader = computed(() => {
|
||||
return Object.keys(score.value).sort((a, b) => {
|
||||
return score.value[a] - score.value[b]
|
||||
})[0]
|
||||
})
|
||||
|
||||
addAnswerListener((data) => {
|
||||
users.value = users.value.map((user) => {
|
||||
if (user.name === data.username) {
|
||||
return {
|
||||
...user,
|
||||
selected: data.selected
|
||||
}
|
||||
}
|
||||
|
||||
return user
|
||||
})
|
||||
})
|
||||
|
||||
addUserlistListener((data) => {
|
||||
data.forEach((name) => {
|
||||
users.value.push({
|
||||
name,
|
||||
selected: null
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
addRevealListener((data) => {
|
||||
correctAnswer.value = data.correctAnswer
|
||||
score.value = data.score
|
||||
|
||||
setTimeout(() => {
|
||||
getCard()
|
||||
correctAnswer.value = null
|
||||
users.value = users.value.map((user) => ({
|
||||
...user,
|
||||
selected: null
|
||||
}))
|
||||
}, 5000)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getCard()
|
||||
getPlayers()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bigScreen {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
gap: 64px;
|
||||
align-items: center;
|
||||
padding: 64px;
|
||||
background: var(--clr-bg);
|
||||
box-sizing: border-box;
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.image {
|
||||
display: block;
|
||||
max-width: 60%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
background: var(--clr-text);
|
||||
border: 3px solid var(--clr-text);
|
||||
@include filled-shadow(16);
|
||||
border-radius: 64px;
|
||||
animation-name: rock;
|
||||
animation-duration: 5s;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes rock {
|
||||
from {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
.users {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.users.-unanwsered {
|
||||
border-right: 1px dashed var(--clr-text);
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user.-correct {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.user.-wrong {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.score {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 64px;
|
||||
border: 2px solid var(--clr-text);
|
||||
background: var(--clr-bg);
|
||||
color: var(--clr-text);
|
||||
|
||||
&.-leader {
|
||||
background: var(--clr-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.usersTitle {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.answersState {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin-top: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
const path = require("path");
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `
|
||||
@use 'sass:math';
|
||||
@import '@/styles/_prepend.scss';
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 8080
|
||||
}
|
||||
})
|
||||
8816
frontend/yarn.lock
8816
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user