{title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_206":207,"_208":209},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":37,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":60,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","public/game.js","latestPath","fileId","44ab2220-abbb-11f1-b257-1607ee4eb77e","name","game.js","fileType","script","content","","// 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","createdAt",["D",1788895740955],"branchVersion","branchId","32c74fc6-0379-41ea-8360-b69a7c8998bb","id","3997e2b7-461f-451f-bdbc-d43ed593dd8d","hono-jsx-starter",["D",1788895454910],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Fun merge puzzle game with cosmetic shop","imageUrl","f88a0ee3-b2a2-4b50-b1cd-d6ef9333f8b4","pinnedFileId","01a0827a-670f-77c6-9eed-4e9341a5bb91","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"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",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",10,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dusty_medic","handle","displayName","Peter Sulzinski","avatar","https://lh3.googleusercontent.com/a/ACg8ocKxS7SIQL-2xeZae3OPJraIhveBUDOK84i99c574FL5C5flzw=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":201,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":202,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":203,"_85":204,"_87":205,"_89":25},"tree",[166,170,171],"files",[166,167,168,169,170,171],"counts",{"_156":64,"_157":140,"_158":64,"_159":160,"_161":162},"contents",[131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":151,"_32":51,"_30":152,"_136":-5,"_42":43,"_41":140,"_138":60,"_39":153,"_13":64,"_34":154,"_36":-5,"_24":25,"_143":-5,"_27":155},{"_44":145,"_32":146,"_30":147,"_136":-5,"_42":43,"_41":140,"_138":25,"_39":148,"_13":64,"_34":20,"_36":149,"_24":25,"_143":-5,"_27":150},{"_44":134,"_32":135,"_30":58,"_136":-5,"_42":43,"_41":137,"_138":25,"_39":139,"_13":140,"_34":141,"_36":142,"_24":25,"_143":-5,"_27":144},"5688c47d-06ff-4916-b2a7-582b48007117","index.tsx","parentId",5,"latest",["D",1788895672184],1,"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\nasync function getOrCreatePlayer(c: any): Promise {\n let pid = getCookie(c, \"pid\");\n if (!pid) {\n pid = uid();\n setCookie(c, \"pid\", pid, { maxAge: 60 * 60 * 24 * 365 * 5, httpOnly: true, sameSite: \"Lax\", path: \"/\" });\n }\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","label",[135],"d038087e-03bc-4e21-a7a0-6c60190cfead","README.md","01a0827a-670f-77c6-9eed-487108e50e6a",["D",1788895454910],"# hono-jsx-starter\n\nA minimal [Hono](https://hono.dev) + Hono JSX starter for Val Town.\nServer-rendered HTML, no build step, no React.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| **[`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter)** *(you're here)* | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| [`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter) | Client-side React SPA with a Hono API backend. |\n\n## What's here\n\n```\nindex.tsx Hono app, Layout, routes\npublic/\n favicon.svg Static asset\n counter.ts Tiny client-side script\n```\n\nThe whole app fits in one file. As you grow it, the natural next moves are:\n\n- Pull `Layout` into its own `.tsx` file once you have 3+ pages.\n- Split routes with `app.route(\"/api\", api)` if `/api/*` grows.\n- Add more files under `public/` — they're served by a single\n `app.get(\"/public/*\", ...)` route.\n\n## Patterns worth knowing\n\n**JSX pragma.** Every `.tsx` file that uses JSX needs this at the top:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\n```\n\n**Server state.** The counter on `/` is `let count = 0` at module scope. It\nlives in memory on the Val Town server and survives across requests — but resets\nwhenever the val restarts (deploys, idle timeouts, etc.). For persistent state,\nswap it for [`std/sqlite`](https://www.val.town/x/std/sqlite) or\n[`std/blob`](https://www.val.town/x/std/blob).\n\n**API routes.** The `Increment` button POSTs to `/api/increment`, which returns\nJSON. Mix server-rendered pages and JSON endpoints in the same Hono app:\n\n```ts\napp.post(\"/api/increment\", (c) => c.json({ count: ++count }));\n```\n\n**Static files.** `serveFile` reads the file by path and serves it with the\nright content-type. `.ts` files are transpiled to JS on request by Val Town — so\nyou can write `public/counter.ts` and reference it as\n`

Diff · v7