\n likeyesterday.val.run\n \n

\n \n \n Remix on Val Town\n \n

\n \n );\n}\n\n// --- Location Picker ---\nfunction LocationPicker({ onSelect }: { onSelect: (loc: SavedLocation) => void }) {\n const [query, setQuery] = useState(\"\");\n const [results, setResults] = useState([]);\n const [searching, setSearching] = useState(false);\n const [geoLocating, setGeoLocating] = useState(false);\n const [geoError, setGeoError] = useState(\"\");\n const debounceRef = useRef(null);\n\n const search = useCallback(async (q: string) => {\n if (q.length < 2) { setResults([]); return; }\n setSearching(true);\n try {\n const res = await fetch(\n `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(q)}&count=5&language=en`\n );\n const data = await res.json();\n setResults(data.results || []);\n } catch {\n setResults([]);\n } finally {\n setSearching(false);\n }\n }, []);\n\n function handleInput(val: string) {\n setQuery(val);\n if (debounceRef.current) clearTimeout(debounceRef.current);\n debounceRef.current = setTimeout(() => search(val), 300) as any;\n }\n\n function selectResult(r: GeoResult) {\n const name = r.admin1\n ? `${r.name}, ${r.admin1}, ${r.country_code.toUpperCase()}`\n : `${r.name}, ${r.country_code.toUpperCase()}`;\n onSelect({ name, lat: r.latitude, lon: r.longitude });\n }\n\n async function useMyLocation() {\n setGeoLocating(true);\n setGeoError(\"\");\n try {\n const pos = await new Promise((resolve, reject) => {\n navigator.geolocation.getCurrentPosition(resolve, reject, { timeout: 10000 });\n });\n const { latitude, longitude } = pos.coords;\n let name = \"My location\";\n try {\n const geoRes = await fetch(\n `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json&zoom=10`\n );\n const geo = await geoRes.json();\n const city = geo.address?.city || geo.address?.town || geo.address?.village || geo.address?.county || \"\";\n const country = geo.address?.country_code?.toUpperCase() || \"\";\n if (city) name = `${city}, ${country}`;\n } catch {}\n onSelect({ name, lat: latitude, lon: longitude });\n } catch (e: any) {\n if (e.code === 1) setGeoError(\"Location access denied by your browser.\");\n else setGeoError(\"Couldn't get your location. Try searching instead.\");\n } finally {\n setGeoLocating(false);\n }\n }\n\n return (\n

likeyesterday.val.run

\n\n

\n handleInput(e.target.value)}\n autoFocus\n />\n {searching &&

}\n

\n\n {results.length > 0 && (\n

selectResult(r)}>\n {r.name}\n \n {[r.admin1, r.country].filter(Boolean).join(\", \")}\n \n

\n )}\n\n

\n or\n

\n\n \n\n {geoError &&

{geoError}

}\n

\n );\n}\n\n// --- Main App ---\nfunction App() {\n const [location, setLocation] = useState(loadLocation);\n const [data, setData] = useState(null);\n const [error, setError] = useState(null);\n const [loading, setLoading] = useState(false);\n const [units, setUnits] = useState<\"celsius\" | \"fahrenheit\">(loadUnits);\n const [editingLocation, setEditingLocation] = useState(false);\n\n useEffect(() => {\n if (location) {\n fetchWeather(location);\n }\n }, [location, units]);\n\n function handleLocationSelect(loc: SavedLocation) {\n saveLocation(loc);\n setLocation(loc);\n setEditingLocation(false);\n }\n\n function handleUnitsChange(u: \"celsius\" | \"fahrenheit\") {\n saveUnits(u);\n setUnits(u);\n }\n\n async function fetchWeather(loc: SavedLocation) {\n setLoading(true);\n setError(null);\n try {\n const res = await fetch(`/api/weather?lat=${loc.lat}&lon=${loc.lon}&units=${units}`);\n const json = await res.json();\n if (json.error) throw new Error(json.error);\n setData(json);\n } catch (e: any) {\n setError(e.message || \"Failed to fetch weather\");\n } finally {\n setLoading(false);\n }\n }\n\n if (!location || editingLocation) {\n return ;\n }\n\n if (loading || !data) {\n return (\n

likeyesterday.val.run

Fetching weather...

\n );\n }\n\n if (error) {\n return (\n

Hmm, something's off

{error}

\n \n

\n );\n }\n\n const d = data.daily;\n const unitLabel = data.daily_units?.temperature_2m_max === \"°F\" ? \"°F\" : \"°C\";\n const windUnit = units === \"fahrenheit\" ? \"mph\" : \"km/h\";\n\n const days = [\n {\n label: \"Yesterday\",\n high: Math.round(d.temperature_2m_max[0]),\n low: Math.round(d.temperature_2m_min[0]),\n feelsHigh: Math.round(d.apparent_temperature_max[0]),\n code: d.weather_code[0],\n rain: d.precipitation_probability_max[0],\n wind: Math.round(d.wind_speed_10m_max[0]),\n },\n {\n label: \"Today\",\n high: Math.round(d.temperature_2m_max[1]),\n low: Math.round(d.temperature_2m_min[1]),\n feelsHigh: Math.round(d.apparent_temperature_max[1]),\n code: d.weather_code[1],\n rain: d.precipitation_probability_max[1],\n wind: Math.round(d.wind_speed_10m_max[1]),\n },\n {\n label: \"Tomorrow\",\n high: Math.round(d.temperature_2m_max[2]),\n low: Math.round(d.temperature_2m_min[2]),\n feelsHigh: Math.round(d.apparent_temperature_max[2]),\n code: d.weather_code[2],\n rain: d.precipitation_probability_max[2],\n wind: Math.round(d.wind_speed_10m_max[2]),\n },\n ];\n\n const comparison = generateComparison(days[0], days[1], days[2], unitLabel, windUnit);\n\n const h = data.hourly;\n const yesterdayTemps = h.temperature_2m.slice(0, 24);\n const todayTemps = h.temperature_2m.slice(24, 48);\n const tomorrowTemps = h.temperature_2m.slice(48, 72);\n\n const diff = days[1].high - days[0].high;\n const diffClass = diff > 1 ? \"warmer\" : diff < -1 ? \"cooler\" : \"same\";\n\n const tomorrowDiff = days[2].high - days[1].high;\n const tomorrowDiffClass = tomorrowDiff > 1 ? \"warmer\" : tomorrowDiff < -1 ? \"cooler\" : \"same\";\n\n const formatDate = () => {\n return new Date().toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"long\",\n day: \"numeric\",\n });\n };\n\n return (\n

\n \n \n

{formatDate()}

\n\n

\n handleUnitsChange(\"celsius\")}\n >\n °C\n \n handleUnitsChange(\"fahrenheit\")}\n >\n °F\n \n

\n\n

{comparison.detail}

\n\n

\n {days.map((day, i) => (\n

{day.label}

{getWeatherEmoji(day.code)}

\n {day.high}{unitLabel}\n

{day.low}{unitLabel} — {day.high}{unitLabel}

Feels {day.feelsHigh}{unitLabel}

\n {i === 1 && diff !== 0 && (\n

\n {diff > 0 ? `+${diff}${unitLabel}` : `${diff}${unitLabel}`} vs yesterday\n

\n )}\n {i === 2 && tomorrowDiff !== 0 && (\n

\n {tomorrowDiff > 0 ? `+${tomorrowDiff}${unitLabel}` : `${tomorrowDiff}${unitLabel}`} vs today\n

\n )}\n

\n ))}\n

\n\n

Hourly temperature

\n \n

\n Yesterday\n

\n Today\n

\n Tomorrow\n

\n\n

Rain chance

{days[1].rain}%

\n {days[1].rain === days[0].rain\n ? \"Same as yesterday\"\n : days[1].rain > days[0].rain\n ? `Up from ${days[0].rain}% yesterday`\n : `Down from ${days[0].rain}% yesterday`}\n

Wind

{days[1].wind} {windUnit}

\n {Math.abs(days[1].wind - days[0].wind) <= 2\n ? \"Similar to yesterday\"\n : days[1].wind > days[0].wind\n ? `Windier than yesterday (${days[0].wind})`\n : `Calmer than yesterday (${days[0].wind})`}\n

Conditions

{getWmoDescription(days[1].code)}

\n {days[0].code === days[1].code\n ? \"Same as yesterday\"\n : `Yesterday: ${getWmoDescription(days[0].code)}`}\n

Tomorrow

{days[2].high}{unitLabel}

\n {getWmoDescription(days[2].code)}, {days[2].rain}% rain\n

\n\n \n

\n );\n}\n\nfunction TempChart({ yesterday, today, tomorrow, unitLabel }: { yesterday: number[]; today: number[]; tomorrow: number[]; unitLabel: string }) {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n const dpr = window.devicePixelRatio || 1;\n const rect = canvas.getBoundingClientRect();\n canvas.width = rect.width * dpr;\n canvas.height = rect.height * dpr;\n ctx.scale(dpr, dpr);\n\n const w = rect.width;\n const h = rect.height;\n const pad = { top: 20, right: 12, bottom: 24, left: 32 };\n const chartW = w - pad.left - pad.right;\n const chartH = h - pad.top - pad.bottom;\n\n const allTemps = [...yesterday, ...today, ...tomorrow];\n const minT = Math.floor(Math.min(...allTemps) - 1);\n const maxT = Math.ceil(Math.max(...allTemps) + 1);\n const range = maxT - minT || 1;\n\n const toX = (i: number) => pad.left + (i / 23) * chartW;\n const toY = (t: number) => pad.top + (1 - (t - minT) / range) * chartH;\n\n ctx.strokeStyle = \"#EDE7DE\";\n ctx.lineWidth = 0.5;\n const steps = 4;\n for (let i = 0; i <= steps; i++) {\n const temp = minT + (range / steps) * i;\n const y = toY(temp);\n ctx.beginPath();\n ctx.moveTo(pad.left, y);\n ctx.lineTo(w - pad.right, y);\n ctx.stroke();\n ctx.fillStyle = \"#B5A998\";\n ctx.font = \"10px 'DM Sans', sans-serif\";\n ctx.textAlign = \"right\";\n ctx.fillText(`${Math.round(temp)}°`, pad.left - 6, y + 3);\n }\n\n ctx.fillStyle = \"#B5A998\";\n ctx.font = \"9px 'DM Sans', sans-serif\";\n ctx.textAlign = \"center\";\n [0, 6, 12, 18, 23].forEach((hr) => {\n const label = hr === 0 ? \"12a\" : hr === 6 ? \"6a\" : hr === 12 ? \"12p\" : hr === 18 ? \"6p\" : \"11p\";\n ctx.fillText(label, toX(hr), h - 4);\n });\n\n function drawLine(temps: number[], color: string, lineWidth: number, dashed = false) {\n ctx.strokeStyle = color;\n ctx.lineWidth = lineWidth;\n ctx.setLineDash(dashed ? [4, 4] : []);\n ctx.beginPath();\n temps.forEach((t, i) => {\n const x = toX(i);\n const y = toY(t);\n if (i === 0) ctx.moveTo(x, y);\n else ctx.lineTo(x, y);\n });\n ctx.stroke();\n ctx.setLineDash([]);\n }\n\n drawLine(yesterday, \"#B5A998\", 1.5, true);\n drawLine(tomorrow, \"#4A7C8F\", 1.5, true);\n drawLine(today, \"#D4763A\", 2);\n\n const currentHour = new Date().getHours();\n if (currentHour < today.length) {\n ctx.fillStyle = \"#D4763A\";\n ctx.beginPath();\n ctx.arc(toX(currentHour), toY(today[currentHour]), 4, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = \"#FFFCF7\";\n ctx.beginPath();\n ctx.arc(toX(currentHour), toY(today[currentHour]), 1.5, 0, Math.PI * 2);\n ctx.fill();\n }\n }, [yesterday, today, tomorrow]);\n\n return (\n

\n );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[111,93],"1ebf54a6-4c83-11f1-8655-ee650bb23af1",["D",1778426146463],"\n\n \n \n \n Like Yesterday\n \n \n \n \n ⛅\">\n \n \n

\n \n \n \n",[],[111,87],"1ebf191e-4c83-11f1-8655-ee650bb23af1",["D",1778426146463],"// Generates natural-language comparisons between days\n// This is the heart of the app — weather as pattern recognition, not numbers\n\ninterface DayData {\n high: number;\n low: number;\n feelsHigh: number;\n code: number;\n rain: number;\n wind: number;\n}\n\nexport function generateComparison(\n yesterday: DayData,\n today: DayData,\n tomorrow: DayData,\n unitLabel: string,\n windUnit: string,\n): { headline: string; detail: string } {\n const diff = today.high - yesterday.high;\n const absDiff = Math.abs(diff);\n const feelsDiff = today.feelsHigh - yesterday.feelsHigh;\n\n // Temperature description\n let tempPhrase: string;\n let tempClass: string;\n\n if (absDiff <= 1) {\n tempPhrase = \"just like yesterday\";\n tempClass = \"same\";\n } else if (absDiff <= 3) {\n tempPhrase = diff > 0 ? \"a touch warmer\" : \"a touch cooler\";\n tempClass = diff > 0 ? \"warmer\" : \"cooler\";\n } else if (absDiff <= 6) {\n tempPhrase = diff > 0 ? \"noticeably warmer\" : \"noticeably cooler\";\n tempClass = diff > 0 ? \"warmer\" : \"cooler\";\n } else if (absDiff <= 10) {\n tempPhrase = diff > 0 ? \"much warmer\" : \"much cooler\";\n tempClass = diff > 0 ? \"warmer\" : \"cooler\";\n } else {\n tempPhrase = diff > 0 ? \"dramatically warmer\" : \"dramatically cooler\";\n tempClass = diff > 0 ? \"warmer\" : \"cooler\";\n }\n\n // Conditions change\n const conditionChanged = yesterday.code !== today.code;\n const isRainyToday = [51, 53, 55, 61, 63, 65, 80, 81, 82, 95, 96, 99].includes(today.code);\n const wasRainyYesterday = [51, 53, 55, 61, 63, 65, 80, 81, 82, 95, 96, 99].includes(yesterday.code);\n const isClearToday = [0, 1].includes(today.code);\n const wasClearYesterday = [0, 1].includes(yesterday.code);\n\n // Build headline\n let headline: string;\n\n if (absDiff <= 1 && !conditionChanged) {\n headline = `Just like yesterday. Same temperature, same skies.`;\n } else if (absDiff <= 1 && conditionChanged) {\n if (isRainyToday && !wasRainyYesterday) {\n headline = `Same warmth as yesterday, but bring an umbrella today.`;\n } else if (isClearToday && !wasClearYesterday) {\n headline = `Same temperature, but the sun's out today.`;\n } else {\n headline = `Same warmth, different skies.`;\n }\n } else {\n headline = `${capitalize(tempPhrase)} than yesterday`;\n if (isRainyToday && !wasRainyYesterday) {\n headline += `, and wetter`;\n } else if (!isRainyToday && wasRainyYesterday) {\n headline += `, and drier`;\n }\n headline += \".\";\n }\n\n // Build detail line\n const parts: string[] = [];\n\n if (absDiff > 1) {\n parts.push(`${today.high}${unitLabel} today vs ${yesterday.high}${unitLabel} yesterday`);\n }\n\n // Feels-like mismatch\n if (Math.abs(feelsDiff - diff) >= 3) {\n if (feelsDiff > diff) {\n parts.push(`feels even warmer with humidity`);\n } else {\n parts.push(`wind makes it feel cooler than the number suggests`);\n }\n }\n\n // Wind change\n const windDiff = today.wind - yesterday.wind;\n if (Math.abs(windDiff) > 5) {\n parts.push(windDiff > 0 ? `windier today` : `calmer winds today`);\n }\n\n // Rain\n if (today.rain > 50 && yesterday.rain <= 30) {\n parts.push(`rain likely today`);\n }\n\n // Tomorrow preview\n const tomorrowDiff = tomorrow.high - today.high;\n if (Math.abs(tomorrowDiff) > 2) {\n parts.push(\n tomorrowDiff > 0\n ? `tomorrow warms up to ${tomorrow.high}${unitLabel}`\n : `tomorrow drops to ${tomorrow.high}${unitLabel}`,\n );\n }\n\n const detail = parts.length > 0 ? capitalize(parts.join(\" · \")) : `${today.high}${unitLabel} today, ${yesterday.high}${unitLabel} yesterday`;\n\n return { headline, detail };\n}\n\nfunction capitalize(s: string): string {\n return s.charAt(0).toUpperCase() + s.slice(1);\n}",[],[111,75],["D",1778426146463],[238,239,240,241,242],[111],["D",1778426146463],["D",1789507240000],{"_11":12,"_177":81},{"_11":12,"_172":173,"_80":81,"_25":79,"_174":175,"_176":24},{"_33":34,"_13":16,"_27":30,"_162":125,"_163":70,"_164":71,"_165":129,"_166":167,"_168":169,"_170":14,"_171":12},"ctx",{"_46":-5,"_199":318,"_319":320,"_321":322,"_323":24,"_324":24,"_325":24,"_326":136,"_327":-5,"_328":-7,"_329":-7,"_330":20,"_331":24,"_332":24,"_333":-5,"_334":24,"_335":24,"_336":24,"_337":-5},"ENV",{"_289":290,"_291":292,"_293":16,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317},"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