/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { marked } from "https://esm.sh/marked@4.3.0"; function App() { const [sport, setSport] = useState(""); const [skillLevel, setSkillLevel] = useState(""); const [ageGroup, setAgeGroup] = useState(""); const [regenerateKey, setRegenerateKey] = useState(0); const [selectedTopics, setSelectedTopics] = useState([]); const [groupSize, setGroupSize] = useState(""); const [trainingPlan, setTrainingPlan] = useState(""); const [loading, setLoading] = useState(false); const [showSpinner, setShowSpinner] = useState(false); const [sharing, setSharing] = useState(false); useEffect(() => { let timer; if (loading) { timer = setTimeout(() => setShowSpinner(true), 2000); } else { setShowSpinner(false); } return () => clearTimeout(timer); }, [loading]); const handleSubmit = async (e, isRegenerate = false) => { if (e) e.preventDefault(); setLoading(true); setTrainingPlan(""); const response = await fetch("/generate-training", { method: "POST", headers: { "Content-Type": "application/json", "Regenerate-Key": regenerateKey.toString() }, body: JSON.stringify({ sport, skillLevel, ageGroup, groupSize, selectedTopics }), }); const data = await response.json(); setTrainingPlan(data.trainingPlan); setLoading(false); }; const handleRegenerate = () => { setRegenerateKey(prevKey => prevKey + 1); setLoading(true); handleSubmit(null, true); }; const handleShare = async () => { setSharing(true); try { await fetch("/share-training", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ trainingPlan }), }); alert("Training plan shared successfully!"); } catch (error) { alert("Failed to share training plan. Please try again."); } setSharing(false); }; const sportTopics = { "Tennis": [ "Forehand", "Backhand", "Serve", "Volley", "Footwork", "Net play", "Lob", "Slice", "Drop shot", "Return of serve" ], "Basketball": [ "Dribbling", "Shooting", "Passing", "Layups", "Rebounding", "Defense", "Pick and roll", "Free throws", "Post moves", "Fast break" ], "Soccer": [ "Dribbling", "Passing", "Shooting", "Ball control", "Heading", "Tackling", "Goalkeeping", "Set pieces", "Positioning", "First touch" ], "Australian Rules Football": [ "Kicking", "Handball", "Marking", "Tackling", "Bouncing", "Ruck work", "Positioning", "Shepherding", "Spoiling", "Goal kicking" ], "Golf": [ "Driving", "Iron play", "Putting", "Chipping", "Pitching", "Bunker shots", "Course management", "Grip", "Stance", "Swing mechanics" ] }; const handleTopicSelection = (topic) => { if (selectedTopics.includes(topic)) { setSelectedTopics(selectedTopics.filter(t => t !== topic)); } else if (selectedTopics.length < 3) { setSelectedTopics([...selectedTopics, topic]); } }; return (

Coach Companion

Sport Training Planner

{showSpinner &&

} {!showSpinner && ( <> {!sport ? ( ) : !trainingPlan && !loading ? (

Select 3 topics for {sport}:

{sportTopics[sport].map(topic => ( ))}

Selected topics: {selectedTopics.length}/3

{selectedTopics.length === 3 && ( )}

) : (

)} )}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } const css = ` @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap'); :root { --primary-color: #3a86ff; --secondary-color: #8338ec; --background-color: #f8f9fa; --text-color: #333; --border-color: #dee2e6; } body { font-family: 'Inter', sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: var(--background-color); color: var(--text-color); } .container { max-width: 800px; margin: 0 auto; background-color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } header { text-align: center; margin-bottom: 40px; } h1 { font-size: 2.5em; color: var(--primary-color); margin-bottom: 10px; } h2 { font-size: 1.5em; color: var(--secondary-color); font-weight: 400; } form { display: flex; flex-direction: column; gap: 20px; } select, input, button { padding: 12px 16px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 8px; font-family: 'Inter', sans-serif; transition: all 0.3s ease; } select:focus, input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.2); } button { background-color: var(--primary-color); color: #fff; cursor: pointer; font-weight: 600; border: none; } button:hover { background-color: var(--secondary-color); transform: translateY(-2px); } button:disabled { background-color: var(--border-color); cursor: not-allowed; transform: none; } .planner-section { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .topic-grid button { padding: 10px; background-color: #f1f3f5; border: 2px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.3s; color: var(--text-color); font-weight: 400; } .topic-grid button.selected { background-color: var(--primary-color); color: white; font-weight: 600; } .training-plan { background-color: #fff; border-radius: 12px; padding: 30px; margin-top: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .training-plan h3 { color: var(--secondary-color); margin-top: 25px; } .training-plan ul, .training-plan ol { padding-left: 20px; } .training-plan li { margin-bottom: 10px; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; } .button-container { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } .action-button { flex: 1; max-width: 200px; padding: 12px 20px; font-size: 14px; font-weight: 600; text-align: center; background-color: var(--primary-color); color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .action-button:hover { background-color: var(--secondary-color); transform: translateY(-2px); } .action-button:disabled { background-color: var(--border-color); cursor: not-allowed; transform: none; } @media (max-width: 600px) { .container { padding: 20px; } .topic-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .button-container { flex-direction: column; align-items: center; } .action-button { width: 100%; max-width: none; } } .spinner { width: 50px; height: 50px; border: 5px solid var(--border-color); border-top: 5px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/generate-training") { const YOUTUBE_API_KEY = Deno.env.get("YOUTUBE_API_KEY"); if (!YOUTUBE_API_KEY) { return new Response(JSON.stringify({ error: "YouTube API key is not set" }), { status: 500, headers: { "Content-Type": "application/json" }, }); } const { OpenAI } = await import("https://esm.town/v/std/openai"); const regenerateKey = request.headers.get("Regenerate-Key") || "0"; const openai = new OpenAI(); const { sport, skillLevel, ageGroup, groupSize, selectedTopics } = await request.json(); const prompt = `Create a comprehensive and detailed training plan for a ${sport} session focusing on the following topics: ${selectedTopics.join(', ')}. The participants are in the age group of ${ageGroup} years, ${skillLevel} skill level, and the group size is ${groupSize}. The training plan should be highly structured, informative, and easy to follow. Format the response in markdown, including headers for each section. Include the following sections: 1. Objectives: List 3-5 specific learning objectives for the session. 2. Equipment Needed: List all necessary equipment for the session. 3. Warm-up (10-15 minutes): - Include dynamic stretching exercises - Add sport-specific warm-up drills 4. Skill Focus (20-30 minutes): - Introduce or review the 3 selected skills or techniques - Provide detailed explanations and key coaching points for each skill - Include progressive drills for each skill (start simple, then increase complexity) - For each main drill or technique, include a placeholder for a video demonstration in the format: [VIDEO: Drill Name] 5. Game Situation / Scrimmage (20-30 minutes): - Design a game or scrimmage that incorporates the skills practiced - Explain any modified rules or constraints to emphasize the learned skills 6. Cool-down (5-10 minutes): - Include light cardio and static stretching 7. Reflection and Feedback (5 minutes): - Suggest questions for group discussion about the session - Provide tips for giving constructive feedback to participants 8. Conclusion: - Summarize the key points of the training - List 3-5 essential questions that participants should be able to answer after the session - Emphasize the importance of practicing the learned skills - Provide specific suggestions for how coaches can reinforce these skills in future sessions - Encourage participants to reflect on their progress and set goals for improvement Ensure that the conclusion ties together all the main concepts covered in the training, reinforces the learning objectives, and provides clear takeaways for both participants and coaches. The questions in the conclusion should prompt critical thinking about the skills practiced and their application in the sport.`; const completion = await openai.chat.completions.create({ messages: [{ role: "user", content: prompt + `\n\nRegenerate key: ${regenerateKey}` }], model: "gpt-4o-mini", max_tokens: 1500, }); let trainingPlan = marked(completion.choices[0].message.content); // Extract video placeholders const videoPlaceholders = trainingPlan.match(/\[VIDEO: .+?\]/g) || []; // Fetch and embed YouTube videos for (const placeholder of videoPlaceholders) { const searchQuery = placeholder.replace('[VIDEO: ', '').replace(']', ''); const videoId = await getYouTubeVideoId(searchQuery, sport, YOUTUBE_API_KEY); if (videoId) { const embedHtml = `

`; trainingPlan = trainingPlan.replace(placeholder, embedHtml); } } return new Response(JSON.stringify({ trainingPlan }), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/share-training") { const { trainingPlan } = await request.json(); const { email } = await import("https://esm.town/v/std/email"); await email({ subject: "Your Coach Companion Training Plan", text: "Here's your training plan:", html: `

Your Coach Companion Training Plan

${trainingPlan} `, }); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } return new Response(` Coach Companion - Sport Training Planner

`, { headers: { "content-type": "text/html" }, }); } async function getYouTubeVideoId(query, sport, apiKey) { const searchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${encodeURIComponent(sport + ' ' + query)}&key=${apiKey}&type=video&maxResults=1`; const response = await fetch(searchUrl); const data = await response.json(); if (data.items && data.items.length > 0) { return data.items[0].id.videoId; } return null; } export default server;

CoachCompanionv3