[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_102":103,"_104":105},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","cnkber5bar","name","tma-rewards","path","index.tsx","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":58,"_59":32,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/cnkber5bar/tma-rewards/code/index.tsx","extension","id","da5b038e-655f-45f7-8c3f-8cd13ab7acd6","fileId","f454eb44-a00c-11f1-a2c5-1607ee4eb77e","parentId","branchId","f959f0de-469a-4a58-bfcc-e1fbfe8cdd1b","branchVersion",30,"latest",true,"createdAt",["D",1787614230630],"version",24,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n/* ─── Safety guard: objects/anything render-safe ───────────\n Every text node goes through toText() so a raw object can\n NEVER be passed as a React child (eliminates React error #31). */\nfunction toText(value: unknown, fallback = \"\"): string {\n if (typeof value === \"string\" || typeof value === \"number\") return String(value);\n if (typeof value === \"boolean\") return value ? \"1\" : \"0\";\n return fallback;\n}\n\n/* ─── Telegram / Dev-fallback user (primitives only) ─────── */\ninterface TgUser { id?: number; first_name?: string; username?: string; photo_url?: string }\ninterface AppUser { name: string; username: string; avatar: string }\n\nfunction getTgUser(): AppUser {\n const fallback: AppUser = { name: \"DevUser\", username: \"devuser\", avatar: \"\" };\n try {\n const w = window as unknown as { Telegram?: { WebApp?: { initDataUnsafe?: { user?: TgUser } } } };\n const u = w.Telegram?.WebApp?.initDataUnsafe?.user;\n if (u && (u.username || u.first_name)) {\n return {\n name: toText(u.first_name || u.username!, \"DevUser\"),\n username: toText(u.username, \"tg_user\"),\n avatar: toText(u.photo_url, \"\"),\n };\n }\n } catch { /* ignore */ }\n return fallback;\n}\n\nconst ME: AppUser = getTgUser();\n\n/* ─── Inline SVG icon components (match the pasted design) ─ */\ntype IconProps = { size?: number; strokeWidth?: number; fill?: boolean };\nconst HomeIcon = ({ size = 22, strokeWidth = 2.2 }: IconProps) => (\n \n);\nconst TasksIcon = ({ size = 22, strokeWidth = 2.2 }: IconProps) => (\n \n);\nconst WheelIcon = ({ size = 22, strokeWidth = 2.2 }: IconProps) => (\n \n);\nconst ShopIcon = ({ size = 22, strokeWidth = 2.2 }: IconProps) => (\n \n);\nconst HistoryIcon = ({ size = 22, strokeWidth = 2.2 }: IconProps) => (\n \n);\nconst DiamondIcon = ({ size = 16 }: IconProps) => (\n \n);\nconst GiftIcon = ({ size = 16 }: IconProps) => (\n \n);\nconst UsersIcon = ({ size = 16 }: IconProps) => (\n \n);\nconst ArrowIcon = ({ size = 18 }: IconProps) => (\n \n);\n\n/* ─── Telegram Star: renders uploaded image (localStorage) or falls back to inline SVG ── */\nconst TelegramStarIcon = ({ className = \"w-5 h-5\", size, src }: { className?: string; size?: number; src?: string }) => {\n const dim = size ? `${size}px` : undefined;\n if (src) {\n return (\n \n );\n }\n return (\n \n \n \n \n \n \n \n \n {/* 3D Rounded Telegram Star Shape */}\n \n {/* Internal Telegram Plane Cutout Highlight */}\n \n \n \n );\n};\n\n/* ─── Balance data ───────────────────────────────────────── */\ninterface Bal { id: string; label: string; value: string; unit: string; theme: string; Icon: React.ComponentType<{ size?: number; src?: string }>; }\nconst fmt = (n: number) => n.toLocaleString(\"ru\");\nconst BALANCES: Bal[] = [\n { id: \"primary\", label: \"Основной\", value: fmt(12540), unit: \"₽\", theme: \"card-primary\", Icon: DiamondIcon },\n { id: \"bonus\", label: \"Бонусный\", value: fmt(860), unit: \"₽\", theme: \"card-bonus\", Icon: GiftIcon },\n { id: \"referral\", label: \"Реферальный\", value: fmt(3240), unit: \"₽\", theme: \"card-referral\", Icon: UsersIcon },\n { id: \"stars\", label: \"Звёзды\", value: \"980\", unit: \"★\", theme: \"card-stars\", Icon: TelegramStarIcon },\n];\n\n/* ─── Canvas: ascending multiplier curve (from the spec) ─── */\nfunction RocketGraph() {\n const ref = useRef(null);\n const [mult, setMult] = useState(1.0);\n useEffect(() => {\n const cv = ref.current;\n if (!cv) return;\n const ctx = cv.getContext(\"2d\")!;\n const W = (cv.width = cv.clientWidth || 300), H = (cv.height = cv.clientHeight || 110);\n const t0 = performance.now();\n let raf = 0;\n const draw = (t: number) => {\n const m = 1 + 18.8 * Math.min(1, (t - t0) / 9000); // 1.00x → 19.80x\n setMult(m);\n ctx.clearRect(0, 0, W, H);\n ctx.strokeStyle = \"rgba(129,140,248,0.18)\"; ctx.lineWidth = 1;\n for (let x = 0; x <= W; x += 26) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke(); }\n for (let y = 0; y <= H; y += 26) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }\n ctx.strokeStyle = \"#34d399\"; ctx.lineWidth = 3; ctx.shadowColor = \"#34d399\"; ctx.shadowBlur = 12;\n ctx.beginPath();\n for (let px = 0; px <= W; px += 4) {\n const ratio = px / W, curve = Math.pow(ratio, 2.2) * (H - 16) + 6;\n px ? ctx.lineTo(px, H - curve) : ctx.moveTo(px, H - curve);\n }\n ctx.stroke();\n raf = requestAnimationFrame(draw);\n };\n raf = requestAnimationFrame(draw);\n return () => cancelAnimationFrame(raf);\n }, []);\n return (\n

\n Динамический График\n ${mult.toFixed(2)}x\n

\n );\n}\n\n/* ─── Main app ───────────────────────────────────────────── */\nconst NAV = [\n { label: \"Главная\", Icon: HomeIcon },\n { label: \"Задания\", Icon: TasksIcon },\n { label: \"Колесо\", Icon: WheelIcon },\n { label: \"Магазин\", Icon: ShopIcon },\n { label: \"История\", Icon: HistoryIcon },\n];\n\nfunction App() {\n const [tab, setTab] = useState(0);\n const [customStarImage, setCustomStarImage] = useState(() => {\n try { return localStorage.getItem(\"custom_tg_star\") || \"\"; }\n catch { return \"\"; }\n });\n const fileInputRef = useRef(null);\n\n const handleStarFile = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = () => {\n const dataUrl = String(reader.result || \"\");\n if (dataUrl) {\n try { localStorage.setItem(\"custom_tg_star\", dataUrl); } catch { /* storage full/unavailable */ }\n setCustomStarImage(dataUrl);\n }\n };\n reader.readAsDataURL(file);\n };\n\n const name = toText(ME.name, \"DevUser\");\n const username = toText(ME.username, \"devuser\");\n const avatar = toText(ME.avatar, \"\");\n\n return (\n

\n\n {/* Header */}\n

\n {avatar ? $\"\"$ : name.charAt(0).toUpperCase()}\n

\n {name}\n @{username} Lvl 12\n

980

\n \n

\n\n {/* Balances 2x2 */}\n

\n {BALANCES.map(b => {\n const Icon = b.Icon;\n return (\n

\n {b.label}\n

\n {b.value}\n {b.id === \"stars\"\n ? \n : {b.unit}}\n

\n );\n })}\n

\n\n {/* Wheel banner */}\n

\n Колесо Удачи\n Крути · Выигрывай · Умножай\n

\n \n

\n\n {/* Level progress */}\n

\n Прогресс уровня\n До Lvl 13 осталось 230 XP\n

\n \n 77%\n

\n\n {/* Interactive game mode (rocket) — from the original spec */}\n \n\n {/* Bottom nav */}\n \n\n \n

\n );\n}\n\n/* ─── Error Boundary ─────────────────────────────────────── */\nclass ErrorBoundary extends React.Component<{ children: React.ReactNode }, { error: Error | null }> {\n state: { error: Error | null } = { error: null };\n static getDerivedStateFromError(error: Error) { return { error }; }\n render() {\n if (this.state.error) {\n return (\n

\n Произошла ошибка UI:\n

{toText(this.state.error?.message || this.state.error, \"неизвестная ошибка\")}

\n );\n }\n return this.props.children;\n }\n}\n\n/* ─── Styles (the pasted glassmorphic design, adapted) ───── */\nconst css = `\n*{box-sizing:border-box;margin:0;padding:0;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-tap-highlight-color:transparent}\nhtml,body{background:#07090e}\nbody{color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh;overflow-x:hidden}\n.app-viewport{width:100%;max-width:430px;min-height:100vh;background:#0b0e17;position:relative;padding:16px 18px 120px 18px;overflow:hidden;display:flex;flex-direction:column;gap:16px}\n.bg-glow-1{position:absolute;top:-60px;left:-40px;width:240px;height:240px;background:radial-gradient(circle,rgba(99,102,241,.22) 0%,rgba(0,0,0,0) 70%);pointer-events:none;z-index:0}\n.bg-glow-2{position:absolute;top:250px;right:-50px;width:260px;height:260px;background:radial-gradient(circle,rgba(16,185,129,.15) 0%,rgba(0,0,0,0) 70%);pointer-events:none;z-index:0}\n.ava-img{width:100%;height:100%;border-radius:15px;object-fit:cover}\n.header-user{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:6px 0}\n.user-profile{display:flex;align-items:center;gap:12px}\n.avatar{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;box-shadow:0 4px 20px rgba(99,102,241,.35);border:1px solid rgba(255,255,255,.2);overflow:hidden}\n.user-info{display:flex;flex-direction:column;gap:2px}\n.username{font-size:17px;font-weight:700;letter-spacing:-.3px}\n.user-tag{font-size:12px;color:rgba(255,255,255,.45);font-weight:500;display:flex;align-items:center;gap:6px}\n.level-badge{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:6px;color:#a5b4fc;font-size:11px;font-weight:600}\n.stars-pill{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);padding:7px 13px;border-radius:20px;display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:#fbbf24;backdrop-filter:blur(10px)}\n.header-right{display:flex;align-items:center;gap:8px}\n.upload-btn{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#a5b4fc;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}\n.upload-btn:active{transform:scale(.92);opacity:.85}\n.balance-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.card{position:relative;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;height:120px;backdrop-filter:blur(16px);overflow:hidden;transition:transform .2s ease,border-color .2s ease}\n.card:active{transform:scale(.98)}\n.card-primary{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(37,99,235,.05));border:1px solid rgba(96,165,250,.25)}\n.card-primary .icon-box{background:rgba(59,130,246,.2);color:#60a5fa}\n.card-bonus{background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(147,51,234,.05));border:1px solid rgba(192,132,252,.25)}\n.card-bonus .icon-box{background:rgba(168,85,247,.2);color:#c084fc}\n.card-referral{background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(5,150,105,.05));border:1px solid rgba(52,211,153,.25)}\n.card-referral .icon-box{background:rgba(16,185,129,.2);color:#34d399}\n.card-stars{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(217,119,6,.05));border:1px solid rgba(251,191,36,.25)}\n.card-stars .icon-box{background:rgba(245,158,11,.2);color:#fbbf24}\n.card-header{display:flex;justify-content:space-between;align-items:center}\n.icon-box{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px}\n.card-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:-.1px}\n.card-value-wrap{display:flex;align-items:baseline;gap:4px;margin-top:6px}\n.card-value{font-size:22px;font-weight:800;letter-spacing:-.5px}\n.card-currency{font-size:15px;font-weight:600;color:rgba(255,255,255,.4)}\n.wheel-banner{position:relative;z-index:1;background:linear-gradient(135deg,rgba(30,27,75,.7),rgba(15,23,42,.8));border:1px solid rgba(129,140,248,.25);border-radius:24px;padding:20px;backdrop-filter:blur(20px);overflow:hidden;display:flex;flex-direction:column;gap:16px;box-shadow:0 10px 30px rgba(0,0,0,.3)}\n.wheel-banner::before{content:'';position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(99,102,241,.25) 0%,rgba(0,0,0,0) 70%);pointer-events:none}\n.banner-content{display:flex;justify-content:space-between;align-items:center}\n.banner-text{display:flex;flex-direction:column;gap:4px}\n.banner-title{font-size:20px;font-weight:800;letter-spacing:-.4px;background:linear-gradient(90deg,#fff,#c7d2fe);-webkit-background-clip:text;background-clip:text;color:transparent}\n.banner-subtitle{font-size:12px;color:rgba(255,255,255,.5);font-weight:500}\n.cta-button{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:16px;padding:14px 20px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 6px 20px rgba(99,102,241,.4);transition:all .2s ease;width:100%}\n.cta-button:active{transform:scale(.98);opacity:.9}\n.progress-card{position:relative;z-index:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:18px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(16px)}\n.progress-info{display:flex;flex-direction:column;gap:4px}\n.progress-title{font-size:15px;font-weight:700}\n.progress-sub{font-size:12px;color:rgba(255,255,255,.45)}\n.gauge-wrapper{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center}\n.gauge-value{position:absolute;font-size:13px;font-weight:800;color:#34d399}\n.rocket-card{position:relative;z-index:1;background:rgba(255,255,255,.03);border:1px solid rgba(129,140,248,.16);border-radius:22px;padding:16px;backdrop-filter:blur(16px)}\n.rocket-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}\n.rocket-title{font-size:15px;font-weight:700}\n.rocket-mult{font-size:18px;font-weight:800;color:#34d399}\n.rocket-cta{margin-top:12px}\n.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:76px;background:rgba(11,14,23,.82);border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;justify-content:space-around;align-items:center;padding:0 10px 10px;z-index:100}\n.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(255,255,255,.4);font-size:11px;font-weight:600;cursor:pointer;width:20%;transition:color .2s ease;background:none;border:none;padding:0}\n.nav-item.active{color:#818cf8}\n.nav-icon{font-size:20px;height:24px;display:flex;align-items:center}\n`;\n\n/* Add Plus Jakarta Sans font */\nconst fontLink = document.createElement(\"link\");\nfontLink.rel = \"stylesheet\";\nfontLink.href = \"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\";\ndocument.head.appendChild(fontLink);\n\nconst style = document.createElement(\"style\");\nstyle.textContent = css;\ndocument.head.appendChild(style);\n\n/* ─── Mount with try/catch: never a silent blank page ───── */\ntry {\n const rootEl = document.getElementById(\"root\");\n if (rootEl) {\n createRoot(rootEl).render(\n \n \n \n );\n }\n} catch (err) {\n const w = window as unknown as { __vtError?: unknown };\n w.__vtError = err;\n const msg = err instanceof Error ? err.stack || err.message : String(err);\n document.body.innerHTML =\n `

` +\n `Ошибка монтирования:

${msg}

`;\n}\n","deleted",false,"label",[14],"6229185f-a856-40bf-af5b-a4f22b4cd2f3",["D",1787611260352],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Premium dark-mode Telegram Mini App rewards simulator","imageUrl","userId","e2cb8f69-0a92-4830-aeb2-dd54e53eb07c","pinnedFileId","e53dd0d0-a00c-11f1-a2c5-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a035ee-b3f4-7531-a3b0-c8bd51c3c42b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_101":96},"org",{"_9":10,"_95":96,"_97":96,"_55":56,"_98":99,"_100":42},"branch",{"_35":30,"_11":86,"_22":28,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":12,"_94":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","ctx",{"_79":-5,"_135":136,"_137":138,"_139":140,"_141":42,"_142":42,"_143":42,"_144":32,"_145":-5,"_146":-7,"_147":-7,"_148":63,"_149":42,"_150":42,"_151":-5,"_152":42,"_153":42,"_154":42,"_155":-5},"ENV",{"_106":107,"_108":109,"_110":86,"_111":112,"_113":114,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]