Polish mana cost UX and chronicle feed

Author: web3blind

app/js/engine/state-engine.js

@@ -599,13 +599,18 @@ var StateEngine = (function() {
         _rememberAccount(award.initiator);
         _rememberAccount(award.receiver);
 
+        var memo = award.memo || '';
+        var isBless = String(memo).indexOf('viz://vm/bless/') === 0;
+
+        if (!isBless) return;
+
         worldState.recentActions.push({
             type: 'blessing_sent',
             sender: award.initiator,
             receiver: award.receiver,
             blockNum: blockNum,
             energy: award.energy,
-            memo: award.memo || '',
+            memo: memo,
             events: [],
             timestamp: Date.now()
         });

app/js/i18n/en.js

@@ -204,6 +204,7 @@ var LangEN = {
     chronicle_world: 'World',
     chronicle_tabs: 'Chronicle filter',
     chronicle_bless: 'Bless',
+    chronicle_bless_cost: '{name} · Bless · {cost}',
     chronicle_blessed: 'Blessing sent!',
     chronicle_write: 'Write in Chronicle',
     chronicle_placeholder: 'Write your words into the World...',

app/js/i18n/ru.js

@@ -204,6 +204,7 @@ var LangRU = {
     chronicle_world: 'Мир',
     chronicle_tabs: 'Фильтр хроники',
     chronicle_bless: 'Благословить',
+    chronicle_bless_cost: '{name} · Благословить · {cost}',
     chronicle_blessed: 'Благословение отправлено!',
     chronicle_write: 'Написать в Хронику',
     chronicle_placeholder: 'Впиши слова в Мир...',

app/js/ui/screens/chronicle.js

@@ -7,6 +7,7 @@ var ChronicleScreen = (function() {
 
     var MAX_POST_LENGTH = 280;
     var BLESS_ENERGY = 100; // 1% = 100 basis points
+    var BLESS_MEMO_PREFIX = 'viz://vm/bless/';
     var currentTab = 'all'; // all, guild, friends, world
     var REQUIRED_TAG = '#viz_magic';
 
@@ -314,8 +315,8 @@ var ChronicleScreen = (function() {
             '<p class="chronicle-text">' + Helpers.escapeHtml(entry.text) + '</p>' +
             '<div class="chronicle-actions">' +
                 '<button class="bless-button" data-account="' + (entry.account || '') + '" ' +
-                    'aria-label="' + t('chronicle_bless') + ' ' + Helpers.escapeHtml(charName) + '">' +
-                    '\u2728 ' + t('chronicle_bless') +
+                    'aria-label="' + Helpers.escapeHtml(t('chronicle_bless_cost', { cost: Helpers.manaCost(BLESS_ENERGY), name: charName })) + '">' +
+                    '✨ ' + t('chronicle_bless') + ' · ' + Helpers.manaCost(BLESS_ENERGY) +
                 '</button>' +
             '</div>' +
             '</article>';
@@ -331,7 +332,7 @@ var ChronicleScreen = (function() {
         SoundManager.play('bless_send');
         SoundManager.vibrate('light');
 
-        var memo = 'viz://vm/bless/' + account;
+        var memo = BLESS_MEMO_PREFIX + account;
         VizBroadcast.award(account, BLESS_ENERGY, 0, memo, [], function(err) {
             if (err) {
                 Toast.error(Helpers.t('error_low_mana'));
@@ -387,12 +388,18 @@ var ChronicleScreen = (function() {
             case 'rest_complete':
                 return t('chronicle_narrative_rest', { name: name });
             case 'blessing_sent':
+                if (!_isBlessAction(action)) return null;
                 return t('chronicle_narrative_bless', { name: name, target: action.receiver || '' });
             default:
                 return null;
         }
     }
 
+    function _isBlessAction(action) {
+        if (!action) return false;
+        return action.type === 'blessing_sent' && action.memo && String(action.memo).indexOf(BLESS_MEMO_PREFIX) === 0;
+    }
+
     function _duelToNarrative(duel, state) {
         var t = Helpers.t;
         var charA = state.characters[duel.challenger] || {};

app/js/ui/screens/crafting.js

@@ -156,7 +156,7 @@ var CraftingScreen = (function() {
 
         // Mana cost
         html += '<div class="recipe-cost">';
-        html += '<span>' + t('craft_mana_cost') + ': ' + Helpers.bpToPercent(recipe.manaCost || 0) + ' ' + t('home_mana') + '</span>';
+        html += '<span>' + t('craft_mana_cost') + ': ' + Helpers.manaCost(recipe.manaCost || 0) + '</span>';
         html += '</div>';
 
         // Possible outcomes

app/js/ui/screens/home.js

@@ -37,7 +37,7 @@ var HomeScreen = (function() {
                         ' \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:'mana-bar', label:t('home_mana'), value:0, max:100, color:'#2196f3'}) +
+                    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') + '" ' +
                     'onclick="Helpers.EventBus.emit(\'navigate\', \'help\')">❓</button>' +

app/js/ui/screens/hunt.js

@@ -64,7 +64,7 @@ var HuntScreen = (function() {
             html += '<button class="spell-btn ' + Helpers.schoolClass(s.school) + '" data-id="' + s.id + '" role="radio" aria-checked="false" ' +
                 'aria-label="' + s.name + '. ' + t('hunt_mana_cost', {cost: Helpers.bpToPercent(s.manaCost)}) + '">' +
                 '<span class="spell-name">' + s.name + '</span>' +
-                '<span class="spell-cost">' + Helpers.bpToPercent(s.manaCost) + ' ' + t('home_mana') + '</span>' +
+                '<span class="spell-cost">' + Helpers.manaCost(s.manaCost) + '</span>' +
                 '</button>';
         }
 
@@ -537,4 +537,4 @@ var HuntScreen = (function() {
     }
 
     return { render: render };
-})();
+})();

app/js/ui/screens/map.js

@@ -148,7 +148,7 @@ var MapScreen = (function() {
                 html += '<button class="btn btn-primary btn-sm region-travel-btn" ';
                 html += 'data-region="' + regionId + '" ';
                 html += 'aria-label="' + t('map_travel_to') + ' ' + region.name + '">';
-                html += '\uD83D\uDEB6 ' + t('map_travel') + ' (' + t('map_travel_cost') + ')';
+                html += '\uD83D\uDEB6 ' + t('map_travel') + ' (' + Helpers.manaCost(100) + ')';
                 html += '</button>';
             } else if (pendingTravel && pendingTravel.account === user && regionId === pendingTravel.to) {
                 html += '<div class="region-benefits">⏳ ' + t('map_pending_travel_short') + '</div>';

app/js/utils/helpers.js

@@ -205,6 +205,16 @@ var Helpers = (function() {
         return (bp / 100).toFixed(2) + '%';
     }
 
+    /**
+     * Compact mana cost label for buttons and short UI badges.
+     * Example: 100 -> "⚡1.00%"
+     * @param {number} bp
+     * @returns {string}
+     */
+    function manaCost(bp) {
+        return '⚡' + bpToPercent(bp);
+    }
+
     /**
      * Get rarity color class
      */
@@ -259,6 +269,7 @@ var Helpers = (function() {
         escapeHtml: escapeHtml,
         isValidAccountName: isValidAccountName,
         bpToPercent: bpToPercent,
+        manaCost: manaCost,
         rarityClass: rarityClass,
         classIcon: classIcon,
         schoolColor: schoolColor,