Update lineupRenderer.js

lineupRenderer.js

@@ -154,9 +154,10 @@ function drawPitch(ctx, W, H) {
  * @param {string} title - Title to display on the image
  * @param {Array} formation - Array of [posKey, posLabel]
  * @param {object} client - Discord client for fetching user data
+ * @param {boolean} flipY - If true, flip Y coordinates (for opposing team view)
  * @returns {Promise<Buffer>} PNG image buffer
  */
-async function renderLineupImage(lineup, title, formation, client) {
+async function renderLineupImage(lineup, title, formation, client, flipY = false) {
     const PITCH_W = 900;
     const SIDEBAR_W = 280;
     const W = PITCH_W + SIDEBAR_W;
@@ -306,105 +307,107 @@ async function renderLineupImage(lineup, title, formation, client) {
         ctx.fillText('No substitutes yet', SIDEBAR_W / 2, subY + 20);
     }
 
-    // --- Start Drawing Players ---
-    const avatarSize = 48;
-    const avatarRadius = avatarSize / 2;
-
-    for (const [posKey, posLabel] of formation) {
-        const coords = POSITION_COORDS[posKey];
-        if (!coords) continue;
-
-        const x = SIDEBAR_W + (coords[0] / 100) * PITCH_W;
-        const y = (coords[1] / 100) * H;
-        const players = lineup.get(posKey) || [];
-
-        if (players.length > 0) {
-            ctx.save();
-            ctx.shadowColor = '#00ff88';
-            ctx.shadowBlur = 18;
-            ctx.beginPath();
-            ctx.arc(x, y, avatarRadius + 4, 0, Math.PI * 2);
-            ctx.fillStyle = 'rgba(0,255,136,0.3)';
-            ctx.fill();
-            ctx.restore();
-        }
+// --- Start Drawing Players ---
+  const avatarSize = 48;
+  const avatarRadius = avatarSize / 2;
+
+  for (const [posKey, posLabel] of formation) {
+    const coords = POSITION_COORDS[posKey];
+    if (!coords) continue;
+
+    const x = SIDEBAR_W + (coords[0] / 100) * PITCH_W;
+    const y = flipY ? ((100 - coords[1]) / 100) * H : (coords[1] / 100) * H;
+    const players = lineup.get(posKey) || [];
+
+    if (players.length > 0) {
+      ctx.save();
+      ctx.shadowColor = '#00ff88';
+      ctx.shadowBlur = 18;
+      ctx.beginPath();
+      ctx.arc(x, y, avatarRadius + 4, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(0,255,136,0.3)';
+      ctx.fill();
+      ctx.restore();
+    }
 
-        if (players.length > 0 && client) {
-            const userId = players[0];
-            const data = userDataMap.get(userId);
-
-            if (data && data.img) {
-                ctx.save();
-                ctx.beginPath();
-                ctx.arc(x, y, avatarRadius, 0, Math.PI * 2);
-                ctx.clip();
-                ctx.drawImage(data.img, x - avatarRadius, y - avatarRadius, avatarSize, avatarSize);
-                ctx.restore();
-
-                ctx.beginPath();
-                ctx.arc(x, y, avatarRadius + 2, 0, Math.PI * 2);
-                ctx.strokeStyle = '#ffffff';
-                ctx.lineWidth = 2.5;
-                ctx.stroke();
-            } else {
-                ctx.beginPath();
-                ctx.arc(x, y, avatarRadius, 0, Math.PI * 2);
-                ctx.fillStyle = '#5865F2';
-                ctx.fill();
-                ctx.strokeStyle = '#ffffff';
-                ctx.lineWidth = 2;
-                ctx.stroke();
-                ctx.fillStyle = '#ffffff';
-                ctx.font = 'bold 16px Arial, sans-serif';
-                ctx.textAlign = 'center';
-                ctx.textBaseline = 'middle';
-                ctx.fillText('?', x, y);
-            }
+    if (players.length > 0 && client) {
+      const userId = players[0];
+      const data = userDataMap.get(userId);
 
-            if (data && data.user) {
-                const displayName = data.user.globalName || data.user.username;
-                const truncated = displayName.length > 10 ? displayName.slice(0, 9) + '…' : displayName;
-                const labelY = y + avatarRadius + 14;
-                ctx.font = 'bold 11px Arial, sans-serif';
-                ctx.textAlign = 'center';
-                const textWidth = ctx.measureText(truncated).width;
-                const pillW = textWidth + 12;
-                const pillH = 16;
-
-                roundRect(ctx, x - pillW / 2, labelY - pillH / 2, pillW, pillH, 4);
-                ctx.fillStyle = 'rgba(0,0,0,0.75)';
-                ctx.fill();
-
-                ctx.fillStyle = '#ffffff';
-                ctx.textBaseline = 'middle';
-                ctx.fillText(truncated, x, labelY);
-            }
-        } else {
-            ctx.beginPath();
-            ctx.arc(x, y, avatarRadius, 0, Math.PI * 2);
-            ctx.fillStyle = 'rgba(0,0,0,0.35)';
-            ctx.fill();
-            ctx.setLineDash([4, 4]);
-            ctx.strokeStyle = 'rgba(255,255,255,0.5)';
-            ctx.lineWidth = 1.5;
-            ctx.stroke();
-            ctx.setLineDash([]);
-        }
+      if (data && data.img) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(x, y, avatarRadius, 0, Math.PI * 2);
+        ctx.clip();
+        ctx.drawImage(data.img, x - avatarRadius, y - avatarRadius, avatarSize, avatarSize);
+        ctx.restore();
 
-        const posLabelY = players.length > 0 ? y - avatarRadius - 10 : y - avatarRadius - 8;
-        ctx.font = 'bold 12px Arial, sans-serif';
+        ctx.beginPath();
+        ctx.arc(x, y, avatarRadius + 2, 0, Math.PI * 2);
+        ctx.strokeStyle = '#ffffff';
+        ctx.lineWidth = 2.5;
+        ctx.stroke();
+      } else {
+        ctx.beginPath();
+        ctx.arc(x, y, avatarRadius, 0, Math.PI * 2);
+        ctx.fillStyle = '#5865F2';
+        ctx.fill();
+        ctx.strokeStyle = '#ffffff';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        ctx.fillStyle = '#ffffff';
+        ctx.font = 'bold 16px Arial, sans-serif';
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
+        ctx.fillText('?', x, y);
+      }
+
+      if (data && data.user) {
+        const displayName = data.user.globalName || data.user.username;
+        const truncated = displayName.length > 10 ? displayName.slice(0, 9) + '...' : displayName;
+        const labelY = flipY ? y - avatarRadius - 14 : y + avatarRadius + 14;
+        ctx.font = 'bold 11px Arial, sans-serif';
+        ctx.textAlign = 'center';
+        const textWidth = ctx.measureText(truncated).width;
+        const pillW = textWidth + 12;
+        const pillH = 16;
 
-        const posTextW = ctx.measureText(posLabel).width + 10;
-        roundRect(ctx, x - posTextW / 2, posLabelY - 8, posTextW, 16, 3);
-        ctx.fillStyle = players.length > 0 ? 'rgba(88,101,242,0.9)' : 'rgba(100,100,100,0.8)';
+        roundRect(ctx, x - pillW / 2, labelY - pillH / 2, pillW, pillH, 4);
+        ctx.fillStyle = 'rgba(0,0,0,0.75)';
         ctx.fill();
 
         ctx.fillStyle = '#ffffff';
-        ctx.fillText(posLabel, x, posLabelY);
+        ctx.textBaseline = 'middle';
+        ctx.fillText(truncated, x, labelY);
+      }
+    } else {
+      ctx.beginPath();
+      ctx.arc(x, y, avatarRadius, 0, Math.PI * 2);
+      ctx.fillStyle = 'rgba(0,0,0,0.35)';
+      ctx.fill();
+      ctx.setLineDash([4, 4]);
+      ctx.strokeStyle = 'rgba(255,255,255,0.5)';
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      ctx.setLineDash([]);
     }
 
+    const posLabelY = flipY
+      ? (players.length > 0 ? y + avatarRadius + 10 : y + avatarRadius + 8)
+      : (players.length > 0 ? y - avatarRadius - 10 : y - avatarRadius - 8);
+    ctx.font = 'bold 12px Arial, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    const posTextW = ctx.measureText(posLabel).width + 10;
+    roundRect(ctx, x - posTextW / 2, posLabelY - 8, posTextW, 16, 3);
+    ctx.fillStyle = players.length > 0 ? 'rgba(88,101,242,0.9)' : 'rgba(100,100,100,0.8)';
+    ctx.fill();
+
+    ctx.fillStyle = '#ffffff';
+    ctx.fillText(posLabel, x, posLabelY);
+  }
+
     // 4. Footer watermark
     ctx.fillStyle = 'rgba(0,0,0,0.5)';
     ctx.fillRect(0, H - 22, W, 22);
@@ -427,4 +430,4 @@ async function createLineupAttachment(lineup, title, formation, client) {
     return new AttachmentBuilder(buffer, { name: 'lineup.png' });
 }
 
-module.exports = { renderLineupImage, createLineupAttachment };
+module.exports = { renderLineupImage, createLineupAttachment };