chg: usr: refactor and redesign the gfx on front-end #4

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

@@ -7,12 +7,42 @@
  * file that was distributed with this source code.
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } 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>
+  );
+};
+
 /** Handles all server communication: SSE (Mercure), REST calls, and the initialization lifecycle. */
 const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
   const {
@@ -76,13 +106,7 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
   const wInit = (revealedCells = []) => {
     setGridReady(true);
     showOverlay('We are waiting for your opponent...', gameAssoc ? (
-      <div>
-        <h3>Share this unique link w/ your opponent</h3>
-        <div className="clippy">
-          <input id="foo" defaultValue={`${window.location.href}/${gameAssoc}`} />
-        </div>
-        <a href={`/play/${gameAssoc}`} target="_blank">Play w/ me!</a>
-      </div>
+      <ShareLinkBox url={`${window.location.href}/${gameAssoc}`} />
     ) : '');
     setTimeout(() => revealedCells.forEach(cell => applyRevealedCell(cell, cell.player)), 0);
   };