0.2.13

- upgrade background ocean view
- apply volume control to sound effects

README.md

@@ -106,6 +106,10 @@ docker run -p 8501:8501 battlewords
 
 ## Changelog
 
+-0.2.13
+  - upgrade background ocean view 
+  - apply volume control to sound effects
+
 -0.2.12
   - fix music looping on congratulations screen
 

battlewords/__init__.py

@@ -1,2 +1,2 @@
-__version__ = "0.2.12"
+__version__ = "0.2.13"
 __all__ = ["models", "generator", "logic", "ui"]

battlewords/ui.py

@@ -65,43 +65,144 @@ def _build_letter_map(puzzle) -> dict[CoordLike, str]:
 
 ocean_background_css = """
 <style>
+:root {
+  --water-deep: #0b2a4a;
+  --water-mid:  #0f3968;
+  --water-lite: #165ba8;
+  --water-sky:  #1d64c8;
+  --foam:       rgba(255,255,255,0.18);
+}
+
+.stAppHeader{
+    opacity:0.6;
+}
+
 .stApp {
-    margin: 0;
-    height: 100vh;
-    background: linear-gradient(
-        45deg,
-        rgba(29, 100, 200, 0.6) 0%,
-        rgba(50, 120, 220, 0.8) 25%,
-        rgba(20, 80, 180, 0.95) 50%,
-        rgba(50, 120, 220, 0.8) 75%,
-        rgba(29, 100, 200, 0.6) 100%
-    );
-    background-size: 200% 200%;
-    animation: oceanFlow 12s ease-in-out infinite;
-    overflow: hidden;
+  margin: 0;
+  min-height: 100vh;
+  overflow: hidden;  /* prevent scrollbars from animated layers */
+  background-attachment: scroll;
+  position: relative;
+
+  /* Static base gradient */
+  background-image:
+    linear-gradient(180deg, var(--water-sky) 0%, var(--water-lite) 35%, var(--water-mid) 70%, var(--water-deep) 100%);
+  background-size: 100% 100%;
+  background-position: 50% 50%;
+
+  animation: none !important;
+  will-change: background-position;
+}
+
+/* Animated overlay waves (under bg layers) */
+.stApp::before {
+  content: "";
+  position: absolute;
+  inset: -10% -10%;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 22px),
+    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 18px);
+  mix-blend-mode: screen;
+  opacity: 0.10;
+  animation: waveOverlayScroll 16s linear infinite;
+}
+
+@keyframes waveOverlayScroll {
+  0%   { background-position:   0px   0px,   0px   0px; }
+  100% { background-position: -800px   0px,   0px -600px; }
+}
+
+/* Keep Streamlit content above background/overlay */
+.stApp > div { position: relative; z-index: 5; }
+
+/* Slower, more subtle animations */
+@keyframes oceanHighlight {
+  0%   { background-position: 50% 0%; }
+  50%  { background-position: 60% 8%; }
+  100% { background-position: 50% 0%; }
 }
 
-/* Animation for rolling water effect */
-@keyframes oceanFlow {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
+@keyframes oceanLong {
+  0%   { background-position: 0% 50%; }
+  100% { background-position: -100% 50%; }
 }
 
-/* Ensure Streamlit content is visible above the background */
-.stApp > div {
-    position: relative;
-    z-index: 1;
+@keyframes oceanMid {
+  0%   { background-position: 100% 50%; }
+  100% { background-position: 200% 50%; }
+}
+
+@keyframes oceanFine {
+  0%   { background-position: 0% 50%; }
+  100% { background-position: 100% 50%; }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .stApp, .stApp::before { animation: none; }
 }
 </style>
 """
 
+def inject_ocean_layers() -> None:
+    st.markdown(
+        """
+        <style>
+          .bw-bg-container {
+            position: fixed;     /* fixed to viewport, not stApp */
+            inset: 0;
+            z-index: 1;          /* below content (z=5) but above ::before (z=0) */
+            pointer-events: none;
+            overflow: hidden;    /* clip children */
+          }
+          .bw-bg-layer {
+            position: absolute;
+            inset: 0;
+            width: 100vw;
+            height: 100vh;
+            pointer-events: none;
+          }
+          /* Explicit stacking order with slower animations */
+          .bw-bg-highlight { 
+            z-index: 11; 
+            background: radial-gradient(150% 100% at 50% -20%, rgba(255,255,255,0.10) 0%, transparent 60%); 
+            background-size: 150% 150%;  /* reduced from 300% */
+            animation: oceanHighlight 12s ease-in-out infinite;  /* doubled from 6s */
+          }
+          .bw-bg-long { 
+            z-index: 12; 
+            background: repeating-linear-gradient(-6deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.08) 18px, rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 48px); 
+            background-size: 150% 150%;  /* reduced from 320% */
+            animation: oceanLong 36s linear infinite;  /* doubled from 18s */
+            opacity: 0.2; 
+          }
+          .bw-bg-mid { 
+            z-index: 13; 
+            background: repeating-linear-gradient(-12deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 26px); 
+            background-size: 150% 150%;  /* reduced from 260% */
+            animation: oceanMid 24s linear infinite;  /* doubled from 12s */
+            opacity: 0.2; 
+          }
+          .bw-bg-fine { 
+            z-index: 14; 
+            background: repeating-linear-gradient(-18deg, var(--foam) 0px, var(--foam) 4px, transparent 4px, transparent 12px); 
+            background-size: 120% 120%;  /* reduced from 200% */
+            animation: oceanFine 14s linear infinite;  /* doubled from 7s */
+            opacity: 0.15; 
+          }
+        </style>
+        <div class="bw-bg-container">
+          <div class="bw-bg-layer bw-bg-highlight"></div>
+          <div class="bw-bg-layer bw-bg-long"></div>
+          <div class="bw-bg-layer bw-bg-mid"></div>
+          <div class="bw-bg-layer bw-bg-fine"></div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
 def inject_styles() -> None:
     st.markdown(
         """
@@ -224,6 +325,7 @@ def inject_styles() -> None:
               overflow-x: hidden;
               scrollbar-width: thin;
               scrollbar-color: transparent transparent;
+              opacity:0.75;
           }
 
          .st-emotion-cache-wp60of {
@@ -231,13 +333,13 @@ def inject_styles() -> None:
              position: absolute;     
              max-width:100%;
           }
-         .stImage { max-width:300px;}
+         .stImage {max-width:300px;}
          #text_input_3,#text_input_1 {
           background-color:#fff;
           color:#000;
           caret-color:#333;}
         
-         @media (min-width:720px) {
+         @media (min-width:720px) {         
           .st-emotion-cache-wp60of {
             left: calc(calc(100% - 720px) / 2);
           }
@@ -433,17 +535,18 @@ def _render_sidebar():
         # Audio settings
         st.header("Audio")
         tracks = get_audio_tracks()
-        # Show how many audio files were found
         st.caption(f"{len(tracks)} audio file{'s' if len(tracks) != 1 else ''} found in battlewords/assets/audio/music")
 
         if "music_enabled" not in st.session_state:
             st.session_state.music_enabled = False
         if "music_volume" not in st.session_state:
             st.session_state.music_volume = 15
+        # --- Add sound effects volume ---
+        if "effects_volume" not in st.session_state:
+            st.session_state.effects_volume = 50
 
         enabled = st.checkbox("Enable music", value=st.session_state.music_enabled, key="music_enabled")
 
-        # Always show volume slider; disable when music disabled or no tracks
         st.slider(
             "Volume",
             0,
@@ -454,6 +557,16 @@ def _render_sidebar():
             disabled=not (enabled and bool(tracks)),
         )
 
+        # --- Add sound effects volume slider ---
+        st.slider(
+            "Sound Effects Volume",
+            0,
+            100,
+            value=int(st.session_state.effects_volume),
+            step=1,
+            key="effects_volume",
+        )
+
         selected_path = None
         if tracks:
             options = [p for _, p in tracks]
@@ -749,6 +862,9 @@ def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
             flex: 1 1 calc(20% - 1rem);
         }
         @media (max-width: 640px) {
+            .stImage {max-width:100%; width:100%;}
+            .stImage img {max-width:360px !important; margin:0 auto;}
+            .st-emotion-cache-p75nl5 {width:100%;}
             .st-emotion-cache-1s1xxaz {
                 min-width: calc(33% - 1.5rem);
             }
@@ -834,9 +950,9 @@ def _render_grid(state: GameState, letter_map, show_grid_ticks: bool = True):
         # Play sound effect based on hit or miss
         action = (state.last_action or "").strip()
         if action.startswith("Revealed '"):
-            play_sound_effect("hit", volume=0.5)
+            play_sound_effect("hit", volume=(st.session_state.get("effects_volume", 50) / 100))
         elif action.startswith("Revealed empty"):
-            play_sound_effect("miss", volume=0.5)
+            play_sound_effect("miss", volume=(st.session_state.get("effects_volume", 50) / 100))
 
         st.rerun()
 
@@ -954,12 +1070,12 @@ def _render_guess_form(state: GameState):
             if correct:
                 st.session_state.radar_gif_path = None
                 st.session_state.radar_gif_signature = None
-                play_sound_effect("correct_guess", volume=0.6)
+                play_sound_effect("correct_guess", volume=(st.session_state.get("effects_volume", 50) / 100))
             else:
                 # Update incorrect guesses list - keep only last 10
                 st.session_state.incorrect_guesses.append(guess_text)
                 st.session_state.incorrect_guesses = st.session_state.incorrect_guesses[-10:]
-                play_sound_effect("incorrect_guess", volume=0.5)
+                play_sound_effect("incorrect_guess", volume=(st.session_state.get("effects_volume", 50) / 100))
             st.rerun()
 
 
@@ -1095,7 +1211,7 @@ def _game_over_content(state: GameState) -> None:
     if os.path.exists(congrats_music_path):
         src_url = _load_audio_data_url(congrats_music_path)
         # Play once (no loop) at configured volume
-        _mount_background_audio(True, src_url, (st.session_state.get("music_volume", 100)) / 100, loop=False)
+        _mount_background_audio(enabled=True, src_url=src_url, volume=(st.session_state.get("music_volume", 100)) / 100, loop=False)
     else:
         _mount_background_audio(False, None, 0.0)
 
@@ -1122,7 +1238,7 @@ def _game_over_content(state: GameState) -> None:
         )
 
     table_html = (
-        "<table class=\"shiny-border\" style=\"border-radius:0.75rem; overflow:hidden; width:100%; margin:0 auto; border-collapse:separate; border-spacing:0;\">"
+        "<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>"
@@ -1214,7 +1330,7 @@ def _render_game_over(state: GameState):
         congrats_music_path = os.path.join(music_dir, "congratulations.mp3")
         if os.path.exists(congrats_music_path):
             src_url = _load_audio_data_url(congrats_music_path)
-            _mount_background_audio(True, src_url, (st.session_state.get("music_volume", 100)) / 100, loop=False)
+            _mount_background_audio(enabled=True, src_url=src_url, volume=(st.session_state.get("music_volume", 100)) / 100, loop=False)
         else:
             _mount_background_audio(False, None, 0.0)
         _game_over_dialog(state)
@@ -1262,6 +1378,7 @@ def run_app():
 
     _init_session()
     st.markdown(ocean_background_css, unsafe_allow_html=True)
+    inject_ocean_layers()  # <-- add the animated layers
     _render_header()
     _render_sidebar()