AI Soccer Coach

Put yourself inside a soccer situation and get tactical feedback from an AI coach.

STEP 1

Your Situation

Tell the coach your position and what phase of play you're analyzing.

Position

Phase of Play

STEP 2

Build the Situation

Drag the players and ball to show what happened.

Tactical Pitch

YOU

Describe what happened

</
textarea>
</div>
<div class="mt-5">
<label class="font-bold text-sm">
Tactical image (optional)
</label>
<input
id="imageInput"
type="file"
accept="image/png,image/jpeg,image/webp"
class="mt-2 block w-full text-sm text-slate-400"
/>
<p class="text-xs text-slate-500 mt-2">
You can upload a screenshot, drawing, or whiteboard.
</p>
</div>
<button
id="analyzeButton"
onclick="analyze()"
class="mt-6 w-full bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-black py-4
rounded-xl">
Analyze My Play
</button>
</section>

<section id="loading" class="screen fade">
<div class="min-h-[70vh] flex flex-col justify-center items-center text-center">
<div class="w-16 h-16 border-4 border-slate-800 border-t-emerald-500 rounded-full animate-
spin mb-6"></div>
<h2 class="text-2xl font-black">
Coach is watching the play...
</h2>
<p class="text-slate-400 mt-3">
Analyzing positioning, awareness and decision-making.
</p>
</div>
</section>

<section id="response" class="screen fade">
<div class="flex flex-wrap justify-between items-center gap-4 mb-6">
<div>
<p class="text-emerald-400 text-sm font-bold">
COACH REPORT
</p>
<h2 class="text-3xl font-black">
Your Tactical Analysis
</h2>
<p id="responseMeta" class="text-slate-400 mt-1"></p>
</div>
<button
onclick="showScreen('setup')"
class="bg-slate-800 hover:bg-slate-700 px-4 py-3 rounded-xl text-sm">
New Analysis
</button>
</div>

<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-5">
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 text-center">
<p class="text-xs text-slate-400">Positioning</p>
<div id="scorePos" class="score text-emerald-400">-</div>
<p class="text-xs text-slate-500">/10</p>
</div>
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 text-center">
<p class="text-xs text-slate-400">Awareness</p>
<div id="scoreAw" class="score text-cyan-400">-</div>
<p class="text-xs text-slate-500">/10</p>
</div>
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 text-center">
<p class="text-xs text-slate-400">Decision</p>
<div id="scoreDec" class="score text-amber-400">-</div>
<p class="text-xs text-slate-500">/10</p>
</div>
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 text-center">
<p class="text-xs text-slate-400">Overall</p>
<div id="scoreOverall" class="score text-emerald-400">-</div>
<p class="text-xs text-slate-500">/10</p>
</div>
</div>

<div class="space-y-4">
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
<h3 class="font-black text-emerald-400 mb-2">
Where should you be?
</h3>
</div>
<p id="where" class="text-slate-300 leading-relaxed"></p>
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
<h3 class="font-black text-cyan-400 mb-2">
What should you scan?
</h3>
</div>
<p id="scan" class="text-slate-300 leading-relaxed"></p>
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
<h3 class="font-black text-indigo-400 mb-2">
Why?
</h3>
<p id="why" class="text-slate-300 leading-relaxed"></p>
</div>
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
<h3 class="font-black text-emerald-400 mb-2">
What should you do?
</h3>
</div>
<p id="action" class="text-slate-300 leading-relaxed"></p>
<div class="grid sm:grid-cols-2 gap-4">
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
<h3 class="font-black text-orange-400 mb-2">
Coach's Take
</h3>
</div>
<p id="take" class="text-slate-300 leading-relaxed"></p>
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5">
<h3 class="font-black text-emerald-400 mb-2">
Next-Game Focus
</h3>
</div>
<p id="focus" class="text-slate-300 leading-relaxed"></p>
</div>
</div>
<button
onclick="saveAnalysis()"
class="mt-5 w-full bg-slate-800 hover:bg-slate-700 py-4 rounded-xl font-bold">
Save This Report
</button>
</section>
</main>

<div
id="historyModal"
class="fixed inset-0 bg-black/70 backdrop-blur-sm hidden items-center justify-center p-4 z-50">
<div class="bg-slate-900 border border-slate-800 rounded-3xl w-full max-w-xl max-h-[80vh]
overflow-hidden">
<div class="p-5 border-b border-slate-800 flex justify-between">
<h2 class="font-black text-lg">Saved History</h2>
<button onclick="closeHistory()" class="text-slate-400">
✕
</button>
</div>
<div id="historyList" class="p-5 overflow-y-auto max-h-[65vh]"></div>
</div>
</div>
<footer class="text-center text-slate-600 text-xs py-6">
AI Soccer Coach • OpenAI powered
</footer>
<script>
const state = {
position: "CAM",
phase: "Attacking",
lastAnalysis: null
};
const positions = [
["GK", "Goalkeeper"],
["CB", "Center Back"],
["FB", "Fullback"],
["CDM", "CDM"],
["CM", "CM"],
["CAM", "CAM"],
["Winger", "Winger"],
["Striker", "Striker"]
];
const phases = [
["Attacking", "Your team has the ball"],
["Defending", "The opponent has the ball"],
["Transition", "Right after winning or losing possession"],
["Build-up", "Playing out from the back"]
];
function showScreen(id) {
document.querySelectorAll(".screen").forEach(screen => {
screen.classList.remove("active");
});
document.getElementById(id).classList.add("active");
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
function renderPositions() {
const container = document.getElementById("positions");
container.innerHTML = positions.map(([id, label]) => {
const selected = state.position === id;
return `
<button
onclick="selectPosition('${id}')"
class="p-4 rounded-xl border text-left font-bold
${selected
? "bg-emerald-500/10 border-emerald-500 text-white"
: "bg-slate-900 border-slate-800 text-slate-400 hover:border-slate-600"}">
${label}
</button>
`;
}).join("");
}
function renderPhases() {
const container = document.getElementById("phases");
container.innerHTML = phases.map(([id, description]) => {
const selected = state.phase === id;
return `
<button
onclick="selectPhase('${id}')"
class="p-4 rounded-xl border text-left
${selected
? "bg-emerald-500/10 border-emerald-500"
: "bg-slate-900 border-slate-800 hover:border-slate-600"}">
<div class="font-bold">${id}</div>
<div class="text-xs text-slate-500 mt-1">
${description}
</div>
</button>
`;
}).join("");
}
function selectPosition(position) {
state.position = position;
renderPositions();
}
function selectPhase(phase) {
state.phase = phase;
renderPhases();
}
function goToSituation() {
document.getElementById("currentBadge").textContent =
`${state.position} • ${state.phase}`;
showScreen("situation");
}
function resetPitch() {
const defaults = {
TGK: [50,90],
TLB: [18,75],
TCB1: [38,78],
TCB2: [62,78],
TRB: [82,75],
TCM1: [35,60],
TCM2: [65,60],
TLW: [15,35],
TRW: [85,35],
TST: [50,25],
YOU: [50,48],
OGK: [50,10],
OLB: [20,28],
OCB1: [40,25],
OCB2: [60,25],
ORB: [80,28],
OCM1: [40,43],
OCM2: [60,43],
BALL: [50,47]
};
Object.entries(defaults).forEach(([id, [x,y]]) => {
const element =
document.querySelector(`[data-id="${id}"]`);
if (element) {
element.style.left = `${x}%`;
element.style.top = `${y}%`;
}
});
}
function setupDragging() {
const pitch = document.getElementById("pitch");
document.querySelectorAll(".player, .ball").forEach(element => {
let dragging = false;
element.addEventListener("pointerdown", event => {
dragging = true;
element.setPointerCapture(event.pointerId);
event.preventDefault();
});
element.addEventListener("pointermove", event => {
if (!dragging) return;
const rect = pitch.getBoundingClientRect();
let x =
((event.clientX - rect.left) / rect.width) * 100;
let y =
((event.clientY - rect.top) / rect.height) * 100;
x = Math.max(4, Math.min(96, x));
y = Math.max(5, Math.min(95, y));
element.style.left = `${x}%`;
element.style.top = `${y}%`;
});
element.addEventListener("pointerup", () => {
dragging = false;
});
});
}
function getPitchPositions() {
const result = {};
document.querySelectorAll("[data-id]").forEach(element => {
result[element.dataset.id] = {
x: element.style.left,
y: element.style.top
};
});
return result;
}
async function imageToDataURL(file) {
if (!file) return null;
if (file.size > 6 * 1024 * 1024) {
throw new Error("Image must be smaller than 6 MB.");
}
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
async function analyze() {
const text =
document.getElementById("situationText").value.trim();
if (!text) {
alert("Describe what happened first.");
return;
}
const button =
document.getElementById("analyzeButton");
button.disabled = true;
button.textContent = "Analyzing...";
showScreen("loading");
try {
const file =
document.getElementById("imageInput").files[0];
const image =
await imageToDataURL(file);
const response = await fetch("/api/analyze", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
position: state.position,
phase: state.phase,
situationText: text,
pitch: getPitchPositions(),
image
})
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || "Analysis failed.");
}
state.lastAnalysis = data;
renderResponse(data);
saveToLocalHistory(data);
showScreen("response");
} catch (error) {
console.error(error);
alert(error.message);
showScreen("situation");
} finally {
button.disabled = false;
button.textContent = "Analyze My Play ";
}
}
function renderResponse(data) {
document.getElementById("responseMeta").textContent =
`${data.position} • ${data.phase}`;
document.getElementById("scorePos").textContent = data.pos;
document.getElementById("scoreAw").textContent = data.aw;
document.getElementById("scoreDec").textContent = data.dec;
document.getElementById("scoreOverall").textContent = data.ov;
document.getElementById("where").textContent = data.where;
document.getElementById("scan").textContent = data.scan;
document.getElementById("why").textContent = data.why;
document.getElementById("action").textContent = data.action;
document.getElementById("take").textContent = data.take;
document.getElementById("focus").textContent = data.focus;
}
function saveToLocalHistory(data) {
const history =
JSON.parse(localStorage.getItem("soccerCoachHistory") || "[]");
history.unshift({
...data,
savedAt: new Date().toISOString()
});
localStorage.setItem(
"soccerCoachHistory",
JSON.stringify(history.slice(0, 30))
);
}
function saveAnalysis() {
if (!state.lastAnalysis) return;
saveToLocalHistory(state.lastAnalysis);
alert("Saved to your device!");
}
function openHistory() {
const modal =
document.getElementById("historyModal");
modal.classList.remove("hidden");
modal.classList.add("flex");
renderHistory();
}
function closeHistory() {
const modal =
document.getElementById("historyModal");
modal.classList.add("hidden");
modal.classList.remove("flex");
}
function renderHistory() {
const container =
document.getElementById("historyList");
const history =
JSON.parse(localStorage.getItem("soccerCoachHistory") || "[]");
if (!history.length) {
container.innerHTML = `
<div class="text-center text-slate-500 py-10">
No saved reports yet.
</div>
`;
return;
}
container.innerHTML = history.map((item, index) => `
<button
onclick="openHistoryItem(${index})"
class="w-full text-left bg-slate-950 border border-slate-800 rounded-2xl p-4 mb-3
hover:border-emerald-500/50">
<div class="flex justify-between gap-3">
<strong>
${escapeHTML(item.position)}
•
${escapeHTML(item.phase)}
</strong>
<span class="text-emerald-400 font-black">
${item.ov}/10
</span>
</div>
<p class="text-slate-400 text-sm mt-2 line-clamp-2">
${escapeHTML(item.situationText || "")}
</p>
</button>
`).join("");
}
function openHistoryItem(index) {
const history =
JSON.parse(localStorage.getItem("soccerCoachHistory") || "[]");
const item = history[index];
if (!item) return;
state.lastAnalysis = item;
renderResponse(item);
closeHistory();
showScreen("response");
}
function escapeHTML(value) {
return String(value)
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
renderPositions();
renderPhases();
setupDragging();
resetPitch();
</script>
</body>
</html>