/* ============================================================ MIT-7870 | Age of Magic — Reward progress banner Custom Code block → JS tab What it does ------------ 1. Waits for the Rewards (reward-chain) block, then attaches a dedicated MutationObserver to that block (re-binds if React remounts it on login / logout). 2. Reads from that block: • the next step card → next reward image + quantity (badge) • value-point label → " " (in-progress title) • "Step X of Y" text → progress fraction for the track • claimability → an actionable reward-button (state not "unauthorized"/disabled) and no "Log in to claim" gate 3. Renders the banner under the header in one of two states: • in progress → " / until next reward" + See Progress • claimable → "Reward unlocked" + Claim Reward Signed-out users see nothing — the banner is hidden whenever the reward chain shows a login gate (unauthenticated). 4. CTA behaviour: • claimable & claim button present → clicks the real reward button, then scrolls to the reward chain • reward block visible on this page → smooth-scrolls to it • otherwise → navigates to CONFIG.rewardsPageUrl 5. Keeps observing across auth cycles — body observer only discovers / re-discovers the block; it never disconnects after the block has been found once. Selector strategy: only stable, semantic hooks are used — `.rewards`, `.rewards__wrapper`, `.step-card`, `.step-card__title`, `.card-content__quantity`, `.progress-bar__steps-label`, `[data-testid="reward-button"]` (+ its `data-state`) — never the hashed / build-specific class names. Anti-loop safeguards (mandatory): • Ignore mutations inside #aom-reward-progress • State-signature memoization — skip render when unchanged • Debounce observer callbacks with requestAnimationFrame • Idempotent hide-class (only add if missing) Localisation (MIT-8026): static copy is translated by the separate "Progress Bar Localisation" block via window.AOM_RP_I18N. This block falls back to English (CONFIG.text) if that block is absent. The banner re-renders on changes (locale is part of the render signature). Reward/point/step NAMES are partner-translated in the Publisher Account and read live from the page. ============================================================ */ (() => { // Site Builder injects this as a classic script (not a module). // biome-ignore lint/suspicious/noRedundantUseStrict: required for non-module IIFE 'use strict'; /* ------------------------- config ------------------------- */ const CONFIG = { /* Set to true ONLY in the Store page instance of this block: visually hides the source Daily Rewards block while keeping it in the DOM as the data source. Keep false on the Rewards page. */ hideRewardBlock: false, /* Where "See Progress" leads when the reward chain is not visible on the current page (Store instance). • A bare slug like 'rewards' replaces ONLY the last segment of the current path, preserving the landing prefix, e.g. /age-of-magic-prod/store → /age-of-magic-prod/rewards • A value starting with '/' or 'http' is used as an absolute path / URL verbatim. */ rewardsPageUrl: 'rewards', /* Give up the *initial* wait for the reward block after this long. Once found, we keep listening forever (auth remounts). */ waitTimeoutMs: 20000, /* English fallback copy. Localised strings come from the separate "Progress Bar Localisation" block via window.AOM_RP_I18N; these values are only used when that block is absent or a key/language is missing (see tr()). */ text: { untilNext: 'until next reward', seeProgress: 'See Progress', unlockedTitle: 'Reward unlocked', unlockedSubtitle: 'Your reward is ready', claimReward: 'Claim Reward', }, }; /* Optional local-preview overrides (never set in production). */ const PREVIEW = typeof window.__AOM_RP_CONFIG === 'object' && window.__AOM_RP_CONFIG ? window.__AOM_RP_CONFIG : null; if (PREVIEW) { if (typeof PREVIEW.hideRewardBlock === 'boolean') { CONFIG.hideRewardBlock = PREVIEW.hideRewardBlock; } if (typeof PREVIEW.rewardsPageUrl === 'string') { CONFIG.rewardsPageUrl = PREVIEW.rewardsPageUrl; } if (typeof PREVIEW.waitTimeoutMs === 'number') { CONFIG.waitTimeoutMs = PREVIEW.waitTimeoutMs; } if (PREVIEW.text && typeof PREVIEW.text === 'object') { for (const textKey in PREVIEW.text) { if (Object.prototype.hasOwnProperty.call(PREVIEW.text, textKey)) { CONFIG.text[textKey] = PREVIEW.text[textKey]; } } } } /* ------------------------- helpers ------------------------ */ const root = document.getElementById('aom-reward-progress'); if (!root) return; /* Localised copy from the separate localisation block, with an English fallback so the banner works standalone. */ function tr(key) { const i18n = window.AOM_RP_I18N; if (i18n && typeof i18n.t === 'function') { const value = i18n.t(`rewardProgress.${key}`); if (value) return value; } return CONFIG.text[key]; } function currentLocale() { const i18n = window.AOM_RP_I18N; if (i18n && typeof i18n.getLocale === 'function') return i18n.getLocale(); return document.documentElement.getAttribute('lang') || 'en'; } function findRewardBlock() { return document.querySelector('.rewards') || document.querySelector('.rewards__wrapper') || null; } function isVisible(el) { return !!(el && el.offsetParent !== null && !el.classList.contains('aom-rp-source-hidden')); } function isMutationInsideBanner(target) { if (!target) return false; if (target === root) return true; if (target.nodeType === 1) return root.contains(target); return !!(target.parentNode && root.contains(target.parentNode)); } /* Ordered list of the real step cards (skips swiper loop clones). */ function getStepCards(block) { const slides = block.querySelectorAll('.swiper-slide[data-swiper-slide-index]'); if (slides.length) { const seen = {}; const ordered = []; for (let i = 0; i < slides.length; i++) { const slide = slides[i]; if (slide.classList.contains('swiper-slide-duplicate')) continue; const idx = slide.getAttribute('data-swiper-slide-index'); if (seen[idx]) continue; seen[idx] = true; const card = slide.querySelector('.step-card'); if (card) ordered.push({ idx: Number.parseInt(idx, 10), card: card }); } if (ordered.length) { ordered.sort((a, b) => a.idx - b.idx); return ordered.map((o) => o.card); } } return Array.prototype.slice.call(block.querySelectorAll('.step-card')); } /* Classifies a reward-chain button by its data-state + label. */ function classifyRewardButton(btn) { const state = (btn.getAttribute('data-state') || '').toLowerCase(); const text = (btn.textContent || '').trim(); const loginGate = state === 'unauthorized' || /log\s*in/i.test(text); let claimable = false; if (!loginGate && !btn.disabled) { if ( state === 'available' || state === 'claimable' || state === 'active' || state === 'ready' || state === 'unclaimed' ) { claimable = true; } else if (/^claim\b/i.test(text)) { /* "Claim" matches, "Claimed" (no word boundary) does not. */ claimable = true; } } return { loginGate: loginGate, claimable: claimable }; } /* Extracts everything the banner needs from the reward block. */ function readState(block) { const stepCards = getStepCards(block); /* Progress "Step X of Y" (prefer the dedicated label). */ const label = block.querySelector('.progress-bar__steps-label'); const progressText = (label ? label.textContent : block.textContent) || ''; const stepMatch = progressText.match(/Step\s+(\d+)\s+of\s+(\d+)/i); const step = stepMatch ? Number.parseInt(stepMatch[1], 10) : null; const total = stepMatch ? Number.parseInt(stepMatch[2], 10) : stepCards.length || null; /* Points display name only (publisher-defined, platform-localised), e.g. "Test points" / "Reward points". The numeric amount is NOT taken from the value-point widget — that shows the user's current balance (0 before the first reward), which is the wrong number to surface (MIT-8032). The remaining-to-next amount is read from the next step card below. */ let pointsName = ''; const nameEl = block.querySelector('[data-testid="vp-name"]'); if (nameEl) { pointsName = (nameEl.textContent || '').replace(/\s+/g, ' ').trim(); } else { const vpTextEl = block.querySelector('[data-testid="vp-text"], .value-point__text'); const vpText = vpTextEl ? (vpTextEl.textContent || '').replace(/\s+/g, ' ').trim() : ''; /* Drop a leading amount ("0 Test points" → "Test points"). */ pointsName = vpText.replace(/^[\d\s.,]+/, '').trim(); } /* Scan reward buttons: find login gate + first claimable button. */ let loginGate = false; let claimBtn = null; const buttons = block.querySelectorAll('[data-testid="reward-button"], .reward-button'); for (let i = 0; i < buttons.length; i++) { const info = classifyRewardButton(buttons[i]); if (info.loginGate) loginGate = true; if (!claimBtn && info.claimable) claimBtn = buttons[i]; } /* Pick the "next reward" card: the claimable one if any, else the card at the current progress index (steps done → next step). */ let card = claimBtn ? claimBtn.closest('.step-card') : null; if (!card && stepCards.length) { let idx = typeof step === 'number' ? step : 0; if (idx < 0) idx = 0; if (idx >= stepCards.length) idx = stepCards.length - 1; card = stepCards[idx]; } if (!card) card = block.querySelector('.step-card'); if (!card) return null; /* Reward name, e.g. "20000 arcanes". */ const titleEl = card.querySelector('.step-card__title'); const rewardText = titleEl ? (titleEl.textContent || '').trim() : ''; /* Remaining points until this (the next) reward. The platform prints "Get N more to claim" on each in-progress step card; use that live remaining value — it already accounts for the user's real balance — instead of the value-point total (MIT-8032). Match the first number so we stay locale-agnostic. */ let pointsText = ''; const ptcEl = card.querySelector('.step-card__points-to-claim'); if (ptcEl) { const numMatch = (ptcEl.textContent || '').match(/\d[\d\s.,]*\d|\d/); const remaining = numMatch ? numMatch[0].replace(/[\s.,]+$/, '').trim() : ''; if (remaining) pointsText = pointsName ? `${remaining} ${pointsName}` : remaining; } /* Quantity badge — the card's quantity, else leading number of name. */ const qtyEl = card.querySelector('.card-content__quantity'); let qty = qtyEl ? (qtyEl.textContent || '').trim() : ''; if (!qty) { const qtyMatch = rewardText.match(/^([\d][\d\s.,]*)/); qty = qtyMatch ? qtyMatch[1].replace(/\s+$/, '') : ''; } const img = card.querySelector('.card-content__image-background img') || card.querySelector('img'); return { block: block, rewardText: rewardText, pointsText: pointsText, qty: qty, imgSrc: img ? img.src : '', step: step, total: total, loginGate: loginGate, claimable: !!claimBtn && !loginGate, claimBtn: claimBtn, }; } /* ------------------------- render ------------------------- */ function el(tag, className, text) { const node = document.createElement(tag); if (className) node.className = className; if (text != null && text !== '') node.textContent = text; return node; } function render(state) { root.textContent = ''; root.classList.toggle('aom-rp--claimable', state.claimable); const banner = el('div', 'aom-rp__banner'); banner.setAttribute('role', 'status'); /* progress track */ const track = el('div', 'aom-rp__track'); const fill = el('div', 'aom-rp__track-fill'); if (state.step != null && state.total) { const pct = Math.min(100, Math.max(0, Math.round((state.step / state.total) * 100))); fill.style.width = `${pct}%`; } track.appendChild(fill); banner.appendChild(track); /* badge */ const badge = el('div', 'aom-rp__badge'); if (state.imgSrc) { const img = el('img', 'aom-rp__badge-img'); img.src = state.imgSrc; img.alt = state.rewardText || 'Next reward'; badge.appendChild(img); } if (state.qty) badge.appendChild(el('span', 'aom-rp__badge-qty', state.qty)); banner.appendChild(badge); /* text */ const text = el('div', 'aom-rp__text'); let title; let subtitle; let btnLabel; if (state.claimable) { title = tr('unlockedTitle'); subtitle = tr('unlockedSubtitle'); btnLabel = tr('claimReward'); } else { /* In progress: show remaining points (value-point), not the step. */ title = state.pointsText || state.rewardText || tr('untilNext'); subtitle = tr('untilNext'); btnLabel = tr('seeProgress'); } text.appendChild(el('p', 'aom-rp__title', title)); text.appendChild(el('p', 'aom-rp__subtitle', subtitle)); banner.appendChild(text); /* CTA — re-reads live DOM on click so stale claimBtn refs never matter */ const cta = el('button', 'aom-rp__btn', btnLabel); cta.type = 'button'; cta.addEventListener('click', onCtaClick); banner.appendChild(cta); root.appendChild(banner); root.hidden = false; root.removeAttribute('hidden'); } function onCtaClick() { const block = findRewardBlock(); /* Claim directly through the real button when possible. */ if (block) { const live = readState(block); if (live?.claimable && live.claimBtn && document.contains(live.claimBtn)) { live.claimBtn.click(); } } if (block && isVisible(block)) { block.scrollIntoView({ behavior: 'smooth', block: 'start' }); return; } /* Reward chain not on (or hidden on) this page → go to it. */ const target = resolveRewardsUrl(CONFIG.rewardsPageUrl); if (target) { window.location.href = target; } } /* Turns CONFIG.rewardsPageUrl into a real destination. A bare slug swaps only the last path segment (keeping the landing prefix); absolute paths / URLs pass through. */ function resolveRewardsUrl(value) { if (!value) return ''; if (/^https?:\/\//i.test(value) || value.charAt(0) === '/') { return value; } const slug = value.replace(/^\/+|\/+$/g, ''); const path = window.location.pathname; const hadTrailingSlash = path.length > 1 && path.charAt(path.length - 1) === '/'; const segments = path.split('/'); /* Drop the empty tail from a trailing slash so we replace the last *visible* segment (…/store/ → …/rewards). */ if (hadTrailingSlash) segments.pop(); /* Replace the last path segment with the rewards slug, keeping the landing prefix intact (…/store → …/rewards). */ segments[segments.length - 1] = slug; return window.location.origin + segments.join('/'); } /* ---------------------- orchestration --------------------- */ let updateQueued = false; let lastSignature = null; let bodyObserver = null; let blockObserver = null; let langObserver = null; let observedBlock = null; let everFound = false; let discoveryDeadline = 0; /* Serializes only the data that affects the banner, so we can skip renders when nothing meaningful changed. */ function signatureOf(state) { if (!state) return 'none'; return [ currentLocale(), state.pointsText, state.rewardText, state.qty, state.imgSrc, state.step, state.total, state.claimable, ].join('|'); } function hideBanner() { if (lastSignature === 'none') return; lastSignature = 'none'; root.hidden = true; root.textContent = ''; root.classList.remove('aom-rp--claimable'); } function detachBlockObserver() { if (blockObserver) { blockObserver.disconnect(); blockObserver = null; } observedBlock = null; } /* Dedicated observer on the reward section — survives auth UI churn inside the block. Re-bound when React replaces the node. */ function attachBlockObserver(block) { if (!block) return; if (observedBlock === block && blockObserver) return; detachBlockObserver(); observedBlock = block; blockObserver = new MutationObserver(() => { if (!observedBlock || !document.contains(observedBlock)) { detachBlockObserver(); queueUpdate(); return; } queueUpdate(); }); blockObserver.observe(block, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['data-state', 'disabled', 'hidden', 'class'], }); } function update() { updateQueued = false; const block = findRewardBlock(); if (!block) { detachBlockObserver(); hideBanner(); /* Only abandon the *initial* discovery wait. After the block has been seen once, keep the body observer alive forever so login → logout → login remounts still revive the banner. */ if (!everFound && Date.now() > discoveryDeadline && bodyObserver) { bodyObserver.disconnect(); bodyObserver = null; } return; } everFound = true; attachBlockObserver(block); if (CONFIG.hideRewardBlock && !block.classList.contains('aom-rp-source-hidden')) { block.classList.add('aom-rp-source-hidden'); } const state = readState(block); /* Hide entirely for signed-out users: the reward chain surfaces a login gate ("Log in to claim" / data-state="unauthorized") when unauthenticated, so there is no meaningful progress to show. */ if (!state || state.loginGate || (!state.rewardText && !state.imgSrc)) { hideBanner(); return; } /* Re-render ONLY when the derived state actually changed — this is what prevents render → observer → render loops. */ const sig = signatureOf(state); if (sig === lastSignature) return; lastSignature = sig; render(state); } function queueUpdate() { if (updateQueued) return; updateQueued = true; window.requestAnimationFrame(update); } function onBodyMutations(mutations) { let relevant = false; for (let i = 0; i < mutations.length; i++) { if (isMutationInsideBanner(mutations[i].target)) continue; relevant = true; break; } if (!relevant) return; const current = findRewardBlock(); /* Already bound to the live block — its own observer handles internal React updates. Body observer only cares when the block is missing, replaced, or not yet attached. */ if (current && current === observedBlock && document.contains(observedBlock)) { return; } queueUpdate(); } function start() { discoveryDeadline = Date.now() + CONFIG.waitTimeoutMs; /* Lightweight body observer: discover the reward block and re-discover it after React tears it down on auth changes. Does NOT disconnect after a successful first find. */ bodyObserver = new MutationObserver(onBodyMutations); bodyObserver.observe(document.body, { childList: true, subtree: true, }); /* Re-render on language switch: changes but the reward data may not, so the block observer alone wouldn't repaint the localised static copy. */ langObserver = new MutationObserver(queueUpdate); langObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['lang'], }); queueUpdate(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', start); } else { start(); } })();

보상

탐나는 상점

장바구니

장바구니

장바구니