86 lines
2.5 KiB
React
86 lines
2.5 KiB
React
|
/**
|
||
|
|
* 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';
|
||
|
|
|
||
|
|
const WaitingOverlayContent = ({ shareUrl, currentGameAssoc }) => {
|
||
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Fragment>
|
||
|
|
<div className="waiting-options">
|
||
|
|
<div className="waiting-option">
|
||
|
|
<div className="waiting-option-header">
|
||
|
|
<i className="fa fa-link" />
|
||
|
|
<span>Invite a Friend</span>
|
||
|
|
</div>
|
||
|
|
<p className="waiting-option-desc">Share this link with your opponent</p>
|
||
|
|
<ShareLinkBox
|
||
|
|
url={shareUrl}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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(() => {});
|
||
|
|
};
|
||
|
|
|
||
|
|
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;
|