${seed.name}

Cost: ${seed.price} coins • Yield: ${seed.yieldKg} kg

\n \n

\n `;\n shopList.appendChild(item);\n });\n\n shopList.querySelectorAll('.buy-btn').forEach(b=>{\n b.addEventListener('click', (e)=>{\n const id = e.currentTarget.dataset.id;\n buySeed(id);\n });\n });\n}\n\nfunction buySeed(id){\n const seed = initialSeeds.find(s=>s.id===id);\n if(!seed) return;\n if(state.coins < seed.price) {\n flashCoins();\n return;\n }\n state.coins -= seed.price;\n state.inventory[id] = (state.inventory[id]||0)+1;\n renderInventory();\n updateHUD();\n}\n\nfunction flashCoins(){\n coinsCount.animate([{transform:'scale(1)'},{transform:'scale(1.08)'},{transform:'scale(1)'}],{duration:300});\n}\n\nexport function renderInventory(){\n inventoryEl.innerHTML = '';\n Object.keys(state.inventory).forEach(id=>{\n const seed = initialSeeds.find(s=>s.id===id);\n const count = state.inventory[id];\n const el = document.createElement('div');\n el.className = 'inv-item';\n el.dataset.id = id;\n if(state.selectedSeed === id) el.classList.add('selected');\n el.innerHTML = `\n

${seed.name.split(' ')[0]}

${count}

\n `;\n el.addEventListener('click', ()=> {\n if(state.selectedSeed === id) state.selectedSeed = null;\n else state.selectedSeed = id;\n renderInventory();\n updateHUD();\n });\n inventoryEl.appendChild(el);\n });\n\n Object.keys(state.crops).forEach(name=>{\n const record = state.crops[name];\n if(!record || record.count === 0) return;\n const multiplier = state.gear.sprinkler ? 1.2 : 1;\n const totalKg = (record.kg * multiplier).toFixed(2);\n const el = document.createElement('div');\n el.className = 'inv-item';\n el.innerHTML = `\n

${name}

${record.count} • ${totalKg} kg

\n `;\n inventoryEl.appendChild(el);\n });\n}\n\nexport function renderGarden(){\n gardenBoard.innerHTML = '';\n gardenBoard.appendChild(canvas);\n state.garden.forEach((cell, idx)=>{\n const cellEl = document.createElement('div');\n cellEl.className = 'grid-cell';\n cellEl.dataset.index = idx;\n const inner = document.createElement('div');\n inner.className = 'cell-inner';\n if(cell.planted){\n const seed = initialSeeds.find(s=>s.id===cell.planted.seedId);\n inner.classList.add(`growth-stage-${Math.min(cell.stage, 3)}`);\n if(cell.stage > cell.planted.growStages) inner.classList.add('ready');\n const dot = document.createElement('div');\n dot.className = 'seed-dot';\n dot.style.background = seed ? seed.color : '#6b8f2b';\n if(cell.planted.expectedKg){\n const sizePx = Math.round(12 + (cell.planted.expectedKg * 40));\n dot.style.width = sizePx + 'px';\n dot.style.height = sizePx + 'px';\n dot.style.borderRadius = sizePx > 20 ? '6px' : '50%';\n }\n if(cell.stage > 1 && cell.stage <= cell.planted.growStages) dot.classList.add('pulse');\n inner.appendChild(dot);\n const elapsed = Date.now() - (cell.planted.plantedAt || 0);\n const totalTime = cell.planted.growStages * 2000;\n const pct = Math.min(100, Math.round((elapsed / totalTime) * 100));\n const progressWrap = document.createElement('div');\n progressWrap.className = 'progress-wrap';\n progressWrap.innerHTML = `

`;\n inner.appendChild(progressWrap);\n } else {\n inner.innerHTML = '

Soil

';\n }\n cellEl.appendChild(inner);\n\n cellEl.addEventListener('pointerdown', (ev)=>{\n ev.preventDefault();\n window.__isPointerDown = true;\n handleCellAction(idx, cellEl, ev);\n try {\n if (typeof cellEl.setPointerCapture === 'function' && ev && ev.pointerId != null) {\n cellEl.setPointerCapture(ev.pointerId);\n }\n } catch (e) {}\n });\n cellEl.addEventListener('pointerenter', ()=>{\n if(window.__isPointerDown) handleCellAction(idx, cellEl);\n });\n cellEl.addEventListener('pointerup', (ev)=>{\n window.__isPointerDown = false;\n try{ cellEl.releasePointerCapture(ev.pointerId); }catch(e){}\n });\n cellEl.addEventListener('pointercancel', ()=> window.__isPointerDown = false);\n\n gardenBoard.appendChild(cellEl);\n });\n\n window.addEventListener('pointerup', ()=> window.__isPointerDown = false);\n resizeCanvas();\n}\n\nfunction handleCellAction(index, el){\n const cell = state.garden[index];\n if(state.selectedGear && state.gear[state.selectedGear]){\n if(cell.planted && cell.stage <= cell.planted.growStages){\n useGearOnCell(state.selectedGear, index);\n el.animate([{transform:'scale(0.98)'},{transform:'scale(1)'}],{duration:180});\n return;\n }\n }\n if(cell.planted && cell.stage > cell.planted.growStages){\n harvest(index);\n return;\n }\n if(!cell.planted && state.selectedSeed){\n plantSeed(index, state.selectedSeed);\n return;\n }\n el.animate([{transform:'scale(1)'},{transform:'scale(0.98)'},{transform:'scale(1)'}],{duration:160});\n}\n\n/* Gear shop rendering */\nexport function renderGearShop(){\n gearList.innerHTML = '';\n gearItems.forEach(g=>{\n const item = document.createElement('div');\n item.className = 'shop-item';\n const owned = state.gear[g.id];\n item.innerHTML = `\n

${g.id==='sprinkler'?'💧':'🪣'}

${g.name}${owned ? ' • Owned' : ''}

${g.desc}

\n ${owned ? `` : ``}\n

\n `;\n gearList.appendChild(item);\n });\n\n gearList.querySelectorAll('.buy-gear-btn').forEach(b=>{\n b.addEventListener('click', (e)=>{\n const id = e.currentTarget.dataset.id;\n const ok = buyGear(id);\n if(!ok) flashCoins();\n });\n });\n\n gearList.querySelectorAll('.select-gear-btn').forEach(b=>{\n b.addEventListener('click', (e)=>{\n const id = e.currentTarget.dataset.id;\n if(state.selectedGear === id) state.selectedGear = null;\n else state.selectedGear = id;\n renderGearShop();\n updateHUD();\n gearModal.classList.add('hidden');\n });\n });\n}\n\n/* Wire UI events and start loops (init) */\nexport function init(){\n resizeCanvas();\n renderGarden();\n renderShop();\n renderInventory();\n updateHUD();\n\n seedShopBtn.addEventListener('click', ()=> {\n modalTitle.textContent = 'Seed Shop';\n renderShop();\n modal.classList.remove('hidden');\n });\n closeModal.addEventListener('click', ()=> modal.classList.add('hidden'));\n modal.addEventListener('click', (e)=> { if(e.target === modal) modal.classList.add('hidden') });\n\n if(themeToggle){\n themeToggle.addEventListener('click', ()=>{\n document.body.classList.toggle('dark');\n if(document.body.classList.contains('dark')) themeToggle.style.background = '#222';\n else themeToggle.style.background = '#444';\n try { localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light'); } catch(e){}\n });\n if(document.body.classList.contains('dark')) themeToggle.style.background = '#222';\n }\n\n gearShopBtn.addEventListener('click', ()=> {\n renderGearShop();\n gearModal.classList.remove('hidden');\n });\n closeGearModal.addEventListener('click', ()=> gearModal.classList.add('hidden'));\n gearModal.addEventListener('click', (e)=> { if(e.target === gearModal) gearModal.classList.add('hidden') });\n\n sellBtn.addEventListener('click', sellAllCrops);\n\n window.requestAnimationFrame(tickFrame);\n\n // schedule growth for existing planted cells\n state.garden.forEach((cell, idx)=>{\n if(cell.planted && cell.stage <= cell.planted.growStages){\n scheduleGrow(idx);\n }\n });\n\n const AUTOSAVE_MS = 5000;\n setInterval(()=> {\n try{\n const toSave = {\n coins: state.coins,\n inventory: state.inventory,\n crops: state.crops,\n selectedSeed: state.selectedSeed,\n garden: state.garden.map(c => {\n if(!c.planted) return { planted: null, stage: c.stage, plantedAt: null };\n return { planted: { ...c.planted }, stage: c.stage, plantedAt: c.planted.plantedAt || null };\n }),\n gear: state.gear,\n theme: document.body.classList.contains('dark') ? 'dark' : 'light',\n savedAt: Date.now()\n };\n localStorage.setItem('grow-garden-v1', JSON.stringify(toSave));\n }catch(e){}\n }, AUTOSAVE_MS);\n}\n\n/* Export to be used by growth module where needed */\nexport { renderGarden as renderGardenUI };\n```\n\napp.js\n```app.js\n```\n\nSummary: I split the monolithic src/main.js into modular files—state.js, particles.js, growth.js, and ui.js—left a compact src/main.js that imports them and added tombstone comments in main and app.js to mark removed large functions, then wired initialization and exports across the new modules so the app behavior is preserved.","page_description","cursor","eyJpZCI6ImdrNnBiX2Vya2x4cmhuZnk3eW51In0","token","included",[],"routes/browser/layout","actionData","errors"]

Grow a garden