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

assets/js/mine-seeker/hooks/useServerCommunication.jsx

@@ -7,41 +7,12 @@
  * file that was distributed with this source code.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useGame } from '@mine-contexts';
 import { DESC } from '@mine-utils';
 import useStepTimer from './useStepTimer';
-
-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">
-      <p className="share-invite-label">Share this link with your opponent</p>
-      <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>
-  );
-};
+import { WaitingOverlayContent } from '@mine-components';
 
 /** Handles all server communication: SSE (Mercure), REST calls, and the initialization lifecycle. */
 const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
@@ -106,7 +77,10 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
   const wInit = (revealedCells = []) => {
     setGridReady(true);
     showOverlay('We are waiting for your opponent...', gameAssoc ? (
-      <ShareLinkBox url={`${window.location.href}/${gameAssoc}`} />
+      <WaitingOverlayContent
+        shareUrl={`${window.location.href}/${gameAssoc}`}
+        currentGameAssoc={gameAssoc}
+      />
     ) : '');
     setTimeout(() => revealedCells.forEach(cell => applyRevealedCell(cell, cell.player)), 0);
   };