Log inSign up

yrg7l18b88

tma-arcade

Public
Gamified Arcade Telegram Mini App with Hono, React, SQLite
gamehonomini-appreacttelegram
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
api.tsx
README.md

🎮 Gamified Arcade — Telegram Mini App

A complete, full-stack Telegram Mini App (TMA) for a gamified arcade platform, built as a single Val Town project.

  • Backend: Hono + std/sqlite (persistent), HMAC-secured Telegram initData auth, provably-fair server-side game logic.
  • Frontend: React 18 + Tailwind (Twind) + Framer Motion, styled with native Telegram theme variables, Haptic Feedback, skeleton loading.
  • Payments: Telegram Stars (XTR) invoice generation + TON option + webhook credit handler.

🔗 Live app

Try the app

🧩 Files

  • api.tsx — Hono backend: auth, config, admin, promo, referrals, payments, webhook, and all three games.
  • frontend/root.tsx — HTML shell (stamps the immutable client entry).
  • frontend/index.tsx — the single-file React client (all screens).

⚙️ Configuration (env vars, with fallback defaults embedded)

VarDefaultPurpose
BOT_TOKENembeddedValidates Telegram initData HMAC SHA-256
ADMIN_TELEGRAM_IDS6819127801Comma-separated admin IDs (admin dashboard access)
PROVIDER_TOKEN_STARSXTRTelegram Stars provider token
BOT_USERNAMEYourArcadeBotUsed to build t.me/bot?start=REF_ID referral links

🛠️ Setup

  1. Set your real BOT_TOKEN and ADMIN_TELEGRAM_IDS in the val's environment variables.
  2. Point your Telegram bot's Mini App URL at the live endpoint (see above).
  3. Set your bot's webhook to …/api/webhook/telegram to receive Stars pre_checkout_query and payment confirmations.

🎲 Games

  • Space Booster — crash simulator. Server picks a crash point via HMAC; eject before it crashes to win bet × multiplier.
  • Color Wheel — 3 sectors: Alpha (x2), Beta (x2), Gamma (x14). Server decides the winning sector.
  • Match Predictor — stake points on fixture outcomes; correct predictions pay out at the odds.

🧑‍💼 Admin Dashboard

Visible only to users whose Telegram ID is in ADMIN_TELEGRAM_IDS:

  • Dynamic Text Studio — edit any UI label (game names, currency symbol, buttons) live in app_config.
  • Promo Code Generator — create codes with reward amount + max activations.
  • User search & balance management.

Demo promo code seeded: WELCOME (+50 ⭐).

🗄️ Database (std/sqlite)

Tables: users, promo_codes, user_promos, app_config, transactions, games_state. All created idempotently with CREATE TABLE IF NOT EXISTS on startup.