64 lines
2.1 KiB
React
64 lines
2.1 KiB
React
|
import React from 'react';
|
|||
|
|
import './QRModal.css';
|
|||
|
|
|
|||
|
|
const QRModal = ({ isOpen, onClose, qrCode, roomCode }) => {
|
|||
|
|
if (!isOpen) return null;
|
|||
|
|
|
|||
|
|
const handleBackdropClick = (e) => {
|
|||
|
|
if (e.target === e.currentTarget) {
|
|||
|
|
onClose();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Используем абсолютный URL для работы из любого приложения
|
|||
|
|
const origin = window.location.origin ||
|
|||
|
|
`${window.location.protocol}//${window.location.host}`;
|
|||
|
|
const joinUrl = `${origin}/join-room?code=${roomCode}`;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="qr-modal-backdrop" onClick={handleBackdropClick}>
|
|||
|
|
<div className="qr-modal-content">
|
|||
|
|
<div className="qr-modal-header">
|
|||
|
|
<h2 className="qr-modal-title">QR-код для присоединения</h2>
|
|||
|
|
<button className="qr-modal-close" onClick={onClose}>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="qr-modal-body">
|
|||
|
|
<p className="qr-modal-description">
|
|||
|
|
Отсканируйте этот QR-код, чтобы быстро присоединиться к комнате.
|
|||
|
|
Игроки могут использовать камеру своего телефона для сканирования.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
{qrCode && (
|
|||
|
|
<div className="qr-modal-image-container">
|
|||
|
|
<img src={qrCode} alt="QR Code" className="qr-modal-image" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="qr-modal-code-info">
|
|||
|
|
<p className="qr-modal-code-label">Код комнаты:</p>
|
|||
|
|
<p className="qr-modal-code-value">{roomCode}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="qr-modal-url-info">
|
|||
|
|
<p className="qr-modal-url-label">Или перейдите по ссылке:</p>
|
|||
|
|
<a
|
|||
|
|
href={joinUrl}
|
|||
|
|
className="qr-modal-url-link"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
>
|
|||
|
|
{joinUrl}
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default QRModal;
|
|||
|
|
|