} addPenalty(0,'left'); addPenalty(W,'right'); // corner arcs const cornerR = metersToSvg(1,s); const corners = [ [s/2,s/2], [W - s/2, s/2], [s/2, H - s/2], [W - s/2, H - s/2] ]; corners.forEach(c => { const cArc = document.createElementNS('http://www.w3.org/2000/svg','path'); const [cx_,cy_] = c; // draw quarter circle 0->90 deg sized cornerR const d = `M ${cx_} ${cy_ + (cx_ < W/2 ? 0 : 0)} m 0 ${0} a ${cornerR} ${cornerR} 0 0 1 ${cornerR} ${cornerR}`; // simpler: draw a small circle sector using arc from angles // We'll draw a 90deg arc using path around corner let path; if(cx_ < W/2 && cy_ < H/2) path = `M ${cx_} ${cy_ + cornerR} A ${cornerR} ${cornerR} 0 0 0 ${cx_ + cornerR} ${cy_}`; if(cx_ > W/2 && cy_ < H/2) path = `M ${cx_ - cornerR} ${cy_} A ${cornerR} ${cornerR} 0 0 0 ${cx_} ${cy_ + cornerR}`; if(cx_ < W/2 && cy_ > H/2) path = `M ${cx_} ${cy_ - cornerR} A ${cornerR} ${cornerR} 0 0 0 ${cx_ + cornerR} ${cy_}`; if(cx_ > W/2 && cy_ > H/2) path = `M ${cx_ - cornerR} ${cy_} A ${cornerR} ${cornerR} 0 0 0 ${cx_} ${cy_ - cornerR}`; cArc.setAttribute('d', path); lineGroup.appendChild(cArc); }); pitch.appendChild(lineGroup); // add scale legend (meters) const legend = document.createElementNS('http://www.w3.org/2000/svg','text'); legend.setAttribute('x', 10); legend.setAttribute('y', 20); legend.setAttribute('fill', '#fff'); legend.setAttribute('font-size', Math.max(10, s*2)); legend.setAttribute('opacity', 0.9); legend.textContent = `${Wm} m × ${Hm} m — échelle: 1 m = ${s} px`; pitch.appendChild(legend); } function getDefaults(){ const preset = type.value; if(preset === 'full') return {widthM:105, heightM:68, scale:parseInt(scaleInput.value)}; if(preset === 'half') return {widthM:53, heightM:68, scale:parseInt(scaleInput.value)}; return {widthM:parseFloat(widthMInput.value||105), heightM:parseFloat(heightMInput.value||68), scale:parseInt(scaleInput.value)}; } function regen(){ const opts = getDefaults(); draw(opts); } type.addEventListener('change', ()=>{ if(type.value === 'custom'){ customInputs.style.display='inline-block'; customInputs2.style.display='inline-block'; } else { customInputs.style.display='none'; customInputs2.style.display='none'; } }); redrawBtn.addEventListener('click', regen); downloadBtn.addEventListener('click', ()=>{ const svgData = new XMLSerializer().serializeToString(pitch); const blob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'terrain-foot.svg'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }); printBtn.addEventListener('click', ()=>{ window.print(); }); // initial draw regen(); })();