/* ГОНКА STING / STING POYGASI — miniapp screens (механика 5-А). Built on the STING design system tokens/fonts/assets. Russian + Uzbek. Big, simple, one-screen-first. No emoji — line icons + lightning only. Replaces the generic loyalty reference. See APP-SPEC.md. */ const A = "/ds/assets/"; const KV_CAR = A + "keyvisuals/kv1-f1-car-9x16.jpg"; const KV_HELMET = A + "keyvisuals/kv3-helmet-9x16.jpg"; const KV_HERO = A + "keyvisuals/kv2-hero-male-9x16.jpg"; const BOTTLE = A + "f1/bottle.png"; const BOLID = A + "f1/bolid.webp"; const HERO = A + "f1/f1-hero.webp"; const F1LOGO = A + "f1/f1-logo.svg"; const VID = A + "f1/bg-video.webm"; const POSTER = A + "f1/bg-poster.webp"; const PRODUCT_BOTTLE = A + "products/bottle-clean.png"; const PATTERN = A + "patterns/sting-pattern-red.svg"; /* ---------- i18n (UZ overrides RU; missing keys fall back to RU) ---------- */ const RU = { nav_home:"Главная", nav_team:"Команда", nav_baku:"F1", nav_cab:"Кабинет", nav_scan:"Скан", hello:"Привет", points:"очки", toPay:"до выплаты", pay20:"20 000 сум", pay100:"100 000 сум", pit_open:"Пит-стоп открыт", pit_sub:"Болид встал — у тебя час", play:"К БОЛИДУ", pit_next:"Пит-стоп", pit_done_sub:"Пройден · жди следующий", pit_soon_sub:"Скоро открытие", tank:"Бак команды", tank_sub:"Полный бак — и ты в Баку", your_in:"твой вклад", scan_tile:"Скан чека", scan_hint:"+билет команде", team_tile:"Команда", team_hint:"позвать своих", tickets_tile:"Мои билеты", tickets_hint:"коды в игре", until_baku:"до розыгрыша Баку", team_title:"Команда", members:"участники", invite:"ПОЗВАТЬ СВОИХ", need_more:"Добери до 4 — и команда в розыгрыше Баку", full:"Команда укомплектована", contribution:"билетов", captain:"капитан", leave:"Выйти из команды", baku_title:"Гран-при Баку", until_draw:"до розыгрыша", your_chance:"Чем полнее бак, тем выше шанс", schedule:"Расписание", winners:"Уже летят", prize_name:"Поездка на двоих на Гран-при, Баку", cab_title:"Кабинет", scans:"сканы", pitstops:"пит-стопы", my_tickets:"Мои билеты", pay_card:"Карта для выплат", language:"Язык", rules:"Правила", offer:"Оферта", support:"Поддержка", logout:"Выйти", tk_title:"Мои билеты", in_game:"в игре", tk_empty:"Сканируй чек — каждая бутылка даёт билет в бак команды", scan_title:"Скан чека", scan_aim:"Наведи на QR-код чека", scan_manual:"Или введи код вручную", scan_btn:"ЗАЧЕСТЬ ЧЕК", accepted:"Чек принят", limits:"До 5 бутылок в чеке, до 3 чеков в день", pit_ready:"Болид заходит…", pit_work:"Болид встал — работай!", pit_gone:"Болид ушёл!", pit_hint:"Тапай по зелёным точкам — работай за всё пит-крю", results:"Пит-стоп закрыт", you:"Ты", oc:"оч.", again:"Скан чека", x2:"очки ×2", dots:"точки", card_title:"Карта для выплат", card_hint:"20 000 сум придут на карту в ближайшую выплатную пятницу", card_btn:"СОХРАНИТЬ", back:"Назад", continue:"Продолжить", level:"Гонщик", }; const UZ = { nav_home:"Asosiy", nav_team:"Jamoa", nav_baku:"F1", nav_cab:"Kabinet", nav_scan:"Skan", hello:"Salom", points:"ball", toPay:"toʻlovgacha", pit_open:"Pit-stop ochiq", pit_sub:"Bolid turdi — bir soating bor", play:"BOLIDGA", pit_next:"Pit-stop", pit_done_sub:"Oʻtilgan · keyingisini kut", pit_soon_sub:"Tez orada ochiladi", tank:"Jamoa baki", tank_sub:"Bak toʻla — Baku kutadi", your_in:"sening hissang", scan_tile:"Chekni skanlash", team_tile:"Jamoa", tickets_tile:"Mening chiptalarim", until_baku:"Baku qurʼasigacha", team_title:"Jamoa", invite:"OʻZINGNIKILARNI CHAQIR", baku_title:"Baku Gran-prisi", cab_title:"Kabinet", my_tickets:"Mening chiptalarim", language:"Til", rules:"Qoidalar", offer:"Oferta", support:"Yordam", logout:"Chiqish", tk_title:"Mening chiptalarim", in_game:"oʻyinda", scan_title:"Chekni skanlash", scan_btn:"CHEKNI HISOBLASH", accepted:"Chek qabul qilindi", pit_work:"Bolid turdi — ishla!", results:"Pit-stop yopildi", you:"Sen", again:"Chekni skanlash", card_title:"Toʻlov kartasi", card_btn:"SAQLASH", back:"Orqaga", continue:"Davom etish", }; const L = (lang) => (lang === "uz" ? Object.assign({}, RU, UZ) : RU); /* ---------- mock data ---------- */ const MY_TICKETS = [ { code:"STG-8F3K-92", date:"14 июня", bottles:2, shop:"Korzinka" }, { code:"STG-2Q7M-14", date:"13 июня", bottles:1, shop:"Makro" }, { code:"STG-9X4D-70", date:"12 июня", bottles:2, shop:"Havas" }, { code:"STG-5B1J-38", date:"10 июня", bottles:3, shop:"Korzinka" }, ]; const TEAM = { name:"БОЛИДЫ 211", bak:84, members:[ { name:"Ты", tickets:8, captain:true, you:true }, { name:"Тимур", tickets:21, captain:false }, { name:"Азиз", tickets:17, captain:false }, { name:"Жасур", tickets:14, captain:false }, { name:"Санжар", tickets:12, captain:false }, { name:"Дима", tickets:12, captain:false }, ], }; const WINNERS = [ { team:"СКОРОСТЬ", city:"Ташкент" }, { team:"ПИТ-КРЮ 7", city:"Самарканд" }, ]; const SCHEDULE = ["05 июля", "19 июля", "02 августа", "16 августа"]; /* ---------- shared bits ---------- */ function inject(){ if (document.getElementById("sting-app-css")) return; const s = document.createElement("style"); s.id = "sting-app-css"; s.textContent = ` .posnode{cursor:pointer} .posnode .hit{fill:transparent} .posnode .c{fill:var(--ink-700);stroke:#3a0b0e;stroke-width:1.5;transition:.15s} .posnode text{fill:var(--text-muted);font-family:var(--font-body);font-weight:700;font-size:11px;text-anchor:middle;pointer-events:none} .posnode.active .c{fill:var(--success);stroke:#9dffc4;animation:pn 0.7s ease infinite} .posnode.active text{fill:#fff} .posnode.done .c{fill:#fff;stroke:#fff;animation:none} .posnode.miss .c{fill:#7a0009;stroke:var(--brand);animation:none} @keyframes pn{50%{stroke-width:6}} .lite{width:17px;height:17px;border-radius:50%;background:#2a0608;border:1px solid #3a0b0e;transition:.1s} .lite.on{background:radial-gradient(circle at 40% 35%,#ff6a6a,var(--brand) 60%,#7a0009);box-shadow:0 0 12px 3px var(--brand-glow)} .pclock.pen{animation:pf .35s ease} @keyframes pf{30%{color:var(--brand)}} .tilepress:active{transform:scale(.97)} `; document.head.appendChild(s); } function Eyebrow({ children, color }) { return
{children}
; } function H1({ children, size }) { return

{children}

; } function BigButton({ children, onClick, tone, icon }) { const gold = tone === "gold"; return ( ); } /* big number hero */ function StatHero({ value, label }) { return (
{value}
{label}
); } /* progress to payout with two milestones */ function GoalBar({ value }) { const goal = value < 100 ? 100 : 600; const lbl = value < 100 ? "20 000 сум" : "100 000 сум"; const pct = Math.min(100, value / goal * 100); return (
{value} / {goal} очков {lbl}
); } function TimerPill({ children }) { return (
{children}
); } function Tile({ icon, title, hint, onClick, done }) { return ( ); } /* looping muted video backdrop (autoplay) */ function VideoBg({ src, poster, style }) { const ref = React.useRef(null); React.useEffect(()=>{ const v=ref.current; if(!v) return; v.muted=true; const p=v.play(); if(p&&p.catch) p.catch(()=>{}); },[]); return ( ); } /* electric bottle — Current: discharge hugs the product contour (DS guidelines/brand-electricity) */ function ElectricBottle({ src, flavour="red", height=340, active=true, style }) { const uid = React.useId().replace(/[:]/g,""); const red = "var(--sting-red)", dred = "var(--dark-red)"; const kP = "ebp"+uid, kA1 = "eba1"+uid, kA2 = "eba2"+uid, kA3 = "eba3"+uid, cI = "ebi"+uid, cA = "eba"+uid; const baseF = "drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px "+red+") drop-shadow(0 0 6px "+red+")"; const css = "@keyframes "+kP+"{0%,100%{filter:"+baseF+"}50%{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px "+red+") drop-shadow(0 0 13px "+dred+")}}" +"@keyframes "+kA1+"{0%{stroke-dashoffset:320;opacity:0}12%{opacity:1}60%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}" +"@keyframes "+kA2+"{0%{stroke-dashoffset:0;opacity:0}15%{opacity:1}65%{opacity:1}100%{stroke-dashoffset:320;opacity:0}}" +"@keyframes "+kA3+"{0%{stroke-dashoffset:300;opacity:0}20%{opacity:1}70%{opacity:.9}100%{stroke-dashoffset:-20;opacity:0}}" +"."+cI+"{animation:"+kP+" 2.4s var(--ease-out) infinite}" +"."+cA+"{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px "+red+") drop-shadow(0 0 6px "+red+");stroke-dasharray:60 260}" +"@media(prefers-reduced-motion:reduce){."+cI+"{animation:none}."+cA+"{animation:none;opacity:.85}}"; return (
STING
{active && ( )}
); } /* ---------- bottom nav: Главная · Команда · [СКАН] · Баку · Кабинет ---------- */ function BottomNav({ active, onNav, lang }) { const l = L(lang); const left = [ {id:"home",icon:"home",label:l.nav_home}, {id:"team",icon:"users",label:l.nav_team} ]; const right = [ {id:"baku",icon:"flag",label:l.nav_baku, f1:true}, {id:"cabinet",icon:"user",label:l.nav_cab} ]; const item = (it) => { const on = active === it.id; return ( ); }; return (
{left.map(item)} {right.map(item)}
); } /* ---------- LOGIN ---------- */ function LoginScreen({ onLogin, lang }) { const l = L(lang); return (
{/* animated electric bottle */}
{/* brand + cta */}
STING

{lang==="uz"?"POYGASI":"ГОНКА"}

{lang==="uz" ? "Sting sotib ol, chekni skanla va Bakuga uchish uchun jamoa yigʻ." : "Покупай Sting, сканируй чеки, собери команду — деньги на карту и Гран-при в Баку."}

{lang==="uz"?"KIRISH":"ВОЙТИ"}
Официальный энергетик Formula 1®. Логотип F1 — товарный знак Formula One Licensing BV.
); } /* ---------- HOME ---------- */ function HomeScreen({ points, tickets, pitOpen, pitPlayed, onNav, onPlay, lang }) { const l = L(lang); return (
{/* header */}
{TEAM.name}
onNav("__lang")} />
{/* hero */}
{l.hello}, Азиз
{pitOpen ? :
{l.pit_next} {pitPlayed ? l.pit_done_sub : l.pit_soon_sub}
}
{/* team tank */}
{/* actions */}
onNav("scan")} /> onNav("tickets")} />
); } function LangToggle({ lang, onLang }) { return ( ); } /* ---------- TEAM ---------- */ function TeamScreen({ lang, state, onChangeTeam, onSoon }) { const l = L(lang); const team = state?.team; const members = team?.members?.map((m)=>({ name:m.name, tickets: state?.tickets?.filter((t)=>t.team_id===team.id).length || m.points || 0, captain:m.id===team.captain_user_id, you:m.id===state?.user?.id, played:!!m.played_current_window, })) || TEAM.members; return (
{team?.name || TEAM.name}

{l.team_title}

{team?.playedCount ?? TEAM.bak} {team?.boostActive ? "x2 включён" : "до x2"}
Пригласите друзей: 4 игрока в пит-стопе дают x2.
{members.length}/20 · {l.members} {team?.boostActive ? "x2" : `ещё ${team?.missingForBoost ?? 4}`}
{members.map((m,i)=>(
{i+1} {m.name}{m.captain && {l.captain}} {m.played?"сыграл":"ждём"} {m.tickets}
))}
{l.invite}
); } /* ---------- BAKU ---------- */ function BakuScreen({ lang, state }) { const l = L(lang); const races = state?.f1?.races || []; const baku = races.find((race)=>race.highlight) || races[0]; return (
Formula 1 calendar F1 {/* prize card */}
Round {baku?.round || 15}
{baku?.title || l.prize_name}
{/* countdown + chance */}
Azerbaijan GP
{baku?.dates || "24-26 Sep"}
{state?.tickets?.length || 0} личных билетов · без randomizer на среду
F1 2026
{races.map((race,i)=>(
R{race.round} · {race.country} {race.dates}
))}
{l.my_tickets}
{(state?.tickets || []).slice(0,8).map((ticket,i)=>( {ticket.code} ))}
); } /* ---------- CABINET (личный кабинет) ---------- */ function CabinetScreen({ points, onNav, onLogout, onBindCard, cardBound, lang, state, onSoon }) { const l = L(lang); const rows = [ { icon:"ticket", label:l.my_tickets, go:()=>onNav("tickets") }, { icon:"creditCard", label:l.pay_card, sub: state?.card?.card_mask || (cardBound ? "•• 4022" : "—"), go:onBindCard }, { icon:"globe", label:l.language, sub: lang==="uz"?"Oʻzbekcha":"Русский", go:()=>onNav("__lang") }, { icon:"file", label:l.rules, go:onSoon }, { icon:"shield", label:l.offer, go:onSoon }, { icon:"help", label:l.support, go:onSoon }, ]; return (
Азиз Каримов
{state?.team?.name || TEAM.name} · {l.level}
{[{k:l.points,v:points},{k:l.scans,v:state?.receipts?.length || 0},{k:l.pitstops,v:state?.pitStop?.attempts || 0}].map((s,i)=>(
{s.v}
{s.k}
))}
{rows.map((r,i)=>( ))}
); } /* ---------- MY TICKETS (коды) ---------- */ function TicketsScreen({ onBack, lang, state }) { const l = L(lang); const tickets = state?.tickets || MY_TICKETS; const total = tickets.length; return (
{total} {l.points==="ball"?"chipta":"билетов"} {l.in_game}

{l.tk_title}

{tickets.map((t,i)=>(
{t.code}
{t.date || (t.created_at || "").slice(0,10)} · {t.shop || "receipt"} · {t.bottles || 1} бут.
{l.in_game}
))}
); } /* ---------- SCAN (sheet) ---------- */ function ScanScreen({ onClose, onReward, lang }) { const l = L(lang); const [code,setCode] = React.useState(""); return (

{l.scan_title}

{["tl","tr","bl","br"].map((c)=>{ const pos={ tl:{top:-3,left:-3,borderRight:0,borderBottom:0}, tr:{top:-3,right:-3,borderLeft:0,borderBottom:0}, bl:{bottom:-3,left:-3,borderRight:0,borderTop:0}, br:{bottom:-3,right:-3,borderLeft:0,borderTop:0} }[c]; return ; })}
{l.scan_aim}
{l.scan_manual}
setCode(e.target.value)} placeholder="STG-0000-00" style={{ width:"100%", boxSizing:"border-box", background:"var(--ink-800)", border:"1px solid var(--border-subtle)", borderRadius:"var(--r-md)", padding:"14px 16px", color:"#fff", fontFamily:"var(--font-heading)", fontSize:16, letterSpacing:"0.05em", outline:"none" }} />
onReward(code)}>{l.scan_btn}
); } function RewardOverlay({ onClose, lang, reward }) { const l = L(lang); const accepted = reward?.acceptedBottles ?? 2; const raw = reward?.rawBottles ?? accepted; const attempts = reward?.attemptsAdded ?? accepted*2; const capped = reward?.capped; return (
{l.accepted}
+{accepted} билетов

личные билеты · +{attempts} пит-стопов тебе

{capped ? `В чеке ${raw}, зачли максимум 5.` : l.limits}

{l.continue}
); } /* ---------- CARD SHEET (привязка карты) ---------- */ function CardSheet({ onClose, onSave, lang }) { const l = L(lang); const [v,setV] = React.useState(""); return (

{l.card_title}

Проверьте номер карты дважды. Выплата придёт только на эту карту. Вы сами отвечаете за номер, который вводите.

setV(e.target.value)} placeholder="8600 •••• •••• ••••" style={{ width:"100%", boxSizing:"border-box", background:"var(--ink-800)", border:"1px solid var(--border-subtle)", borderRadius:"var(--r-md)", padding:"14px 16px", color:"#fff", fontFamily:"var(--font-heading)", fontSize:17, letterSpacing:"0.08em", outline:"none", marginBottom:14 }} /> onSave(v)}>{l.card_btn}
); } /* ---------- PIT-STOP GAME (imperative, ported) ---------- */ const SPOTS = [ { id:"jackF", label:"Домкрат", x:160, y:34 }, { id:"jackR", label:"Домкрат", x:160, y:524 }, { id:"gunFL", label:"Гайка", x:38, y:189, wheel:"FL" }, { id:"gunFR", label:"Гайка", x:282, y:189, wheel:"FR" }, { id:"gunRL", label:"Гайка", x:38, y:387, wheel:"RL" }, { id:"gunRR", label:"Гайка", x:282, y:387, wheel:"RR" }, { id:"whFL", label:"Колесо", x:64, y:112, wheel:"FL", fresh:true }, { id:"whFR", label:"Колесо", x:256, y:112, wheel:"FR", fresh:true }, { id:"whRL", label:"Колесо", x:64, y:466, wheel:"RL", fresh:true }, { id:"whRR", label:"Колесо", x:256, y:466, wheel:"RR", fresh:true }, ]; function PitStopGame({ onFinish, onExit, lang }) { const l = L(lang); const ref = React.useRef(null); React.useEffect(()=>{ const root = ref.current; const NS = "http://www.w3.org/2000/svg"; const $ = (s) => root.querySelector(s); const nodes = $("#pnodes"), clock = $("#pclock"), phase = $("#pphase"), fin = $("#pfin"), lights = root.querySelectorAll(".lite"); const WINDOW = 1150, PEN_MISS = 1000, PEN_WILD = 300; const fmt = (ms) => (ms/1000).toFixed(2); const rnd = (a,b)=>a+Math.random()*(b-a); const timers = new Set(); const after = (fn,ms)=>{ const t=setTimeout(()=>{ timers.delete(t); fn(); }, ms); timers.add(t); return t; }; let raf = 0, dead = false; const G = { queue:[...SPOTS].sort(()=>Math.random()-0.5), idx:-1, cur:null, hits:0, pen:0, t0:0, state:"lights", win:null }; SPOTS.forEach((s)=>{ const g = document.createElementNS(NS,"g"); g.setAttribute("class","posnode"); g.setAttribute("data-id",s.id); g.innerHTML = `${s.label}`; nodes.appendChild(g); }); const paintWheel = (s)=>{ if(!s.wheel) return; const w=$("#wh"+s.wheel); if(!w) return; w.setAttribute("fill", s.fresh ? "#D62300" : "#2a0608"); }; const addPen = (ms)=>{ G.pen+=ms; clock.classList.remove("pen"); void clock.offsetWidth; clock.classList.add("pen"); }; // start lights lights.forEach((li,i)=> after(()=>li.classList.add("on"), 320*i+250)); after(()=>{ if(dead) return; lights.forEach((li)=>li.classList.remove("on")); G.state="play"; G.t0=performance.now(); phase.textContent=l.pit_work; const tick=()=>{ if(dead||G.state!=="play") return; clock.textContent=fmt(performance.now()-G.t0+G.pen); raf=requestAnimationFrame(tick); }; tick(); next(); }, 320*5+rnd(600,1300)); function next(){ G.idx++; if(G.idx>=G.queue.length){ finish(); return; } after(()=>{ if(dead||G.state!=="play") return; const s=G.queue[G.idx]; G.cur=s; const n=nodes.querySelector('[data-id="'+s.id+'"]'); n.classList.add("active"); G.win=after(()=>{ if(dead||G.cur!==s) return; n.classList.remove("active"); n.classList.add("miss"); G.cur=null; addPen(PEN_MISS); next(); }, WINDOW); }, G.idx===0 ? rnd(250,500) : rnd(150,400)); } function onDown(e){ if(G.state!=="play") return; const node = e.target.closest && e.target.closest(".posnode"); if(node && G.cur && node.getAttribute("data-id")===G.cur.id){ clearTimeout(G.win); const s=G.cur; G.cur=null; G.hits++; node.classList.remove("active"); node.classList.add("done"); paintWheel(s); next(); } else { addPen(PEN_WILD); } } root.querySelector("#pstage").addEventListener("pointerdown", onDown); function finish(){ G.state="done"; cancelAnimationFrame(raf); const total = performance.now()-G.t0+G.pen; phase.textContent=l.pit_gone; clock.textContent=fmt(total); $("#pfinMs").textContent=fmt(total); $("#pfinDet").textContent=`${l.dots} ${G.hits}/10`+(G.pen?` · +${(G.pen/1000).toFixed(1)} сек`:""); fin.style.display="flex"; after(()=> onFinish(total, { hits:G.hits, pen:G.pen }), 1900); } return ()=>{ dead=true; timers.forEach(clearTimeout); cancelAnimationFrame(raf); }; }, []); return (
{l.pit_ready}
0.00
{[0,1,2,3,4].map(i=>)}
0.00
{l.pit_gone}
{l.pit_hint}
); } /* ---------- RESULTS ---------- */ function ResultsScreen({ result, points, onClose, lang }) { const l = L(lang); const my = result ? result.time : 7820; const rows = TEAM.members.filter((m)=>!m.you).slice(0,4).map((m,i)=>({ name:m.name, ms: 6500+i*900+Math.random()*800 })); rows.push({ name:l.you, ms:my, you:true }); rows.sort((a,b)=>a.ms-b.ms); const PLACE=[12,8,6,4]; const x2 = result?.backend?.multiplier ? result.backend.multiplier > 1 : rows.length>=4; const myPos = rows.findIndex(r=>r.you); const gained = result?.backend?.points || ((PLACE[myPos] ?? 2) * (x2?2:1)); return (
{l.results}
{(my/1000).toFixed(2)}
сек {x2 && "· "} {x2 && {l.x2}}
{result &&
{l.dots} {result.hits}/10{result.pen?` · штрафы +${(result.pen/1000).toFixed(1)} сек`:""}
}
{rows.slice(0,6).map((r,i)=>(
{i+1} {r.name} {(r.ms/1000).toFixed(2)} {(PLACE[i]??2)*(x2?2:1)} {l.oc}
))}
Тебе: +{gained} очков
{l.again}
); } inject(); window.StingScreens = { BottomNav, LoginScreen, HomeScreen, TeamScreen, BakuScreen, CabinetScreen, TicketsScreen, ScanScreen, RewardOverlay, CardSheet, PitStopGame, ResultsScreen, };