[V0_FILE]json:file="public/manifest.json" isMerged="true" { "name": "Grow a Garden Stock Tracker", "short_name": "GAG Tracker", "description": "Track Grow a Garden stock with real-time notifications", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#22c55e", "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Grow a Garden Stock Tracker", description: "Track Grow a Garden stock with real-time notifications", manifest: "/manifest.json", themeColor: "#22c55e", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/actions.ts" isMerged="true" "use server" import webpush from "web-push" webpush.setVapidDetails( "mailto:your-email@example.com", process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!, process.env.VAPID_PRIVATE_KEY!, ) let subscription: PushSubscription | null = null export async function subscribeUser(sub: PushSubscription) { subscription = sub // In a production environment, you would want to store the subscription in a database // For example: await db.subscriptions.create({ data: sub }) return { success: true } } export async function unsubscribeUser() { subscription = null // In a production environment, you would want to remove the subscription from the database // For example: await db.subscriptions.delete({ where: { ... } }) return { success: true } } export async function sendNotification(message: string) { if (!subscription) { throw new Error("No subscription available") } try { await webpush.sendNotification( subscription, JSON.stringify({ title: "🌾 Garden Stock Alert", body: message, icon: "/icon-192.png", badge: "/icon-192.png", data: { url: "/", }, }), ) return { success: true } } catch (error) { console.error("Error sending push notification:", error) return { success: false, error: "Failed to send notification" } } } [V0_FILE]javascript:file="public/sw.js" isMerged="true" self.addEventListener("push", (event) => { if (event.data) { const data = event.data.json() const options = { body: data.body, icon: data.icon || "/icon-192.png", badge: data.badge || "/icon-192.png", vibrate: [100, 50, 100], data: { dateOfArrival: Date.now(), primaryKey: "1", url: data.data?.url || "/", }, actions: [ { action: "view", title: "View Stock", icon: "/icon-192.png", }, ], } event.waitUntil(self.registration.showNotification(data.title, options)) } }) self.addEventListener("notificationclick", (event) => { console.log("Notification click received.") event.notification.close() const urlToOpen = event.notification.data?.url || "/" event.waitUntil( clients .matchAll({ type: "window", includeUncontrolled: true, }) .then((clientList) => { // Check if there's already a window/tab open with the target URL for (let i = 0; i < clientList.length; i++) { const client = clientList[i] if (client.url === urlToOpen && "focus" in client) { return client.focus() } } // If no window/tab is already open, open a new one if (clients.openWindow) { return clients.openWindow(urlToOpen) } }), ) }) self.addEventListener("install", (event) => { self.skipWaiting() }) self.addEventListener("activate", (event) => { event.waitUntil(clients.claim()) }) [V0_FILE]png:8="true" file="public/icon-192.png" data="true" image="true" png="true" base64="true" iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89="true" bN="true" rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz="true" SMBAPh="true" PDwrIsAHvgABeNMLCADATZvAMByH="true" w="true" qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf="true" bTAICd="true" Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA="true" g88wAAKCRFRHgg="true" P9eM4Ors7ONo62Dl8t6r8G="true" yJiYuP="true" 5c="true" rcEAAAOF0ftH="true" LC="true" zGoA7BoBt="true" qIl7gRoXgugdfeLZrIPQLUAoOnaV="true" Nw="true" H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl="true" AV="true" 1s="true" X48="true" Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H="true" LcL="true" wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s="true" wM="true" 3zUAsGo="true" AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93="true" UegJQCAZkmScQAAXkQkLlTKsz="true" HCAAARKCBKrBBG="true" TBGCzABhzBBdzBC="true" xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD="true" phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8="true" Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8="true" xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR="true" cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI="true" ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG="true" Qh8lsKnWJAcaT4U="true" IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr="true" h0uhHdlR5Ol9BX0svpR="true" iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK="true" YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI="true" pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q="true" pH5Z="true" YkGWcNMw09DpFGgsV="true" jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY="true" R27iz2qqaE5QzNKM1ezUvOUZj8H45hx="true" Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4="true" OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up="true" 6Ynr5egJ5Mb6feeb3n="true" hx9L="true" 1U="true" W36p="true" VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm="true" eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw="true" 6TvZN9un2N="true" T0HDYfZDqsdWh1="true" c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc="true" Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26="true" uNu5p7ofcn8w0nymeWTNz0MPIQ="true" BR5dE="true" C5="true" VMGvfrH5PQ0="true" BZ7XnIy9jL5FXrdewt6V3qvdh7xc="true" 9j5yn="true" M="true" 4zw33jLeWV="true" MN8C3yLfLT8Nvnl="true" F30N="true" I="true" 9k="true" 3r="true" 0QCngCUBZwOJgUGBWwL7="true" Hp8Ib="true" OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo="true" qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt="true" 87fOH4p3iC="true" N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi="true" RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z="true" pn5mZ2y6xlhbL="true" xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a="true" zYnKOZarnivN7cyzytuQN5zvn="true" tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1="true" 1dT1gvWd="true" 1YfqGnRs="true" FYmKrhTbF5cVf9go3HjlG4dvyr="true" Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql="true" aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO="true" PLi8ZafJzs07P1SkVPRU="true" lQ27tLdtWHX="true" G7R7ht7vPY07NXbW7z3="true" T7JvttVAVVN1WbVZftJ="true" 7P3P66Jqun4lvttXa1ObXHtxwPSA="true" 0HIw6217nU1R3SPVRSj9Yr60cOxx="true" p3vdy0NNg1VjZzG4iNwRHnk6fcJ3="true" ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w="true" 0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb="true" 6EHTh0kX="true" i="true" c7vDvOXPK4dPKy2="true" UTV7hXmq86X23qdOo8="true" pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb="true" 1tWeOT3dvfN6b="true" fF9="true" XfFt1="true" cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v="true" 3Njv3H9qwHeg89HcR="true" cGhYPP="true" pH1jw9DBY="true" Zj8uGDYbrnjg="true" OTniP3L96fynQ89kzyaeF="true" 6i="true" suuFxYvfvjV69fO0ZjRoZfyl5O="true" bXyl="true" erA6xmv28bCxh6="true" yXgzMV70VvvtwXfcdx3vo98PT="true" R8IH8o="true" 2j5sfVT0Kf7kxmTk="true" 8EA5jz="true" GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5="true" wAAgOkAAHUwAADqYAAAOpgAABdvkl="true" FRgAAHUlJREFUeNrsnXmcXFWVx7="true" 3qrq6O="true" lOOp2EJCQhCQkJhCUJEJYAYRNkEVBBBRVFRUdHHXVGHXdnxnFGx2VcRh1HHVdwQVFRQVkEZJOwhCUJWUjSSXrfq6u6qrreO3="true" cV0l1p5dXXVVd1dX3="true" n0p7vq3Xfvfe="true" e8zvn3nPPPVdUFYfD0ZqEGl0Ah8PROMwCOBwtjFkAh6OFMQvgcLQwZgEcjhbGLIDDUQdEZJGIqIhEGl2WcjAL4HC0MGYBGoyIXCEiT4hIj4j0i8hGEfmciLQ1umwOR6MxC9BARORfgF8BZwKPAD8GdgOfBh4VkZkNLJ7D0XDMAjQIEbkE="true" BzwMnCKqr5bVT8InAhsAY4Hvt7AIjocDccsgKNWfNH="true" 7aq7s4lqupu4Av25w0iMqXuJXM4mgSzAA1ARKYBZwAJ4Hf5="true" 1X1YWAHMAm4oM7FcziaBlsH0BhOsP="true" fV9VEkTzPAecCJwF="true" qEupHI4mwyyAo1bMsf="true" 3l8izLSfPKIjI9UW2LRaRhKrGKy2cw9EozAI0hg77v79Enr5cPofD4bAWoEGI="true" V8qT6jCfKjqkmLbRWQjsLjSczscjcKCYI2h1="true" 6fUCJPe04="true" h6MlMQvQGLbY="true" 3NK5JmXk8fhaEnMAjSGF="true" z="true" E0SkWJ2fYP8="true" X4fyOBxNiVmAxrAe6AamAZfm7xSRs4C5QAx4sM5lcziaBlsH0ABUNSEiXwW="true" BdwqIhcCzwKLgKuAAPA5Ve1qYDEdjobTshZARBaJiIpIpNFlKYWq3gZ8BHgVuAy4BpgJ3A6cqaq3N7B4DkdTYF0gh6OFaVkL4HA4zAI4HC2NWQCHo4UxC="true" BwtDBmARyOFsYsgMPRwpgFcDhaGLMADkcLYxbA4WhhzAI4HC2MWQCHo4UxC="true" BwtDBmARyOFsYsgMPRwpg="true" v0="true" no="true" op="true" code="true" block="true" terminated="true" isMerged="true" [V0_FILE]typescript:file="lib/push-store.ts" isMerged="true" let subscription: PushSubscription | null = null export function saveSubscription(sub: PushSubscription) { subscription = sub } export function clearSubscription() { subscription = null } export function getSubscription() { return subscription } [V0_FILE]typescript:file="app/api/subscribe/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { saveSubscription } from "@/lib/push-store" export async function POST(req: NextRequest) { const { sub } = await req.json() saveSubscription(sub) return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/unsubscribe/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { clearSubscription } from "@/lib/push-store" export async function POST(_req: NextRequest) { clearSubscription() return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/notify/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import webpush from "web-push" import { getSubscription } from "@/lib/push-store" webpush.setVapidDetails( "mailto:your-email@example.com", process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!, process.env.VAPID_PRIVATE_KEY!, ) export async function POST(req: NextRequest) { const { message } = await req.json() const sub = getSubscription() if (!sub) { return NextResponse.json({ success: false, error: "No subscription" }, { status: 400 }) } try { await webpush.sendNotification( sub, JSON.stringify({ title: "🌾 Garden Stock Alert", body: message, icon: "/icon-192.png", badge: "/icon-192.png", data: { url: "/" }, }), ) return NextResponse.json({ success: true }) } catch (err) { console.error("Push error:", err) return NextResponse.json({ success: false, error: "Push failed" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/sw.js/route.ts" isMerged="true" export const runtime = "edge" // small, static response → edge is fine // Serve the service-worker JavaScript with the proper MIME-type export function GET() { return new Response( ` self.addEventListener("push", (event) => { if (event.data) { const data = event.data.json(); const options = { body: data.body, icon: data.icon || "/icon-192.png", badge: data.badge || "/icon-192.png", vibrate: [100, 50, 100], data: { url: data.data?.url || "/", primaryKey: 1 }, actions: [{ action: "view", title: "View Stock", icon: "/icon-192.png" }], }; event.waitUntil(self.registration.showNotification(data.title, options)); } }); self.addEventListener("notificationclick", (event) => { event.notification.close(); const url = event.notification.data?.url || "/"; event.waitUntil( clients.matchAll({ type: "window", includeUncontrolled: true }).then((cl) => { for (const c of cl) if (c.url === url && "focus" in c) return c.focus(); if (clients.openWindow) return clients.openWindow(url); }), ); }); self.addEventListener("install", () => self.skipWaiting()); self.addEventListener("activate", (event) => event.waitUntil(clients.claim())); `, { headers: { "content-type": "text/javascript; charset=utf-8", "cache-control": "public, max-age=0, must-revalidate", }, }, ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Bell, BellOff, Heart, Clock, Plus, X } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { Toaster } from "@/components/ui/toaster" async function postJSON(url: string, data: any) { await fetch(url, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(data), }) } async function subscribeUserOnServer(sub: any) { return postJSON("/api/subscribe", { sub }) } async function unsubscribeUserOnServer() { return postJSON("/api/unsubscribe", {}) } async function sendNotificationToServer(message: string) { return postJSON("/api/notify", { message }) } interface StockItem { name: string quantity: number emoji?: string } interface StockSection { items: StockItem[] countdown?: string appearIn?: string } interface StockData { gear: StockSection seed: StockSection egg: StockSection cosmetics: StockSection event: StockSection travelingmerchant: StockSection } interface WeatherData { icon: string weatherType: string description: string cropBonuses: string } function urlBase64ToUint8Array(base64String: string) { const padding = "=".repeat((4 - (base64String.length % 4)) % 4) const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/") const rawData = window.atob(base64) const outputArray = new Uint8Array(rawData.length) for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i) } return outputArray } function formatValue(val: number): string { if (val >= 1_000_000) return `x${(val / 1_000_000).toFixed(1)}M` if (val >= 1_000) return `x${(val / 1_000).toFixed(1)}K` return `x${val}` } function getTimeAgo(date: Date): string { const now = new Date() const diff = now.getTime() - date.getTime() const sec = Math.floor(diff / 1000) const min = Math.floor(sec / 60) const hour = Math.floor(min / 60) const day = Math.floor(hour / 24) if (sec < 60) return `${sec}s ago` if (min < 60) return `${min}m ago` if (hour < 24) return `${hour}h ago` return `${day}d ago` } async function fetchStockOnce(): Promise { try { const res = await fetch("https://growagardenstock.com/api/stock", { next: { revalidate: 0 }, // always fresh cache: "no-store", }) if (!res.ok) return null const stock = await res.json() return { gear: stock.gear || { items: [] }, seed: stock.seed || { items: [] }, egg: stock.egg || { items: [] }, cosmetics: stock.cosmetics || { items: [] }, event: stock.honey || { items: [] }, travelingmerchant: stock.travelingmerchant || { items: [] }, } } catch { return null } } export default function GardenStockTracker() { const [isSupported, setIsSupported] = useState(false) const [subscription, setSubscription] = useState(null) const [stockData, setStockData] = useState(null) const [weather, setWeather] = useState(null) const [favorites, setFavorites] = useState([]) const [newFavorite, setNewFavorite] = useState("") const [isConnected, setIsConnected] = useState(false) const [lastUpdated, setLastUpdated] = useState(null) const [lastSeen, setLastSeen] = useState>>(new Map()) const { toast } = useToast() // Load favorites from localStorage useEffect(() => { const savedFavorites = localStorage.getItem("garden-favorites") if (savedFavorites) { setFavorites(JSON.parse(savedFavorites)) } }, []) // Save favorites to localStorage useEffect(() => { localStorage.setItem("garden-favorites", JSON.stringify(favorites)) }, [favorites]) // Check for push notification support useEffect(() => { if ("serviceWorker" in navigator && "PushManager" in window) { setIsSupported(true) registerServiceWorker() } }, []) const registerServiceWorker = async () => { try { // register the worker served by app/sw.js/route.ts const registration = await navigator.serviceWorker.register("/sw.js", { scope: "/", updateViaCache: "none", }) const sub = await registration.pushManager.getSubscription() setSubscription(sub) } catch (error) { console.error("Service worker registration failed:", error) } } const subscribeToPush = async () => { try { const registration = await navigator.serviceWorker.ready const sub = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!), }) setSubscription(sub) const serializedSub = JSON.parse(JSON.stringify(sub)) await subscribeUserOnServer(serializedSub) toast({ title: "Notifications Enabled", description: "You'll now receive stock notifications!", }) } catch (error) { console.error("Push subscription failed:", error) toast({ title: "Subscription Failed", description: "Could not enable notifications. Please try again.", variant: "destructive", }) } } const unsubscribeFromPush = async () => { try { await subscription?.unsubscribe() setSubscription(null) await unsubscribeUserOnServer() toast({ title: "Notifications Disabled", description: "You won't receive stock notifications anymore.", }) } catch (error) { console.error("Unsubscribe failed:", error) } } const updateLastSeen = useCallback((category: string, items: StockItem[]) => { if (!Array.isArray(items)) return setLastSeen((prev) => { const newLastSeen = new Map(prev) if (!newLastSeen.has(category)) { newLastSeen.set(category, new Map()) } const catMap = newLastSeen.get(category)! const now = new Date() for (const item of items) { if (item.quantity > 0) { catMap.set(item.name, now) } } return newLastSeen }) }, []) // ──────────────────────────────────────────────────────────── // WebSocket with HTTP-polling fallback // ──────────────────────────────────────────────────────────── useEffect(() => { let ws: WebSocket | null = null let reconnects = 0 let reconnectTimeout: NodeJS.Timeout let pollInterval: NodeJS.Timeout const startPolling = () => { clearInterval(pollInterval) pollInterval = setInterval(async () => { const data = await fetchStockOnce() if (data) handleStockUpdate(data) }, 15_000) } const handleStockUpdate = (newStockData: StockData) => { setStockData(newStockData) setLastUpdated(new Date()) // update last-seen map Object.entries(newStockData).forEach(([category, section]) => updateLastSeen(category, section.items)) // notify on favourites if (subscription && favorites.length > 0) { const matches: string[] = [] Object.values(newStockData).forEach((section) => { section.items .filter((i) => i.quantity > 0) .forEach((i) => { if (favorites.some((f) => f.toLowerCase() === i.name.toLowerCase())) matches.push(i.name) }) }) if (matches.length > 0) { sendNotificationToServer( `Found ${matches.length} favorite item${matches.length > 1 ? "s" : ""}: ${matches.join(", ")}`, ) } } } const connectWS = () => { try { ws = new WebSocket("wss://gagstock.gleeze.com") } catch { // immediate failure (e.g. protocol blocked) → poll instead startPolling() return } ws.onopen = () => { setIsConnected(true) console.log("WebSocket connected") } ws.onmessage = (e) => { try { const payload = JSON.parse(e.data) if (payload.status !== "success" || !payload.data) return handleStockUpdate({ gear: payload.data.gear || { items: [] }, seed: payload.data.seed || { items: [] }, egg: payload.data.egg || { items: [] }, cosmetics: payload.data.cosmetics || { items: [] }, event: payload.data.honey || { items: [] }, travelingmerchant: payload.data.travelingmerchant || { items: [] }, }) } catch (err) { console.error("Bad WS payload:", err) } } ws.onerror = (err) => { console.error("WebSocket error:", err) } ws.onclose = () => { setIsConnected(false) if (reconnects < 3) { reconnects += 1 reconnectTimeout = setTimeout(connectWS, 3_000) } else { console.warn("WebSocket unavailable, switching to HTTP polling") startPolling() } } } connectWS() return () => { clearTimeout(reconnectTimeout) clearInterval(pollInterval) ws?.close() } }, [subscription, favorites, updateLastSeen]) const addFavorite = () => { if (newFavorite.trim() && !favorites.includes(newFavorite.trim())) { setFavorites([...favorites, newFavorite.trim()]) setNewFavorite("") toast({ title: "Favorite Added", description: `Added "${newFavorite.trim()}" to your favorites`, }) } } const removeFavorite = (item: string) => { setFavorites(favorites.filter((fav) => fav !== item)) toast({ title: "Favorite Removed", description: `Removed "${item}" from your favorites`, }) } const renderStockSection = (title: string, section: StockSection, emoji: string) => { const availableItems = section.items.filter((item) => item.quantity > 0) const favoriteItems = availableItems.filter((item) => favorites.some((fav) => fav.toLowerCase() === item.name.toLowerCase()), ) return ( {emoji} {title} {favoriteItems.length > 0 && ( {favoriteItems.length} )} {(section.countdown || section.appearIn) && ( Restock in: {section.countdown || section.appearIn} )} {availableItems.length === 0 ? (

No items in stock

) : (

{availableItems.map((item, index) => { const isFavorite = favorites.some((fav) => fav.toLowerCase() === item.name.toLowerCase()) return (

{item.emoji && {item.emoji}} {item.name} {isFavorite && }

{formatValue(item.quantity)}

) })}

)} ) } const renderLastSeenSection = (category: string) => { const categoryData = lastSeen.get(category) if (!categoryData || categoryData.size === 0) { return

No items tracked yet

} const sortedItems = Array.from(categoryData.entries()).sort((a, b) => b[1].getTime() - a[1].getTime()) return (

{sortedItems.map(([name, date]) => (

{name} {getTimeAgo(date)}

))}

) } return (

🌾 Grow a Garden Stock Tracker

{isConnected ? "Connected" : "Disconnected"}

{lastUpdated &&

Last updated: {lastUpdated.toLocaleTimeString()}

}

{weather && ( {weather.icon} Weather: {weather.weatherType}

{weather.description}

🎯 {weather.cropBonuses}

)} Stock Favorites Notifications Last Seen {stockData ? (

{renderStockSection("Gear", stockData.gear, "🛠️")} {renderStockSection("Seeds", stockData.seed, "🌱")} {renderStockSection("Eggs", stockData.egg, "🥚")} {renderStockSection("Cosmetics", stockData.cosmetics, "🎨")} {renderStockSection("Event", stockData.event, "🎉")} {renderStockSection("Traveling Merchant", stockData.travelingmerchant, "🚚")}

) : (

{isConnected ? "Waiting for stock data..." : "Connecting to stock tracker..."}

)} Manage Favorites Add items to your favorites to get notified when they're in stock

setNewFavorite(e.target.value)} onKeyPress={(e) => e.key === "Enter" && addFavorite()} />

{favorites.length === 0 ? (

No favorites added yet

) : (

{favorites.map((item) => ( {item} ))}

)} Push Notifications Get notified when your favorite items are in stock, even when you're not on this page {!isSupported ? (

Push notifications are not supported in this browser.

) : subscription ? (

Notifications are enabled

) : (

Notifications are disabled

)} Gear Seeds Eggs Cosmetics Event Merchant {["gear", "seed", "egg", "cosmetics", "event", "travelingmerchant"].map((category) => ( Last Seen - {category.charAt(0).toUpperCase() + category.slice(1)} {renderLastSeenSection(category)} ))}

) }