/* ============================================================================ * FIFA World Cup 2026 — Theme JS (matches Figma 169:791 / 169:728 / 169:487) * ---------------------------------------------------------------------------- * Paste into the Theme's "js" field. Delivered as `parsedJs`: the backend * resolves the if / unless template blocks against the entity's effective * settings before injection. village wraps this in an IIFE. * * Settings (all boolean): * game_active — grass pitch + tilt/swipe ball + "GOAL!!" on a goal * fifa_bg — FIFA stadium + "26" logo + tap-only ball (no gravity) * (only when game_active is OFF) * show_live_scores — 3 latest results, placed after the mini-website button * theme_banner — handled server-side (adds the theme banner to the * entity's banners); no JS needed here * ==========================================================================*/ var WC26_ASSETS = '/themes/fifa-world-cup-2026/'; /* ---- shared helpers (always injected; harmless when unused) ------------- */ function wc26WhenReady(selector, cb) { var el = document.querySelector(selector); if (el) { cb(el); return; } var tries = 0; var timer = setInterval(function () { var found = document.querySelector(selector); if (found || ++tries > 50) { clearInterval(timer); if (found) cb(found); } }, 100); } // 3D ball element (image comes from CSS background). modifier: 'game' | 'fifa'. function wc26MakeBall(modifier) { var ball = document.createElement('div'); ball.className = 'wc26-ball wc26-ball--' + modifier; document.body.appendChild(ball); return ball; } // Generic ball simulation. Boundary = the phone corners (viewport edges). // opts: { tilt:Boolean, fallbackGravity:Number, onGoal:Function(reset) } function wc26StartBall(ball, opts) { opts = opts || {}; var radius = (ball.offsetWidth || 56) / 2; var pos = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; var vel = { x: 0, y: 0 }; var bounds = { w: window.innerWidth, h: window.innerHeight }; var tilt = { x: 0, y: 0 }; var spin = 0; var scoring = false; var hasSensor = false; var damping = 0.985; var restitution = 0.7; var maxSpeed = 45; var TILT_SENSITIVITY = 0.01; // ~4x calmer than before window.addEventListener('resize', function () { bounds.w = window.innerWidth; bounds.h = window.innerHeight; radius = (ball.offsetWidth || 56) / 2; }); function clampSpeed() { var s = Math.hypot(vel.x, vel.y); if (s > maxSpeed) { vel.x = (vel.x / s) * maxSpeed; vel.y = (vel.y / s) * maxSpeed; } } function step() { if (opts.tilt && hasSensor) { vel.x += tilt.x; vel.y += tilt.y; } if (opts.fallbackGravity && !(opts.tilt && hasSensor)) { vel.y += opts.fallbackGravity; } vel.x *= damping; vel.y *= damping; clampSpeed(); pos.x += vel.x; pos.y += vel.y; if (pos.x - radius < 0) { pos.x = radius; vel.x = -vel.x * restitution; } else if (pos.x + radius > bounds.w) { pos.x = bounds.w - radius; vel.x = -vel.x * restitution; } if (pos.y - radius < 0) { pos.y = radius; vel.y = -vel.y * restitution; } else if (pos.y + radius > bounds.h) { pos.y = bounds.h - radius; vel.y = -vel.y * restitution; } // Goal zone: top of the pitch, centred, 30% of the width. Only counts // while the pitch (hero) is scrolled into view at the top — see canScore. if (opts.onGoal && !scoring && (!opts.canScore || opts.canScore()) && pos.y - radius <= 6 && Math.abs(pos.x - bounds.w / 2) <= bounds.w * 0.15) { scoring = true; opts.onGoal(function reset() { pos.x = bounds.w / 2; pos.y = bounds.h / 2; vel.x = 0; vel.y = 0; scoring = false; }); } // Both balls only show while the top section (hero) is in view; they // vanish when the user scrolls down to the menu and return at the top. var onTop = !opts.host || opts.host.getBoundingClientRect().bottom > window.innerHeight * 0.4; var visible = onTop && !scoring; ball.style.opacity = visible ? '1' : '0'; ball.style.pointerEvents = visible ? 'auto' : 'none'; spin += vel.x * 1.6; ball.style.transform = 'translate(' + (pos.x - radius) + 'px,' + (pos.y - radius) + 'px) rotate(' + spin + 'deg)'; requestAnimationFrame(step); } function onOrientation(e) { if (e.gamma == null && e.beta == null) return; hasSensor = true; tilt.x = (e.gamma || 0) * TILT_SENSITIVITY; // left-right tilt.y = (e.beta || 0) * TILT_SENSITIVITY; // front-back } function enableMotion() { var DOE = window.DeviceOrientationEvent; if (DOE && typeof DOE.requestPermission === 'function') { DOE.requestPermission().then(function (s) { if (s === 'granted') window.addEventListener('deviceorientation', onOrientation); }).catch(function () {}); } else if (DOE) { window.addEventListener('deviceorientation', onOrientation); } } if (opts.tilt) { enableMotion(); window.addEventListener('touchend', enableMotion, { once: true }); window.addEventListener('click', enableMotion, { once: true }); } requestAnimationFrame(step); return { shoot: function (vx, vy) { vel.x += vx; vel.y += vy; clampSpeed(); } }; } // name -> /icons/country-flags/rounded-rectangular/.svg function wc26FlagUrl(name) { var slug = String(name || '').toLowerCase().trim() .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, ''); return '/icons/country-flags/rounded-rectangular/' + slug + '.svg'; } /* ---- 1) Playable pitch (game_active) ----------------------------------- */ /* ---- 2) Static FIFA background (fifa_bg, only when game is OFF) --------- */ // The ball renders in FIFA mode only when "Show ball" is on. wc26WhenReady('.catalogue-top-section', function (host) { var ball = wc26MakeBall('fifa'); // No gravity, no tilt — the ball only moves when tapped. var sim = wc26StartBall(ball, { tilt: false, fallbackGravity: 0, host: host }); // Tap/click the ball -> random direction + random speed. ball.addEventListener('pointerup', function () { var ang = Math.random() * Math.PI * 2; var power = 14 + Math.random() * 22; sim.shoot(Math.cos(ang) * power, Math.sin(ang) * power); }); }); /* ---- 3) Live scores (show_live_scores) --------------------------------- */ /* Placed in normal flow, right after the mini-website button. */ wc26WhenReady('.miniweb-container', function (container) { var ENDPOINT = 'https://worldcup26.ir/get/games'; function parseDate(s) { var m = /(\d{2})\/(\d{2})\/(\d{4})\s+(\d{2}):(\d{2})/.exec(s || ''); return m ? new Date(+m[3], +m[1] - 1, +m[2], +m[4], +m[5]).getTime() : 0; } function teamHtml(name, score, side) { var flag = '

'; var num = '' + score + ''; return '

' + flag + num + '

'; } // A game is in play when it isn't finished and has already kicked off. function isLive(g) { return g.finished !== 'TRUE' && g.time_elapsed !== 'notstarted'; } function rowHtml(g) { var live = isLive(g); var center = live ? '

' + 'VS' + 'LIVE' + '

' : 'VS'; return '

' + teamHtml(g.home_team_name_en, g.home_score, 'home') + center + teamHtml(g.away_team_name_en, g.away_score, 'away') + '

'; } var box = null; // created on first successful render, reused afterwards function render(games) { var played = games .filter(function (g) { return g.finished === 'TRUE' || g.time_elapsed !== 'notstarted'; }) .sort(function (a, b) { return parseDate(b.local_date) - parseDate(a.local_date); }) .slice(0, 2) .reverse(); if (!played.length) played = games.slice(0, 2); if (!box) { box = document.createElement('div'); box.className = 'wc26-scores'; container.appendChild(box); // after the mini-website button (last child) } box.innerHTML = played.map(rowHtml).join(''); } function refresh() { fetch(ENDPOINT) .then(function (r) { return r.json(); }) .then(function (data) { if (data && Array.isArray(data.games) && data.games.length) render(data.games); }) .catch(function () { /* network/CORS error — keep the last good card */ }); } refresh(); setInterval(refresh, 60000); // renew the live scores every 1 minute });