Enhance UI and share link functionality

0.2.26
Updated `README.md` with details on persistent storage, challenge mode, and version updates.
Adjusted tooltip margin in `_render_guess_form` for better spacing.
Refined `_game_over_content` to improve difficulty rendering and share URL handling:
- Replaced copy-to-clipboard button with robust implementation supporting modern and legacy browsers.
- Added safe encoding for share URLs using `json` and `html` modules.
- Introduced new HTML structure for share URL display with improved styling.
- Enhanced JavaScript logic for copying URLs with multiple fallbacks.
- Increased HTML component height to accommodate layout changes.
These updates improve user experience, accessibility, and cross-browser compatibility.

README.md

@@ -121,8 +121,12 @@ docker run -p8501:8501 battlewords
  - Persistent Storage: all game results saved locally for personal statistics without accounts.
  - Challenge Mode: remote storage of challenge results, multi-user leaderboard, and shareable links.
  
+-02.26
+  - fix copy/share link button
+  
 -0.2.25
  - Share challenge from expander
+ - fix incorrect guess overlap of guess box 
  
 -0.2.24
  - compress height

battlewords/__init__.py

@@ -1,2 +1,2 @@
-__version__ = "0.2.25"
+__version__ = "0.2.26"
 __all__ = ["models", "generator", "logic", "ui", "game_storage"]

battlewords/ui.py

@@ -1182,7 +1182,7 @@ def _render_guess_form(state: GameState):
             text-align: left !important;
             max-width: 320px !important;
             line-height: 1.2;
-            margin-bottom: 25px;            
+            margin-bottom: 35px;            
         }
         /* Nudge tooltip popover below the trigger when possible */
         div[data-testid="stTooltipPopover"] {
@@ -1427,7 +1427,7 @@ def _game_over_content(state: GameState) -> None:
 
     # Render difficulty line only if we have a value
     difficulty_html = (
-        f'<div class="mb-2">Word list difficulty: <strong>{difficulty_value:.2f}</strong></div>'
+        f'<tr><td colspan=\"3\"><h5 class=\"m-2\">Word list difficulty: {difficulty_value:.2f}</h5></td></tr>'
         if difficulty_value is not None else ""
     )
 
@@ -1449,6 +1449,7 @@ def _game_over_content(state: GameState) -> None:
         "</tr></thead>"
         f"<tbody>{''.join(word_rows)}"
         f"<tr><td colspan=\"3\"><h5 class=\"m-2\">Total: {state.score} <span style='font-size:1.25rem; color:#1d64c8;'>&nbsp;⏱ {timer_str}</span></h5></td></tr>"
+        f"{difficulty_html}"
         "</tbody>"
         "</table>"
     )
@@ -1500,8 +1501,7 @@ def _game_over_content(state: GameState) -> None:
             <div class="mb-2">Tier: <strong>{compute_tier(state.score)}</strong></div>
             <div class="mb-2">Game Mode: <strong>{state.game_mode}</strong></div>
             <div class="mb-2">Wordlist: <strong>{st.session_state.get('selected_wordlist', '')}</strong></div>
-            <div class="mb-0">{table_html}</div>
-            {difficulty_html}
+            <div class="mb-0">{table_html}</div>            
           </div>
         </div>
         """,
@@ -1649,33 +1649,94 @@ def _game_over_content(state: GameState) -> None:
             st.success("✅ Share link generated!")
             st.code(share_url, language=None)
 
-            # Copy to clipboard button
+            # More robust copy-to-clipboard implementation with fallbacks
+            import json as _json
+            import html as _html
+
+            _share_url_json = _json.dumps(share_url)  # safe for JS
+            _share_url_attr = _html.escape(share_url, quote=True)  # safe for HTML attribute
+            _share_url_text = _html.escape(share_url)
+
             components.html(
                 f"""
+                <div id="bw-copy-container" style="
+                    display:flex;
+                    gap:8px;
+                    width:100%;
+                    align-items:center;
+                    margin-top:6px;
+                    justify-content:center;
+                ">
+                
+                <strong><a href="{_share_url_attr}"
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    style="text-decoration: underline; color: #fff; word-break: break-all; filter: drop-shadow(1px 1px 2px #003);">
+                {_share_url_text}
+                </a></strong>
+                
+
+                </div>
                 <script>
-                function copyToClipboard() {{
-                    navigator.clipboard.writeText("{share_url}").then(function() {{
-                        alert("Share link copied to clipboard!");
-                    }}, function(err) {{
-                        console.error('Could not copy text: ', err);
-                    }});
-                }}
+                (function() {{
+                  const SHARE_URL = {_share_url_json};                  
+                  const input = document.getElementById('bw-share-url');
+
+                  async function modernCopy(text) {{
+                    if (!navigator.clipboard || !window.isSecureContext) {{
+                      throw new Error('Clipboard API unavailable in this context');
+                    }}
+                    await navigator.clipboard.writeText(text);
+                  }}
+
+                  function legacyCopy(text) {{
+                    const ta = document.createElement('textarea');
+                    ta.value = text;
+                    ta.setAttribute('readonly', '');
+                    ta.style.position = 'fixed';
+                    ta.style.top = '-1000px';
+                    ta.style.left = '-1000px';
+                    document.body.appendChild(ta);
+                    ta.focus();
+                    ta.select();
+                    let ok = false;
+                    try {{
+                      ok = document.execCommand('copy');
+                    }} finally {{
+                      document.body.removeChild(ta);
+                    }}
+                    if (!ok) throw new Error('execCommand failed');
+                  }}
+
+                  btn.addEventListener('click', async () => {{
+                    try {{
+                      try {{
+                        await modernCopy(SHARE_URL);
+                      }} catch (e) {{
+                        legacyCopy(SHARE_URL);
+                      }}
+                      setStatus('Copied!');
+                    }} catch (e) {{
+                      // Final fallback: select input text and ask user to copy
+                      try {{
+                        input.removeAttribute('readonly');
+                        input.focus();
+                        input.select();
+                        input.setSelectionRange(0, input.value.length);
+                        document.execCommand('copy'); // may still work on some browsers
+                        input.setAttribute('readonly', '');
+                        setStatus('Copied!');
+                      }} catch (err) {{
+                        input.focus();
+                        input.select();
+                        setStatus('Press Ctrl+C');
+                      }}
+                    }}
+                  }});
+                }})();
                 </script>
-                <button onclick="copyToClipboard()" style="
-                    width: 100%;
-                    padding: 0.5rem 1rem;
-                    background: #1d64c8;
-                    color: white;
-                    border: none;
-                    border-radius: 0.5rem;
-                    cursor: pointer;
-                    font-size: 1rem;
-                    font-weight: bold;
-                ">
-                    📋 Copy Link
-                </button>
                 """,
-                height=60
+                height=80
             )
 
     st.markdown("---")