Fix mobile install and home status scales

Author: web3blind

app/index.html

@@ -114,8 +114,8 @@
     <script src="js/config.js?v=20260621m"></script>
 
     <!-- I18n -->
-    <script src="js/i18n/ru.js?v=20260711a"></script>
-    <script src="js/i18n/en.js?v=20260711a"></script>
+    <script src="js/i18n/ru.js?v=20260711d"></script>
+    <script src="js/i18n/en.js?v=20260711d"></script>
 
     <!-- Utilities -->
     <script src="js/utils/helpers.js?v=20260621l"></script>
@@ -170,17 +170,17 @@
 
     <!-- UI Components -->
     <script src="js/ui/sound.js?v=20260711c"></script>
-    <script src="js/ui/components/progress-bar.js"></script>
+    <script src="js/ui/components/progress-bar.js?v=20260711d"></script>
     <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"></script>
-    <script src="js/ui/components/battle-narrator.js"></script>
+    <script src="js/ui/components/battle-narrator.js?v=20260711d"></script>
 
     <!-- UI Screens -->
     <script src="js/ui/screens/landing.js"></script>
     <script src="js/ui/screens/login.js?v=20260711a"></script>
     <script src="js/ui/screens/onboarding.js"></script>
-    <script src="js/ui/screens/home.js?v=20260711a"></script>
+    <script src="js/ui/screens/home.js?v=20260711d"></script>
     <script src="js/ui/screens/character.js?v=20260621l"></script>
     <script src="js/ui/screens/hunt.js"></script>
     <script src="js/ui/screens/inventory.js?v=20260621l"></script>
@@ -193,11 +193,11 @@
     <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?v=20260711c"></script>
-    <script src="js/ui/screens/help.js"></script>
+    <script src="js/ui/screens/settings.js?v=20260711d"></script>
+    <script src="js/ui/screens/help.js?v=20260711d"></script>
     <script src="js/ui/screens/leaderboard.js"></script>
 
     <!-- Main App Controller (must be last) -->
-    <script src="js/ui/app.js?v=20260711a"></script>
+    <script src="js/ui/app.js?v=20260711d"></script>
 </body>
 </html>

app/js/i18n/en.js

@@ -122,7 +122,12 @@ var LangEN = {
     home_install_shortcut: 'Game shortcut on your phone',
     home_install_shortcut_text: 'Add Viz Magic to your phone home screen so you do not have to find a saved link after the game window closes. This is a normal PWA shortcut install, no app store needed.',
     home_install_shortcut_button: 'Install or show instructions',
-    home_install_shortcut_manual: 'If the install prompt does not appear: open the browser or Telegram menu and choose Add to Home screen / Install app.',
+    home_install_shortcut_manual: 'If the install prompt does not appear, add the shortcut manually:',
+    home_install_step_1: 'Open the browser menu or Telegram three-dot menu.',
+    home_install_step_2: 'Choose Add to Home screen, Install app, or a similar item.',
+    home_install_step_3: 'Confirm the Viz Magic shortcut.',
+    home_install_shortcut_installed: 'Viz Magic shortcut installed.',
+    home_install_shortcut_already: 'The game is already running as an installed app.',
 
     // Character
     char_title: 'Character',
@@ -340,6 +345,8 @@ var LangEN = {
     // Battle Narrator
     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_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

@@ -122,7 +122,12 @@ var LangRU = {
     home_install_shortcut: 'Ярлык игры на телефоне',
     home_install_shortcut_text: 'Чтобы не искать сохранённую ссылку после закрытия окна, добавьте Viz Magic на главный экран телефона. Это обычная установка PWA-ярлыка без магазина приложений.',
     home_install_shortcut_button: 'Установить или показать инструкцию',
-    home_install_shortcut_manual: 'Если кнопка установки не появилась: откройте меню браузера или Telegram, выберите «Добавить на главный экран» / «Установить приложение».',
+    home_install_shortcut_manual: 'Если системное окно установки не появилось, установите ярлык вручную:',
+    home_install_step_1: 'Откройте меню браузера или меню Telegram с тремя точками.',
+    home_install_step_2: 'Выберите «Добавить на главный экран», «Установить приложение» или похожий пункт.',
+    home_install_step_3: 'Подтвердите добавление ярлыка Viz Magic.',
+    home_install_shortcut_installed: 'Ярлык Viz Magic установлен.',
+    home_install_shortcut_already: 'Игра уже открыта как установленное приложение.',
 
     // Character
     char_title: 'Персонаж',
@@ -340,6 +345,8 @@ var LangRU = {
     // Battle Narrator
     narrator_label: 'Боевой Рассказчик',
     narrator_toggle: 'Боевой Рассказчик',
+    narrator_test: 'Проверить рассказчика',
+    narrator_test_message: 'Боевой рассказчик на связи. Если включён экранный диктор, он должен прочитать это сообщение.',
     narrator_pve_attack: 'Ты использовал {spell}. {creature} получает {damage} урона.',
     narrator_critical: 'Критический удар!',
     narrator_hunt_victory: 'Победа! {creature} повержен. Получено {xp} опыта.',
@@ -538,9 +545,9 @@ var LangRU = {
 
     // Navigation (marketplace/crafting)
     nav_bazaar: 'Базар',
-    nav_craft: 'Ковка',
+    nav_craft: 'Мастерская',
     nav_marketplace: 'Базар',
-    nav_crafting: 'Ковка',
+    nav_crafting: 'Мастерская',
 
     // Marketplace
     market_title: 'Базар',
@@ -789,7 +796,7 @@ var LangRU = {
     quest_abandoned: 'Задание отменено.',
     chronicle_unknown_guild: 'неизвестная гильдия',
     quest_type_hunt: 'Охота',
-    quest_type_craft: 'Ковка',
+    quest_type_craft: 'Мастерская',
     quest_type_duel: 'Дуэль',
     quest_type_explore: 'Исследование',
     quest_type_social: 'Общение',
@@ -837,7 +844,7 @@ var LangRU = {
     quest_daily_bless: 'Ежедневные Благословения',
     quest_daily_bless_desc: 'Благословите других магов сегодня.',
     quest_daily_help_text: 'Ежедневное пророчество нужно принять, а потом выполнить его цель. Для благословений — откройте Хронику и благословляйте других магов.',
-    quest_daily_craft: 'Ежедневная Ковка',
+    quest_daily_craft: 'Ежедневная Мастерская',
     quest_daily_craft_desc: 'Создайте предмет сегодня.',
     quest_daily_duel: 'Ежедневная Дуэль',
     quest_daily_duel_desc: 'Выиграйте дуэль сегодня.',
@@ -923,8 +930,8 @@ var LangRU = {
     help_section_armageddon: 'Армагеддон',
     help_armageddon_text: 'Потратьте 100% маны ради 100× опыта от обычного удара. Требует артефакт Камень Армагеддона. Дроп: Thornvine (Lv5+, шанс 0.5%). Крафт: Echo Shards ×3 + Shadow Shard ×3 + Fire Dust ×5 на 10 уровне (стоит 5% маны). Подтвердите чекбокс перед запуском — мана восстанавливается ~5 дней.',
 
-    help_section_crafting: 'Крафт',
-    help_crafting_text: 'Откройте экран Крафт, выберите рецепт и нажмите «Создать». Материалы расходуются. Качество зависит от INT и хеша блока.',
+    help_section_crafting: 'Мастерская',
+    help_crafting_text: 'Откройте Мастерскую, выберите рецепт и нажмите «Создать». Материалы расходуются. Качество зависит от INT и хеша блока.',
 
     help_section_marketplace: 'Рынок',
     help_marketplace_text: 'Обзор → купите выставленные предметы. Продать → выставьте свои предметы за Печати Мира. Обмен → прямая передача предмета другому магу.',

app/js/ui/app.js

@@ -280,6 +280,12 @@ var App = (function() {
             event.preventDefault();
             _deferredInstallPrompt = event;
         });
+        window.addEventListener('appinstalled', function() {
+            _deferredInstallPrompt = null;
+            if (typeof Toast !== 'undefined') {
+                Toast.success(Helpers.t('home_install_shortcut_installed'));
+            }
+        });
         if ('serviceWorker' in navigator) {
             navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(function() {
                 console.log('Service Worker Registered');
@@ -290,15 +296,40 @@ var App = (function() {
     }
 
     function installShortcut() {
+        if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) {
+            if (typeof Toast !== 'undefined') Toast.info(Helpers.t('home_install_shortcut_already'), 5000, { key: 'install_shortcut_already' });
+            return;
+        }
         if (_deferredInstallPrompt) {
             _deferredInstallPrompt.prompt();
-            _deferredInstallPrompt.userChoice.then(function() {
+            _deferredInstallPrompt.userChoice.then(function(choice) {
                 _deferredInstallPrompt = null;
+                if (choice && choice.outcome === 'accepted' && typeof Toast !== 'undefined') {
+                    Toast.success(Helpers.t('home_install_shortcut_installed'));
+                } else {
+                    _showInstallInstructions();
+                }
             });
             return;
         }
+        _showInstallInstructions();
+    }
+
+    function _showInstallInstructions() {
+        var text = '<p>' + Helpers.t('home_install_shortcut_manual') + '</p>' +
+            '<ol>' +
+                '<li>' + Helpers.t('home_install_step_1') + '</li>' +
+                '<li>' + Helpers.t('home_install_step_2') + '</li>' +
+                '<li>' + Helpers.t('home_install_step_3') + '</li>' +
+            '</ol>';
+        if (typeof Modal !== 'undefined' && Modal.show) {
+            Modal.show(Helpers.t('home_install_shortcut'), text, [
+                { label: Helpers.t('close'), action: function() { Modal.close(); } }
+            ]);
+            return;
+        }
         if (typeof Toast !== 'undefined') {
-            Toast.info(Helpers.t('home_install_shortcut_manual'), 6000, { key: 'install_shortcut_manual' });
+            Toast.info(Helpers.t('home_install_shortcut_manual'), 9000, { key: 'install_shortcut_manual' });
         }
     }
 

app/js/ui/components/progress-bar.js

@@ -12,13 +12,17 @@ var ProgressBar = (function() {
     function create(opts) {
         var pct = Math.min(100, Math.floor((opts.value / opts.max) * 100));
         var color = opts.color || 'var(--color-primary)';
-        var text = opts.showText !== false ? (opts.value + ' / ' + opts.max) : '';
+        var displayValue = (typeof opts.displayValue !== 'undefined') ? opts.displayValue : opts.value;
+        var displayMax = (typeof opts.displayMax !== 'undefined') ? opts.displayMax : opts.max;
+        var text = opts.showText !== false ? (displayValue + ' / ' + displayMax) : '';
+        var ariaValue = (typeof opts.ariaValue !== 'undefined') ? opts.ariaValue : displayValue;
+        var ariaMax = (typeof opts.ariaMax !== 'undefined') ? opts.ariaMax : displayMax;
 
         return '<div class="progress-bar-wrapper">' +
             (opts.label ? '<span class="progress-label">' + Helpers.escapeHtml(opts.label) + '</span>' : '') +
             '<div class="progress-bar" role="progressbar" ' +
-            'aria-valuenow="' + opts.value + '" aria-valuemin="0" aria-valuemax="' + opts.max + '" ' +
-            'aria-label="' + Helpers.escapeHtml(opts.label || '') + ' ' + opts.value + ' of ' + opts.max + '"' +
+            'aria-valuenow="' + ariaValue + '" aria-valuemin="0" aria-valuemax="' + ariaMax + '" ' +
+            'aria-label="' + Helpers.escapeHtml(opts.label || '') + ' ' + ariaValue + ' of ' + ariaMax + '"' +
             (opts.id ? ' id="' + opts.id + '"' : '') + '>' +
             '<div class="progress-fill" style="width:' + pct + '%;background:' + color + '"></div>' +
             (text ? '<span class="progress-text">' + text + '</span>' : '') +
@@ -28,16 +32,18 @@ var ProgressBar = (function() {
     /**
      * Update an existing progress bar
      */
-    function update(id, value, max) {
+    function update(id, value, max, displayValue, displayMax) {
         var el = Helpers.$(id);
         if (!el) return;
         var pct = Math.min(100, Math.floor((value / max) * 100));
-        el.setAttribute('aria-valuenow', value);
-        el.setAttribute('aria-valuemax', max);
+        var shownValue = (typeof displayValue !== 'undefined') ? displayValue : value;
+        var shownMax = (typeof displayMax !== 'undefined') ? displayMax : max;
+        el.setAttribute('aria-valuenow', shownValue);
+        el.setAttribute('aria-valuemax', shownMax);
         var fill = el.querySelector('.progress-fill');
         if (fill) fill.style.width = pct + '%';
         var text = el.querySelector('.progress-text');
-        if (text) text.textContent = value + ' / ' + max;
+        if (text) text.textContent = shownValue + ' / ' + shownMax;
     }
 
     return { create: create, update: update };

app/js/ui/screens/home.js

@@ -7,6 +7,8 @@ var HomeScreen = (function() {
 
     var PRIMARY_HOME_SCREENS = ['home', 'hunt', 'map', 'guild', 'marketplace', 'crafting', 'character', 'help', 'leaderboard'];
     var SECONDARY_HOME_SCREENS = ['inventory', 'chronicle', 'arena', 'quests', 'world-boss', 'settings'];
+    var HOME_HP_DISPLAY_MAX = 5000;
+    var HOME_XP_DISPLAY_MAX = 3000;
 
     function render() {
         var t = Helpers.t;
@@ -25,6 +27,8 @@ var HomeScreen = (function() {
         var xpNeeded = GameFormulas.xpForLevel(character.level + 1) || 1000;
         var xpCurrent = character.xp - GameFormulas.totalXpForLevel(character.level);
         if (xpCurrent < 0) xpCurrent = 0;
+        var hpShown = _scaleForDisplay(character.hp, character.maxHp, HOME_HP_DISPLAY_MAX);
+        var xpShown = _scaleForDisplay(xpCurrent, xpNeeded, HOME_XP_DISPLAY_MAX);
 
         el.innerHTML =
             '<div class="home-dashboard">' +
@@ -38,8 +42,8 @@ var HomeScreen = (function() {
                     '<h1>' + t('home_welcome') + ', ' + Helpers.escapeHtml(character.name) + '</h1>' +
                     '<p>' + Helpers.classIcon(character.className) + ' ' + t('class_' + character.className) +
                         ' \u2022 ' + t('home_level') + ' ' + character.level + '</p>' +
-                    ProgressBar.create({id:'hp-bar', label:'HP', value:character.hp, max:character.maxHp, color:'#e53935'}) +
-                    ProgressBar.create({id:'xp-bar', label:'XP', value:xpCurrent, max:xpNeeded, color:'#ffc107'}) +
+                    ProgressBar.create({id:'hp-bar', label:'HP', value:character.hp, max:character.maxHp, displayValue:hpShown, displayMax:HOME_HP_DISPLAY_MAX, color:'#e53935'}) +
+                    ProgressBar.create({id:'xp-bar', label:'XP', value:xpCurrent, max:xpNeeded, displayValue:xpShown, displayMax:HOME_XP_DISPLAY_MAX, color:'#ffc107'}) +
                     ProgressBar.create({id:'mana-bar', label:'⚡ ' + t('home_mana'), value:0, max:100, color:'#2196f3'}) +
                     '<button class="help-tip-btn" aria-label="' + t('help_tip_mana') + '" ' +
                     'title="' + t('help_tip_mana') + '" ' +
@@ -109,6 +113,13 @@ var HomeScreen = (function() {
         }
     }
 
+    function _scaleForDisplay(value, max, displayMax) {
+        if (!max || max <= 0) return 0;
+        var shown = Math.round(Math.max(0, value) * displayMax / max);
+        if (shown > displayMax) shown = displayMax;
+        return shown;
+    }
+
     function _renderWorldEventBanner(state, blockNum, t) {
         if (typeof WorldEvents === 'undefined') return '';
 

app/js/ui/screens/settings.js

@@ -43,6 +43,7 @@ var SettingsScreen = (function() {
         var highContrast = _getStoredBool('high_contrast', false);
         var reducedMotion = _getStoredBool('reduced_motion', false);
         var sfxVolume = Math.round(_getStoredNumber('sfx_volume', 0.5) * 100);
+        var narratorEnabled = (typeof BattleNarrator !== 'undefined' && BattleNarrator.isEnabled) ? BattleNarrator.isEnabled() : _getStoredBool('battle_narrator', false);
         if (typeof SoundManager !== 'undefined') SoundManager.setVolume(sfxVolume / 100);
 
         el.innerHTML =
@@ -63,7 +64,8 @@ var SettingsScreen = (function() {
                     '<h2>' + t('settings_sound') + '</h2>' +
                     _renderSlider('sfx-volume', t('settings_sfx'), sfxVolume) +
                     _renderSlider('music-volume', t('settings_music'), 50) +
-                    _renderToggle('narrator-toggle', t('narrator_toggle'), true) +
+                    _renderToggle('narrator-toggle', t('narrator_toggle'), narratorEnabled) +
+                    '<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>' +
                         '<select id="sound-density" class="input-field">' +
@@ -189,13 +191,30 @@ var SettingsScreen = (function() {
                 }
                 if (this.id === 'narrator-toggle' && typeof BattleNarrator !== 'undefined') {
                     BattleNarrator.setEnabled(isActive);
+                    if (isActive) BattleNarrator.announce(Helpers.t('narrator_test_message'), 'assertive');
                 }
                 if (this.id === 'haptics-toggle') {
                     _setStoredBool('haptics', isActive);
                 }
             });
         }
 
+        // Narrator test
+        var narratorTest = el.querySelector('#btn-test-narrator');
+        if (narratorTest) narratorTest.addEventListener('click', function() {
+            SoundManager.play('tap');
+            if (typeof BattleNarrator !== 'undefined') {
+                BattleNarrator.setEnabled(true);
+                var toggle = el.querySelector('#narrator-toggle');
+                if (toggle) {
+                    toggle.classList.add('active');
+                    toggle.setAttribute('aria-checked', 'true');
+                }
+                BattleNarrator.announce(Helpers.t('narrator_test_message'), 'assertive');
+                BattleNarrator.spatialHint('center', 660);
+            }
+        });
+
         // Realm info
         var realmBtn = el.querySelector('#btn-realm-info');
         if (realmBtn) realmBtn.addEventListener('click', function() {

app/sw.js

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