/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [location, setLocation] = useState(""); const [weather, setWeather] = useState(""); const [tackleBox, setTackleBox] = useState([]); const [recommendation, setRecommendation] = useState(""); const [lureImageUrl, setLureImageUrl] = useState(""); useEffect(() => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(position => { const { latitude, longitude } = position.coords; setLocation(`${latitude.toFixed(4)}, ${longitude.toFixed(4)}`); fetchWeather(latitude, longitude); }, () => { setLocation("Location not available"); }); } loadTackleBox(); }, []); const fetchWeather = async (latitude, longitude) => { try { const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true`); const data = await response.json(); setWeather(`${data.current_weather.temperature}°C, ${getWeatherDescription(data.current_weather.weathercode)}`); } catch (error) { console.error("Error fetching weather:", error); setWeather("Weather data unavailable"); } }; const getWeatherDescription = (code) => { const weatherCodes = { 0: "Clear sky", 1: "Mainly clear", 2: "Partly cloudy", 3: "Overcast", 45: "Fog", 48: "Depositing rime fog", 51: "Light drizzle", 53: "Moderate drizzle", 55: "Dense drizzle", 56: "Light freezing drizzle", 57: "Dense freezing drizzle", 61: "Slight rain", 63: "Moderate rain", 65: "Heavy rain", 66: "Light freezing rain", 67: "Heavy freezing rain", 71: "Slight snow fall", 73: "Moderate snow fall", 75: "Heavy snow fall", 77: "Snow grains", 80: "Slight rain showers", 81: "Moderate rain showers", 82: "Violent rain showers", 85: "Slight snow showers", 86: "Heavy snow showers", 95: "Thunderstorm", 96: "Thunderstorm with slight hail", 99: "Thunderstorm with heavy hail", }; return weatherCodes[code] || "Unknown"; }; const loadTackleBox = async () => { try { const response = await fetch("/api/tackleBox"); if (response.ok) { const data = await response.json(); setTackleBox(data); } } catch (error) { console.error("Error loading tackle box:", error); } }; const handleFishingFormSubmit = (event) => { event.preventDefault(); const fishType = event.target.elements["fish-type"].value; const weatherCondition = event.target.elements.weather.value; const waterClarity = event.target.elements["water-clarity"].value; const season = event.target.elements.season.value; const timeOfDay = event.target.elements["time-of-day"].value; let recommendedLures = []; if (fishType === "trout") { if (weatherCondition === "sunny" && waterClarity === "clear") { recommendedLures.push("Small, natural-colored dry flies"); recommendedLures.push("Light-colored nymphs"); } else if (weatherCondition === "cloudy" && waterClarity === "stained") { recommendedLures.push("Bright-colored streamers"); recommendedLures.push("Woolly Buggers"); } if (season === "spring") { recommendedLures.push("Caddis fly imitations"); } else if (season === "summer") { recommendedLures.push("Terrestrial insect imitations"); } if (timeOfDay === "morning" || timeOfDay === "evening") { recommendedLures.push("Midge patterns"); } } else if (fishType === "bass") { if (weatherCondition === "sunny" && waterClarity === "clear") { recommendedLures.push("Topwater lures"); recommendedLures.push("Jerkbaits"); } else if (weatherCondition === "cloudy" && waterClarity === "murky") { recommendedLures.push("Dark-colored spinnerbaits"); recommendedLures.push("Jigs with trailers"); } if (season === "spring") { recommendedLures.push("Soft plastic lizards"); } else if (season === "summer") { recommendedLures.push("Deep-diving crankbaits"); } if (timeOfDay === "night") { recommendedLures.push("Large plastic worms"); recommendedLures.push("Buzzbaits"); } } else if (fishType === "salmon") { if (weatherCondition === "overcast" && waterClarity === "clear") { recommendedLures.push("Flashy spoons"); recommendedLures.push("Cut-plug herring"); } else if (weatherCondition === "rainy" && waterClarity === "stained") { recommendedLures.push("Bright-colored flies"); recommendedLures.push("Kwikfish"); } if (season === "fall") { recommendedLures.push("Egg patterns"); } if (timeOfDay === "morning" || timeOfDay === "evening") { recommendedLures.push("Glow-in-the-dark lures"); } } else if (fishType === "catfish") { if (weatherCondition === "warm" && waterClarity === "murky") { recommendedLures.push("Stink baits"); recommendedLures.push("Cut bait"); } else if (weatherCondition === "cool" && waterClarity === "clear") { recommendedLures.push("Live bait (worms or minnows)"); } if (season === "summer") { recommendedLures.push("Chicken liver"); } if (timeOfDay === "night") { recommendedLures.push("Glow-in-the-dark lures"); } } setRecommendation(recommendedLures.join(", ")); }; const handleAddLure = async (event) => { event.preventDefault(); const lureName = event.target.elements["lure-name"].value; const lureDescription = event.target.elements["lure-description"].value; const lureImage = event.target.elements["lure-image"].files[0]; const lureImageUrlInput = event.target.elements["lure-image-url"].value; let imageUrl = ""; if (lureImage) { const formData = new FormData(); formData.append("image", lureImage); try { const response = await fetch("/api/uploadImage", { method: "POST", body: formData, }); if (response.ok) { const data = await response.json(); imageUrl = data.url; } } catch (error) { console.error("Error uploading image:", error); } } else if (lureImageUrlInput) { imageUrl = lureImageUrlInput; } const newLure = { name: lureName, description: lureDescription, image: imageUrl }; try { const response = await fetch("/api/tackleBox", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(newLure), }); if (response.ok) { setTackleBox([...tackleBox, newLure]); event.target.reset(); setLureImageUrl(""); } } catch (error) { console.error("Error adding lure:", error); } }; return (

Fishing Lure Selector

Select Your Fishing Conditions

Location

Weather

Target Fish Species

Water Clarity

Season

Time of Day

{recommendation && (

Recommended Lures:

{lure}

)}

Add a New Lure or Fly to Your Tackle Box

Your Tackle Box

{tackleBox.map((lure, index) => (

{lure.image &&

}

{lure.name}

{lure.description}

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } // Server-side code export default async function server(req: Request): Promise { const { blob } = await import("https://esm.town/v/std/blob"); const url = new URL(req.url); const key = new URL(import.meta.url).pathname.split("/").at(-1); if (url.pathname === "/api/tackleBox") { if (req.method === "GET") { const tackleBox = await blob.getJSON(`${key}_tackleBox`) || []; return new Response(JSON.stringify(tackleBox), { headers: { "Content-Type": "application/json" }, }); } else if (req.method === "POST") { const newLure = await req.json(); const tackleBox = await blob.getJSON(`${key}_tackleBox`) || []; tackleBox.push(newLure); await blob.setJSON(`${key}_tackleBox`, tackleBox); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } } else if (url.pathname === "/api/uploadImage") { if (req.method === "POST") { const formData = await req.formData(); const image = formData.get("image") as File; if (image) { const imageBuffer = await image.arrayBuffer(); const imageKey = `${key}_image_${Date.now()}_${image.name}`; await blob.set(imageKey, imageBuffer); const imageUrl = `https://val.town/v1/blob/${imageKey}`; return new Response(JSON.stringify({ url: imageUrl }), { headers: { "Content-Type": "application/json" }, }); } } } return new Response(` Fishing Lure Selector

`, { headers: { "Content-Type": "text/html" }, }); }

cerebras_coder

Version 3