Polish home install and ambient UX

Author: web3blind

app/assets/icons/viz-magic-192.png

@@ -1872,10 +1872,19 @@ body,
 .developers-reward-options { display: grid; gap: 10px; margin-top: 12px; }
 
 
-.temple-deity-fallback { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-size: 2.5rem; margin: 0 auto 8px; }
-.temple-deity-image { min-width: 72px; min-height: 72px; }
 .boss-lore { margin: 16px 0; padding: 14px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); text-align: left; }
 .boss-lore h3 { margin-bottom: 8px; }
 .boss-lore ul { margin: 8px 0 0 20px; }
 .boss-motto { margin: 14px 0; padding-left: 12px; border-left: 3px solid var(--color-primary); color: var(--color-text); white-space: pre-line; }
 .forecast-card-news { border-color: var(--color-accent); }
+
+
+/* Low-cost ambient motion. Disabled for users who prefer reduced motion. */
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes vmagic-rune-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,216,88,0)); transform: scale(1); } 50% { filter: drop-shadow(0 0 8px rgba(255,216,88,0.45)); transform: scale(1.03); } }
+    @keyframes vmagic-boss-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(124,53,255,0)); } 50% { transform: scale(1.025); filter: drop-shadow(0 0 10px rgba(124,53,255,0.35)); } }
+    @keyframes vmagic-weather-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
+    .recipe-icon, .craft-icon-anim { animation: vmagic-rune-pulse 3.6s ease-in-out infinite; }
+    .boss-icon-large { display: inline-block; animation: vmagic-boss-breathe 4.8s ease-in-out infinite; }
+    .magical-forecast .forecast-icon { display: inline-block; animation: vmagic-weather-drift 5.5s ease-in-out infinite; }
+}

app/assets/icons/viz-magic-512.png

@@ -10,10 +10,10 @@
     <title>Viz Magic</title>
     <link rel="manifest" href="manifest.json?v=20260713b">
     <link rel="icon" href="favicon.ico?v=20260712c">
-    <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/viz-magic-192.png?v=20260713a">
-    <link rel="icon" type="image/png" sizes="512x512" href="assets/icons/viz-magic-512.png?v=20260713a">
-    <link rel="apple-touch-icon" href="assets/icons/viz-magic-192.png?v=20260713a">
-    <link rel="stylesheet" href="css/main.css?v=20260713c">
+    <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/viz-magic-192.png?v=20260714a">
+    <link rel="icon" type="image/png" sizes="512x512" href="assets/icons/viz-magic-512.png?v=20260714a">
+    <link rel="apple-touch-icon" href="assets/icons/viz-magic-192.png?v=20260714a">
+    <link rel="stylesheet" href="css/main.css?v=20260714a">
     <link rel="stylesheet" href="css/themes.css">
     <link rel="stylesheet" href="css/accessibility.css">
 </head>
@@ -124,8 +124,8 @@
     <script src="js/config.js?v=20260712a"></script>
 
     <!-- I18n -->
-    <script src="js/i18n/ru.js?v=20260713i"></script>
-    <script src="js/i18n/en.js?v=20260713i"></script>
+    <script src="js/i18n/ru.js?v=20260714a"></script>
+    <script src="js/i18n/en.js?v=20260714a"></script>
 
     <!-- Utilities -->
     <script src="js/utils/helpers.js?v=20260621l"></script>
@@ -190,11 +190,11 @@
     <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=20260713f"></script>
+    <script src="js/ui/screens/home.js?v=20260714a"></script>
     <script src="js/ui/screens/character.js?v=20260713b"></script>
     <script src="js/ui/screens/hunt.js?v=20260713d"></script>
     <script src="js/ui/screens/inventory.js?v=20260713a"></script>
-    <script src="js/ui/screens/chronicle.js?v=20260713a"></script>
+    <script src="js/ui/screens/chronicle.js?v=20260714a"></script>
     <script src="js/ui/screens/duel.js"></script>
     <script src="js/ui/screens/arena.js?v=20260621d"></script>
     <script src="js/ui/screens/guild.js?v=20260621l"></script>
@@ -206,10 +206,10 @@
     <script src="js/ui/screens/settings.js?v=20260713b"></script>
     <script src="js/ui/screens/help.js?v=20260713a"></script>
     <script src="js/ui/screens/leaderboard.js?v=20260712c"></script>
-    <script src="js/ui/screens/temple.js?v=20260713b"></script>
-    <script src="js/ui/screens/developers.js?v=20260713a"></script>
+    <script src="js/ui/screens/temple.js?v=20260714a"></script>
+    <script src="js/ui/screens/developers.js?v=20260714a"></script>
 
     <!-- Main App Controller (must be last) -->
-    <script src="js/ui/app.js?v=20260713b"></script>
+    <script src="js/ui/app.js?v=20260714a"></script>
 </body>
 </html>

app/css/main.css

@@ -584,6 +584,11 @@ var LangEN = {
     developers_reward_confirm_button: 'Send reward',
     developers_reward_success: 'Thank you! Developer reward sent.',
     developers_reward_error: 'Could not send the reward. Check login and try again.',
+    developers_custom_reward_label: 'Custom reward amount, % mana',
+    developers_custom_reward_hint: 'Enter 0.01 to 100. Example: 0.25 or 3.',
+    developers_custom_reward_button: 'Reward custom amount',
+    developers_reward_invalid: 'Enter an amount from 0.01 to 100.',
+    home_install_shortcut_requested: 'If the browser installed the shortcut, the game will say: “Shortcut installed.” If there is no message, open the browser menu and add the shortcut manually.',
     developers_reward_memo: 'thanks for Viz Magic',
 
     // Marketplace
@@ -889,7 +894,7 @@ var LangEN = {
     event_next_season: 'Season Change',
 
     magic_news_sun_wolf: 'A squad of battle mages met a sun wolf in the enchanted forest. The best healers of the Third Kingdom are treating the entire squad for temporary blindness.',
-    magic_news_forest_patrol: 'The forest watch asks mages not to feed talking stumps with promises. The stumps write everything down.',
+    magic_news_forest_patrol: 'The forest watch asks mages not to feed talking stumps with promises. They remember everything and demand a sequel...',
     magic_news_wand_union: 'The union of old wands announced a day of silence. Sparks are allowed only in whispers.',
     magic_news_frog_court: 'The Frog Court acquitted the rain: witnesses confirmed it was falling upward for a valid reason.',
     magic_news_dragon_shadow: 'The shadow of the Aether Dragon was seen near the map edge. The shadow claims it was only walking.',

app/index.html

@@ -584,6 +584,11 @@ var LangRU = {
     developers_reward_confirm_button: 'Отправить награду',
     developers_reward_success: 'Спасибо! Награда разработчику отправлена.',
     developers_reward_error: 'Не удалось отправить награду. Проверьте вход и попробуйте снова.',
+    developers_custom_reward_label: 'Своя сумма награды, % маны',
+    developers_custom_reward_hint: 'Введите от 0,01 до 100. Например: 0,25 или 3.',
+    developers_custom_reward_button: 'Наградить своей суммой',
+    developers_reward_invalid: 'Введите сумму от 0,01 до 100.',
+    home_install_shortcut_requested: 'Если браузер установил ярлык, игра сообщит: «Ярлык установлен». Если сообщения нет, откройте меню браузера и добавьте ярлык вручную.',
     developers_reward_memo: 'спасибо за Viz Magic',
 
     // Marketplace
@@ -889,7 +894,7 @@ var LangRU = {
     event_next_season: 'Смена Сезона',
 
     magic_news_sun_wolf: 'Отряд боевых магов в зачарованном лесу наткнулся на солнечного волка. Временную слепоту всего отряда лечат лучшие знахари Третьего Царства.',
-    magic_news_forest_patrol: 'Лесная стража просит не кормить говорящие пни обещаниями. Пни всё записывают и потом требуют продолжения.',
+    magic_news_forest_patrol: 'Лесная стража просит не кормить говорящие пни обещаниями. Они всё запоминают и требуют продолжения...',
     magic_news_wand_union: 'Профсоюз старых жезлов объявил день тишины. Искры разрешены только шёпотом.',
     magic_news_frog_court: 'Жабий суд оправдал дождь: свидетели подтвердили, что он падал вверх по уважительной причине.',
     magic_news_dragon_shadow: 'Тень Эфирного Дракона замечена на границе карты. Сама тень утверждает, что просто гуляла.',

app/js/i18n/en.js

@@ -15,6 +15,7 @@ var App = (function() {
     var _syncVisible = false;
     var _lastSyncPercent = -1;
     var _deferredInstallPrompt = null;
+    var INSTALL_ACK_KEY = VizMagicConfig.STORAGE_PREFIX + 'install_shortcut_ack';
     var POLL_INTERVAL_MS = 3000;
 
     /**
@@ -28,6 +29,8 @@ var App = (function() {
         A11y.init();
         A11y.initKeyboardShortcuts();
 
+        _showPendingInstallNotice();
+
         // Initialize Battle Narrator
         if (typeof BattleNarrator !== 'undefined') {
             BattleNarrator.init();
@@ -284,8 +287,9 @@ var App = (function() {
         });
         window.addEventListener('appinstalled', function() {
             _deferredInstallPrompt = null;
+            try { localStorage.setItem(INSTALL_ACK_KEY, '1'); } catch (e) {}
             if (typeof Toast !== 'undefined') {
-                Toast.success(Helpers.t('home_install_shortcut_installed'));
+                Toast.success(Helpers.t('home_install_shortcut_installed'), 7000, { key: 'install_shortcut_installed' });
             }
         });
         if ('serviceWorker' in navigator) {
@@ -297,23 +301,38 @@ var App = (function() {
         }
     }
 
+    function _showPendingInstallNotice() {
+        try {
+            if (localStorage.getItem(INSTALL_ACK_KEY) === '1') {
+                localStorage.removeItem(INSTALL_ACK_KEY);
+                setTimeout(function() {
+                    if (typeof Toast !== 'undefined') Toast.success(Helpers.t('home_install_shortcut_installed'), 7000, { key: 'install_shortcut_installed' });
+                }, 600);
+            }
+        } catch (e) {}
+    }
+
     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) {
+            if (typeof Toast !== 'undefined') Toast.info(Helpers.t('home_install_shortcut_requested'), 7000, { key: 'install_shortcut_requested' });
             _deferredInstallPrompt.prompt();
             _deferredInstallPrompt.userChoice.then(function(choice) {
                 _deferredInstallPrompt = null;
                 if (choice && choice.outcome === 'accepted' && typeof Toast !== 'undefined') {
-                    Toast.success(Helpers.t('home_install_shortcut_installed'));
+                    try { localStorage.setItem(INSTALL_ACK_KEY, '1'); } catch (e) {}
+                    Toast.success(Helpers.t('home_install_shortcut_installed'), 7000, { key: 'install_shortcut_installed' });
                 } else {
+                    if (typeof Toast !== 'undefined') Toast.info(Helpers.t('home_install_shortcut_requested'), 7000, { key: 'install_shortcut_requested' });
                     _showInstallInstructions();
                 }
             });
             return;
         }
+        if (typeof Toast !== 'undefined') Toast.info(Helpers.t('home_install_shortcut_requested'), 7000, { key: 'install_shortcut_requested' });
         _showInstallInstructions();
     }
 

app/js/i18n/ru.js

@@ -13,6 +13,7 @@ var ChronicleScreen = (function() {
     var REQUIRED_TAG = '#viz_magic';
     var cachedFeedHtml = {};
     var DRAFT_KEY = VizMagicConfig.STORAGE_PREFIX + 'chronicle_draft';
+    var FEED_CACHE_PREFIX = VizMagicConfig.STORAGE_PREFIX + 'chronicle_feed_';
 
     function render() {
         var t = Helpers.t;
@@ -62,6 +63,14 @@ var ChronicleScreen = (function() {
         try { localStorage.setItem(DRAFT_KEY, text || ''); } catch (e) {}
     }
 
+    function _getCachedFeed(tab) {
+        try { return localStorage.getItem(FEED_CACHE_PREFIX + tab) || ''; } catch (e) { return ''; }
+    }
+
+    function _setCachedFeed(tab, html) {
+        try { localStorage.setItem(FEED_CACHE_PREFIX + tab, html || ''); } catch (e) {}
+    }
+
     function _tabButton(id, label) {
         var isActive = currentTab === id;
         return '<button class="btn ' + (isActive ? 'btn-primary' : 'btn-secondary') + ' btn-sm chronicle-tab-btn" ' +
@@ -122,6 +131,7 @@ var ChronicleScreen = (function() {
         var feed = Helpers.$('chronicle-feed');
         if (!feed) return;
 
+        if (!cachedFeedHtml[currentTab]) cachedFeedHtml[currentTab] = _getCachedFeed(currentTab);
         if (cachedFeedHtml[currentTab]) {
             feed.innerHTML = cachedFeedHtml[currentTab];
             _bindBlessButtons(feed);
@@ -300,6 +310,7 @@ var ChronicleScreen = (function() {
         }
         feed.innerHTML = html;
         cachedFeedHtml[currentTab] = html;
+        _setCachedFeed(currentTab, html);
         _bindBlessButtons(feed);
     }
 

app/js/ui/app.js

@@ -29,6 +29,12 @@ var DevelopersScreen = (function() {
         if (!user) {
             html += '<div class="empty-state">' + t('developers_login_required') + '</div>';
         } else {
+            html += '<div class="developers-custom-reward">';
+            html += '<label for="developers-custom-energy" class="input-label">' + t('developers_custom_reward_label') + '</label>';
+            html += '<input id="developers-custom-energy" class="input-field" type="number" min="0.01" max="100" step="0.01" inputmode="decimal" placeholder="0.25">';
+            html += '<p class="developers-note">' + t('developers_custom_reward_hint') + '</p>';
+            html += '<button type="button" class="btn btn-primary dev-custom-reward-btn">' + t('developers_custom_reward_button') + '</button>';
+            html += '</div>';
             html += '<div class="developers-reward-options" role="group" aria-label="' + t('developers_reward_title') + '">';
             for (var i = 0; i < REWARD_OPTIONS.length; i++) {
                 html += '<button type="button" class="btn btn-primary dev-reward-btn" data-energy="' + REWARD_OPTIONS[i] + '">' +
@@ -43,6 +49,20 @@ var DevelopersScreen = (function() {
     }
 
     function _bindEvents(el) {
+        var customBtn = el.querySelector('.dev-custom-reward-btn');
+        if (customBtn) {
+            customBtn.addEventListener('click', function() {
+                var input = el.querySelector('#developers-custom-energy');
+                var percent = input ? parseFloat(String(input.value || '').replace(',', '.')) : 0;
+                if (!(percent >= 0.01 && percent <= 100)) {
+                    Toast.error(Helpers.t('developers_reward_invalid'));
+                    SoundManager.play('error');
+                    return;
+                }
+                _confirmReward(Math.round(percent * 100));
+            });
+        }
+
         var buttons = el.querySelectorAll('.dev-reward-btn');
         for (var i = 0; i < buttons.length; i++) {
             buttons[i].addEventListener('click', function() {

app/js/ui/screens/chronicle.js

@@ -5,7 +5,7 @@
 var HomeScreen = (function() {
     'use strict';
 
-    var PRIMARY_HOME_SCREENS = ['home', 'hunt', 'map', 'inventory', 'arena', 'quests', 'guild', 'marketplace', 'crafting', 'temple'];
+    var PRIMARY_HOME_SCREENS = ['home', 'inventory', 'guild', 'crafting', 'hunt', 'map', 'arena', 'quests', 'marketplace', 'temple'];
     var SECONDARY_HOME_SCREENS = ['chronicle', 'character', 'leaderboard', 'world-boss', 'settings', 'help', 'developers'];
     var HOME_HP_DISPLAY_MAX = 5000;
     var HOME_XP_DISPLAY_MAX = 3000;