new: usr: add missing buttons for overlays #7

assets/js/mine-seeker/components/grid/GridControl.jsx

@@ -23,6 +23,7 @@ const GridControl = ({ gameAssoc, onClick, resign }) => {
 
   const [copied, setCopied] = useState(false);
   const shareUrl = gameAssoc ? `${window.location.origin}/battle/${gameAssoc}` : null;
+  const isAuthenticated = '1' === document.getElementById('mine-wrapper')?.dataset.isAuthenticated;
 
   const handleShare = () => {
     if (!shareUrl) return;
@@ -64,15 +65,26 @@ const GridControl = ({ gameAssoc, onClick, resign }) => {
               overlaySubTitle
             )}
             {gameAssoc && endRef.current && (
-              <button
-                className={`game-overlay-share${copied ? ' copied' : ''}`}
-                onClick={handleShare}
-                title="Copy share link"
-                aria-label="Copy share link"
-              >
-                <i className={`fa ${copied ? 'fa-check' : 'fa-share-alt'}`} />
-                {copied ? 'Copied!' : 'Share Battle'}
-              </button>
+              <div className="game-overlay-actions">
+                <button
+                  className={`game-overlay-share${copied ? ' copied' : ''}`}
+                  onClick={handleShare}
+                  title="Copy share link"
+                  aria-label="Copy share link"
+                >
+                  <i className={`fa ${copied ? 'fa-check' : 'fa-share-alt'}`} />
+                  {copied ? 'Copied!' : 'Share Battle'}
+                </button>
+                <a
+                  className="game-overlay-profile"
+                  href={isAuthenticated ? '/profile' : '/'}
+                  title={isAuthenticated ? 'Go to your profile' : 'Go to homepage'}
+                  aria-label={isAuthenticated ? 'Go to your profile' : 'Go to homepage'}
+                >
+                  <i className={`fa ${isAuthenticated ? 'fa-user' : 'fa-house'}`} />
+                  {isAuthenticated ? 'My Profile' : 'Homepage'}
+                </a>
+              </div>
             )}
           </div>
         </div>

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

@@ -285,7 +285,28 @@ const useServerCommunication = (gameAssoc, gameInherited, opponentName, isEnvDev
 
   const wUnsubscribe = payload => {
     isEnvDev && console.info(payload.msg);
-    showOverlay('The connection has been lost w/ your friend...', 'Please, restart the game!');
+    const isAuthenticated = '1' === document.getElementById('mine-wrapper')?.dataset.isAuthenticated;
+    const redirectPath = isAuthenticated ? '/profile' : '/';
+    const buttonText = isAuthenticated ? 'My Profile' : 'Homepage';
+    const buttonIcon = isAuthenticated ? 'fa-user' : 'fa-house';
+
+    showOverlay(
+      'The connection has been lost w/ your friend...',
+      (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px', width: '100%' }}>
+          <p style={{ margin: 0 }}>Please, restart the game!</p>
+          <a
+            className="game-overlay-profile"
+            href={redirectPath}
+            title={isAuthenticated ? 'Go to your profile' : 'Go to homepage'}
+            aria-label={isAuthenticated ? 'Go to your profile' : 'Go to homepage'}
+          >
+            <i className={`fa ${buttonIcon}`} />
+            {buttonText}
+          </a>
+        </div>
+      ),
+    );
   };
 
   const wChallenge = payload => {