Implement pop-up as streamlit dialog

battlewords/ui.py

@@ -151,7 +151,7 @@ def inject_styles() -> None:
           .st-key-new_game_btn > div[data-testid="stButton"] button, .st-key-sort_wordlist_btn > div[data-testid="stButton"] button { aspect-ratio: unset; text-align:center; height: auto;}
 
           div[data-testid="column"], .st-emotion-cache-zh2fnc { width: auto !important; flex: 1 1 auto !important; min-width: 100% !important; max-width: 100% !important; }
-          .st-emotion-cache-1permvm, .st-emotion-cache-1n6tfoc { gap:0.1rem !important; min-height: 2.5rem; min-width: 2.5rem;}          
+          .st-emotion-cache-1permvm, .st-emotion-cache-1n6tfoc { gap:0.15rem !important; min-height: 2.5rem; min-width: 2.5rem;}          
 
           .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] { flex-wrap: nowrap !important; overflow-x: auto !important; margin: 2px 0 !important; }
           .bw-grid-row-anchor + div[data-testid="stHorizontalBlock"] > div[data-testid="column"] { flex: 0 0 auto !important; }
@@ -905,18 +905,18 @@ def _render_hit_miss(state: GameState):
     # Render as a circular radio group, side-by-side
     st.markdown(
         f"""
-        <div class="bw-radio-group" role="radiogroup" aria-label="Hit or Miss">
-          <div class="bw-radio-item">
-            <div class="bw-radio-circle {'active hit' if is_hit else ''}" role="radio" aria-checked="{'true' if is_hit else 'false'}" aria-label="Hit">
-              <span class="dot"></span>
+        <div class=\"bw-radio-group\" role=\"radiogroup\" aria-label=\"Hit or Miss\">
+          <div class=\"bw-radio-item\">
+            <div class=\"bw-radio-circle {'active hit' if is_hit else ''}\" role=\"radio\" aria-checked=\"{'true' if is_hit else 'false'}\" aria-label=\"Hit\">
+              <span class=\"dot\"></span>
             </div>
-            <div class="bw-radio-caption">HIT</div>
+            <div class=\"bw-radio-caption\">HIT</div>
           </div>
-          <div class="bw-radio-item">
-            <div class="bw-radio-circle {'active miss' if is_miss else ''}" role="radio" aria-checked="{'true' if is_miss else 'false'}" aria-label="Miss">
-              <span class="dot"></span>
+          <div class=\"bw-radio-item\">
+            <div class=\"bw-radio-circle {'active miss' if is_miss else ''}\" role=\"radio\" aria-checked=\"{'true' if is_miss else 'false'}\" aria-label=\"Miss\">
+              <span class=\"dot\"></span>
             </div>
-            <div class="bw-radio-caption">MISS</div>
+            <div class=\"bw-radio-caption\">MISS</div>
           </div>
         </div>
         """,
@@ -941,18 +941,18 @@ def _render_correct_try_again(state: GameState):
 
     st.markdown(
         f"""
-        <div class="bw-radio-group" role="radiogroup" aria-label="Correct or Try Again">
-          <div class="bw-radio-item">
-            <div class="bw-radio-circle {'active hit' if is_correct else ''}" role="radio" aria-checked="{'true' if is_correct else 'false'}" aria-label="Correct">
-              <span class="dot"></span>
+        <div class=\"bw-radio-group\" role=\"radiogroup\" aria-label=\"Correct or Try Again\">
+          <div class=\"bw-radio-item\">
+            <div class=\"bw-radio-circle {'active hit' if is_correct else ''}\" role=\"radio\" aria-checked=\"{'true' if is_correct else 'false'}\" aria-label=\"Correct\">
+              <span class=\"dot\"></span>
             </div>
-            <div class="bw-radio-caption{' inactive' if not is_correct else ''}">CORRECT!</div>
+            <div class=\"bw-radio-caption{' inactive' if not is_correct else ''}\">CORRECT!</div>
           </div>
-          <div class="bw-radio-item">
-            <div class="bw-radio-circle {'active miss' if is_try_again else ''}" role="radio" aria-checked="{'true' if is_try_again else 'false'}" aria-label="Try Again">
-              <span class="dot"></span>
+          <div class=\"bw-radio-item\">
+            <div class=\"bw-radio-circle {'active miss' if is_try_again else ''}\" role=\"radio\" aria-checked=\"{'true' if is_try_again else 'false'}\" aria-label=\"Try Again\">
+              <span class=\"dot\"></span>
             </div>
-            <div class="bw-radio-caption{' inactive' if not is_try_again else ''}">TRY AGAIN</div>
+            <div class=\"bw-radio-caption{' inactive' if not is_try_again else ''}\">TRY AGAIN</div>
           </div>
         </div>
         """,
@@ -1013,14 +1013,10 @@ def _render_score_panel(state: GameState):
     )
     st.markdown(f"<div class='bw-score-panel-container'>{table_html}</div>", unsafe_allow_html=True)
 
-# -------------------- Game Over Modal --------------------
-def _render_game_over(state: GameState):
-    import streamlit.components.v1 as components
-
-    # Determine visibility
-    visible = bool(st.session_state.get("show_gameover_overlay", True)) and is_game_over(state)
+# -------------------- Game Over Dialog --------------------
 
-    # Build table body HTML for modal content
+def _game_over_content(state: GameState) -> None:
+    # Build table body HTML for dialog content
     word_rows = []
     for w in state.puzzle.words:
         pts = st.session_state.points_by_word.get(w.text, 0)
@@ -1028,8 +1024,9 @@ def _render_game_over(state: GameState):
         word_rows.append(
             f"<tr><td class=\"blue-background\">{w.text}</td><td class=\"blue-background\">{len(w.text)}</td><td class=\"blue-background\">{extra_pts}</td></tr>"
         )
+
     table_html = (
-        "<table class=\"table table-sm table-dark table-striped mb-0 shiny-border\" style=\"border-radius:0.75rem; overflow:hidden;\">"
+        "<table class=\"shiny-border\" style=\"border-radius:0.75rem; overflow:hidden; width:100%; margin:0 auto; border-collapse:separate; border-spacing:0;\">"
         "<thead><tr>"
         "<th scope=\"col\">Word</th>"
         "<th scope=\"col\">Letters</th>"
@@ -1041,168 +1038,89 @@ def _render_game_over(state: GameState):
         "</table>"
     )
 
-    # Server-driven initial modal state for CSS class/style
-    modal_initial_class = "modal fade show" if visible else "modal fade"
-    modal_initial_style = "display:block;" if visible else ""
-
-    # Modal markup inside iframe with wrapper div for scoping
-    bootstrap_html = f"""
-    <style>
-    body {{
-        background-color: transparent !important;
-    }}
-      /* Ensure shiny-border is available inside iframe scope */
-      .shiny-border {{ position: relative; padding: 12px; color: white; border-radius: 1.25rem; overflow: hidden; }}
-      .shiny-border::before {{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.5s; }}
-      .bw-modal-iframe-root {{ position: fixed; inset: 0; background: rgba(29, 100, 200, 0.5); /* iframe page bg */ }}
-      /* Make modal background transparent */
-      .modal-content {{ background-color: transparent !important; box-shadow: none !important; width: calc(100% - 16px) !important;}}
-      .modal-backdrop{{ background-color: transparent !important; z-index:999 !important;}}
-      .bw-modal-iframe-root{{ z-index: 1000; }}
-      .hide {{ display: none !important; z-index: -1000 !important;}}
-
-      /* Center the modal content */
-      .modal-dialog {{
-        display: flex;
-        align-items: center;
-        min-height: calc(100% - 1rem);
-        margin: 0.5rem auto;
-        border-radius: 0.75rem;
-        max-width: 100%;
-      }}
-      .modal-title, .text-success {{
-        font-weight: bold;
-        font-size: 1.5rem;
-        text-align: center;
-        flex: auto;
-        filter:drop-shadow(1px 1px 2px #003);
-      }}
-      .modal-content {{
-        width: 100%;
-        max-width: 640px;
-        margin: 0 auto;
-        border-radius: 0.75rem;
-        overflow: hidden;
-      }}
-    </style>
-    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\">\n
-    <div class=\"bw-modal-iframe-root bw-bootstrap-scope\">\n
-      <!-- Remove static aria-hidden to avoid focus conflicts; let Bootstrap manage it -->
-      <div class=\"{modal_initial_class}\" id=\"bwGameOverModal\" tabindex=\"-1\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"bwGameOverTitle\" data-bs-backdrop=\"true\" style=\"{modal_initial_style}\">\n
-        <div class=\"modal-dialog modal-dialog-centered modal-lg\">\n          <div class=\"modal-content\">\n
-            <div class=\"modal-body p-0\">\n              <div class=\"shiny-border\" style=\"border-radius:1rem; box-shadow:0 0 32px #1d64c8; background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666); color:#fff;\">\n                <div class=\"d-flex justify-content-between align-items-center px-3 pt-3\">\n                  <h5 class=\"modal-title m-0\" id=\"bwGameOverTitle\">Game Over</h5>\n                  <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"modal\" aria-label=\"Close\"><span class=\"visually-hidden\">Close</span></button>\n                </div>\n                <div class=\"p-3 pt-2\">\n                  <div class=\"mb-2\">Congratulations!</div>\n                  <div class=\"mb-2\">Final score: <strong class=\"text-success\">{state.score}</strong></div>\n                  <div class=\"mb-2\">Tier: <strong>{compute_tier(state.score)}</strong></div>\n                  <div class=\"mb-2\">Game Mode: <strong>{state.game_mode}</strong></div>\n                  <div class=\"mb-2\">Wordlist: <strong>{st.session_state.get('selected_wordlist', '')}</strong></div>\n                  <div class=\"mb-0\">{table_html}</div>\n                </div>\n              </div>\n            </div>\n
-          </div>\n        </div>\n
-      </div>\n
-    </div>\n
-    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js\"></script>\n
-    <script>
-    // Human-readable, commented JavaScript to control the Bootstrap modal inside the iframe
-    (function() {{
-      // Acquire the modal element by id within this iframe
-      var modalEl = document.getElementById('bwGameOverModal');
-      if (!modalEl) {{
-        console.warn('[BW Modal] #bwGameOverModal not found');
-        return;
-      }}
-
-      // Create or get a Bootstrap Modal controller for this element
-      var m = bootstrap.Modal.getOrCreateInstance(modalEl, {{
-        backdrop: true,
-        keyboard: true
-      }});
-
-      // Server-driven visibility state (computed in Python)
-      var shouldShow = {str(visible).lower()};
-
-      // Show or hide based on server state
-      if (shouldShow) {{
-        // Ensure visible and let Bootstrap handle classes/backdrop
-        modalEl.style.display = 'block';
-        console.debug('[BW Modal] Showing modal');
-        try {{ m.show(); }} catch(e) {{ console.warn('[BW Modal] show() failed', e); }}
-      }} else {{
-        // Hide if currently shown
-        if (modalEl.classList.contains('show')) {{
-          console.debug('[BW Modal] Hiding modal');
-          try {{ m.hide(); }} catch(e) {{ console.warn('[BW Modal] hide() failed', e); }}
-        }}
-        // Reset styles after hide
-        modalEl.classList.remove('show');
-        modalEl.style.display = '';
-      }}
-
-      // Helper to notify the parent page (Streamlit) to toggle wrapper around this iframe
-      function notifyParent(visible) {{
-        try {{
-          window.parent.postMessage({{
-            type: 'bw-bootstrap-modal-visibility',
-            visible: visible
-          }}, '*');
-        }} catch (e) {{
-          console.warn('[BW Modal] notifyParent failed', e);
-        }}
-      }}
-
-      // Send initial visibility to parent
-      notifyParent(shouldShow);
-
-      // On show, remove any aria-hidden that might conflict and set focus to close button
-      modalEl.addEventListener('show.bs.modal', function() {{
-        try {{ modalEl.removeAttribute('aria-hidden'); }} catch (e) {{}}
-      }});
-
-      modalEl.addEventListener('shown.bs.modal', function() {{
-        try {{
-          var btn = modalEl.querySelector('.btn-close');
-          if (btn) btn.focus();
-        }} catch (e) {{}}
-        notifyParent(true);
-      }});
-
-      // Utility to clear focus to avoid aria-hidden focus conflicts
-      function blurActive() {{
-        try {{
-          if (document.activeElement) document.activeElement.blur();
-        }} catch (e) {{}}
-      }}
-
-      // On hide start, clear focus
-      modalEl.addEventListener('hide.bs.modal', function() {{
-        blurActive();
-      }});
-
-      // On fully hidden, let Streamlit know and parent wrapper update
-      function closeActions() {{
-        try {{
-          blurActive();
-          window.parent.postMessage({{
-            type: 'streamlit:setComponentValue',
-            key: 'show_gameover_overlay',
-            value: false
-          }}, '*');
-        }} catch (e) {{}}
-        notifyParent(false);
-      }}
-      modalEl.addEventListener('hidden.bs.modal', closeActions);
-
-      // Close if backdrop clicked (click outside modal content)
-      modalEl.addEventListener('click', function(ev) {{
-        if (ev.target === modalEl) {{
-          try {{ m.hide(); }} catch (e) {{}}
-        }}
-      }});
-
-      // Note: Streamlit components use an iframe sandbox that may include allow-scripts and allow-same-origin.
-      // Browsers may warn that this combination allows escape of sandboxing; this is expected for Streamlit components.
-    }})();
-    </script>\n
-    """
-
-    # Mount the iframe; keep zero height when hidden, parent bridge will hide wrapper too
-    components.html(bootstrap_html, height=(720 if visible else 0), scrolling=False, width=720)
-
-    # Ensure parent bridge exists to control wrapper visibility/position
-    _inject_parent_modal_bridge()
+    # Optional extra styles for this dialog content
+    st.markdown(
+        """
+        <style>
+          .bw-dialog-container {
+            border-radius: 1rem;
+            box-shadow: 0 0 32px #1d64c8;
+            background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666);
+            color: #fff;
+            padding: 16px;
+          }
+          .bw-dialog-header { display:flex; justify-content: space-between; align-items:center; }
+          .bw-dialog-title, .st-emotion-cache-11elpad p { margin: 0; font-weight: bold;font-size: 1.5rem;text-align: center;flex: auto;filter:drop-shadow(1px 1px 2px #003);}
+          .text-success { color: #20d46c;font-weight: bold;font-size: 1.5rem;text-align: center;flex: auto;filter:drop-shadow(1px 1px 2px #003); }
+          .st-key-new_game_btn_dialog, .st-key-close_game_over { width: 50% !important;
+              height: auto;
+              min-width: unset !important;
+              margin: 25px auto 0;
+           }
+           .st-key-new_game_btn_dialog button, .st-key-close_game_over button {
+            height: 50px !important;
+           }
+           .st-key-new_game_btn_dialog:hover, .st-key-close_game_over:hover{
+              /*background: linear-gradient(-45deg, #1d64c8, #ffffff, #1d64c8, #666666);*/
+              background: #1d64c8 !important;
+              /*filter:drop-shadow(1px 1px 2px #003);*/
+              /*filter: invert(1);*/
+           }
+           .st-bb {background-color: rgba(29, 100, 200, 0.5);}
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    st.markdown(
+        f"""
+        <div class=\"bw-dialog-container shiny-border\">
+          <div class=\"bw-dialog-header\">
+            <h5 class=\"bw-dialog-title\">Game Over</h5>
+          </div>
+          <div class=\"p-3 pt-2\">\n            <div class=\"mb-2\">Congratulations!</div>
+            <div class=\"mb-2\">Final score: <strong class=\"text-success\">{state.score}</strong></div>
+            <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>
+          </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # Dialog actions
+    cols = st.columns([1, 1])
+    with cols[0]:
+        if st.button("Close", key="close_game_over"):
+            st.session_state["show_gameover_overlay"] = False
+            st.rerun()
+    with cols[1]:
+        st.button("New Game", key="new_game_btn_dialog", on_click=_new_game)
+
+# Prefer st.dialog/experimental_dialog; fallback to st.modal if unavailable
+_Dialog = getattr(st, "dialog", getattr(st, "experimental_dialog", None))
+if _Dialog:
+    @_Dialog("Game Over")
+    def _game_over_dialog(state: GameState):
+        _game_over_content(state)
+else:
+    def _game_over_dialog(state: GameState):
+        modal_ctx = getattr(st, "modal", None)
+        if callable(modal_ctx):
+            with modal_ctx("Game Over"):
+                _game_over_content(state)
+        else:
+            # Last-resort inline render
+            st.subheader("Game Over")
+            _game_over_content(state)
+
+def _render_game_over(state: GameState):
+    # Determine visibility
+    visible = bool(st.session_state.get("show_gameover_overlay", True)) and is_game_over(state)
+    if visible:
+        _game_over_dialog(state)
 
 def _sort_wordlist(filename):    
     import time  # Add this import