105 lines
3.1 KiB
JavaScript
105 lines
3.1 KiB
JavaScript
/**
|
|
* This file is part of the SplendidBear Websites' projects.
|
|
*
|
|
* Copyright (c) 2026 @ www.splendidbear.org
|
|
*
|
|
* For the full copyright and license information, please view the LICENSE
|
|
* file that was distributed with this source code.
|
|
*/
|
|
import { Fragment, useState } from 'react';
|
|
import { OnlinePlayersDialog } from '@mine-components';
|
|
import { bool, string } from 'prop-types';
|
|
|
|
const WaitingOverlayContent = ({ shareUrl, currentGameAssoc, opponentName = '', inviteOnly = false }) => {
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const inviteHeader = inviteOnly && opponentName
|
|
? `Invite ${opponentName}`
|
|
: 'Invite a Friend';
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className={`waiting-options${inviteOnly ? ' waiting-options--invite-only' : ''}`}>
|
|
<div className="waiting-option">
|
|
<div className="waiting-option-header">
|
|
<i className="fa fa-link" />
|
|
<span>{inviteHeader}</span>
|
|
</div>
|
|
<p className="waiting-option-desc">Share this link with your opponent</p>
|
|
<ShareLinkBox
|
|
url={shareUrl}
|
|
/>
|
|
</div>
|
|
{!inviteOnly && (
|
|
<Fragment>
|
|
<div className="waiting-divider">
|
|
<span>OR</span>
|
|
</div>
|
|
<div className="waiting-option">
|
|
<div className="waiting-option-header">
|
|
<i className="fa fa-users" />
|
|
<span>Challenge a Player</span>
|
|
</div>
|
|
<p className="waiting-option-desc">Browse online players and challenge them</p>
|
|
<button
|
|
className="browse-players-btn"
|
|
onClick={() => setDialogOpen(true)}
|
|
>
|
|
<i className="fa fa-search" />
|
|
Browse Players
|
|
</button>
|
|
</div>
|
|
</Fragment>
|
|
)}
|
|
</div>
|
|
|
|
{!inviteOnly && (
|
|
<OnlinePlayersDialog
|
|
open={dialogOpen}
|
|
onClose={() => setDialogOpen(false)}
|
|
currentGameAssoc={currentGameAssoc}
|
|
/>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
const ShareLinkBox = ({ url }) => {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(url)
|
|
.then(() => {
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2500);
|
|
})
|
|
.catch(() => null);
|
|
};
|
|
|
|
return (
|
|
<div className="share-invite">
|
|
<div className="share-url-box" onClick={e => e.currentTarget.querySelector('input').select()}>
|
|
<i className="fa fa-link share-url-icon" />
|
|
<input
|
|
className="share-url-input"
|
|
readOnly
|
|
value={url}
|
|
onClick={e => e.target.select()}
|
|
/>
|
|
</div>
|
|
<button className={`share-copy-btn${copied ? ' copied' : ''}`} onClick={handleCopy}>
|
|
<i className={`fa ${copied ? 'fa-check' : 'fa-clipboard'}`} />
|
|
{copied ? 'Copied!' : 'Copy Link'}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WaitingOverlayContent;
|
|
|
|
WaitingOverlayContent.propTypes = {
|
|
shareUrl: string.isRequired,
|
|
currentGameAssoc: string,
|
|
opponentName: string,
|
|
inviteOnly: bool,
|
|
};
|