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