Add narrator voice preferences

Author: web3blind

app/index.html

@@ -120,8 +120,8 @@
     <script src="js/config.js?v=20260712a"></script>
 
     <!-- I18n -->
-    <script src="js/i18n/ru.js?v=20260713b"></script>
-    <script src="js/i18n/en.js?v=20260713b"></script>
+    <script src="js/i18n/ru.js?v=20260713c"></script>
+    <script src="js/i18n/en.js?v=20260713c"></script>
 
     <!-- Utilities -->
     <script src="js/utils/helpers.js?v=20260621l"></script>
@@ -180,7 +180,7 @@
     <script src="js/ui/components/toast.js?v=20260711b"></script>
     <script src="js/ui/components/modal.js"></script>
     <script src="js/ui/components/nav.js?v=20260712b"></script>
-    <script src="js/ui/components/battle-narrator.js?v=20260712b"></script>
+    <script src="js/ui/components/battle-narrator.js?v=20260713a"></script>
 
     <!-- UI Screens -->
     <script src="js/ui/screens/landing.js"></script>
@@ -199,7 +199,7 @@
     <script src="js/ui/screens/crafting.js?v=20260621j"></script>
     <script src="js/ui/screens/quests.js?v=20260712a"></script>
     <script src="js/ui/screens/world-boss.js"></script>
-    <script src="js/ui/screens/settings.js?v=20260712b"></script>
+    <script src="js/ui/screens/settings.js?v=20260713a"></script>
     <script src="js/ui/screens/help.js?v=20260712a"></script>
     <script src="js/ui/screens/leaderboard.js?v=20260712c"></script>
     <script src="js/ui/screens/temple.js?v=20260712c"></script>

app/js/i18n/en.js

@@ -355,7 +355,15 @@ var LangEN = {
     narrator_label: 'Battle Narrator',
     narrator_toggle: 'Battle Narrator',
     narrator_test: 'Test narrator',
-    narrator_test_message: 'Battle Narrator is online. If your screen reader is enabled, it should read this message.',
+    narrator_test_message: 'Battle Narrator is online. This is the selected voice for hunts and duels.',
+    narrator_voice_gender: 'Narrator voice',
+    narrator_voice_male: 'Male',
+    narrator_voice_female: 'Female',
+    narrator_voice_timbre: 'Narrator timbre',
+    narrator_timbre_rough: 'Rough and low',
+    narrator_timbre_neutral: 'Neutral',
+    narrator_timbre_soft: 'Soft',
+    narrator_voice_hint: 'Default is a low male voice. Available voices depend on the browser and system; if the exact voice is missing, the game still adjusts pitch and speech rate.',
     narrator_pve_attack: 'You used {spell}. {creature} takes {damage} damage.',
     narrator_critical: 'Critical hit!',
     narrator_hunt_victory: 'Victory! {creature} defeated. {xp} XP gained.',

app/js/i18n/ru.js

@@ -355,7 +355,15 @@ var LangRU = {
     narrator_label: 'Боевой Рассказчик',
     narrator_toggle: 'Боевой Рассказчик',
     narrator_test: 'Проверить рассказчика',
-    narrator_test_message: 'Боевой рассказчик на связи. Если включён экранный диктор, он должен прочитать это сообщение.',
+    narrator_test_message: 'Боевой рассказчик на связи. Сейчас прозвучит выбранный голос для охоты и дуэлей.',
+    narrator_voice_gender: 'Голос рассказчика',
+    narrator_voice_male: 'Мужской',
+    narrator_voice_female: 'Женский',
+    narrator_voice_timbre: 'Тембр рассказчика',
+    narrator_timbre_rough: 'Хриплый и низкий',
+    narrator_timbre_neutral: 'Нейтральный',
+    narrator_timbre_soft: 'Мягкий',
+    narrator_voice_hint: 'По умолчанию выбран мужской низкий голос. Доступные голоса зависят от браузера и системы; если нужного голоса нет, игра всё равно меняет высоту и темп речи.',
     narrator_pve_attack: 'Ты использовал {spell}. {creature} получает {damage} урона.',
     narrator_critical: 'Критический удар!',
     narrator_hunt_victory: 'Победа! {creature} повержен. Получено {xp} опыта.',

app/js/ui/components/battle-narrator.js

@@ -8,6 +8,8 @@ var BattleNarrator = (function() {
 
     var enabled = false;
     var narratorEl = null;
+    var voiceGender = 'male';
+    var voiceTimbre = 'rough';
 
     /**
      * Initialize the Battle Narrator.
@@ -17,6 +19,8 @@ var BattleNarrator = (function() {
         // Check saved preference
         var saved = localStorage.getItem(VizMagicConfig.STORAGE_PREFIX + 'battle_narrator');
         enabled = saved === 'true' || saved === '1';
+        voiceGender = _getStoredVoiceOption('narrator_voice_gender', 'male');
+        voiceTimbre = _getStoredVoiceOption('narrator_voice_timbre', 'rough');
 
         // Also auto-enable if screen reader likely active
         if (A11y.likelyScreenReader()) {
@@ -58,6 +62,48 @@ var BattleNarrator = (function() {
         return enabled;
     }
 
+    function _getStoredVoiceOption(key, fallback) {
+        try {
+            var value = localStorage.getItem(VizMagicConfig.STORAGE_PREFIX + key);
+            return value || fallback;
+        } catch (e) {}
+        return fallback;
+    }
+
+    function setVoiceOptions(gender, timbre) {
+        voiceGender = gender || 'male';
+        voiceTimbre = timbre || 'rough';
+        try {
+            localStorage.setItem(VizMagicConfig.STORAGE_PREFIX + 'narrator_voice_gender', voiceGender);
+            localStorage.setItem(VizMagicConfig.STORAGE_PREFIX + 'narrator_voice_timbre', voiceTimbre);
+        } catch (e) {}
+    }
+
+    function getVoiceOptions() {
+        return { gender: voiceGender, timbre: voiceTimbre };
+    }
+
+    function _selectVoice(lang) {
+        if (typeof window === 'undefined' || !window.speechSynthesis || !window.speechSynthesis.getVoices) return null;
+        var voices = window.speechSynthesis.getVoices() || [];
+        if (!voices.length) return null;
+        var langPrefix = (lang || 'ru-RU').split('-')[0].toLowerCase();
+        var localVoices = [];
+        for (var i = 0; i < voices.length; i++) {
+            var v = voices[i];
+            if (v && v.lang && v.lang.toLowerCase().indexOf(langPrefix) === 0) localVoices.push(v);
+        }
+        var pool = localVoices.length ? localVoices : voices;
+        var maleHints = /male|муж|alex|alexander|maxim|pavel|dmitry|nikolai|yuri|george|daniel|denis|sergey|anton/i;
+        var femaleHints = /female|жен|anna|elena|irina|maria|oksana|svetlana|google русский|milena|alice/i;
+        var hints = voiceGender === 'female' ? femaleHints : maleHints;
+        for (var j = 0; j < pool.length; j++) {
+            var name = (pool[j].name || '') + ' ' + (pool[j].voiceURI || '');
+            if (hints.test(name)) return pool[j];
+        }
+        return pool[0] || null;
+    }
+
     /**
      * Announce a message through the narrator.
      * @param {string} message
@@ -86,9 +132,11 @@ var BattleNarrator = (function() {
         try {
             var utterance = new SpeechSynthesisUtterance(message);
             var lang = (Helpers.getCurrentLang && Helpers.getCurrentLang() === 'en') ? 'en-US' : 'ru-RU';
+            var voice = _selectVoice(lang);
             utterance.lang = lang;
-            utterance.rate = 1;
-            utterance.pitch = 1;
+            if (voice) utterance.voice = voice;
+            utterance.rate = (voiceTimbre === 'rough') ? 0.88 : (voiceTimbre === 'soft' ? 0.96 : 1);
+            utterance.pitch = (voiceGender === 'male') ? (voiceTimbre === 'rough' ? 0.65 : 0.82) : (voiceTimbre === 'rough' ? 0.9 : 1.08);
             utterance.volume = 1;
             window.speechSynthesis.cancel();
             window.speechSynthesis.speak(utterance);
@@ -246,6 +294,8 @@ var BattleNarrator = (function() {
         init: init,
         setEnabled: setEnabled,
         isEnabled: isEnabled,
+        setVoiceOptions: setVoiceOptions,
+        getVoiceOptions: getVoiceOptions,
         announce: announce,
         spatialHint: spatialHint,
         announcePvEAttack: announcePvEAttack,

app/js/ui/screens/settings.js

@@ -27,6 +27,14 @@ var SettingsScreen = (function() {
         return fallback;
     }
 
+    function _getStoredText(key, fallback) {
+        try {
+            var value = localStorage.getItem(STORAGE_PREFIX + key);
+            if (value !== null && value !== '') return value;
+        } catch (e) {}
+        return fallback;
+    }
+
     function _setStoredBool(key, value) {
         try {
             localStorage.setItem(STORAGE_PREFIX + key, value ? '1' : '0');
@@ -51,6 +59,10 @@ var SettingsScreen = (function() {
         var sfxVolume = Math.round(_getStoredNumber('sfx_volume', 0.5) * 100);
         var musicVolume = Math.round(_getStoredNumber('music_volume', 0.5) * 100);
         var narratorEnabled = (typeof BattleNarrator !== 'undefined' && BattleNarrator.isEnabled) ? BattleNarrator.isEnabled() : _getStoredBool('battle_narrator', false);
+        var narratorVoice = (typeof BattleNarrator !== 'undefined' && BattleNarrator.getVoiceOptions) ? BattleNarrator.getVoiceOptions() : {
+            gender: _getStoredText('narrator_voice_gender', 'male'),
+            timbre: _getStoredText('narrator_voice_timbre', 'rough')
+        };
         if (typeof SoundManager !== 'undefined') SoundManager.setVolume(sfxVolume / 100);
 
         el.innerHTML =
@@ -72,6 +84,16 @@ var SettingsScreen = (function() {
                     _renderSlider('sfx-volume', t('settings_sfx'), sfxVolume) +
                     _renderSlider('music-volume', t('settings_music'), musicVolume) +
                     _renderToggle('narrator-toggle', t('narrator_toggle'), narratorEnabled) +
+                    _renderSelect('narrator-voice-gender', t('narrator_voice_gender'), [
+                        { value: 'male', label: t('narrator_voice_male') },
+                        { value: 'female', label: t('narrator_voice_female') }
+                    ], narratorVoice.gender || 'male') +
+                    _renderSelect('narrator-voice-timbre', t('narrator_voice_timbre'), [
+                        { value: 'rough', label: t('narrator_timbre_rough') },
+                        { value: 'neutral', label: t('narrator_timbre_neutral') },
+                        { value: 'soft', label: t('narrator_timbre_soft') }
+                    ], narratorVoice.timbre || 'rough') +
+                    '<p class="settings-help-text">' + t('narrator_voice_hint') + '</p>' +
                     '<button type="button" class="btn btn-secondary btn-sm" id="btn-test-narrator">' + t('narrator_test') + '</button>' +
                     '<div class="settings-field">' +
                         '<label for="sound-density" class="input-label">' + t('settings_sound_density') + '</label>' +
@@ -149,6 +171,16 @@ var SettingsScreen = (function() {
         '</div>';
     }
 
+    function _renderSelect(id, label, options, selectedValue) {
+        var html = '<div class="settings-field">' +
+            '<label for="' + id + '" class="input-label">' + label + '</label>' +
+            '<select id="' + id + '" class="input-field" aria-label="' + label + '">';
+        for (var i = 0; i < options.length; i++) {
+            html += '<option value="' + options[i].value + '"' + (options[i].value === selectedValue ? ' selected' : '') + '>' + options[i].label + '</option>';
+        }
+        return html + '</select></div>';
+    }
+
     function _bindEvents(el) {
         // Language toggles
         var langRu = el.querySelector('#lang-ru');
@@ -211,11 +243,27 @@ var SettingsScreen = (function() {
             });
         }
 
+        var narratorGender = el.querySelector('#narrator-voice-gender');
+        var narratorTimbre = el.querySelector('#narrator-voice-timbre');
+        function updateNarratorVoice() {
+            if (typeof BattleNarrator !== 'undefined' && BattleNarrator.setVoiceOptions) {
+                BattleNarrator.setVoiceOptions(narratorGender ? narratorGender.value : 'male', narratorTimbre ? narratorTimbre.value : 'rough');
+            } else {
+                try {
+                    localStorage.setItem(STORAGE_PREFIX + 'narrator_voice_gender', narratorGender ? narratorGender.value : 'male');
+                    localStorage.setItem(STORAGE_PREFIX + 'narrator_voice_timbre', narratorTimbre ? narratorTimbre.value : 'rough');
+                } catch (e) {}
+            }
+        }
+        if (narratorGender) narratorGender.addEventListener('change', function() { updateNarratorVoice(); SoundManager.play('tap'); });
+        if (narratorTimbre) narratorTimbre.addEventListener('change', function() { updateNarratorVoice(); SoundManager.play('tap'); });
+
         // Narrator test
         var narratorTest = el.querySelector('#btn-test-narrator');
         if (narratorTest) narratorTest.addEventListener('click', function() {
             SoundManager.play('tap');
             if (typeof BattleNarrator !== 'undefined') {
+                updateNarratorVoice();
                 BattleNarrator.setEnabled(true);
                 var toggle = el.querySelector('#narrator-toggle');
                 if (toggle) {

app/manifest.json

@@ -3,7 +3,7 @@
     "short_name": "VizMagic",
     "description": "Viz Magic — accessible browser RPG on the VIZ blockchain",
     "id": "https://vizmagic.web3blind.xyz/",
-    "start_url": "/?pwa=viz-magic-v49",
+    "start_url": "/?pwa=viz-magic-v50",
     "scope": "/",
     "display": "standalone",
     "display_override": ["standalone", "minimal-ui"],

app/sw.js

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

tests/player-bug-regressions.test.js

@@ -345,7 +345,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-v49/.test(swJs), 'service worker cache version should be bumped');
+  assert.ok(/viz-magic-v50/.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');
@@ -394,7 +394,7 @@ test('mobile entry helpers cover keyboard paste, home-screen shortcut, nav parit
   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-v49/.test(read('app/sw.js')), 'service worker cache should be bumped for UI changes');
+  assert.ok(/viz-magic-v50/.test(read('app/sw.js')), 'service worker cache should be bumped for UI changes');
 });
 
 
@@ -456,8 +456,8 @@ test('magical weather is labelled and affects hunts', function () {
   assert.ok(/forecast-card-effect/.test(homeJs + mainCss), 'forecast effect column needs its own thematic icon/card');
   assert.ok(/function getCurrentFestival/.test(worldEventsJs), 'magical holidays should sometimes appear in the forecast');
   assert.ok(/festival_today_prefix/.test(homeJs + ruJs + enJs), 'forecast holidays should have localized copy');
-  assert.ok(/i18n\/ru.js\?v=20260713b/.test(indexHtml), 'Russian weather copy must be cache-busted');
-  assert.ok(/i18n\/en.js\?v=20260713b/.test(indexHtml), 'English weather copy must be cache-busted');
+  assert.ok(/i18n\/ru.js\?v=20260713c/.test(indexHtml), 'Russian weather copy must be cache-busted');
+  assert.ok(/i18n\/en.js\?v=20260713c/.test(indexHtml), 'English weather copy must be cache-busted');
   assert.ok(/home.js\?v=20260713a/.test(indexHtml), 'home forecast layout must be cache-busted');
   assert.ok(/quests.js\?v=20260712a/.test(indexHtml), 'quest-limit UX must be cache-busted');
   assert.ok(/nav.js\?v=20260712b/.test(indexHtml), 'bottom tray nav must be cache-busted');
@@ -524,7 +524,7 @@ test('reported mobile UX issues have explicit fixes', function () {
 
 test('PWA icon and HP heart use expressive color accents', function () {
   assert.ok(/viz-magic-192\.png\?v=20260713a/.test(indexHtml), 'PWA icon link should be cache-busted after plus placement/color update');
-  assert.ok(/viz-magic-v49/.test(read('app/manifest.json')), 'manifest start URL should change so launchers can refresh icons');
+  assert.ok(/viz-magic-v50/.test(read('app/manifest.json')), 'manifest start URL should change so launchers can refresh icons');
   assert.ok(/label:'❤️ HP'/.test(homeJs), 'HP label should use a red heart emoji variant');
 });
 
@@ -551,6 +551,21 @@ test('hunt screen exposes explicit camp rest promised by Help', function () {
   assert.ok(/Отдых у костра/.test(ruJs) && /нажми «Отдых у костра»/.test(ruJs), 'Russian Help should name the visible rest button');
 });
 
+
+test('narrator voice preferences support gender and timbre', function () {
+  const settingsJs = read('app/js/ui/screens/settings.js');
+  const narratorJs = read('app/js/ui/components/battle-narrator.js');
+  assert.ok(/battle-narrator.js\?v=20260713a/.test(indexHtml), 'battle narrator should be cache-busted');
+  assert.ok(/settings.js\?v=20260713a/.test(indexHtml), 'settings should be cache-busted');
+  assert.ok(/narrator-voice-gender/.test(settingsJs), 'settings should expose narrator gender select');
+  assert.ok(/narrator-voice-timbre/.test(settingsJs), 'settings should expose narrator timbre select');
+  assert.ok(/setVoiceOptions/.test(narratorJs), 'narrator should persist selectable voice options');
+  assert.ok(/voiceGender = 'male'/.test(narratorJs) && /voiceTimbre = 'rough'/.test(narratorJs), 'default narrator voice should be low male/rough');
+  assert.ok(/utterance\.pitch = \(voiceGender === 'male'\)/.test(narratorJs), 'narrator should adjust pitch by selected gender/timbre');
+  assert.ok(/speechSynthesis\.getVoices/.test(narratorJs), 'narrator should try to select a matching system voice');
+  assert.ok(/narrator_voice_hint/.test(settingsJs + ruJs + enJs), 'settings should explain browser voice limitations');
+});
+
 if (process.exitCode) {
   process.exit(process.exitCode);
 }