[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_108":109,"_110":111},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","yrg7l18b88","name","tma-arcade","path","frontend/index.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":38,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/yrg7l18b88/tma-arcade/code/frontend/index.tsx","extension","id","fc7e489d-04b2-4139-ade7-7ab001937ba1","index.tsx","fileId","fd91bf3e-a7f5-11f1-924a-1607ee4eb77e","parentId","79c00869-def6-4521-ae23-0b5506863e1b","branchId","4dfd1fe9-e137-4b46-9340-d42f83fc4da4","branchVersion",6,"latest",true,"createdAt",["D",1788481038738],"version",0,"fileType","script","content","/**\n * @jsxImportSource https://esm.sh/react@18.2.0\n *\n * Gamified Arcade — Telegram Mini App client (React + Tailwind/Twind + Framer Motion)\n * Single-file frontend. Talks to the same-origin /api/* backend.\n */\nimport React, { useEffect, useRef, useState, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { motion, AnimatePresence } from \"https://esm.sh/framer-motion@11?deps=react@18.2.0,react-dom@18.2.0\";\n\n// ------------------------------------------------------------------\n// Telegram WebApp helpers\n// ------------------------------------------------------------------\ndeclare global {\n interface Window {\n Telegram?: any;\n }\n}\nconst tg = () => window.Telegram?.WebApp;\nconst initData = () => tg()?.initData || \"\";\n\nfunction haptic(type: \"impact\" | \"notification\", style: string = \"light\") {\n try {\n const w = tg();\n if (!w?.HapticFeedback) return;\n if (type === \"impact\") w.HapticFeedback.impactOccurred(style);\n else w.HapticFeedback.notificationOccurred(style);\n } catch { /* ignore */ }\n}\n\n// ------------------------------------------------------------------\n// API client\n// ------------------------------------------------------------------\nasync function api(path: string, body?: any): Promise {\n const opts: RequestInit = { method: body ? \"POST\" : \"GET\", headers: {} };\n if (body) {\n opts.headers = { \"Content-Type\": \"application/json\" };\n opts.body = JSON.stringify(body);\n }\n const res = await fetch(`/api${path}`, opts);\n const json = await res.json().catch(() => ({}));\n if (!res.ok || json.ok === false) throw new Error(json.error || `Request failed (${res.status})`);\n return json;\n}\n\n// ------------------------------------------------------------------\n// Theme helpers (native Telegram CSS variables)\n// ------------------------------------------------------------------\nconst theme = {\n bg: \"var(--tg-theme-bg-color, #0b0d16)\",\n secondary: \"var(--tg-theme-secondary-bg-color, #151827)\",\n text: \"var(--tg-theme-text-color, #fff)\",\n hint: \"var(--tg-theme-hint-color, #8a8f9e)\",\n button: \"var(--tg-theme-button-color, #4f7cff)\",\n buttonText: \"var(--tg-theme-button-text-color, #fff)\",\n section: \"var(--tg-theme-section-bg-color, #1a1e2e)\",\n card: \"var(--tg-theme-secondary-bg-color, #151827)\",\n};\n\n// ------------------------------------------------------------------\n// Small shared components\n// ------------------------------------------------------------------\nfunction Skeleton({ className = \"h-24\" }: { className?: string }) {\n return (\n

\n );\n}\n\nfunction Card({ children, className = \"\" }: { children: React.ReactNode; className?: string }) {\n return (\n \n {children}\n

\n );\n}\n\nfunction PrimaryButton({ children, onClick, disabled, color }: {\n children: React.ReactNode; onClick?: () => void; disabled?: boolean; color?: string;\n}) {\n return (\n { haptic(\"impact\", \"light\"); onClick?.(); }}\n disabled={disabled}\n className=\"w-full rounded-xl py-3 font-bold text-sm disabled:opacity-40\"\n style={{ background: color || theme.button, color: theme.buttonText }}\n >\n {children}\n \n );\n}\n\nfunction Chip({ active, children, onClick, color }: {\n active?: boolean; children: React.ReactNode; onClick?: () => void; color?: string;\n}) {\n return (\n { haptic(\"impact\", \"light\"); onClick?.(); }}\n className=\"px-3 py-2 rounded-xl text-xs font-semibold\"\n style={{\n background: active ? (color || theme.button) : theme.secondary,\n color: active ? (color ? \"#0b0d16\" : theme.buttonText) : theme.text,\n }}\n >\n {children}\n \n );\n}\n\n// ------------------------------------------------------------------\n// Main App\n// ------------------------------------------------------------------\ntype Tab = \"hub\" | \"earn\" | \"wallet\" | \"admin\";\n\nfunction App() {\n const [tab, setTab] = useState(\"hub\");\n const [config, setConfig] = useState>({});\n const [user, setUser] = useState(null);\n const [balance, setBalance] = useState(0);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const w = tg();\n if (w) {\n w.expand();\n w.ready();\n w.setHeaderColor?.(\"#0b0d16\");\n w.setBackgroundColor?.(\"#0b0d16\");\n }\n }, []);\n\n const loadAll = useCallback(async () => {\n try {\n const [cfg, auth] = await Promise.all([\n api(\"/config\"),\n api(\"/auth\", { initData: initData() }),\n ]);\n setConfig(cfg.config || {});\n setUser(auth.user);\n setBalance(Number(auth.user?.balance) || 0);\n } catch (e) {\n console.error(\"init failed\", e);\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => { loadAll(); }, [loadAll]);\n\n const updateBalance = (b: number) => { setBalance(b); setUser((u: any) => (u ? { ...u, balance: b } : u)); };\n\n const cfgStr = (k: string, def = \"\") => config[k] || def;\n const sym = cfgStr(\"currency_symbol\", \"⭐\");\n\n if (loading) return ;\n\n return (\n

\n \n \n {tab === \"hub\" && }\n {tab === \"earn\" && }\n {tab === \"wallet\" && }\n {tab === \"admin\" && user?.is_admin && }\n \n \n

\n \n

\n );\n}\n\nfunction Splash() {\n return (\n

\n \n \n \n \n

\n );\n}\n\n// ------------------------------------------------------------------\n// Tab Bar\n// ------------------------------------------------------------------\nfunction TabBar({ tab, setTab, isAdmin, config }: {\n tab: Tab; setTab: (t: Tab) => void; isAdmin?: boolean; config: Record;\n}) {\n const items: { id: Tab; label: string; icon: string }[] = [\n { id: \"hub\", label: config.arcade_title || \"Arcade\", icon: \"🎮\" },\n { id: \"earn\", label: config.earn_title || \"Earn\", icon: \"🎁\" },\n { id: \"wallet\", label: config.wallet_title || \"Wallet\", icon: \"👤\" },\n ];\n if (isAdmin) items.push({ id: \"admin\", label: \"Admin\", icon: \"🛠️\" });\n return (\n \n {items.map((it) => (\n { haptic(\"impact\", \"light\"); setTab(it.id); }}\n className=\"flex flex-col items-center gap-1 px-2 py-1\"\n >\n {it.icon}\n \n {it.label}\n \n \n ))}\n \n );\n}\n\n// ------------------------------------------------------------------\n// Arcade Hub\n// ------------------------------------------------------------------\nfunction Hub({ config, user, balance, onBalance, sym }: any) {\n return (\n

\n {/* Balance badge + top up */}\n

\n {user?.username?.[0]?.toUpperCase() || \"👤\"}\n

@{user?.username || \"player\"}

Balance

\n \n {sym} {Number(balance).toFixed(0)}\n \n { haptic(\"impact\", \"light\"); }}\n className=\"rounded-xl px-3 py-2 text-xs font-bold\"\n style={{ background: theme.button, color: theme.buttonText }}\n >\n {config.topup_button_text || \"Top Up\"}\n \n

\n\n \n \n \n

\n );\n}\n\n// ------------------------------------------------------------------\n// Space Booster (Crash)\n// ------------------------------------------------------------------\nfunction SpaceBooster({ config, user, balance, onBalance, sym }: any) {\n const [bet, setBet] = useState(10);\n const [phase, setPhase] = useState<\"idle\" | \"running\" | \"crashed\" | \"cashed\">(\"idle\");\n const [mult, setMult] = useState(1);\n const [crashPoint, setCrashPoint] = useState(1);\n const [result, setResult] = useState<{ won: number; mult: number } | null>(null);\n const animRef = useRef(null);\n const startRef = useRef(0);\n const crashRef = useRef(1);\n\n const launch = async () => {\n if (bet <= 0 || bet > balance) { haptic(\"notification\", \"error\"); return; }\n haptic(\"impact\", \"medium\");\n const res = await api(\"/games/booster/launch\", { initData: initData(), bet });\n setCrashPoint(res.crashPoint);\n crashRef.current = res.crashPoint;\n setPhase(\"running\");\n setResult(null);\n startRef.current = Date.now();\n // animate multiplier upward\n const tick = () => {\n const t = (Date.now() - startRef.current) / 1000;\n const m = Math.pow(Math.E, 0.09 * t);\n if (m >= crashRef.current) {\n setMult(crashRef.current);\n setPhase(\"crashed\");\n haptic(\"notification\", \"error\");\n onBalance(Math.max(0, balance - bet));\n return;\n }\n setMult(Number(m.toFixed(2)));\n animRef.current = requestAnimationFrame(tick);\n };\n cancelAnimationFrame(animRef.current!);\n animRef.current = requestAnimationFrame(tick);\n };\n\n const eject = async () => {\n cancelAnimationFrame(animRef.current!);\n haptic(\"impact\", \"medium\");\n const res = await api(\"/games/booster/eject\", { initData: initData(), mult });\n setPhase(\"cashed\");\n setResult({ won: res.won, mult });\n if (res.won > 0) haptic(\"notification\", \"success\");\n onBalance(res.balance);\n };\n\n useEffect(() => () => cancelAnimationFrame(animRef.current!), []);\n\n const color = mult >= 2 ? \"#22c55e\" : mult >= 1.5 ? \"#eab308\" : theme.button;\n\n return (\n \n

🚀 {config.game_1_title || \"Space Booster\"}

\n \n {config.booster_multiplier_label || \"Multiplier\"}\n \n

{config.game_1_desc}

\n\n {/* Rocket + multiplier */}\n

\n \n 🚀\n \n

\n \n {mult.toFixed(2)}x\n \n

\n {phase === \"crashed\" && (\n

\n 💥 CRASHED\n

\n )}\n {phase === \"cashed\" && result && (\n

\n \n +{sym}{result.won.toFixed(0)} 🎉\n \n

\n )}\n

\n\n {/* Bet controls */}\n

\n setBet((b) => Math.max(1, b - 5))}>-5\n

{sym}{bet}

\n setBet((b) => b + 5)}>+5\n setBet((b) => Math.floor(balance))}>Max\n

\n\n {phase === \"idle\" || phase === \"crashed\" || phase === \"cashed\" ? (\n balance || bet <= 0}>\n {config.bet_button_text || \"Place Bet\"} · {sym}{bet}\n \n ) : (\n \n {config.eject_button_text || \"Eject\"} @ {mult.toFixed(2)}x\n \n )}\n \n );\n}\n\n// ------------------------------------------------------------------\n// Color Wheel\n// ------------------------------------------------------------------\nconst SECTORS = [\n { id: \"alpha\", color: \"#22c55e\", mult: 2 },\n { id: \"beta\", color: \"#3b82f6\", mult: 2 },\n { id: \"gamma\", color: \"#a855f7\", mult: 14 },\n];\n\nfunction ColorWheel({ config, user, balance, onBalance, sym }: any) {\n const [bet, setBet] = useState(10);\n const [sector, setSector] = useState(\"alpha\");\n const [spinning, setSpinning] = useState(false);\n const [rotation, setRotation] = useState(0);\n const [lastWin, setLastWin] = useState<{ sector: string; won: number } | null>(null);\n\n const spin = async () => {\n if (bet <= 0 || bet > balance) { haptic(\"notification\", \"error\"); return; }\n haptic(\"impact\", \"medium\");\n setSpinning(true);\n setLastWin(null);\n try {\n const res = await api(\"/games/wheel/spin\", { initData: initData(), bet, sector });\n const idx = SECTORS.findIndex((s) => s.id === res.winning_sector);\n // rotate to land the winning sector at the top (index 0 pointer)\n const target = 360 * 6 + (360 - idx * 120);\n setRotation(target);\n setTimeout(() => {\n setSpinning(false);\n setLastWin({ sector: res.winning_sector, won: res.won });\n if (res.won > 0) haptic(\"notification\", \"success\");\n onBalance(res.balance);\n }, 2600);\n } catch (e) {\n setSpinning(false);\n haptic(\"notification\", \"error\");\n }\n };\n\n return (\n \n

🎡 {config.game_2_title || \"Color Wheel\"}

{config.game_2_desc}

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

▼

\n `${s.color} ${i * 120}deg ${(i + 1) * 120}deg`).join(\",\")})`,\n transition: spinning ? \"transform 2.6s cubic-bezier(0.17,0.67,0.12,0.99)\" : \"none\",\n transform: `rotate(${rotation}deg)`,\n }}\n >\n {SECTORS.map((s, i) => (\n

\n \n {s.mult}x\n \n

\n ))}\n

\n\n {/* Sector select */}\n

\n {SECTORS.map((s) => (\n setSector(s.id)}>\n {s.id} · {s.mult}x\n \n ))}\n

\n\n {/* Bet */}\n

\n setBet((b) => Math.max(1, b - 5))}>-5\n

{sym}{bet}

\n setBet((b) => b + 5)}>+5\n

\n\n {lastWin && (\n

0 ? \"#22c55e\" : theme.hint }}>\n {lastWin.won > 0 ? `Won ${sym}${lastWin.won.toFixed(0)}!` : `Landed on ${lastWin.sector}. Try again!`}\n

\n )}\n\n balance}>\n {spinning ? \"Spinning...\" : `${config.spin_button_text || \"Spin\"} · ${sym}${bet}`}\n \n \n );\n}\n\n// ------------------------------------------------------------------\n// Match Predictor\n// ------------------------------------------------------------------\nfunction MatchPredictor({ config, user, balance, onBalance, sym }: any) {\n const [matches, setMatches] = useState(null);\n const [stake, setStake] = useState(10);\n const [msg, setMsg] = useState<{ text: string; ok: boolean } | null>(null);\n\n useEffect(() => {\n api(\"/games/matches\").then((r) => setMatches(r.matches)).catch(() => setMatches([]));\n }, []);\n\n const predict = async (matchId: string, outcome: string) => {\n if (stake <= 0 || stake > balance) { haptic(\"notification\", \"error\"); return; }\n haptic(\"impact\", \"medium\");\n try {\n const res = await api(\"/games/matches/predict\", { initData: initData(), bet: stake, matchId, outcome });\n setMsg({ text: `${res.message}`, ok: true });\n onBalance(res.balance);\n haptic(\"notification\", \"success\");\n } catch (e: any) {\n setMsg({ text: e.message, ok: false });\n }\n };\n\n return (\n \n

⚽ {config.game_3_title || \"Match Predictor\"}

{config.game_3_desc}

\n\n

\n Stake\n setStake((s) => Math.max(1, s - 5))}>-5\n

{sym}{stake}

\n setStake((s) => s + 5)}>+5\n

\n\n {msg &&

{msg.text}

}\n\n {!matches ? (\n

\n \n \n

\n ) : (\n

\n {matches.map((m) => (\n

\n {m.time}{m.sport || \"⚽\"}\n

\n {m.home}vs{m.away}\n

\n predict(m.id, \"home\")}>1 · {m.home.split(\" \")[0]}\n predict(m.id, \"draw\")}>X\n predict(m.id, \"away\")}>2 · {m.away.split(\" \")[0]}\n

\n ))}\n

\n )}\n \n );\n}\n\n// ------------------------------------------------------------------\n// Earn & Promo\n// ------------------------------------------------------------------\nfunction Earn({ config, user, balance, onBalance, sym }: any) {\n const [code, setCode] = useState(\"\");\n const [claimMsg, setClaimMsg] = useState<{ text: string; ok: boolean } | null>(null);\n const [referral, setReferral] = useState(null);\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n api(`/referrals`).then((r) => setReferral(r)).catch(() => {});\n }, []);\n\n const claim = async () => {\n if (!code.trim()) return;\n haptic(\"impact\", \"medium\");\n try {\n const res = await api(\"/promo/claim\", { initData: initData(), code });\n setClaimMsg({ text: `+${sym}${res.reward} claimed!`, ok: true });\n onBalance(res.balance);\n haptic(\"notification\", \"success\");\n setCode(\"\");\n } catch (e: any) {\n setClaimMsg({ text: e.message, ok: false });\n haptic(\"notification\", \"error\");\n }\n };\n\n const copyLink = async () => {\n if (!referral?.refLink) return;\n try { await navigator.clipboard.writeText(referral.refLink); } catch { /* fallback */ }\n haptic(\"notification\", \"success\");\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n };\n\n return (\n

\n {/* Promo */}\n \n

🎟️ {config.promo_title || \"Redeem Promo\"}

\n setCode(e.target.value.toUpperCase())}\n placeholder=\"ENTER CODE\"\n className=\"flex-1 rounded-xl px-3 py-2 text-sm font-bold outline-none\"\n style={{ background: theme.secondary, color: theme.text }}\n />\n \n {config.promo_button_text || \"Claim\"}\n \n

\n {claimMsg &&

{claimMsg.text}

}\n \n\n {/* Referral */}\n \n

📣 {config.referral_title || \"Invite Friends\"}

\n Earn {sym}5 for every friend who joins through your link!\n

Earnings

{sym}{Number(referral?.earnings || 0).toFixed(0)}

Invited

{referral?.invited?.length || 0}

\n \n {copied ? \"✓ Copied!\" : \"Copy Referral Link\"}\n \n \n

\n );\n}\n\n// ------------------------------------------------------------------\n// Wallet & Profile\n// ------------------------------------------------------------------\nfunction Wallet({ config, user, balance, onBalance, sym }: any) {\n const [txs, setTxs] = useState(null);\n const [showTopup, setShowTopup] = useState(false);\n const [amount, setAmount] = useState(50);\n\n useEffect(() => {\n api(\"/transactions\").then((r) => setTxs(r.transactions)).catch(() => setTxs([]));\n }, []);\n\n const topup = async (method: \"stars\" | \"ton\") => {\n haptic(\"impact\", \"medium\");\n const res = await api(\"/payments/create-invoice\", { telegram_id: user.telegram_id, amount, method });\n // In production open the invoice link via WebApp.openInvoice. Here we simulate.\n if (window.Telegram?.WebApp?.openInvoice) {\n // placeholder — real flow uses res.invoice_link\n }\n haptic(\"notification\", \"success\");\n setShowTopup(false);\n };\n\n return (\n

\n {/* Profile */}\n \n

\n {user?.username?.[0]?.toUpperCase() || \"👤\"}\n

@{user?.username || \"player\"}

ID: {user?.telegram_id}

\n {config.wallet_title || \"Balance\"}\n {sym}{Number(balance).toFixed(0)}\n

\n setShowTopup(true)}>{config.topup_button_text || \"Top Up\"}\n

\n \n\n {/* Top up modal */}\n \n {showTopup && (\n setShowTopup(false)}\n >\n e.stopPropagation()}\n >\n

Top Up Balance

\n setAmount(50)}>50\n setAmount(100)}>100\n setAmount(250)}>250\n setAmount(500)}>500\n

\n topup(\"stars\")}>⭐ Pay with Telegram Stars\n topup(\"ton\")} color=\"#0098EA\">💎 Pay with TON\n

\n \n \n )}\n \n\n {/* Transactions */}\n \n

Transaction History

\n {!txs ? (\n \n ) : txs.length === 0 ? (\n

No transactions yet.

\n ) : (\n

\n {txs.map((t, i) => (\n

{t.type.replace(/_/g, \" \")}

{t.created_at}

\n = 0 ? \"#22c55e\" : \"#ef4444\" }}>\n {Number(t.amount) >= 0 ? \"+\" : \"\"}{sym}{Number(t.amount).toFixed(0)}\n \n

\n ))}\n

\n )}\n \n

\n );\n}\n\n// ------------------------------------------------------------------\n// Admin Dashboard\n// ------------------------------------------------------------------\nfunction Admin({ config, onConfig, user, sym }: any) {\n const [draft, setDraft] = useState>(config);\n const [saved, setSaved] = useState(false);\n const [promo, setPromo] = useState({ code: \"\", reward: 50, max: 100 });\n const [promoMsg, setPromoMsg] = useState(\"\");\n const [search, setSearch] = useState(\"\");\n const [users, setUsers] = useState(null);\n const [setBal, setSetBal] = useState({ id: \"\", balance: 100 });\n\n const saveConfig = async () => {\n haptic(\"impact\", \"medium\");\n const res = await api(\"/admin/config\", { initData: initData(), updates: draft });\n onConfig(res.config);\n setSaved(true);\n haptic(\"notification\", \"success\");\n setTimeout(() => setSaved(false), 1500);\n };\n\n const createPromo = async () => {\n haptic(\"impact\", \"medium\");\n await api(\"/admin/promo\", { initData: initData(), code: promo.code, reward: Number(promo.reward), maxActivations: Number(promo.max) });\n setPromoMsg(`Promo ${promo.code.toUpperCase()} created!`);\n haptic(\"notification\", \"success\");\n };\n\n const doSearch = async () => {\n if (!search.trim()) return;\n const res = await api(`/admin/search?initData=${encodeURIComponent(initData())}&q=${encodeURIComponent(search)}`);\n setUsers(res.users);\n };\n\n const doSetBalance = async () => {\n haptic(\"impact\", \"medium\");\n await api(\"/admin/set-balance\", { initData: initData(), telegram_id: setBal.id, balance: Number(setBal.balance) });\n haptic(\"notification\", \"success\");\n setSearch(setBal.id);\n doSearch();\n };\n\n const fields = [\n [\"game_1_title\", \"Game 1 Title\"],\n [\"game_1_desc\", \"Game 1 Description\"],\n [\"game_2_title\", \"Game 2 Title\"],\n [\"game_2_desc\", \"Game 2 Description\"],\n [\"game_3_title\", \"Game 3 Title\"],\n [\"game_3_desc\", \"Game 3 Description\"],\n [\"currency_symbol\", \"Currency Symbol\"],\n [\"bet_button_text\", \"Bet Button\"],\n [\"eject_button_text\", \"Eject Button\"],\n [\"spin_button_text\", \"Spin Button\"],\n [\"topup_button_text\", \"Top Up Button\"],\n [\"promo_button_text\", \"Promo Button\"],\n [\"wallet_title\", \"Wallet Title\"],\n [\"arcade_title\", \"Arcade Title\"],\n [\"earn_title\", \"Earn Title\"],\n [\"rules_text\", \"Rules Text\"],\n ];\n\n return (\n

🛠️ Admin Dashboard

\n\n {/* Dynamic Text Studio */}\n \n

🎨 Dynamic Text Studio

\n {fields.map(([key, label]) => (\n

\n {label}\n setDraft((d: any) => ({ ...d, [key]: e.target.value }))}\n className=\"w-full rounded-lg px-3 py-2 text-sm outline-none\"\n style={{ background: theme.secondary, color: theme.text }}\n />\n

\n ))}\n

\n {saved ? \"✓ Saved!\" : \"Save Labels\"}\n

\n \n\n {/* Promo generator */}\n \n

🎟️ Promo Code Generator

\n setPromo({ ...promo, code: e.target.value })} placeholder=\"CODE\" className=\"rounded-lg px-3 py-2 text-sm font-bold outline-none\" style={{ background: theme.secondary, color: theme.text }} />\n

\n setPromo({ ...promo, reward: Number(e.target.value) })} placeholder=\"Reward\" type=\"number\" className=\"flex-1 rounded-lg px-3 py-2 text-sm outline-none\" style={{ background: theme.secondary, color: theme.text }} />\n setPromo({ ...promo, max: Number(e.target.value) })} placeholder=\"Max uses\" type=\"number\" className=\"flex-1 rounded-lg px-3 py-2 text-sm outline-none\" style={{ background: theme.secondary, color: theme.text }} />\n

\n Create Promo\n {promoMsg &&

{promoMsg}

}\n

\n \n\n {/* User search & balance */}\n \n

🔍 User Search & Balance

\n setSearch(e.target.value)} placeholder=\"Telegram ID or username\" className=\"flex-1 rounded-lg px-3 py-2 text-sm outline-none\" style={{ background: theme.secondary, color: theme.text }} />\n Search\n

\n {users && (\n

\n {users.map((u) => (\n

\n @{u.username || u.telegram_id}\n {sym}{Number(u.balance).toFixed(0)}\n

\n ))}\n

\n )}\n

\n setSetBal({ ...setBal, id: e.target.value })} placeholder=\"User ID\" className=\"flex-1 rounded-lg px-3 py-2 text-sm outline-none\" style={{ background: theme.secondary, color: theme.text }} />\n setSetBal({ ...setBal, balance: Number(e.target.value) })} type=\"number\" placeholder=\"Balance\" className=\"w-20 rounded-lg px-3 py-2 text-sm outline-none\" style={{ background: theme.secondary, color: theme.text }} />\n Set\n

\n \n

\n );\n}\n\n// ------------------------------------------------------------------\n// Bootstrap\n// ------------------------------------------------------------------\nconst rootEl = document.getElementById(\"root\");\nif (rootEl) createRoot(rootEl).render();\n","deleted",false,"label",[47,24],"frontend","d9611aa2-b4b6-41f8-a1f9-370eaf4eb0fc",["D",1788480712077],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Gamified Arcade Telegram Mini App with Hono, React, SQLite","imageUrl","userId","84cb2ce8-8f92-484d-b328-40c43207f7bd","pinnedFileId","7565f09e-a7f5-11f1-ba7b-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","01a069c1-3a3d-73b9-88b4-cd9f69fa1f0d","tursoName","d9611aa2b4b641f8a1f9370eaf4eb0fc","tursoHostname","d9611aa2b4b641f8a1f9370eaf4eb0fc-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789526460011],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_107":102},"org",{"_9":10,"_101":102,"_103":102,"_58":59,"_104":105,"_106":44},"branch",{"_37":91,"_11":92,"_22":30,"_93":48,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":12,"_100":10},"isOwned",9,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","ctx",{"_84":-5,"_141":142,"_143":144,"_145":146,"_147":44,"_148":44,"_149":44,"_150":34,"_151":-5,"_152":-7,"_153":-7,"_154":38,"_155":44,"_156":44,"_157":-5,"_158":44,"_159":44,"_160":44,"_161":-5},"ENV",{"_112":113,"_114":115,"_116":92,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140},"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"]