Persist sound settings and remove mobile overlay collisions

Author: web3blind

app/css/main.css

@@ -307,10 +307,7 @@ body {
 
 /* Toast */
 #toast-container {
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
+    position: static;
     z-index: 1000;
     display: flex;
     flex-direction: column;
@@ -353,10 +350,7 @@ body {
 
 /* Connection status */
 #connection-status {
-    position: sticky;
-    top: 0;
-    left: auto;
-    right: auto;
+    position: static;
     transform: none;
     display: none;
     text-align: center;
@@ -1037,7 +1031,7 @@ body {
 .quests-screen h1 { margin-bottom: 16px; }
 .quest-tabs {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr;
     gap: 8px;
     margin-bottom: 16px;
 }

app/index.html

@@ -11,7 +11,7 @@
     <link rel="manifest" href="manifest.json">
     <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/icon-192.png">
     <link rel="apple-touch-icon" href="assets/icons/icon-192.png">
-    <link rel="stylesheet" href="css/main.css?v=20260711b">
+    <link rel="stylesheet" href="css/main.css?v=20260711c">
     <link rel="stylesheet" href="css/themes.css">
     <link rel="stylesheet" href="css/accessibility.css">
 </head>
@@ -169,7 +169,7 @@
     <script src="js/engine/daily-leaderboard.js"></script>
 
     <!-- UI Components -->
-    <script src="js/ui/sound.js"></script>
+    <script src="js/ui/sound.js?v=20260711c"></script>
     <script src="js/ui/components/progress-bar.js"></script>
     <script src="js/ui/components/toast.js?v=20260711b"></script>
     <script src="js/ui/components/modal.js"></script>
@@ -193,7 +193,7 @@
     <script src="js/ui/screens/crafting.js?v=20260621j"></script>
     <script src="js/ui/screens/quests.js?v=20260621n"></script>
     <script src="js/ui/screens/world-boss.js"></script>
-    <script src="js/ui/screens/settings.js"></script>
+    <script src="js/ui/screens/settings.js?v=20260711c"></script>
     <script src="js/ui/screens/help.js"></script>
     <script src="js/ui/screens/leaderboard.js"></script>
 

app/js/ui/screens/settings.js

@@ -16,6 +16,17 @@ var SettingsScreen = (function() {
         return !!fallback;
     }
 
+    function _getStoredNumber(key, fallback) {
+        try {
+            var value = localStorage.getItem(STORAGE_PREFIX + key);
+            if (value !== null && value !== '') {
+                var num = parseFloat(value);
+                if (!isNaN(num)) return num;
+            }
+        } catch (e) {}
+        return fallback;
+    }
+
     function _setStoredBool(key, value) {
         try {
             localStorage.setItem(STORAGE_PREFIX + key, value ? '1' : '0');
@@ -31,6 +42,8 @@ var SettingsScreen = (function() {
         var currentLang = Helpers.getCurrentLang ? Helpers.getCurrentLang() : 'ru';
         var highContrast = _getStoredBool('high_contrast', false);
         var reducedMotion = _getStoredBool('reduced_motion', false);
+        var sfxVolume = Math.round(_getStoredNumber('sfx_volume', 0.5) * 100);
+        if (typeof SoundManager !== 'undefined') SoundManager.setVolume(sfxVolume / 100);
 
         el.innerHTML =
             '<div class="settings-screen">' +
@@ -48,7 +61,7 @@ var SettingsScreen = (function() {
                 // Sound
                 '<section class="settings-section" aria-label="' + t('settings_sound') + '">' +
                     '<h2>' + t('settings_sound') + '</h2>' +
-                    _renderSlider('sfx-volume', t('settings_sfx'), 50) +
+                    _renderSlider('sfx-volume', t('settings_sfx'), sfxVolume) +
                     _renderSlider('music-volume', t('settings_music'), 50) +
                     _renderToggle('narrator-toggle', t('narrator_toggle'), true) +
                     '<div class="settings-field">' +

app/js/ui/sound.js

@@ -5,9 +5,22 @@
 var SoundManager = (function() {
     'use strict';
 
+    var STORAGE_PREFIX = (typeof VizMagicConfig !== 'undefined' && VizMagicConfig.STORAGE_PREFIX) ? VizMagicConfig.STORAGE_PREFIX : 'viz_magic_';
+
+    function _getStoredNumber(key, fallback) {
+        try {
+            var value = localStorage.getItem(STORAGE_PREFIX + key);
+            if (value !== null && value !== '') {
+                var num = parseFloat(value);
+                if (!isNaN(num)) return num;
+            }
+        } catch (e) {}
+        return fallback;
+    }
+
     var audioCtx = null;
     var enabled = true;
-    var volume = 0.5;
+    var volume = _getStoredNumber('sfx_volume', 0.5);
     var sounds = {};
 
     /**
@@ -27,7 +40,7 @@ var SoundManager = (function() {
      * @param {string} soundId
      */
     function play(soundId) {
-        if (!enabled) return;
+        if (!enabled || volume <= 0) return;
         // Lazily initialize on first play call — this always happens inside a user gesture
         if (!audioCtx) init();
         if (!audioCtx) return;
@@ -641,6 +654,9 @@ var SoundManager = (function() {
      */
     function setVolume(vol) {
         volume = Math.max(0, Math.min(1, vol));
+        try {
+            localStorage.setItem(STORAGE_PREFIX + 'sfx_volume', String(volume));
+        } catch (e) {}
     }
 
     /**

app/sw.js

@@ -1,5 +1,5 @@
 // Viz Magic — Service Worker
-var CACHE_NAME = 'viz-magic-v30';
+var CACHE_NAME = 'viz-magic-v31';
 var ASSETS = [
     '/',
     '/index.html',

tests/core-screen-accessibility-smoke.test.js

@@ -90,7 +90,7 @@ async function run() {
     var badLogs = logs.filter(function(l) { return l.type === 'error' || l.type === 'pageerror'; });
     assert.deepStrictEqual(failed, [], 'all core screens should render with named controls and no raw keys');
     assert.deepStrictEqual(badLogs, [], 'core screen smoke should not emit console errors/page errors');
-    assert.ok(result.cachesKeys.indexOf('viz-magic-v30') !== -1, 'service worker cache should use latest cache name');
+    assert.ok(result.cachesKeys.indexOf('viz-magic-v31') !== -1, 'service worker cache should use latest cache name');
     assert.ok(result.scripts.some(function(src) { return src.indexOf('helpers.js?v=20260621l') !== -1; }), 'helpers script should be cache-busted');
     assert.ok(result.scripts.some(function(src) { return src.indexOf('territory.js?v=20260621l') !== -1; }), 'territory script should be cache-busted');
     assert.ok(result.scripts.some(function(src) { return src.indexOf('state-engine.js?v=20260621m') !== -1; }), 'state engine script should be cache-busted');

tests/player-bug-regressions.test.js

@@ -335,7 +335,7 @@ test('high-traffic UI narration, screen announcements, and inventory stat labels
 
 test('service worker updates quickly and keeps navigations network-first', function () {
   const swJs = read('app/sw.js');
-  assert.ok(/viz-magic-v30/.test(swJs), 'service worker cache version should be bumped');
+  assert.ok(/viz-magic-v31/.test(swJs), 'service worker cache version should be bumped');
   assert.ok(/self\.skipWaiting\(\)/.test(swJs), 'service worker should activate new cache without waiting for all tabs to close');
   assert.ok(/self\.clients\.claim\(\)/.test(swJs), 'service worker should claim clients after activation');
   assert.ok(/event\.request\.mode === 'navigate'[\s\S]*fetch\(event\.request\)/.test(swJs), 'navigation requests should prefer network to avoid stale cached index');
@@ -375,10 +375,14 @@ test('mobile entry helpers cover keyboard paste, home-screen shortcut, nav parit
   assert.ok(/nav_bazaar/.test(homeJs) && /nav_crafting/.test(homeJs), 'home primary labels should reuse bottom-nav translation keys');
   assert.ok(/actionType === 'chronicle_post'[\s\S]*_normalizeDedupeText/.test(chronicleJs), 'chronicle post dedupe should ignore temporary block numbers');
   assert.ok(/insertBefore\(container, appMain\)/.test(toastJs), 'toast strip should be inserted before app-main so it does not cover headings');
-  assert.ok(/#connection-status[\s\S]*position:\s*sticky/.test(mainCss), 'connection status should stay in normal flow instead of covering headings');
-  assert.ok(/\.quest-tabs[\s\S]*grid-template-columns:\s*repeat\(2, minmax\(0, 1fr\)\)/.test(mainCss), 'quest tabs should render as a two-column mobile grid');
+  assert.ok(/#connection-status[\s\S]*position:\s*static/.test(mainCss), 'connection status should stay in normal flow instead of covering headings');
+  assert.ok(/\.quest-tabs[\s\S]*grid-template-columns:\s*1fr/.test(mainCss), 'quest tabs should render as one full-width column on mobile');
   assert.ok(/role', type === 'error' \? 'alert' : 'status'/.test(toastJs), 'only errors should be assertive toast alerts');
-  assert.ok(/viz-magic-v30/.test(read('app/sw.js')), 'service worker cache should be bumped for UI changes');
+  assert.ok(/function _getStoredNumber/.test(read('app/js/ui/screens/settings.js')), 'settings should read stored sound slider values');
+  assert.ok(/SoundManager\.setVolume\(sfxVolume \/ 100\)/.test(read('app/js/ui/screens/settings.js')), 'settings should apply stored SFX volume on render');
+  assert.ok(/localStorage\.setItem\(STORAGE_PREFIX \+ 'sfx_volume'/.test(read('app/js/ui/sound.js')), 'sound manager should persist SFX volume');
+  assert.ok(/var volume = _getStoredNumber\('sfx_volume', 0\.5\)/.test(read('app/js/ui/sound.js')), 'sound manager should restore persisted SFX volume');
+  assert.ok(/viz-magic-v31/.test(read('app/sw.js')), 'service worker cache should be bumped for UI changes');
 });
 
 if (process.exitCode) {