dubs-server 1.0.0

package/services/matchupImageService.js

@@ -0,0 +1,591 @@
+/**
+ * 🎨 Matchup Image Generator Service
+ * 
+ * Server-side generation of matchup images using node-canvas.
+ * Generates a combined PNG image with:
+ * - Left/right team logos with radial gradient backgrounds
+ * - League logo centered on the seam
+ * - Noise texture overlay
+ * - Center highlight band
+ * 
+ * Images are generated ONCE at game creation and uploaded to S3.
+ */
+
+const { createCanvas, loadImage } = require('canvas');
+const path = require('path');
+const fs = require('fs');
+
+// Configuration - Full quality size (will be resized to 300x158 on upload for optimization)
+const DEFAULT_WIDTH = 600;
+const DEFAULT_HEIGHT = 315;
+const TEAM_LOGO_MAX_SIZE = 200;
+const LEAGUE_LOGO_MAX_SIZE = 60;
+
+// Palette extraction settings
+const ALPHA_THRESHOLD = 24;
+const SATURATION_THRESHOLD = 18;
+const MIN_CHANNEL_MAX = 30;
+const SAMPLE_MAX_PIXELS = 45000;
+const EXTRACTION_MAX_DIMENSION = 320;
+
+// Gradient settings
+const INNER_STOP = 0.45;
+const NOISE_STRENGTH = 0.06;
+const HIGHLIGHT_WIDTH = 80;
+const HIGHLIGHT_ALPHA = 0.35;
+
+/**
+ * Simple hash function for deterministic noise
+ */
+function hash(x, y) {
+  let h = x * 374761393 + y * 668265263;
+  h = (h ^ (h >> 15)) * 2246822507;
+  h = (h ^ (h >> 13)) * 3266489917;
+  return (h ^ (h >> 16)) >>> 0;
+}
+
+/**
+ * Convert RGB to hex string
+ */
+function rgbToHex(r, g, b) {
+  const toHex = (n) => {
+    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Extract color palette from a logo image
+ */
+function extractLogoPalette(img, canvas, ctx) {
+  // Scale down for faster processing
+  const scale = Math.min(
+    EXTRACTION_MAX_DIMENSION / img.width,
+    EXTRACTION_MAX_DIMENSION / img.height,
+    1
+  );
+  const extractWidth = Math.floor(img.width * scale);
+  const extractHeight = Math.floor(img.height * scale);
+
+  // Create temporary canvas for extraction
+  const extractCanvas = createCanvas(extractWidth, extractHeight);
+  const extractCtx = extractCanvas.getContext('2d');
+  
+  // Draw logo
+  extractCtx.drawImage(img, 0, 0, extractWidth, extractHeight);
+
+  // Get image data
+  const imageData = extractCtx.getImageData(0, 0, extractWidth, extractHeight);
+  const data = imageData.data;
+  const pixels = [];
+
+  // Collect valid logo pixels
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const a = data[i + 3];
+
+    // Skip transparent pixels
+    if (a < ALPHA_THRESHOLD) continue;
+
+    // Calculate luminance and saturation
+    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const saturation = max - min;
+
+    // Filter to logo pixels (saturated, visible colors)
+    if (saturation >= SATURATION_THRESHOLD && max >= MIN_CHANNEL_MAX) {
+      pixels.push({ r, g, b, luminance, saturation });
+    }
+  }
+
+  // If too few pixels, relax saturation threshold
+  let validPixels = pixels;
+  if (validPixels.length < 100) {
+    validPixels = pixels.filter(p => p.saturation >= Math.max(5, SATURATION_THRESHOLD - 5));
+  }
+
+  if (validPixels.length === 0) {
+    // Fallback to a neutral palette
+    return {
+      inner: '#4A90E2',
+      mid: '#2C5F8A',
+      outer: '#1A3A5A'
+    };
+  }
+
+  // Sample deterministically (stride-based)
+  const stride = Math.max(1, Math.floor(validPixels.length / SAMPLE_MAX_PIXELS));
+  const sampled = validPixels.filter((_, i) => i % stride === 0);
+
+  // Sort by vibrancy (saturation × luminance) for inner color
+  const sortedByVibrancy = [...sampled].sort(
+    (a, b) => (b.saturation * b.luminance) - (a.saturation * a.luminance)
+  );
+  const innerPixel = sortedByVibrancy[0] || sampled[0];
+
+  // Find median luminance for mid color
+  const sortedByLuminance = [...sampled].sort((a, b) => a.luminance - b.luminance);
+  const medianIndex = Math.floor(sampled.length / 2);
+  const midPixel = sortedByLuminance[medianIndex] || sampled[0];
+
+  // Find dark anchor for outer color
+  const darkPixels = sampled.filter(p => p.luminance < 100 && p.luminance > 10);
+  const outerPixel = darkPixels.length > 0 
+    ? darkPixels.sort((a, b) => a.luminance - b.luminance)[0]
+    : sortedByLuminance[0] || sampled[0];
+
+  return {
+    inner: rgbToHex(innerPixel.r, innerPixel.g, innerPixel.b),
+    mid: rgbToHex(midPixel.r, midPixel.g, midPixel.b),
+    outer: rgbToHex(outerPixel.r, outerPixel.g, outerPixel.b)
+  };
+}
+
+/**
+ * Draw radial gradient column
+ */
+function drawRadialGradientColumn(ctx, x, y, width, height, palette) {
+  const centerX = x + width / 2;
+  const centerY = y + height / 2;
+  const radius = Math.sqrt(
+    Math.pow(Math.max(centerX - x, x + width - centerX), 2) +
+    Math.pow(Math.max(centerY - y, y + height - centerY), 2)
+  );
+
+  const gradient = ctx.createRadialGradient(
+    centerX, centerY, 0,
+    centerX, centerY, radius
+  );
+
+  gradient.addColorStop(0, palette.inner);
+  gradient.addColorStop(INNER_STOP, palette.mid);
+  gradient.addColorStop(1, palette.outer);
+
+  ctx.fillStyle = gradient;
+  ctx.fillRect(x, y, width, height);
+}
+
+/**
+ * Draw deterministic noise texture overlay
+ */
+function drawNoiseTexture(ctx, width, height) {
+  const existingData = ctx.getImageData(0, 0, width, height);
+  const existing = existingData.data;
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const index = (y * width + x) * 4;
+      const noiseValue = (hash(x, y) % 256) / 255;
+      const gray = Math.floor(noiseValue * 255);
+      const alpha = noiseValue * NOISE_STRENGTH;
+
+      existing[index] = Math.floor(gray * alpha + existing[index] * (1 - alpha));
+      existing[index + 1] = Math.floor(gray * alpha + existing[index + 1] * (1 - alpha));
+      existing[index + 2] = Math.floor(gray * alpha + existing[index + 2] * (1 - alpha));
+    }
+  }
+
+  ctx.putImageData(existingData, 0, 0);
+}
+
+/**
+ * Draw center highlight band
+ */
+function drawCenterHighlight(ctx, width, height) {
+  const centerX = width / 2;
+  const halfWidth = HIGHLIGHT_WIDTH / 2;
+
+  const gradient = ctx.createLinearGradient(
+    centerX - halfWidth, 0,
+    centerX + halfWidth, 0
+  );
+
+  gradient.addColorStop(0, `rgba(255, 255, 255, 0)`);
+  gradient.addColorStop(0.5, `rgba(255, 255, 255, ${HIGHLIGHT_ALPHA})`);
+  gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+
+  ctx.fillStyle = gradient;
+  ctx.fillRect(centerX - halfWidth, 0, HIGHLIGHT_WIDTH, height);
+}
+
+/**
+ * Draw image with contain fit (maintains aspect ratio, centered)
+ */
+function drawContain(ctx, img, centerX, centerY, maxWidth, maxHeight) {
+  const imgAspect = img.width / img.height;
+  const maxAspect = maxWidth / maxHeight;
+
+  let drawWidth, drawHeight;
+
+  if (imgAspect > maxAspect) {
+    drawWidth = maxWidth;
+    drawHeight = maxWidth / imgAspect;
+  } else {
+    drawHeight = maxHeight;
+    drawWidth = maxHeight * imgAspect;
+  }
+
+  const x = centerX - drawWidth / 2;
+  const y = centerY - drawHeight / 2;
+
+  ctx.drawImage(img, x, y, drawWidth, drawHeight);
+}
+
+// Base URL for loading logos - can be the SPA's public folder or S3
+const LOGO_BASE_URL = process.env.MATCHUP_LOGO_BASE_URL || 'https://dubs.app';
+
+/**
+ * Team name mappings for cases where TheSportsDB name differs from our file names
+ * Key: TheSportsDB team name (lowercase)
+ * Value: Our file name (without extension)
+ */
+const TEAM_NAME_OVERRIDES = {
+  // EPL - Map API names to local file names
+  'bournemouth': 'afc_bournemouth',
+  'brighton': 'brighton_and_hove_albion',
+  'brighton & hove albion': 'brighton_and_hove_albion',
+  'brighton and hove albion': 'brighton_and_hove_albion',
+  'man city': 'manchester_city',
+  'man utd': 'manchester_united',
+  'wolves': 'wolverhampton_wanderers',
+  'spurs': 'tottenham_hotspur',
+  'tottenham': 'tottenham_hotspur',
+  "nott'm forest": 'nottingham_forest',
+  'nottingham': 'nottingham_forest',
+  'leeds': 'leeds_united',
+  'newcastle': 'newcastle_united',
+  'west ham': 'west_ham_united',
+
+  // NHL - Handle Utah team rename
+  'utah hockey club': 'utah_mammoth',
+  'arizona coyotes': 'utah_mammoth',
+
+  // NBA
+  'la clippers': 'la_clippers',
+
+  // NCAAB - Map ESPN names to our file names
+  'uconn huskies': 'connecticut',
+  'uconn': 'connecticut',
+  "st. john's red storm": 'st_johns',
+  "st. john's": 'st_johns',
+  'ole miss rebels': 'mississippi',
+  'ole miss': 'mississippi',
+  'pitt panthers': 'pittsburgh',
+  'pitt': 'pittsburgh',
+  'lsu tigers': 'lsu',
+  'smu mustangs': 'southern_methodist',
+  'smu': 'southern_methodist',
+  'ucf knights': 'ucf_knights',
+  'tcu horned frogs': 'tcu',
+  'unlv rebels': 'unlv',
+  'utep miners': 'utep',
+  'vcu rams': 'vcu',
+  'uab blazers': 'uab',
+  'stanford cardinal': 'stanford',
+  'rutgers scarlet knights': 'rutgers',
+};
+
+/**
+ * Common college mascot names to strip from team names
+ */
+const NCAAB_MASCOTS = [
+  'wildcats', 'bulldogs', 'tigers', 'eagles', 'hawks', 'bears', 'lions',
+  'cougars', 'huskies', 'spartans', 'wolverines', 'buckeyes', 'gophers',
+  'badgers', 'hoosiers', 'boilermakers', 'hawkeyes', 'cornhuskers',
+  'jayhawks', 'sooners', 'longhorns', 'aggies', 'red raiders', 'horned frogs',
+  'cowboys', 'razorbacks', 'volunteers', 'commodores', 'gamecocks',
+  'crimson tide', 'fighting irish', 'blue devils', 'tar heels', 'wolfpack',
+  'demon deacons', 'cavaliers', 'hokies', 'yellow jackets', 'seminoles',
+  'hurricanes', 'orange', 'cardinals', 'cardinal', 'fighting illini', 'golden gophers',
+  'nittany lions', 'mountaineers', 'panthers', 'blue jays', 'red storm',
+  'friars', 'musketeers', 'pirates', 'colonials', 'rams', 'flyers', 'explorers',
+  'billikens', 'bonnies', 'braves', 'bison', 'phoenix', 'knights', 'scarlet knights', 'owls',
+  'pilots', 'waves', 'gaels', 'dons', 'broncos', 'toreros', 'aztecs',
+  'rebels', 'utes', 'coyotes', 'anteaters', 'tritons', 'matadors', 'titans',
+  'mustangs', 'gauchos', 'hornets', 'lumberjacks', 'vandals',
+  'grizzlies', 'bobcats', 'thunderbirds', 'roadrunners', 'miners', 'mean green',
+  'blazers', 'jaguars', 'trojans', 'bruins', 'ducks', 'beavers',
+  'cougs', 'sun devils', 'buffaloes', 'falcons', 'rainbow warriors', 'warriors', 'bearkats', 'cyclones'
+];
+
+/**
+ * Strip mascot name from NCAAB team name
+ * "Duke Blue Devils" → "duke"
+ * "Michigan State Spartans" → "michigan_state"
+ */
+function stripNCAABMascot(teamName) {
+  let name = teamName.toLowerCase();
+
+  // Sort by length (longest first) to match multi-word mascots first
+  const sortedMascots = [...NCAAB_MASCOTS].sort((a, b) => b.length - a.length);
+
+  for (const mascot of sortedMascots) {
+    if (name.endsWith(' ' + mascot)) {
+      name = name.slice(0, name.length - mascot.length - 1).trim();
+      break;
+    }
+  }
+
+  return name;
+}
+
+/**
+ * Get team badge URL from team name
+ * Uses remote URL (SPA or CDN) rather than local file
+ */
+function getTeamBadgeUrl(teamName, league) {
+  const lowerName = teamName.trim().toLowerCase();
+
+  // Check for overrides first
+  if (TEAM_NAME_OVERRIDES[lowerName]) {
+    return `${LOGO_BASE_URL}/major_league_logos/${league}/${TEAM_NAME_OVERRIDES[lowerName]}.png`;
+  }
+
+  // For NCAAB, strip mascot names (e.g., "Duke Blue Devils" → "duke")
+  if (league === 'NCAAB') {
+    const strippedName = stripNCAABMascot(teamName);
+    const formattedName = strippedName
+      .toLowerCase()
+      .split(' ').join('_')
+      .replace(/[\.,?!']/g, '')
+      .replace(/&/g, 'and');
+    return `${LOGO_BASE_URL}/major_league_logos/NCAAB/${formattedName}.png`;
+  }
+
+  // For UFC, find fighter file (handles partial names like "Adesanya" → "israel_adesanya")
+  if (league === 'UFC') {
+    const formattedName = findUFCFighterFile(teamName);
+    return `${LOGO_BASE_URL}/major_league_logos/UFC/${formattedName}.png`;
+  }
+
+  // Default formatting: lowercase, spaces to underscores, remove punctuation
+  const formattedName = lowerName.split(' ').join('_').replace(/[\.,?!]/g, '');
+  return `${LOGO_BASE_URL}/major_league_logos/${league}/${formattedName}.png`;
+}
+
+/**
+ * Normalize UFC fighter name to match local file name
+ * "Sean Strickland" → "sean_strickland"
+ */
+function normalizeUFCFighterName(name) {
+  return name
+    .toLowerCase()
+    .replace(/\s+/g, '_')
+    .replace(/'/g, '')
+    .replace(/\./g, '')
+    .replace(/-/g, '_');
+}
+
+/**
+ * Find UFC fighter file by partial match
+ * Handles cases where only last name is provided (e.g., "Adesanya" → "israel_adesanya.png")
+ */
+function findUFCFighterFile(searchName) {
+  const normalizedSearch = normalizeUFCFighterName(searchName);
+  const ufcDir = path.join(__dirname, '../../../dubs-jackpot-spa/public/major_league_logos/UFC');
+
+  try {
+    // First try exact match
+    const exactPath = path.join(ufcDir, `${normalizedSearch}.png`);
+    if (fs.existsSync(exactPath)) {
+      return normalizedSearch;
+    }
+
+    // If not found, search for files containing the search term
+    const files = fs.readdirSync(ufcDir);
+    for (const file of files) {
+      if (file.endsWith('.png') && file.includes(normalizedSearch)) {
+        // Return filename without extension
+        return file.replace('.png', '');
+      }
+    }
+
+    console.log(`[MatchupImage:UFC] No file found for fighter: ${searchName} (searched: ${normalizedSearch})`);
+    return normalizedSearch; // Return original as fallback
+  } catch (err) {
+    console.error(`[MatchupImage:UFC] Error searching for fighter file:`, err.message);
+    return normalizedSearch;
+  }
+}
+
+/**
+ * Get league logo URL
+ * Returns null for leagues without a league logo (NCAAB, NCAAF, UFC)
+ */
+function getLeagueLogoUrl(league) {
+  const leagueLogos = {
+    'NHL': 'nhl.png',
+    'NBA': 'nba.png',
+    'NFL': 'nfl.png',
+    'MLB': 'mlb.png',
+    'EPL': 'epl.png'
+  };
+  // Some leagues don't have league logos - return null for them
+  if (!leagueLogos[league]) {
+    return null;
+  }
+  return `${LOGO_BASE_URL}/major_league_logos/${league}/${leagueLogos[league]}`;
+}
+
+/**
+ * Load image from URL with retry logic
+ */
+async function safeLoadImage(url, retries = 2) {
+  for (let attempt = 0; attempt <= retries; attempt++) {
+    try {
+      console.log(`[MatchupImage] Loading: ${url} (attempt ${attempt + 1})`);
+      const img = await loadImage(url);
+      return img;
+    } catch (err) {
+      console.warn(`[MatchupImage] Failed to load: ${url}`, err.message);
+      if (attempt < retries) {
+        await new Promise(r => setTimeout(r, 500 * (attempt + 1))); // Exponential backoff
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Generate matchup image for a game
+ *
+ * @param {Object} options
+ * @param {string} options.homeTeam - Home team name (e.g., "Toronto Maple Leafs" or "Sean Strickland")
+ * @param {string} options.awayTeam - Away team name (e.g., "Florida Panthers" or "Anthony Hernandez")
+ * @param {string} options.league - League abbreviation (NHL, NBA, NFL, MLB, UFC, NCAAB)
+ * @param {number} [options.width=600] - Output width
+ * @param {number} [options.height=315] - Output height
+ *
+ * @returns {Promise<{buffer: Buffer, dataUrl: string, palettes: Object}>}
+ */
+async function generateMatchupImage(options) {
+  const {
+    homeTeam,
+    awayTeam,
+    league = 'NHL',
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT
+  } = options;
+
+  // EPL and UFC use "Home vs Away" convention (Home on left), US sports use "Away @ Home" (Away on left)
+  const leagueUpper = league?.toUpperCase();
+  const isHomeFirst = leagueUpper === 'EPL' || leagueUpper === 'UFC';
+  const leftTeam = isHomeFirst ? homeTeam : awayTeam;
+  const rightTeam = isHomeFirst ? awayTeam : homeTeam;
+
+  console.log(`[MatchupImage] Generating: ${leftTeam} vs ${rightTeam} (${league}) [HomeFirst=${isHomeFirst}]`);
+
+  // Create canvas
+  const canvas = createCanvas(width, height);
+  const ctx = canvas.getContext('2d');
+
+  // Construct logo URLs from team/fighter names (same for all leagues now)
+  const leftLogoUrl = getTeamBadgeUrl(leftTeam, league);
+  const rightLogoUrl = getTeamBadgeUrl(rightTeam, league);
+  const leagueLogoUrl = getLeagueLogoUrl(league);
+
+  console.log(`[MatchupImage] Loading logos:`, { leftLogoUrl, rightLogoUrl, leagueLogoUrl });
+
+  const [leftImg, rightImg, leagueImg] = await Promise.all([
+    safeLoadImage(leftLogoUrl),
+    safeLoadImage(rightLogoUrl),
+    leagueLogoUrl ? safeLoadImage(leagueLogoUrl) : Promise.resolve(null)
+  ]);
+
+  // Default palettes for when logos fail to load
+  const defaultLeftPalette = { inner: '#4A90E2', mid: '#2C5F8A', outer: '#1A3A5A' };
+  const defaultRightPalette = { inner: '#E24A4A', mid: '#8A2C2C', outer: '#5A1A1A' };
+
+  // NCAAB: use white/light-gray backgrounds so single-color college logos stay visible
+  const whitePalette = { inner: '#FFFFFF', mid: '#F5F5F5', outer: '#EBEBEB' };
+  const grayPalette = { inner: '#ECEEF4', mid: '#E2E4EC', outer: '#D8DAE2' };
+
+  // Extract palettes from logos (skip for NCAAB - use white)
+  let leftPalette = defaultLeftPalette;
+  let rightPalette = defaultRightPalette;
+
+  if (leagueUpper === 'NCAAB') {
+    leftPalette = whitePalette;
+    rightPalette = grayPalette;
+  } else {
+    if (leftImg) {
+      leftPalette = extractLogoPalette(leftImg, canvas, ctx);
+    }
+    if (rightImg) {
+      rightPalette = extractLogoPalette(rightImg, canvas, ctx);
+    }
+  }
+
+  // Draw left column gradient (away team)
+  const columnWidth = width / 2;
+  drawRadialGradientColumn(ctx, 0, 0, columnWidth, height, leftPalette);
+
+  // Draw right column gradient (home team)
+  drawRadialGradientColumn(ctx, columnWidth, 0, columnWidth, height, rightPalette);
+
+  // Draw noise texture
+  drawNoiseTexture(ctx, width, height);
+
+  // Draw center highlight
+  drawCenterHighlight(ctx, width, height);
+
+  // Draw team logos
+  if (leftImg) {
+    drawContain(ctx, leftImg, columnWidth / 2, height / 2, TEAM_LOGO_MAX_SIZE, TEAM_LOGO_MAX_SIZE);
+  }
+  if (rightImg) {
+    drawContain(ctx, rightImg, columnWidth + columnWidth / 2, height / 2, TEAM_LOGO_MAX_SIZE, TEAM_LOGO_MAX_SIZE);
+  }
+
+  // Draw league logo centered on seam
+  if (leagueImg) {
+    drawContain(ctx, leagueImg, width / 2, height / 2, LEAGUE_LOGO_MAX_SIZE, LEAGUE_LOGO_MAX_SIZE);
+  }
+
+  // Export as PNG buffer
+  const buffer = canvas.toBuffer('image/png');
+  const dataUrl = canvas.toDataURL('image/png');
+
+  console.log(`[MatchupImage] Generated image: ${buffer.length} bytes`);
+
+  return {
+    buffer,
+    dataUrl,
+    palettes: {
+      left: leftPalette,
+      right: rightPalette
+    },
+    size: { width, height }
+  };
+}
+
+/**
+ * Supported leagues for matchup image generation
+ */
+const SUPPORTED_LEAGUES = ['NHL', 'NBA', 'NFL', 'MLB', 'EPL', 'NCAAB', 'UFC'];
+
+/**
+ * Check if a league is supported for matchup images
+ */
+function isLeagueSupported(league) {
+  return SUPPORTED_LEAGUES.includes(league?.toUpperCase());
+}
+
+/**
+ * Check if we can generate a matchup image for a game
+ * (We can generate for any game with team names and a supported league)
+ */
+function canGenerateMatchupImage(homeTeam, awayTeam, league) {
+  return !!(homeTeam && awayTeam && isLeagueSupported(league));
+}
+
+module.exports = {
+  generateMatchupImage,
+  isLeagueSupported,
+  canGenerateMatchupImage
+};
+