Build year-sized magical forecast pool

Author: web3blind

app/css/main.css

@@ -1616,3 +1616,61 @@ body,
     margin-left: 0;
     line-height: 1.4;
 }
+
+
+.magical-forecast {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--space-sm);
+    align-items: stretch;
+}
+
+.forecast-card {
+    min-width: 0;
+    padding: var(--space-sm);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: rgba(255,255,255,0.03);
+}
+
+.forecast-icon {
+    display: block;
+    font-size: 1.6rem;
+    line-height: 1;
+    margin-bottom: 6px;
+}
+
+.forecast-kicker {
+    display: block;
+    color: var(--color-primary);
+    font-size: 0.78rem;
+    font-weight: 700;
+    margin-bottom: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+.forecast-line,
+.forecast-omen,
+.magical-forecast .season-bonus {
+    margin: 0;
+    line-height: 1.4;
+    overflow-wrap: anywhere;
+}
+
+.forecast-line {
+    color: var(--color-text);
+    font-weight: 650;
+}
+
+.forecast-omen,
+.magical-forecast .season-bonus {
+    color: var(--color-text-muted);
+    font-size: 0.82rem;
+}
+
+@media (max-width: 560px) {
+    .magical-forecast {
+        grid-template-columns: 1fr;
+    }
+}

app/index.html

@@ -13,7 +13,7 @@
     <link rel="icon" type="image/png" sizes="192x192" href="assets/icons/viz-magic-192.png?v=20260712c">
     <link rel="icon" type="image/png" sizes="512x512" href="assets/icons/viz-magic-512.png?v=20260712c">
     <link rel="apple-touch-icon" href="assets/icons/viz-magic-192.png?v=20260712c">
-    <link rel="stylesheet" href="css/main.css?v=20260712b">
+    <link rel="stylesheet" href="css/main.css?v=20260712e">
     <link rel="stylesheet" href="css/themes.css">
     <link rel="stylesheet" href="css/accessibility.css">
 </head>
@@ -116,8 +116,8 @@
     <script src="js/config.js?v=20260621m"></script>
 
     <!-- I18n -->
-    <script src="js/i18n/ru.js?v=20260712d"></script>
-    <script src="js/i18n/en.js?v=20260712d"></script>
+    <script src="js/i18n/ru.js?v=20260712e"></script>
+    <script src="js/i18n/en.js?v=20260712e"></script>
 
     <!-- Utilities -->
     <script src="js/utils/helpers.js?v=20260621l"></script>
@@ -161,7 +161,7 @@
     <script src="js/engine/marketplace.js"></script>
     <script src="js/engine/checkpoint.js"></script>
     <script src="js/engine/block-processor.js"></script>
-    <script src="js/engine/world-events.js?v=20260712d"></script>
+    <script src="js/engine/world-events.js?v=20260712e"></script>
     <script src="js/engine/world-boss.js"></script>
     <script src="js/engine/quest-system.js?v=20260621e"></script>
     <script src="js/engine/loci.js"></script>
@@ -182,7 +182,7 @@
     <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=20260712c"></script>
+    <script src="js/ui/screens/home.js?v=20260712e"></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>

app/js/engine/world-events.js

@@ -302,6 +302,25 @@ var WorldEvents = (function() {
         }
     ];
 
+
+
+    /** Everyday magical sky signs. Combined with omens, this gives a year-sized forecast pool. */
+    var SKY_SIGNS = [
+        { id: 'sun_cloud', icon: '\u26C5', summaryKey: 'sky_sun_cloud' },
+        { id: 'rain', icon: '\uD83C\uDF27\uFE0F', summaryKey: 'sky_rain' },
+        { id: 'hail', icon: '\uD83C\uDF28\uFE0F', summaryKey: 'sky_hail' },
+        { id: 'lightning', icon: '\uD83C\uDF29\uFE0F', summaryKey: 'sky_lightning' },
+        { id: 'hurricane', icon: '\uD83C\uDF2A\uFE0F', summaryKey: 'sky_hurricane' },
+        { id: 'dry_heat', icon: '\uD83C\uDF35', summaryKey: 'sky_dry_heat' },
+        { id: 'hard_frost', icon: '\u2744\uFE0F', summaryKey: 'sky_hard_frost' },
+        { id: 'dust_storm', icon: '\uD83C\uDF2B\uFE0F', summaryKey: 'sky_dust_storm' },
+        { id: 'sudden_thaw', icon: '\uD83E\uDDCA', summaryKey: 'sky_sudden_thaw' },
+        { id: 'red_dawn', icon: '\uD83C\uDF05', summaryKey: 'sky_red_dawn' },
+        { id: 'black_snow', icon: '\u26C4', summaryKey: 'sky_black_snow' },
+        { id: 'silver_fog', icon: '\uD83C\uDF01', summaryKey: 'sky_silver_fog' },
+        { id: 'double_rainbow', icon: '\uD83C\uDF08', summaryKey: 'sky_double_rainbow' }
+    ];
+
     /**
      * Get the current season based on block number.
      * @param {number} blockNum
@@ -336,14 +355,36 @@ var WorldEvents = (function() {
 
 
 
+
+
+    /**
+     * Get current sky sign based on block number.
+     * @param {number} blockNum
+     * @returns {Object}
+     */
+    function getCurrentSky(blockNum) {
+        var idx = Math.floor(blockNum / 28800) % SKY_SIGNS.length;
+        if (idx < 0) idx = 0;
+        return SKY_SIGNS[idx];
+    }
+
+    /**
+     * Count available daily forecast combinations.
+     * @returns {number}
+     */
+    function getForecastVariantCount() {
+        return SKY_SIGNS.length * WEATHER.length;
+    }
+
     /**
      * Get current magical weather based on block number.
      * This is a deterministic in-game forecast and affects hunts.
      * @param {number} blockNum
      * @returns {Object}
      */
     function getCurrentWeather(blockNum) {
-        var idx = Math.floor(blockNum / 28800) % WEATHER.length;
+        var day = Math.floor(blockNum / 28800);
+        var idx = Math.floor(day / SKY_SIGNS.length) % WEATHER.length;
         if (idx < 0) idx = 0;
         return WEATHER[idx];
     }
@@ -519,6 +560,8 @@ var WorldEvents = (function() {
         getCurrentSeason: getCurrentSeason,
         getSeasonalBonuses: getSeasonalBonuses,
         getCurrentWeather: getCurrentWeather,
+        getCurrentSky: getCurrentSky,
+        getForecastVariantCount: getForecastVariantCount,
         getActiveEvents: getActiveEvents,
         checkEventTriggers: checkEventTriggers,
         checkWeaveSurge: checkWeaveSurge,

app/js/i18n/en.js

@@ -743,6 +743,7 @@ var LangEN = {
 
     weather_forecast_label: 'Magical weather forecast',
     weather_forecast_title: 'Magical weather',
+    weather_sky_title: 'Sky',
     season_effect_prefix: 'Affects hunts',
     weather_frog_rain: 'Frog rain. Watch the cauldron and avoid the croaking circles.',
     weather_frog_rain_effect: 'Creatures hit 5% harder.',
@@ -804,6 +805,19 @@ var LangEN = {
     weather_wrong_echo_effect: 'Creatures hit 9% harder, character defense is 3% lower.',
     weather_crown_of_rain: 'A crown of rain hangs over the road. Today even puddles demand a title.',
     weather_crown_of_rain_effect: 'Creatures and character defense are 5% stronger.',
+    sky_sun_cloud: 'Sun and cloud are arguing. No winner yet, but it is beautiful.',
+    sky_rain: 'Sharp rain drums on roofs like an apprentice on a kettle.',
+    sky_hail: 'Hail arrives suddenly and proudly: the world has a continental temper.',
+    sky_lightning: 'Lightning walks low, as if looking for someone to deliver a letter to.',
+    sky_hurricane: 'A hurricane tries roads on for size. Not all roads fit.',
+    sky_dry_heat: 'Dry heat crackles in the air. Grass pretends to be parchment.',
+    sky_hard_frost: 'Frost grabs words by the tail and holds them until evening.',
+    sky_dust_storm: 'A dust storm erases horizons and edits the map a little.',
+    sky_sudden_thaw: 'Sudden thaw. Snow has reconsidered being snow.',
+    sky_red_dawn: 'Red dawn is watching too carefully.',
+    sky_black_snow: 'Black snow falls quietly. Footprints sound louder than steps.',
+    sky_silver_fog: 'Silver fog makes the world richer and more suspicious.',
+    sky_double_rainbow: 'A double rainbow. One is real; the other handles consequences.',
 
     // World Events
     event_weave_surge: 'Weave Surge',

app/js/i18n/ru.js

@@ -743,6 +743,7 @@ var LangRU = {
 
     weather_forecast_label: 'Магическая сводка погоды',
     weather_forecast_title: 'Магическая погода',
+    weather_sky_title: 'Небо',
     season_effect_prefix: 'Влияет на охоту',
     weather_frog_rain: 'Дождь с лягушками. Следите за котлом и не наступайте на квакающие круги.',
     weather_frog_rain_effect: 'Существа бьют на 5% сильнее.',
@@ -804,6 +805,19 @@ var LangRU = {
     weather_wrong_echo_effect: 'Существа бьют на 9% сильнее, защита персонажа ниже на 3%.',
     weather_crown_of_rain: 'Корона дождя висит над дорогой. Сегодня даже лужи требуют титул.',
     weather_crown_of_rain_effect: 'Существа и защита персонажа усилены на 5%.',
+    sky_sun_cloud: 'Солнце спорит с тучей. Победителя пока нет, зато красиво.',
+    sky_rain: 'Резкий дождь бьёт по крышам, как ученик по барабану.',
+    sky_hail: 'Град сыплет внезапно и гордо: резко континентальный характер мира.',
+    sky_lightning: 'Молнии ходят низко, будто ищут, кому передать письмо.',
+    sky_hurricane: 'Ураган примеряет дороги на себя. Не все дороги подходят.',
+    sky_dry_heat: 'Сухой жар хрустит в воздухе. Трава делает вид, что она пергамент.',
+    sky_hard_frost: 'Мороз хватает слова за хвост и держит до вечера.',
+    sky_dust_storm: 'Пыльная буря стирает горизонты и слегка правит карту.',
+    sky_sudden_thaw: 'Внезапная оттепель. Снег передумал быть снегом.',
+    sky_red_dawn: 'Красный рассвет смотрит слишком внимательно.',
+    sky_black_snow: 'Чёрный снег падает тихо. Следы на нём слышнее, чем шаги.',
+    sky_silver_fog: 'Серебряный туман делает мир богаче и подозрительнее.',
+    sky_double_rainbow: 'Двойная радуга. Одна настоящая, вторая отвечает за последствия.',
 
     // World Events
     event_weave_surge: 'Всплеск Плетения',

app/js/ui/screens/home.js

@@ -160,17 +160,29 @@ var HomeScreen = (function() {
         var season = WorldEvents.getCurrentSeason(blockNum);
         if (!season) return '';
 
+        var sky = WorldEvents.getCurrentSky ? WorldEvents.getCurrentSky(blockNum) : null;
         var weather = WorldEvents.getCurrentWeather ? WorldEvents.getCurrentWeather(blockNum) : null;
+        var skyText = sky ? t(sky.summaryKey) : '';
         var forecast = weather ? t(weather.summaryKey) : '';
         var effect = weather ? t(weather.effectKey) : '';
         return '<section class="season-indicator magical-forecast" aria-label="' + t('weather_forecast_label') + '">' +
-            '<div class="forecast-head">' +
-                '<span class="season-icon" aria-hidden="true">' + season.icon + '</span>' +
-                '<span class="season-name">' + t('weather_forecast_title') + ': ' + t(season.nameKey) + '</span>' +
+            '<div class="forecast-card forecast-card-season">' +
+                '<span class="forecast-icon" aria-hidden="true">' + season.icon + '</span>' +
+                '<span class="forecast-kicker">' + t('weather_forecast_title') + '</span>' +
+                '<p class="forecast-line">' + t(season.nameKey) + '</p>' +
+            '</div>' +
+            '<div class="forecast-card forecast-card-sky">' +
+                '<span class="forecast-icon" aria-hidden="true">' + (sky ? sky.icon : '\u26C5') + '</span>' +
+                '<span class="forecast-kicker">' + t('weather_sky_title') + '</span>' +
+                '<p class="forecast-line">' + skyText + '</p>' +
+                '<p class="forecast-omen">' + forecast + '</p>' +
+            '</div>' +
+            '<div class="forecast-card forecast-card-effect">' +
+                '<span class="forecast-icon" aria-hidden="true">\u2694\uFE0F</span>' +
+                '<span class="forecast-kicker">' + t('season_effect_prefix') + '</span>' +
+                '<p class="season-bonus">' + t('school_' + season.dominant) + ' +20%, ' +
+                    t('school_' + season.secondary) + ' +10%. ' + effect + '</p>' +
             '</div>' +
-            '<p class="forecast-line">' + (weather ? '<span aria-hidden="true">' + weather.icon + '</span> ' : '') + forecast + '</p>' +
-            '<p class="season-bonus">' + t('season_effect_prefix') + ': ' + t('school_' + season.dominant) + ' +20%, ' +
-                t('school_' + season.secondary) + ' +10%. ' + effect + '</p>' +
         '</section>';
     }
 

app/sw.js

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

tests/player-bug-regressions.test.js

@@ -337,7 +337,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-v37/.test(swJs), 'service worker cache version should be bumped');
+  assert.ok(/viz-magic-v38/.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');
@@ -384,7 +384,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-v37/.test(read('app/sw.js')), 'service worker cache should be bumped for UI changes');
+  assert.ok(/viz-magic-v38/.test(read('app/sw.js')), 'service worker cache should be bumped for UI changes');
 });
 
 
@@ -434,8 +434,15 @@ test('magical weather is labelled and affects hunts', function () {
   assert.ok(/function getCurrentWeather/.test(worldEventsJs), 'world events should expose deterministic magical weather');
   assert.ok(/weather_frog_rain/.test(worldEventsJs + ruJs + enJs), 'magical forecast copy should exist');
   assert.ok((worldEventsJs.match(/summaryKey: 'weather_/g) || []).length >= 30, 'magical forecast should have at least 30 rotating templates');
-  assert.ok(/i18n\/ru.js\?v=20260712d/.test(indexHtml), 'Russian weather copy must be cache-busted');
-  assert.ok(/i18n\/en.js\?v=20260712d/.test(indexHtml), 'English weather copy must be cache-busted');
+  assert.ok(/var SKY_SIGNS/.test(worldEventsJs), 'forecast should combine omens with sky signs');
+  assert.ok(/function getForecastVariantCount/.test(worldEventsJs), 'forecast should expose total variant count');
+  assert.ok(((worldEventsJs.match(/summaryKey: 'sky_/g) || []).length * (worldEventsJs.match(/summaryKey: 'weather_/g) || []).length) >= 365, 'forecast pool should cover a year of daily surprise');
+  assert.ok(/forecast-card-effect/.test(homeJs + mainCss), 'forecast effect column needs its own thematic icon/card');
+  assert.ok(/i18n\/ru.js\?v=20260712e/.test(indexHtml), 'Russian weather copy must be cache-busted');
+  assert.ok(/i18n\/en.js\?v=20260712e/.test(indexHtml), 'English weather copy must be cache-busted');
+  assert.ok(/home.js\?v=20260712e/.test(indexHtml), 'home forecast layout must be cache-busted');
+  assert.ok(/world-events.js\?v=20260712e/.test(indexHtml), 'world events forecast pool must be cache-busted');
+  assert.ok(/main.css\?v=20260712e/.test(indexHtml), 'forecast grid CSS must be cache-busted');
   assert.ok(/season_effect_prefix/.test(homeJs + ruJs + enJs), 'home forecast should explain gameplay effect');
   assert.ok(/seasonBonuses\[spell\.school\]/.test(combatJs), 'season school bonus should affect spell attack');
   assert.ok(/creatureAttackMod/.test(combatJs), 'weather should affect creature danger in hunt combat');