{title}

Score

';\n scoreEl = el(\"div\", \"value\");\n scoreCard.append(scoreEl);\n const bestCard = el(\"div\", \"score-card\");\n bestCard.innerHTML = '

Best

';\n bestEl = el(\"div\", \"value\");\n bestCard.append(bestEl);\n scoreboard.append(scoreCard, bestCard);\n\n const boardWrap = el(\"div\", \"board-wrap\");\n boardEl = el(\"div\", \"board\");\n boardWrap.append(boardEl);\n comboBadge = el(\"div\", \"combo-badge\");\n comboBadge.style.display = \"none\";\n boardWrap.append(comboBadge);\n\n const hint = el(\"div\", \"hint\");\n hint.textContent = \"Swipe or use arrow keys — merge matching blooms.\";\n\n const actions = el(\"div\", \"actions\");\n const newGameBtn = el(\"button\", \"btn secondary\");\n newGameBtn.textContent = \"New Game\";\n newGameBtn.onclick = () => startGame();\n const shopBtn = el(\"button\", \"btn\");\n shopBtn.textContent = \"🛍️ Shop\";\n shopBtn.onclick = openShop;\n actions.append(newGameBtn, shopBtn);\n\n root.append(header, scoreboard, boardWrap, hint, actions);\n\n overlay = el(\"div\", \"overlay\");\n overlay.hidden = true;\n overlay.onclick = (e) => {\n if (e.target === overlay) closeOverlay();\n };\n document.body.append(overlay);\n\n toastEl = el(\"div\", \"toast\");\n document.body.append(toastEl);\n\n // background cells\n for (let i = 0; i < SIZE * SIZE; i++) boardEl.append(el(\"div\", \"cell-bg\"));\n}\n\nfunction render() {\n applySkinTheme();\n scoreEl.textContent = score;\n bestEl.textContent = Math.max(player.bestScore, score);\n petalEl.textContent = `🌷 ${player.petals}`;\n gemEl.textContent = `💎 ${player.gems}`;\n\n if (combo > 1) {\n comboBadge.style.display = \"block\";\n comboBadge.textContent = `x${combo} combo`;\n } else {\n comboBadge.style.display = \"none\";\n }\n\n // remove old tile elements (keep the SIZE*SIZE cell-bg divs)\n Array.from(boardEl.querySelectorAll(\".tile\")).forEach((n) => n.remove());\n\n const rect = boardEl.getBoundingClientRect();\n const gap = 8;\n const cellSize = (rect.width - gap * (SIZE - 1)) / SIZE;\n\n for (let r = 0; r < SIZE; r++) {\n for (let c = 0; c < SIZE; c++) {\n const t = grid[r][c];\n if (!t) continue;\n const tileEl = el(\"div\", \"tile\" + (t.isNew ? \" spawn\" : \"\") + (t.merged ? \" merged\" : \"\"));\n tileEl.style.width = `${cellSize}px`;\n tileEl.style.height = `${cellSize}px`;\n tileEl.style.left = `${c * (cellSize + gap)}px`;\n tileEl.style.top = `${r * (cellSize + gap)}px`;\n tileEl.style.background = tileColor(t.value);\n const emoji = el(\"div\", \"emoji\");\n emoji.textContent = stageForValue(t.value);\n const val = el(\"div\", \"val\");\n val.textContent = t.value;\n tileEl.append(emoji, val);\n boardEl.append(tileEl);\n }\n }\n\n if (!canMove() && !over) {\n over = true;\n setTimeout(() => submitGameOver(), 260);\n }\n}\n\n// --- Game over / scoring ------------------------------------------------\n\nasync function submitGameOver() {\n try {\n const res = await fetch(\"/api/game-over\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ score }),\n });\n const data = await res.json();\n player = { ...player, ...data };\n showGameOverModal(data.petalsEarned || 0);\n } catch (err) {\n showGameOverModal(0);\n }\n}\n\nfunction showGameOverModal(petalsEarned) {\n overlay.innerHTML = \"\";\n const modal = el(\"div\", \"modal\");\n modal.innerHTML = `\n

Game Over 🌼

Final score: ${score}

Best score: ${Math.max(player.bestScore, score)}

🌷 +${petalsEarned} petals earned

\n `;\n const playAgain = el(\"button\", \"btn\");\n playAgain.style.width = \"100%\";\n playAgain.style.marginTop = \"10px\";\n playAgain.textContent = \"Play Again\";\n playAgain.onclick = () => {\n closeOverlay();\n startGame();\n };\n modal.append(playAgain);\n overlay.append(modal);\n overlay.hidden = false;\n}\n\nfunction closeOverlay() {\n overlay.hidden = true;\n overlay.innerHTML = \"\";\n}\n\n// --- Shop -----------------------------------------------------------------\n\nfunction openShop() {\n overlay.innerHTML = \"\";\n const modal = el(\"div\", \"modal\");\n const closeBtn = el(\"button\", \"close-btn\");\n closeBtn.textContent = \"×\";\n closeBtn.onclick = closeOverlay;\n modal.append(closeBtn);\n\n const h2 = el(\"h2\");\n h2.textContent = \"🛍️ Skin Shop\";\n modal.append(h2);\n\n const p = el(\"p\");\n p.textContent = \"Cosmetic skins only — no gameplay advantage. Earn 🌷 petals by playing, or buy 💎 gems.\";\n modal.append(p);\n\n const grid = el(\"div\", \"skin-grid\");\n Object.entries(player.skins).forEach(([id, skin]) => {\n const unlocked = player.unlockedSkins.includes(id);\n const active = player.activeSkin === id;\n const card = el(\"div\", \"skin-card\" + (active ? \" active\" : \"\") + (!unlocked ? \" locked\" : \"\"));\n card.style.background = \"#f4f6f4\";\n const swatch = el(\"div\", \"skin-swatch\");\n swatch.style.background = skin.bg;\n card.append(swatch);\n const name = el(\"div\", \"name\");\n name.textContent = skin.name;\n card.append(name);\n const cost = el(\"div\", \"cost\");\n cost.textContent = unlocked ? (active ? \"Active\" : \"Tap to select\") : skin.currency === \"free\" ? \"Free\" : `${skin.currency === \"gems\" ? \"💎\" : \"🌷\"} ${skin.cost}`;\n card.append(cost);\n card.onclick = () => handleSkinClick(id, skin, unlocked);\n grid.append(card);\n });\n modal.append(grid);\n\n if (player.shopEnabled) {\n const h3 = el(\"h2\");\n h3.textContent = \"💎 Buy Gems\";\n modal.append(h3);\n const packList = el(\"div\", \"pack-list\");\n Object.entries(player.packs).forEach(([id, pack]) => {\n const card = el(\"div\", \"pack-card\");\n const name = el(\"div\", \"name\");\n name.textContent = pack.label;\n const price = el(\"div\", \"price\");\n price.textContent = `$${(pack.price / 100).toFixed(2)}`;\n const buyBtn = el(\"button\");\n buyBtn.textContent = \"Buy\";\n buyBtn.onclick = () => buyPack(id);\n const right = el(\"div\");\n right.style.display = \"flex\";\n right.style.alignItems = \"center\";\n right.style.gap = \"10px\";\n right.append(price, buyBtn);\n card.append(name, right);\n packList.append(card);\n });\n modal.append(packList);\n } else {\n const note = el(\"div\", \"shop-disabled-note\");\n note.textContent = \"Gem purchases are coming soon — earn petals by playing for now.\";\n modal.append(note);\n }\n\n overlay.append(modal);\n overlay.hidden = false;\n}\n\nasync function handleSkinClick(id, skin, unlocked) {\n if (unlocked) {\n const res = await fetch(\"/api/shop/select\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ skinId: id }),\n });\n if (res.ok) {\n player = await res.json();\n applySkinTheme();\n openShop();\n }\n return;\n }\n const res = await fetch(\"/api/shop/unlock\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ skinId: id }),\n });\n const data = await res.json();\n if (!res.ok) {\n showToast(data.error || \"Could not unlock that skin.\");\n return;\n }\n player = data;\n showToast(`Unlocked ${skin.name}!`);\n openShop();\n}\n\nasync function buyPack(packId) {\n const res = await fetch(\"/api/checkout\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ packId }),\n });\n const data = await res.json();\n if (data.url) {\n window.location.href = data.url;\n } else {\n showToast(data.error || \"Checkout unavailable right now.\");\n }\n}\n\nfunction showToast(msg) {\n toastEl.textContent = msg;\n toastEl.classList.add(\"show\");\n setTimeout(() => toastEl.classList.remove(\"show\"), 2200);\n}\n\n// --- Input ------------------------------------------------------------\n\nconst KEY_MAP = { ArrowLeft: \"left\", ArrowRight: \"right\", ArrowUp: \"up\", ArrowDown: \"down\" };\n\nfunction handleMove(direction) {\n if (over || !overlay.hidden) return;\n const moved = moveGrid(direction);\n if (moved) render();\n}\n\nwindow.addEventListener(\"keydown\", (e) => {\n const dir = KEY_MAP[e.key];\n if (dir) {\n e.preventDefault();\n handleMove(dir);\n }\n});\n\nlet touchStartX = 0, touchStartY = 0;\ndocument.addEventListener(\"touchstart\", (e) => {\n touchStartX = e.touches[0].clientX;\n touchStartY = e.touches[0].clientY;\n}, { passive: true });\n\ndocument.addEventListener(\"touchend\", (e) => {\n const dx = e.changedTouches[0].clientX - touchStartX;\n const dy = e.changedTouches[0].clientY - touchStartY;\n if (Math.abs(dx) < 24 && Math.abs(dy) < 24) return;\n if (Math.abs(dx) > Math.abs(dy)) {\n handleMove(dx > 0 ? \"right\" : \"left\");\n } else {\n handleMove(dy > 0 ? \"down\" : \"up\");\n }\n}, { passive: true });\n\n// --- Boot ----------------------------------------------------------------\n\nbuildLayout();\napplySkinTheme();\n\nconst params = new URLSearchParams(window.location.search);\nif (params.get(\"purchase\") === \"1\") {\n fetch(\"/api/me\").then((r) => r.json()).then((data) => {\n player = { ...player, ...data };\n render();\n showToast(\"💎 Gems added — thanks for supporting Merge Blossom!\");\n });\n window.history.replaceState({}, \"\", \"/\");\n} else if (params.get(\"purchase\") === \"cancelled\") {\n window.history.replaceState({}, \"\", \"/\");\n}\n\nwindow.addEventListener(\"resize\", render);\n\nstartGame();\n","deleted",false,"label",[19,38],"5b339a44-d7d1-400b-9ceb-5eb8acc36aa7","game.css","43a53faa-abbb-11f1-a1ca-1607ee4eb77e",6,["D",1788895694872],":root {\n --bg: linear-gradient(160deg,#eafff0,#d7f5e3);\n --accent: #3fae6a;\n --ink: #21301f;\n --card: #ffffffcc;\n color-scheme: light;\n}\n\n* { box-sizing: border-box; }\n\nhtml, body {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background: var(--bg);\n color: var(--ink);\n transition: background 0.4s ease;\n}\n\n#app {\n max-width: 480px;\n margin: 0 auto;\n padding: 16px 16px 40px;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.title {\n font-size: 1.5rem;\n font-weight: 800;\n margin: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.currencies {\n display: flex;\n gap: 8px;\n}\n\n.pill {\n background: var(--card);\n border-radius: 999px;\n padding: 6px 12px;\n font-weight: 700;\n font-size: 0.9rem;\n display: flex;\n align-items: center;\n gap: 4px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n border: none;\n cursor: pointer;\n}\n\n.scoreboard {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.score-card {\n flex: 1;\n background: var(--card);\n border-radius: 12px;\n padding: 10px 12px;\n text-align: center;\n box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n}\n\n.score-card .label {\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n opacity: 0.65;\n}\n\n.score-card .value {\n font-size: 1.3rem;\n font-weight: 800;\n font-variant-numeric: tabular-nums;\n}\n\n.board-wrap {\n position: relative;\n aspect-ratio: 1;\n background: var(--card);\n border-radius: 18px;\n padding: 8px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.10);\n touch-action: none;\n user-select: none;\n}\n\n.board {\n position: relative;\n width: 100%;\n height: 100%;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: repeat(4, 1fr);\n gap: 8px;\n}\n\n.cell-bg {\n background: rgba(0,0,0,0.06);\n border-radius: 12px;\n}\n\n.tile {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n border-radius: 12px;\n font-weight: 800;\n color: white;\n transition: left 0.11s ease, top 0.11s ease, transform 0.12s ease, opacity 0.12s ease;\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n}\n\n.tile .emoji { font-size: 1.6rem; line-height: 1; }\n.tile .val { font-size: 0.7rem; opacity: 0.9; margin-top: 2px; }\n\n.tile.spawn { animation: spawn 0.18s ease; }\n.tile.merged { animation: pop 0.18s ease; }\n\n@keyframes spawn {\n from { transform: scale(0.3); opacity: 0; }\n to { transform: scale(1); opacity: 1; }\n}\n@keyframes pop {\n 0% { transform: scale(1); }\n 40% { transform: scale(1.18); }\n 100% { transform: scale(1); }\n}\n\n.hint {\n text-align: center;\n font-size: 0.8rem;\n opacity: 0.6;\n margin-top: 10px;\n}\n\n.actions {\n display: flex;\n gap: 8px;\n margin-top: 14px;\n}\n\n.btn {\n flex: 1;\n border: none;\n border-radius: 12px;\n padding: 12px;\n font-weight: 700;\n font-size: 0.95rem;\n cursor: pointer;\n color: white;\n background: var(--accent);\n}\n\n.btn.secondary {\n background: var(--card);\n color: var(--ink);\n}\n\n.overlay {\n position: fixed;\n inset: 0;\n background: rgba(20,20,20,0.55);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n z-index: 50;\n}\n\n.overlay[hidden] { display: none; }\n\n.modal {\n background: white;\n border-radius: 18px;\n padding: 24px;\n max-width: 400px;\n width: 100%;\n max-height: 85vh;\n overflow-y: auto;\n color: #21301f;\n}\n\n.modal h2 {\n margin-top: 0;\n}\n\n.skin-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n margin: 12px 0;\n}\n\n.skin-card {\n border-radius: 14px;\n padding: 12px;\n text-align: center;\n cursor: pointer;\n border: 3px solid transparent;\n position: relative;\n}\n\n.skin-card.active { border-color: #333; }\n.skin-card.locked { opacity: 0.55; }\n\n.skin-card .name { font-weight: 800; font-size: 0.9rem; margin-top: 6px; color: #21301f; }\n.skin-card .cost { font-size: 0.75rem; color: #21301f; opacity: 0.75; }\n.skin-swatch { width: 100%; height: 44px; border-radius: 10px; }\n\n.pack-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin: 12px 0;\n}\n\n.pack-card {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #f4f6f4;\n border-radius: 14px;\n padding: 12px 16px;\n}\n\n.pack-card .name { font-weight: 700; }\n.pack-card .price { font-weight: 800; color: var(--accent); }\n\n.pack-card button {\n border: none;\n background: var(--accent);\n color: white;\n border-radius: 10px;\n padding: 8px 14px;\n font-weight: 700;\n cursor: pointer;\n}\n\n.toast {\n position: fixed;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n background: #21301f;\n color: white;\n padding: 10px 18px;\n border-radius: 999px;\n font-size: 0.9rem;\n z-index: 100;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.25s ease, transform 0.25s ease;\n}\n\n.toast.show {\n opacity: 1;\n transform: translateX(-50%) translateY(-6px);\n}\n\n.close-btn {\n position: absolute;\n top: 14px;\n right: 14px;\n background: none;\n border: none;\n font-size: 1.4rem;\n cursor: pointer;\n color: #999;\n}\n\n.combo-badge {\n position: absolute;\n top: -10px;\n right: -10px;\n background: #ffb800;\n color: #402d00;\n font-size: 0.65rem;\n font-weight: 800;\n padding: 2px 6px;\n border-radius: 999px;\n}\n\n.shop-disabled-note {\n font-size: 0.8rem;\n opacity: 0.7;\n text-align: center;\n margin-top: 8px;\n}\n\n@media (prefers-color-scheme: dark) {\n html, body { color: #21301f; }\n}\n",[19,61],"efc45838-785c-4d8f-a57a-248b312aa885","favicon.svg","01a0827a-670f-77c6-9eed-43b843d1043e",["D",1788895454910],0,"\n",[19,68],"2b87f081-726c-4a5a-814c-bfee7f2fb5c2",["D",1788895454910],"directory",[19],{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":100,"_17":71,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":101,"_18":102},{"_36":92,"_13":93,"_39":94,"_41":-5,"_43":44,"_45":95,"_47":48,"_49":96,"_17":51,"_52":24,"_54":97,"_56":57,"_58":-5,"_89":98,"_18":99},{"_36":81,"_13":82,"_39":83,"_41":-5,"_43":44,"_45":84,"_47":48,"_49":85,"_17":86,"_52":87,"_54":88,"_56":57,"_58":-5,"_89":90,"_18":91},"7e2b82cb-145e-47c8-92d4-b6bf7e24dd50","index.tsx","01a0827a-670f-77c6-9eed-4e9341a5bb91",9,["D",1788895842920],3,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport { getCookie, setCookie } from \"npm:hono@4/cookie\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n// @ts-ignore\nimport Stripe from \"npm:stripe\";\n\n// ---------------------------------------------------------------------------\n// Setup\n// ---------------------------------------------------------------------------\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS players (\n id TEXT PRIMARY KEY,\n petals INTEGER NOT NULL DEFAULT 0,\n gems INTEGER NOT NULL DEFAULT 0,\n best_score INTEGER NOT NULL DEFAULT 0,\n games_played INTEGER NOT NULL DEFAULT 0,\n unlocked_skins TEXT NOT NULL DEFAULT '[\"garden\"]',\n active_skin TEXT NOT NULL DEFAULT 'garden',\n created_at TEXT NOT NULL\n)`);\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS purchases (\n id TEXT PRIMARY KEY,\n player_id TEXT NOT NULL,\n pack_id TEXT NOT NULL,\n gems INTEGER NOT NULL,\n stripe_session_id TEXT UNIQUE,\n status TEXT NOT NULL DEFAULT 'pending',\n created_at TEXT NOT NULL\n)`);\n\nconst STRIPE_KEY = Deno.env.get(\"STRIPE_TEST_API_KEY\");\nconst stripe = STRIPE_KEY ? new Stripe(STRIPE_KEY) : null;\n\n// Cosmetic skins. \"cost\" is in petals (soft currency, earned by playing) or\n// gems (hard currency, purchased with real money). Purely cosmetic — no\n// gameplay advantage, so nobody is paying to win.\nconst SKINS: Record = {\n garden: { name: \"Garden\", currency: \"free\", cost: 0, bg: \"linear-gradient(160deg,#eafff0,#d7f5e3)\", accent: \"#3fae6a\" },\n sunset: { name: \"Sunset\", currency: \"petals\", cost: 150, bg: \"linear-gradient(160deg,#fff0e0,#ffd9c2)\", accent: \"#e8703a\" },\n ocean: { name: \"Ocean\", currency: \"petals\", cost: 300, bg: \"linear-gradient(160deg,#e3f3ff,#c9e8ff)\", accent: \"#2b7fd6\" },\n galaxy: { name: \"Galaxy\", currency: \"gems\", cost: 200, bg: \"linear-gradient(160deg,#241b4e,#3a2a6d)\", accent: \"#b78bff\" },\n candy: { name: \"Candy\", currency: \"gems\", cost: 350, bg: \"linear-gradient(160deg,#ffe0f0,#ffc2e6)\", accent: \"#e84fa0\" },\n};\n\nconst GEM_PACKS: Record = {\n small: { gems: 100, price: 99, label: \"100 Gems\" },\n medium: { gems: 550, price: 499, label: \"550 Gems (+10% bonus)\" },\n large: { gems: 1200, price: 999, label: \"1200 Gems (+20% bonus)\" },\n};\n\nfunction uid() {\n return crypto.randomUUID();\n}\n\n// Resolve the player id once per request (getCookie can't see a cookie set\n// earlier in the same request via setCookie, so routes must not re-derive\n// the pid mid-handler — that previously created a duplicate player row).\nasync function resolvePid(c: any): Promise {\n let pid = c.get(\"pid\");\n if (pid) return pid;\n pid = getCookie(c, \"pid\");\n if (!pid) {\n pid = uid();\n setCookie(c, \"pid\", pid, { maxAge: 60 * 60 * 24 * 399, httpOnly: true, sameSite: \"Lax\", path: \"/\" });\n }\n c.set(\"pid\", pid);\n return pid;\n}\n\nasync function getOrCreatePlayer(c: any): Promise {\n const pid = await resolvePid(c);\n const res = await sqlite.execute({ sql: \"SELECT * FROM players WHERE id = ?\", args: [pid] });\n if (res.rows.length === 0) {\n await sqlite.execute({\n sql: \"INSERT INTO players (id, petals, gems, best_score, games_played, unlocked_skins, active_skin, created_at) VALUES (?, 0, 0, 0, 0, ?, 'garden', ?)\",\n args: [pid, JSON.stringify([\"garden\"]), new Date().toISOString()],\n });\n return { id: pid, petals: 0, gems: 0, best_score: 0, games_played: 0, unlocked_skins: [\"garden\"], active_skin: \"garden\" };\n }\n const row = res.rows[0] as any;\n return { ...row, unlocked_skins: JSON.parse(row.unlocked_skins as string) };\n}\n\nfunction playerJSON(p: any) {\n return {\n petals: p.petals,\n gems: p.gems,\n bestScore: p.best_score,\n gamesPlayed: p.games_played,\n unlockedSkins: p.unlocked_skins,\n activeSkin: p.active_skin,\n skins: SKINS,\n packs: GEM_PACKS,\n shopEnabled: Boolean(stripe),\n };\n}\n\n// ---------------------------------------------------------------------------\n// Layout\n// ---------------------------------------------------------------------------\n\nconst Layout = ({ title, children }: { title: string; children: any }) => (\n \n \n {title}\n \n \n \n \n \n \n {children}\n \n \n);\n\nconst app = new Hono();\n\n// ---------------------------------------------------------------------------\n// Pages\n// ---------------------------------------------------------------------------\n\napp.get(\"/\", async (c) => {\n const player = await getOrCreatePlayer(c);\n return c.html(\n \n

\n \n ,\n );\n});\n\napp.get(\"/confirmation\", async (c) => {\n const sessionId = c.req.query(\"session_id\");\n const player = await getOrCreatePlayer(c);\n if (stripe && sessionId) {\n try {\n const session = await stripe.checkout.sessions.retrieve(sessionId);\n if (session.payment_status === \"paid\") {\n // Idempotent fulfillment: only credit once per session id.\n const existing = await sqlite.execute({\n sql: \"SELECT * FROM purchases WHERE stripe_session_id = ?\",\n args: [sessionId],\n });\n if (existing.rows.length && (existing.rows[0] as any).status !== \"fulfilled\") {\n const purchase = existing.rows[0] as any;\n await sqlite.execute({\n sql: \"UPDATE players SET gems = gems + ? WHERE id = ?\",\n args: [purchase.gems, player.id],\n });\n await sqlite.execute({\n sql: \"UPDATE purchases SET status = 'fulfilled' WHERE stripe_session_id = ?\",\n args: [sessionId],\n });\n }\n }\n } catch (err) {\n console.error(\"confirmation error\", err);\n }\n }\n return c.redirect(\"/?purchase=1\");\n});\n\n// ---------------------------------------------------------------------------\n// API\n// ---------------------------------------------------------------------------\n\napp.get(\"/api/me\", async (c) => {\n const player = await getOrCreatePlayer(c);\n return c.json(playerJSON(player));\n});\n\napp.post(\"/api/game-over\", async (c) => {\n const player = await getOrCreatePlayer(c);\n const body = await c.req.json().catch(() => ({}));\n const score = Math.max(0, Math.floor(Number(body.score) || 0));\n const petalsEarned = Math.floor(score / 50);\n const newBest = Math.max(player.best_score, score);\n await sqlite.execute({\n sql: \"UPDATE players SET petals = petals + ?, best_score = ?, games_played = games_played + 1 WHERE id = ?\",\n args: [petalsEarned, newBest, player.id],\n });\n const updated = await getOrCreatePlayer(c);\n return c.json({ ...playerJSON(updated), petalsEarned });\n});\n\napp.post(\"/api/shop/unlock\", async (c) => {\n const player = await getOrCreatePlayer(c);\n const body = await c.req.json().catch(() => ({}));\n const skinId = String(body.skinId || \"\");\n const skin = SKINS[skinId];\n if (!skin) return c.json({ error: \"Unknown skin\" }, 400);\n if (player.unlocked_skins.includes(skinId)) {\n return c.json({ error: \"Already unlocked\" }, 400);\n }\n if (skin.currency === \"gems\" && player.gems < skin.cost) {\n return c.json({ error: \"Not enough gems\" }, 400);\n }\n if (skin.currency === \"petals\" && player.petals < skin.cost) {\n return c.json({ error: \"Not enough petals\" }, 400);\n }\n const newUnlocked = [...player.unlocked_skins, skinId];\n if (skin.currency === \"gems\") {\n await sqlite.execute({\n sql: \"UPDATE players SET gems = gems - ?, unlocked_skins = ? WHERE id = ?\",\n args: [skin.cost, JSON.stringify(newUnlocked), player.id],\n });\n } else if (skin.currency === \"petals\") {\n await sqlite.execute({\n sql: \"UPDATE players SET petals = petals - ?, unlocked_skins = ? WHERE id = ?\",\n args: [skin.cost, JSON.stringify(newUnlocked), player.id],\n });\n } else {\n await sqlite.execute({\n sql: \"UPDATE players SET unlocked_skins = ? WHERE id = ?\",\n args: [JSON.stringify(newUnlocked), player.id],\n });\n }\n const updated = await getOrCreatePlayer(c);\n return c.json(playerJSON(updated));\n});\n\napp.post(\"/api/shop/select\", async (c) => {\n const player = await getOrCreatePlayer(c);\n const body = await c.req.json().catch(() => ({}));\n const skinId = String(body.skinId || \"\");\n if (!SKINS[skinId] || !player.unlocked_skins.includes(skinId)) {\n return c.json({ error: \"Not unlocked\" }, 400);\n }\n await sqlite.execute({ sql: \"UPDATE players SET active_skin = ? WHERE id = ?\", args: [skinId, player.id] });\n const updated = await getOrCreatePlayer(c);\n return c.json(playerJSON(updated));\n});\n\napp.post(\"/api/checkout\", async (c) => {\n if (!stripe) return c.json({ error: \"Payments are not configured yet.\" }, 503);\n const player = await getOrCreatePlayer(c);\n const body = await c.req.json().catch(() => ({}));\n const packId = String(body.packId || \"\");\n const pack = GEM_PACKS[packId];\n if (!pack) return c.json({ error: \"Unknown pack\" }, 400);\n\n const url = new URL(c.req.url);\n const session = await stripe.checkout.sessions.create({\n line_items: [\n {\n price_data: {\n currency: \"usd\",\n product_data: { name: `Merge Blossom — ${pack.label}` },\n unit_amount: pack.price,\n },\n quantity: 1,\n },\n ],\n mode: \"payment\",\n success_url: `https://${url.host}/confirmation?session_id={CHECKOUT_SESSION_ID}`,\n cancel_url: `https://${url.host}/?purchase=cancelled`,\n automatic_tax: { enabled: false },\n });\n\n await sqlite.execute({\n sql: \"INSERT INTO purchases (id, player_id, pack_id, gems, stripe_session_id, status, created_at) VALUES (?, ?, ?, ?, ?, 'pending', ?)\",\n args: [uid(), player.id, packId, pack.gems, session.id, new Date().toISOString()],\n });\n\n return c.json({ url: session.url });\n});\n\n// Stripe webhook (belt-and-suspenders fulfillment in addition to /confirmation).\n// Requires STRIPE_WEBHOOK_SECRET to be set; otherwise this route just no-ops.\napp.post(\"/api/stripe-webhook\", async (c) => {\n const webhookSecret = Deno.env.get(\"STRIPE_WEBHOOK_SECRET\");\n if (!stripe || !webhookSecret) return c.json({ ok: true });\n const signature = c.req.header(\"Stripe-Signature\");\n const body = await c.req.text();\n let event;\n try {\n event = await stripe.webhooks.constructEventAsync(body, signature!, webhookSecret);\n } catch (err: any) {\n return c.json({ error: `Webhook Error: ${err.message}` }, 400);\n }\n if (event.type === \"checkout.session.completed\") {\n const session = event.data.object as any;\n const existing = await sqlite.execute({\n sql: \"SELECT * FROM purchases WHERE stripe_session_id = ?\",\n args: [session.id],\n });\n if (existing.rows.length && (existing.rows[0] as any).status !== \"fulfilled\") {\n const purchase = existing.rows[0] as any;\n await sqlite.execute({\n sql: \"UPDATE players SET gems = gems + ? WHERE id = ?\",\n args: [purchase.gems, purchase.player_id],\n });\n await sqlite.execute({\n sql: \"UPDATE purchases SET status = 'fulfilled' WHERE stripe_session_id = ?\",\n args: [session.id],\n });\n }\n }\n return c.json({ ok: true });\n});\n\n// ---------------------------------------------------------------------------\n// Static + misc\n// ---------------------------------------------------------------------------\n\napp.get(\"/public/*\", (c) => serveFile(c.req.path));\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[82],"4dab2972-6d6b-4af5-92a4-0363a7889bc3","README.md","01a0827a-670f-77c6-9eed-487108e50e6a",10,["D",1788895883470],"# Merge Blossom 🌸\n\nA fun, fast merge-puzzle game (2048-style: slide, match, grow blooms) with a\ncosmetic skin shop and real microtransactions via Stripe Checkout.\n\nLive app: this val's HTTP endpoint (see the val's page on val.town for the\nexact URL — click the file `index.tsx` to see it, or check \"Endpoints\").\n\n## How it works\n\n- **Game:** 4x4 sliding merge grid. Arrow keys or swipe. Matching blooms merge\n and grow through stages (seed → sprout → ... → legendary bloom). Combos\n (multiple merges in one move) give a score multiplier.\n- **Soft currency (🌷 Petals):** earned automatically at the end of every game\n (`floor(score / 50)`). Spend them on a few of the skins.\n- **Hard currency (💎 Gems):** bought with real money via Stripe Checkout, in\n three packs. Spend them on premium skins.\n- **Skins are 100% cosmetic** — board/tile color themes only. No skin changes\n scoring or gameplay, so nobody is paying to win.\n- **Players** are tracked by an anonymous cookie (`pid`), no login required.\n State (petals, gems, best score, unlocked/active skin) lives in `std/sqlite`.\n\n## Turning on real payments\n\nThe shop UI and free (petal-based) skins work out of the box. Gem purchases\nare disabled until a Stripe **test** (or live) secret key is set:\n\n👉 Add STRIPE_TEST_API_KEY here: https://www.val.town/x/dusty_medic/hono-jsx-starter/environment-variables?key=STRIPE_TEST_API_KEY\n\nOnce that's set, the \"Buy Gems\" section appears in the shop automatically\n(`shopEnabled` flips to `true`) and `/api/checkout` creates real Stripe\nCheckout sessions.\n\nFulfillment (crediting gems after a successful payment) happens two ways,\neither is enough on its own:\n\n1. **`/confirmation` redirect** — Stripe sends the shopper back here after\n checkout; the val verifies the session server-side and credits gems once\n (idempotent on `stripe_session_id`). This works with zero extra setup.\n2. **Webhook** (optional, more robust against a shopper closing the tab\n before the redirect) — point a Stripe webhook at `/api/stripe-webhook`\n for the `checkout.session.completed` event and set:\n\n👉 Add STRIPE_WEBHOOK_SECRET here: https://www.val.town/x/dusty_medic/hono-jsx-starter/environment-variables?key=STRIPE_WEBHOOK_SECRET\n\nSwap `STRIPE_TEST_API_KEY` for a live secret key when ready to charge real\ncards — no code changes needed.\n\n## What's here\n\n```\nindex.tsx Hono app: game page, player/session API, shop, Stripe checkout + webhook\npublic/\n favicon.svg Static asset\n game.css All styling (skin themes are CSS custom properties)\n game.js Client-side game logic (vanilla JS, no build step)\n```\n\n## Data model (`std/sqlite`, val-scoped)\n\n- `players` — id (cookie-based), petals, gems, best_score, games_played,\n unlocked_skins (JSON array), active_skin\n- `purchases` — one row per Stripe Checkout session, used to fulfill gems\n exactly once per payment\n\n## Extending this (Growth phase ideas, not built yet)\n\n- Daily challenge / streaks\n- Leaderboard (would need a display name, currently fully anonymous)\n- Push notifications for \"come back and play\"\n- Real accounts so progress isn't tied to one browser's cookie\n",[],[93],["D",1788895454910],[103,104,105],[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":51,"_47":48,"_49":112,"_17":71,"_52":24,"_54":72,"_56":57,"_58":-5,"_89":113,"_18":114},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":109,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_89":110,"_18":111},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":106,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_89":107,"_18":108},["D",1788895740955],[],[19,38],["D",1788895694872],[],[19,61],["D",1788895454910],[],[19,68],"3997e2b7-461f-451f-bdbc-d43ed593dd8d",["D",1788895454910],"deletedAt","legacyEnvVars","privacy","httpPrivacy","description","Fun merge puzzle game with cosmetic shop","imageUrl","userId","f88a0ee3-b2a2-4b50-b1cd-d6ef9333f8b4","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","01a0633a-cac3-709b-a980-c6cbc53d1693","tursoName","3997e2b7461f451fbdbcd43ed593dd8d","tursoHostname","3997e2b7461f451fbdbcd43ed593dd8d-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789504908499],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_171":167},"org",{"_11":12,"_164":165,"_166":167,"_124":125,"_168":169,"_170":57},"branch",{"_17":95,"_13":16,"_36":44,"_156":115,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":-5,"_162":14,"_163":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Peter Sulzinski","avatar","https://lh3.googleusercontent.com/a/ACg8ocKxS7SIQL-2xeZae3OPJraIhveBUDOK84i99c574FL5C5flzw=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":115,"_13":14,"_49":225,"_117":-5,"_118":57,"_119":19,"_120":19,"_121":122,"_123":-5,"_124":125,"_126":83,"_127":48,"_128":-5,"_129":-5,"_130":71,"_131":132,"_133":134,"_135":136,"_137":226,"_139":-5,"_140":141,"_142":141,"_143":144,"_145":144,"_146":144,"_147":141,"_148":141,"_149":227,"_151":228,"_153":229,"_155":57},[207,211,212],"files",[207,208,209,210,211,212],"counts",{"_198":71,"_199":51,"_200":71,"_32":201,"_202":203},[192,193,194],{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":75,"_17":71,"_52":76,"_54":-5,"_56":57,"_58":-5,"_18":191},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":51,"_47":48,"_49":70,"_17":71,"_52":24,"_54":72,"_56":57,"_58":-5,"_18":197},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_18":196},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":195},[19,38],[19,61],[19,68],"pulls","branches","forks",{"_204":71,"_206":71},"connections",{"_204":71,"_205":71},"count","unfilledCount","emptyCount",{"_36":74,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":100,"_17":71,"_52":76,"_54":-5,"_56":57,"_58":-5,"_89":223,"_18":224},{"_36":67,"_13":68,"_39":69,"_41":42,"_43":44,"_45":51,"_47":48,"_49":112,"_17":71,"_52":24,"_54":72,"_56":57,"_58":-5,"_89":221,"_18":222},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":109,"_17":51,"_52":24,"_54":65,"_56":57,"_58":-5,"_89":219,"_18":220},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":106,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_89":217,"_18":218},{"_36":92,"_13":93,"_39":94,"_41":-5,"_43":44,"_45":95,"_47":48,"_49":96,"_17":51,"_52":24,"_54":97,"_56":57,"_58":-5,"_89":215,"_18":216},{"_36":81,"_13":82,"_39":83,"_41":-5,"_43":44,"_45":84,"_47":48,"_49":85,"_17":86,"_52":87,"_54":88,"_56":57,"_58":-5,"_89":213,"_18":214},[],[82],[],[93],[],[19,38],[],[19,61],[],[19,68],[208,209,210],[19],["D",1788895454910],["D",1789504908499],{"_11":12,"_171":167},{"_11":12,"_164":165,"_166":167,"_124":125,"_168":169,"_170":57},{"_17":95,"_13":16,"_36":44,"_156":115,"_157":-5,"_158":-5,"_159":-5,"_160":-5,"_161":-5,"_162":14,"_163":12},"ctx",{"_149":-5,"_188":263,"_264":265,"_266":267,"_268":57,"_269":57,"_270":57,"_271":48,"_272":-5,"_273":-7,"_274":-7,"_275":71,"_276":57,"_277":57,"_278":-5,"_279":57,"_280":57,"_281":57,"_282":-5},"ENV",{"_234":235,"_236":237,"_238":16,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262},"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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]