players
This commit is contained in:
parent
3b56ee6658
commit
f5eb2fc8a9
8 changed files with 843 additions and 0 deletions
39
.dockerignore
Normal file
39
.dockerignore
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
# Dependencies
|
||||||
|
node_modules
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
|
# Build output
|
||||||
|
dist
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode
|
||||||
|
.idea
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Git
|
||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
|
||||||
|
# Documentation and development files
|
||||||
|
*.md
|
||||||
|
!README.md
|
||||||
|
*.py
|
||||||
|
|
||||||
|
# Environment
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Testing
|
||||||
|
coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
33
Dockerfile
Normal file
33
Dockerfile
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
# Multi-stage build для статического сайта
|
||||||
|
# Stage 1: Build
|
||||||
|
FROM node:18-alpine AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Копируем файлы зависимостей
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# Устанавливаем зависимости
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
# Копируем исходный код
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# Собираем приложение
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Stage 2: Serve
|
||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
# Копируем собранные файлы из builder stage
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
|
||||||
|
# Копируем конфигурацию nginx
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
# Открываем порт 80
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
# Запускаем nginx
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
|
|
||||||
35
nginx.conf
Normal file
35
nginx.conf
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name _;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Gzip compression
|
||||||
|
gzip on;
|
||||||
|
gzip_vary on;
|
||||||
|
gzip_min_length 1024;
|
||||||
|
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
|
||||||
|
|
||||||
|
# Security headers
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||||
|
add_header X-Content-Type-Options "nosniff" always;
|
||||||
|
add_header X-XSS-Protection "1; mode=block" always;
|
||||||
|
|
||||||
|
# SPA routing support - все запросы направляются на index.html
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Кэширование статических ресурсов
|
||||||
|
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
# Не кэшируем HTML
|
||||||
|
location ~* \.html$ {
|
||||||
|
expires -1;
|
||||||
|
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
89
src/components/Players.css
Normal file
89
src/components/Players.css
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
.players-container {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
border-color: rgba(255, 215, 0, 0.4);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item.player-active {
|
||||||
|
background: rgba(255, 215, 0, 0.25);
|
||||||
|
border-color: #ffd700;
|
||||||
|
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-name {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item.player-active .player-name {
|
||||||
|
color: #ffd700;
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-score {
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
min-width: 40px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item.player-active .player-score {
|
||||||
|
color: #ffd700;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.players-list {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item {
|
||||||
|
padding: 8px 16px;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-name {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-score {
|
||||||
|
font-size: 1rem;
|
||||||
|
min-width: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-item.player-active .player-score {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
30
src/components/Players.jsx
Normal file
30
src/components/Players.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import './Players.css'
|
||||||
|
|
||||||
|
const Players = ({ players, currentPlayerId, playerScores, onSelectPlayer }) => {
|
||||||
|
if (players.length === 0) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="players-container">
|
||||||
|
<div className="players-list">
|
||||||
|
{players.map((player) => {
|
||||||
|
const isActive = currentPlayerId === player.id
|
||||||
|
const score = playerScores[player.id] || 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={player.id}
|
||||||
|
className={`player-item ${isActive ? 'player-active' : ''}`}
|
||||||
|
onClick={() => onSelectPlayer(player.id)}
|
||||||
|
>
|
||||||
|
<span className="player-name">{player.name}</span>
|
||||||
|
<span className="player-score">{score}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Players
|
||||||
|
|
||||||
211
src/components/PlayersModal.css
Normal file
211
src/components/PlayersModal.css
Normal file
|
|
@ -0,0 +1,211 @@
|
||||||
|
.players-modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-content {
|
||||||
|
background: rgba(20, 20, 30, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 30px;
|
||||||
|
max-width: 500px;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 2px solid rgba(255, 215, 0, 0.3);
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-title {
|
||||||
|
color: #ffd700;
|
||||||
|
font-size: 2rem;
|
||||||
|
margin: 0;
|
||||||
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-close {
|
||||||
|
background: rgba(255, 107, 107, 0.2);
|
||||||
|
color: #ff6b6b;
|
||||||
|
border: 2px solid rgba(255, 107, 107, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-close:hover {
|
||||||
|
background: rgba(255, 107, 107, 0.4);
|
||||||
|
border-color: #ff6b6b;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-add-form {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border: 2px solid rgba(255, 215, 0, 0.3);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1rem;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-input::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-input:focus {
|
||||||
|
border-color: #ffd700;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-add-button {
|
||||||
|
padding: 15px 30px;
|
||||||
|
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-add-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-add-button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 15px 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-color: rgba(255, 215, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-item-name {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-remove-button {
|
||||||
|
background: rgba(255, 107, 107, 0.3);
|
||||||
|
color: #ff6b6b;
|
||||||
|
border: 2px solid rgba(255, 107, 107, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-remove-button:hover {
|
||||||
|
background: rgba(255, 107, 107, 0.5);
|
||||||
|
border-color: #ff6b6b;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-empty {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.players-modal-content {
|
||||||
|
padding: 20px;
|
||||||
|
max-height: 90vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-close {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-add-form {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-input {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 12px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-add-button {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 12px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.players-modal-item-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
74
src/components/PlayersModal.jsx
Normal file
74
src/components/PlayersModal.jsx
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import './PlayersModal.css'
|
||||||
|
|
||||||
|
const PlayersModal = ({ isOpen, onClose, players, onAddPlayer, onRemovePlayer }) => {
|
||||||
|
const [newPlayerName, setNewPlayerName] = useState('')
|
||||||
|
|
||||||
|
if (!isOpen) return null
|
||||||
|
|
||||||
|
const handleAddPlayer = (e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
if (newPlayerName.trim()) {
|
||||||
|
onAddPlayer(newPlayerName.trim())
|
||||||
|
setNewPlayerName('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBackdropClick = (e) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="players-modal-backdrop" onClick={handleBackdropClick}>
|
||||||
|
<div className="players-modal-content">
|
||||||
|
<div className="players-modal-header">
|
||||||
|
<h2 className="players-modal-title">Управление участниками</h2>
|
||||||
|
<button className="players-modal-close" onClick={onClose}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleAddPlayer} className="players-modal-add-form">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={newPlayerName}
|
||||||
|
onChange={(e) => setNewPlayerName(e.target.value)}
|
||||||
|
placeholder="Введите имя участника"
|
||||||
|
className="players-modal-input"
|
||||||
|
maxLength={30}
|
||||||
|
autoFocus
|
||||||
|
/>
|
||||||
|
<button type="submit" className="players-modal-add-button">
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="players-modal-list">
|
||||||
|
{players.length === 0 ? (
|
||||||
|
<p className="players-modal-empty">Нет участников. Добавьте участников для начала игры.</p>
|
||||||
|
) : (
|
||||||
|
players.map((player) => (
|
||||||
|
<div key={player.id} className="players-modal-item">
|
||||||
|
<span className="players-modal-item-name">{player.name}</span>
|
||||||
|
{players.length > 1 && (
|
||||||
|
<button
|
||||||
|
className="players-modal-remove-button"
|
||||||
|
onClick={() => onRemovePlayer(player.id)}
|
||||||
|
title="Удалить участника"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PlayersModal
|
||||||
|
|
||||||
332
src/components/QuestionsModal.jsx
Normal file
332
src/components/QuestionsModal.jsx
Normal file
|
|
@ -0,0 +1,332 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import './QuestionsModal.css'
|
||||||
|
|
||||||
|
const QuestionsModal = ({ isOpen, onClose, questions, onUpdateQuestions }) => {
|
||||||
|
const [editingQuestion, setEditingQuestion] = useState(null)
|
||||||
|
const [questionText, setQuestionText] = useState('')
|
||||||
|
const [answers, setAnswers] = useState([
|
||||||
|
{ text: '', points: 100 },
|
||||||
|
{ text: '', points: 80 },
|
||||||
|
{ text: '', points: 60 },
|
||||||
|
{ text: '', points: 40 },
|
||||||
|
{ text: '', points: 20 },
|
||||||
|
{ text: '', points: 10 },
|
||||||
|
])
|
||||||
|
const [jsonError, setJsonError] = useState('')
|
||||||
|
|
||||||
|
if (!isOpen) return null
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setEditingQuestion(null)
|
||||||
|
setQuestionText('')
|
||||||
|
setAnswers([
|
||||||
|
{ text: '', points: 100 },
|
||||||
|
{ text: '', points: 80 },
|
||||||
|
{ text: '', points: 60 },
|
||||||
|
{ text: '', points: 40 },
|
||||||
|
{ text: '', points: 20 },
|
||||||
|
{ text: '', points: 10 },
|
||||||
|
])
|
||||||
|
setJsonError('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBackdropClick = (e) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
onClose()
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
onClose()
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (question) => {
|
||||||
|
setEditingQuestion(question)
|
||||||
|
setQuestionText(question.text)
|
||||||
|
setAnswers([...question.answers])
|
||||||
|
setJsonError('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancelEdit = () => {
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAnswerChange = (index, field, value) => {
|
||||||
|
const updatedAnswers = [...answers]
|
||||||
|
if (field === 'text') {
|
||||||
|
updatedAnswers[index].text = value
|
||||||
|
} else if (field === 'points') {
|
||||||
|
updatedAnswers[index].points = parseInt(value) || 0
|
||||||
|
}
|
||||||
|
setAnswers(updatedAnswers)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAddAnswer = () => {
|
||||||
|
const minPoints = Math.min(...answers.map(a => a.points))
|
||||||
|
setAnswers([...answers, { text: '', points: Math.max(0, minPoints - 10) }])
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRemoveAnswer = (index) => {
|
||||||
|
if (answers.length > 1) {
|
||||||
|
setAnswers(answers.filter((_, i) => i !== index))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const validateForm = () => {
|
||||||
|
if (!questionText.trim()) {
|
||||||
|
setJsonError('Введите текст вопроса')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (answers.length === 0) {
|
||||||
|
setJsonError('Добавьте хотя бы один ответ')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const hasEmptyAnswers = answers.some(a => !a.text.trim())
|
||||||
|
if (hasEmptyAnswers) {
|
||||||
|
setJsonError('Заполните все ответы')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
if (!validateForm()) return
|
||||||
|
|
||||||
|
const questionData = {
|
||||||
|
id: editingQuestion ? editingQuestion.id : Date.now(),
|
||||||
|
text: questionText.trim(),
|
||||||
|
answers: answers
|
||||||
|
.filter(a => a.text.trim())
|
||||||
|
.map(a => ({
|
||||||
|
text: a.text.trim(),
|
||||||
|
points: a.points,
|
||||||
|
})),
|
||||||
|
}
|
||||||
|
|
||||||
|
let updatedQuestions
|
||||||
|
if (editingQuestion) {
|
||||||
|
updatedQuestions = questions.map(q =>
|
||||||
|
q.id === editingQuestion.id ? questionData : q
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
updatedQuestions = [...questions, questionData]
|
||||||
|
}
|
||||||
|
|
||||||
|
onUpdateQuestions(updatedQuestions)
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = (questionId) => {
|
||||||
|
if (window.confirm('Вы уверены, что хотите удалить этот вопрос?')) {
|
||||||
|
const updatedQuestions = questions.filter(q => q.id !== questionId)
|
||||||
|
onUpdateQuestions(updatedQuestions)
|
||||||
|
if (editingQuestion && editingQuestion.id === questionId) {
|
||||||
|
resetForm()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExportJson = () => {
|
||||||
|
try {
|
||||||
|
const jsonString = JSON.stringify(questions, null, 2)
|
||||||
|
const blob = new Blob([jsonString], { type: 'application/json' })
|
||||||
|
const url = URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = url
|
||||||
|
link.download = 'questions.json'
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
URL.revokeObjectURL(url)
|
||||||
|
setJsonError('')
|
||||||
|
} catch (error) {
|
||||||
|
setJsonError('Ошибка при экспорте: ' + error.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleImportJson = () => {
|
||||||
|
const input = document.createElement('input')
|
||||||
|
input.type = 'file'
|
||||||
|
input.accept = '.json'
|
||||||
|
input.onchange = (e) => {
|
||||||
|
const file = e.target.files[0]
|
||||||
|
if (!file) return
|
||||||
|
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = (event) => {
|
||||||
|
try {
|
||||||
|
const jsonContent = JSON.parse(event.target.result)
|
||||||
|
|
||||||
|
if (!Array.isArray(jsonContent)) {
|
||||||
|
setJsonError('JSON должен содержать массив вопросов')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Валидация структуры
|
||||||
|
const isValid = jsonContent.every(q =>
|
||||||
|
q.id &&
|
||||||
|
typeof q.text === 'string' &&
|
||||||
|
Array.isArray(q.answers) &&
|
||||||
|
q.answers.every(a => a.text && typeof a.points === 'number')
|
||||||
|
)
|
||||||
|
|
||||||
|
if (!isValid) {
|
||||||
|
setJsonError('Неверный формат JSON. Ожидается массив объектов с полями: id, text, answers')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
onUpdateQuestions(jsonContent)
|
||||||
|
setJsonError('')
|
||||||
|
alert(`Успешно импортировано ${jsonContent.length} вопросов`)
|
||||||
|
} catch (error) {
|
||||||
|
setJsonError('Ошибка при импорте: ' + error.message)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
reader.readAsText(file)
|
||||||
|
}
|
||||||
|
input.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="questions-modal-backdrop" onClick={handleBackdropClick}>
|
||||||
|
<div className="questions-modal-content">
|
||||||
|
<div className="questions-modal-header">
|
||||||
|
<h2 className="questions-modal-title">Управление вопросами</h2>
|
||||||
|
<button className="questions-modal-close" onClick={handleClose}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="questions-modal-actions">
|
||||||
|
<button
|
||||||
|
className="questions-modal-export-button"
|
||||||
|
onClick={handleExportJson}
|
||||||
|
>
|
||||||
|
📥 Экспорт JSON
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="questions-modal-import-button"
|
||||||
|
onClick={handleImportJson}
|
||||||
|
>
|
||||||
|
📤 Импорт JSON
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{jsonError && (
|
||||||
|
<div className="questions-modal-error">{jsonError}</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="questions-modal-form">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={questionText}
|
||||||
|
onChange={(e) => setQuestionText(e.target.value)}
|
||||||
|
placeholder="Введите текст вопроса"
|
||||||
|
className="questions-modal-input"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="questions-modal-answers">
|
||||||
|
<div className="questions-modal-answers-header">
|
||||||
|
<span>Ответы:</span>
|
||||||
|
<button
|
||||||
|
className="questions-modal-add-answer-button"
|
||||||
|
onClick={handleAddAnswer}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
+ Добавить ответ
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{answers.map((answer, index) => (
|
||||||
|
<div key={index} className="questions-modal-answer-row">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={answer.text}
|
||||||
|
onChange={(e) => handleAnswerChange(index, 'text', e.target.value)}
|
||||||
|
placeholder={`Ответ ${index + 1}`}
|
||||||
|
className="questions-modal-answer-input"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={answer.points}
|
||||||
|
onChange={(e) => handleAnswerChange(index, 'points', e.target.value)}
|
||||||
|
className="questions-modal-points-input"
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
{answers.length > 1 && (
|
||||||
|
<button
|
||||||
|
className="questions-modal-remove-answer-button"
|
||||||
|
onClick={() => handleRemoveAnswer(index)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="questions-modal-form-buttons">
|
||||||
|
<button
|
||||||
|
className="questions-modal-save-button"
|
||||||
|
onClick={handleSave}
|
||||||
|
>
|
||||||
|
{editingQuestion ? 'Сохранить изменения' : 'Добавить вопрос'}
|
||||||
|
</button>
|
||||||
|
{editingQuestion && (
|
||||||
|
<button
|
||||||
|
className="questions-modal-cancel-button"
|
||||||
|
onClick={handleCancelEdit}
|
||||||
|
>
|
||||||
|
Отмена
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="questions-modal-list">
|
||||||
|
<h3 className="questions-modal-list-title">
|
||||||
|
Вопросы ({questions.length})
|
||||||
|
</h3>
|
||||||
|
{questions.length === 0 ? (
|
||||||
|
<p className="questions-modal-empty">Нет вопросов. Добавьте вопросы для игры.</p>
|
||||||
|
) : (
|
||||||
|
<div className="questions-modal-items">
|
||||||
|
{questions.map((question) => (
|
||||||
|
<div key={question.id} className="questions-modal-item">
|
||||||
|
<div className="questions-modal-item-content">
|
||||||
|
<div className="questions-modal-item-text">{question.text}</div>
|
||||||
|
<div className="questions-modal-item-info">
|
||||||
|
{question.answers.length} ответов
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="questions-modal-item-actions">
|
||||||
|
<button
|
||||||
|
className="questions-modal-edit-button"
|
||||||
|
onClick={() => handleEdit(question)}
|
||||||
|
title="Редактировать"
|
||||||
|
>
|
||||||
|
✏️
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="questions-modal-delete-button"
|
||||||
|
onClick={() => handleDelete(question.id)}
|
||||||
|
title="Удалить"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default QuestionsModal
|
||||||
|
|
||||||
Loading…
Reference in a new issue