Improve guild, inventory, and duel UX

Author: web3blind

app/js/i18n/en.js

@@ -155,6 +155,10 @@ var LangEN = {
     hunt_damage_dealt: 'Damage dealt',
     hunt_damage_taken: 'Damage taken',
     arena_incoming_challenges: 'Incoming Challenges',
+    arena_incoming_duel_toast: '{opponent} challenges you to a duel. Opening arena.',
+    arena_open_challenge: 'Open arena',
+    arena_duel_accepted_toast: 'Challenge accepted. You can continue the duel now.',
+    arena_open_duel: 'Open duel',
     hunt_again: 'Hunt again',
     hunt_home: 'Home',
     hunt_equip_now: 'Equip now',
@@ -180,6 +184,17 @@ var LangEN = {
     inv_sell: 'Sell',
     inv_use: 'Use',
     inv_empty: 'Bag is empty.',
+    inv_count: 'Count',
+    inv_filters: 'Bag filters',
+    inv_filter_all: 'All',
+    inv_filter_equipment: 'Equipment',
+    inv_filter_materials: 'Materials',
+    inv_filter_consumables: 'Consumables',
+    inv_sort: 'Sort',
+    inv_sort_rarity_desc: 'Rarest first',
+    inv_sort_name_asc: 'By name',
+    inv_sort_count_desc: 'Largest stacks first',
+    inv_compact_mode: 'Compact mode',
 
     // Chronicle
     chronicle_title: 'World Chronicle',
@@ -391,14 +406,27 @@ var LangEN = {
     guild_recruit_target: 'Mage name',
     guild_invite_send: 'Send Invite',
     guild_invite_sent: 'Invite sent!',
+    guild_invite_received: 'You received a guild invite. Opening the guild screen.',
+    guild_pending_invites: 'Pending Invites',
+    guild_accept_invite: 'Accept Invite',
+    guild_invited_by: 'Invited by',
     guild_promote: 'Promote',
     guild_promoted: 'Rank changed!',
+    guild_rank_changed_notice: 'Your guild rank changed. Opening the guild screen.',
     guild_choose_rank: 'Choose rank',
     guild_treasury: 'Treasury',
     guild_treasury_account: 'Treasury account',
     guild_tithe_rate: 'Tithe rate',
     guild_total_delegated: 'Total delegated',
     guild_settings: 'Settings',
+    guild_settings_view_only: 'This screen shows the current guild settings.',
+    guild_settings_officer_hint: 'This view now exposes the main guild settings and summary.',
+    guild_membership_mode: 'Membership mode',
+    guild_membership_open: 'Open',
+    guild_membership_approval: 'Approval required',
+    guild_membership_invite: 'Invite only',
+    guild_min_shares: 'Minimum SHARES to join',
+    guild_notification_open_guild: 'Open guild',
     guild_id_label: 'Guild ID',
     guild_name_label: 'Name',
     guild_tag_label: 'Tag (2-5 chars)',
@@ -876,4 +904,3 @@ var LangEN = {
     char_hp_explainer: 'HP grows from level, Resilience, and class. Full formula is in the Guide.',
     help_close: 'Got it'
 };
-

app/js/i18n/ru.js

@@ -155,6 +155,10 @@ var LangRU = {
     hunt_damage_dealt: 'Нанесено урона',
     hunt_damage_taken: 'Получено урона',
     arena_incoming_challenges: 'Входящие вызовы',
+    arena_incoming_duel_toast: '{opponent} вызывает вас на дуэль. Открываю арену.',
+    arena_open_challenge: 'Открыть арену',
+    arena_duel_accepted_toast: 'Вызов принят. Можно продолжать дуэль.',
+    arena_open_duel: 'Открыть дуэль',
     hunt_again: 'Охотиться снова',
     hunt_home: 'Домой',
     hunt_equip_now: 'Экипировать сейчас',
@@ -180,6 +184,17 @@ var LangRU = {
     inv_sell: 'Продать',
     inv_use: 'Использовать',
     inv_empty: 'Сумка пуста.',
+    inv_count: 'Количество',
+    inv_filters: 'Фильтры сумки',
+    inv_filter_all: 'Всё',
+    inv_filter_equipment: 'Экипировка',
+    inv_filter_materials: 'Материалы',
+    inv_filter_consumables: 'Расходники',
+    inv_sort: 'Сортировка',
+    inv_sort_rarity_desc: 'Сначала редкие',
+    inv_sort_name_asc: 'По названию',
+    inv_sort_count_desc: 'Сначала большие стаки',
+    inv_compact_mode: 'Компактный режим',
 
     // Chronicle
     chronicle_title: 'Хроника Мира',
@@ -391,14 +406,27 @@ var LangRU = {
     guild_recruit_target: 'Имя мага',
     guild_invite_send: 'Отправить приглашение',
     guild_invite_sent: 'Приглашение отправлено!',
+    guild_invite_received: 'Вас пригласили в гильдию. Открываю раздел гильдии.',
+    guild_pending_invites: 'Ожидающие приглашения',
+    guild_accept_invite: 'Принять приглашение',
+    guild_invited_by: 'Пригласил',
     guild_promote: 'Повысить',
     guild_promoted: 'Ранг изменён!',
+    guild_rank_changed_notice: 'Ваш ранг в гильдии изменён. Открываю раздел гильдии.',
     guild_choose_rank: 'Выберите ранг',
     guild_treasury: 'Казна',
     guild_treasury_account: 'Счёт казны',
     guild_tithe_rate: 'Ставка десятины',
     guild_total_delegated: 'Всего делегировано',
     guild_settings: 'Настройки',
+    guild_settings_view_only: 'Здесь показаны текущие настройки гильдии.',
+    guild_settings_officer_hint: 'Сейчас здесь доступны основные настройки и сводка гильдии.',
+    guild_membership_mode: 'Режим вступления',
+    guild_membership_open: 'Свободный вход',
+    guild_membership_approval: 'По одобрению',
+    guild_membership_invite: 'Только по приглашению',
+    guild_min_shares: 'Минимум SHARES для вступления',
+    guild_notification_open_guild: 'Открыть гильдию',
     guild_id_label: 'ID гильдии',
     guild_name_label: 'Название',
     guild_tag_label: 'Тег (2-5 символов)',
@@ -876,4 +904,3 @@ var LangRU = {
     char_hp_explainer: 'HP растёт от уровня, Стойкости и класса. Подробная формула — в Справке.',
     help_close: 'Понятно'
 };
-

app/js/ui/components/toast.js

@@ -23,23 +23,45 @@ var Toast = (function() {
      * @param {string} [type] - 'info', 'success', 'error', 'warning'
      * @param {number} [duration] - ms (default 3000)
      */
-    function show(message, type, duration) {
+    function show(message, type, duration, options) {
         type = type || 'info';
         duration = duration || 3000;
+        options = options || {};
 
         var toast = document.createElement('div');
         toast.className = 'toast toast-' + type;
         toast.textContent = message;
         toast.setAttribute('role', 'alert');
 
+        if (options.actionLabel) {
+            toast.setAttribute('tabindex', '0');
+            toast.setAttribute('aria-label', message + '. ' + options.actionLabel);
+        }
+
         _getContainer().appendChild(toast);
         A11y.announce(message);
 
+        if (typeof options.onClick === 'function') {
+            toast.addEventListener('click', function() {
+                options.onClick();
+            });
+            toast.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    options.onClick();
+                }
+            });
+        }
+
         // Animate in
         requestAnimationFrame(function() {
             toast.classList.add('show');
         });
 
+        if (duration <= 0) {
+            return toast;
+        }
+
         // Auto-dismiss
         setTimeout(function() {
             toast.classList.remove('show');
@@ -49,9 +71,9 @@ var Toast = (function() {
         }, duration);
     }
 
-    function success(msg) { show(msg, 'success'); }
-    function error(msg) { show(msg, 'error', 4000); }
-    function info(msg) { show(msg, 'info'); }
+    function success(msg, duration, options) { show(msg, 'success', duration || 3000, options); }
+    function error(msg, duration, options) { show(msg, 'error', duration || 4000, options); }
+    function info(msg, duration, options) { show(msg, 'info', duration || 3000, options); }
 
     return { show: show, success: success, error: error, info: info };
 })();

app/js/ui/screens/arena.js

@@ -7,8 +7,12 @@ var ArenaScreen = (function() {
 
     var currentTab = 'leaderboard'; // leaderboard, history
     var levelFilter = 'all';
+    var listenersRegistered = false;
+    var seenIncomingRefs = {};
 
     function render() {
+        _ensureEventListeners();
+
         var t = Helpers.t;
         var el = Helpers.$('screen-arena');
         if (!el) return;
@@ -69,6 +73,48 @@ var ArenaScreen = (function() {
         _scanIncomingChallenges(el);
     }
 
+    function _ensureEventListeners() {
+        if (listenersRegistered) return;
+        listenersRegistered = true;
+
+        Helpers.EventBus.on('duel_challenge', function(data) {
+            var user = VizAccount.getCurrentUser();
+            if (!data || !user) return;
+            if (data.target !== user) return;
+
+            var ref = String(data.challengeRef || data.combatRef || '');
+            if (ref && seenIncomingRefs[ref]) return;
+            if (ref) seenIncomingRefs[ref] = true;
+
+            Toast.info(Helpers.t('arena_incoming_duel_toast', {
+                opponent: data.account || data.challenger || ''
+            }), 7000, {
+                actionLabel: Helpers.t('arena_open_challenge'),
+                onClick: function() {
+                    currentTab = 'history';
+                    Helpers.EventBus.emit('navigate', 'arena');
+                }
+            });
+
+            currentTab = 'history';
+            Helpers.EventBus.emit('navigate', 'arena');
+        });
+
+        Helpers.EventBus.on('duel_accepted', function(data) {
+            var user = VizAccount.getCurrentUser();
+            if (!data || !user) return;
+            if (data.challenger !== user && data.target !== user) return;
+
+            Toast.success(Helpers.t('arena_duel_accepted_toast'), 5000, {
+                actionLabel: Helpers.t('arena_open_duel'),
+                onClick: function() {
+                    var opp = data.challenger === user ? data.target : data.challenger;
+                    DuelScreen.startDuel(opp, String(data.combatRef || ''), { source: 'accepted_event' });
+                }
+            });
+        });
+    }
+
     /**
      * Scan recent VM operations to find challenges targeting the current user.
      * Uses custom_protocol_api to walk backward through challenger's VM chain.
@@ -383,5 +429,7 @@ var ArenaScreen = (function() {
         }
     }
 
+    _ensureEventListeners();
+
     return { render: render };
 })();