63 lines
2.1 KiB
JavaScript
63 lines
2.1 KiB
JavaScript
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;
|
||
|