{title}

\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","label",[163],"4dab2972-6d6b-4af5-92a4-0363a7889bc3","README.md","01a0827a-670f-77c6-9eed-487108e50e6a",["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",[175],"2b87f081-726c-4a5a-814c-bfee7f2fb5c2","01a0827a-670f-77c6-9eed-445d199ce0e5",["D",1788895454910],"directory",[91],"pulls","branches","forks","envVars",{"_192":26,"_194":26},"connections",{"_192":26,"_193":26},"count","unfilledCount","emptyCount",{"_33":180,"_13":91,"_68":181,"_43":-5,"_35":36,"_164":40,"_166":85,"_37":231,"_39":26,"_71":183,"_170":-5,"_73":24,"_172":-5,"_202":232,"_17":233},{"_33":224,"_13":225,"_68":226,"_43":181,"_35":36,"_164":40,"_166":85,"_37":227,"_39":26,"_71":21,"_170":228,"_73":24,"_172":-5,"_202":229,"_17":230},{"_33":216,"_13":217,"_68":218,"_43":181,"_35":36,"_164":219,"_166":85,"_37":220,"_39":40,"_71":21,"_170":221,"_73":24,"_172":-5,"_202":222,"_17":223},{"_33":208,"_13":209,"_68":210,"_43":181,"_35":36,"_164":211,"_166":85,"_37":212,"_39":40,"_71":72,"_170":213,"_73":24,"_172":-5,"_202":214,"_17":215},{"_33":174,"_13":175,"_68":176,"_43":-5,"_35":36,"_164":124,"_166":85,"_37":205,"_39":40,"_71":21,"_170":178,"_73":24,"_172":-5,"_202":206,"_17":207},{"_33":162,"_13":163,"_68":97,"_43":-5,"_35":36,"_164":165,"_166":85,"_37":201,"_39":168,"_71":169,"_170":171,"_73":24,"_172":-5,"_202":203,"_17":204},["D",1788895842920],"children",[],[163],["D",1788895883470],[],[175],"f8ef6c0b-6818-4db5-8187-087e7e8e1dba","game.js","44ab2220-abbb-11f1-b257-1607ee4eb77e",7,["D",1788895740955],"// Merge Blossom — client game logic (vanilla JS, no build step).\n\nconst SIZE = 4;\nconst STAGES = [\"🌱\", \"🌿\", \"🍀\", \"🌷\", \"🌹\", \"🌸\", \"🌺\", \"🏵️\", \"💐\", \"🌼\", \"✨\"];\n\nconst root = document.getElementById(\"app\");\nlet player = JSON.parse(root.dataset.player);\ndelete root.dataset.player;\n\nlet board = []; // { id, value, r, c } list\nlet score = 0;\nlet combo = 0;\nlet over = false;\nlet idCounter = 1;\n\nfunction emptyBoard() {\n return Array.from({ length: SIZE }, () => Array(SIZE).fill(null));\n}\nlet grid = emptyBoard();\n\nfunction stageForValue(value) {\n const idx = Math.round(Math.log2(value)) - 1;\n return STAGES[Math.min(idx, STAGES.length - 1)];\n}\n\nfunction tileColor(value) {\n const idx = Math.min(Math.round(Math.log2(value)) - 1, 10);\n const hue = 140 - idx * 12; // green -> pink/red as it grows\n const light = Math.max(38, 60 - idx * 2);\n return `hsl(${hue}, 62%, ${light}%)`;\n}\n\nfunction randomEmptyCell() {\n const empties = [];\n for (let r = 0; r < SIZE; r++) {\n for (let c = 0; c < SIZE; c++) {\n if (!grid[r][c]) empties.push([r, c]);\n }\n }\n if (empties.length === 0) return null;\n return empties[Math.floor(Math.random() * empties.length)];\n}\n\nfunction spawnTile() {\n const cell = randomEmptyCell();\n if (!cell) return;\n const [r, c] = cell;\n const value = Math.random() < 0.9 ? 2 : 4;\n const tile = { id: idCounter++, value, r, c, isNew: true, merged: false };\n grid[r][c] = tile;\n}\n\nfunction cloneGridState() {\n return grid.map((row) => row.map((t) => (t ? { ...t } : null)));\n}\n\nfunction startGame() {\n grid = emptyBoard();\n score = 0;\n combo = 0;\n over = false;\n spawnTile();\n spawnTile();\n render();\n}\n\n// --- Move logic ------------------------------------------------------------\n\nfunction slideLine(line) {\n // line: array of tile-or-null, length SIZE, moving toward index 0\n const tiles = line.filter(Boolean);\n const result = [];\n let gained = 0;\n let merges = 0;\n for (let i = 0; i < tiles.length; i++) {\n const t = tiles[i];\n t.isNew = false;\n if (i < tiles.length - 1 && tiles[i + 1].value === t.value) {\n const merged = { id: idCounter++, value: t.value * 2, isNew: false, merged: true };\n gained += merged.value;\n merges++;\n result.push(merged);\n i++; // skip the consumed tile\n } else {\n t.merged = false;\n result.push(t);\n }\n }\n while (result.length < SIZE) result.push(null);\n return { result, gained, merges };\n}\n\nfunction moveGrid(direction) {\n const before = JSON.stringify(grid.map((row) => row.map((t) => t?.value ?? 0)));\n let totalGained = 0;\n let totalMerges = 0;\n\n for (let i = 0; i < SIZE; i++) {\n let line;\n if (direction === \"left\") line = grid[i].slice();\n else if (direction === \"right\") line = grid[i].slice().reverse();\n else if (direction === \"up\") line = grid.map((row) => row[i]);\n else line = grid.map((row) => row[i]).reverse();\n\n const { result, gained, merges } = slideLine(line);\n totalGained += gained;\n totalMerges += merges;\n\n if (direction === \"left\") grid[i] = result;\n else if (direction === \"right\") grid[i] = result.reverse();\n else if (direction === \"up\") result.forEach((t, r) => (grid[r][i] = t));\n else result.reverse().forEach((t, r) => (grid[r][i] = t));\n }\n\n // reassign r/c coordinates\n for (let r = 0; r < SIZE; r++) {\n for (let c = 0; c < SIZE; c++) {\n if (grid[r][c]) {\n grid[r][c].r = r;\n grid[r][c].c = c;\n }\n }\n }\n\n const after = JSON.stringify(grid.map((row) => row.map((t) => t?.value ?? 0)));\n const moved = before !== after;\n\n if (moved) {\n if (totalMerges > 0) {\n combo += 1;\n const comboBonus = Math.round(totalGained * (combo - 1) * 0.15);\n totalGained += comboBonus;\n } else {\n combo = 0;\n }\n score += totalGained;\n spawnTile();\n }\n\n return moved;\n}\n\nfunction canMove() {\n for (let r = 0; r < SIZE; r++) {\n for (let c = 0; c < SIZE; c++) {\n if (!grid[r][c]) return true;\n const v = grid[r][c].value;\n if (c < SIZE - 1 && grid[r][c + 1] && grid[r][c + 1].value === v) return true;\n if (r < SIZE - 1 && grid[r + 1][c] && grid[r + 1][c].value === v) return true;\n }\n }\n return false;\n}\n\n// --- Rendering ---------------------------------------------------------\n\nfunction el(tag, className, attrs) {\n const e = document.createElement(tag);\n if (className) e.className = className;\n if (attrs) Object.entries(attrs).forEach(([k, v]) => (e[k] = v));\n return e;\n}\n\nfunction applySkinTheme() {\n const skin = player.skins[player.activeSkin] || player.skins.garden;\n document.documentElement.style.setProperty(\"--bg\", skin.bg);\n document.documentElement.style.setProperty(\"--accent\", skin.accent);\n}\n\nlet boardEl, scoreEl, bestEl, petalEl, gemEl, comboBadge, overlay, toastEl;\n\nfunction buildLayout() {\n root.innerHTML = \"\";\n\n const header = el(\"div\", \"header\");\n const title = el(\"h1\", \"title\");\n title.textContent = \"🌸 Merge Blossom\";\n const currencies = el(\"div\", \"currencies\");\n petalEl = el(\"button\", \"pill\");\n petalEl.onclick = openShop;\n gemEl = el(\"button\", \"pill\");\n gemEl.onclick = openShop;\n currencies.append(petalEl, gemEl);\n header.append(title, currencies);\n\n const scoreboard = el(\"div\", \"scoreboard\");\n const scoreCard = el(\"div\", \"score-card\");\n scoreCard.innerHTML = '

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",[],[91,209],"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",[],[91,217],"efc45838-785c-4d8f-a57a-248b312aa885","favicon.svg","01a0827a-670f-77c6-9eed-43b843d1043e",["D",1788895454910],"\n",[],[91,225],["D",1788895454910],[196,197,198],[91],["D",1788895454910],["D",1789504908499],{"_11":12,"_138":76},{"_11":12,"_133":134,"_75":76,"_30":74,"_135":136,"_137":24},{"_39":124,"_13":16,"_33":36,"_125":87,"_126":-5,"_127":-5,"_128":-5,"_129":-5,"_130":-5,"_131":14,"_132":12},"ctx",{"_54":-5,"_156":272,"_273":274,"_275":276,"_277":24,"_278":24,"_279":24,"_280":85,"_281":-5,"_282":-7,"_283":-7,"_284":26,"_285":24,"_286":24,"_287":-5,"_288":24,"_289":24,"_290":24,"_291":-5},"ENV",{"_243":244,"_245":246,"_247":16,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · counter.ts