chg: usr: re-implement the waiting for opponent dialog - refactor its gfx - & add online user selection dialog #4

assets/js/mine-seeker/components/WaitingOverlayContent.jsx

@@ -0,0 +1,85 @@
+/**
+ * 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;